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

[joaquintorroba]

Great! Thank you for adding it so quickly.
I added it to my app but have two small issues (maybe both easy to fix):

1. Height: Even though I set a minimum height of 45px (with no maximum so it can expand if the text exceeds 45px), it doesn’t respect that 45px and defaults to a greater height. See image (I colored it purple to show the point).
2. Enter Feature: Ideally, when the user hits Enter, the text should send. However, due to it being an RTE, Enter works differently. I tried fixing this with a keyboard shortcuts plugin so that Command+Enter sends the text, but it doesn’t work when the RTE is focused.
   Thank you in advance!

[Thimo]

@joaquintorroba

Even though I set a minimum height of 45px (with no maximum so it can expand if the text exceeds 45px), it doesn’t respect that 45px and defaults to a greater height. See image (I colored it purple to show the point).

Please take a look at the padding that is set for the text editor:

@joaquintorroba

Enter Feature: Ideally, when the user hits Enter, the text should send. However, due to it being an RTE, Enter works differently. I tried fixing this with a keyboard shortcuts plugin so that Command+Enter sends the text, but it doesn’t work when the RTE is focused.
Thank you in advance!

How have you set the shortcut? Some shortcut plugins ignore the shortcut of an input is focused by default. Please double check if this is the case

[Pat]

@Thimo

Does that help?

Unfortunately, with some styles the text still gets highlighted yello (in addition to my CSS highlighter) and you can see it. I am using !important but still. Maybe I am doing something wrong.

It would just be great to have a little more options for markers natively with editor.js

[joaquintorroba]

@Thimo

Please take a look at the padding that is set for the text editor:

Thanks, it worked!

@Thimo

How have you set the shortcut? Some shortcut plugins ignore the shortcut of an input is focused by default. Please double check if this is the case

I managed to make the shortcut work but the user experience is a little messy. Some messages get through and some others don’t. I need to play a little more with it to see if I can manage to make it work smoothly.

[Thimo]

@Pat

the text still gets highlighted yello

You can actually change the highlight color inside the text editor properties. So you can change the color to another color (or make it transparant I think)

@Pat

It would just be great to have a little more options for markers natively with editor.js

I could definitely put that on my list, could you let me know what kind of styling options you would like to see in combination with the default highlight color for the marker?

[Pat]

Thank you, @Thimo .

That would be amazing! I mean, I like the examples from here:

Highlight Text CSS: 7 Cool CSS Highlight Text Effects 😎 - Coding Dude

OR this here looks great and seems to be very lightweight:

https://roughnotation.com (https://github.com/rough-stuff/rough-notation)

[joaquintorroba]

Hey @Thimo,
Is it possible to add “toggle feature” like notion?
This would be super useful!
Image example:

[Thimo]

@joaquintorroba This is actually already possible, keep in mind it is in beta so you might see unexpected behavior:

[joaquintorroba]

This is great, thanks!

[rustem.japarov1]

Hello Thimo! Hope you’re doing great. Quick question… Do I have the possibility to resize inserted image on editor?
Thank you in advance

[Thimo]

@rustem.japarov1

o I have the possibility to resize inserted image on editor?

Hi @rustem.japarov1! At this time it is not yet possible to resize the uploaded images inside the text editor. Hopefully this helps!

[joaquintorroba]

Hey @Thimo,
I am adding the function for users to be able to upload a URL and this turns into a document (documents = modern rich text editor).
The process is:

1. They load the URL
2. I scrape the web and generate text
3. I save this text in the document dataset in a column called “RTE (Json as text)”. Which is basically the content of the RTE that the users then see.
   That said, between step 2 and 3 I am not able to give it the correct format so that the RTE can read it. Any recommendations?
   Thank you in advance!"

[Thimo]

@joaquintorroba

That said, between step 2 and 3 I am not able to give it the correct format so that the RTE can read it. Any recommendations?

There is a workflow action you can use to display plain text data in the editor, you might want to look into that. Otherwise, you might want to format that text into a paragraph block to display it.

Another solution is to use chatGPT API to format your plain text into a JSON format the editor can use. But not sure how you feel about that.

Hopefully this helps!

[joaquintorroba]

Yes @Thimo , I’m doing this as a back-end workflow with GPT4.
1. Scrape the website + trigger back-end
2. Back end:
2.1 GPT4 prompt: “Transform this text into Json format” (and I give gpt an example of RTE modern json format)
2.2 Save the text (see image)

The problem is that it’s not being saved properly. Should I give a much more specific prompt to GPT for this particular case?

[Thimo]

@joaquintorroba

The problem is that it’s not being saved properly. Should I give a much more specific prompt to GPT for this particular case?

I see that you are you using the ‘formatted as JSON save’ operator. This operator, if I recall correctly, wraps your JSON in “…” which is not the format the text editor supports. I would recommend removing it. Also, please study the output for different prompts and compare it against a real JSON output from the editor to see if it is correct

[shashi]

Came here to say that this plugin is awesome and I too would love to be able to resize images in the tool, if you’re ever able to figure out how to do that outside of the library you’re using.

[joaquintorroba]

+1 for this

[joaquintorroba]

RTE question- Can’t start typing anywhere other than the first line
Hey @Thimo,
Usually when working with RTEs users can click anywhere within the editor to start typing. Modern RTE seems to restrict them to the first line (this is something my users have mention as feedback).
Also, I’ve also noticed that the cursor doesn’t change its form when clicking in any part of the editor except the first line.
Am I doing something wrong on the setup? Is there any workaround for this?
Any help would be appreciated.
Thanks in advanced!

[Thimo]

@joaquintorroba

Modern RTE seems to restrict them to the first line (this is something my users have mention as feedback).

What you can do is have a couple empty paragraphs blocks as initial data. That way the user can click on one of those blocks to start typing. I made a demo here: Texteditordemo | Bubble Editor

@joaquintorroba

Also, I’ve also noticed that the cursor doesn’t change its form when clicking in any part of the editor except the first line.

How do you want the cursor to change?

[joaquintorroba]

Thanks for the quick reply Thimo.

@Thimo

What you can do is have a couple empty paragraphs blocks as initial data. That way the user can click on one of those blocks to start typing. I made a demo here: Texteditordemo | Bubble Editor

If I copy paste the json text you put en “Initial Data Json” it should work?

@Thimo

How do you want the cursor to change?

It’s part of the same issue, when the cursos identifies it’s a place to write it changes alone. So, if I fix the other part this will be fixed. Now it’s only changing on the first row.