(),
+ );
+ const styles = getStyleObjectDirect(node);
+ const focusPropertyRef = useRef('');
+
+ const nodeRef = useRef(node);
+ useEffect(() => {
+ nodeRef.current = node;
+ }, [node]);
+ const {handleChange, handleAddProperty} = useMemo(() => {
+ // eslint-disable-next-line no-shadow
+ const handleAddProperty = (prop: keyof StyleObject) => {
+ const reg = registeredNodes.get(prop);
+ if (reg) {
+ reg.focus();
+ } else {
+ focusPropertyRef.current = prop;
+ editor.update(
+ () => {
+ $setStyleProperty(nodeRef.current, prop, '');
+ },
+ {tag: [SKIP_DOM_SELECTION_TAG, SKIP_SCROLL_INTO_VIEW_TAG]},
+ );
+ }
+ };
+ // eslint-disable-next-line no-shadow
+ const handleChange = (
+ prop: keyof StyleObject,
+ textContent: string | null,
+ ) => {
+ editor.update(
+ () => {
+ $preserveSelection();
+ $addUpdateTag(SKIP_DOM_SELECTION_TAG);
+ $addUpdateTag(SKIP_SCROLL_INTO_VIEW_TAG);
+ $setStyleProperty(nodeRef.current, prop, textContent || undefined);
+ },
+ {tag: [SKIP_DOM_SELECTION_TAG, SKIP_SCROLL_INTO_VIEW_TAG]},
+ );
+ };
+ return {handleAddProperty, handleChange};
+ }, [editor, registeredNodes]);
+
+ const rows = useMemo(
+ () =>
+ styleObjectToArray(styles).map(([k, v]) => (
+
+
+ {k}:
+ {
+ if (el === null) {
+ registeredNodes.delete(k);
+ return;
+ }
+ if (focusPropertyRef.current === k) {
+ el.focus();
+ focusPropertyRef.current = '';
+ }
+ registeredNodes.set(k, el);
+ }}
+ />
+
+ )),
+ [editor, registeredNodes, styles, handleChange],
+ );
+ return (
+
+
{describeNode(node)[1]}
+
+
+ style {'{'}
+
+ {rows}
+
+
+
+
{'}'}
+
+
+
+
+
+
+
+
+
+
+
+
+ Hello world!
+
+ `,
+ ),
+ importCase(
+ 'reduced ul>li>p',
+ ``,
+ html`
+
+ `,
+ ),
+ {
+ expectedHTML: html`
+ Hello!
+ `,
+ name: 'plain DOM text node',
+ pastedHTML: html`
+ Hello!
+ `,
+ },
+ {
+ expectedHTML: html`
+ Hello!
+
+ `,
+ name: 'a paragraph element',
+ pastedHTML: html`
+ Hello!
+
+ `,
+ },
+ {
+ expectedHTML: html`
+ 123
+ 456
+ `,
+ name: 'a single div',
+ pastedHTML: html`
+ 123
+ 456
+ `,
+ },
+ {
+ expectedHTML: html`
+ a b c d e
+ f g h
+ `,
+ name: 'multiple nested spans and divs',
+ pastedHTML: html`
+
+ a b
+
+ c d
+ e
+
+
+ f
+ g h
+
+
123
+ 456
+ `,
+ name: 'nested span in a div',
+ pastedHTML: html`
+
+ `,
+ },
+ {
+ expectedHTML: html`
+ 123
+ 456
+ `,
+ name: 'nested div in a span',
+ pastedHTML: html`
+
+ 123
+ 456
+
+ `,
+ },
+ {
+ expectedHTML: html`
+
+ -
+ done
+
+ -
+ todo
+
+ -
+
+
+ -
+ todo
+
+
+ `,
+ name: 'google doc checklist',
+ // We can't use the HTML template literal formatter here because it's white-space:pre
+ pastedHTML: ``,
+ },
+ {
+ expectedHTML: html`
+
+ checklist
+
+
+ `,
+ name: 'github checklist',
+ pastedHTML: html`
+
+
+ checklist
+
+
+ `,
+ },
+ {
+ expectedHTML: html`
+
+
+ hello world
+
+
+ `,
+ name: 'pasting inheritance',
+ pastedHTML: html`
+ hello
+ `,
+ plainTextInsert: ' world',
+ },
+ ])(
+ '$name',
+ ({
+ expectedHTML,
+ pastedHTML,
+ plainTextInsert,
+ importConfig = {},
+ exportConfig = {},
+ }: ImportTestCase) => {
+ const builtEditor = buildEditorFromExtensions(
+ defineExtension({
+ $initialEditorState: (editor) => {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(pastedHTML, 'text/html');
+ const nodes = getExtensionDependencyFromEditor(
+ $getEditor(),
+ DOMImportExtension,
+ ).output.$importNodes(doc);
+
+ // Compare legacy $generateNodesFromDOM to $generateNodes
+ const legacyNodes = $generateNodesFromDOM(editor, doc);
+ expect(nodes.length).toEqual(legacyNodes.length);
+ function compareJSON(a: LexicalNode, b: LexicalNode) {
+ expect(a.exportJSON()).toEqual(b.exportJSON());
+ if ($isElementNode(a) && $isElementNode(b)) {
+ const as = a.getChildren();
+ const bs = b.getChildren();
+ expect(as.length).toEqual(bs.length);
+ for (let i = 0; i < as.length; i++) {
+ compareJSON(as[i], bs[i]);
+ }
+ }
+ }
+ for (let i = 0; i < nodes.length; i++) {
+ compareJSON(nodes[i], legacyNodes[i]);
+ }
+
+ $insertGeneratedNodes(editor, nodes, $selectAll());
+ if (plainTextInsert) {
+ const newSelection = $getSelection();
+ assert(
+ $isRangeSelection(newSelection),
+ 'isRangeSelection(newSelection) for plainTextInsert',
+ );
+ newSelection.insertText(plainTextInsert);
+ }
+ $setSelection(null);
+ },
+ dependencies: [
+ configExtension(DOMImportExtension, importConfig),
+ configExtension(DOMRenderExtension, exportConfig),
+ ListExtension,
+ CheckListExtension,
+ ],
+ name: 'root',
+ theme: {
+ text: {
+ bold: 'editor-text-bold',
+ italic: 'editor-text-italic',
+ underline: 'editor-text-underline',
+ },
+ },
+ }),
+ );
+ const rootElement = document.createElement('div');
+ builtEditor.setRootElement(rootElement);
+ // try {
+ expectHtmlToBeEqual(rootElement.innerHTML, expectedHTML);
+ // } catch (err) {
+ // console.log(prettifyHtml(rootElement.innerHTML));
+ // console.log(prettifyHtml(expectedHTML));
+ // throw err;
+ // }
+ },
+ );
+});
diff --git a/packages/lexical-html/src/__tests__/unit/DOMImportExtensionNoLegacy.test.ts b/packages/lexical-html/src/__tests__/unit/DOMImportExtensionNoLegacy.test.ts
new file mode 100644
index 00000000000..58d065c24e7
--- /dev/null
+++ b/packages/lexical-html/src/__tests__/unit/DOMImportExtensionNoLegacy.test.ts
@@ -0,0 +1,771 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {$insertGeneratedNodes} from '@lexical/clipboard';
+import {
+ buildEditorFromExtensions,
+ getExtensionDependencyFromEditor,
+} from '@lexical/extension';
+import {
+ $applyTextAlignToElement,
+ $applyTextFormatsFromContext,
+ $generateNodesFromDOM,
+ $getImportContextValue,
+ $setImportContextValue,
+ $updateImportContextValue,
+ type DOMImportConfig,
+ DOMImportExtension,
+ type DOMImportOutput,
+ type DOMRenderConfig,
+ DOMRenderExtension,
+ ImportContextParentLexicalNode,
+ ImportContextTextAlign,
+ ImportContextTextFormats,
+ ImportContextWhiteSpaceCollapse,
+ importOverride,
+} from '@lexical/html';
+import {
+ $createListItemNode,
+ $createListNode,
+ $isListItemNode,
+ $isListNode,
+ CheckListExtension,
+ ListExtension,
+ ListType,
+} from '@lexical/list';
+import {
+ $copyNode,
+ $createLineBreakNode,
+ $createParagraphNode,
+ $createTabNode,
+ $createTextNode,
+ $getChildCaret,
+ $getEditor,
+ $getSelection,
+ $isElementNode,
+ $isRangeSelection,
+ $selectAll,
+ $setSelection,
+ CaretDirection,
+ configExtension,
+ defineExtension,
+ ElementNode,
+ isBlockDomNode,
+ isDOMTextNode,
+ isHTMLElement,
+ isInlineDomNode,
+ LexicalNode,
+ StateConfigValue,
+ TextFormatType,
+ TextNode,
+} from 'lexical';
+import {
+ expectHtmlToBeEqual,
+ html,
+ // prettifyHtml,
+} from 'lexical/src/__tests__/utils';
+import invariant from 'shared/invariant';
+import {assert, describe, expect, test} from 'vitest';
+
+import {$addImportContextFinalizer} from '../../ImportContext';
+
+interface ImportTestCase {
+ name: string;
+ pastedHTML: string;
+ expectedHTML: string;
+ plainTextInsert?: string;
+ importConfig?: Partial;
+ exportConfig?: Partial;
+}
+
+function importCase(
+ name: string,
+ pastedHTML: string,
+ expectedHTML: string,
+): ImportTestCase {
+ return {expectedHTML, name, pastedHTML};
+}
+
+function listTypeFromDOM(dom: HTMLUListElement | HTMLOListElement): ListType {
+ if (
+ // lexical html
+ dom.getAttribute('__lexicallisttype') === 'check' ||
+ // is github checklist
+ dom.classList.contains('contains-task-list') ||
+ // if children are checklist items, the node is a checklist ul. Applicable for googledoc checklist pasting.
+ dom.querySelector(':scope > li[aria-checked]')
+ ) {
+ return 'check';
+ }
+ return dom.tagName === 'OL' ? 'number' : 'bullet';
+}
+
+/*
+ * This function normalizes the children of a ListNode after the conversion from HTML,
+ * ensuring that they are all ListItemNodes
+ */
+function $normalizeListNode(
+ node: null | LexicalNode | LexicalNode[],
+): null | LexicalNode | LexicalNode[] {
+ if (Array.isArray(node) || !$isListNode(node)) {
+ return node;
+ }
+ for (const child of node.getChildren()) {
+ // Wrap all children in li elements
+ if (!$isListItemNode(child)) {
+ const li = $createListItemNode();
+ child.replace(li).append(child);
+ }
+ }
+ // Wrap self in a ListItem if it's directly in a ListNode
+ return $isListNode($getImportContextValue(ImportContextParentLexicalNode))
+ ? $createListItemNode().append(node)
+ : node;
+}
+
+function $isOnlyChild(node: LexicalNode): boolean {
+ return !!(node.getPreviousSibling() || node.getNextSibling());
+}
+
+function $normalizeListItemNode(
+ node: null | LexicalNode | LexicalNode[],
+): null | LexicalNode | LexicalNode[] {
+ if (Array.isArray(node) || !$isListItemNode(node)) {
+ return node;
+ }
+ return $unwrapBlockDOM(
+ node,
+ (el) => !el.isInline() || ($isListNode(el) && !$isOnlyChild(el)),
+ );
+}
+
+function $importListNode(
+ dom: HTMLUListElement | HTMLOListElement,
+): DOMImportOutput {
+ const listNode = $createListNode().setListType(listTypeFromDOM(dom));
+ $addImportContextFinalizer($normalizeListNode);
+ return {node: listNode};
+}
+
+const listOverrides = (['ul', 'ol'] as const).map((tag) =>
+ importOverride(tag, $importListNode),
+);
+
+// https://drafts.csswg.org/css-text-4/#line-break-transform
+// const collapsePreserve = (s: string): string => s;
+// const collapseFunctions: Record string> =
+// {
+// 'break-spaces': collapsePreserve,
+// collapse: (s) => s.replace(/\s+/g, ' '),
+// discard: (s) => s.replace(/\s+/g, ''),
+// preserve: collapsePreserve,
+// 'preserve-breaks': (s) => s.replace(/[ \t]+/g, ' '),
+// 'preserve-spaces': (s) => s.replace(/(?:\r?\n|\t)/g, ' '),
+// };
+
+function $addTextFormatContinue(format: TextFormatType): () => undefined {
+ return () => {
+ $updateImportContextValue(ImportContextTextFormats, (prev) => ({
+ ...prev,
+ [format]: true,
+ }));
+ };
+}
+
+function findTextInLine(text: Text, direction: CaretDirection): null | Text {
+ let node: Node = text;
+ const siblingProp = `${direction}Sibling` as const;
+ const childProp = `${direction === 'next' ? 'first' : 'last'}Child` as const;
+ // eslint-disable-next-line no-constant-condition
+ while (true) {
+ let sibling: null | Node;
+ while ((sibling = node[siblingProp]) === null) {
+ const parentElement = node.parentElement;
+ if (parentElement === null) {
+ return null;
+ }
+ node = parentElement;
+ }
+ node = sibling;
+ if (isHTMLElement(node)) {
+ const display = node.style.display;
+ if (!(display ? display.startsWith('inline') : isInlineDomNode(node))) {
+ return null;
+ }
+ }
+ let descendant: null | Node = node;
+ while ((descendant = node[childProp]) !== null) {
+ node = descendant;
+ }
+ if (isDOMTextNode(node)) {
+ return node;
+ } else if (node.nodeName === 'BR') {
+ return null;
+ }
+ }
+}
+
+function $createTextNodeWithCurrentFormat(text: string = ''): TextNode {
+ return $applyTextFormatsFromContext($createTextNode(text));
+}
+
+function $convertTextDOMNode(domNode: Text): DOMImportOutput {
+ const domNode_ = domNode as Text;
+ const parentDom = domNode.parentElement;
+ invariant(
+ parentDom !== null,
+ 'Expected parentElement of Text not to be null',
+ );
+ let textContent = domNode_.textContent || '';
+ // No collapse and preserve segment break for pre, pre-wrap and pre-line
+ if (
+ $getImportContextValue(ImportContextWhiteSpaceCollapse).startsWith('pre')
+ ) {
+ const parts = textContent.split(/(\r?\n|\t)/);
+ const nodes: Array = [];
+ const length = parts.length;
+ for (let i = 0; i < length; i++) {
+ const part = parts[i];
+ if (part === '\n' || part === '\r\n') {
+ nodes.push($createLineBreakNode());
+ } else if (part === '\t') {
+ nodes.push($createTabNode());
+ } else if (part !== '') {
+ nodes.push($createTextNodeWithCurrentFormat(part));
+ }
+ }
+ return {node: nodes};
+ }
+ textContent = textContent.replace(/\r/g, '').replace(/[ \t\n]+/g, ' ');
+ if (textContent === '') {
+ return {node: null};
+ }
+ if (textContent[0] === ' ') {
+ // Traverse backward while in the same line. If content contains new line or tab -> potential
+ // delete, other elements can borrow from this one. Deletion depends on whether it's also the
+ // last space (see next condition: textContent[textContent.length - 1] === ' '))
+ let previousText: null | Text = domNode_;
+ let isStartOfLine = true;
+ while (
+ previousText !== null &&
+ (previousText = findTextInLine(previousText, 'previous')) !== null
+ ) {
+ const previousTextContent = previousText.textContent || '';
+ if (previousTextContent.length > 0) {
+ if (/[ \t\n]$/.test(previousTextContent)) {
+ textContent = textContent.slice(1);
+ }
+ isStartOfLine = false;
+ break;
+ }
+ }
+ if (isStartOfLine) {
+ textContent = textContent.slice(1);
+ }
+ }
+ if (textContent[textContent.length - 1] === ' ') {
+ // Traverse forward while in the same line, preserve if next inline will require a space
+ let nextText: null | Text = domNode_;
+ let isEndOfLine = true;
+ while (
+ nextText !== null &&
+ (nextText = findTextInLine(nextText, 'next')) !== null
+ ) {
+ const nextTextContent = (nextText.textContent || '').replace(
+ /^( |\t|\r?\n)+/,
+ '',
+ );
+ if (nextTextContent.length > 0) {
+ isEndOfLine = false;
+ break;
+ }
+ }
+ if (isEndOfLine) {
+ textContent = textContent.slice(0, textContent.length - 1);
+ }
+ }
+ if (textContent === '') {
+ return {node: null};
+ }
+ return {node: $createTextNodeWithCurrentFormat(textContent)};
+}
+
+const TO_FORMAT = {
+ code: 'code',
+ em: 'italic',
+ i: 'italic',
+ mark: 'highlight',
+ s: 'strikethrough',
+ strong: 'bold',
+ sub: 'subscript',
+ sup: 'superscript',
+ u: 'underline',
+} as const;
+const formatOverrides = Object.entries(TO_FORMAT).map(([tag, format]) =>
+ importOverride(tag as keyof typeof TO_FORMAT, $addTextFormatContinue(format)),
+);
+
+function $unwrapBlockDOM(
+ node: LexicalNode | LexicalNode[] | null,
+ $splitPredicate: (el: ElementNode) => boolean = (el) => !el.isInline(),
+ $createNextElement: (el: ElementNode) => ElementNode = $copyNode,
+): null | LexicalNode | LexicalNode[] {
+ if (Array.isArray(node) || !$isElementNode(node)) {
+ return node;
+ }
+ let adjacentNodes: undefined | ElementNode[];
+ let lastParent: undefined | ElementNode;
+ for (const {origin} of $getChildCaret(node, 'next')) {
+ if ($isElementNode(origin) && $splitPredicate(origin)) {
+ lastParent = undefined;
+ adjacentNodes = adjacentNodes || [];
+ origin.remove();
+ adjacentNodes.push(origin);
+ } else if (adjacentNodes) {
+ lastParent = lastParent || $createNextElement(node);
+ origin.remove();
+ lastParent.append(origin);
+ }
+ }
+ if (adjacentNodes) {
+ if (node.isEmpty()) {
+ node.remove();
+ } else {
+ adjacentNodes.unshift(node);
+ }
+ }
+ return adjacentNodes || node;
+}
+
+type Writable = {-readonly [K in keyof T]: T[K]};
+
+function $updateFormatContextFromDOM(dom: HTMLElement) {
+ const {fontWeight, fontStyle, textDecoration, verticalAlign} = dom.style;
+ let formats:
+ | undefined
+ | Writable>;
+ const setFormat = (k: TextFormatType, v: boolean) => {
+ const fmt = formats || {};
+ fmt[k] = v;
+ formats = fmt;
+ };
+ switch (fontWeight) {
+ case '400':
+ case 'normal':
+ setFormat('bold', false);
+ break;
+ case '700':
+ case 'bold':
+ setFormat('bold', true);
+ break;
+ default:
+ break;
+ }
+ const italic = 'italic';
+ if (fontStyle === 'normal') {
+ setFormat(italic, false);
+ } else if (fontStyle === italic) {
+ setFormat(italic, true);
+ }
+ const underline = 'underline';
+ const strikethrough = 'strikethrough';
+ for (const dec of textDecoration.split(' ')) {
+ if (dec === 'none') {
+ setFormat(underline, false);
+ setFormat(strikethrough, false);
+ } else if (dec === underline) {
+ setFormat(underline, true);
+ } else if (dec === 'line-through') {
+ setFormat('strikethrough', true);
+ }
+ }
+ if (verticalAlign === 'sub') {
+ setFormat('subscript', true);
+ } else if (verticalAlign === 'super') {
+ setFormat('superscript', true);
+ }
+ if (formats) {
+ $updateImportContextValue(ImportContextTextFormats, (v) => ({
+ ...v,
+ ...formats,
+ }));
+ }
+}
+
+function $updateTextAlignmentContextFromDOM(dom: HTMLElement): void {
+ const {textAlign} = dom.style;
+ switch (textAlign) {
+ case 'center':
+ case 'end':
+ case 'justify':
+ case 'left':
+ case 'right':
+ case 'start':
+ $setImportContextValue(ImportContextTextAlign, textAlign);
+ break;
+ default:
+ break;
+ }
+}
+
+const NO_LEGACY_CONFIG: Partial = {
+ compileLegacyImportNode: () => () => null,
+ overrides: [
+ importOverride('#text', $convertTextDOMNode),
+ importOverride('br', () => ({node: $createLineBreakNode()})),
+ importOverride('*', function $overrideCreateParagraphFromBlock(dom) {
+ if (isBlockDomNode(dom)) {
+ $addImportContextFinalizer($unwrapBlockDOM);
+ return {
+ node: $applyTextAlignToElement($createParagraphNode()),
+ };
+ }
+ }),
+ ...formatOverrides,
+ ...listOverrides,
+ importOverride('li', (dom) => {
+ const node = $applyTextAlignToElement($createListItemNode());
+ let ariaChecked: boolean | undefined;
+ if (dom.ariaChecked === 'true') {
+ ariaChecked = true;
+ } else if (dom.ariaChecked === 'false') {
+ ariaChecked = false;
+ } else {
+ const input: null | HTMLInputElement = dom.querySelector(
+ 'input[type=checkbox]',
+ );
+ if (input) {
+ ariaChecked = input.checked;
+ }
+ }
+ if (ariaChecked !== undefined) {
+ node.setChecked(ariaChecked);
+ }
+ $addImportContextFinalizer($normalizeListItemNode);
+ return {node};
+ }),
+ importOverride(
+ '*',
+ function $overrideBlockFormatAndAlignment(dom): undefined {
+ if (isHTMLElement(dom)) {
+ if (isBlockDomNode(dom)) {
+ $updateTextAlignmentContextFromDOM(dom);
+ }
+ $updateFormatContextFromDOM(dom);
+ }
+ },
+ {priority: 1},
+ ),
+ ],
+};
+
+describe('DOMImportExtension (no legacy)', () => {
+ test.each([
+ importCase(
+ 'center aligned',
+ html`
+
+ `,
+ html`
+
+ Hello world!
+
+ `,
+ ),
+ importCase(
+ 'reduced ul>li>p',
+ ``,
+ html`
+
+ `,
+ ),
+ {
+ expectedHTML: html`
+ Hello!
+ `,
+ name: 'plain DOM text node',
+ pastedHTML: html`
+ Hello!
+ `,
+ },
+ {
+ expectedHTML: html`
+ Hello!
+
+ `,
+ name: 'a paragraph element',
+ pastedHTML: html`
+ Hello!
+
+ `,
+ },
+ {
+ expectedHTML: html`
+ 123
+ 456
+ `,
+ name: 'a single div',
+ pastedHTML: html`
+ 123
+ 456
+ `,
+ },
+ {
+ expectedHTML: html`
+ a b c d e
+ f g h
+ `,
+ name: 'multiple nested spans and divs',
+ pastedHTML: html`
+
+ a b
+
+ c d
+ e
+
+
+ f
+ g h
+
+
123
+ 456
+ `,
+ name: 'nested span in a div',
+ pastedHTML: html`
+
+ `,
+ },
+ {
+ expectedHTML: html`
+ 123
+ 456
+ `,
+ name: 'nested div in a span',
+ pastedHTML: html`
+
+ 123
+ 456
+
+ `,
+ },
+ {
+ expectedHTML: html`
+
+ -
+ done
+
+ -
+ todo
+
+ -
+
+
+ -
+ todo
+
+
+ `,
+ name: 'google doc checklist',
+ // We can't use the HTML template literal formatter here because it's white-space:pre
+ pastedHTML: ``,
+ },
+ {
+ expectedHTML: html`
+
+ checklist
+
+
+ `,
+ name: 'github checklist',
+ pastedHTML: html`
+
+
+ checklist
+
+
+ `,
+ },
+ {
+ expectedHTML: html`
+
+
+ hello world
+
+
+ `,
+ name: 'pasting inheritance',
+ pastedHTML: html`
+ hello
+ `,
+ plainTextInsert: ' world',
+ },
+ ])(
+ '$name',
+ ({
+ expectedHTML,
+ pastedHTML,
+ plainTextInsert,
+ importConfig = {},
+ exportConfig = {},
+ }: ImportTestCase) => {
+ const builtEditor = buildEditorFromExtensions(
+ defineExtension({
+ $initialEditorState: (editor) => {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(pastedHTML, 'text/html');
+ const nodes = getExtensionDependencyFromEditor(
+ $getEditor(),
+ DOMImportExtension,
+ ).output.$importNodes(doc);
+
+ // Compare legacy $generateNodesFromDOM to $generateNodes
+ const legacyNodes = $generateNodesFromDOM(editor, doc);
+ expect(nodes.length).toEqual(legacyNodes.length);
+ function compareJSON(a: LexicalNode, b: LexicalNode) {
+ expect(a.exportJSON()).toEqual(b.exportJSON());
+ if ($isElementNode(a) && $isElementNode(b)) {
+ const as = a.getChildren();
+ const bs = b.getChildren();
+ expect(as.length).toEqual(bs.length);
+ for (let i = 0; i < as.length; i++) {
+ compareJSON(as[i], bs[i]);
+ }
+ }
+ }
+ for (let i = 0; i < nodes.length; i++) {
+ compareJSON(nodes[i], legacyNodes[i]);
+ }
+
+ $insertGeneratedNodes(editor, nodes, $selectAll());
+ if (plainTextInsert) {
+ const newSelection = $getSelection();
+ assert(
+ $isRangeSelection(newSelection),
+ 'isRangeSelection(newSelection) for plainTextInsert',
+ );
+ newSelection.insertText(plainTextInsert);
+ }
+ $setSelection(null);
+ },
+ dependencies: [
+ configExtension(DOMImportExtension, NO_LEGACY_CONFIG, importConfig),
+ configExtension(DOMRenderExtension, exportConfig),
+ ListExtension,
+ CheckListExtension,
+ ],
+ name: 'root',
+ theme: {
+ text: {
+ bold: 'editor-text-bold',
+ italic: 'editor-text-italic',
+ underline: 'editor-text-underline',
+ },
+ },
+ }),
+ );
+ const rootElement = document.createElement('div');
+ builtEditor.setRootElement(rootElement);
+ // try {
+ expectHtmlToBeEqual(rootElement.innerHTML, expectedHTML);
+ // } catch (err) {
+ // console.log(prettifyHtml(rootElement.innerHTML));
+ // console.log(prettifyHtml(expectedHTML));
+ // throw err;
+ // }
+ },
+ );
+});
diff --git a/packages/lexical-html/src/__tests__/unit/DOMRenderExtension.test.ts b/packages/lexical-html/src/__tests__/unit/DOMRenderExtension.test.ts
new file mode 100644
index 00000000000..d4ce0c3a5ab
--- /dev/null
+++ b/packages/lexical-html/src/__tests__/unit/DOMRenderExtension.test.ts
@@ -0,0 +1,277 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {buildEditorFromExtensions} from '@lexical/extension';
+import {
+ $generateDOMFromRoot,
+ $getRenderContextValue,
+ domOverride,
+ DOMRenderExtension,
+ RenderContextRoot,
+} from '@lexical/html';
+import {
+ $create,
+ $createLineBreakNode,
+ $createParagraphNode,
+ $createTextNode,
+ $getRoot,
+ $getState,
+ $getStateChange,
+ $setState,
+ configExtension,
+ createState,
+ defineExtension,
+ isHTMLElement,
+ TextNode,
+} from 'lexical';
+import {expectHtmlToBeEqual, html} from 'lexical/src/__tests__/utils';
+import {describe, expect, test} from 'vitest';
+
+const idState = createState('id', {
+ parse: (v) => (typeof v === 'string' ? v : null),
+});
+
+describe('DOMRenderExtension', () => {
+ test('can override DOM create + update', () => {
+ const editor = buildEditorFromExtensions(
+ defineExtension({
+ $initialEditorState: () => {
+ const root = $getRoot();
+ $setState(root, idState, 'root').append(
+ $setState($createParagraphNode(), idState, 'paragraph').append(
+ $setState($createTextNode('text!'), idState, 'text'),
+ ),
+ );
+ },
+ dependencies: [
+ configExtension(DOMRenderExtension, {
+ overrides: [
+ domOverride('*', {
+ $createDOM(node, $next) {
+ const result = $next();
+ const id = $getState(node, idState);
+ if (id) {
+ result.setAttribute('id', id);
+ }
+ return result;
+ },
+ $updateDOM(nextNode, prevNode, dom, $next) {
+ if ($next()) {
+ return true;
+ }
+ const change = $getStateChange(nextNode, prevNode, idState);
+ if (change) {
+ const [id] = change;
+ if (id) {
+ dom.setAttribute('id', id);
+ } else {
+ dom.removeAttribute('id');
+ }
+ }
+ return false;
+ },
+ }),
+ ],
+ }),
+ ],
+ name: 'root',
+ }),
+ );
+ const root = document.createElement('div');
+ editor.setRootElement(root);
+ expect(
+ editor.read(() => {
+ expectHtmlToBeEqual(
+ root.innerHTML,
+ html`
+
+ text!
+
+ `,
+ );
+ }),
+ );
+ editor.update(
+ () =>
+ $getRoot()
+ .getAllTextNodes()
+ .forEach((node) =>
+ $setState(node, idState, (prev) => `${prev}-updated`),
+ ),
+ {discrete: true},
+ );
+ // Update works too
+ expect(
+ editor.read(() => {
+ expectHtmlToBeEqual(
+ root.innerHTML,
+ html`
+
+ text!
+
+ `,
+ );
+ }),
+ );
+ editor.update(
+ () =>
+ $getRoot()
+ .getAllTextNodes()
+ .forEach((node) => $setState(node, idState, null)),
+ {discrete: true},
+ );
+ expect(
+ editor.read(() => {
+ expectHtmlToBeEqual(
+ root.innerHTML,
+ html`
+
+ text!
+
+ `,
+ );
+ }),
+ );
+ });
+ test('can override DOM export', () => {
+ const editor = buildEditorFromExtensions(
+ defineExtension({
+ $initialEditorState: () => {
+ const root = $getRoot();
+ $setState(root, idState, 'root').append(
+ $setState($createParagraphNode(), idState, 'paragraph').append(
+ $setState($createTextNode('text!'), idState, 'text'),
+ ),
+ );
+ },
+ dependencies: [
+ configExtension(DOMRenderExtension, {
+ overrides: [
+ domOverride('*', {
+ $exportDOM(node, $next) {
+ const result = $next();
+ const id = $getState(node, idState);
+ if (id && isHTMLElement(result.element)) {
+ result.element.setAttribute('id', id);
+ }
+ return result;
+ },
+ }),
+ domOverride([TextNode], {
+ $exportDOM(node, $next) {
+ const result = $next();
+ if (
+ $getRenderContextValue(RenderContextRoot) &&
+ isHTMLElement(result.element) &&
+ result.element.style.getPropertyValue('white-space') ===
+ 'pre-wrap' &&
+ // we know there aren't tabs or newlines but if there are
+ // leading, trailing, or adjacent spaces then we need the
+ // pre-wrap to preserve the content
+ !/^\s|\s$|\s\s/.test(result.element.textContent)
+ ) {
+ result.element.style.setProperty('white-space', null);
+ if (result.element.style.cssText === '') {
+ result.element.removeAttribute('style');
+ }
+ }
+ return result;
+ },
+ }),
+ ],
+ }),
+ ],
+ name: 'root',
+ }),
+ );
+ expect(
+ editor.read(() => {
+ expectHtmlToBeEqual(
+ $generateDOMFromRoot(document.createElement('div')).innerHTML,
+ html`
+
+ `,
+ );
+ }),
+ );
+ });
+ test('type merge', () => {
+ class TextNodeA extends TextNode {
+ $config() {
+ return this.config('text-a', {extends: TextNode});
+ }
+ }
+ const editor = buildEditorFromExtensions(
+ defineExtension({
+ $initialEditorState: () => {
+ $getRoot().append(
+ $createParagraphNode().append(
+ $create(TextNodeA).setTextContent('text a'),
+ $createLineBreakNode(),
+ $createTextNode().setTextContent('plain text'),
+ ),
+ );
+ },
+ dependencies: [
+ configExtension(DOMRenderExtension, {
+ overrides: [
+ domOverride([TextNode], {
+ $exportDOM(node) {
+ const span = document.createElement('span');
+ span.append(node.getTextContent());
+ return {element: span};
+ },
+ }),
+ domOverride([TextNodeA], {
+ $exportDOM(node) {
+ const span = document.createElement('span');
+ span.append(node.getTextContent());
+ span.dataset.lexicalType = node.getType();
+ return {element: span};
+ },
+ }),
+ domOverride([TextNode], {
+ $exportDOM(node, $next) {
+ const r = $next();
+ if (isHTMLElement(r.element)) {
+ r.element.dataset.didOverride = 'true';
+ }
+ return r;
+ },
+ }),
+ ],
+ }),
+ ],
+ name: 'root',
+ nodes: [TextNodeA],
+ }),
+ );
+ expect(
+ editor.read(() => {
+ expectHtmlToBeEqual(
+ $generateDOMFromRoot(document.createElement('div')).innerHTML,
+ html`
+
+
+
+ text a
+
+
+ plain text
+
+
