[New plugin] Modern Rich Text Editor (Editor.js)

Yes! I am of course not sure how your application looks and where you are pulling the initial data from but of you replace that with the initial data from the demo I send you should get the same result! Also make sure you are on the latest version of the plugin :slight_smile:

I see, I think I can also add some custom css to the plugin that will change the cursor the same way as it changes hovering standard inputs. I will put that on my list as I think that is a good UX improvement!

1 Like

I did this by getting rid of the HTML tags using :find&replace.

Basically, this:

  1. Make a new field in your thing for the Plain Text data.
  2. Use an iterator (I use Floppy, but List Popper or other would also work) to modify the thing and set the Plain Text field to this:

image

So i am taking the HTML (in this case from ModernRTE but you could do it from your Zeroqode field also).

The Find&replace actions for me are preserving paragraphas and bullet points, but you might be able to preserve other things.


In this one the replace is a return, but you can’t see it.


Then I replace all bullets with [return] [dash] [space]

Finally, I get rid of all the remaining html code, replacing any remaining code with nothing

2 Likes

Hey @Thimo,

I plan to use your plugin for my users to write some long scripts with autobiding. However, there’s a Bubble native limitation in autobinding that it only saves to the database when the user clicks out of the focused input. This is terrible for my use case - many users already lost a lot of work.

The native Rich Text Input from Bubble has a feature called ā€œenable Autosaveā€ that solves completely my problem. It updates the database ~3 seconds after the user stops typing - even if the input is still focused. It works really well.

autosave

Do you see a way to do something like this using your plugin?

Thanks

Hi @gabriel.guilhem

Updating the data on focus-out event is actually a pretty standard practice, how are your users exactly losing data because of that? Would love to understand how this happens so I can improve the autobinding behavior! :slight_smile:

Hey,

Thanks for the reply.

It turns out that my users usually stay writing during long sessions. They do not focus-out the input very often - this specific page is a replica of the Google Docs page. It does not even have many other elements to ā€œfocus-outā€.

Given that, as the work is not saved very often, any external reason like closing the tab, internet connection issues or turning the device off can possibly make them lose their work.

As I mentioned, I’ve been able to workaround this with the plugin I mentioned above, but I would love to be able to use your plugin to offer a much better writing experience for my users without taking the risk of them losing their long session works.

@gabriel.guilhem I see! As autobinding is a very complicated feature, it will take some time to improve this, but I will put it on my list! A work around could be is for you to implement logic that saves the editor content every ~10 seconds to a different data type, e.g. called ā€˜save point’, that way you always have a backup of the editor content for the user. When you load the document you can do a quick check if the data from the save point is different from the data you have saved using autobinding. If that is the case you use the data from your save point. Does that help? :slight_smile:

Hey @Thimo ! Seeing a weird issue with the tagging feature. See the loom below. I am trying this on my user database as a test, but I don’t see why it is inserting so many weird gaps:

When looking at the json it seems to want to make a span for every id…

Hi @drfalken! I am not able to reproduce this issue. I will send you a PM so we can take a better look at the issue! :slight_smile:

HI- I am getting an error with this great plugin…
The plugin Modern Rich Text Editor (Editor.js) / action Display Data (JSON) a Modern Rich Text Editor threw the following error: anonymous@
@https://[redacted].bubbleapps.io/package/run_js/fb6ea531fa4355d304ae1c7c3bf1222c91cb3ea23dcd09affe61744850950db5/xfalse/x28/run.js:264:676
run_with_error@https://[redacted].bubbleapps.io/package/run_js/fb6ea531fa4355d304ae1c7c3bf1222c91cb3ea23dcd09affe61744850950db5/xfalse/x28/run.js:266:70 (please report this to the plugin author).

It is happening when I am trying to use the display plain text workflow action.

The user can still OK the message and see the text, but it shows up twice.

Any advice?

Hi @TekaTeki!

Looking at the error it is not really clear to me what is happening. Just to check, are you sure you are only running the workflow action when the Text Editor is loaded and visible on the page? You can check if the text editor is loaded by the ā€˜is loaded’ state on the text editor element :slight_smile:

Hem, okay, so right now the workflow action triggers on opening the popup that has the element in it, but you suggest it triggers on the isloaded of the element instead? I can give that a try if that is what you mean.

Yes that is exactly what I mean. It will look something like this (keep in mind the is loaded state is only set once when the element is loaded): Texteditordemo | Bubble Editor

Okay, thanks for your guidanace… this worked. The element is set to initially show JSON data. I had a condition that if JSON was empty to show plain text but had to remove that since it over-rode the workflow.

The workflow is set to trigger when the element is loaded.

now it works perfectly… thanks so much!

1 Like

Hey @Thimo

Sorry if this has been posted above and I missed it, however I’ve run into some oddities while trying to implement an inline version as shown in your demo example. I’m using it in a slightly out of the box use case for a rich comments section, using read-only mode for the posted comments.

Issue 1: Although I’ve set Bottom padding to 0 in the plugin options, I’m still getting padding applied to the top and bottom of the field:

I couldn’t seem to find any top padding switch, and it’s quite odd to me that this is 5.6px padding as it makes it hard for me to offset it pixel perfect in my design to compensate. Is there a way to completely remove this?

Issue 2: I am using Bubble’s experimental keyboard/mouse shortcut plugin that binds workflows to keys, it has a checkbox that allows me to ignore those bindings when a native Bubble input is focused.

It’s not a surprise that it doesn’t work with this plugin, however I noticed that the plugin provides an Is Focused? state in the conditions window, but I can’t access this as an event in the workflow editor… If I could access this I’d be able to set a custom state to manually unbind those keys to enable proper editing using this plugin. Is this something you could provide?

Exists here

image

But not here

image

Any help on this would be appreciated

Tom

Not sure how I didn’t think of this before, but I was able to rig this up:

image

However unfortunately it doesn’t work

image

Back to the drawing board… :sweat_smile:

Hi @tmxl I have answered your questions below!

This is actually a different padding. This is a block based text editor so every block has its own padding for proper spacing. This should always be the same. As you can imagine, we need this padding if we have multiple blocks showing for proper spacing between blocks (:

You should be able to use the ā€˜do when condition is true’ workflow event for this focused state to trigger workflows :slight_smile:

Thanks for the speedy reply @Thimo

Right that makes sense. I’ll deal with it via spacing other elements - no biggie.

And yes, I had a brainwave and tried that above, but it doesn’t work in my case and still rejects the input of those keys. It’s probably more to do with the Bubble plugin than this plugin I suspect.

I’ll keep trying - thank you!

1 Like

@Thimo another one for you:

Can you please provide a way to turn off captions for images in editing and read-only modes? My use case doesn’t require them and they add a lot of vertical height to the input and make some UI elements look odd as you can see here:

Notice the white space below the image, and the lack of whitespace in the image within the embedded image with just text.

Also on this point, images cannot be deleted via backspace which is a problem for inline setups like mine that don’t provide the user with access to the ā€˜tuning’ menu’s delete button. Is there a way around this? For now I just have a clear button for the entire field which is less than ideal as it clears everything, not just the image in question.

Thanks
T

@tmxl Thanks for flagging these improvements! After looking into it, I have implemented a way to hide the image caption fields! Also, I added the option (which is enabled by default) for images to be deleted on backspace. Definitely a good UX improvement! You updater to 1.93.0 to check out these new features!

PS: If you have not already, I would also recommend to add some padding as a new block will be added when the text editor is clicked. Should improve the UX even more:

(this padding will be automatically hidden in read-only mode)

1 Like

You’re a legend, thanks @Thimo !