@lexical/clipboard 0.3.2 → 0.3.5

package/LexicalClipboard.dev.js

@@ -7,6 +7,8 @@
 'use strict';
 
 var html = require('@lexical/html');
+var list = require('@lexical/list');
+var selection = require('@lexical/selection');
 var utils = require('@lexical/utils');
 var lexical = require('lexical');
 
@@ -31,6 +33,20 @@ function $getHtmlContent(editor) {
 
   return html.$generateHtmlFromNodes(editor, selection);
 }
+function $getLexicalContent(editor) {
+  const selection = lexical.$getSelection();
+
+  if (selection == null) {
+    throw new Error('Expected valid LexicalSelection');
+  } // If we haven't selected anything
+
+
+  if (lexical.$isRangeSelection(selection) && selection.isCollapsed() || selection.getNodes().length === 0) {
+    return null;
+  }
+
+  return JSON.stringify($generateJSONFromSelectedNodes(editor, selection));
+}
 function $insertDataTransferForPlainText(dataTransfer, selection) {
   const text = dataTransfer.getData('text/plain');
 
@@ -39,60 +55,88 @@ function $insertDataTransferForPlainText(dataTransfer, selection) {
   }
 }
 function $insertDataTransferForRichText(dataTransfer, selection, editor) {
-  const isSelectionInsideOfGrid = lexical.$isGridSelection(selection) || utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isGridCellNode(n)) !== null && utils.$findMatchingParent(selection.focus.getNode(), n => lexical.$isGridCellNode(n)) !== null;
-  const textHtmlMimeType = 'text/html';
-  const htmlString = dataTransfer.getData(textHtmlMimeType);
+  const htmlString = dataTransfer.getData('text/html');
+  const lexicalString = dataTransfer.getData('application/x-lexical-editor');
 
-  if (htmlString) {
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(htmlString, textHtmlMimeType);
-    const nodes = html.$generateNodesFromDOM(editor, dom);
+  if (lexicalString) {
+    try {
+      const payload = JSON.parse(lexicalString);
 
-    if (isSelectionInsideOfGrid && nodes.length === 1 && lexical.$isGridNode(nodes[0])) {
-      $mergeGridNodesStrategy(nodes, selection, false, editor);
-      return;
-    }
+      if (payload.namespace === editor._config.namespace && Array.isArray(payload.nodes)) {
+        const nodes = $generateNodesFromSerializedNodes(payload.nodes);
+        return $insertGeneratedNodes(editor, nodes, selection);
+      } // eslint-disable-next-line no-empty
 
-    $basicInsertStrategy(nodes, selection, false);
-    return;
+    } catch {}
+  }
+
+  if (htmlString) {
+    try {
+      const parser = new DOMParser();
+      const dom = parser.parseFromString(htmlString, 'text/html');
+      return $insertGeneratedNodes(editor, html.$generateNodesFromDOM(editor, dom), selection); // eslint-disable-next-line no-empty
+    } catch {}
   }
 
   $insertDataTransferForPlainText(dataTransfer, selection);
 }
 
