@lexical/react 0.12.2 → 0.12.3

package/LexicalRichTextPlugin.dev.js

@@ -22,6 +22,7 @@ var richText = require('@lexical/rich-text');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
 /**
@@ -41,12 +42,10 @@ var useLayoutEffect = useLayoutEffectImpl;
  * LICENSE file in the root directory of this source tree.
  *
  */
-
 function canShowPlaceholderFromCurrentEditorState(editor) {
   const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing()));
   return currentCanShowPlaceholder;
 }
-
 function useCanShowPlaceholder(editor) {
   const [canShowPlaceholder, setCanShowPlaceholder] = React.useState(() => canShowPlaceholderFromCurrentEditorState(editor));
   useLayoutEffect(() => {
@@ -54,7 +53,6 @@ function useCanShowPlaceholder(editor) {
       const currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
       setCanShowPlaceholder(currentCanShowPlaceholder);
     }
-
     resetCanShowPlaceholder();
     return utils.mergeRegister(editor.registerUpdateListener(() => {
       resetCanShowPlaceholder();
@@ -73,8 +71,9 @@ function useCanShowPlaceholder(editor) {
  *
  */
 function useDecorators(editor, ErrorBoundary) {
-  const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
+  const [decorators, setDecorators] = React.useState(() => editor.getDecorators());
 
+  // Subscribe to changes
   useLayoutEffect(() => {
     return editor.registerDecoratorListener(nextDecorators => {
       reactDom.flushSync(() => {
@@ -87,12 +86,12 @@ function useDecorators(editor, ErrorBoundary) {
     // nothing will be rendered on initial pass. We can get around that by
     // ensuring that we set the value.
     setDecorators(editor.getDecorators());
-  }, [editor]); // Return decorators defined as React Portals
+  }, [editor]);
 
+  // Return decorators defined as React Portals
   return React.useMemo(() => {
     const decoratedPortals = [];
     const decoratorKeys = Object.keys(decorators);
-
     for (let i = 0; i < decoratorKeys.length; i++) {
       const nodeKey = decoratorKeys[i];
       const reactDecorator = /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -101,12 +100,10 @@ function useDecorators(editor, ErrorBoundary) {
         fallback: null
       }, decorators[nodeKey]));
       const element = editor.getElementByKey(nodeKey);
-
       if (element !== null) {
         decoratedPortals.push( /*#__PURE__*/reactDom.createPortal(reactDecorator, element, nodeKey));
       }
     }
-
     return decoratedPortals;
   }, [ErrorBoundary, decorators, editor]);
 }
@@ -120,7 +117,9 @@ function useDecorators(editor, ErrorBoundary) {
  */
 function useRichTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(richText.registerRichText(editor), dragon.registerDragonSupport(editor)); // We only do this for init
+    return utils.mergeRegister(richText.registerRichText(editor), dragon.registerDragonSupport(editor));
+
+    // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 }
@@ -144,18 +143,15 @@ function RichTextPlugin({
     content: placeholder
   }), decorators);
 }
-
 function Placeholder({
   content
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useCanShowPlaceholder(editor);
   const editable = useLexicalEditable();
-
   if (!showPlaceholder) {
     return null;
   }
-
   if (typeof content === 'function') {
     return content(editable);
   } else {

package/LexicalTabIndentationPlugin.dev.js

@@ -18,7 +18,6 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
-
 function indentOverTab(selection) {
   // const handled = new Set();
   const nodes = selection.getNodes();
@@ -26,56 +25,48 @@ function indentOverTab(selection) {
     if (lexical.$isBlockElementNode(node) && node.canIndent()) {
       return node;
     }
-
     return null;
-  }); // 1. If selection spans across canIndent block nodes: indent
-
+  });
+  // 1. If selection spans across canIndent block nodes: indent
   if (canIndentBlockNodes.length > 0) {
     return true;
-  } // 2. If first (anchor/focus) is at block start: indent
-
-
+  }
+  // 2. If first (anchor/focus) is at block start: indent
   const anchor = selection.anchor;
   const focus = selection.focus;
   const first = focus.isBefore(anchor) ? focus : anchor;
   const firstNode = first.getNode();
   const firstBlock = utils.$getNearestBlockElementAncestorOrThrow(firstNode);
-
   if (firstBlock.canIndent()) {
     const firstBlockKey = firstBlock.getKey();
     let selectionAtStart = lexical.$createRangeSelection();
     selectionAtStart.anchor.set(firstBlockKey, 0, 'element');
     selectionAtStart.focus.set(firstBlockKey, 0, 'element');
     selectionAtStart = lexical.$normalizeSelection__EXPERIMENTAL(selectionAtStart);
-
     if (selectionAtStart.anchor.is(first)) {
       return true;
     }
-  } // 3. Else: tab
-
-
+  }
+  // 3. Else: tab
   return false;
 }
-
 function registerTabIndentation(editor) {
   return editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
     const selection = lexical.$getSelection();
-
     if (!lexical.$isRangeSelection(selection)) {
       return false;
     }
-
     event.preventDefault();
     const command = indentOverTab(selection) ? event.shiftKey ? lexical.OUTDENT_CONTENT_COMMAND : lexical.INDENT_CONTENT_COMMAND : lexical.INSERT_TAB_COMMAND;
     return editor.dispatchCommand(command, undefined);
   }, lexical.COMMAND_PRIORITY_EDITOR);
 }
+
 /**
  * This plugin adds the ability to indent content using the tab key. Generally, we don't
  * recommend using this plugin as it could negatively affect acessibility for keyboard
  * users, causing focus to become trapped within the editor.
  */
-
 function TabIndentationPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   react.useEffect(() => {

package/LexicalTableOfContents.dev.js

@@ -18,50 +18,39 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
-
 function toEntry(heading) {
   return [heading.getKey(), heading.getTextContent(), heading.getTag()];
 }
-
 function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents) {
   if (newHeading === null) {
     return currentTableOfContents;
   }
-
   const newEntry = toEntry(newHeading);
   let newTableOfContents = [];
-
   if (prevHeading === null) {
     newTableOfContents = [newEntry, ...currentTableOfContents];
   } else {
     for (let i = 0; i < currentTableOfContents.length; i++) {
       const key = currentTableOfContents[i][0];
       newTableOfContents.push(currentTableOfContents[i]);
-
       if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
         newTableOfContents.push(newEntry);
       }
     }
   }
-
   return newTableOfContents;
 }
-
 function $deleteHeadingFromTableOfContents(key, currentTableOfContents) {
   const newTableOfContents = [];
-
   for (const heading of currentTableOfContents) {
     if (heading[0] !== key) {
       newTableOfContents.push(heading);
     }
   }
-
   return newTableOfContents;
 }
-
 function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
   const newTableOfContents = [];
-
   for (const oldHeading of currentTableOfContents) {
     if (oldHeading[0] === heading.getKey()) {
       newTableOfContents.push(toEntry(heading));
@@ -69,38 +58,30 @@ function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
       newTableOfContents.push(oldHeading);
     }
   }
-
   return newTableOfContents;
 }
+
 /**
  * Returns the updated table of contents, placing the given `heading` before the given `prevHeading`. If `prevHeading`
  * is undefined, `heading` is placed at the start of table of contents
  */
-
-
 function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
   const newTableOfContents = [];
   const newEntry = toEntry(heading);
-
   if (!prevHeading) {
     newTableOfContents.push(newEntry);
   }
-
   for (const oldHeading of currentTableOfContents) {
     if (oldHeading[0] === heading.getKey()) {
       continue;
     }
-
     newTableOfContents.push(oldHeading);
-
     if (prevHeading && oldHeading[0] === prevHeading.getKey()) {
       newTableOfContents.push(newEntry);
     }
   }
-
   return newTableOfContents;
 }
-
 function LexicalTableOfContentsPlugin({
   children
 }) {
@@ -112,61 +93,52 @@ function LexicalTableOfContentsPlugin({
     editor.getEditorState().read(() => {
       const root = lexical.$getRoot();
       const rootChildren = root.getChildren();
-
       for (const child of rootChildren) {
         if (richText.$isHeadingNode(child)) {
           currentTableOfContents.push([child.getKey(), child.getTextContent(), child.getTag()]);
         }
       }
-
       setTableOfContents(currentTableOfContents);
-    }); // Listen to updates to heading mutations and update state
+    });
 
+    // Listen to updates to heading mutations and update state
     const removeHeaderMutationListener = editor.registerMutationListener(richText.HeadingNode, mutatedNodes => {
       editor.getEditorState().read(() => {
         for (const [nodeKey, mutation] of mutatedNodes) {
           if (mutation === 'created') {
             const newHeading = lexical.$getNodeByKey(nodeKey);
-
             if (newHeading !== null) {
               let prevHeading = newHeading.getPreviousSibling();
-
               while (prevHeading !== null && !richText.$isHeadingNode(prevHeading)) {
                 prevHeading = prevHeading.getPreviousSibling();
               }
-
               currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
             }
           } else if (mutation === 'destroyed') {
             currentTableOfContents = $deleteHeadingFromTableOfContents(nodeKey, currentTableOfContents);
           } else if (mutation === 'updated') {
             const newHeading = lexical.$getNodeByKey(nodeKey);
-
             if (newHeading !== null) {
               let prevHeading = newHeading.getPreviousSibling();
-
               while (prevHeading !== null && !richText.$isHeadingNode(prevHeading)) {
                 prevHeading = prevHeading.getPreviousSibling();
               }
-
               currentTableOfContents = $updateHeadingPosition(prevHeading, newHeading, currentTableOfContents);
             }
           }
         }
-
         setTableOfContents(currentTableOfContents);
       });
-    }); // Listen to text node mutation updates
+    });
 
