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

@Quinn1989 I will send you a PM so we can take a better look at the issue you are facing :slightly_smiling_face:

Hey @Thimo, is there any reason why inserting html isnā€™t possible via an action?

Your editor is the best in the market 100% but doesnā€™t play well with importing html. We have chatted about this before when it comes to it and you suggested that if we want to display html we should just do that with a html element.

I ahve done that and it works fine, but for me a non coder it was a time sink to wrestle with why things were and were not happening. Luckly I had Chat GPT that got me through haha.

Anyway, I import a lot of external HTML from scraping and being able to display it in the editor would be so helpful as it means I/my users can edit the html later if I wanted with the imported HTML.

Thanks mate

Hi @bkerryk! Not sure if I understand, why would you want to insert HTML into the editor using actions? Also, what kind of HTML are we talking about; HTML the editor puts out or HTML you scraped from the web?

If you could give me more details about this feature then I can let you know if I can do something on my end :slight_smile:

Both HTML, but at the very least HTML that the editor outputs.

Simple use case is when we want to allow our user to go back and edit the text they saved. Yes we can save the JSON and then re-populate the editor with the saved JSON. But since HTML is much more useful for all sorts of other things, I would rather save HTML only.

My specific use case is a little different, my users might want to edit the scrape data I collect, and so Iā€™d like to insert the scrapped HTML into the editor for them to start editing.

Funny thing is, I can go to a website manually, copy the websites text and then paste it into your editor and it will correctly format the pasted text into the editor (headers, formatting, lists etc). I basically want that as an action to insert into the editor.

So I looked into the technology responsible for the copy/paste scenarios I was talking about and I learnt itā€™s called ā€œRich Text Format (RTF)ā€ which gets copied to your clipboard and then word processors like your plugin can interpret that and convert it to JSON/HTML or whatever.

Man I want that as a server action haha!

Yes exactly :slight_smile: As RTF is different than displaying HTML in the plugin, this will not work with a plugin action.

The HTML output the plugin offers is mostly custom made by me, so the plugin does not natively accept HTML as a data source. I will need to write a parser for that that will format the HTML to JSON for the plugin to display. This is a pretty big feature, but Iā€™ve put it on my list, but I canā€™t give you a timeframe when it is goining to be implemented unfortunately

1 Like

Hey @Thimo,

Amazing work with this plugin! Probably the best RTE plugin on Bubble :blush:

Question: For the ā€œWarningā€ block, is it possible to render it to look like a Notion callout block

Screenshot 2023-01-15 at 00.29.07

or something like a Boostrap alert block?

Additionally, when adding an image block, the caption is in an input-like block (even in read-only mode). Is there a way to make it look like text and have the option to center it rather than it looking like an input in read-only mode? (Does that make sense?)

So something like this (example from Ghost), and when you type and publish, it looks something like this (2nd screenshot)

Thanks! Keep up the great work :blush:

Hi @johnny! I agree that these styles need to be changed. It is hard to get exactly that styling for the warning block, but I have pushed an update (1.31.0) that improves the warning and image caption style. This is how it looks:

I will try to improve the warning block read-only style even more in future updates!

2 Likes

Hi @Thimo,

This is great! Thanks for your prompt update :slight_smile:

FYI: yesterday I updated to the latest version (the one with the description about changes to the initial state) caused issues when I tried to save the JSON body, but when I downgraded to the version before that everything worked fine. Will need to check to see if it was patched in this latest update.

This plugin looks great, however, I wanted to know if itā€™s possible to limit types of blocks that could be used and also how I would go about creating custom block-typesā€¦

@Alan_x_n yes you can limit the block types that show up! You can hide almost al the blocks. You can see how this works when you go to the editor of the demo page :slight_smile:

Right now you canā€™t create custom block types as these need to work on plugin level. Hopefully this helps!

1 Like

Update 1.32.0 & 1.32.1

  • Added ā€˜Insert text at cursor positionā€™ workflow action
  • ā€˜Insert text blockā€™ workflow action now supports index
  • Added state ā€˜current block indexā€™
3 Likes

Hi @Thimo !

Love your plugin, truly is the best RTE around. I keep getting this error randomly in the debugger:

The plugin Modern Rich Text Editor (Editor.js) / element Modern Rich Text Editor threw the following error: TypeError: instance.data.editor.save is not a function
    at Object.onChange (PLUGIN_1588965419744x293900219628912640/Modern-Rich-Text-Editor--Editor-js--update--Modern-Rich-Text-Editor-.js:133:38)
    at eval (PLUGIN_1588965419744x293900219628912640/Modern-Rich-Text-Editor--Editor-js--update--Modern-Rich-Text-Editor-.js:809:31) (please report this to the plugin author)

Itā€™s not causing me any issues but Iā€™m a stickler for not having any errors pop up

1 Like

@ihsanzainal84 Pushed an update (1.35.3) that should fix that issue! :slight_smile:

1 Like

Iā€™m planning to upload the images to my Wasabi storage and Iā€™m trying to figure out how to do it for images uploaded through your MRTE.

I donā€™t see any events or options supporting this right now. Is there something that I missed?

I mean I can technically setup my own workflow to search for and replace any images in the JSON and HTML but I was wondering if you already have something built in that i missed?

Right now the images will be uploaded directly to your Bubble storage. There is not really a way to upload these images to a different storage provider directly. The best way to go about it right now is like you mentioned to setup your own workflow and to search and replace any images :slight_smile:

2 Likes

Maybe I missed it, but does it include (or do you plan to include) the internationalization package? nice plugin :slight_smile:

Hi @Future!

I just pushed Update 1.36.0 & 1.36.1 that adds basic internationalization features:

3 Likes

Amazing stuff, @Thimo ! Have tested this a few days and itā€™s awesome.

A few questions:

  1. When switching to Headings, it seems to automatically select H3. I would like that to be H2, actually, for SEO purposes. Is that possible?

  2. Iā€™m not sure why, but changing between the Heading style is not intuitive to me. I would like to able to select text, then change the H1-H2-H3 style as well. Is that possible?

  3. I receive an error when loading up the Display Data action. This might be a loading error, as it disappears shortly after.

All in all, this plugin really makes a difference, itā€™s great to use (regardless of my comments above). Also, love the internationalization featues, works well so far. :+1:

1 Like

Hi @karl.myrvang thanks for your nice words!

These 2 points are a bit library specific and I am not sure if I can change it, but I will put it on my list to explore possibilities! :slight_smile:

Could you by any chance send me a reproducible example, or give me a bit more details when this happens? (you could also send me a PM)
Would love to push a fix for this issue :slight_smile: