Forum Academy Marketplace Showcase Pricing Features

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

bruh! that was fast hahahahaha

1 Like

hey @Thimo, to help with the a workflow to change the image url once it’s uploaded and some other uses cases (knowing when someone added a check for example to consider a task done)… You could maybe add a state “last added” and/or “last edited” element type.

ps : zq’s version has it :wink:

1 Like

Just got this and it seems very promising. One question: I am building a mobile app and setting the focus is somewhat finicky (at least on Safari IOS). I have to press on the first line of the RTE or else the keyboard never shows up. The auto-focus checkbox doesn’t seem to do anything on IOS.

Any suggestions on making it user-friendly on mobile? Preferably, clicking anywhere in the input would show the keyboard and cursor.

I think this is because the editor has a default 300px padding, you can reduce that using this field:

iOS always tend to behave a bit odd for text editors. In my apps, I always give the editor initial content instead of a placeholder so the user knows exactly where to click. Maybe you can use that in your app as well :slight_smile:

Thank you. I tried setting the padding to 0 but I still had to press precisely on the first line in order to get a keyboard/cursor to appear. I can replicate this behavior on Google Chrome developer mode, so it may not just be an IOS thing.

Unfortunately I won’t be able to use this in my app until I can figure out a solution to this. The default Bubble multi-line input brings up a keyboard if I press anywhere in the input, so I’m hoping there is an easy fix or quick script that could help with this.

Edit: Specifically, it seems like it will not focus if I press anywhere in the RTE below the floating menu + sign.

I see! I will try to implement something tomorrow and will let you know how it goes! :slight_smile:

@pflanagan884 After breaking my head a couple times trying to figure this out, it turns out that iOS only allows the focusing of an input when you click directly in it. This is not the case for other devices. As the input field is not the total width and height of the editor (that is the case for a multiline input), you need to click in to the input directly.

You could display a couple of empty blocks and reduce the padding to 0 to increase the area of the editor where you can click. I have created a demo for you here: Texteditordemo | Bubble Editor

Hopefully this still helps!

Update 1.39.0

Added a state that contains the highlighted/selected text:

2 Likes

Thank you @Thimo for looking into this. I’m playing around with Notion, and they auto-focus onto the first line in iOS when you click the + (new note) button.

Doing a quick search for options, I found this: displaying keyboard in Safari iOS after focus on input after page loads (modal shows) in Angular - Stack Overflow

Perhaps I could use Toolbox to call a script like this to auto-focus the input after clicking to view the RTE.

Yes was trying the same thing, looked through many possible solutions but could not find one that worked in Bubble. Will try again later today, but if you find one that works in the mean time please share it with me and I will implement it in the plugin :slight_smile:

Hi @Thimo , I have checked out the plugin in the editor, and it looks like not, but decided to check with you whether it supports character limits. If not, is there a way to implement it outside of the plugin’s features. Reading through the threads here, It sounds like a great RTE plugin. Thanks!

Is there any way to dynamically change the marker color on a new text or block input?

The code for the marker appears to be:

<mark class=“cdx-marker”> This is a text example to be highlighted </mark>

So I’m wrapping that code around dynamically made text to get it to show up as highlighted. But I would like to change that highlight color without changing the default marker color.

Is this possible?