@lexical/react 0.7.8 → 0.7.9

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,7 +205,6 @@ function TreeView({
     type: "button"
   }, "Exit")));
 }
-
 function printRangeSelection(selection) {
   let res = '';
   const formatText = printFormatProperties(selection);
@@ -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];