@lexical/html 0.37.1-nightly.20251027.0 → 0.38.0

package/LexicalHtml.js

@@ -6,6 +6,6 @@
  *
  */
 
-'use strict'
-const LexicalHtml = process.env.NODE_ENV !== 'production' ? require('./LexicalHtml.dev.js') : require('./LexicalHtml.prod.js');
-module.exports = LexicalHtml;
+'use strict';
+
+module.exports = require('./dist/LexicalHtml.js');

package/package.json

@@ -8,7 +8,7 @@
     "html"
   ],
   "license": "MIT",
-  "version": "0.37.1-nightly.20251027.0",
+  "version": "0.38.0",
   "main": "LexicalHtml.js",
   "types": "index.d.ts",
   "repository": {
@@ -17,9 +17,9 @@
     "directory": "packages/lexical-html"
   },
   "dependencies": {
-    "@lexical/selection": "0.37.1-nightly.20251027.0",
-    "@lexical/utils": "0.37.1-nightly.20251027.0",
-    "lexical": "0.37.1-nightly.20251027.0"
+    "@lexical/selection": "0.38.0",
+    "@lexical/utils": "0.38.0",
+    "lexical": "0.38.0"
   },
   "module": "LexicalHtml.mjs",
   "sideEffects": false,

package/src/__tests__/unit/LexicalHtml.test.ts

@@ -0,0 +1,265 @@
+/**
+ * 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 {CodeNode} from '@lexical/code';
+import {createHeadlessEditor} from '@lexical/headless';
+import {$generateHtmlFromNodes, $generateNodesFromDOM} from '@lexical/html';
+import {LinkNode} from '@lexical/link';
+import {ListItemNode, ListNode} from '@lexical/list';
+import {HeadingNode, QuoteNode} from '@lexical/rich-text';
+import {
+  $createParagraphNode,
+  $createRangeSelection,
+  $createTextNode,
+  $getRoot,
+  ParagraphNode,
+  RangeSelection,
+} from 'lexical';
+import {describe, expect, test} from 'vitest';
+
+describe('HTML', () => {
+  type Input = Array<{
+    name: string;
+    html: string;
+    initializeEditorState: () => void;
+  }>;
+
+  const HTML_SERIALIZE: Input = [
+    {
+      html: '<p><br></p>',
+      initializeEditorState: () => {
+        $getRoot().append($createParagraphNode());
+      },
+      name: 'Empty editor state',
+    },
+  ];
+  for (const {name, html, initializeEditorState} of HTML_SERIALIZE) {
+    test(`[Lexical -> HTML]: ${name}`, () => {
+      const editor = createHeadlessEditor({
+        nodes: [
+          HeadingNode,
+          ListNode,
+          ListItemNode,
+          QuoteNode,
+          CodeNode,
+          LinkNode,
+        ],
+      });
+
+      editor.update(initializeEditorState, {
+        discrete: true,
+      });
+
+      expect(
+        editor.getEditorState().read(() => $generateHtmlFromNodes(editor)),
+      ).toBe(html);
+    });
+  }
+
+  test(`[Lexical -> HTML]: Use provided selection`, () => {
+    const editor = createHeadlessEditor({
+      nodes: [
+        HeadingNode,
+        ListNode,
+        ListItemNode,
+        QuoteNode,
+        CodeNode,
+        LinkNode,
+      ],
+    });
+
+    let selection: RangeSelection | null = null;
+
+    editor.update(
+      () => {
+        const root = $getRoot();
+        const p1 = $createParagraphNode();
+        const text1 = $createTextNode('Hello');
+        p1.append(text1);
+        const p2 = $createParagraphNode();
+        const text2 = $createTextNode('World');
+        p2.append(text2);
+        root.append(p1).append(p2);
+        // Root
+        // - ParagraphNode
+        // -- TextNode "Hello"
+        // - ParagraphNode
+        // -- TextNode "World"
+        p1.select(0, text1.getTextContentSize());
+        selection = $createRangeSelection();
+        selection.setTextNodeRange(text2, 0, text2, text2.getTextContentSize());
+      },
+      {
+        discrete: true,
+      },
+    );
+
+    let html = '';
+
+    editor.update(() => {
+      html = $generateHtmlFromNodes(editor, selection);
+    });
+
+    expect(html).toBe('<span style="white-space: pre-wrap;">World</span>');
+  });
+
+  test(`[Lexical -> HTML]: Default selection (undefined) should serialize entire editor state`, () => {
+    const editor = createHeadlessEditor({
+      nodes: [
+        HeadingNode,
+        ListNode,
+        ListItemNode,
+        QuoteNode,
+        CodeNode,
+        LinkNode,
+      ],
+    });
+
+    editor.update(
+      () => {
+        const root = $getRoot();
+        const p1 = $createParagraphNode();
+        const text1 = $createTextNode('Hello');
+        p1.append(text1);
+        const p2 = $createParagraphNode();
+        const text2 = $createTextNode('World');
+        p2.append(text2);
+        root.append(p1).append(p2);
+        // Root
+        // - ParagraphNode
+        // -- TextNode "Hello"
+        // - ParagraphNode
+        // -- TextNode "World"
+        p1.select(0, text1.getTextContentSize());
+      },
+      {
+        discrete: true,
+      },
+    );
+
+    let html = '';
+
+    editor.update(() => {
+      html = $generateHtmlFromNodes(editor);
+    });
+
+    expect(html).toBe(
+      '<p><span style="white-space: pre-wrap;">Hello</span></p><p><span style="white-space: pre-wrap;">World</span></p>',
+    );
+  });
+
+  test(`If alignment is set on the paragraph, don't overwrite from parent empty format`, () => {
+    const editor = createHeadlessEditor();
+    const parser = new DOMParser();
+    const rightAlignedParagraphInDiv =
+      '<div><p style="text-align: center;">Hello world!</p></div>';
+
+    editor.update(
+      () => {
+        const root = $getRoot();
+        const dom = parser.parseFromString(
+          rightAlignedParagraphInDiv,
+          'text/html',
+        );
+        const nodes = $generateNodesFromDOM(editor, dom);
+        root.append(...nodes);
+      },
+      {discrete: true},
+    );
+
+    let html = '';
+
+    editor.update(() => {
+      html = $generateHtmlFromNodes(editor);
+    });
+
+    expect(html).toBe(
+      '<p style="text-align: center;"><span style="white-space: pre-wrap;">Hello world!</span></p>',
+    );
+  });
+
+  test(`If alignment is set on the paragraph, it should take precedence over its parent block alignment`, () => {
+    const editor = createHeadlessEditor();
+    const parser = new DOMParser();
+    const rightAlignedParagraphInDiv =
+      '<div style="text-align: right;"><p style="text-align: center;">Hello world!</p></div>';
+
+    editor.update(
+      () => {
+        const root = $getRoot();
+        const dom = parser.parseFromString(
+          rightAlignedParagraphInDiv,
+          'text/html',
+        );
+        const nodes = $generateNodesFromDOM(editor, dom);
+        root.append(...nodes);
+      },
+      {discrete: true},
+    );
+
+    let html = '';
+
+    editor.update(() => {
+      html = $generateHtmlFromNodes(editor);
+    });
+
+    expect(html).toBe(
+      '<p style="text-align: center;"><span style="white-space: pre-wrap;">Hello world!</span></p>',
+    );
+  });
+
+  test('It should output correctly nodes whose export is DocumentFragment', () => {
+    const editor = createHeadlessEditor({
+      html: {
+        export: new Map([
+          [
+            ParagraphNode,
+            () => {
+              const element = document.createDocumentFragment();
+              return {
+                element,
+              };
+            },
+          ],
+        ]),
+      },
+      nodes: [],
+    });
+
+    editor.update(
+      () => {
+        const root = $getRoot();
+        const p1 = $createParagraphNode();
+        const text1 = $createTextNode('Hello');
+        p1.append(text1);
+        const p2 = $createParagraphNode();
+        const text2 = $createTextNode('World');
+        p2.append(text2);
+        root.append(p1).append(p2);
+        // Root
+        // - ParagraphNode
+        // -- TextNode "Hello"
+        // - ParagraphNode
+        // -- TextNode "World"
+      },
+      {
+        discrete: true,
+      },
+    );
+
+    let html = '';
+
+    editor.update(() => {
+      html = $generateHtmlFromNodes(editor);
+    });
+
+    expect(html).toBe(
+      '<span style="white-space: pre-wrap;">Hello</span><span style="white-space: pre-wrap;">World</span>',
+    );
+  });
+});

package/{LexicalHtml.dev.mjs → src/index.ts}

@@ -6,56 +6,103 @@
  *
  */
 
