github facebook/lexical v0.6.0
on GitHub

latest releases: v0.20.1-nightly.20241115.0, v0.20.1-nightly.20241114.0, v0.20.1-nightly.20241113.0...
pre-release2 years ago

Happy halloween!

108 commits! That's 66% more than 0.5.0. This release comes with many many fixes. But let's go over the highlights first:

Nightly releases

We just introduced a semi-automated release process for those of you who want to be at the cutting edge (looking at you Discord folks). New versions with the latest on the main branch will be pushed Monday through Friday.

You can find on NPM tagged with next (npm i lexical@next)

These will likely be more unstable, informal and might contain undocumented breaking changes. That said, that's what we do internally at Meta where we sync the Lexical GitHub repository onto Mercurial multiple times per week.

Collapsible container

The possibility to do spoiler containers has been a highly requested feature. We prototyped an efficient React-agnostic playground plugin that you can find on the playground (CollapsiblePlugin). It may eventually make it to @lexical/react

Screen.Recording.2022-10-31.at.8.22.21.AM.mov

Drag, drop & paste

Having seen many and very similar drag & drop implementations at Meta, we have come to the conclusion that dragging, dropping and pasting media is a fundamental piece of rich text. Hence, it is now built-in into the RichTextPlugin and you no longer have to implement your own event handling.

198162758-c02516c7-3ed5-45ed-b4a1-7bdd177f9a2d.mov

See the DragDropPaste playground plugin for an example on how to validate and insert your media nodes into the editor.

Failsafe DecoratorNodes

Safety first! React Decorators will now be independently wrapped with an ErrorBoundary and Suspense.

We found that it is very easy to miss either of them when implementing custom DecoratorNodes, and when either is missed and the component either crashes or suspends this causes the editor to be unusable.

195731936-a30b2397-9bf8-4f1c-97d7-9893b083ed98.mov

Breaking change: you now have to provide an ErrorBoundary to RichTextPlugin (you can use ours). 

import {LexicalErrorBoundary} from 'lexical/@react/LexicalErrorBoundary';
<RichTextEditor ... ErrorBoundary={LexicalErrorBoundary} />

Editor namespace on TreeView

From internal and open-source feedback, TreeView has become an indispensable tool to work with Lexical. It gives you the ability to glance over the current state and understand how plugins work with each other.

We added the namespace and the editable state, which we feel is important to complement the read-only mode version of Lexical.

Screen Shot 2022-10-31 at 10 06 53 AM

Note that, while you can convert to HTML for the read-only view, Lexical size and the possibility to have high-fidelity rendering at no cost makes it a perfect candidate for to place in a read-only mode.

In any case, @im-adithya continues the work on the cross-browser extension, what will be the preferred and most complete approach for day-to-day development.

And some more

  • Added the discrete property to editor.update to perform synchronous non-batched updates. Synchronous updates are often terrible performance-wise but there are concrete occasions where they can come useful. TL;DR be careful!
  • You can now have custom collaboration cursor color.
  • Copying a Node and Grid selection (like one or multiple images) now works with Firefox.
  • Various fixes for tables, remarkably mouse selection which was acting weird sometimes.

Changelog

New Contributors

Full Changelog: v0.5.0...v0.6.0

Thank you open-source community for helping us shape yet another version! Happy halloween and back to coding 👨‍💻

Check out latest releases or
releases around facebook/lexical v0.6.0

Don't miss a new lexical release

NewReleases is sending notifications on new releases.

Get notifications