@mention in rich text editor

Support
#1

I need to implement @mention functionality in the RTE.

As the rich text editor is based on Quill, and Quill has a mention module, this seems like a perfect match.

However, I checked both the Vaadin and Jmix rich text editor documentation, and it seems the Quill editor is deeply buried.
Is it possible to enable modules for the Quill editor?

There are also some JavaScript libraries that can add this behavior to any component.

  1. zurb/tribute: ES6 Native @mentions
  2. HTML5/JavaScript Mention | @Mention Control | Syncfusion

What approach would you recommend following?

#2

Hi,

As you can see, all approaches require JS code, so you cannot simply add an npm import and get a proper Java API for the @mention functionality.

If you are ready to extend the client side of RTE, then you can use any approach, but the Quill module looks like the easiest one.

Regards,
Gleb

#3

@gorelov How would I start on extending the client-side JS code?
I’m using Jmix so I can avoid having to deal with JavaScript. My JS knowledge is limited, but if you could get me started, I can figure the rest out myself.

#4
  1. Extend io.jmix.flowui.component.richtexteditor.RichTextEditor on server side.
  2. Define new @Tag("<new-tag-name>") and @JsModule("<client-side-path>")
  3. Create a new web component that ether extends jmix-rich-text-editor.js or completely copies its code and provide nesecery changes. A new web component must have a new tag name (same as you’ll define for the server side), i.e.:
static get is() {
    return '<new-tag-name>';
}

May help:

Regards,
Gleb