Adding Attributes to Generated HTML Code

[nilesh-chaturvedi]

Hello! 👋🏽

I have a use case where I would like to toggle the content/text of the lexical editor to HTML and back to text. I have been able to get it working by using the generateHtmlFromNodes function as described here.

Here's a snippet of the onChange function that is called when the toggle button is clicked.
const [editor] = useLexicalComposerContext(); const onChange = () => { editor.update(() => { if (toggle) { onContentChange($getRoot().getTextContent()); return; } onContentChange($generateHtmlFromNodes(editor)); }); };

Additionally, I would also like to be able to edit the HTML by adding HTML elements and/or attributes to the HTML elements and have it reflect in the text content.
Example 1: User modifies HTML elements
Original HTML
<div><h1>hello</h1></div> renders ### hello

Modified HTML
<div><h1>hello</h1><h1>world</h1></div> renders ### hello world

Example 2: User modifies HTML attributes
Original HTML
<div><h1>hello</h1></div> renders ### hello

Modified HTML
<div><h1 data-id="helloId">hello</h1></div> renders ### hello

The first scenario (modifying HTML elements) works pretty well and when I toggle back and forth, the text renders with the changes and the generated HTML persists the changes.

In the second scenario however, the attribute changes get wiped out and do not reflect on the rendered text when inspected. Wondering if there is a way in which we could add attributes to the generated HTML from lexical and have it persist for this scenario.

[nilesh-chaturvedi]

Anything on this?