@lexical/react 0.7.8 → 0.8.0

package/LexicalTreeView.dev.js

@@ -53,14 +53,12 @@ function TreeView({
   const generateTree = React.useCallback(editorState => {
     const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
     setContent(treeText);
-
     if (!timeTravelEnabled) {
       setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
     }
   }, [editor, timeTravelEnabled]);
   React.useEffect(() => {
     const editorState = editor.getEditorState();
-
     if (!showLimited && editorState._nodeMap.size > 1000) {
       setContent(generateContent(editorState, editor._config, editor._compositionKey, editor._editable));
     }
@@ -72,12 +70,10 @@ 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);
@@ -88,15 +84,12 @@ function TreeView({
   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;
@@ -104,16 +97,13 @@ 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);
@@ -122,7 +112,6 @@ function TreeView({
   }, [timeStampedEditorStates, isPlaying, editor, totalEditorStates]);
   React.useEffect(() => {
     const element = treeElementRef.current;
-
     if (element !== null) {
       // @ts-ignore Internal field
       element.__lexicalEditor = editor;
@@ -146,7 +135,6 @@ function TreeView({
     onClick: () => {
       setShowLimited(true);
       const editorState = lastEditorStateRef.current;
-
       if (editorState !== null) {
         lastEditorStateRef.current = null;
         generateTree(editorState);
@@ -162,7 +150,6 @@ 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;
@@ -181,7 +168,6 @@ function TreeView({
       if (playingIndexRef.current === totalEditorStates - 1) {
         playingIndexRef.current = 1;
       }
-
       setIsPlaying(!isPlaying);
     },
     type: "button"
@@ -191,7 +177,6 @@ function TreeView({
     onChange: event => {
       const editorStateIndex = Number(event.target.value);
       const timeStampedEditorState = timeStampedEditorStates[editorStateIndex];
-
       if (timeStampedEditorState) {
         playingIndexRef.current = editorStateIndex;
         editor.setEditorState(timeStampedEditorState[1]);
@@ -204,18 +189,15 @@ 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);
       }
@@ -223,11 +205,10 @@ function TreeView({
     type: "button"
   }, "Exit")));
 }
-
 function printRangeSelection(selection) {
   let res = '';
   const formatText = printFormatProperties(selection);
-  res += `: range ${formatText !== '' ? `{ ${formatText} }` : ''}`;
+  res += `: range ${formatText !== '' ? `{ ${formatText} }` : ''} ${selection.style !== '' ? `{ style: ${selection.style} } ` : ''}`;
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorOffset = anchor.offset;
@@ -236,15 +217,12 @@ function printRangeSelection(selection) {
   res += `\n  └ focus { key: ${focus.key}, offset: ${focusOffset === null ? 'null' : focusOffset}, type: ${focus.type} }`;
   return res;
 }
-
 function printObjectSelection(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) {
   let res = ' root\n';
   const selectionString = editorState.read(() => {
@@ -270,32 +248,27 @@ function generateContent(editorState, editorConfig, compositionKey, editable) {
   res += '\n selection' + selectionString;
   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();
@@ -311,69 +284,52 @@ 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,
@@ -385,22 +341,18 @@ 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(' ');
@@ -410,19 +362,18 @@ 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; // Only one node is being selected.
+  let end = -1;
 
+  // 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) {
@@ -433,9 +384,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

@@ -5,18 +5,18 @@
  * 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="",e=P(a),l=a.anchor;a=a.focus;let f=l.offset,b=a.offset;c=c+`: range ${""!==e?`{ ${e} }`:""}`+`\n  \u251c anchor { key: ${l.key}, offset: ${null===f?"null":f}, type: ${l.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===b?"null":b}, type: ${a.type} }`}
-function Q(a,c,e,l){let f=" root\n";a=a.read(()=>{const b=F.$getSelection();R(F.$getRoot(),(d,n)=>{const y=`(${d.getKey()})`,t=d.getType()||"",q=d.isSelected(),z=r.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var m=f,w=q?L.selectedLine:" ",D=n.join(" ");if(F.$isTextNode(d)){var k=d.getTextContent();var p=0===k.length?"(empty)":`"${S(k)}"`;k=[P(d),T(d),U(d)].filter(Boolean).join(", ");k=[p,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else if(h.$isLinkNode(d)){k=d.getURL();
-k=0===k.length?"(empty)":`"${S(k)}"`;p=d.getTarget();null!=p&&(p="target: "+p);var A=Boolean;let B=d.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:d,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!==e&&(f+=`\n  \u2514 compositionKey ${e}`);return f+=`\n  \u2514 editable ${String(l)}`}function R(a,c,e=[]){a=a.getChildren();let l=a.length;a.forEach((f,b)=>{c(f,e.concat(b===l-1?L.isLastChild:L.hasNextSibling));F.$isElementNode(f)&&R(f,c,e.concat(b===l-1?L.ancestorIsLastChild:L.ancestorHasNextSibling))})}
-function S(a){return Object.entries(J).reduce((c,[e,l])=>c.replace(new RegExp(e,"g"),String(l)),a)}
+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(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function U(a){let c=Y.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function P(a){let c=W.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
-function V({indent:a,isSelected:c,node:e,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!F.$isTextNode(e)||!F.$isRangeSelection(f)||!c||F.$isElementNode(e))return"";c=f.anchor;var d=f.focus;if(""===e.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===d.offset)return"";d=f.anchor;let n=f.focus,y=e.getTextContent(),t=y.length;c=f=-1;if("text"===d.type&&"text"===n.type){let m=d.getNode(),w=n.getNode();m===w&&e===m&&d.offset!==n.offset?[f,c]=d.offset<n.offset?[d.offset,n.offset]:[n.offset,
-d.offset]:e===m?[f,c]=m.isBefore(w)?[d.offset,t]:[0,d.offset]:e===w?[f,c]=w.isBefore(m)?[n.offset,t]:[0,n.offset]:[f,c]=[0,t]}e=(y.slice(0,f).match(K)||[]).length;d=(y.slice(f,c).match(K)||[]).length;let [q,z]=[f+e,c+e+d];if(q===z)return"";e=a[a.length-1]===L.hasNextSibling?L.ancestorHasNextSibling:L.ancestorIsLastChild;a=[...a.slice(0,a.length-1),e];e=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,...e,...f].join("")].join(" ")+
+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(" ")+
 "\n"}
-exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [d,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=d.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(d[N][1]);u()},d[E+1][0]-d[E][0])};u();return()=>{clearTimeout(g)}}},[d,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:e,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=d[g];u&&(m.current=g,b.setEditorState(u[1]))},type:"range",min:"1",max:C-1}),I.createElement("button",{className:e,onClick:()=>{var g=b.getRootElement();if(null!==g){g.contentEditable="true";g=d.length-1;b.setEditorState(d[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: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")))}