A general headless editor without UI frameworks

[noteverseio]

Similar to lexicaljs which provides a headless mode and focuses on the core features. For MDXEditor all UI related features can be moved to a adapter layer.

In this way we can have a minimal editor core and extra packages/extensions that can be optimized based on different UI frameworks.

[petyosi]

I understand the motivation behind this very well. Nobody is happy to have yet another UI toolkit embedded in their app, right besides the one they have initially chosen.

The pluggable system of MDXEditor makes it possible (although, not trivial) for people to bring their own UI. They do have to re-implement certain parts, though.

You're speaking of some sort of an adapter layer. In my mind, this sounds like a replaceable set of primitives that the package user can override. While this sounds nice in theory, I feel like that it's going to fall apart easily given the explosion of UI kits out there, unless somehow a magical squad of enthusiastic contributors appears and thoroughly tests the said layer with each possible option out there.

Perhaps I'm missing something, or I'm overly complicating this. Let me know.

[noteverseio]

The idea I have in my mind is the core layer(a set of essential plugins) only provides the essential utilities and features like heading, list, text formatting and the complementary cells/signals/actions etc.

The UI layer will need to implement the UI specific utilities or components that needs UI interactions like toolbar/image/table/link dialog etc, we can implement those UI in different UI frameworks, with radix-ui is the default framework, but we could also provide UI components(platejs has similar approach)for other popular frameworks via plugins(community can contribute those UI components).

In this way we let the user to integrate the components that can best fit their own stack or frameworks, And more importantly the core editor is minimal.

[noteverseio]

I saw there are multiple discussion threads, maybe it's good time to think about how to achieve more flexible custom UI and theming ;)

[petyosi]

There's one other discussion which (I hope) is focused on the content styling. Happy to continue this conversation :).

I might be misinterpreting what you're suggesting but I believe (although, it might be not so obvious from the outside perspective) that what you describe is mostly true for the current state of the editor. The core set of plugins has no dependency on any UI framework (unless you count in the radix colors). The plugins which use Radix are:

• the toolbar
• the link dialog
• the image (because dialog)
• the table (because of the tooltips)
• the frontmatter editor

Building your own toolbar with MUI for example is somewhat easy. The wrapper itself is a very thin layer around publishing an element with addTopAreaChild$ (see code). From there on, each button and button group are simple UI components that work with the exposed cells/signals.