@lexical/clipboard 0.2.4 → 0.2.5

package/LexicalClipboard.dev.js

@@ -7,6 +7,7 @@
 'use strict';
 
 var selection = require('@lexical/selection');
+var utils = require('@lexical/utils');
 var lexical = require('lexical');
 
 /**
@@ -37,39 +38,31 @@ function $convertSelectedLexicalNodeToHTMLElement(editor, selection, node) {
   let nodeToConvert = node;
 
   if (lexical.$isRangeSelection(selection) || lexical.$isGridSelection(selection)) {
-    const anchor = selection.anchor.getNode();
-    const focus = selection.focus.getNode();
-    const isAnchor = node.is(anchor);
-    const isFocus = node.is(focus);
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    const isAnchor = node.is(anchorNode);
+    const isFocus = node.is(focusNode);
 
     if (lexical.$isTextNode(node) && (isAnchor || isFocus)) {
-      const anchorOffset = selection.anchor.getCharacterOffset();
-      const focusOffset = selection.focus.getCharacterOffset();
+      const [anchorOffset, focusOffset] = selection.getCharacterOffsets();
       const isBackward = selection.isBackward();
-      const isSame = anchor.is(focus);
-      const isFirst = node.is(isBackward ? focus : anchor);
-      const nodeText = node.getTextContent();
-      const nodeTextLength = nodeText.length;
+      const isSame = anchorNode.is(focusNode);
+      const isFirst = node.is(isBackward ? focusNode : anchorNode);
+      const isLast = node.is(isBackward ? anchorNode : focusNode);
 
       if (isSame) {
         const startOffset = anchorOffset > focusOffset ? focusOffset : anchorOffset;
         const endOffset = anchorOffset > focusOffset ? anchorOffset : focusOffset;
         const splitNodes = node.splitText(startOffset, endOffset);
         nodeToConvert = startOffset === 0 ? splitNodes[0] : splitNodes[1];
-      } else {
-        let endOffset;
-
-        if (isFirst) {
-          endOffset = isBackward ? focusOffset : anchorOffset;
-        } else {
-          endOffset = isBackward ? anchorOffset : focusOffset;
-        }
-
-        if (!isBackward && endOffset === 0) {
-          return null;
-        } else if (endOffset !== nodeTextLength) {
-          nodeToConvert = node.splitText(endOffset)[isFirst && endOffset !== 0 ? 1 : 0];
-        }
+      } else if (isFirst) {
+        const offset = isBackward ? focusOffset : anchorOffset;
+        const splitNodes = node.splitText(offset);
+        nodeToConvert = offset === 0 ? splitNodes[0] : splitNodes[1];
+      } else if (isLast) {
+        const offset = isBackward ? anchorOffset : focusOffset;
+        const splitNodes = node.splitText(offset);
+        nodeToConvert = splitNodes[0];
       }
     }
   }
@@ -99,9 +92,26 @@ function $convertSelectedLexicalContentToHtml(editor, selection, state) {
     const nodeKey = state.range[i];
     const node = lexical.$getNodeByKey(nodeKey);
 
-    if (node && node.isSelected()) {
+    if (node) {
       const element = $convertSelectedLexicalNodeToHTMLElement(editor, selection, node);
-      if (element) container.append(element);
+
+      if (element) {
+        // It might be the case that the node is an element node
+        // and we're not directly selecting it, but we are selecting
+        // some of its children. So we'll need to extract that out
+        // separately.
+        if (node.isSelected()) {
+          container.append(element);
+        } else {
+          let childNode = element.firstChild;
+
+          while (childNode != null) {
+            const nextSibling = childNode.nextSibling;
+            container.append(childNode);
+            childNode = nextSibling;
+          }
+        }
+      }
     }
   }
 
@@ -130,6 +140,7 @@ function $insertDataTransferForPlainText(dataTransfer, selection) {
 }
 function $insertDataTransferForRichText(dataTransfer, selection, editor) {
   const lexicalNodesString = dataTransfer.getData('application/x-lexical-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;
 
   if (lexicalNodesString) {
     const namespace = editor._config.namespace;
@@ -140,7 +151,13 @@ function $insertDataTransferForRichText(dataTransfer, selection, editor) {
       if (lexicalClipboardData.namespace === namespace) {
         const nodeRange = lexicalClipboardData.state;
         const nodes = $generateNodes(nodeRange);
-        selection.insertNodes(nodes);
+
+        if (isSelectionInsideOfGrid && nodes.length === 1 && lexical.$isGridNode(nodes[0])) {
+          $mergeGridNodesStrategy(nodes, selection, false, editor);
+          return;
+        }
+
+        $basicInsertStrategy(nodes, selection, true);
         return;
       }
     } catch (e) {// Malformed, missing nodes..
@@ -153,8 +170,25 @@ function $insertDataTransferForRichText(dataTransfer, selection, editor) {
   if (htmlString) {
     const parser = new DOMParser();
     const dom = parser.parseFromString(htmlString, textHtmlMimeType);
-    const nodes = $generateNodesFromDOM(dom, editor); // Wrap text and inline nodes in paragraph nodes so we have all blocks at the top-level
+    const nodes = $generateNodesFromDOM(dom, editor);
+
+    if (isSelectionInsideOfGrid && nodes.length === 1 && lexical.$isGridNode(nodes[0])) {
+      $mergeGridNodesStrategy(nodes, selection, false, editor);
+      return;
+    }
 
+    $basicInsertStrategy(nodes, selection, false);
+    return;
+  }
+
+  $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;
 
@@ -176,11 +210,128 @@ function $insertDataTransferForRichText(dataTransfer, selection, editor) {
       }
     }
 
-    selection.insertNodes(topLevelBlocks);
-    return;
+    nodesToInsert = topLevelBlocks;
+  } else {
+    nodesToInsert = nodes;
   }
 
-  $insertDataTransferForPlainText(dataTransfer, selection);
+  if (lexical.$isRangeSelection(selection)) {
+    selection.insertNodes(nodesToInsert);
+  } 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();
+
+    if (!lexical.$isGridCellNode(anchorCell)) {
+      {
+        throw Error(`Expected Grid Cell in Grid Selection`);
+      }
+    }
+
+    anchorCell.append(...nodesToInsert);
+  }
+}
+
+function $mergeGridNodesStrategy(nodes, selection, isFromLexical, editor) {
+  if (nodes.length !== 1 || !lexical.$isGridNode(nodes[0])) {
+    {
+      throw Error(`$mergeGridNodesStrategy: Expected Grid insertion.`);
+    }
+  }
+
+  const newGrid = nodes[0];
+  const newGridRows = newGrid.getChildren();
+  const newColumnCount = newGrid.getFirstChildOrThrow().getChildrenSize();
+  const newRowCount = newGrid.getChildrenSize();
+  const gridCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isGridCellNode(n));
+  const gridRowNode = gridCellNode && utils.$findMatchingParent(gridCellNode, n => lexical.$isGridRowNode(n));
+  const gridNode = gridRowNode && utils.$findMatchingParent(gridRowNode, n => lexical.$isGridNode(n));
+
+  if (!lexical.$isGridCellNode(gridCellNode) || !lexical.$isGridRowNode(gridRowNode) || !lexical.$isGridNode(gridNode)) {
+    {
+      throw Error(`$mergeGridNodesStrategy: Expected selection to be inside of a Grid.`);
+    }
+  }
+
+  const startY = gridRowNode.getIndexWithinParent();
+  const stopY = Math.min(gridNode.getChildrenSize() - 1, startY + newRowCount - 1);
+  const startX = gridCellNode.getIndexWithinParent();
+  const stopX = Math.min(gridRowNode.getChildrenSize() - 1, startX + newColumnCount - 1);
+  const fromX = Math.min(startX, stopX);
+  const fromY = Math.min(startY, stopY);
+  const toX = Math.max(startX, stopX);
+  const toY = Math.max(startY, stopY);
+  const gridRowNodes = gridNode.getChildren();
+  let newRowIdx = 0;
+  let newAnchorCellKey;
+  let newFocusCellKey;
+
+  for (let r = fromY; r <= toY; r++) {
+    const currentGridRowNode = gridRowNodes[r];
+
+    if (!lexical.$isGridRowNode(currentGridRowNode)) {
+      {
+        throw Error(`getNodes: expected to find GridRowNode`);
+      }
+    }
+
+    const newGridRowNode = newGridRows[newRowIdx];
+
+    if (!lexical.$isGridRowNode(newGridRowNode)) {
+      {
+        throw Error(`getNodes: expected to find GridRowNode`);
+      }
+    }
+
+    const gridCellNodes = currentGridRowNode.getChildren();
+    const newGridCellNodes = newGridRowNode.getChildren();
+    let newColumnIdx = 0;
+
+    for (let c = fromX; c <= toX; c++) {
+      const currentGridCellNode = gridCellNodes[c];
+
+      if (!lexical.$isGridCellNode(currentGridCellNode)) {
+        {
+          throw Error(`getNodes: expected to find GridCellNode`);
+        }
+      }
+
+      const newGridCellNode = newGridCellNodes[newColumnIdx];
+
+      if (!lexical.$isGridCellNode(newGridCellNode)) {
+        {
+          throw Error(`getNodes: expected to find GridCellNode`);
+        }
+      }
+
+      if (r === fromY && c === fromX) {
+        newAnchorCellKey = currentGridCellNode.getKey();
+      } else if (r === toY && c === toX) {
+        newFocusCellKey = currentGridCellNode.getKey();
+      }
+
+      const originalChildren = currentGridCellNode.getChildren();
+      newGridCellNode.getChildren().forEach(child => {
+        if (lexical.$isTextNode(child)) {
+          const paragraphNode = lexical.$createParagraphNode();
+          paragraphNode.append(child);
+          currentGridCellNode.append(child);
+        } else {
+          currentGridCellNode.append(child);
+        }
+      });
+      originalChildren.forEach(n => n.remove());
+      newColumnIdx++;
+    }
+
+    newRowIdx++;
+  }
+
+  if (newAnchorCellKey && newFocusCellKey) {
+    const newGridSelection = lexical.$createGridSelection();
+    newGridSelection.set(gridNode.getKey(), newAnchorCellKey, newFocusCellKey);
+    lexical.$setSelection(newGridSelection);
+    editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND);
+  }
 }
 
 function $generateNodes(nodeRange) {

package/LexicalClipboard.prod.js

@@ -4,11 +4,16 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var l=require("@lexical/selection"),p=require("lexical");const q=new Set(["STYLE"]);
-function r(c,d,h){var b=h;if(p.$isRangeSelection(d)||p.$isGridSelection(d)){var f=d.anchor.getNode(),a=d.focus.getNode(),e=h.is(f),g=h.is(a);if(p.$isTextNode(h)&&(e||g)){e=d.anchor.getCharacterOffset();g=d.focus.getCharacterOffset();const m=d.isBackward(),v=f.is(a);f=h.is(m?a:f);a=h.getTextContent().length;if(v)b=e>g?g:e,h=h.splitText(b,e>g?e:g),b=0===b?h[0]:h[1];else if(e=f?m?g:e:m?e:g,m||0!==e)e!==a&&(b=h.splitText(e)[f&&0!==e?1:0]);else return null}}const {element:k,after:n}=b.exportDOM(c);if(!k)return null;
-h=p.$isElementNode(b)?b.getChildren():[];for(e=0;e<h.length;e++)g=h[e],g.isSelected()&&(g=r(c,d,g))&&k.append(g);return n?n.call(b,k):k}function t(c,d){c=c.getData("text/plain");null!=c&&d.insertRawText(c)}function u(c,d){const {nodeName:h}=c;d=d._htmlConversions.get(h.toLowerCase());let b=null;void 0!==d&&d.forEach(f=>{f=f(c);null!==f&&(null===b||b.priority<f.priority)&&(b=f)});return null!==b?b.conversion:null}
-function w(c,d,h=new Map,b){let f=[];if(q.has(c.nodeName))return f;let a=null;var e=u(c,d);const g=e?e(c):null;e=null;if(null!==g){e=g.after;a=g.node;if(null!==a){for(var [,k]of h)if(a=k(a,b),!a)break;a&&f.push(a)}null!=g.forChild&&h.set(c.nodeName,g.forChild)}c=c.childNodes;b=[];for(k=0;k<c.length;k++)b.push(...w(c[k],d,h,a));null!=e&&(b=e(b));null==a?f=f.concat(b):p.$isElementNode(a)&&a.append(...b);return f}
-exports.$getLexicalContent=function(c){var d=p.$getSelection();return null!==d?(c=c._config.namespace,d=l.$cloneContents(d),JSON.stringify({namespace:c,state:d})):null};exports.$insertDataTransferForPlainText=t;
-exports.$insertDataTransferForRichText=function(c,d,h){var b=c.getData("application/x-lexical-editor");if(b){var f=h._config.namespace;try{const k=JSON.parse(b);if(k.namespace===f){const {range:n,nodeMap:m}=k.state;var a=new Map(m);b=[];for(f=0;f<n.length;f++){var e=a.get(n[f]);if(void 0!==e){var g=p.$createNodeFromParse(e,a);b.push(g)}}d.insertNodes(b);return}}catch(k){}}if(a=c.getData("text/html")){a=(new DOMParser).parseFromString(a,"text/html");c=[];a=a.body?Array.from(a.body.childNodes):[];e=
-a.length;for(g=0;g<e;g++)b=a[g],q.has(b.nodeName)||(b=w(b,h),null!==b&&(c=c.concat(b)));h=c;c=[];a=null;for(e=0;e<h.length;e++)g=h[e],!p.$isElementNode(g)||g.isInline()?(null===a&&(a=p.$createParagraphNode(),c.push(a)),null!==a&&a.append(g)):(c.push(g),a=null);d.insertNodes(c)}else t(c,d)};
-exports.getHtmlContent=function(c){const d=p.$getSelection();if(null==d)throw Error("Expected valid LexicalSelection");if(p.$isRangeSelection(d)&&d.isCollapsed()||0===d.getNodes().length)return null;var h=l.$cloneContents(d);const b=document.createElement("div");for(let a=0;a<h.range.length;a++){var f=p.$getNodeByKey(h.range[a]);f&&f.isSelected()&&(f=r(c,d,f))&&b.append(f)}return b.innerHTML};
+var g=require("@lexical/selection"),t=require("@lexical/utils"),x=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.");}const z=new Set(["STYLE"]);
+function A(a,c,e){var f=e;if(x.$isRangeSelection(c)||x.$isGridSelection(c)){var b=c.anchor.getNode(),d=c.focus.getNode(),h=e.is(b),k=e.is(d);if(x.$isTextNode(e)&&(h||k)){const [p,m]=c.getCharacterOffsets();h=c.isBackward();k=b.is(d);const q=e.is(h?d:b);b=e.is(h?b:d);k?(f=p>m?m:p,e=e.splitText(f,p>m?p:m),f=0===f?e[0]:e[1]):q?(f=h?m:p,e=e.splitText(f),f=0===f?e[0]:e[1]):b&&(f=e.splitText(h?p:m)[0])}}const {element:l,after:r}=f.exportDOM(a);if(!l)return null;e=x.$isElementNode(f)?f.getChildren():[];
+for(b=0;b<e.length;b++)d=e[b],d.isSelected()&&(d=A(a,c,d))&&l.append(d);return r?r.call(f,l):l}function B(a,c){a=a.getData("text/plain");null!=a&&c.insertRawText(a)}
+function C(a,c,e){if(!e){e=[];let f=null;for(let b=0;b<a.length;b++){const d=a[b];!x.$isElementNode(d)||d.isInline()?(null===f&&(f=x.$createParagraphNode(),e.push(f)),null!==f&&f.append(d)):(e.push(d),f=null)}a=e}if(x.$isRangeSelection(c))c.insertNodes(a);else if(x.$isGridSelection(c)){c=c.anchor.getNode();if(!x.$isGridCellNode(c))throw Error("Expected Grid Cell in Grid Selection");c.append(...a)}}
+function D(a,c,e,f){if(1!==a.length||!x.$isGridNode(a[0]))throw Error("$mergeGridNodesStrategy: Expected Grid insertion.");var b=a[0];a=b.getChildren();e=b.getFirstChildOrThrow().getChildrenSize();var d=b.getChildrenSize(),h=t.$findMatchingParent(c.anchor.getNode(),n=>x.$isGridCellNode(n));c=(b=h&&t.$findMatchingParent(h,n=>x.$isGridRowNode(n)))&&t.$findMatchingParent(b,n=>x.$isGridNode(n));if(!x.$isGridCellNode(h)||!x.$isGridRowNode(b)||!x.$isGridNode(c))throw Error("$mergeGridNodesStrategy: Expected selection to be inside of a Grid.");
+var k=b.getIndexWithinParent(),l=Math.min(c.getChildrenSize()-1,k+d-1);d=h.getIndexWithinParent();h=Math.min(b.getChildrenSize()-1,d+e-1);e=Math.min(d,h);b=Math.min(k,l);d=Math.max(d,h);k=Math.max(k,l);l=c.getChildren();h=0;let r,p;for(let n=b;n<=k;n++){var m=l[n];x.$isGridRowNode(m)||y(77);var q=a[h];x.$isGridRowNode(q)||y(77);m=m.getChildren();q=q.getChildren();let E=0;for(let u=e;u<=d;u++){const v=m[u];x.$isGridCellNode(v)||y(78);const F=q[E];x.$isGridCellNode(F)||y(78);n===b&&u===e?r=v.getKey():
+n===k&&u===d&&(p=v.getKey());const H=v.getChildren();F.getChildren().forEach(w=>{x.$isTextNode(w)&&x.$createParagraphNode().append(w);v.append(w)});H.forEach(w=>w.remove());E++}h++}r&&p&&(a=x.$createGridSelection(),a.set(c.getKey(),r,p),x.$setSelection(a),f.dispatchCommand(x.SELECTION_CHANGE_COMMAND))}function G(a){const {range:c,nodeMap:e}=a;a=new Map(e);const f=[];for(let d=0;d<c.length;d++){var b=a.get(c[d]);void 0!==b&&(b=x.$createNodeFromParse(b,a),f.push(b))}return f}
+function I(a,c){const {nodeName:e}=a;c=c._htmlConversions.get(e.toLowerCase());let f=null;void 0!==c&&c.forEach(b=>{b=b(a);null!==b&&(null===f||f.priority<b.priority)&&(f=b)});return null!==f?f.conversion:null}
+function J(a,c,e=new Map,f){let b=[];if(z.has(a.nodeName))return b;let d=null;var h=I(a,c);const k=h?h(a):null;h=null;if(null!==k){h=k.after;d=k.node;if(null!==d){for(var [,l]of e)if(d=l(d,f),!d)break;d&&b.push(d)}null!=k.forChild&&e.set(a.nodeName,k.forChild)}a=a.childNodes;f=[];for(l=0;l<a.length;l++)f.push(...J(a[l],c,e,d));null!=h&&(f=h(f));null==d?b=b.concat(f):x.$isElementNode(d)&&d.append(...f);return b}
+function K(a,c){let e=[];a=a.body?Array.from(a.body.childNodes):[];const f=a.length;for(let d=0;d<f;d++){var b=a[d];z.has(b.nodeName)||(b=J(b,c),null!==b&&(e=e.concat(b)))}return e}exports.$getLexicalContent=function(a){var c=x.$getSelection();return null!==c?(a=a._config.namespace,c=g.$cloneContents(c),JSON.stringify({namespace:a,state:c})):null};exports.$insertDataTransferForPlainText=B;
+exports.$insertDataTransferForRichText=function(a,c,e){var f=a.getData("application/x-lexical-editor");const b=x.$isGridSelection(c)||null!==t.$findMatchingParent(c.anchor.getNode(),d=>x.$isGridCellNode(d))&&null!==t.$findMatchingParent(c.focus.getNode(),d=>x.$isGridCellNode(d));if(f){const d=e._config.namespace;try{const h=JSON.parse(f);if(h.namespace===d){const k=G(h.state);if(b&&1===k.length&&x.$isGridNode(k[0])){D(k,c,!1,e);return}C(k,c,!0);return}}catch(h){}}(f=a.getData("text/html"))?(a=(new DOMParser).parseFromString(f,
+"text/html"),a=K(a,e),b&&1===a.length&&x.$isGridNode(a[0])?D(a,c,!1,e):C(a,c,!1)):B(a,c)};
+exports.getHtmlContent=function(a){const c=x.$getSelection();if(null==c)throw Error("Expected valid LexicalSelection");if(x.$isRangeSelection(c)&&c.isCollapsed()||0===c.getNodes().length)return null;var e=g.$cloneContents(c);const f=document.createElement("div");for(let h=0;h<e.range.length;h++){var b=x.$getNodeByKey(e.range[h]);if(b){var d=A(a,c,b);if(d)if(b.isSelected())f.append(d);else for(b=d.firstChild;null!=b;)d=b.nextSibling,f.append(b),b=d}}return f.innerHTML};

package/package.json

@@ -9,14 +9,14 @@
     "paste"
   ],
   "license": "MIT",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "main": "LexicalClipboard.js",
   "peerDependencies": {
-    "lexical": "0.2.4"
+    "lexical": "0.2.5"
   },
   "dependencies": {
-    "@lexical/utils": "0.2.4",
-    "@lexical/selection": "0.2.4"
+    "@lexical/utils": "0.2.5",
+    "@lexical/selection": "0.2.5"
   },
   "repository": {
     "type": "git",