Forum Academy Marketplace Showcase Pricing Features

📝 ZQ Rich Text Editor 2.0 - New Plugin From Zeroqode

Hey @ZeroqodeSupport,

I’ve gotten reports from my client and just tested this. We use the Stop typing trigger to execute saving of the text in the editor to the database (as a replacement for autobind).

However, whenever that happens, the editor will jump back to the first character in the editor. This gif explains it best:

Is there any way to get around this or is this an issue that you can have a look at?

We have a team of editors working with texts, and naturally this issue is very disturbing to their workflow as they need to physically click back to the right position if they stop typing for just a second.

Hi @petter,

Let us please check on this use case and we’ll get back to you with a reply on this matter asap.

Thank you for understanding. :pray:

Best regards,
Zeroqode Team

Thank you :pray:

Hi @petter,

We have tested the plugin and this issue is not reproducing on our side, unfortunately. Without knowing more about your workflow and plugin settings, here is a hint that might help. Please try to use one of the following plugin elements:

image

Because the simple RTE is deprecated, unfortunately. Try both, but it might be best to use the ZQ RTE one with the Stop Typing event. Also, make sure to use this event properly and select the right element from your page and if you perhaps don’t locate duplicate plugin elements with the same name.

However, if you still experience the same or any other issues, please share more details like screenshots/screencast of your app and workflow, window of the plugin element settings, browser and OS you are using. This way, we can better understand whether it is a plugin issue or not, then get back with a reply asap.

Plugin’s documenation - https://docs.zeroqode.com/plugins/zq-rte-plugin-2.0, that might be helpful.

Best regards,
Zeroqode Team

1 Like

Hi @ZeroqodeSupport,

Thanks for getting back to me. I’ll dig into your suggestions and see if there’s anything we’ve missed on our side, and let you know how it goes.

1 Like

Hi again @ZeroqodeSupport

I’ve set up completely new element on a blank test page now, using the ZQ RTE element on version 1.61.0. I’ve sent you a link to the page in a PM where you can see if it’s replicable that way.

  • I’m not changing any settings on the element except for the Initial content
  • It happens both if I save HTML and if I save text
  • It happens both in Chrome and Firefox (Mac)
  • It happens in both the ZQRTE and the ZQLiteRTE elements


There are two glitches that occur:

  • The sizing of the element is not correct, overlapping other elements until you save (then it corrects itself)
  • Whenever it saves the text, it moves the cursor back to the first character

You can see both issues illustrated here:

I see you’re not accepting messages on that channel, but let me know if I can send the link to you in another way.

UPDATE:
I’ve done some more research, and think I’ve been able to circle it in more closely:

Cursor skip
If the Initial content is left blank, the cursor no longer skips back to the beginning when the content is saved. So it’s definitely connected to when the initial content is refreshed. In the gif below, I’m showing the saved text in a regular text element above the ZQRTE element, but leaving the initial content setting blank:
2020-05-22_19-56-35 (1)

Sizing error
The sizing error only occurs when the element is inside of a group. When placed directly on the page, it renders correctly, but inside of a group, it displays incorrectly. The element on the right in this illustration is inside of a group with red borders. They should both align with the red rectangle, but you can see the one on the right not lining up correctly:

Hi @petter,

Thanks for your feedback. Please let us check on the use cases and we’ll get back with a feedback asap.

Thank you for understanding.

1 Like

Thanks, I appreciate it :slight_smile:

Hi @petter, we have found the reasons for both issues.

For Cursor skip, if you leave the Content blank, it will not reproduce the cursor reset behavior, indeed. Also, if you type some initial content as static:

image

It will still not reproduce this behavior, it works fine. The reason for this cursor reset, is actually in this way of introducing the content value:

image

As it is a dynamic value for the actual variable within your database, Bubble will refresh the app and reset all inputs from your app when you make the changes to the database, which is why it is throwing that cursor at the beginning. Unfortunately, it is something we cannot influence, as it is just the way Bubble works.
In order to solve it, it would be best to just leave it blank or you could set initial content with a static value.