-function $basicInsertStrategy(nodes, selection, isFromLexical) {
-  let nodesToInsert;
-
-  if (!isFromLexical) {
-    // Wrap text and inline nodes in paragraph nodes so we have all blocks at the top-level
-    const topLevelBlocks = [];
-    let currentBlock = null;
+function $insertGeneratedNodes(editor, nodes, selection) {
+  const isSelectionInsideOfGrid = lexical.$isGridSelection(selection) || utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isGridCellNode(n)) !== null && utils.$findMatchingParent(selection.focus.getNode(), n => lexical.$isGridCellNode(n)) !== null;
 
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
+  if (isSelectionInsideOfGrid && nodes.length === 1 && lexical.$isGridNode(nodes[0])) {
+    $mergeGridNodesStrategy(nodes, selection, false, editor);
+    return;
+  }
 
-      if (lexical.$isDecoratorNode(node) && !node.isTopLevel() || lexical.$isElementNode(node) && node.isInline() || lexical.$isTextNode(node) || lexical.$isLineBreakNode(node)) {
-        if (currentBlock === null) {
-          currentBlock = lexical.$createParagraphNode();
-          topLevelBlocks.push(currentBlock);
-        }
+  $basicInsertStrategy(nodes, selection);
+  return;
+}
 
-        if (currentBlock !== null) {
-          currentBlock.append(node);
-        }
-      } else {
-        topLevelBlocks.push(node);
-        currentBlock = null;
+function $basicInsertStrategy(nodes, selection) {
+  // Wrap text and inline nodes in paragraph nodes so we have all blocks at the top-level
+  const topLevelBlocks = [];
+  let currentBlock = null;
+  let list$1 = null;
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    /**
+     * There's no good way to add this to importDOM or importJSON directly,
+     * so this is here in order to safely correct faulty clipboard data
+     * that we can't control and avoid crashing the app.
+     * https://github.com/facebook/lexical/issues/2405
+     */
+
+    if (list.$isListItemNode(node)) {
+      if (list$1 == null) {
+        list$1 = list.$createListNode('bullet');
+        topLevelBlocks.push(list$1);
       }
+
+      list$1.append(node);
+      continue;
+    } else if (list$1 != null) {
+      list$1 = null;
     }
 
-    nodesToInsert = topLevelBlocks;
-  } else {
-    nodesToInsert = nodes;
+    if (lexical.$isDecoratorNode(node) && !node.isTopLevel() || lexical.$isElementNode(node) && node.isInline() || lexical.$isTextNode(node) || lexical.$isLineBreakNode(node)) {
+      if (currentBlock === null) {
+        currentBlock = lexical.$createParagraphNode();
+        topLevelBlocks.push(currentBlock);
+      }
+
+      if (currentBlock !== null) {
+        currentBlock.append(node);
+      }
+    } else {
+      topLevelBlocks.push(node);
+      currentBlock = null;
+    }
   }
 
   if (lexical.$isRangeSelection(selection)) {
-    selection.insertNodes(nodesToInsert);
+    selection.insertNodes(topLevelBlocks);
   } else if (lexical.$isGridSelection(selection)) {
     // If there's an active grid selection and a non grid is pasted, add to the anchor.
     const anchorCell = selection.anchor.getNode();
@@ -103,7 +147,7 @@ function $basicInsertStrategy(nodes, selection, isFromLexical) {
       }
     }
 
-    anchorCell.append(...nodesToInsert);
+    anchorCell.append(...topLevelBlocks);
   }
 }
 
@@ -210,6 +254,102 @@ function $mergeGridNodesStrategy(nodes, selection, isFromLexical, editor) {
   }
 }
 
