[lexical] Add tests for HTMLConfig

packages/lexical/src/LexicalEditor.ts

@@ -171,7 +171,11 @@ export type LexicalNodeReplacement = {
 export type HTMLConfig = {
   export?: Map<
     Klass<LexicalNode>,
-    (editor: LexicalEditor, target: LexicalNode) => DOMExportOutput
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <T extends {new (...args: any): any}>(
+      editor: LexicalEditor,
+      target: InstanceType<T>,
+    ) => DOMExportOutput
   >;
   import?: DOMConversionMap;
 };

packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+import {$generateHtmlFromNodes, $generateNodesFromDOM} from '@lexical/html';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
@@ -2269,4 +2270,105 @@ describe('LexicalEditor tests', () => {
     newEditor1.setRootElement(null);
     newEditor2.setRootElement(null);
   });
+
+  describe('html config', () => {
+    it('should work correctly', async () => {
+      const onError = jest.fn();
+
+      const newEditor = createTestEditor({
+        html: {
+          export: new Map([
+            [TextNode, () => ({element: document.createElement('figure')})],
+          ]),
+          import: {
+            figure: () => ({
+              conversion: () => ({node: $createTextNode('yolo')}),
+              priority: 4,
+            }),
+          },
+        },
+        onError: onError,
+      });
+
+      newEditor.setRootElement(container);
+
+      newEditor.update(() => {
+        const root = $getRoot();
+        const paragraph = $createParagraphNode();
+        const text = $createTextNode();
+        root.append(paragraph);
+        paragraph.append(text);
+
+        const selection = $createNodeSelection();
+        selection.add(text.getKey());
+
+        const html = $generateHtmlFromNodes(newEditor, selection);
+        expect(html).toBe('<figure></figure>');
+
+        const parser = new DOMParser();
+        const dom = parser.parseFromString(html, 'text/html');
+        const node = $generateNodesFromDOM(newEditor, dom)[0];
+
+        expect(node).toEqual({
+          __detail: 0,
+          __format: 0,
+          __key: node.getKey(),
+          __mode: 0,
+          __next: null,
+          __parent: null,
+          __prev: null,
+          __style: '',
+          __text: 'yolo',
+          __type: 'text',
+        });
+      });
+
+      expect(onError).not.toHaveBeenCalled();
+    });
+
+    it('can utilize the methods of the target node in export callback', async () => {
+      const onError = jest.fn();
+
+      const newEditor = createTestEditor({
+        html: {
+          export: new Map([
+            [
+              TextNode,
+              (_, target: TextNode) => {
+                if (target.hasFormat('bold')) {
+                  return {element: document.createElement('bar')};
+                }
+
+                return {element: document.createElement('foo')};
+              },
+            ],
+          ]),
+        },
+        onError: onError,
+      });
+
+      newEditor.setRootElement(container);
+
+      newEditor.update(() => {
+        const root = $getRoot();
+        const paragraph = $createParagraphNode();
+        const text = $createTextNode();
+        root.append(paragraph);
+        paragraph.append(text);
+
+        const selection = $createNodeSelection();
+        selection.add(text.getKey());
+
+        const htmlFoo = $generateHtmlFromNodes(newEditor, selection);
+        expect(htmlFoo).toBe('<foo></foo>');
+
+        text.toggleFormat('bold');
+
+        const htmlBar = $generateHtmlFromNodes(newEditor, selection);
+        expect(htmlBar).toBe('<bar></bar>');
+      });
+
+      expect(onError).not.toHaveBeenCalled();
+    });
+  });
 });

packages/lexical/src/__tests__/utils/index.tsx

@@ -45,7 +45,11 @@ import {createRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import * as ReactTestUtils from 'shared/react-test-utils';
 
-import {CreateEditorArgs, LexicalNodeReplacement} from '../../LexicalEditor';
+import {
+  CreateEditorArgs,
+  HTMLConfig,
+  LexicalNodeReplacement,
+} from '../../LexicalEditor';
 import {resetRandomKey} from '../../LexicalUtils';
 
 type TestEnv = {
@@ -515,6 +519,7 @@ export function createTestEditor(
     onError?: (error: Error) => void;
     disableEvents?: boolean;
     readOnly?: boolean;
+    html?: HTMLConfig;
   } = {},
 ): LexicalEditor {
   const customNodes = config.nodes || [];