Lexical: Started loading real content, Improved html loading

Added more styling/layout for buttons and main content area
This commit is contained in:
Dan Brown
2024-07-01 15:10:22 +01:00
parent c2ecbf071f
commit 9ebbf7ce94
6 changed files with 45 additions and 53 deletions

View File

@ -1,17 +1,32 @@
import {$getRoot, LexicalEditor} from "lexical";
import {$createParagraphNode, $getRoot, $isTextNode, LexicalEditor} from "lexical";
import {$generateHtmlFromNodes, $generateNodesFromDOM} from "@lexical/html";
import {$createCustomParagraphNode} from "./nodes/custom-paragraph";
export function setEditorContentFromHtml(editor: LexicalEditor, html: string) {
const parser = new DOMParser();
const dom = parser.parseFromString(html, 'text/html');
console.log(html);
editor.update(() => {
const nodes = $generateNodesFromDOM(editor, dom);
// Empty existing
const root = $getRoot();
for (const child of root.getChildren()) {
child.remove(true);
}
const nodes = $generateNodesFromDOM(editor, dom);
// Wrap top-level text nodes
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
if ($isTextNode(node)) {
const paragraph = $createCustomParagraphNode();
paragraph.append(node);
nodes[i] = paragraph;
}
}
root.append(...nodes);
});
}