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

[rccanlas]

I actually tried 3 of the events @NoCodeDataArtisan

the quilleditor is clicked and text changed already solve some of the issues

I tried to use User Selection Changed but it doesn’t work

Basically these events are getting the text values from the caret position backwards, similar to the use case of a previous user from this thread @viancadupalco.asus
As you can see here:

The issue lies when my app finishes inserting texts the value the Get text Quilleditor A values resets (goes blank), I have to either click on the editor again or type inside the editor first to activate the get text quilleditor A values.

BUT I notice when my app finishes inserting text, the value of Selection Start Index gets updated. So I figured if I can trigger the event (getting text values backwards) during this time then it will solve my problems.

But maybe you can show me an example if there is another way?

Thank you!

[NoCodeDataArtisan]

You might resolve the issue by saving the last caret position in the state. There’s an example of this approach on this page:

Artisan-plugnplay | Bubble Editor

[lindsay_knowcode]

Love your plugin. Any chance you could enable the History module?
https://quilljs.com/docs/modules/history

const quill = new Quill('#editor', {
  modules: {
    history: {
      delay: 2000,
      maxStack: 500,
      userOnly: true
    },
  },
  theme: 'snow'
});

It has three methods clear, undo, redo …

Or is there some possibility to add it as a module here (somehow)

Please please please.

[NoCodeDataArtisan]

Hi @lindsay_knowcode, thanks a lot!

Absolutely, I’ll review it and aim to integrate it into the plugin shortly.

@lindsay_knowcode

there some possibility to add it as a module here

No, they are the toolbar modules.

[lindsay_knowcode]

@NoCodeDataArtisan

aim to integrate it

Thank you. I will owe you a favour.

[NoCodeDataArtisan]

Hello @lindsay_knowcode,

The updated version of the plugin has been released, featuring the Undo/Redo capability for the editor. Undo is set as the default action. To perform a Redo, simply switch the Is Redo field to Yes.

[lindsay_knowcode]

Thank you, thank you, thank you.
Whenever you need a favour and you think I can help please ask!

[NoCodeDataArtisan]

Your appreciation warms our hearts!

We would be grateful if you could take a moment to review the plugin and share your thoughts with others. Your insights can guide future users in their decision-making process.

[alobato]

Maybe this is a newbie question but I am seeing a coupe of thing sI would like to change.

1.In my editor text colour is set to a shade of blue, however, when I paste other text then the colour appears in the original text colour. I would like to change the colour to my editor default font colour.

2.The placeholder colour seems black even though I have set it to blue.

[NoCodeDataArtisan]

Hello @alobato
I hope you’re doing well.

@alobato

In my editor text colour is set to a shade of blue

Could you please provide more details on this subject?

@alobato

The placeholder colour seems black even though I have set it to blue.

You’re correct, there is an issue with the placeholder color that we are currently addressing.

[oddhausgh]

Hi, i am new to bubble and I am finding it hard to display the content for users to see. I am using this plugin to create blog posts.

Can someone please help with displaying the text and images because all i see is the code. I checked the demo app and wasnt able to figure it out.

[pythia.world]

Hi! Thanks for the plugin, I tested a bunch of them for my use case and this one seems to be the best! I have the same question - about content display.

I can save the content into database in two formats: either plain text or delta content (w/ code). So if the user saves their content and then get back in a while, they see it either without styling they applied (only plain text) of with code. How do I make it visible in the styling they applied and without code?

Will appreciate your suggestion on this!

[NoCodeDataArtisan]

Hello @oddhausgh, @pythia.world,

Actually, it’s not code; it’s a JSON that informs the editor about the text’s formatting. You simply save the content (delta) in the database as a text field and retrieve it from the database when needed.

Similarly, you can handle HTML in the same manner as the delta.

To display them, you can utilize the editor (in read-only mode with the toolbar hidden) when using the content (delta)/HTML, or you can embed the HTML into an HTML element.

