message editor framework

[samuelstroschein]

Context

We need to choose a framework for the upcoming extraction of the message editor.

We have multiple message editor efforts that can be bundled into one (Parrot, Inlang Editor). Offering a message editor as library leads to embedding in other apps (Ide extension)

Requirements

• must be a web component (https://lit.dev/) to be cross framework/platform compatible
• ???

[samuelstroschein]

Thoughts on tiptap:

• TipTap seems overkill and therefore harder to maintain.
• We already have 10+ tiptap dependencies.
• TipTap is an abstraction layer over prosemirror

@NiklasBuchfink I recommend to look at lexical.dev for a compact library

[NilsJacobsen]

They use a clever way of having the data structure + queries/mutations of the data object in one solution. But I would say if we could manipulate the underlying object to be exactly what our message pattern arrays look like. That would be the holy grail. Otherwise, we add another storage lay on top (we are doing that right now with tiptap)

[martin-lysk]

I had a look on that - looks pretty amzing. I need to understand the formatting mutations on lit better (I will investigate further).

One key feature of Quill is that you can set formats on ranges without worrying about the underlying tree - quill will make sure it stays consistent in structure and meaning.

I wouldn't suggest to move to quill with LTS in mind.
While develop branch is still active the last official release dates back to 2019 (https://github.com/quilljs/quill/releases/tag/v1.3.7) and 2.0.

I had to actually fork dev and monkey patch some parts to make it work in the way i needed it :-/

Regarding your point @NilsJacobsen this is why i referenced https://github.com/quilljs/parchment which could become handy when it comes to layout (editor dom) <-> format (ast) exchange.

[samuelstroschein]

If tiptap is out because too complex/difficult to maintain, and Quill is kinda unmaintained, doesn't that only leave lexica?

Facebook built and uses lexical in the facebook app. Seems like they have multiple full time people just for lexical. LTS seems given. See this comment https://discuss.prosemirror.net/t/differences-between-prosemirror-and-lexical/4557/8

[martin-lysk]

I agree with one additional thought:
Quill is pretty stable in parrot's editor and its featureset provides all i have seen on the roadmap so far.
What about using parrots quill implementation for further requirements analysis in inlangs editor and use the findings in step two to refactor both parrot and inlang editor to use lexical for mid&longterm

[samuelstroschein]

What about using parrots quill implementation for further requirements analysis in inlangs editor and use the findings in step two to refactor both parrot and inlang editor to use lexical for mid&longterm

If you don't invest additional resources into the parrot quill editor, ok. If the @inlang/editor team, and I expect that, adds additional features like variants, markup, etc. to the inlang tiptap editor, then I propose to build a web component now based on lexical that replaces the inlang tiptap editor. @martin-lysk you can adopt the we component editor as you deem fit for parrot then (no need to immediately replace parrot's quill editor)

[samuelstroschein]

I am throwing bundle size as a consideration into the ring.

Lexical: 31,4kb
Quill: 56,4kb
TipTap: 85,6kb (takes 1 second with 3G to load)

[NilsJacobsen]

👀 Haha true also important, but i need to admit that I thought the difference would be bigger:D

[samuelstroschein]

TipTap is roughly 3x the size of lexical :D