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

@sarabeth I have investigated and it seems like the text alignment tune is not visible in the HTML output. I am also unable to create a custom parser for it as it does not seem to get recognized. I have left a comment on Github, hopefully it will be picked up soon :slight_smile:

Hey @Thimo I have encountered a bunch of problems with the editor ā€˜losing’ tags, and even worse, overwriting the info in the DB . It happens randomly, but is pretty troublesome as I have other systems look for that tag data. See video:

Debugging further, the tag information is missing in the json/html, even though it shows up in the debugger:

Not sure what is happening here. I will send you a DM so we can take a better look at the issue!

@Thimo just put this on my app and it’s clearly a well built plugin. Loving it so far and the HTML rendering is giving me good vibes when the content is presented elsewhere. :heart:

One thing I can’t override / control is the added right padding. When the editor is <470px (or so) both right and left padding disappears, the add & config buttons (on the left) then float. Perfect! However when the editor is wider, right padding of about 100px is added. I understand why we need left padding but the right padding adds much unwanted whitespace. Is there a way to control this please?

I searched but this is a big thread, I looked for padding and didn’t find a response.

Image - to show what happens when my editor is wider:

@manipaje The padding is the same on both sides of the text editor for symmetry purposes. This is the default from the library actually. As you mentioned that you like the way the menu looks on mobile, you could enable this feature so the padding will be removed, and you will get a floating menu :slight_smile: →

Thanks @thimo - I’ve tried switching that option on, the padding / margin still persists. When switching on the display icon below option, it forces this CSS:

#id3555231 .codex-editor {
padding-left: 40px !important;
padding-right: 40px !important;
}

which results in the left margin being small but the right margin becomming 10px bigger! no symmetry.

And I tried with the ā€˜hide plus and settings’ icon (to see - I don’t want to do this) and it then adds:

@media (min-width: 651px)
.codex-editor–narrow .codex-editor__redactor {
margin-right: 50px;
}

Ideally, I’d have the plus/settings icon on the left, with no/10px margin on the right. Any amount of CSS forcing has failed:

.codex-editor,
.codex-editor–narrow,
.codex-editor–empty {
padding-right: 0 !important;
margin-right: 0 !important;
}

Is it obvious what I am missing? help appreciated

I can’t seem to override this additional 50px margin, which with the icon below is no longer symmetrical, it’s just hogging space on the right.

@manipaje You can’t override the padding like that as it is a library default. However, if you enable the option to have the menu below the block, you can use the margin controls in Bubble to make the additional space smaller. You can also do this without enabling this option, but that will cause you to have more space on the left as there needs to be room for the floating menu.

Take a look at this demo I made you, it will show you how to decrease the room on the sides of the editor: Texteditordemo | Bubble Editor :slight_smile:

1 Like

Nailed it! Negative margins - doh. Thanks for pointing out my error. That’s made it pretty robust for how I’ve added it into my app. Thanks you so much for making a page to show it, the rumours are true. you do provide very excellent support :heart:

1 Like

Sharing my implementation plan - just in case it’s useful for others. I added this editor to a RE which shows in a popup. There’s one instance but users can navigate in this popup to other database entries. The database has three text fields for description (plain and two new JSON and HTML fields).

Because of my setup, I struggled with the fallback to plain text approach - it caused errors with autobinding and how I’ve added save on navigation. I decided to just make a quick admin tool to go through every item in my database and set the JSON and HTML versions of the original plain text version. Then I unhide the new editor and checked if any user had edited during that small window (no - safe :sweat_smile: )

I am sure I could’ve made it less clunky but I think it’s worked and I feel mostly reassured I’ve now migrated from plain text to now rich text. I’ll stop sweating when 48 hours has passed and I get no customer emails :smiley:

1 Like

Hi, @Thimo! Any plans to add Tagify functionality to either this or the Tag Users plugin?

Hi @sydney22, How would you like that implemented exactly? The RTE already supports tagging and the Tag Users Plugin also supports tagging using similar custom made logic :slight_smile:

@thimo Like this:

input-tag

Which plugin would you suggest between the RTE and Tag Users plugins?

Hey @Thimo something I noticed which is definitely an annoyance for users, you can’t copy paste multiple lines into the table - it always ends up outside the table. See below:

Thanks for your all your great work!

Hi @drfalken, thanks for flagging! I think this has to do that in the RTE every line is a separate block, as it is a block based RTE. I don’t think change the way the table block handles paste events. I have found a similar report in Github and will send a follow up to see if the creators of the table block can support pasting of multiple lines! :slight_smile:

1 Like

Ah, I think this plugin uses the tagify library: Tagging and Mentioning Input Plugin | Bubble

Thank you, ok, makes sense!

Yeah I researched that one, but it doesn’t meet the Thimo Gold Standardā„¢. :laughing:

1 Like

Hi @Thimo Great work on the Editor. We seem to have an issue, after creating post and the admin user comes back to edit or make changes to the post , we noticed that the Modern rich text editor output does not retain the image, it shows an error that ā€œImage can not be uploadedā€ . Can you help?

I noticed that when we checked the database, the image is there but the editor will not render it if a user edits a previous post

I have attached the error message

Hi @pamela, how are you displaying the data exactly, are you displaying the JSON data? The ā€˜insert html’ workflow action does not support images at this time, but the plugin is actually made to display its JSON output. The HTML output can be used in emails for example. Does this help? :slight_smile:

Hey @Thimo ,

We have about 12k objects which currently have text stored in HTML which we are looking at how to best migrate to your editor.

I’ve looked at the insert HTML workflow, and understand it doesn’t support images, which is fine, we only have a handful with images, but <br>,<div> <strong>, <em>, dont seem to convert across for me.

Wondering what the recommended migration approach is, should I be created a backend WF to somehow find and replace the html markup with the JSON markup? Given how different it is I would be a bit concerned about it working across all of the objects.

How should I go about this?

Many thanks!