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

Hi @NoCodeDataArtisan ! One issue we are running into is mentioning. We have enabled mentioning as “yes” and also added the mentioning element, but we are getting the JS console error “TypeError: Cannot call a class as a function”. If it’s helpful, this error only appears when we switch the mentioning enable field to “yes”

1 Like

Thank you for informing us about the error; we will address and resolve it promptly.

Could you please confirm if you completed the other fields related to the data of the mentioned feature?

image

Yes! See attached. @NoCodeDataArtisan

1 Like

We are working on this, are you also having issues with the mention feature operating or is it just displaying the error in the console?

If we enable mentioning, the rest of the Quill editor breaks and won’t initialize. So we aren’t able to test the mentioning piece.

1 Like

Please update the plugin to the latest version and check it again. We’ve fixed an issue with the Mention feature that may resolve the problem you’re experiencing.

Thank you! After upgrading to the new version we realized we had the leftover script from the original quill mentioning plugin still in our site header injection—removing that resolved the issue (I’m so sorry for not catching that sooner. Mistake on our end, not yours at all). Mentioning is working now and we can see the list of users correctly.

I completely respect that this is a free plugin, so I don’t want to over-ask for features… but the very last piece that would be exceptional for our use cases would be inserting the mention with the enter key if the mention tooltip is visible. If we have the “Enter” event configured, it defaults to that behavior and will only insert the mention if it’s clicked. I was able to prevent that behavior by using the “Is @ Mention Clicked? No = Hovered” field, but couldn’t figure out a creative way to use the “Enter” event to insert the mention.

Thank you again for your development and support on this plugin! If there is a way we can donate or support you/your team, please let us know.

1 Like

Don’t worry @maggie, it makes us happy to help others to build their ideas within Bubble.

Does the Enter work in the way you want when you disable the Enter Event feature?

It doesn’t look like it will insert even if the enter event feature is turned off. I filmed a short (~1 min Loom) to show you our setup! Quill Mentioning | Loom

1 Like

try tip tap editor

You are right about the issue; it appears to be linked to the new version of Quill.js, which is causing problems with displaying the list and disabling the Enter key.

We have released a new version of the plugin that reverts to the previous version of Quill, which appears to have resolved the issue. Could you please update the plugin and check it again?

1 Like

That did the trick, thank you so much!

Is there a combination of conditions you’d recommend for how we can trigger the “Enter” event based on when the mention panel is not visible (e.g. for creating a message). This conditional works if we are sending a plain message (no mention) but then will keep a value in the mention ID field if we insert a mention, stopping our Enter event from firing.

1 Like

Let’s tackle this and see if we can manage it through the plugin, so that the Enter Pressed event doesn’t get triggered when a user is selecting an item from the mention list.

Is there an easy way to get the preceding text based on caret position? @NoCodeDataArtisan

UPDATE: I figure out how to get the preceding text value based on caret position but I am getting issues. However, it can be solved if you can add a state here as

A quill editor is Clicked

Just like quillbot Enter pressed but this time it will get triggered when I click on the editor.

image

Would you be able to add it?

1 Like

Hello @rccanlas,

I hope all is well with you.

Certainly, we can integrate the Click editor. Would you like the event to be triggered only within the content box, or should it apply to the entire element?

1 Like

Just on the content box maybe? The area where I can type text
I’m not rushing you but I am curious when can we expect this addition?

Thank you so much!! @NoCodeDataArtisan

1 Like

We have released a new version of the plugin featuring the ‘Clicked’ event. Please refresh the editor and update the plugin to the latest version.

Best,
Mehrdad

2 Likes

Thank you so much! My problems are solved :slight_smile:

1 Like

I’m having another slight issue but I figured it would be easily get fixed
if I can trigger an event if the quillEditor Selection Start Index has changed.

Would you be able to add another event to trigger if the values of selection start index has changed?

image

1 Like

Hey @rccanlas,

You might consider utilizing the User Selection Changed event and monitor the selection start index value following each modification.

Should you require further assistance, feel free to reach out, and I can put together an example for you.

1 Like