Migrating existing HTML content from a different editor to Lexical - best practices

[aleksandr-lapushkin]

Hey all!

I'm currently in the process of scoping the effort required to migrate from Froala to Lexical. In our case, we store the HTML content from Froala. Ideally, I'd love to figure out the best way to parse existing HTML into Lexical's state, while still retaining all of the original styling.

Froala does a mix of inline, tag and class-based styling, so there isn't a one-size-fits-all solution that I'm aware of. Initially, I was thinking to leverage importDOM by overriding the standard nodes (like ParagraphNode, etc), but that felt a bit hacky, since I'd end up with a bunch of custom nodes.

Lexical's original $generateNodesFromDOM gets me about 50% of the way there, but it strips a lot of the styling.

Currently, I'm thinking that I'd need to basically re-implement my own version of the generateNodesFromDOM function to manually traverse the DOM and create the relevant Lexical nodes that way by calling $createParagraphNode and such. That sounds like a lot of work, which might end up being way too brittle in the long run, so I'm wondering whether there's a way that would better align with best practices?

Here's an example of a paragraph with custom styling, FWIW:

<p style="box-sizing: inherit; border-color: rgba(229, 231, 235, var(--tw-border-opacity));" fr-original-style=""><span style="font-family: &quot;Comic Sans MS&quot;, cursive, sans-serif; box-sizing: inherit; border-color: rgba(229, 231, 235, var(--tw-border-opacity));"><strong style="font-weight: 700; box-sizing: inherit; border-color: rgba(229, 231, 235, var(--tw-border-opacity));" fr-original-style=""><span style="color: rgb(235, 107, 86); box-sizing: inherit; border-color: rgba(229, 231, 235, var(--tw-border-opacity));">asdasdasda</span></strong></span></p>

Thanks in advance!

[BenJavaCode]

Hmh not sure about what your exact use case is.

If you want to only have a specific styling for a node i would suggest applying that style by creating it as a theme property on the configuration and then applying it to the node/s by replacing that nodes default theme on your config.

However, if you plan to be able to manipulate a lot with the styling of nodes, I would suggest you take a look at the TextNode which has a style attribute and implements the functionality to change and update the node style. You could then extend other nodes to have this functionality aswell.

Just probably don't mix class based and inline styling too much.