For Sizing error, this might be a plugin issue, indeed. Our development team is already checking on this one. We’ll get back to you with an update on this matter asap.


Thank you for your patience.

Best regards,
Zeroqode Team

Hi @petter,

We’re reaching out back to notify that we’ve fixed the height issue. Please upgrade the plugin to the latest version, refresh your app and give it a try.

Best regards,
Zeroqode Team

Hey guys,

Sorry for my delayed reply, been a hectic week… first, thanks for following up, I really appreciate it.

For the cursor skip, I see what you mean that Bubble resets the input after saving. For now I’ve gotten around it by storing the initial content in a state and loading it from there, instead of setting a dynamic value as the initial content.

For the size issuee, I’m still seeing this on my end. I’m on version 1.62.00, and have cleared and reloaded and tried in both Chrome and Firefox. Is there anything I can send you that can help get to the bottom of this one?

Hi @petter,

We’re glad it’s working for you. Also, thanks for the insights with setting the initial content as a state!

Have you actually upgraded the plugin to the latest version? Because this issue is not reproducing on our side anymore. We have fixed it and now the plugin elements can be placed into a Group element, keeping its size: (the following pictures for illustration purposes)

Group element:

Plugin’s element:

Preview:
image

Please try to make sure the plugin has been upgraded. Then, perhaps try to add a new plugin element on the page and place it inside a Group element and see how it behaves on preview. It should not be reproducing on whether it’s Chrome or Firefox; Mac or Windows. However, if you still experience the same issue, please share screenshots of your app and the exact steps of how to reproduce it, so we could check on our side whether it’s still a plugin issue or not, then provide a working solution asap.

Best regards
Zeroqode Team

Hi @petter,

We hope you are doing well. We’re actually reaching out to ask for your help on this matter regarding the cursor skip issue:

Could you please describe how exactly you’ve managed to workaround this by using a state. It would be best to share a couple of screenshots of your app and workflows, because other users are having the same problem, so it would be great to replicate the workaround! Meanwhile, our development team will check if it’s possible to improve the plugin and eliminate this behavior asap.

Best regards,
Zeroqode Team

Hi @ZeroqodeSupport

Yes, sure. It’s very simple, so not sure if screenshots needed, but I’ll add if you want:

  1. On page load (or data type load) set a State of type text so that it contains the text from the data type field you want to edit
  2. Set that state as the initial content of the ZQEditor

As the state doesn’t change even when you save, the input remains “undisturbed” by Bubble’s element reset that would normally cause the cursor to skip.

Element height
For this one, the reason it’s taken me time to get back is that I’m trying to get to the bottom of what circumstances causes this (as it happens sometimes, but not always).

1 Like

Hi @petter,

Thanks a lot for your feedback! This workaround is very handy. Additionally, our development team has managed to fix this cursor skip issue within the plugin itself. Please upgrade it to the latest version, refresh your app and give it a try, without necessarily setting a state. You could simply insert dynamic data into Content field, so even if you make changes to the database and it gets updated in the editor as well, the cursor will not jump anymore.

Best regards,
Zeroqode Team

Hey guys!

Thanks again on all the follow-up on this plugin.

There’s one small change that I’d like to ask. Leaving the Placeholder field empty will result in the editor showing Null instead of simply nothing. Would you mind leaving that text empty instead?

Hi @petter,

Thanks for reaching out. Please let us check on it and fix, as it should not show this null message when leaving the Placeholder empty.

We’ll notify you back on this one asap.

Best regards,
Zeroqode Team

1 Like

Hi @petter,

We managed to fix this one. Please upgrade to the latest version, refresh your app and give it a try.

Best regards,
Zeroqode Team

Hi,

Does this allow tables and if so can I just add plug in, and change the current rich text input bubble input fields and all settings (like default data population and saving inputs or binding) hold?

thanks,