-import { $sliceSelectedTextNodeContent } from '@lexical/selection';
-import { isHTMLElement, isBlockDomNode } from '@lexical/utils';
-import { isDOMDocumentNode, $getRoot, $isElementNode, $isTextNode, getRegisteredNode, isDocumentFragment, $isRootOrShadowRoot, $isBlockElementNode, $createLineBreakNode, ArtificialNode__DO_NOT_USE, isInlineDomNode, $createParagraphNode } from 'lexical';
-
-/**
- * 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 type {
+  BaseSelection,
+  DOMChildConversion,
+  DOMConversion,
+  DOMConversionFn,
+  ElementFormatType,
+  LexicalEditor,
+  LexicalNode,
+} from 'lexical';
 
+import {$sliceSelectedTextNodeContent} from '@lexical/selection';
+import {isBlockDomNode, isHTMLElement} from '@lexical/utils';
+import {
+  $createLineBreakNode,
+  $createParagraphNode,
+  $getRoot,
+  $isBlockElementNode,
+  $isElementNode,
+  $isRootOrShadowRoot,
+  $isTextNode,
+  ArtificialNode__DO_NOT_USE,
+  ElementNode,
+  getRegisteredNode,
+  isDocumentFragment,
+  isDOMDocumentNode,
+  isInlineDomNode,
+} from 'lexical';
 
 /**
  * How you parse your html string to get a document is left up to you. In the browser you can use the native
  * DOMParser API to generate a document (see clipboard.ts), but to use in a headless environment you can use JSDom
  * or an equivalent library and pass in the document here.
  */
