WYSIWYG/RTF Editor

[JoCa96]

We were approached recently about a rich text editor component in onyx/CoreUI.
AFAIK, the latest position from UX was that we don't want and won't offer that.

My idea would be to offer it in the same way as we do it with the Chart package:

• Giving a recommendation for another popular package
• Providing a wrapper/plugin configuration around this package

e.g.
https://github.com/ueberdosis/tiptap seems quite promising:

• quite popular
• headless
• highly customizable

Awesome list:
https://awesome-vue.js.org/components-and-libraries/ui-components.html#rich-text-editing
(Most of them don't seem to have wide adaptations)

[larsrickert]

I already used tiptap in a personal project and implemented a WYSIWYG editor with onyx components (icon buttons) 😄
I was pretty happy with the flexibility
Here is what it looked like:

[jannick-ux]

I really like this approach here. Looks very flexible to be integrated into onyx - very promising. @mj-hof what do you think? I would like to talk about it in the leads refinement.
https://tiptap.dev/product/editor

[larsrickert]

I quickly created a very basic stackblitz example (definitely not final or aligned with UX).

Note: I created the example based on my personal project. This is no official onyx component, I just used a few of them for the example.

https://stackblitz.com/edit/vitejs-vite-xynhfwll?file=src%2FApp.vue

[Kristian-1998]

Are there any updates regarding this topic, because we are currently facing the same issue and are looking for a rich text editor to use with onyx.
We were not sure if we are allowed to use tiptap because of the enterprise licensing modal/ pricing.
Because currently the core features which are open source would be enough for us, but we don´t know if in the future all the features will stay in the core for free and whom to contact for a approval regarding the enterprise licenses.

[larsrickert]

@Kristian-1998 Unfortunately the rich text editor does not have a very high priority for us at the moment but it would definately be nice if we could offer a onyx-based rich text editor in the future.

If you plan to implement the tiptap editor, a contribution to onyx would be awesome here :) So we might be able to create a UX design for the editor so you can implement and contribute it

[thmsfrmslpn]

I would like to mention Quill as an alternative.
https://quilljs.com/

It would be a pure open source alternative, for which there is a special integration for vue3 with VueQuill.
https://vueup.github.io/vue-quill/

[larsrickert]

FYI: onyx now offers a Tiptap-based OnyxTextEditor component, you can find all information here:
https://storybook.onyx.schwarz/?path=/docs/form-elements-texteditor--docs