+function exportNodeToJSON(node) {
+  const serializedNode = node.exportJSON();
+  const nodeClass = node.constructor; // @ts-expect-error TODO Replace Class utility type with InstanceType
+
+  if (serializedNode.type !== nodeClass.getType()) {
+    {
+      throw Error(`LexicalNode: Node ${nodeClass.name} does not implement .exportJSON().`);
+    }
+  } // @ts-expect-error TODO Replace Class utility type with InstanceType
+
+
+  const serializedChildren = serializedNode.children;
+
+  if (lexical.$isElementNode(node)) {
+    if (!Array.isArray(serializedChildren)) {
+      {
+        throw Error(`LexicalNode: Node ${nodeClass.name} is an element but .exportJSON() does not have a children array.`);
+      }
+    }
+  }
+
+  return serializedNode;
+}
+
+function $appendNodesToJSON(editor, selection$1, currentNode, targetArray) {
+  let shouldInclude = selection$1 != null ? currentNode.isSelected() : true;
+  const shouldExclude = lexical.$isElementNode(currentNode) && currentNode.excludeFromCopy('html');
+  let clone = selection.$cloneWithProperties(currentNode);
+  clone = lexical.$isTextNode(clone) && selection$1 != null ? selection.$sliceSelectedTextNodeContent(selection$1, clone) : clone;
+  const children = lexical.$isElementNode(clone) ? clone.getChildren() : [];
+  const serializedNode = exportNodeToJSON(clone); // TODO: TextNode calls getTextContent() (NOT node.__text) within it's exportJSON method
+  // which uses getLatest() to get the text from the original node with the same key.
+  // This is a deeper issue with the word "clone" here, it's still a reference to the
+  // same node as far as the LexicalEditor is concerned since it shares a key.
+  // We need a way to create a clone of a Node in memory with it's own key, but
+  // until then this hack will work for the selected text extract use case.
+
+  if (lexical.$isTextNode(clone)) {
+    // @ts-ignore
+    serializedNode.text = clone.__text;
+  }
+
+  for (let i = 0; i < children.length; i++) {
+    const childNode = children[i];
+    const shouldIncludeChild = $appendNodesToJSON(editor, selection$1, childNode, serializedNode.children);
+
+    if (!shouldInclude && lexical.$isElementNode(currentNode) && shouldIncludeChild && currentNode.extractWithChild(childNode, selection$1, 'clone')) {
+      shouldInclude = true;
+    }
+  }
+
+  if (shouldInclude && !shouldExclude) {
+    targetArray.push(serializedNode);
+  } else if (Array.isArray(serializedNode.children)) {
+    for (let i = 0; i < serializedNode.children.length; i++) {
+      const serializedChildNode = serializedNode.children[i];
+      targetArray.push(serializedChildNode);
+    }
+  }
+
+  return shouldInclude;
+}
+
+function $generateJSONFromSelectedNodes(editor, selection) {
+  const nodes = [];
+  const root = lexical.$getRoot();
+  const topLevelChildren = root.getChildren();
+
+  for (let i = 0; i < topLevelChildren.length; i++) {
+    const topLevelNode = topLevelChildren[i];
+    $appendNodesToJSON(editor, selection, topLevelNode, nodes);
+  }
+
+  return {
+    namespace: editor._config.namespace,
+    nodes
+  };
+}
+function $generateNodesFromSerializedNodes(serializedNodes) {
+  const nodes = [];
+
+  for (let i = 0; i < serializedNodes.length; i++) {
+    const serializedNode = serializedNodes[i];
+    const node = lexical.$parseSerializedNode(serializedNode);
+
+    if (lexical.$isTextNode(node)) {
+      selection.$addNodeStyle(node);
+    }
+
+    nodes.push(node);
+  }
+
+  return nodes;
+}
+
 exports.$getHtmlContent = $getHtmlContent;
+exports.$getLexicalContent = $getLexicalContent;
 exports.$insertDataTransferForPlainText = $insertDataTransferForPlainText;
 exports.$insertDataTransferForRichText = $insertDataTransferForRichText;

package/LexicalClipboard.js.flow