Please inform me if you require further explanation, or share more details about your use case so I can offer you more tailored guidance.

[contantestar]

Hi @NoCodeDataArtisan

Having an issue with adding Fonts in the Plugin appearance setting.
Here’s a list of fonts that I’ve added

Adobe Garamond, Baskerville, Bembo, Bodoni, Book Antiqua, Bookman, Cambria, Caslon, Century Schoolbook, Clarendon, Constantia, Didot, Georgia, Goudy Old Style, Hoefler Text, Libre Baskerville, Merriweather, Minion, Palatino, Times New Roman

In preview they are not visible.

No issues in the console.logs

Could kindly help with the issue. Thx

[NoCodeDataArtisan]

Hello @contantestar,

I trust you’re in good spirits.

In reality, the feature does not work by presenting fonts for selection. Rather, it automatically chooses the first Serif-style font depending on the fonts that are available in the user’s browser.

[contantestar]

Hi @NoCodeDataArtisan .

Thanks for your reply. TBH, that’s sad that we can not provide a list of fonts as it is pretty much written in the documentation.

Maybe you can add font feature parity with Bubble’s own RTE so that we have a default list of fonts that matches the one in RTE. That would be amazing having a predefined list of existing fonts that are not dependent on user’s browser.

Also is there way to get an IMG source URL for HTML output as well not only the delta(content) since the output for HTML images are in base64 encoded text?

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

When we want to insert an image via URL, Quill’s delta (content) will look like this: [image] {"ops":[{"insert":"First Line\n\nThird Line\n\n\n"},{"insert":{"image":"https://a11cc7327bf2e336a7d1e3bfe2c366e8.cdn.bubble.io/f1692798108294x902168513112584700/Plotly%20Logo.png?_gl=1*213awx*_gcl_au*NzA1ODk1ODQuMTcwNzU3NTE3Ng..*_ga*MTc1MTIzOTUzNS4xNzA3NTc1MTc2*_ga_BFPVR2DEE2*MTcwOTgyNzQwOS4xOS4xLjE3MDk4Mjc2ODEuNi4wLjA."}},{"insert":"\n"}]} So, you can insert the image’s URL by making changes in the…

Thanks for support.

[rccanlas]

Hello, when I insert text dynamically via OpenAI API
it shows in markdown format
Like having
‘#’ or ‘**’

Is there a way so that it shows instead the correct format?

[NoCodeDataArtisan]

Hello @rccanlas,

I trust you are well.

Unfortunately, that format is not compatible with the Quill editor. However, if you utilize the Chat GPT (OpenAI API) to format your text, you can request it to output the text in Quill.js delta format, which can then be used as content for the plugin.

[NoCodeDataArtisan]

Hi @contantestar
Sorry for my late response.

@contantestar

Maybe you can add font feature parity with Bubble’s own RTE so that we have a default list of fonts that matches the one in RTE. That would be amazing having a predefined list of existing fonts that are not dependent on user’s browser.

Please allow us to work on it and develop this feature for the plugin.

@contantestar

Also is there way to get an IMG source URL for HTML output as well not only the delta(content) since the output for HTML images are in base64 encoded text?

Could you please provide more details about your use case?

[contantestar]

Hi there.

Thanks for your reply.

@NoCodeDataArtisan

Please allow us to work on it and develop this feature for the plugin.

This would definitely come in handy since it’ll not depend on user’s browser but rather a set of predefined fonts. Thanks.

@NoCodeDataArtisan

@contantestar

Also is there way to get an IMG source URL for HTML output as well not only the delta(content) since the output for HTML images are in base64 encoded text?

Could you please provide more details about your use case?

Not really special use case, it’s just that the output for HTML has the images encoded in base64 text values. So basically a long output with texts as description will just be too much for Bubble DB to handle even with just a couple of images saved since am storing the HTML output.

But yeah, at the moment found an alternative solution for this. Thanks.