@lexical/react 0.12.2 → 0.12.4

package/LexicalTreeView.dev.js

@@ -57,14 +57,12 @@ function TreeView({
   const generateTree = React.useCallback(editorState => {
     const treeText = generateContent(editor, commandsLog, showExportDOM);
     setContent(treeText);
-
     if (!timeTravelEnabled) {
       setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
     }
   }, [commandsLog, editor, timeTravelEnabled, showExportDOM]);
   React.useEffect(() => {
     const editorState = editor.getEditorState();
-
     if (!showLimited && editorState._nodeMap.size < 1000) {
       setContent(generateContent(editor, commandsLog, showExportDOM));
     }
@@ -76,12 +74,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, commandsLog, showExportDOM);
@@ -92,15 +88,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;
@@ -108,16 +101,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);
@@ -126,7 +116,6 @@ function TreeView({
   }, [timeStampedEditorStates, isPlaying, editor, totalEditorStates]);
   React.useEffect(() => {
     const element = treeElementRef.current;
-
     if (element !== null) {
       // @ts-ignore Internal field
       element.__lexicalEditor = editor;
@@ -150,7 +139,6 @@ function TreeView({
     onClick: () => {
       setShowLimited(true);
       const editorState = lastEditorStateRef.current;
-
       if (editorState !== null) {
         lastEditorStateRef.current = null;
         generateTree(editorState);
@@ -170,7 +158,6 @@ function TreeView({
   }, showExportDOM ? 'Tree' : 'Export DOM') : 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;
@@ -189,7 +176,6 @@ function TreeView({
       if (playingIndexRef.current === totalEditorStates - 1) {
         playingIndexRef.current = 1;
       }
-
       setIsPlaying(!isPlaying);
     },
     type: "button"
@@ -199,7 +185,6 @@ function TreeView({
     onChange: event => {
       const editorStateIndex = Number(event.target.value);
       const timeStampedEditorState = timeStampedEditorStates[editorStateIndex];
-
       if (timeStampedEditorState) {
         playingIndexRef.current = editorStateIndex;
         editor.setEditorState(timeStampedEditorState[1]);
@@ -212,18 +197,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);
       }
@@ -231,12 +213,10 @@ 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 => {
@@ -245,22 +225,18 @@ function useLexicalCommandsLog(editor) {
             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);
@@ -273,21 +249,17 @@ function printRangeSelection(selection) {
   res += `\n  └ focus { key: ${focus.key}, offset: ${focusOffset === null ? 'null' : focusOffset}, type: ${focus.type} }`;
   return res;
 }
-
 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(editor, commandsLog, exportDOM) {
   const editorState = editor.getEditorState();
   const editorConfig = editor._config;
   const compositionKey = editor._compositionKey;
   const editable = editor._editable;
-
   if (exportDOM) {
     let htmlString = '';
     editorState.read(() => {
@@ -295,7 +267,6 @@ function generateContent(editor, commandsLog, exportDOM) {
     });
     return htmlString;
   }
-
   let res = ' root\n';
   const selectionString = editorState.read(() => {
     const selection = lexical.$getSelection();
@@ -319,7 +290,6 @@ function generateContent(editor, commandsLog, exportDOM) {
   });
   res += '\n selection' + selectionString;
   res += '\n\n commands:';
-
   if (commandsLog.length) {
     for (const {
       type,
@@ -330,35 +300,29 @@ function generateContent(editor, commandsLog, exportDOM) {
   } 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();
@@ -374,79 +338,60 @@ 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), printTitleProperties(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 printTitleProperties(node) {
-  let str = node.getTitle(); // TODO Fix nullish on LinkNode
-
+  let str = node.getTitle();
+  // TODO Fix nullish on LinkNode
   if (str != null) {
     str = 'title: ' + str;
   }
-
   return str;
 }
-
 function printSelectedCharsLine({
   indent,
   isSelected,
@@ -458,22 +403,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(' ');
@@ -483,44 +424,38 @@ function printSelectedCharsLine({
   const nodePrintSpaces = Array(nodeKeyDisplay.length + paddingLength).fill(' ');
   return [SYMBOLS.selectedLine, indentionChars.join(' '), [...nodePrintSpaces, ...unselectedChars, ...selectedChars].join('')].join(' ') + '\n';
 }
-
 function printPrettyHTML(str) {
   const div = document.createElement('div');
   div.innerHTML = str.trim();
   return prettifyHTML(div, 0).innerHTML;
 }
-
 function prettifyHTML(node, level) {
   const indentBefore = new Array(level++ + 1).join('  ');
   const indentAfter = new Array(level - 1).join('  ');
   let textNode;
-
   for (let i = 0; i < node.children.length; i++) {
     textNode = document.createTextNode('\n' + indentBefore);
     node.insertBefore(textNode, node.children[i]);
     prettifyHTML(node.children[i], level);
-
     if (node.lastElementChild === node.children[i]) {
       textNode = document.createTextNode('\n' + indentAfter);
       node.appendChild(textNode);
     }
   }
-
   return node;
 }
-
 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) {
@@ -531,9 +466,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/LexicalTypeaheadMenuPlugin.d.ts

@@ -7,11 +7,11 @@
  */
 /// <reference types="react" />
 import type { MenuRenderFn, MenuResolution, MenuTextMatch, TriggerFn } from './shared/LexicalMenu';
-import { LexicalCommand, TextNode } from 'lexical';
+import { CommandListenerPriority, LexicalCommand, TextNode } from 'lexical';
 import { MenuOption } from './shared/LexicalMenu';
 export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
 export declare function getScrollParent(element: HTMLElement, includeHidden: boolean): HTMLElement | HTMLBodyElement;
-export declare function useDynamicPositioning(resolution: MenuResolution | null, targetElement: HTMLElement | null, onReposition: () => void, onVisibilityChange?: (isInView: boolean) => void): void;
+export { useDynamicPositioning } from './shared/LexicalMenu';
 export declare const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
     index: number;
     option: MenuOption;
@@ -29,6 +29,7 @@ export type TypeaheadMenuPluginProps<TOption extends MenuOption> = {
     onOpen?: (resolution: MenuResolution) => void;
     onClose?: () => void;
     anchorClassName?: string;
+    commandPriority?: CommandListenerPriority;
 };
-export declare function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({ options, onQueryChange, onSelectOption, onOpen, onClose, menuRenderFn, triggerFn, anchorClassName, }: TypeaheadMenuPluginProps<TOption>): JSX.Element | null;
+export declare function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({ options, onQueryChange, onSelectOption, onOpen, onClose, menuRenderFn, triggerFn, anchorClassName, commandPriority, }: TypeaheadMenuPluginProps<TOption>): JSX.Element | null;
 export { MenuOption, MenuRenderFn, MenuResolution, MenuTextMatch, TriggerFn };