@lexical/react 0.8.0 → 0.9.0

package/LexicalTreeView.dev.js

@@ -50,19 +50,22 @@ function TreeView({
   const [isLimited, setIsLimited] = React.useState(false);
   const [showLimited, setShowLimited] = React.useState(false);
   const lastEditorStateRef = React.useRef(null);
+  const commandsLog = useLexicalCommandsLog(editor);
   const generateTree = React.useCallback(editorState => {
-    const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
+    const treeText = generateContent(editor.getEditorState(), editor._config, commandsLog, editor._compositionKey, editor._editable);
     setContent(treeText);
+
     if (!timeTravelEnabled) {
       setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
     }
-  }, [editor, timeTravelEnabled]);
+  }, [commandsLog, editor, timeTravelEnabled]);
   React.useEffect(() => {
     const editorState = editor.getEditorState();
+
     if (!showLimited && editorState._nodeMap.size > 1000) {
-      setContent(generateContent(editorState, editor._config, editor._compositionKey, editor._editable));
+      setContent(generateContent(editorState, editor._config, commandsLog, editor._compositionKey, editor._editable));
     }
-  }, [editor, showLimited]);
+  }, [commandsLog, editor, showLimited]);
   React.useEffect(() => {
     return utils.mergeRegister(editor.registerUpdateListener(({
       editorState
@@ -70,26 +73,31 @@ function TreeView({
       if (!showLimited && editorState._nodeMap.size > 1000) {
         lastEditorStateRef.current = editorState;
         setIsLimited(true);
+
         if (!showLimited) {
           return;
         }
       }
+
       generateTree(editorState);
     }), editor.registerEditableListener(() => {
-      const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
+      const treeText = generateContent(editor.getEditorState(), editor._config, commandsLog, editor._compositionKey, editor._editable);
       setContent(treeText);
     }));
-  }, [editor, isLimited, generateTree, showLimited]);
+  }, [commandsLog, editor, isLimited, generateTree, showLimited]);
   const totalEditorStates = timeStampedEditorStates.length;
   React.useEffect(() => {
     if (isPlaying) {
       let timeoutId;
+
       const play = () => {
         const currentIndex = playingIndexRef.current;
+
         if (currentIndex === totalEditorStates - 1) {
           setIsPlaying(false);
           return;
         }
+
         const currentTime = timeStampedEditorStates[currentIndex][0];
         const nextTime = timeStampedEditorStates[currentIndex + 1][0];
         const timeDiff = nextTime - currentTime;
@@ -97,13 +105,16 @@ function TreeView({
           playingIndexRef.current++;
           const index = playingIndexRef.current;
           const input = inputRef.current;
+
           if (input !== null) {
             input.value = String(index);
           }
+
           editor.setEditorState(timeStampedEditorStates[index][1]);
           play();
         }, timeDiff);
       };
+
       play();
       return () => {
         clearTimeout(timeoutId);
@@ -112,6 +123,7 @@ function TreeView({
   }, [timeStampedEditorStates, isPlaying, editor, totalEditorStates]);
   React.useEffect(() => {
     const element = treeElementRef.current;
+
     if (element !== null) {
       // @ts-ignore Internal field
       element.__lexicalEditor = editor;
@@ -135,6 +147,7 @@ function TreeView({
     onClick: () => {
       setShowLimited(true);
       const editorState = lastEditorStateRef.current;
+
       if (editorState !== null) {
         lastEditorStateRef.current = null;
         generateTree(editorState);
@@ -150,6 +163,7 @@ function TreeView({
   }, "Show full tree")) : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/React.createElement("button", {
     onClick: () => {
       const rootElement = editor.getRootElement();
+
       if (rootElement !== null) {
         rootElement.contentEditable = 'false';
         playingIndexRef.current = totalEditorStates - 1;
@@ -168,6 +182,7 @@ function TreeView({
       if (playingIndexRef.current === totalEditorStates - 1) {
         playingIndexRef.current = 1;
       }
+
       setIsPlaying(!isPlaying);
     },
     type: "button"
@@ -177,6 +192,7 @@ function TreeView({
     onChange: event => {
       const editorStateIndex = Number(event.target.value);
       const timeStampedEditorState = timeStampedEditorStates[editorStateIndex];
+
       if (timeStampedEditorState) {
         playingIndexRef.current = editorStateIndex;
         editor.setEditorState(timeStampedEditorState[1]);
@@ -189,15 +205,18 @@ function TreeView({
     className: timeTravelPanelButtonClassName,
     onClick: () => {
       const rootElement = editor.getRootElement();
+
       if (rootElement !== null) {
         rootElement.contentEditable = 'true';
         const index = timeStampedEditorStates.length - 1;
         const timeStampedEditorState = timeStampedEditorStates[index];
         editor.setEditorState(timeStampedEditorState[1]);
         const input = inputRef.current;
+
         if (input !== null) {
           input.value = String(index);
         }
+
         setTimeTravelEnabled(false);
         setIsPlaying(false);
       }
@@ -205,6 +224,36 @@ function TreeView({
     type: "button"
   }, "Exit")));
 }
+
+function useLexicalCommandsLog(editor) {
+  const [loggedCommands, setLoggedCommands] = React.useState([]);
+  React.useEffect(() => {
+    const unregisterCommandListeners = new Set();
+
+    for (const [command] of editor._commands) {
+      unregisterCommandListeners.add(editor.registerCommand(command, payload => {
+        setLoggedCommands(state => {
+          const newState = [...state];
+          newState.push({
+            payload,
+            type: command.type ? command.type : 'UNKNOWN'
+          });
+
+          if (newState.length > 10) {
+            newState.shift();
+          }
+
+          return newState;
+        });
+        return false;
+      }, lexical.COMMAND_PRIORITY_HIGH));
+    }
+
+    return () => unregisterCommandListeners.forEach(unregister => unregister());
+  }, [editor]);
+  return React.useMemo(() => loggedCommands, [loggedCommands]);
+}
+
 function printRangeSelection(selection) {
   let res = '';
   const formatText = printFormatProperties(selection);
@@ -217,13 +266,16 @@ function printRangeSelection(selection) {
   res += `\n  └ focus { key: ${focus.key}, offset: ${focusOffset === null ? 'null' : focusOffset}, type: ${focus.type} }`;
   return res;
 }
-function printObjectSelection(selection) {
+
+function printNodeSelection(selection) {
   return `: node\n  └ [${Array.from(selection._nodes).join(', ')}]`;
 }
+
 function printGridSelection(selection) {
   return `: grid\n  └ { grid: ${selection.gridKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
 }
-function generateContent(editorState, editorConfig, compositionKey, editable) {
+
+function generateContent(editorState, editorConfig, commandsLog, compositionKey, editable) {
   let res = ' root\n';
   const selectionString = editorState.read(() => {
     const selection = lexical.$getSelection();
@@ -243,32 +295,50 @@ function generateContent(editorState, editorConfig, compositionKey, editable) {
         typeDisplay
       });
     });
-    return selection === null ? ': null' : lexical.$isRangeSelection(selection) ? printRangeSelection(selection) : lexical.DEPRECATED_$isGridSelection(selection) ? printGridSelection(selection) : printObjectSelection(selection);
+    return selection === null ? ': null' : lexical.$isRangeSelection(selection) ? printRangeSelection(selection) : lexical.DEPRECATED_$isGridSelection(selection) ? printGridSelection(selection) : printNodeSelection(selection);
   });
   res += '\n selection' + selectionString;
+  res += '\n\n commands:';
+
+  if (commandsLog.length) {
+    for (const {
+      type,
+      payload
+    } of commandsLog) {
+      res += `\n  └ { type: ${type}, payload: ${payload instanceof Event ? payload.constructor.name : payload} }`;
+    }
+  } else {
+    res += '\n  └ None dispatched.';
+  }
+
   res += '\n\n editor:';
   res += `\n  └ namespace ${editorConfig.namespace}`;
+
   if (compositionKey !== null) {
     res += `\n  └ compositionKey ${compositionKey}`;
   }
+
   res += `\n  └ editable ${String(editable)}`;
   return res;
 }
+
 function visitTree(currentNode, visitor, indent = []) {
   const childNodes = currentNode.getChildren();
   const childNodesLength = childNodes.length;
   childNodes.forEach((childNode, i) => {
     visitor(childNode, indent.concat(i === childNodesLength - 1 ? SYMBOLS.isLastChild : SYMBOLS.hasNextSibling));
+
     if (lexical.$isElementNode(childNode)) {
       visitTree(childNode, visitor, indent.concat(i === childNodesLength - 1 ? SYMBOLS.ancestorIsLastChild : SYMBOLS.ancestorHasNextSibling));
     }
   });
 }
+
 function normalize(text) {
   return Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
-}
+} // TODO Pass via props to allow customizability
+
 
-// TODO Pass via props to allow customizability
 function printNode(node) {
   if (lexical.$isTextNode(node)) {
     const text = node.getTextContent();
@@ -284,52 +354,69 @@ function printNode(node) {
     return '';
   }
 }
+
 const FORMAT_PREDICATES = [node => node.hasFormat('bold') && 'Bold', node => node.hasFormat('code') && 'Code', node => node.hasFormat('italic') && 'Italic', node => node.hasFormat('strikethrough') && 'Strikethrough', node => node.hasFormat('subscript') && 'Subscript', node => node.hasFormat('superscript') && 'Superscript', node => node.hasFormat('underline') && 'Underline'];
 const DETAIL_PREDICATES = [node => node.isDirectionless() && 'Directionless', node => node.isUnmergeable() && 'Unmergeable'];
 const MODE_PREDICATES = [node => node.isToken() && 'Token', node => node.isSegmented() && 'Segmented'];
+
 function printAllTextNodeProperties(node) {
   return [printFormatProperties(node), printDetailProperties(node), printModeProperties(node)].filter(Boolean).join(', ');
 }
+
 function printAllLinkNodeProperties(node) {
   return [printTargetProperties(node), printRelProperties(node)].filter(Boolean).join(', ');
 }
+
 function printDetailProperties(nodeOrSelection) {
   let str = DETAIL_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+
   if (str !== '') {
     str = 'detail: ' + str;
   }
+
   return str;
 }
+
 function printModeProperties(nodeOrSelection) {
   let str = MODE_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+
   if (str !== '') {
     str = 'mode: ' + str;
   }
+
   return str;
 }
+
 function printFormatProperties(nodeOrSelection) {
   let str = FORMAT_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
+
   if (str !== '') {
     str = 'format: ' + str;
   }
+
   return str;
 }
+
 function printTargetProperties(node) {
-  let str = node.getTarget();
-  // TODO Fix nullish on LinkNode
+  let str = node.getTarget(); // TODO Fix nullish on LinkNode
+
   if (str != null) {
     str = 'target: ' + str;
   }
+
   return str;
 }
+
 function printRelProperties(node) {
-  let str = node.getRel();
-  // TODO Fix nullish on LinkNode
+  let str = node.getRel(); // TODO Fix nullish on LinkNode
+
   if (str != null) {
     str = 'rel: ' + str;
   }
+
   return str;
 }
+
 function printSelectedCharsLine({
   indent,
   isSelected,
@@ -341,18 +428,22 @@ function printSelectedCharsLine({
   // No selection or node is not selected.
   if (!lexical.$isTextNode(node) || !lexical.$isRangeSelection(selection) || !isSelected || lexical.$isElementNode(node)) {
     return '';
-  }
+  } // No selected characters.
+
 
-  // No selected characters.
   const anchor = selection.anchor;
   const focus = selection.focus;
+
   if (node.getTextContent() === '' || anchor.getNode() === selection.focus.getNode() && anchor.offset === focus.offset) {
     return '';
   }
+
   const [start, end] = $getSelectionStartEnd(node, selection);
+
   if (start === end) {
     return '';
   }
+
   const selectionLastIndent = indent[indent.length - 1] === SYMBOLS.hasNextSibling ? SYMBOLS.ancestorHasNextSibling : SYMBOLS.ancestorIsLastChild;
   const indentionChars = [...indent.slice(0, indent.length - 1), selectionLastIndent];
   const unselectedChars = Array(start + 1).fill(' ');
@@ -362,18 +453,19 @@ function printSelectedCharsLine({
   const nodePrintSpaces = Array(nodeKeyDisplay.length + paddingLength).fill(' ');
   return [SYMBOLS.selectedLine, indentionChars.join(' '), [...nodePrintSpaces, ...unselectedChars, ...selectedChars].join('')].join(' ') + '\n';
 }
+
 function $getSelectionStartEnd(node, selection) {
   const anchor = selection.anchor;
   const focus = selection.focus;
   const textContent = node.getTextContent();
   const textLength = textContent.length;
   let start = -1;
-  let end = -1;
+  let end = -1; // Only one node is being selected.
 
-  // Only one node is being selected.
   if (anchor.type === 'text' && focus.type === 'text') {
     const anchorNode = anchor.getNode();
     const focusNode = focus.getNode();
+
     if (anchorNode === focusNode && node === anchorNode && anchor.offset !== focus.offset) {
       [start, end] = anchor.offset < focus.offset ? [anchor.offset, focus.offset] : [focus.offset, anchor.offset];
     } else if (node === anchorNode) {
@@ -384,9 +476,9 @@ function $getSelectionStartEnd(node, selection) {
       // Node is within selection but not the anchor nor focus.
       [start, end] = [0, textLength];
     }
-  }
+  } // Account for non-single width characters.
+
 
-  // Account for non-single width characters.
   const numNonSingleWidthCharBeforeSelection = (textContent.slice(0, start).match(NON_SINGLE_WIDTH_CHARS_REGEX) || []).length;
   const numNonSingleWidthCharInSelection = (textContent.slice(start, end).match(NON_SINGLE_WIDTH_CHARS_REGEX) || []).length;
   return [start + numNonSingleWidthCharBeforeSelection, end + numNonSingleWidthCharBeforeSelection + numNonSingleWidthCharInSelection];

package/LexicalTreeView.prod.js

@@ -4,19 +4,20 @@
  * 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 h=require("@lexical/link"),r=require("@lexical/mark"),v=require("@lexical/utils"),F=require("lexical"),I=require("react");let J=Object.freeze({"\t":"\\t","\n":"\\n"}),K=new RegExp(Object.keys(J).join("|"),"g"),L=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
-function M(a){let c="";var d=P(a);c+=`: range ${""!==d?`{ ${d} }`:""} ${""!==a.style?`{ style: ${a.style} } `:""}`;d=a.anchor;a=a.focus;let l=d.offset,f=a.offset;c+=`\n  \u251c anchor { key: ${d.key}, offset: ${null===l?"null":l}, type: ${d.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===f?"null":f}, type: ${a.type} }`}
-function Q(a,c,d,l){let f=" root\n";a=a.read(()=>{const b=F.$getSelection();R(F.$getRoot(),(e,n)=>{const y=`(${e.getKey()})`,t=e.getType()||"",q=e.isSelected(),z=r.$isMarkNode(e)?` id: [ ${e.getIDs().join(", ")} ] `:"";var m=f,w=q?L.selectedLine:" ",D=n.join(" ");if(F.$isTextNode(e)){var k=e.getTextContent();var p=0===k.length?"(empty)":`"${S(k)}"`;k=[P(e),T(e),U(e)].filter(Boolean).join(", ");k=[p,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else if(h.$isLinkNode(e)){k=e.getURL();
-k=0===k.length?"(empty)":`"${S(k)}"`;p=e.getTarget();null!=p&&(p="target: "+p);var A=Boolean;let B=e.getRel();null!=B&&(B="rel: "+B);p=[p,B].filter(A).join(", ");k=[k,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else k="";f=m+`${w} ${D} ${y} ${t} ${z} ${k}\n`;f+=V({indent:n,isSelected:q,node:e,nodeKeyDisplay:y,selection:b,typeDisplay:t})});return null===b?": null":F.$isRangeSelection(b)?M(b):F.DEPRECATED_$isGridSelection(b)?`: grid\n  \u2514 { grid: ${b.gridKey}, anchorCell: ${b.anchor.key}, focusCell: ${b.focus.key} }`:
-`: node\n  \u2514 [${Array.from(b._nodes).join(", ")}]`});f+="\n selection"+a;f+="\n\n editor:";f+=`\n  \u2514 namespace ${c.namespace}`;null!==d&&(f+=`\n  \u2514 compositionKey ${d}`);return f+=`\n  \u2514 editable ${String(l)}`}function R(a,c,d=[]){a=a.getChildren();let l=a.length;a.forEach((f,b)=>{c(f,d.concat(b===l-1?L.isLastChild:L.hasNextSibling));F.$isElementNode(f)&&R(f,c,d.concat(b===l-1?L.ancestorIsLastChild:L.ancestorHasNextSibling))})}
-function S(a){return Object.entries(J).reduce((c,[d,l])=>c.replace(new RegExp(d,"g"),String(l)),a)}
-let W=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],X=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],Y=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
-function T(a){let c=X.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function U(a){let c=Y.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function P(a){let c=W.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
-function V({indent:a,isSelected:c,node:d,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!F.$isTextNode(d)||!F.$isRangeSelection(f)||!c||F.$isElementNode(d))return"";c=f.anchor;var e=f.focus;if(""===d.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===e.offset)return"";e=f.anchor;let n=f.focus,y=d.getTextContent(),t=y.length;c=f=-1;if("text"===e.type&&"text"===n.type){let m=e.getNode(),w=n.getNode();m===w&&d===m&&e.offset!==n.offset?[f,c]=e.offset<n.offset?[e.offset,n.offset]:[n.offset,
-e.offset]:d===m?[f,c]=m.isBefore(w)?[e.offset,t]:[0,e.offset]:d===w?[f,c]=w.isBefore(m)?[n.offset,t]:[0,n.offset]:[f,c]=[0,t]}d=(y.slice(0,f).match(K)||[]).length;e=(y.slice(f,c).match(K)||[]).length;let [q,z]=[f+d,c+d+e];if(q===z)return"";d=a[a.length-1]===L.hasNextSibling?L.ancestorHasNextSibling:L.ancestorIsLastChild;a=[...a.slice(0,a.length-1),d];d=Array(q+1).fill(" ");f=Array(z-q).fill(L.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[L.selectedLine,a.join(" "),[...l,...d,...f].join("")].join(" ")+
+'use strict';var k=require("@lexical/link"),t=require("@lexical/mark"),u=require("@lexical/utils"),F=require("lexical"),J=require("react");let K=Object.freeze({"\t":"\\t","\n":"\\n"}),L=new RegExp(Object.keys(K).join("|"),"g"),M=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
+function N(a){let [c,d]=J.useState([]);J.useEffect(()=>{let l=new Set;for(let [g]of a._commands)l.add(a.registerCommand(g,b=>{d(e=>{e=[...e];e.push({payload:b,type:g.type?g.type:"UNKNOWN"});10<e.length&&e.shift();return e});return!1},F.COMMAND_PRIORITY_HIGH));return()=>l.forEach(g=>g())},[a]);return J.useMemo(()=>c,[c])}
+function Q(a){let c="";var d=R(a);c+=`: range ${""!==d?`{ ${d} }`:""} ${""!==a.style?`{ style: ${a.style} } `:""}`;d=a.anchor;a=a.focus;let l=d.offset,g=a.offset;c+=`\n  \u251c anchor { key: ${d.key}, offset: ${null===l?"null":l}, type: ${d.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===g?"null":g}, type: ${a.type} }`}
+function S(a,c,d,l,g){let b=" root\n";a=a.read(()=>{const e=F.$getSelection();T(F.$getRoot(),(h,y)=>{const v=`(${h.getKey()})`,r=h.getType()||"",z=h.isSelected(),n=t.$isMarkNode(h)?` id: [ ${h.getIDs().join(", ")} ] `:"";var x=b,D=z?M.selectedLine:" ",A=y.join(" ");if(F.$isTextNode(h)){var m=h.getTextContent();var p=0===m.length?"(empty)":`"${U(m)}"`;m=[R(h),V(h),W(h)].filter(Boolean).join(", ");m=[p,0!==m.length?`{ ${m} }`:null].filter(Boolean).join(" ").trim()}else if(k.$isLinkNode(h)){m=h.getURL();
+m=0===m.length?"(empty)":`"${U(m)}"`;p=h.getTarget();null!=p&&(p="target: "+p);var G=Boolean;let q=h.getRel();null!=q&&(q="rel: "+q);p=[p,q].filter(G).join(", ");m=[m,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else m="";b=x+`${D} ${A} ${v} ${r} ${n} ${m}\n`;b+=X({indent:y,isSelected:z,node:h,nodeKeyDisplay:v,selection:e,typeDisplay:r})});return null===e?": null":F.$isRangeSelection(e)?Q(e):F.DEPRECATED_$isGridSelection(e)?`: grid\n  \u2514 { grid: ${e.gridKey}, anchorCell: ${e.anchor.key}, focusCell: ${e.focus.key} }`:
+`: node\n  \u2514 [${Array.from(e._nodes).join(", ")}]`});b+="\n selection"+a;b+="\n\n commands:";if(d.length)for(let {type:e,payload:h}of d)b+=`\n  \u2514 { type: ${e}, payload: ${h instanceof Event?h.constructor.name:h} }`;else b+="\n  \u2514 None dispatched.";b+="\n\n editor:";b+=`\n  \u2514 namespace ${c.namespace}`;null!==l&&(b+=`\n  \u2514 compositionKey ${l}`);return b+=`\n  \u2514 editable ${String(g)}`}
+function T(a,c,d=[]){a=a.getChildren();let l=a.length;a.forEach((g,b)=>{c(g,d.concat(b===l-1?M.isLastChild:M.hasNextSibling));F.$isElementNode(g)&&T(g,c,d.concat(b===l-1?M.ancestorIsLastChild:M.ancestorHasNextSibling))})}function U(a){return Object.entries(K).reduce((c,[d,l])=>c.replace(new RegExp(d,"g"),String(l)),a)}
+let Y=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],Z=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],aa=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
+function V(a){let c=Z.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function W(a){let c=aa.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function R(a){let c=Y.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
+function X({indent:a,isSelected:c,node:d,nodeKeyDisplay:l,selection:g,typeDisplay:b}){if(!F.$isTextNode(d)||!F.$isRangeSelection(g)||!c||F.$isElementNode(d))return"";c=g.anchor;var e=g.focus;if(""===d.getTextContent()||c.getNode()===g.focus.getNode()&&c.offset===e.offset)return"";e=g.anchor;let h=g.focus,y=d.getTextContent(),v=y.length;c=g=-1;if("text"===e.type&&"text"===h.type){let n=e.getNode(),x=h.getNode();n===x&&d===n&&e.offset!==h.offset?[g,c]=e.offset<h.offset?[e.offset,h.offset]:[h.offset,
+e.offset]:d===n?[g,c]=n.isBefore(x)?[e.offset,v]:[0,e.offset]:d===x?[g,c]=x.isBefore(n)?[h.offset,v]:[0,h.offset]:[g,c]=[0,v]}d=(y.slice(0,g).match(L)||[]).length;e=(y.slice(g,c).match(L)||[]).length;let [r,z]=[g+d,c+d+e];if(r===z)return"";d=a[a.length-1]===M.hasNextSibling?M.ancestorHasNextSibling:M.ancestorIsLastChild;a=[...a.slice(0,a.length-1),d];d=Array(r+1).fill(" ");g=Array(z-r).fill(M.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[M.selectedLine,a.join(" "),[...l,...d,...g].join("")].join(" ")+
 "\n"}
-exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:d,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [e,n]=I.useState([]),[y,t]=I.useState(""),[q,z]=I.useState(!1),m=I.useRef(0),w=I.useRef(null),D=I.useRef(null),[k,p]=I.useState(!1),[A,B]=I.useState(!1),[x,Z]=I.useState(!1),G=I.useRef(null),H=I.useCallback(g=>{const u=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);t(u);q||n(E=>[...E,[Date.now(),g]])},[b,q]);
-I.useEffect(()=>{let g=b.getEditorState();!x&&1E3<g._nodeMap.size&&t(Q(g,b._config,b._compositionKey,b._editable))},[b,x]);I.useEffect(()=>v.mergeRegister(b.registerUpdateListener(({editorState:g})=>{if(!x&&1E3<g._nodeMap.size&&(G.current=g,B(!0),!x))return;H(g)}),b.registerEditableListener(()=>{let g=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);t(g)})),[b,A,H,x]);let C=e.length;I.useEffect(()=>{if(k){let g,u=()=>{const E=m.current;E===C-1?p(!1):g=setTimeout(()=>{m.current++;const N=
-m.current,O=D.current;null!==O&&(O.value=String(N));b.setEditorState(e[N][1]);u()},e[E+1][0]-e[E][0])};u();return()=>{clearTimeout(g)}}},[e,k,b,C]);I.useEffect(()=>{let g=w.current;if(null!==g)return g.__lexicalEditor=b,()=>{g.__lexicalEditor=null}},[b]);return I.createElement("div",{className:l},!x&&A?I.createElement("div",{style:{padding:20}},I.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),I.createElement("button",{onClick:()=>
-{Z(!0);let g=G.current;null!==g&&(G.current=null,H(g))},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,!q&&(x||!A)&&2<C&&I.createElement("button",{onClick:()=>{let g=b.getRootElement();null!==g&&(g.contentEditable="false",m.current=C-1,z(!0))},className:a,type:"button"},"Time Travel"),(x||!A)&&I.createElement("pre",{ref:w},y),q&&(x||!A)&&I.createElement("div",{className:f},I.createElement("button",{className:d,onClick:()=>
-{m.current===C-1&&(m.current=1);p(!k)},type:"button"},k?"Pause":"Play"),I.createElement("input",{className:c,ref:D,onChange:g=>{g=Number(g.target.value);let u=e[g];u&&(m.current=g,b.setEditorState(u[1]))},type:"range",min:"1",max:C-1}),I.createElement("button",{className:d,onClick:()=>{var g=b.getRootElement();if(null!==g){g.contentEditable="true";g=e.length-1;b.setEditorState(e[g][1]);let u=D.current;null!==u&&(u.value=String(g));z(!1);p(!1)}},type:"button"},"Exit")))}
+exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:d,viewClassName:l,timeTravelPanelClassName:g,editor:b}){let [e,h]=J.useState([]),[y,v]=J.useState(""),[r,z]=J.useState(!1),n=J.useRef(0),x=J.useRef(null),D=J.useRef(null),[A,m]=J.useState(!1),[p,G]=J.useState(!1),[q,ba]=J.useState(!1),H=J.useRef(null),B=N(b),I=J.useCallback(f=>{const w=S(b.getEditorState(),b._config,B,b._compositionKey,b._editable);v(w);r||h(E=>[...E,[Date.now(),f]])},
+[B,b,r]);J.useEffect(()=>{let f=b.getEditorState();!q&&1E3<f._nodeMap.size&&v(S(f,b._config,B,b._compositionKey,b._editable))},[B,b,q]);J.useEffect(()=>u.mergeRegister(b.registerUpdateListener(({editorState:f})=>{if(!q&&1E3<f._nodeMap.size&&(H.current=f,G(!0),!q))return;I(f)}),b.registerEditableListener(()=>{let f=S(b.getEditorState(),b._config,B,b._compositionKey,b._editable);v(f)})),[B,b,p,I,q]);let C=e.length;J.useEffect(()=>{if(A){let f,w=()=>{const E=n.current;E===C-1?m(!1):f=setTimeout(()=>
+{n.current++;const O=n.current,P=D.current;null!==P&&(P.value=String(O));b.setEditorState(e[O][1]);w()},e[E+1][0]-e[E][0])};w();return()=>{clearTimeout(f)}}},[e,A,b,C]);J.useEffect(()=>{let f=x.current;if(null!==f)return f.__lexicalEditor=b,()=>{f.__lexicalEditor=null}},[b]);return J.createElement("div",{className:l},!q&&p?J.createElement("div",{style:{padding:20}},J.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),J.createElement("button",
+{onClick:()=>{ba(!0);let f=H.current;null!==f&&(H.current=null,I(f))},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,!r&&(q||!p)&&2<C&&J.createElement("button",{onClick:()=>{let f=b.getRootElement();null!==f&&(f.contentEditable="false",n.current=C-1,z(!0))},className:a,type:"button"},"Time Travel"),(q||!p)&&J.createElement("pre",{ref:x},y),r&&(q||!p)&&J.createElement("div",{className:g},J.createElement("button",{className:d,
+onClick:()=>{n.current===C-1&&(n.current=1);m(!A)},type:"button"},A?"Pause":"Play"),J.createElement("input",{className:c,ref:D,onChange:f=>{f=Number(f.target.value);let w=e[f];w&&(n.current=f,b.setEditorState(w[1]))},type:"range",min:"1",max:C-1}),J.createElement("button",{className:d,onClick:()=>{var f=b.getRootElement();if(null!==f){f.contentEditable="true";f=e.length-1;b.setEditorState(e[f][1]);let w=D.current;null!==w&&(w.value=String(f));z(!1);m(!1)}},type:"button"},"Exit")))}