@lexical/react 0.7.8 → 0.8.0

package/LexicalPlainTextPlugin.dev.js

@@ -22,6 +22,7 @@ var plainText = require('@lexical/plain-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));
       }
     }
-
     return decoratedPortals;
   }, [ErrorBoundary, decorators, editor]);
 }
@@ -120,7 +117,9 @@ function useDecorators(editor, ErrorBoundary) {
  */
 function usePlainTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(plainText.registerPlainText(editor), dragon.registerDragonSupport(editor)); // We only do this for init
+    return utils.mergeRegister(plainText.registerPlainText(editor), dragon.registerDragonSupport(editor));
+
+    // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 }
@@ -144,18 +143,15 @@ function PlainTextPlugin({
     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/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));
       }
     }
-
     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

@@ -17,22 +17,20 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 /**
  * 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(() => {
     return editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
       const selection = lexical.$getSelection();
-
       if (!lexical.$isRangeSelection(selection)) {
         return false;
       }
-
       event.preventDefault();
       return editor.dispatchCommand(event.shiftKey ? lexical.OUTDENT_CONTENT_COMMAND : lexical.INDENT_CONTENT_COMMAND, undefined);
     }, lexical.COMMAND_PRIORITY_EDITOR);

package/LexicalTableOfContents__EXPERIMENTAL.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

@@ -26,65 +26,53 @@ function TablePlugin() {
         throw Error(`TablePlugin: TableNode, TableCellNode or TableRowNode not registered on editor`);
       }
     }
-
     return editor.registerCommand(table.INSERT_TABLE_COMMAND, ({
       columns,
       rows,
       includeHeaders
     }) => {
       const selection = lexical.$getSelection();
-
       if (!lexical.$isRangeSelection(selection)) {
         return true;
       }
-
       const focus = selection.focus;
       const focusNode = focus.getNode();
-
       if (focusNode !== null) {
         const tableNode = table.$createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
-
         if (lexical.$isRootOrShadowRoot(focusNode)) {
           const target = focusNode.getChildAtIndex(focus.offset);
-
           if (target !== null) {
             target.insertBefore(tableNode);
           } else {
             focusNode.append(tableNode);
           }
-
           tableNode.insertBefore(lexical.$createParagraphNode());
         } else {
           const topLevelNode = focusNode.getTopLevelElementOrThrow();
           topLevelNode.insertAfter(tableNode);
         }
-
         tableNode.insertAfter(lexical.$createParagraphNode());
         const firstCell = tableNode.getFirstChildOrThrow().getFirstChildOrThrow();
         firstCell.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);
         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);
@@ -96,14 +84,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);
@@ -112,9 +98,9 @@ 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();
       }