@lexical/react 0.8.1 → 0.9.0

package/LexicalRichTextPlugin.dev.js

@@ -22,7 +22,6 @@ 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';
 
 /**
@@ -42,10 +41,12 @@ 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(() => {
@@ -53,6 +54,7 @@ function useCanShowPlaceholder(editor) {
       const currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
       setCanShowPlaceholder(currentCanShowPlaceholder);
     }
+
     resetCanShowPlaceholder();
     return utils.mergeRegister(editor.registerUpdateListener(() => {
       resetCanShowPlaceholder();
@@ -71,9 +73,8 @@ function useCanShowPlaceholder(editor) {
  *
  */
 function useDecorators(editor, ErrorBoundary) {
-  const [decorators, setDecorators] = React.useState(() => editor.getDecorators());
+  const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
 
-  // Subscribe to changes
   useLayoutEffect(() => {
     return editor.registerDecoratorListener(nextDecorators => {
       reactDom.flushSync(() => {
@@ -86,12 +87,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]);
+  }, [editor]); // Return decorators defined as React Portals
 
-  // 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, {
@@ -100,10 +101,12 @@ 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]);
 }
@@ -117,9 +120,7 @@ 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]);
 }
@@ -143,15 +144,18 @@ 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,20 +17,22 @@ 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.d.ts → LexicalTableOfContents.d.ts}

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 import type { LexicalEditor, NodeKey } from 'lexical';
 import { HeadingTagType } from '@lexical/rich-text';
 export declare type TableOfContentsEntry = [

package/{LexicalTableOfContents__EXPERIMENTAL.dev.js → LexicalTableOfContents.dev.js}

@@ -18,39 +18,50 @@ 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));
@@ -58,30 +69,38 @@ 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
 }) {
@@ -93,52 +112,61 @@ 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/{DEPRECATED_useLexical.js → LexicalTableOfContents.js}

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const DEPRECATED_useLexical = process.env.NODE_ENV === 'development' ? require('./DEPRECATED_useLexical.dev.js') : require('./DEPRECATED_useLexical.prod.js')
-module.exports = DEPRECATED_useLexical;
+const LexicalTableOfContents = process.env.NODE_ENV === 'development' ? require('./LexicalTableOfContents.dev.js') : require('./LexicalTableOfContents.prod.js')
+module.exports = LexicalTableOfContents;

package/LexicalTablePlugin.d.ts

@@ -5,4 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 export declare function TablePlugin(): JSX.Element | null;

package/LexicalTablePlugin.dev.js

@@ -26,53 +26,65 @@ 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
+    }; // 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);
@@ -84,12 +96,14 @@ 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);
@@ -98,9 +112,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();
       }

package/LexicalTreeView.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 import type { LexicalEditor } from 'lexical';
 export declare function TreeView({ timeTravelButtonClassName, timeTravelPanelSliderClassName, timeTravelPanelButtonClassName, viewClassName, timeTravelPanelClassName, editor, }: {
     editor: LexicalEditor;