+    // Listen to text node mutation updates
     const removeTextNodeMutationListener = editor.registerMutationListener(lexical.TextNode, mutatedNodes => {
       editor.getEditorState().read(() => {
         for (const [nodeKey, mutation] of mutatedNodes) {
           if (mutation === 'updated') {
             const currNode = lexical.$getNodeByKey(nodeKey);
-
             if (currNode !== null) {
               const parentNode = currNode.getParentOrThrow();
-
               if (richText.$isHeadingNode(parentNode)) {
                 currentTableOfContents = $updateHeadingInTableOfContents(parentNode, currentTableOfContents);
                 setTableOfContents(currentTableOfContents);

package/LexicalTablePlugin.dev.js

@@ -31,7 +31,6 @@ function TablePlugin({
         throw Error(`TablePlugin: TableNode, TableCellNode or TableRowNode not registered on editor`);
       }
     }
-
     return editor.registerCommand(table.INSERT_TABLE_COMMAND, ({
       columns,
       rows,
@@ -40,32 +39,27 @@ function TablePlugin({
       const tableNode = table.$createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
       utils.$insertNodeToNearestRoot(tableNode);
       const firstDescendant = tableNode.getFirstDescendant();
-
       if (lexical.$isTextNode(firstDescendant)) {
         firstDescendant.select();
       }
-
       return true;
     }, lexical.COMMAND_PRIORITY_EDITOR);
   }, [editor]);
   react.useEffect(() => {
     const tableSelections = new Map();
-
     const initializeTableNode = tableNode => {
       const nodeKey = tableNode.getKey();
       const tableElement = editor.getElementByKey(nodeKey);
-
       if (tableElement && !tableSelections.has(nodeKey)) {
         const tableSelection = table.applyTableHandlers(tableNode, tableElement, editor, hasTabHandler);
         tableSelections.set(nodeKey, tableSelection);
       }
-    }; // Plugins might be loaded _after_ initial content is set, hence existing table nodes
-    // won't be initialized from mutation[create] listener. Instead doing it here,
-
+    };
 
+    // Plugins might be loaded _after_ initial content is set, hence existing table nodes
+    // won't be initialized from mutation[create] listener. Instead doing it here,
     editor.getEditorState().read(() => {
       const tableNodes = lexical.$nodesOfType(table.TableNode);
-
       for (const tableNode of tableNodes) {
         if (table.$isTableNode(tableNode)) {
           initializeTableNode(tableNode);
@@ -77,14 +71,12 @@ function TablePlugin({
         if (mutation === 'created') {
           editor.getEditorState().read(() => {
             const tableNode = lexical.$getNodeByKey(nodeKey);
-
             if (table.$isTableNode(tableNode)) {
               initializeTableNode(tableNode);
             }
           });
         } else if (mutation === 'destroyed') {
           const tableSelection = tableSelections.get(nodeKey);
-
           if (tableSelection !== undefined) {
             tableSelection.removeListeners();
             tableSelections.delete(nodeKey);
@@ -93,58 +85,50 @@ function TablePlugin({
       }
     });
     return () => {
-      unregisterMutationListener(); // Hook might be called multiple times so cleaning up tables listeners as well,
+      unregisterMutationListener();
+      // Hook might be called multiple times so cleaning up tables listeners as well,
       // as it'll be reinitialized during recurring call
-
       for (const [, tableSelection] of tableSelections) {
         tableSelection.removeListeners();
       }
     };
-  }, [editor, hasTabHandler]); // Unmerge cells when the feature isn't enabled
+  }, [editor, hasTabHandler]);
 
+  // Unmerge cells when the feature isn't enabled
   react.useEffect(() => {
     if (hasCellMerge) {
       return;
     }
-
     return editor.registerNodeTransform(table.TableCellNode, node => {
       if (node.getColSpan() > 1 || node.getRowSpan() > 1) {
         // When we have rowSpan we have to map the entire Table to understand where the new Cells
         // fit best; let's analyze all Cells at once to save us from further transform iterations
         const [,, gridNode] = lexical.DEPRECATED_$getNodeTriplet(node);
-        const [gridMap] = lexical.DEPRECATED_$computeGridMap(gridNode, node, node); // TODO this function expects Tables to be normalized. Look into this once it exists
-
+        const [gridMap] = lexical.DEPRECATED_$computeGridMap(gridNode, node, node);
+        // TODO this function expects Tables to be normalized. Look into this once it exists
         const rowsCount = gridMap.length;
         const columnsCount = gridMap[0].length;
         let row = gridNode.getFirstChild();
-
         if (!lexical.DEPRECATED_$isGridRowNode(row)) {
           throw Error(`Expected TableNode first child to be a RowNode`);
         }
-
         const unmerged = [];
-
         for (let i = 0; i < rowsCount; i++) {
           if (i !== 0) {
             row = row.getNextSibling();
-
             if (!lexical.DEPRECATED_$isGridRowNode(row)) {
               throw Error(`Expected TableNode first child to be a RowNode`);
             }
           }
-
           let lastRowCell = null;
-
           for (let j = 0; j < columnsCount; j++) {
             const cellMap = gridMap[i][j];
             const cell = cellMap.cell;
-
             if (cellMap.startRow === i && cellMap.startColumn === j) {
               lastRowCell = cell;
               unmerged.push(cell);
             } else if (cell.getColSpan() > 1 || cell.getRowSpan() > 1) {
               const newCell = table.$createTableCellNode(cell.__headerState);
-
               if (lastRowCell !== null) {
                 lastRowCell.insertAfter(newCell);
               } else {
@@ -153,20 +137,19 @@ function TablePlugin({
             }
           }
         }
-
         for (const cell of unmerged) {
           cell.setColSpan(1);
           cell.setRowSpan(1);
         }
       }
     });
-  }, [editor, hasCellMerge]); // Remove cell background color when feature is disabled
+  }, [editor, hasCellMerge]);
 
+  // Remove cell background color when feature is disabled
   react.useEffect(() => {
     if (hasCellBackgroundColor) {
       return;
     }
-
     return editor.registerNodeTransform(table.TableCellNode, node => {
       if (node.getBackgroundColor() !== null) {
         node.setBackgroundColor(null);