[rich-text-editor] Externalize the toolbar

[heruan]

Would it be possible to externalize the toolbar, i.e. make it a separate component? This would let a developer to:

• use its own toolbar (or no toolbar at all)
• place the toolbar elsewhere in the page layout, e.g.

<dom-module id="my-custom-layout">
  <template>
    <div part="toolbar-container">
        <vaadin-rich-text-toolbar></vaadin-rich-text-toolbar>
    </div>
    <div part="editor-container">
        <vaadin-rich-text-editor></vaadin-rich-text-editor>
    </div>
  </template>
</dom-module>

This would be particularly useful e.g. to have the toolbar in a location of the page that is always visible when editing long content that scrolls.

[web-padawan]

Should be possible, but might turn out more complex than it seems.

1. Some toolbar buttons are managed by Quill, but "undo" and "redo" have their own listeners
2. There are special tricks to make focus work properly between toolbar and editor content
3. There are other tricks to ensure "change" event does not fire when focusing toolbar

[heruan]

Thank you @web-padawan for the insights! I'm aware this isn't simple, since I've tried hard to do this myself and failed miserably 😅 But I think it would be very useful, e.g. in a Wiki-like app.

[QNENet]

The "Enter an Image URL:" dialog when the image key selected in the rich text toolbar is very unfriendly for users, in fact, for my users of no value.

A user needs to access images from the file system or in mobile case a recent photo for example.

If we had access to the image button we could handle custom cases with a click listener, although I do not know if enough access is available to the toolbar code to do anything anyway with a click listener.

I would like to use richtext for creating emails and chat messages containing images.

[heruan]

Any plan for this?

[TatuLund]

Toolbar customization is to some extent possible in Enhanced RTE add-on (hiding buttons you do not need)

https://vaadin.com/directory/component/enhanced-rich-text-editor