Lexical is now open-source (web text-editor)
github.comHappy to answer any questions that folks might have about Lexical.
Not a question, but a suggestion: it'd be nice to have a Live Demo in the README, like Megadraft's (https://github.com/globocom/megadraft)
Apart from that, well done :)
We do have a link to a live demo. It's the Lexical Playground:
The playground is cool. The time-travel component is really neat!
Why the separation from Draft.js? What shortcomings of Draft.js are you hoping to address with Lexical?
Really excited for this to be production-ready!
Draft.js was built a long time ago when many of the concerns around making contentEditable work stemmed from patching browser-support. Today, it's nowhere near as bad. We can leverage modern events and we can try and tackle things from a different point of view.
One of the core things we've tried to do is make the developer experience and performance better. DraftJS pulled in a lot of JavaScript and much of it was hard to reason with because of the lack of types. ImmutableJS just didn't scale how we would have liked it to, and from our experience, developers didn't really like using it all that much. DraftJS also had a block based approach, which quickly fell apart when you wanted to do something more complex. Not to mention compatibility with React 18+ and the countless issues with having to depend on ReactDOM for rendering when fighting with browser extensions that want to take over control of the DOM from Draft.
With these things in mind, we looked at how we could keep the good ideas from Draft, Slate, ProseMirror and also invent some new ideas of our own. Lexical doesn't have any dependencies, so you can use it with Svelte or Solid (once their bindings have been created), or any other framework of your choice. Lexical also doesn't need ImmutableJS, which means the APIs are fully typed in Flow and TypeScript, reducing issues. Lexical is also around 22kb gzip+min, so it's far smaller than Draft. Typing performance in our testing is around 30-70% faster compared to Draft.
I'd recommend checking out the playground and its sourcecode and seeing what you can build yourself with Lexical. We really think we're on to something here :)
Thanks so much for the comprehensive answer!
Why write Lexical over using something like ProseMirror or CodeMirror 6? Not being snarky, just curious.
Lexical is a different take compared to ProseMirror and CodeMirror. We took a lot of inspiration from them, but we felt that having a source-of-truth that wasn't the DOM was a better approach. We also looked to improve on code-size, performance and accessibility, which are often forced on the user to implement in those editors.
> but we felt that having a source-of-truth that wasn't the DOM was a better approach
Which is... exactly what ProseMirror does?
Could you elaborate on what you mean by "source-of-truth that wasn't the DOM" and "performance and accessibility"?
Having read through Lexical's documentation and worked with ProseMirror before, the approach by Lexical feels similar to ProseMirror's except written from a React + Hooks perspective.
They are intentionally similar, ProseMirror has some great ideas. We tried to tackle those ideas from an extensible angle where nodes themselves, which form part of a tree, are the core to everything in Lexical. There are no "marks", instead you just use properties on the given nodes and treat them in an immutable sense. Nodes also present a set of createDOM/updateDOM methods, that allow you to define you DOM element, and its properties, to be passed back to Lexical's DOM reconciler.
You can imagine the EditorState in Lexical as not only the source-of-truth for your editor's data, but also the virtual DOM for your view. Lexical diff's both and applies delta based on dirty node logic to improve performance. Furthermore, any mutations to the DOM outside of Lexical and reverted back to Lexical's EditorState – to preserver source of truth.
Lexical also promotes different types of "text" properties on the TextNode class. Such as if the node is segmented, tokenized etc. This is a far better accessibility experience, as it ensures you can build rich text nodes – like custom emojis, or hashtags, or mentions without bailing out to contentEditable="false" which is what almost every other editor promotes. Which is also a major hinderance in terms of the ability to properly utilizie NVDA, Jaws and VoiceOver to move selection through the characters (in most cases, they skip non contenteditable elements entirely, which is terrible).
So excited to see what you all have done here. trueadm is the creator of Inferno, and has a great eye for performance. Can't wait to dig in.
Very excited to see a new editor platform offering! This solves some of the problems I had with ProseMirror.
I need code editor embedded in my app. Is there an example of embedding Monaco or CodeMirror with this?
We don't have any examples right now, but you could easily do this with a DecoratorNode. See how we create the EquationNode on our Lexical Playground repository. We also have our own code block too, which, with a bit of TLC could be something that could rival Monaco/CodeMirror. We plan on adding virtualization and a bunch of other things in the coming months.
What problems did you have with ProseMirror?
Curious to know how this compares to something like CKEditor in terms of feature set and performance?