@lexical/react 0.1.9 → 0.1.10

package/LexicalTreeView.dev.js

@@ -181,6 +181,14 @@ function printRangeSelection(selection) {
   return res;
 }
 
+function printObjectSelection(selection) {
+  return `: node\n  └ [${Array.from(selection._nodes).join(', ')}]`;
+}
+
+function printGridSelection(selection) {
+  return `: grid\n  └ { grid: ${selection.gridKey}, anchorCell: ${selection.anchorCellKey}, focusCell: ${selection.focusCellKey} }`;
+}
+
 function generateContent(editorState) {
   let res = ' root\n';
   const selectionString = editorState.read(() => {
@@ -200,7 +208,7 @@ function generateContent(editorState) {
         typeDisplay
       });
     });
-    return selection === null ? ': null' : printRangeSelection(selection);
+    return selection === null ? ': null' : lexical.$isRangeSelection(selection) ? printRangeSelection(selection) : lexical.$isGridSelection(selection) ? printGridSelection(selection) : printObjectSelection(selection);
   });
   return res + '\n selection' + selectionString;
 }
@@ -279,7 +287,7 @@ function printSelectedCharsLine({
   typeDisplay
 }) {
   // No selection or node is not selected.
-  if (!lexical.$isTextNode(node) || selection === null || !isSelected || lexical.$isElementNode(node)) {
+  if (!lexical.$isTextNode(node) || !lexical.$isRangeSelection(selection) || !isSelected || lexical.$isElementNode(node)) {
     return '';
   } // No selected characters.
 

package/LexicalTreeView.prod.js

@@ -4,16 +4,17 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var k=require("lexical"),q=require("react");const w=Object.freeze({"\t":"\\t","\n":"\\n"}),D=new RegExp(Object.keys(w).join("|"),"g"),E=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
+var k=require("lexical"),q=require("react");const t=Object.freeze({"\t":"\\t","\n":"\\n"}),D=new RegExp(Object.keys(t).join("|"),"g"),E=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
 function F(a){let b="";const c=G(a),e=a.anchor;a=a.focus;const d=e.offset,f=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${e.key}, offset: ${null===d?"null":d}, type: ${e.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===f?"null":f}, type: ${a.type} }`}
-function H(a){let b=" root\n";a=a.read(()=>{const c=k.$getSelection();J(k.$getRoot(),(e,d)=>{const f=`(${e.getKey()})`,g=e.getType()||"",m=e.isSelected();var u=b,t=m?E.selectedLine:" ",r=d.join(" ");if(k.$isTextNode(e)){var l=e.getTextContent(!0);const n=0===l.length?"(empty)":`"${K(l)}"`;l=[G(e),L(e),M(e)].filter(Boolean).join(", ");l=[n,0!==l.length?`{ ${l} }`:null].filter(Boolean).join(" ").trim()}else l="";b=u+`${t} ${r} ${f} ${g} ${l}\n`;b+=N({indent:d,isSelected:m,node:e,nodeKeyDisplay:f,selection:c,
-typeDisplay:g})});return null===c?": null":F(c)});return b+"\n selection"+a}function J(a,b,c=[]){a=a.getChildren();const e=a.length;a.forEach((d,f)=>{b(d,c.concat(f===e-1?E.isLastChild:E.hasNextSibling));k.$isElementNode(d)&&J(d,b,c.concat(f===e-1?E.ancestorIsLastChild:E.ancestorHasNextSibling))})}function K(a){return Object.entries(w).reduce((b,[c,e])=>b.replace(new RegExp(c,"g"),String(e)),a)}
+function H(a){let b=" root\n";a=a.read(()=>{const c=k.$getSelection();J(k.$getRoot(),(e,d)=>{const f=`(${e.getKey()})`,g=e.getType()||"",m=e.isSelected();var v=b,u=m?E.selectedLine:" ",r=d.join(" ");if(k.$isTextNode(e)){var l=e.getTextContent(!0);const n=0===l.length?"(empty)":`"${K(l)}"`;l=[G(e),L(e),M(e)].filter(Boolean).join(", ");l=[n,0!==l.length?`{ ${l} }`:null].filter(Boolean).join(" ").trim()}else l="";b=v+`${u} ${r} ${f} ${g} ${l}\n`;b+=N({indent:d,isSelected:m,node:e,nodeKeyDisplay:f,selection:c,
+typeDisplay:g})});return null===c?": null":k.$isRangeSelection(c)?F(c):k.$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchorCellKey}, focusCell: ${c.focusCellKey} }`:`: node\n  \u2514 [${Array.from(c._nodes).join(", ")}]`});return b+"\n selection"+a}
+function J(a,b,c=[]){a=a.getChildren();const e=a.length;a.forEach((d,f)=>{b(d,c.concat(f===e-1?E.isLastChild:E.hasNextSibling));k.$isElementNode(d)&&J(d,b,c.concat(f===e-1?E.ancestorIsLastChild:E.ancestorHasNextSibling))})}function K(a){return Object.entries(t).reduce((b,[c,e])=>b.replace(new RegExp(c,"g"),String(e)),a)}
 const O=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("underline")&&"Underline"],P=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],Q=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];function L(a){let b=P.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}
 function M(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function G(a){let b=O.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
-function N({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:f}){if(!k.$isTextNode(c)||null===d||!b||k.$isElementNode(c))return"";b=d.anchor;var g=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===g.offset)return"";g=d.anchor;const m=d.focus,u=c.getTextContent(!0),t=u.length;b=d=-1;if("text"===g.type&&"text"===m.type){const n=g.getNode(),v=m.getNode();n===v&&c===n&&g.offset!==m.offset?[d,b]=g.offset<m.offset?[g.offset,m.offset]:[m.offset,g.offset]:
-c===n?[d,b]=n.isBefore(v)?[g.offset,t]:[0,g.offset]:c===v?[d,b]=v.isBefore(n)?[m.offset,t]:[0,m.offset]:[d,b]=[0,t]}c=(u.slice(0,d).match(D)||[]).length;g=(u.slice(d,b).match(D)||[]).length;const [r,l]=[d+c,b+c+g];if(r===l)return"";c=a[a.length-1]===E.hasNextSibling?E.ancestorHasNextSibling:E.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(r).fill(" ");d=Array(l-r).fill(E.selectedChar);e=Array(e.length+(f.length+3)).fill(" ");return[E.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+
+function N({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:f}){if(!k.$isTextNode(c)||!k.$isRangeSelection(d)||!b||k.$isElementNode(c))return"";b=d.anchor;var g=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===g.offset)return"";g=d.anchor;const m=d.focus,v=c.getTextContent(!0),u=v.length;b=d=-1;if("text"===g.type&&"text"===m.type){const n=g.getNode(),w=m.getNode();n===w&&c===n&&g.offset!==m.offset?[d,b]=g.offset<m.offset?[g.offset,m.offset]:[m.offset,
+g.offset]:c===n?[d,b]=n.isBefore(w)?[g.offset,u]:[0,g.offset]:c===w?[d,b]=w.isBefore(n)?[m.offset,u]:[0,m.offset]:[d,b]=[0,u]}c=(v.slice(0,d).match(D)||[]).length;g=(v.slice(d,b).match(D)||[]).length;const [r,l]=[d+c,b+c+g];if(r===l)return"";c=a[a.length-1]===E.hasNextSibling?E.ancestorHasNextSibling:E.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(r).fill(" ");d=Array(l-r).fill(E.selectedChar);e=Array(e.length+(f.length+3)).fill(" ");return[E.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+
 "\n"}
-module.exports=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:e,timeTravelPanelClassName:d,editor:f}){const [g,m]=q.useState([]),[u,t]=q.useState(""),[r,l]=q.useState(!1),n=q.useRef(0),v=q.useRef(null),B=q.useRef(null),[z,C]=q.useState(!1);q.useEffect(()=>{t(H(f.getEditorState()));return f.addListener("update",({editorState:h})=>{const p=f._compositionKey,x=H(f.getEditorState());t([x,null!==p&&`Composition key: ${p}`].filter(Boolean).join("\n\n"));r||
-m(A=>[...A,[Date.now(),h]])})},[r,f]);const y=g.length;q.useEffect(()=>{if(z){let h;const p=()=>{const x=n.current;x===y-1?C(!1):h=setTimeout(()=>{n.current++;const A=n.current,I=B.current;null!==I&&(I.value=String(A));f.setEditorState(g[A][1]);p()},g[x+1][0]-g[x][0])};p();return()=>{window.clearTimeout(h)}}},[g,z,f,y]);q.useEffect(()=>{const h=v.current;if(null!==h)return h.__lexicalEditor=f,()=>{h.__lexicalEditor=null}},[f]);return q.createElement("div",{className:e},!r&&2<y&&q.createElement("button",
-{onClick:()=>{const h=f.getRootElement();null!==h&&(h.contentEditable="false",n.current=y-1,l(!0))},className:a},"Time Travel"),q.createElement("pre",{ref:v},u),r&&q.createElement("div",{className:d},q.createElement("button",{className:c,onClick:()=>{C(!z)}},z?"Pause":"Play"),q.createElement("input",{className:b,ref:B,onChange:h=>{h=Number(h.target.value);const p=g[h];p&&(n.current=h,f.setEditorState(p[1]))},type:"range",min:"1",max:y-1}),q.createElement("button",{className:c,onClick:()=>{var h=f.getRootElement();
+module.exports=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:e,timeTravelPanelClassName:d,editor:f}){const [g,m]=q.useState([]),[v,u]=q.useState(""),[r,l]=q.useState(!1),n=q.useRef(0),w=q.useRef(null),B=q.useRef(null),[z,C]=q.useState(!1);q.useEffect(()=>{u(H(f.getEditorState()));return f.addListener("update",({editorState:h})=>{const p=f._compositionKey,x=H(f.getEditorState());u([x,null!==p&&`Composition key: ${p}`].filter(Boolean).join("\n\n"));r||
+m(A=>[...A,[Date.now(),h]])})},[r,f]);const y=g.length;q.useEffect(()=>{if(z){let h;const p=()=>{const x=n.current;x===y-1?C(!1):h=setTimeout(()=>{n.current++;const A=n.current,I=B.current;null!==I&&(I.value=String(A));f.setEditorState(g[A][1]);p()},g[x+1][0]-g[x][0])};p();return()=>{window.clearTimeout(h)}}},[g,z,f,y]);q.useEffect(()=>{const h=w.current;if(null!==h)return h.__lexicalEditor=f,()=>{h.__lexicalEditor=null}},[f]);return q.createElement("div",{className:e},!r&&2<y&&q.createElement("button",
+{onClick:()=>{const h=f.getRootElement();null!==h&&(h.contentEditable="false",n.current=y-1,l(!0))},className:a},"Time Travel"),q.createElement("pre",{ref:w},v),r&&q.createElement("div",{className:d},q.createElement("button",{className:c,onClick:()=>{C(!z)}},z?"Pause":"Play"),q.createElement("input",{className:b,ref:B,onChange:h=>{h=Number(h.target.value);const p=g[h];p&&(n.current=h,f.setEditorState(p[1]))},type:"range",min:"1",max:y-1}),q.createElement("button",{className:c,onClick:()=>{var h=f.getRootElement();
 if(null!==h){h.contentEditable="true";h=g.length-1;f.setEditorState(g[h][1]);const p=B.current;null!==p&&(p.value=String(h));l(!1);C(!1)}}},"Exit")))};

package/package.json

@@ -12,12 +12,12 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "peerDependencies": {
-    "lexical": "0.1.9",
-    "@lexical/helpers": "0.1.9",
-    "@lexical/table": "0.1.9",
-    "@lexical/yjs": "0.1.9",
+    "lexical": "0.1.10",
+    "@lexical/helpers": "0.1.10",
+    "@lexical/table": "0.1.10",
+    "@lexical/yjs": "0.1.10",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },

package/useLexicalNodeSelection.dev.js

@@ -0,0 +1,70 @@
+/**
+ * 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 LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var react = require('react');
+
+/**
+ * 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.
+ *
+ * 
+ */
+
+function isNodeSelected(editor, key) {
+  return editor.getEditorState().read(() => {
+    const node = lexical.$getNodeByKey(key);
+
+    if (node === null) {
+      return false;
+    }
+
+    return node.isSelected();
+  });
+}
+
+function useLexicalNodeSelection(key) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [isSelected, setIsSelected] = react.useState(() => isNodeSelected(editor, key));
+  react.useEffect(() => {
+    return editor.addListener('update', () => {
+      setIsSelected(isNodeSelected(editor, key));
+    });
+  }, [editor, key]);
+  const setSelected = react.useCallback(selected => {
+    editor.update(() => {
+      let selection = lexical.$getSelection();
+
+      if (!lexical.$isNodeSelection(selection)) {
+        selection = lexical.$createNodeSelection();
+        lexical.$setSelection(selection);
+      }
+
+      if (selected) {
+        selection.add(key);
+      } else {
+        selection.delete(key);
+      }
+    });
+  }, [editor, key]);
+  const clearSelected = react.useCallback(() => {
+    editor.update(() => {
+      const selection = lexical.$getSelection();
+
+      if (lexical.$isNodeSelection(selection)) {
+        selection.clear();
+      }
+    });
+  }, [editor]);
+  return [isSelected, setSelected, clearSelected];
+}
+
+module.exports = useLexicalNodeSelection;

package/useLexicalNodeSelection.js

@@ -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.
+ */
+'use strict'
+const useLexicalNodeSelection = process.env.NODE_ENV === 'development' ? require('./useLexicalNodeSelection.dev.js') : require('./useLexicalNodeSelection.prod.js')
+module.exports = useLexicalNodeSelection;

package/useLexicalNodeSelection.prod.js

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+var c=require("@lexical/react/LexicalComposerContext"),e=require("lexical"),h=require("react");function k(b,a){return b.getEditorState().read(()=>{const f=e.$getNodeByKey(a);return null===f?!1:f.isSelected()})}
+module.exports=function(b){const [a]=c.useLexicalComposerContext(),[f,l]=h.useState(()=>k(a,b));h.useEffect(()=>a.addListener("update",()=>{l(k(a,b))}),[a,b]);const m=h.useCallback(g=>{a.update(()=>{let d=e.$getSelection();e.$isNodeSelection(d)||(d=e.$createNodeSelection(),e.$setSelection(d));g?d.add(b):d.delete(b)})},[a,b]),n=h.useCallback(()=>{a.update(()=>{const g=e.$getSelection();e.$isNodeSelection(g)&&g.clear()})},[a]);return[f,m,n]};