I have HTML that I need converting to Lexical JS. The html contains img tags with base64 encoded values.
But when I run through this code the data for the img tag is none existent.
useEffect(() => {
const parser = new DOMParser();
const dom = parser.parseFromString(content, 'text/html');
const structure = analyzeNode(dom.body);
setNodeStructure(structure);
const editor = createEditor({
namespace: 'HeadlessEditor',
onError: (error) => console.error(error),
nodes: [
HeadingNode,
QuoteNode,
ListNode,
ListItemNode,
TableNode,
TableCellNode,
TableRowNode,
LinkNode
]
});
// Convert HTML to Lexical nodes
editor.update(() => {
const root = $getRoot();
root.clear();
const nodes = $generateNodesFromDOM(editor, dom);
console.log('Generated nodes:', nodes);
nodes.forEach(node => {
console.log('Appending node:', node);
root.append(node);
});
}, {
onUpdate: () => {
// Get editor state after update is complete
const editorState = editor.getEditorState();
console.log('Editor State:', editorState);
const jsonContent = editorState.toJSON();
console.log('Editor JSON Content:', jsonContent);
setEditorContent(JSON.stringify(jsonContent, null, 2));
}
});
}, [content]);
The HTML DOM contains something like this:
{
"type": "element",
"tag": "p",
"children": [
{
"type": "element",
"tag": "img",
"attributes": {
"src": "data:image/png;base64,iV...
After conversion, it it just this:
{
"children": [],
"direction": null,
"format": "",
"indent": 0,
"type": "paragraph",
"version": 1,
"textFormat": 0,
"textStyle": ""
}
How do I make it so that Lexical JS has my image tags?
Note that when I use the Editor I can see the image – it is base64_encoded and displaying it.
Thank you!