I have implemented lexical editor in my app together with possibility of creating collapsible container (the same way as it shown in the lexical playground).
In order to save it on backend, I need to serialize (using $generateHtmlFromNodes) collapsible container (transform into plain html) and when I want to retrieve it and edit I need to deserialize it (using $generateNodesFromDOM) from plain html into lexical nodes.
However, deserializing doesn't inject into editor a correct html markup. It doesn't preserve structure for collapsible container with details and summary tags but transforms it into p tags with text only:
It should be deserialized into:
<details class="Collapsible__container" open="">
<summary class="Collapsible__title">
<span style="white-space: pre-wrap;">Test title</span>
</summary>
<div class="Collapsible__content">
<p class="editor-paragraph" dir="ltr">
<span style="white-space: pre-wrap;">This is test description</span>
</p>
</div>
</details>
but instead it is:
<p class="editor-paragraph ltr" dir="ltr">
<span data-lexical-text="true">Test title</span>
</p>
<p class="editor-paragraph ltr" dir="ltr">
<span data-lexical-text="true">This is test description</span>
</p>
After some research I think it should be handled in my ExtendedTextNode in importDom() function by detecting details tag and applying correct conversion function. Similarly as it was done for other tags and preserving styles.
static importDOM(): DOMConversionMap | null {
const importers = TextNode.importDOM();
return {
...importers,
code: () => ({
conversion: patchStyleConversion(importers?.code),
priority: 1,
}),
em: () => ({
conversion: patchStyleConversion(importers?.em),
priority: 1,
}),
span: () => ({
conversion: patchStyleConversion(importers?.span),
priority: 1,
}),
strong: () => ({
conversion: patchStyleConversion(importers?.strong),
priority: 1,
}),
sub: () => ({
conversion: patchStyleConversion(importers?.sub),
priority: 1,
}),
sup: () => ({
conversion: patchStyleConversion(importers?.sup),
priority: 1,
}),
};
}
However, I need some direction how this could look like.
Could anyone provide me some help in that matter?