@@ -20,12 +20,14 @@ import type {
 
 declare export function $insertDataTransferForRichText(
   dataTransfer: DataTransfer,
-  selection: RangeSelection | GridSelection | NodeSelection,
+  selection: RangeSelection | GridSelection,
   editor: LexicalEditor,
 ): void;
 
-declare export function $getHtmlContent(editor: LexicalEditor): string;
-
+declare export function $getHtmlContent(editor: LexicalEditor): string | null;
+declare export function $getLexicalContent(
+  editor: LexicalEditor,
+): string | null;
 /*
  * Plain Text
  */

package/LexicalClipboard.prod.js

@@ -4,9 +4,14 @@
  * 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 b=require("@lexical/html"),l=require("@lexical/utils"),n=require("lexical");function y(a){throw Error(`Minified Lexical error #${a}; see codes.json for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}function z(a,c){a=a.getData("text/plain");null!=a&&c.insertRawText(a)}
-function C(a,c,f){if(!f){f=[];let h=null;for(let e=0;e<a.length;e++){let d=a[e];n.$isDecoratorNode(d)&&!d.isTopLevel()||n.$isElementNode(d)&&d.isInline()||n.$isTextNode(d)||n.$isLineBreakNode(d)?(null===h&&(h=n.$createParagraphNode(),f.push(h)),null!==h&&h.append(d)):(f.push(d),h=null)}a=f}n.$isRangeSelection(c)?c.insertNodes(a):n.$isGridSelection(c)&&(c=c.anchor.getNode(),n.$isGridCellNode(c)||y(41),c.append(...a))}
-function D(a,c,f,h){1===a.length&&n.$isGridNode(a[0])||y(42);var e=a[0];a=e.getChildren();f=e.getFirstChildOrThrow().getChildrenSize();var d=e.getChildrenSize(),k=l.$findMatchingParent(c.anchor.getNode(),g=>n.$isGridCellNode(g));c=(e=k&&l.$findMatchingParent(k,g=>n.$isGridRowNode(g)))&&l.$findMatchingParent(e,g=>n.$isGridNode(g));n.$isGridCellNode(k)&&n.$isGridRowNode(e)&&n.$isGridNode(c)||y(43);var m=e.getIndexWithinParent(),t=Math.min(c.getChildrenSize()-1,m+d-1);d=k.getIndexWithinParent();k=Math.min(e.getChildrenSize()-
-1,d+f-1);f=Math.min(d,k);e=Math.min(m,t);d=Math.max(d,k);m=Math.max(m,t);t=c.getChildren();k=0;let w,x;for(let g=e;g<=m;g++){var u=t[g];n.$isGridRowNode(u)||y(24);var v=a[k];n.$isGridRowNode(v)||y(24);u=u.getChildren();v=v.getChildren();let A=0;for(let p=f;p<=d;p++){let q=u[p];n.$isGridCellNode(q)||y(25);let B=v[A];n.$isGridCellNode(B)||y(25);g===e&&p===f?w=q.getKey():g===m&&p===d&&(x=q.getKey());let E=q.getChildren();B.getChildren().forEach(r=>{n.$isTextNode(r)&&n.$createParagraphNode().append(r);
-q.append(r)});E.forEach(r=>r.remove());A++}k++}w&&x&&(a=n.$createGridSelection(),a.set(c.getKey(),w,x),n.$setSelection(a),h.dispatchCommand(n.SELECTION_CHANGE_COMMAND,void 0))}exports.$getHtmlContent=function(a){let c=n.$getSelection();if(null==c)throw Error("Expected valid LexicalSelection");return n.$isRangeSelection(c)&&c.isCollapsed()||0===c.getNodes().length?null:b.$generateHtmlFromNodes(a,c)};exports.$insertDataTransferForPlainText=z;
-exports.$insertDataTransferForRichText=function(a,c,f){let h=n.$isGridSelection(c)||null!==l.$findMatchingParent(c.anchor.getNode(),d=>n.$isGridCellNode(d))&&null!==l.$findMatchingParent(c.focus.getNode(),d=>n.$isGridCellNode(d)),e=a.getData("text/html");e?(a=(new DOMParser).parseFromString(e,"text/html"),a=b.$generateNodesFromDOM(f,a),h&&1===a.length&&n.$isGridNode(a[0])?D(a,c,!1,f):C(a,c,!1)):z(a,c)}
+'use strict';var b=require("@lexical/html"),p=require("@lexical/list"),r=require("@lexical/selection"),y=require("@lexical/utils"),z=require("lexical");function A(d){throw Error(`Minified Lexical error #${d}; see codes.json for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}function B(d,c){d=d.getData("text/plain");null!=d&&c.insertRawText(d)}
+function C(d,c,e){(z.$isGridSelection(e)||null!==y.$findMatchingParent(e.anchor.getNode(),h=>z.$isGridCellNode(h))&&null!==y.$findMatchingParent(e.focus.getNode(),h=>z.$isGridCellNode(h)))&&1===c.length&&z.$isGridNode(c[0])?F(c,e,!1,d):G(c,e)}
+function G(d,c){let e=[],h=null,f=null;for(let g=0;g<d.length;g++){let a=d[g];p.$isListItemNode(a)?(null==f&&(f=p.$createListNode("bullet"),e.push(f)),f.append(a)):(null!=f&&(f=null),z.$isDecoratorNode(a)&&!a.isTopLevel()||z.$isElementNode(a)&&a.isInline()||z.$isTextNode(a)||z.$isLineBreakNode(a)?(null===h&&(h=z.$createParagraphNode(),e.push(h)),null!==h&&h.append(a)):(e.push(a),h=null))}z.$isRangeSelection(c)?c.insertNodes(e):z.$isGridSelection(c)&&(d=c.anchor.getNode(),z.$isGridCellNode(d)||A(41),
+d.append(...e))}
+function F(d,c,e,h){1===d.length&&z.$isGridNode(d[0])||A(42);var f=d[0];d=f.getChildren();e=f.getFirstChildOrThrow().getChildrenSize();var g=f.getChildrenSize(),a=y.$findMatchingParent(c.anchor.getNode(),m=>z.$isGridCellNode(m));c=(f=a&&y.$findMatchingParent(a,m=>z.$isGridRowNode(m)))&&y.$findMatchingParent(f,m=>z.$isGridNode(m));z.$isGridCellNode(a)&&z.$isGridRowNode(f)&&z.$isGridNode(c)||A(43);var k=f.getIndexWithinParent(),n=Math.min(c.getChildrenSize()-1,k+g-1);g=a.getIndexWithinParent();a=Math.min(f.getChildrenSize()-
+1,g+e-1);e=Math.min(g,a);f=Math.min(k,n);g=Math.max(g,a);k=Math.max(k,n);n=c.getChildren();a=0;let l,q;for(let m=f;m<=k;m++){var w=n[m];z.$isGridRowNode(w)||A(24);var x=d[a];z.$isGridRowNode(x)||A(24);w=w.getChildren();x=x.getChildren();let D=0;for(let t=e;t<=g;t++){let u=w[t];z.$isGridCellNode(u)||A(25);let E=x[D];z.$isGridCellNode(E)||A(25);m===f&&t===e?l=u.getKey():m===k&&t===g&&(q=u.getKey());let I=u.getChildren();E.getChildren().forEach(v=>{z.$isTextNode(v)&&z.$createParagraphNode().append(v);
+u.append(v)});I.forEach(v=>v.remove());D++}a++}l&&q&&(d=z.$createGridSelection(),d.set(c.getKey(),l,q),z.$setSelection(d),h.dispatchCommand(z.SELECTION_CHANGE_COMMAND,void 0))}
+function H(d,c,e,h){let f=null!=c?e.isSelected():!0,g=z.$isElementNode(e)&&e.excludeFromCopy("html");var a=r.$cloneWithProperties(e);a=z.$isTextNode(a)&&null!=c?r.$sliceSelectedTextNodeContent(c,a):a;let k=z.$isElementNode(a)?a.getChildren():[];var n=a;let l=n.exportJSON();l.type!==n.constructor.getType()&&A(58);var q=l.children;z.$isElementNode(n)&&(Array.isArray(q)||A(59));z.$isTextNode(a)&&(l.text=a.__text);for(a=0;a<k.length;a++)n=k[a],q=H(d,c,n,l.children),!f&&z.$isElementNode(e)&&q&&e.extractWithChild(n,
+c,"clone")&&(f=!0);if(f&&!g)h.push(l);else if(Array.isArray(l.children))for(d=0;d<l.children.length;d++)h.push(l.children[d]);return f}exports.$getHtmlContent=function(d){let c=z.$getSelection();if(null==c)throw Error("Expected valid LexicalSelection");return z.$isRangeSelection(c)&&c.isCollapsed()||0===c.getNodes().length?null:b.$generateHtmlFromNodes(d,c)};
+exports.$getLexicalContent=function(d){let c=z.$getSelection();if(null==c)throw Error("Expected valid LexicalSelection");if(z.$isRangeSelection(c)&&c.isCollapsed()||0===c.getNodes().length)return null;var e=JSON,h=e.stringify;let f=[],g=z.$getRoot().getChildren();for(let a=0;a<g.length;a++)H(d,c,g[a],f);return h.call(e,{namespace:d._config.namespace,nodes:f})};exports.$insertDataTransferForPlainText=B;
+exports.$insertDataTransferForRichText=function(d,c,e){let h=d.getData("text/html");var f=d.getData("application/x-lexical-editor");if(f)try{var g=JSON.parse(f);if(g.namespace===e._config.namespace&&Array.isArray(g.nodes)){var a=g.nodes;f=[];for(g=0;g<a.length;g++){let k=z.$parseSerializedNode(a[g]);z.$isTextNode(k)&&r.$addNodeStyle(k);f.push(k)}return C(e,f,c)}}catch{}if(h)try{let k=(new DOMParser).parseFromString(h,"text/html");return C(e,b.$generateNodesFromDOM(e,k),c)}catch{}B(d,c)}

package/clipboard.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { GridSelection, LexicalEditor, LexicalNode, NodeSelection, RangeSelection } from 'lexical';
+export declare function $getHtmlContent(editor: LexicalEditor): string | null;
+export declare function $getLexicalContent(editor: LexicalEditor): string | null;
+export declare function $insertDataTransferForPlainText(dataTransfer: DataTransfer, selection: RangeSelection | GridSelection): void;
+export declare function $insertDataTransferForRichText(dataTransfer: DataTransfer, selection: RangeSelection | GridSelection, editor: LexicalEditor): void;
+interface BaseSerializedNode {
+    children?: Array<BaseSerializedNode>;
+    type: string;
+    version: number;
+}
+export declare function $generateJSONFromSelectedNodes<SerializedNode>(editor: LexicalEditor, selection: RangeSelection | NodeSelection | GridSelection | null): {
+    namespace: string;
+    nodes: Array<SerializedNode>;
+};
+export declare function $generateNodesFromSerializedNodes(serializedNodes: Array<BaseSerializedNode>): Array<LexicalNode>;
+export {};

package/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { $getHtmlContent, $getLexicalContent, $insertDataTransferForPlainText, $insertDataTransferForRichText } from './clipboard';
+export { $getHtmlContent, $getLexicalContent, $insertDataTransferForPlainText, $insertDataTransferForRichText, };

package/package.json

@@ -9,15 +9,15 @@
     "paste"
   ],
   "license": "MIT",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "main": "LexicalClipboard.js",
   "peerDependencies": {
-    "lexical": "0.3.2"
+    "lexical": "0.3.5"
   },
   "dependencies": {
-    "@lexical/utils": "0.3.2",
-    "@lexical/selection": "0.3.2",
-    "@lexical/html": "0.3.2"
+    "@lexical/utils": "0.3.5",
+    "@lexical/selection": "0.3.5",
+    "@lexical/html": "0.3.5"
   },
   "repository": {
     "type": "git",

package/LexicalClipboard.d.ts

@@ -1,35 +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 {
-  GridSelection,
-  LexicalEditor,
-  NodeSelection,
-  RangeSelection,
-} from 'lexical';
-
-/*
- * Rich Text
- */
-
-export function $insertDataTransferForRichText(
-  dataTransfer: DataTransfer,
-  selection: RangeSelection | GridSelection | NodeSelection,
-  editor: LexicalEditor,
-): void;
-
-export function $getHtmlContent(editor: LexicalEditor): string;
-
-/*
- * Plain Text
- */
-
-export function $insertDataTransferForPlainText(
-  dataTransfer: DataTransfer,
-  selection: RangeSelection,
-): void;