Migrating from draft.js to lexical

Widgets
1

Hello,
as draft.js is deprecated we want to migrate in our project from the Plugin Editor to the new Rich Text Editor (which is using lexical).

For this of course we will need to migrate the previous saved draft.js data in our database to the format provided by lexical.

As writing our own migration would be very time consuming and its easy to overlook some cases (especially with nested formatting, links, …):
Has anybody already a (java) script for this? Any help or tipps are appreciated!

For clarification, this is how the current format and the new one should roughly look like:
draft.js format

{"blocks":[{"key":"5u2nr","text":"H1","type":"header-one","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}, ...], "entityMap":{"0":{"type":"LINK","mutability":"MUTABLE","data":{"url":"http://test.de"}}}}

lexical format

{"root":{"type":"root","children":[{"type":"heading1","children":[],"text":"H1","styles":[]}, ...],"text":null,"styles":null}}
2

Hi @tim-steep-bit,

Meta has not published any documentation about the Lexical Editor State structure, so as you mentioned, this task is very time-consuming and it’s easy to overlook some cases. For now, this is not supported by Widget.

There is a ticket mentioning this on their GitHub (Add Draft JS to Lexical migration documentation · Issue #1641 · facebook/lexical · GitHub).

The Meta team also said they would look into writing a comprehensive set of guides around these concepts, but it looks like they haven’t taken any action on it yet. (Add Draft JS to Lexical migration documentation · Issue #1641 · facebook/lexical · GitHub)

3

For anybody having the same problem in the future: in my project we are working on a migration.

As we are having some customizations in our RichtText editor it would probably not be a “drop-in” solution for other projects. But it may be a good starting point for others in the future.

4

Here is our migration: bitbucket.mgm-tp[dot]com/users/tkalkus/repos/draftjs2lexical/browse?at=refs%2Fheads%2Ffeature%2FdraftJs-to-lexical-migration

I hope this will help others. Let me know if there are problems when accessing it.

5

HI @tim-steep-bit,

have you been discussing draftjs to lexical migration with A12 WIdgets team as advertised or you did it completely on your own.

Thanks, Josef

6

As there was no pre-existing migration by A12 we just did it on our own, as we had some modifications compared the the A12 widget editors

7

@All: The A12 Widget team is prepared to support projects actively in migration from draftjs to lexical. This targets especially custom plugins, which need to be rewritten for lexical.
If your project is in this situation, please get in touch with @ben-keen-aspen.