[HN Gopher] Lexical is now open-source (web text-editor)
___________________________________________________________________
Lexical is now open-source (web text-editor)
Author : lucis
Score : 38 points
Date : 2022-04-13 17:59 UTC (5 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| msoad wrote:
| 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?
| trueadm wrote:
| 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.
| trueadm wrote:
| Happy to answer any questions that folks might have about
| Lexical.
| simplify wrote:
| Why write Lexical over using something like ProseMirror or
| CodeMirror 6? Not being snarky, just curious.
| trueadm wrote:
| 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.
| tpict wrote:
| 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!
| trueadm wrote:
| 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 :)
| tpict wrote:
| Thanks so much for the comprehensive answer!
| lucis wrote:
| 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 :)
| trueadm wrote:
| We do have a link to a live demo. It's the Lexical
| Playground:
|
| https://lexical-playground.vercel.app/
| ogazitt wrote:
| The playground is cool. The time-travel component is really
| neat!
___________________________________________________________________
(page generated 2022-04-13 23:01 UTC)