@lexical/utils 0.6.0 → 0.6.2

package/LexicalUtils.dev.js

@@ -24,6 +24,67 @@ function removeClassNamesFromElement(element, ...classNames) {
     }
   });
 }
+function isMimeType(file, acceptableMimeTypes) {
+  for (const acceptableType of acceptableMimeTypes) {
+    if (file.type.startsWith(acceptableType)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+/**
+ * Lexical File Reader with:
+ *  1. MIME type support
+ *  2. batched results (HistoryPlugin compatibility)
+ *  3. Order aware (respects the order when multiple Files are passed)
+ *
+ * const filesResult = await mediaFileReader(files, ['image/']);
+ * filesResult.forEach(file => editor.dispatchCommand('INSERT_IMAGE', {
+ *   src: file.result,
+ * }));
+ */
+
+function mediaFileReader(files, acceptableMimeTypes) {
+  const filesIterator = files[Symbol.iterator]();
+  return new Promise((resolve, reject) => {
+    const processed = [];
+
+    const handleNextFile = () => {
+      const {
+        done,
+        value: file
+      } = filesIterator.next();
+
+      if (done) {
+        return resolve(processed);
+      }
+
+      const fileReader = new FileReader();
+      fileReader.addEventListener('error', reject);
+      fileReader.addEventListener('load', () => {
+        const result = fileReader.result;
+
+        if (typeof result === 'string') {
+          processed.push({
+            file,
+            result
+          });
+        }
+
+        handleNextFile();
+      });
+
+      if (isMimeType(file, acceptableMimeTypes)) {
+        fileReader.readAsDataURL(file);
+      } else {
+        handleNextFile();
+      }
+    };
+
+    handleNextFile();
+  });
+}
 function $dfs(startingNode, endingNode) {
   const nodes = [];
   const start = (startingNode || lexical.$getRoot()).getLatest();
@@ -321,19 +382,44 @@ function $insertNodeToNearestRoot(node) {
   const selection = lexical.$getSelection();
 
   if (lexical.$isRangeSelection(selection)) {
-    const focusNode = selection.focus.getNode();
-    focusNode.getTopLevelElementOrThrow().insertAfter(node);
-  } else if (lexical.$isNodeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection)) {
-    const nodes = selection.getNodes();
-    nodes[nodes.length - 1].getTopLevelElementOrThrow().insertAfter(node);
+    const {
+      focus
+    } = selection;
+    const focusNode = focus.getNode();
+    const focusOffset = focus.offset;
+    let splitNode;
+    let splitOffset;
+
+    if (lexical.$isTextNode(focusNode)) {
+      splitNode = focusNode.getParentOrThrow();
+      splitOffset = focusNode.getIndexWithinParent();
+
+      if (focusOffset > 0) {
+        splitOffset += 1;
+        focusNode.splitText(focusOffset);
+      }
+    } else {
+      splitNode = focusNode;
+      splitOffset = focusOffset;
+    }
+
+    const [, rightTree] = $splitNode(splitNode, splitOffset);
+    rightTree.insertBefore(node);
+    rightTree.selectStart();
   } else {
-    const root = lexical.$getRoot();
-    root.append(node);
+    if (lexical.$isNodeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection)) {
+      const nodes = selection.getNodes();
+      nodes[nodes.length - 1].getTopLevelElementOrThrow().insertAfter(node);
+    } else {
+      const root = lexical.$getRoot();
+      root.append(node);
+    }
+
+    const paragraphNode = lexical.$createParagraphNode();
+    node.insertAfter(paragraphNode);
+    paragraphNode.select();
   }
 
-  const paragraphNode = lexical.$createParagraphNode();
-  node.insertAfter(paragraphNode);
-  paragraphNode.select();
   return node.getLatest();
 }
 function $wrapNodeInElement(node, createElementNode) {
@@ -342,6 +428,34 @@ function $wrapNodeInElement(node, createElementNode) {
   elementNode.append(node);
   return elementNode;
 }
+function $splitNode(node, offset) {
+  let startNode = node.getChildAtIndex(offset);
+
+  if (startNode == null) {
+    startNode = node;
+  }
+
+  const recurse = currentNode => {
+    const parent = currentNode.getParentOrThrow();
+    const isParentRoot = lexical.$isRootOrShadowRoot(parent); // The node we start split from (leaf) is moved, but its recursive
+    // parents are copied to create separate tree
+
+    const nodeToMove = currentNode === startNode && !isParentRoot ? currentNode : lexical.$copyNode(currentNode);
+
+    if (isParentRoot) {
+      currentNode.insertAfter(nodeToMove);
+      return [currentNode, nodeToMove, nodeToMove];
+    } else {
+      const [leftTree, rightTree, newParent] = recurse(parent);
+      const nextSiblings = currentNode.getNextSiblings();
+      newParent.append(nodeToMove, ...nextSiblings);
+      return [leftTree, rightTree, nodeToMove];
+    }
+  };
+
+  const [leftTree, rightTree] = recurse(startNode);
+  return [leftTree, rightTree];
+}
 
 exports.$dfs = $dfs;
 exports.$findMatchingParent = $findMatchingParent;
@@ -349,8 +463,11 @@ exports.$getNearestBlockElementAncestorOrThrow = $getNearestBlockElementAncestor
 exports.$getNearestNodeOfType = $getNearestNodeOfType;
 exports.$insertNodeToNearestRoot = $insertNodeToNearestRoot;
 exports.$restoreEditorState = $restoreEditorState;
+exports.$splitNode = $splitNode;
 exports.$wrapNodeInElement = $wrapNodeInElement;
 exports.addClassNamesToElement = addClassNamesToElement;
+exports.isMimeType = isMimeType;
+exports.mediaFileReader = mediaFileReader;
 exports.mergeRegister = mergeRegister;
 exports.registerNestedElementResolver = registerNestedElementResolver;
 exports.removeClassNamesFromElement = removeClassNamesFromElement;

package/LexicalUtils.js.flow

@@ -24,6 +24,14 @@ declare export function removeClassNamesFromElement(
   element: HTMLElement,
   ...classNames: Array<typeof undefined | boolean | null | string>
 ): void;
+declare export function isMimeType(
+  file: File,
+  acceptableMimeTypes: Array<string>,
+): boolean;
+declare export function mediaFileReader(
+  files: Array<File>,
+  acceptableMimeTypes: Array<string>,
+): Promise<Array<$ReadOnly<{file: File, result: string}>>>;
 declare export function $dfs(
   startingNode?: LexicalNode,
   endingNode?: LexicalNode,
@@ -70,3 +78,5 @@ declare export function $wrapNodeInElement(
   node: LexicalNode,
   createElementNode: () => ElementNode,
 ): ElementNode;
+
+declare export function $splitNode<T: LexicalNode>(node: T): T;

package/LexicalUtils.prod.js

@@ -4,13 +4,15 @@
  * 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 l=require("lexical");function n(a){throw Error(`Minified Lexical error #${a}; visit https://lexical.dev/docs/error?code=${a} for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}function p(a,b){for(;a!==l.$getRoot()&&null!=a;){if(b(a))return a;a=a.getParent()}return null}
-function q(a,b,d,f,e){var c=d._nodes.get(a.__type);void 0===c&&n(5);for(var h in a){var k=a[h];if(null!=k&&"object"===typeof k&&(k=k.editorState,null!=k)){var g=l.createEditor({namespace:k.namespace});g._nodes=d._nodes;g._parentEditor=d._parentEditor;g._pendingEditorState=r(g,k);a[h]=g}}c=c.klass;h=a.__key;a.__key=void 0;c=c.clone(a);a.__key=h;h=c.__key;e._nodeMap.set(h,c);c.__parent=f;if(l.$isElementNode(c)){f=a.__children;for(k=0;k<f.length;k++)g=b.get(f[k]),void 0!==g&&(g=q(g,b,d,h,e).__key,c.__children.push(g));
+'use strict';var l=require("lexical");function p(a){throw Error(`Minified Lexical error #${a}; visit https://lexical.dev/docs/error?code=${a} for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}function q(a,b){for(let d of b)if(a.type.startsWith(d))return!0;return!1}function r(a,b){for(;a!==l.$getRoot()&&null!=a;){if(b(a))return a;a=a.getParent()}return null}
+function t(a,b,d,g,f){var c=d._nodes.get(a.__type);void 0===c&&p(5);for(var e in a){var k=a[e];if(null!=k&&"object"===typeof k&&(k=k.editorState,null!=k)){var h=l.createEditor({namespace:k.namespace});h._nodes=d._nodes;h._parentEditor=d._parentEditor;h._pendingEditorState=u(h,k);a[e]=h}}c=c.klass;e=a.__key;a.__key=void 0;c=c.clone(a);a.__key=e;e=c.__key;f._nodeMap.set(e,c);c.__parent=g;if(l.$isElementNode(c)){g=a.__children;for(k=0;k<g.length;k++)h=b.get(g[k]),void 0!==h&&(h=t(h,b,d,e,f).__key,c.__children.push(h));
 c.__indent=a.__indent;c.__format=a.__format;c.__dir=a.__dir}else l.$isTextNode(c)&&(c.__format=a.__format,c.__style=a.__style,c.__mode=a.__mode,c.__detail=a.__detail);return c}
-function t(a,b){let d=b._editorState.constructor,f=new Map,e=new d(f),c=new Map(a._nodeMap),h=c.get("root");a=b._updating;try{b._updating=!1,b.update(()=>{let k=b._dirtyElements,g=b._dirtyLeaves,m=b._dirtyType;b._dirtyElements=new Map;b._dirtyLeaves=new Set;b._dirtyType=0;try{q(h,c,b,null,e)}finally{b._dirtyElements=k,b._dirtyLeaves=g,b._dirtyType=m}})}finally{b._updating=a}e._readOnly=!0;return e}function r(a,b){b="string"===typeof b?JSON.parse(b):b;return t(b,a)}
-exports.$dfs=function(a,b){let d=[];a=(a||l.$getRoot()).getLatest();b=b||(l.$isElementNode(a)?a.getLastDescendant():a);for(var f=a,e=0;null!==(f=f.getParent());)e++;for(f=e;null!==a&&!a.is(b);)if(d.push({depth:f,node:a}),l.$isElementNode(a)&&0<a.getChildrenSize())a=a.getFirstChild(),f++;else for(e=null;null===e&&null!==a;)e=a.getNextSibling(),null===e?(a=a.getParent(),f--):a=e;null!==a&&a.is(b)&&d.push({depth:f,node:a});return d};exports.$findMatchingParent=p;
-exports.$getNearestBlockElementAncestorOrThrow=function(a){a=p(a,b=>l.$isElementNode(b)&&!b.isInline());l.$isElementNode(a)||n(4);return a};exports.$getNearestNodeOfType=function(a,b){for(;null!=a;){if(a instanceof b)return a;a=a.getParent()}return null};
-exports.$insertNodeToNearestRoot=function(a){var b=l.$getSelection();l.$isRangeSelection(b)?b.focus.getNode().getTopLevelElementOrThrow().insertAfter(a):l.$isNodeSelection(b)||l.DEPRECATED_$isGridSelection(b)?(b=b.getNodes(),b[b.length-1].getTopLevelElementOrThrow().insertAfter(a)):l.$getRoot().append(a);b=l.$createParagraphNode();a.insertAfter(b);b.select();return a.getLatest()};
-exports.$restoreEditorState=function(a,b){let d=new Map(b._nodeMap),f=a._pendingEditorState;f&&(f._nodeMap=d);a._dirtyType=2;a=b._selection;l.$setSelection(null===a?null:a.clone())};exports.$wrapNodeInElement=function(a,b){b=b();a.replace(b);b.append(a);return b};exports.addClassNamesToElement=function(a,...b){b.forEach(d=>{"string"===typeof d&&(d=d.split(" ").filter(f=>""!==f),a.classList.add(...d))})};exports.mergeRegister=function(...a){return()=>{a.forEach(b=>b())}};
-exports.registerNestedElementResolver=function(a,b,d,f){return a.registerNodeTransform(b,e=>{a:{var c=e.getChildren();for(var h=0;h<c.length;h++)if(c[h]instanceof b){c=null;break a}for(c=e;null!==c;)if(h=c,c=c.getParent(),c instanceof b){c={child:h,parent:c};break a}c=null}if(null!==c){const {child:k,parent:g}=c;if(k.is(e)){f(g,e);e=k.getNextSiblings();c=e.length;g.insertAfter(k);if(0!==c){h=d(g);k.insertAfter(h);for(let m=0;m<c;m++)h.append(e[m])}g.canBeEmpty()||0!==g.getChildrenSize()||g.remove()}}})};
-exports.removeClassNamesFromElement=function(a,...b){b.forEach(d=>{"string"===typeof d&&a.classList.remove(...d.split(" "))})};exports.unstable_convertLegacyJSONEditorState=r
+function v(a,b){let d=b._editorState.constructor,g=new Map,f=new d(g),c=new Map(a._nodeMap),e=c.get("root");a=b._updating;try{b._updating=!1,b.update(()=>{let k=b._dirtyElements,h=b._dirtyLeaves,m=b._dirtyType;b._dirtyElements=new Map;b._dirtyLeaves=new Set;b._dirtyType=0;try{t(e,c,b,null,f)}finally{b._dirtyElements=k,b._dirtyLeaves=h,b._dirtyType=m}})}finally{b._updating=a}f._readOnly=!0;return f}function u(a,b){b="string"===typeof b?JSON.parse(b):b;return v(b,a)}
+function w(a,b){let d=a.getChildAtIndex(b);null==d&&(d=a);let g=e=>{const k=e.getParentOrThrow(),h=l.$isRootOrShadowRoot(k),m=e!==d||h?l.$copyNode(e):e;if(h)return e.insertAfter(m),[e,m,m];const [n,x,y]=g(k);e=e.getNextSiblings();y.append(m,...e);return[n,x,m]},[f,c]=g(d);return[f,c]}
+exports.$dfs=function(a,b){let d=[];a=(a||l.$getRoot()).getLatest();b=b||(l.$isElementNode(a)?a.getLastDescendant():a);for(var g=a,f=0;null!==(g=g.getParent());)f++;for(g=f;null!==a&&!a.is(b);)if(d.push({depth:g,node:a}),l.$isElementNode(a)&&0<a.getChildrenSize())a=a.getFirstChild(),g++;else for(f=null;null===f&&null!==a;)f=a.getNextSibling(),null===f?(a=a.getParent(),g--):a=f;null!==a&&a.is(b)&&d.push({depth:g,node:a});return d};exports.$findMatchingParent=r;
+exports.$getNearestBlockElementAncestorOrThrow=function(a){a=r(a,b=>l.$isElementNode(b)&&!b.isInline());l.$isElementNode(a)||p(4);return a};exports.$getNearestNodeOfType=function(a,b){for(;null!=a;){if(a instanceof b)return a;a=a.getParent()}return null};
+exports.$insertNodeToNearestRoot=function(a){var b=l.$getSelection();if(l.$isRangeSelection(b)){var {focus:d}=b;b=d.getNode();d=d.offset;let g,f;l.$isTextNode(b)?(g=b.getParentOrThrow(),f=b.getIndexWithinParent(),0<d&&(f+=1,b.splitText(d))):(g=b,f=d);[,b]=w(g,f);b.insertBefore(a);b.selectStart()}else l.$isNodeSelection(b)||l.DEPRECATED_$isGridSelection(b)?(b=b.getNodes(),b[b.length-1].getTopLevelElementOrThrow().insertAfter(a)):l.$getRoot().append(a),b=l.$createParagraphNode(),a.insertAfter(b),b.select();
+return a.getLatest()};exports.$restoreEditorState=function(a,b){let d=new Map(b._nodeMap),g=a._pendingEditorState;g&&(g._nodeMap=d);a._dirtyType=2;a=b._selection;l.$setSelection(null===a?null:a.clone())};exports.$splitNode=w;exports.$wrapNodeInElement=function(a,b){b=b();a.replace(b);b.append(a);return b};exports.addClassNamesToElement=function(a,...b){b.forEach(d=>{"string"===typeof d&&(d=d.split(" ").filter(g=>""!==g),a.classList.add(...d))})};exports.isMimeType=q;
+exports.mediaFileReader=function(a,b){let d=a[Symbol.iterator]();return new Promise((g,f)=>{let c=[],e=()=>{const {done:k,value:h}=d.next();if(k)return g(c);const m=new FileReader;m.addEventListener("error",f);m.addEventListener("load",()=>{const n=m.result;"string"===typeof n&&c.push({file:h,result:n});e()});q(h,b)?m.readAsDataURL(h):e()};e()})};exports.mergeRegister=function(...a){return()=>{a.forEach(b=>b())}};
+exports.registerNestedElementResolver=function(a,b,d,g){return a.registerNodeTransform(b,f=>{a:{var c=f.getChildren();for(var e=0;e<c.length;e++)if(c[e]instanceof b){c=null;break a}for(c=f;null!==c;)if(e=c,c=c.getParent(),c instanceof b){c={child:e,parent:c};break a}c=null}if(null!==c){const {child:k,parent:h}=c;if(k.is(f)){g(h,f);f=k.getNextSiblings();c=f.length;h.insertAfter(k);if(0!==c){e=d(h);k.insertAfter(e);for(let m=0;m<c;m++)e.append(f[m])}h.canBeEmpty()||0!==h.getChildrenSize()||h.remove()}}})};
+exports.removeClassNamesFromElement=function(a,...b){b.forEach(d=>{"string"===typeof d&&a.classList.remove(...d.split(" "))})};exports.unstable_convertLegacyJSONEditorState=u

package/index.d.ts

@@ -13,6 +13,22 @@ export declare type DFSNode = Readonly<{
 }>;
 export declare function addClassNamesToElement(element: HTMLElement, ...classNames: Array<typeof undefined | boolean | null | string>): void;
 export declare function removeClassNamesFromElement(element: HTMLElement, ...classNames: Array<typeof undefined | boolean | null | string>): void;
+export declare function isMimeType(file: File, acceptableMimeTypes: Array<string>): boolean;
+/**
+ * Lexical File Reader with:
+ *  1. MIME type support
+ *  2. batched results (HistoryPlugin compatibility)
+ *  3. Order aware (respects the order when multiple Files are passed)
+ *
+ * const filesResult = await mediaFileReader(files, ['image/']);
+ * filesResult.forEach(file => editor.dispatchCommand('INSERT_IMAGE', {
+ *   src: file.result,
+ * }));
+ */
+export declare function mediaFileReader(files: Array<File>, acceptableMimeTypes: Array<string>): Promise<Array<{
+    file: File;
+    result: string;
+}>>;
 export declare function $dfs(startingNode?: LexicalNode, endingNode?: LexicalNode): Array<DFSNode>;
 export declare function $getNearestNodeOfType<T extends ElementNode>(node: LexicalNode, klass: Klass<T>): T | null;
 export declare function $getNearestBlockElementAncestorOrThrow(startNode: LexicalNode): ElementNode;
@@ -26,4 +42,5 @@ export declare function unstable_convertLegacyJSONEditorState(editor: LexicalEdi
 export declare function $restoreEditorState(editor: LexicalEditor, editorState: EditorState): void;
 export declare function $insertNodeToNearestRoot<T extends LexicalNode>(node: T): T;
 export declare function $wrapNodeInElement(node: LexicalNode, createElementNode: () => ElementNode): ElementNode;
+export declare function $splitNode(node: ElementNode, offset: number): [ElementNode | null, ElementNode];
 export {};

package/package.json

@@ -8,14 +8,14 @@
     "utils"
   ],
   "license": "MIT",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "main": "LexicalUtils.js",
   "peerDependencies": {
-    "lexical": "0.6.0"
+    "lexical": "0.6.2"
   },
   "dependencies": {
-    "@lexical/list": "0.6.0",
-    "@lexical/table": "0.6.0"
+    "@lexical/list": "0.6.2",
+    "@lexical/table": "0.6.2"
   },
   "repository": {
     "type": "git",