-function $generateNodesFromDOM(editor, dom) {
-  const elements = isDOMDocumentNode(dom) ? dom.body.childNodes : dom.childNodes;
-  let lexicalNodes = [];
-  const allArtificialNodes = [];
+export function $generateNodesFromDOM(
+  editor: LexicalEditor,
+  dom: Document | ParentNode,
+): Array<LexicalNode> {
+  const elements = isDOMDocumentNode(dom)
+    ? dom.body.childNodes
+    : dom.childNodes;
+  let lexicalNodes: Array<LexicalNode> = [];
+  const allArtificialNodes: Array<ArtificialNode__DO_NOT_USE> = [];
   for (const element of elements) {
     if (!IGNORE_TAGS.has(element.nodeName)) {
-      const lexicalNode = $createNodesFromDOM(element, editor, allArtificialNodes, false);
+      const lexicalNode = $createNodesFromDOM(
+        element,
+        editor,
+        allArtificialNodes,
+        false,
+      );
       if (lexicalNode !== null) {
         lexicalNodes = lexicalNodes.concat(lexicalNode);
       }
     }
   }
   $unwrapArtificialNodes(allArtificialNodes);
+
   return lexicalNodes;
 }
-function $generateHtmlFromNodes(editor, selection) {
-  if (typeof document === 'undefined' || typeof window === 'undefined' && typeof global.window === 'undefined') {
-    throw new Error('To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.');
+
+export function $generateHtmlFromNodes(
+  editor: LexicalEditor,
+  selection?: BaseSelection | null,
+): string {
+  if (
+    typeof document === 'undefined' ||
+    (typeof window === 'undefined' && typeof global.window === 'undefined')
+  ) {
+    throw new Error(
+      'To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.',
+    );
   }
+
   const container = document.createElement('div');
   const root = $getRoot();
   const topLevelChildren = root.getChildren();
+
   for (let i = 0; i < topLevelChildren.length; i++) {
     const topLevelNode = topLevelChildren[i];
     $appendNodesToHTML(editor, topLevelNode, container, selection);
   }
+
   return container.innerHTML;
 }
-function $appendNodesToHTML(editor, currentNode, parentElement, selection = null) {
-  let shouldInclude = selection !== null ? currentNode.isSelected(selection) : true;
-  const shouldExclude = $isElementNode(currentNode) && currentNode.excludeFromCopy('html');
+
+function $appendNodesToHTML(
+  editor: LexicalEditor,
+  currentNode: LexicalNode,
+  parentElement: HTMLElement | DocumentFragment,
+  selection: BaseSelection | null = null,
+): boolean {
+  let shouldInclude =
+    selection !== null ? currentNode.isSelected(selection) : true;
+  const shouldExclude =
+    $isElementNode(currentNode) && currentNode.excludeFromCopy('html');
   let target = currentNode;
+
   if (selection !== null && $isTextNode(currentNode)) {
     target = $sliceSelectedTextNodeContent(selection, currentNode, 'clone');
   }
@@ -69,26 +116,40 @@ function $appendNodesToHTML(editor, currentNode, parentElement, selection = null
   } else {
     exportOutput = target.exportDOM(editor);
   }
-  const {
-    element,
-    after
-  } = exportOutput;
+
+  const {element, after} = exportOutput;
+
   if (!element) {
     return false;
   }
+
   const fragment = document.createDocumentFragment();
+
   for (let i = 0; i < children.length; i++) {
     const childNode = children[i];
-    const shouldIncludeChild = $appendNodesToHTML(editor, childNode, fragment, selection);
-    if (!shouldInclude && $isElementNode(currentNode) && shouldIncludeChild && currentNode.extractWithChild(childNode, selection, 'html')) {
+    const shouldIncludeChild = $appendNodesToHTML(
+      editor,
+      childNode,
+      fragment,
+      selection,
+    );
+
+    if (
+      !shouldInclude &&
+      $isElementNode(currentNode) &&
+      shouldIncludeChild &&
+      currentNode.extractWithChild(childNode, selection, 'html')
+    ) {
       shouldInclude = true;
     }
   }
+
   if (shouldInclude && !shouldExclude) {
     if (isHTMLElement(element) || isDocumentFragment(element)) {
       element.append(fragment);
     }
     parentElement.append(element);
+
     if (after) {
       const newElement = after.call(target, element);
       if (newElement) {
@@ -102,52 +163,89 @@ function $appendNodesToHTML(editor, currentNode, parentElement, selection = null
   } else {
     parentElement.append(fragment);
   }
+
   return shouldInclude;
 }
-function getConversionFunction(domNode, editor) {
-  const {
-    nodeName
-  } = domNode;
+
+function getConversionFunction(
+  domNode: Node,
+  editor: LexicalEditor,
+): DOMConversionFn | null {
+  const {nodeName} = domNode;
+
   const cachedConversions = editor._htmlConversions.get(nodeName.toLowerCase());
-  let currentConversion = null;
+
+  let currentConversion: DOMConversion | null = null;
+
   if (cachedConversions !== undefined) {
     for (const cachedConversion of cachedConversions) {
       const domConversion = cachedConversion(domNode);
-      if (domConversion !== null && (currentConversion === null ||
-      // Given equal priority, prefer the last registered importer
-      // which is typically an application custom node or HTMLConfig['import']
-      (currentConversion.priority || 0) <= (domConversion.priority || 0))) {
+      if (
+        domConversion !== null &&
+        (currentConversion === null ||
+          // Given equal priority, prefer the last registered importer
+          // which is typically an application custom node or HTMLConfig['import']
+          (currentConversion.priority || 0) <= (domConversion.priority || 0))
+      ) {
         currentConversion = domConversion;
       }
     }
   }
+
   return currentConversion !== null ? currentConversion.conversion : null;
 }
+
 const IGNORE_TAGS = new Set(['STYLE', 'SCRIPT']);
-function $createNodesFromDOM(node, editor, allArtificialNodes, hasBlockAncestorLexicalNode, forChildMap = new Map(), parentLexicalNode) {
-  let lexicalNodes = [];
+
+function $createNodesFromDOM(
+  node: Node,
+  editor: LexicalEditor,
+  allArtificialNodes: Array<ArtificialNode__DO_NOT_USE>,
+  hasBlockAncestorLexicalNode: boolean,
+  forChildMap: Map<string, DOMChildConversion> = new Map(),
+  parentLexicalNode?: LexicalNode | null | undefined,
+): Array<LexicalNode> {
+  let lexicalNodes: Array<LexicalNode> = [];
+
   if (IGNORE_TAGS.has(node.nodeName)) {
     return lexicalNodes;
   }
+
   let currentLexicalNode = null;
   const transformFunction = getConversionFunction(node, editor);
-  const transformOutput = transformFunction ? transformFunction(node) : null;
+  const transformOutput = transformFunction
+    ? transformFunction(node as HTMLElement)
+    : null;
   let postTransform = null;
+
   if (transformOutput !== null) {
     postTransform = transformOutput.after;
     const transformNodes = transformOutput.node;
-    currentLexicalNode = Array.isArray(transformNodes) ? transformNodes[transformNodes.length - 1] : transformNodes;
+    currentLexicalNode = Array.isArray(transformNodes)
+      ? transformNodes[transformNodes.length - 1]
+      : transformNodes;
+
     if (currentLexicalNode !== null) {
       for (const [, forChildFunction] of forChildMap) {
-        currentLexicalNode = forChildFunction(currentLexicalNode, parentLexicalNode);
+        currentLexicalNode = forChildFunction(
+          currentLexicalNode,
+          parentLexicalNode,
+        );
+
         if (!currentLexicalNode) {
           break;
         }
       }
+
       if (currentLexicalNode) {
-        lexicalNodes.push(...(Array.isArray(transformNodes) ? transformNodes : [currentLexicalNode]));
+        lexicalNodes.push(
+          ...(Array.isArray(transformNodes)
+            ? transformNodes
+            : [currentLexicalNode]),
+        );
       }
     }
+
     if (transformOutput.forChild != null) {
       forChildMap.set(node.nodeName, transformOutput.forChild);
     }
@@ -157,16 +255,38 @@ function $createNodesFromDOM(node, editor, allArtificialNodes, hasBlockAncestorL
   // to do with it but we still need to process any childNodes.
   const children = node.childNodes;
   let childLexicalNodes = [];
-  const hasBlockAncestorLexicalNodeForChildren = currentLexicalNode != null && $isRootOrShadowRoot(currentLexicalNode) ? false : currentLexicalNode != null && $isBlockElementNode(currentLexicalNode) || hasBlockAncestorLexicalNode;
+
+  const hasBlockAncestorLexicalNodeForChildren =
+    currentLexicalNode != null && $isRootOrShadowRoot(currentLexicalNode)
+      ? false
+      : (currentLexicalNode != null &&
+          $isBlockElementNode(currentLexicalNode)) ||
+        hasBlockAncestorLexicalNode;
+
   for (let i = 0; i < children.length; i++) {
-    childLexicalNodes.push(...$createNodesFromDOM(children[i], editor, allArtificialNodes, hasBlockAncestorLexicalNodeForChildren, new Map(forChildMap), currentLexicalNode));
+    childLexicalNodes.push(
+      ...$createNodesFromDOM(
+        children[i],
+        editor,
+        allArtificialNodes,
+        hasBlockAncestorLexicalNodeForChildren,
+        new Map(forChildMap),
+        currentLexicalNode,
+      ),
+    );
   }
+
   if (postTransform != null) {
     childLexicalNodes = postTransform(childLexicalNodes);
   }
+
   if (isBlockDomNode(node)) {
     if (!hasBlockAncestorLexicalNodeForChildren) {
-      childLexicalNodes = wrapContinuousInlines(node, childLexicalNodes, $createParagraphNode);
+      childLexicalNodes = wrapContinuousInlines(
+        node,
+        childLexicalNodes,
+        $createParagraphNode,
+      );
     } else {
       childLexicalNodes = wrapContinuousInlines(node, childLexicalNodes, () => {
         const artificialNode = new ArtificialNode__DO_NOT_USE();
@@ -175,6 +295,7 @@ function $createNodesFromDOM(node, editor, allArtificialNodes, hasBlockAncestorL
       });
     }
   }
+
   if (currentLexicalNode == null) {
     if (childLexicalNodes.length > 0) {
       // If it hasn't been converted to a LexicalNode, we hoist its children
@@ -193,12 +314,19 @@ function $createNodesFromDOM(node, editor, allArtificialNodes, hasBlockAncestorL
       currentLexicalNode.append(...childLexicalNodes);
     }
   }
+
   return lexicalNodes;
 }
-function wrapContinuousInlines(domNode, nodes, createWrapperFn) {
-  const textAlign = domNode.style.textAlign;
-  const out = [];
-  let continuousInlines = [];
+
+function wrapContinuousInlines(
+  domNode: Node,
+  nodes: Array<LexicalNode>,
+  createWrapperFn: () => ElementNode,
+): Array<LexicalNode> {
+  const textAlign = (domNode as HTMLElement).style
+    .textAlign as ElementFormatType;
+  const out: Array<LexicalNode> = [];
+  let continuousInlines: Array<LexicalNode> = [];
   // wrap contiguous inline child nodes in para
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
@@ -209,7 +337,10 @@ function wrapContinuousInlines(domNode, nodes, createWrapperFn) {
       out.push(node);
     } else {
       continuousInlines.push(node);
-      if (i === nodes.length - 1 || i < nodes.length - 1 && $isBlockElementNode(nodes[i + 1])) {
+      if (
+        i === nodes.length - 1 ||
+        (i < nodes.length - 1 && $isBlockElementNode(nodes[i + 1]))
+      ) {
         const wrapper = createWrapperFn();
         wrapper.setFormat(textAlign);
         wrapper.append(...continuousInlines);
@@ -220,7 +351,10 @@ function wrapContinuousInlines(domNode, nodes, createWrapperFn) {
   }
   return out;
 }
-function $unwrapArtificialNodes(allArtificialNodes) {
+
+function $unwrapArtificialNodes(
+  allArtificialNodes: Array<ArtificialNode__DO_NOT_USE>,
+) {
   for (const node of allArtificialNodes) {
     if (node.getNextSibling() instanceof ArtificialNode__DO_NOT_USE) {
       node.insertAfter($createLineBreakNode());
@@ -235,11 +369,12 @@ function $unwrapArtificialNodes(allArtificialNodes) {
     node.remove();
   }
 }
-function isDomNodeBetweenTwoInlineNodes(node) {
+
+function isDomNodeBetweenTwoInlineNodes(node: Node): boolean {
   if (node.nextSibling == null || node.previousSibling == null) {
     return false;
   }
-  return isInlineDomNode(node.nextSibling) && isInlineDomNode(node.previousSibling);
+  return (
+    isInlineDomNode(node.nextSibling) && isInlineDomNode(node.previousSibling)
+  );
 }
-
-export { $generateHtmlFromNodes, $generateNodesFromDOM };

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) Meta Platforms, Inc. and affiliates.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/LexicalHtml.dev.js

@@ -1,248 +0,0 @@
-/**
- * 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.
- *
- */
-
-'use strict';
-
-var selection = require('@lexical/selection');
-var utils = require('@lexical/utils');
-var lexical = require('lexical');
-
-/**
- * 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.
- *
- */
-
-
-/**
- * How you parse your html string to get a document is left up to you. In the browser you can use the native
- * DOMParser API to generate a document (see clipboard.ts), but to use in a headless environment you can use JSDom
- * or an equivalent library and pass in the document here.
- */
-function $generateNodesFromDOM(editor, dom) {
-  const elements = lexical.isDOMDocumentNode(dom) ? dom.body.childNodes : dom.childNodes;
-  let lexicalNodes = [];
-  const allArtificialNodes = [];
-  for (const element of elements) {
-    if (!IGNORE_TAGS.has(element.nodeName)) {
-      const lexicalNode = $createNodesFromDOM(element, editor, allArtificialNodes, false);
-      if (lexicalNode !== null) {
-        lexicalNodes = lexicalNodes.concat(lexicalNode);
-      }
-    }
-  }
-  $unwrapArtificialNodes(allArtificialNodes);
-  return lexicalNodes;
-}
-function $generateHtmlFromNodes(editor, selection) {
-  if (typeof document === 'undefined' || typeof window === 'undefined' && typeof global.window === 'undefined') {
-    throw new Error('To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.');
-  }
-  const container = document.createElement('div');
-  const root = lexical.$getRoot();
-  const topLevelChildren = root.getChildren();
-  for (let i = 0; i < topLevelChildren.length; i++) {
-    const topLevelNode = topLevelChildren[i];
-    $appendNodesToHTML(editor, topLevelNode, container, selection);
-  }
-  return container.innerHTML;
-}
-function $appendNodesToHTML(editor, currentNode, parentElement, selection$1 = null) {
-  let shouldInclude = selection$1 !== null ? currentNode.isSelected(selection$1) : true;
-  const shouldExclude = lexical.$isElementNode(currentNode) && currentNode.excludeFromCopy('html');
-  let target = currentNode;
-  if (selection$1 !== null && lexical.$isTextNode(currentNode)) {
-    target = selection.$sliceSelectedTextNodeContent(selection$1, currentNode, 'clone');
-  }
-  const children = lexical.$isElementNode(target) ? target.getChildren() : [];
-  const registeredNode = lexical.getRegisteredNode(editor, target.getType());
-  let exportOutput;
-
-  // Use HTMLConfig overrides, if available.
-  if (registeredNode && registeredNode.exportDOM !== undefined) {
-    exportOutput = registeredNode.exportDOM(editor, target);
-  } else {
-    exportOutput = target.exportDOM(editor);
-  }
-  const {
-    element,
-    after
-  } = exportOutput;
-  if (!element) {
-    return false;
-  }
-  const fragment = document.createDocumentFragment();
-  for (let i = 0; i < children.length; i++) {
-    const childNode = children[i];
-    const shouldIncludeChild = $appendNodesToHTML(editor, childNode, fragment, selection$1);
-    if (!shouldInclude && lexical.$isElementNode(currentNode) && shouldIncludeChild && currentNode.extractWithChild(childNode, selection$1, 'html')) {
-      shouldInclude = true;
-    }
-  }
-  if (shouldInclude && !shouldExclude) {
-    if (utils.isHTMLElement(element) || lexical.isDocumentFragment(element)) {
-      element.append(fragment);
-    }
-    parentElement.append(element);
-    if (after) {
-      const newElement = after.call(target, element);
-      if (newElement) {
-        if (lexical.isDocumentFragment(element)) {
-          element.replaceChildren(newElement);
-        } else {
-          element.replaceWith(newElement);
-        }
-      }
-    }
-  } else {
-    parentElement.append(fragment);
-  }
-  return shouldInclude;
-}
-function getConversionFunction(domNode, editor) {
-  const {
-    nodeName
-  } = domNode;
-  const cachedConversions = editor._htmlConversions.get(nodeName.toLowerCase());
-  let currentConversion = null;
-  if (cachedConversions !== undefined) {
-    for (const cachedConversion of cachedConversions) {
-      const domConversion = cachedConversion(domNode);
-      if (domConversion !== null && (currentConversion === null ||
-      // Given equal priority, prefer the last registered importer
-      // which is typically an application custom node or HTMLConfig['import']
-      (currentConversion.priority || 0) <= (domConversion.priority || 0))) {
-        currentConversion = domConversion;
-      }
-    }
-  }
-  return currentConversion !== null ? currentConversion.conversion : null;
-}
-const IGNORE_TAGS = new Set(['STYLE', 'SCRIPT']);
-function $createNodesFromDOM(node, editor, allArtificialNodes, hasBlockAncestorLexicalNode, forChildMap = new Map(), parentLexicalNode) {
-  let lexicalNodes = [];
-  if (IGNORE_TAGS.has(node.nodeName)) {
-    return lexicalNodes;
-  }
-  let currentLexicalNode = null;
-  const transformFunction = getConversionFunction(node, editor);
-  const transformOutput = transformFunction ? transformFunction(node) : null;
-  let postTransform = null;
-  if (transformOutput !== null) {
-    postTransform = transformOutput.after;
-    const transformNodes = transformOutput.node;
-    currentLexicalNode = Array.isArray(transformNodes) ? transformNodes[transformNodes.length - 1] : transformNodes;
-    if (currentLexicalNode !== null) {
-      for (const [, forChildFunction] of forChildMap) {
-        currentLexicalNode = forChildFunction(currentLexicalNode, parentLexicalNode);
-        if (!currentLexicalNode) {
-          break;
-        }
-      }
-      if (currentLexicalNode) {
-        lexicalNodes.push(...(Array.isArray(transformNodes) ? transformNodes : [currentLexicalNode]));
-      }
-    }
-    if (transformOutput.forChild != null) {
-      forChildMap.set(node.nodeName, transformOutput.forChild);
-    }
-  }
-
-  // If the DOM node doesn't have a transformer, we don't know what
-  // to do with it but we still need to process any childNodes.
-  const children = node.childNodes;
-  let childLexicalNodes = [];
-  const hasBlockAncestorLexicalNodeForChildren = currentLexicalNode != null && lexical.$isRootOrShadowRoot(currentLexicalNode) ? false : currentLexicalNode != null && lexical.$isBlockElementNode(currentLexicalNode) || hasBlockAncestorLexicalNode;
-  for (let i = 0; i < children.length; i++) {
-    childLexicalNodes.push(...$createNodesFromDOM(children[i], editor, allArtificialNodes, hasBlockAncestorLexicalNodeForChildren, new Map(forChildMap), currentLexicalNode));
-  }
-  if (postTransform != null) {
-    childLexicalNodes = postTransform(childLexicalNodes);
-  }
-  if (utils.isBlockDomNode(node)) {
-    if (!hasBlockAncestorLexicalNodeForChildren) {
-      childLexicalNodes = wrapContinuousInlines(node, childLexicalNodes, lexical.$createParagraphNode);
-    } else {
-      childLexicalNodes = wrapContinuousInlines(node, childLexicalNodes, () => {
-        const artificialNode = new lexical.ArtificialNode__DO_NOT_USE();
-        allArtificialNodes.push(artificialNode);
-        return artificialNode;
-      });
-    }
-  }
-  if (currentLexicalNode == null) {
-    if (childLexicalNodes.length > 0) {
-      // If it hasn't been converted to a LexicalNode, we hoist its children
-      // up to the same level as it.
-      lexicalNodes = lexicalNodes.concat(childLexicalNodes);
-    } else {
-      if (utils.isBlockDomNode(node) && isDomNodeBetweenTwoInlineNodes(node)) {
-        // Empty block dom node that hasnt been converted, we replace it with a linebreak if its between inline nodes
-        lexicalNodes = lexicalNodes.concat(lexical.$createLineBreakNode());
-      }
-    }
-  } else {
-    if (lexical.$isElementNode(currentLexicalNode)) {
-      // If the current node is a ElementNode after conversion,
-      // we can append all the children to it.
-      currentLexicalNode.append(...childLexicalNodes);
-    }
-  }
-  return lexicalNodes;
-}
-function wrapContinuousInlines(domNode, nodes, createWrapperFn) {
-  const textAlign = domNode.style.textAlign;
-  const out = [];
-  let continuousInlines = [];
-  // wrap contiguous inline child nodes in para
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
-    if (lexical.$isBlockElementNode(node)) {
-      if (textAlign && !node.getFormat()) {
-        node.setFormat(textAlign);
-      }
-      out.push(node);
-    } else {
-      continuousInlines.push(node);
-      if (i === nodes.length - 1 || i < nodes.length - 1 && lexical.$isBlockElementNode(nodes[i + 1])) {
-        const wrapper = createWrapperFn();
-        wrapper.setFormat(textAlign);
-        wrapper.append(...continuousInlines);
-        out.push(wrapper);
-        continuousInlines = [];
-      }
-    }
-  }
-  return out;
-}
-function $unwrapArtificialNodes(allArtificialNodes) {
-  for (const node of allArtificialNodes) {
-    if (node.getNextSibling() instanceof lexical.ArtificialNode__DO_NOT_USE) {
-      node.insertAfter(lexical.$createLineBreakNode());
-    }
-  }
-  // Replace artificial node with it's children
-  for (const node of allArtificialNodes) {
-    const children = node.getChildren();
-    for (const child of children) {
-      node.insertBefore(child);
-    }
-    node.remove();
-  }
-}
-function isDomNodeBetweenTwoInlineNodes(node) {
-  if (node.nextSibling == null || node.previousSibling == null) {
-    return false;
-  }
-  return lexical.isInlineDomNode(node.nextSibling) && lexical.isInlineDomNode(node.previousSibling);
-}
-
-exports.$generateHtmlFromNodes = $generateHtmlFromNodes;
-exports.$generateNodesFromDOM = $generateNodesFromDOM;

package/LexicalHtml.mjs

@@ -1,13 +0,0 @@
-/**
- * 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 * as modDev from './LexicalHtml.dev.mjs';
-import * as modProd from './LexicalHtml.prod.mjs';
-const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
-export const $generateHtmlFromNodes = mod.$generateHtmlFromNodes;
-export const $generateNodesFromDOM = mod.$generateNodesFromDOM;

package/LexicalHtml.node.mjs

@@ -1,11 +0,0 @@
-/**
- * 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.
- *
- */
-
-const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalHtml.dev.mjs') : import('./LexicalHtml.prod.mjs'));
-export const $generateHtmlFromNodes = mod.$generateHtmlFromNodes;
-export const $generateNodesFromDOM = mod.$generateNodesFromDOM;

package/LexicalHtml.prod.js

@@ -1,9 +0,0 @@
-/**
- * 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.
- *
- */
-
-"use strict";var e=require("@lexical/selection"),n=require("@lexical/utils"),t=require("lexical");function o(l,i,r,s=null){let c=null===s||i.isSelected(s);const d=t.$isElementNode(i)&&i.excludeFromCopy("html");let u=i;null!==s&&t.$isTextNode(i)&&(u=e.$sliceSelectedTextNodeContent(s,i,"clone"));const a=t.$isElementNode(u)?u.getChildren():[],f=t.getRegisteredNode(l,u.getType());let m;m=f&&void 0!==f.exportDOM?f.exportDOM(l,u):u.exportDOM(l);const{element:h,after:p}=m;if(!h)return!1;const g=document.createDocumentFragment();for(let e=0;e<a.length;e++){const n=a[e],r=o(l,n,g,s);!c&&t.$isElementNode(i)&&r&&i.extractWithChild(n,s,"html")&&(c=!0)}if(c&&!d){if((n.isHTMLElement(h)||t.isDocumentFragment(h))&&h.append(g),r.append(h),p){const e=p.call(u,h);e&&(t.isDocumentFragment(h)?h.replaceChildren(e):h.replaceWith(e))}}else r.append(g);return c}const l=new Set(["STYLE","SCRIPT"]);function i(e,o,s,c,d=new Map,u){let a=[];if(l.has(e.nodeName))return a;let f=null;const m=function(e,n){const{nodeName:t}=e,o=n._htmlConversions.get(t.toLowerCase());let l=null;if(void 0!==o)for(const n of o){const t=n(e);null!==t&&(null===l||(l.priority||0)<=(t.priority||0))&&(l=t)}return null!==l?l.conversion:null}(e,o),h=m?m(e):null;let p=null;if(null!==h){p=h.after;const n=h.node;if(f=Array.isArray(n)?n[n.length-1]:n,null!==f){for(const[,e]of d)if(f=e(f,u),!f)break;f&&a.push(...Array.isArray(n)?n:[f])}null!=h.forChild&&d.set(e.nodeName,h.forChild)}const g=e.childNodes;let N=[];const $=(null==f||!t.$isRootOrShadowRoot(f))&&(null!=f&&t.$isBlockElementNode(f)||c);for(let e=0;e<g.length;e++)N.push(...i(g[e],o,s,$,new Map(d),f));return null!=p&&(N=p(N)),n.isBlockDomNode(e)&&(N=r(e,N,$?()=>{const e=new t.ArtificialNode__DO_NOT_USE;return s.push(e),e}:t.$createParagraphNode)),null==f?N.length>0?a=a.concat(N):n.isBlockDomNode(e)&&function(e){if(null==e.nextSibling||null==e.previousSibling)return!1;return t.isInlineDomNode(e.nextSibling)&&t.isInlineDomNode(e.previousSibling)}(e)&&(a=a.concat(t.$createLineBreakNode())):t.$isElementNode(f)&&f.append(...N),a}function r(e,n,o){const l=e.style.textAlign,i=[];let r=[];for(let e=0;e<n.length;e++){const s=n[e];if(t.$isBlockElementNode(s))l&&!s.getFormat()&&s.setFormat(l),i.push(s);else if(r.push(s),e===n.length-1||e<n.length-1&&t.$isBlockElementNode(n[e+1])){const e=o();e.setFormat(l),e.append(...r),i.push(e),r=[]}}return i}exports.$generateHtmlFromNodes=function(e,n){if("undefined"==typeof document||"undefined"==typeof window&&void 0===global.window)throw new Error("To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.");const l=document.createElement("div"),i=t.$getRoot().getChildren();for(let t=0;t<i.length;t++){o(e,i[t],l,n)}return l.innerHTML},exports.$generateNodesFromDOM=function(e,n){const o=t.isDOMDocumentNode(n)?n.body.childNodes:n.childNodes;let r=[];const s=[];for(const n of o)if(!l.has(n.nodeName)){const t=i(n,e,s,!1);null!==t&&(r=r.concat(t))}return function(e){for(const n of e)n.getNextSibling()instanceof t.ArtificialNode__DO_NOT_USE&&n.insertAfter(t.$createLineBreakNode());for(const n of e){const e=n.getChildren();for(const t of e)n.insertBefore(t);n.remove()}}(s),r};

package/LexicalHtml.prod.mjs

@@ -1,9 +0,0 @@
-/**
- * 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{$sliceSelectedTextNodeContent as e}from"@lexical/selection";import{isHTMLElement as n,isBlockDomNode as t}from"@lexical/utils";import{isDOMDocumentNode as o,$getRoot as l,$isElementNode as r,$isTextNode as i,getRegisteredNode as s,isDocumentFragment as c,$isRootOrShadowRoot as u,$isBlockElementNode as f,$createLineBreakNode as a,ArtificialNode__DO_NOT_USE as d,isInlineDomNode as p,$createParagraphNode as h}from"lexical";function m(e,n){const t=o(n)?n.body.childNodes:n.childNodes;let l=[];const r=[];for(const n of t)if(!w.has(n.nodeName)){const t=y(n,e,r,!1);null!==t&&(l=l.concat(t))}return function(e){for(const n of e)n.getNextSibling()instanceof d&&n.insertAfter(a());for(const n of e){const e=n.getChildren();for(const t of e)n.insertBefore(t);n.remove()}}(r),l}function g(e,n){if("undefined"==typeof document||"undefined"==typeof window&&void 0===global.window)throw new Error("To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.");const t=document.createElement("div"),o=l().getChildren();for(let l=0;l<o.length;l++){x(e,o[l],t,n)}return t.innerHTML}function x(t,o,l,u=null){let f=null===u||o.isSelected(u);const a=r(o)&&o.excludeFromCopy("html");let d=o;null!==u&&i(o)&&(d=e(u,o,"clone"));const p=r(d)?d.getChildren():[],h=s(t,d.getType());let m;m=h&&void 0!==h.exportDOM?h.exportDOM(t,d):d.exportDOM(t);const{element:g,after:w}=m;if(!g)return!1;const y=document.createDocumentFragment();for(let e=0;e<p.length;e++){const n=p[e],l=x(t,n,y,u);!f&&r(o)&&l&&o.extractWithChild(n,u,"html")&&(f=!0)}if(f&&!a){if((n(g)||c(g))&&g.append(y),l.append(g),w){const e=w.call(d,g);e&&(c(g)?g.replaceChildren(e):g.replaceWith(e))}}else l.append(y);return f}const w=new Set(["STYLE","SCRIPT"]);function y(e,n,o,l,i=new Map,s){let c=[];if(w.has(e.nodeName))return c;let m=null;const g=function(e,n){const{nodeName:t}=e,o=n._htmlConversions.get(t.toLowerCase());let l=null;if(void 0!==o)for(const n of o){const t=n(e);null!==t&&(null===l||(l.priority||0)<=(t.priority||0))&&(l=t)}return null!==l?l.conversion:null}(e,n),x=g?g(e):null;let b=null;if(null!==x){b=x.after;const n=x.node;if(m=Array.isArray(n)?n[n.length-1]:n,null!==m){for(const[,e]of i)if(m=e(m,s),!m)break;m&&c.push(...Array.isArray(n)?n:[m])}null!=x.forChild&&i.set(e.nodeName,x.forChild)}const S=e.childNodes;let v=[];const N=(null==m||!u(m))&&(null!=m&&f(m)||l);for(let e=0;e<S.length;e++)v.push(...y(S[e],n,o,N,new Map(i),m));return null!=b&&(v=b(v)),t(e)&&(v=C(e,v,N?()=>{const e=new d;return o.push(e),e}:h)),null==m?v.length>0?c=c.concat(v):t(e)&&function(e){if(null==e.nextSibling||null==e.previousSibling)return!1;return p(e.nextSibling)&&p(e.previousSibling)}(e)&&(c=c.concat(a())):r(m)&&m.append(...v),c}function C(e,n,t){const o=e.style.textAlign,l=[];let r=[];for(let e=0;e<n.length;e++){const i=n[e];if(f(i))o&&!i.getFormat()&&i.setFormat(o),l.push(i);else if(r.push(i),e===n.length-1||e<n.length-1&&f(n[e+1])){const e=t();e.setFormat(o),e.append(...r),l.push(e),r=[]}}return l}export{g as $generateHtmlFromNodes,m as $generateNodesFromDOM};

package/index.d.ts

@@ -1,15 +0,0 @@
-/**
- * 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 type { BaseSelection, LexicalEditor, LexicalNode } from 'lexical';
-/**
- * How you parse your html string to get a document is left up to you. In the browser you can use the native
- * DOMParser API to generate a document (see clipboard.ts), but to use in a headless environment you can use JSDom
- * or an equivalent library and pass in the document here.
- */
-export declare function $generateNodesFromDOM(editor: LexicalEditor, dom: Document | ParentNode): Array<LexicalNode>;
-export declare function $generateHtmlFromNodes(editor: LexicalEditor, selection?: BaseSelection | null): string;