[New Free Plugin] Quill Rich Text Editor Plugin for Bubble

[philipp.1203]

Hello @ NoCodeDataArtisan

I am currently using the Quill Rich Text Editor plugin with the preset custom configuration and only the bullet points ([{“list”:“bullet”}]) for my app. The content from the Quill input field is saved as HTML. Users have the option to either edit previously saved text or create new text entries.

a) When a user wants to edit existing text, the initial content should be loaded from the database and displayed in the editor.

b) When a user wants to create a new text entry, the editor should be empty.

Issue a)

The text is not displayed:

If I inspect the editor, I find my text/content here while all previous content options are empty:

as well as here:

After refresh I see the saved text:

and if I inspect the editor I see my text in Editors Contents (Delta), Editor Text (plain text) and Delta (Last Changes), HTML, and Initial Content:

What do I need to change so that the saved text is displayed without refresh?

Issue b) If a user wants to create a next entry, the text box is prefilled with the last text I opened while I want it to be empty.

And inspecting the text shows the last opened text in Editors Contents (Delta), Editor Text (plain text) and Delta (Last Changes), HTML, just as descripted for issue a). The only difference is that Initial Content is empty.

Any idea how I can ensure everything is empty?

Any help is highly appreciated. Thank you in advance.

[NoCodeDataArtisan]

Hello @philipp.1203,

I trust you are well.

Could you please share the editor settings?

@philipp.1203

a) When a user wants to edit existing text, the initial content should be loaded from the database and displayed in the editor.

Are you implementing an auto-binding feature for this use case, or are you using an action to insert the content from the database?

@philipp.1203

b) When a user wants to create a new text entry, the editor should be empty.

Was the delete action used for this one?

[philipp.1203]

Hello @NoCodeDataArtisan ,

thanks for the quick response!

I hadn’t used the auto-bind feature before, but thanks to your tip and enabling the auto-bind to parent feature as well as enabling ‘Use auto-bind’, everything is now working as it should. If the content needs to be edited, the original content is displayed in the editor as expected. In case anyone else has the same problem, here is the editor where the problem occurred

and here is the editor where everything works as it should.

Thanks again for your help!

[NoCodeDataArtisan]

Your willingness to share your experience and guide other users in correctly implementing the auto-binding feature is greatly appreciated.

It would be wonderful if you could also leave a review for the plugin, helping others learn from your experience with it.

[rcdcanlas]

How do I make a table in this editor?

[NoCodeDataArtisan]

Hello @rcdcanlas,

I trust you are doing well.

Regrettably, the editor lacks a table feature. I apologize for the absence of this functionality in the plugin.

Best,

[rccanlas]

How do I change the fonts?

I am trying to change the fonts as Inter but it doesnt change anything.

Thanks

[georgecollier]

@NoCodeDataArtisan

Regrettably, the editor lacks a table feature. I apologize for the absence of this functionality in the plugin.

Is this going to be added at some point or does the library not support it?

[NoCodeDataArtisan]

Hello @rccanlas

Actually, the feature doesn’t operate by offering a selection of fonts. Instead, it automatically selects the first Serif-style font based on what’s available in the user’s browser.

[NoCodeDataArtisan]

Quill.js lacks a built-in table feature, but there are modules available that can introduce this functionality. However, these do not integrate directly into the toolbar, and tables must be added via a button, which may not be very user-friendly.

You can view the examples here:
Quill 2.0 Table Demo (codepen.io)
Quill-better-table Demo (codepen.io)

[georgecollier]

@NoCodeDataArtisan

However, these do not integrate directly into the toolbar, and tables must be added via a button, which may not be very user-friendly.

Ah, no worries then. Thanks for the demo!

[rccanlas]

Can we implement this in bubble even if there are are separate buttons?
I can add separate buttons on my app as long as there is an ability to make tables.

This one is perfect for my needs:

Any advice? @NoCodeDataArtisan

Would it be possible to include it on the code of the plugin so then we can connect and create bubble buttons for it - Insert Table, Insert Row Above, etc…

I apologize I’m not a coder.

[rccanlas]

Also, how do I get the values of the selected text in quill editor?

[NoCodeDataArtisan]

Sure, I will work on it to add this feature to the plugin so you can add the tables with actions.

---

@rccanlas

Also, how do I get the values of the selected text in quill editor?

I have created an example for this use case here:
Artisan-plugnplay | Bubble Editor

[rccanlas]

Tables would make this editor a complete package

Thank you very much!

[rccanlas]

Hi @NoCodeDataArtisan
Are you able to make the caret index position detectable by the Group Focus?

My goal is to have something like a widget icon just under the caret position and follows it and is clicakble and it will open the focus group.

something like this:

If this is possible it will help my app immensely in terms of user friendliness.

Looking forward to hearing from you.

[NoCodeDataArtisan]

Hi @rccanlas,
I hope all is well with you.

For this particular use case, you’ll need a custom plugin or some custom coding to determine the caret’s position and show the group right there. The ‘Focus Group’ operates differently as it requires an element to attach to. By using custom code, you can pinpoint the caret’s location and then position any element you want at that spot, just add a little offset.