@lexical/html 0.13.1 → 0.14.1

package/LexicalHtml.dev.esm.js

@@ -0,0 +1,165 @@
+/**
+ * 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 { $cloneWithProperties, $sliceSelectedTextNodeContent } from '@lexical/selection';
+import { isHTMLElement } from '@lexical/utils';
+import { $getRoot, $isElementNode, $isTextNode } from 'lexical';
+
+/** @module @lexical/html */
+
+/**
+ * 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 = dom.body ? dom.body.childNodes : [];
+  let lexicalNodes = [];
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    if (!IGNORE_TAGS.has(element.nodeName)) {
+      const lexicalNode = $createNodesFromDOM(element, editor);
+      if (lexicalNode !== null) {
+        lexicalNodes = lexicalNodes.concat(lexicalNode);
+      }
+    }
+  }
+  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 = $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');
+  let target = currentNode;
+  if (selection !== null) {
+    let clone = $cloneWithProperties(currentNode);
+    clone = $isTextNode(clone) && selection !== null ? $sliceSelectedTextNodeContent(selection, clone) : clone;
+    target = clone;
+  }
+  const children = $isElementNode(target) ? target.getChildren() : [];
+  const registeredNode = editor._nodes.get(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);
+    if (!shouldInclude && $isElementNode(currentNode) && shouldIncludeChild && currentNode.extractWithChild(childNode, selection, 'html')) {
+      shouldInclude = true;
+    }
+  }
+  if (shouldInclude && !shouldExclude) {
+    if (isHTMLElement(element)) {
+      element.append(fragment);
+    }
+    parentElement.append(element);
+    if (after) {
+      const newElement = after.call(target, element);
+      if (newElement) {
+        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 || (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, 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 = [];
+  for (let i = 0; i < children.length; i++) {
+    childLexicalNodes.push(...$createNodesFromDOM(children[i], editor, new Map(forChildMap), currentLexicalNode));
+  }
+  if (postTransform != null) {
+    childLexicalNodes = postTransform(childLexicalNodes);
+  }
+  if (currentLexicalNode == null) {
+    // 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 ($isElementNode(currentLexicalNode)) {
+      // If the current node is a ElementNode after conversion,
+      // we can append all the children to it.
+      currentLexicalNode.append(...childLexicalNodes);
+    }
+  }
+  return lexicalNodes;
+}
+
+export { $generateHtmlFromNodes, $generateNodesFromDOM };

package/LexicalHtml.dev.js

@@ -15,7 +15,7 @@ var lexical = require('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 equivilant library and pass in the document here.
+ * or an equivalent library and pass in the document here.
  */
 function $generateNodesFromDOM(editor, dom) {
   const elements = dom.body ? dom.body.childNodes : [];
@@ -85,7 +85,9 @@ function $appendNodesToHTML(editor, currentNode, parentElement, selection$1 = nu
     parentElement.append(element);
     if (after) {
       const newElement = after.call(target, element);
-      if (newElement) element.replaceWith(newElement);
+      if (newElement) {
+        element.replaceWith(newElement);
+      }
     }
   } else {
     parentElement.append(fragment);

package/LexicalHtml.esm.js

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

package/LexicalHtml.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalHtml = process.env.NODE_ENV === 'development' ? require('./LexicalHtml.dev.js') : require('./LexicalHtml.prod.js')
+const LexicalHtml = process.env.NODE_ENV === 'development' ? require('./LexicalHtml.dev.js') : require('./LexicalHtml.prod.js');
 module.exports = LexicalHtml;

package/LexicalHtml.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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{$cloneWithProperties as e,$sliceSelectedTextNodeContent as n}from"@lexical/selection";import{isHTMLElement as t}from"@lexical/utils";import{$getRoot as l,$isElementNode as o,$isTextNode as r}from"lexical";function i(e,n){const t=n.body?n.body.childNodes:[];let l=[];for(let n=0;n<t.length;n++){const o=t[n];if(!u.has(o.nodeName)){const n=a(o,e);null!==n&&(l=l.concat(n))}}return l}function c(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++){s(e,o[l],t,n)}return t.innerHTML}function s(l,i,c,u=null){let a=null===u||i.isSelected(u);const d=o(i)&&i.excludeFromCopy("html");let f=i;if(null!==u){let t=e(i);t=r(t)&&null!==u?n(u,t):t,f=t}const p=o(f)?f.getChildren():[],m=l._nodes.get(f.getType());let h;h=m&&void 0!==m.exportDOM?m.exportDOM(l,f):f.exportDOM(l);const{element:g,after:y}=h;if(!g)return!1;const w=document.createDocumentFragment();for(let e=0;e<p.length;e++){const n=p[e],t=s(l,n,w,u);!a&&o(i)&&t&&i.extractWithChild(n,u,"html")&&(a=!0)}if(a&&!d){if(t(g)&&g.append(w),c.append(g),y){const e=y.call(f,g);e&&g.replaceWith(e)}}else c.append(w);return a}const u=new Set(["STYLE","SCRIPT"]);function a(e,n,t=new Map,l){let r=[];if(u.has(e.nodeName))return r;let i=null;const c=function(e,n){const{nodeName:t}=e,l=n._htmlConversions.get(t.toLowerCase());let o=null;if(void 0!==l)for(const n of l){const t=n(e);null!==t&&(null===o||(o.priority||0)<(t.priority||0))&&(o=t)}return null!==o?o.conversion:null}(e,n),s=c?c(e):null;let d=null;if(null!==s){d=s.after;const n=s.node;if(i=Array.isArray(n)?n[n.length-1]:n,null!==i){for(const[,e]of t)if(i=e(i,l),!i)break;i&&r.push(...Array.isArray(n)?n:[i])}null!=s.forChild&&t.set(e.nodeName,s.forChild)}const f=e.childNodes;let p=[];for(let e=0;e<f.length;e++)p.push(...a(f[e],n,new Map(t),i));return null!=d&&(p=d(p)),null==i?r=r.concat(p):o(i)&&i.append(...p),r}export{c as $generateHtmlFromNodes,i as $generateNodesFromDOM};

package/README.md

@@ -1,5 +1,7 @@
 # `@lexical/html`
 
+[![See API Documentation](https://lexical.dev/img/see-api-documentation.svg)](https://lexical.dev/docs/api/modules/lexical_html)
+
 # HTML
 This package exports utility functions for converting `Lexical` -> `HTML` and `HTML` -> `Lexical`. These same functions are also used in the `lexical-clipboard` package for copy and paste.
 
@@ -7,6 +9,13 @@ This package exports utility functions for converting `Lexical` -> `HTML` and `H
 
 ### Exporting
 ```js
+// In a headless mode, you need to initialize a headless browser implementation such as JSDom.
+const dom = new JSDOM();
+// @ts-expect-error
+global.window = dom.window;
+global.document = dom.window.document;
+// You may also need to polyfill DocumentFragment or navigator in certain cases.
+
 // When converting to HTML you can pass in a selection object to narrow it
 // down to a certain part of the editor's contents.
 const htmlString = $generateHtmlFromNodes(editor, selection | null);
@@ -31,4 +40,4 @@ const editor = createEditor({ ...config, nodes });
 
 // Or insert them at a selection.
 $insertNodes(nodes);
-```
+```

package/index.d.ts

@@ -10,7 +10,7 @@ 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 equivilant library and pass in the document here.
+ * or an equivalent library and pass in the document here.
  */
 export declare function $generateNodesFromDOM(editor: LexicalEditor, dom: Document): Array<LexicalNode>;
 export declare function $generateHtmlFromNodes(editor: LexicalEditor, selection?: BaseSelection | null): string;

package/package.json

@@ -8,10 +8,10 @@
     "html"
   ],
   "license": "MIT",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "main": "LexicalHtml.js",
   "peerDependencies": {
-    "lexical": "0.13.1"
+    "lexical": "0.14.1"
   },
   "repository": {
     "type": "git",
@@ -19,7 +19,9 @@
     "directory": "packages/lexical-html"
   },
   "dependencies": {
-    "@lexical/selection": "0.13.1",
-    "@lexical/utils": "0.13.1"
-  }
+    "@lexical/selection": "0.14.1",
+    "@lexical/utils": "0.14.1"
+  },
+  "module": "LexicalHtml.esm.js",
+  "sideEffects": false
 }