@lexical/react 0.1.16 → 0.1.17

package/LexicalRichTextPlugin.dev.js

@@ -10,9 +10,9 @@ var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var React = require('react');
 var text = require('@lexical/text');
 var reactDom = require('react-dom');
-var clipboard = require('@lexical/clipboard');
-var selection = require('@lexical/selection');
-var lexical = require('lexical');
+var dragon = require('@lexical/dragon');
+var richText = require('@lexical/rich-text');
+var utils = require('@lexical/utils');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -46,7 +46,7 @@ var useLayoutEffect = useLayoutEffectImpl;
 function useLexicalCanShowPlaceholder(editor) {
   const [canShowPlaceholder, setCanShowPlaceholder] = React.useState(editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing())));
   useLayoutEffect(() => {
-    return editor.addListener('update', ({
+    return editor.registerUpdateListener(({
       editorState
     }) => {
       const isComposing = editor.isComposing();
@@ -69,7 +69,7 @@ function useDecorators(editor) {
   const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
 
   useLayoutEffect(() => {
-    return editor.addListener('decorator', nextDecorators => {
+    return editor.registerDecoratorListener(nextDecorators => {
       reactDom.flushSync(() => {
         setDecorators(nextDecorators);
       });
@@ -94,204 +94,6 @@ function useDecorators(editor) {
   }, [decorators, editor]);
 }
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-function onCutForRichText(event, editor) {
-  onCopyForRichText(event, editor);
-  editor.update(() => {
-    const selection = lexical.$getSelection();
-
-    if (lexical.$isRangeSelection(selection)) {
-      selection.removeText();
-    }
-  });
-}
-function onCopyForRichText(event, editor) {
-  event.preventDefault();
-  editor.update(() => {
-    const clipboardData = event.clipboardData;
-    const selection = lexical.$getSelection();
-
-    if (selection !== null) {
-      if (clipboardData != null) {
-        const htmlString = clipboard.getHtmlContent(editor);
-        const lexicalString = clipboard.$getLexicalContent(editor);
-
-        if (htmlString !== null) {
-          clipboardData.setData('text/html', htmlString);
-        }
-
-        if (lexicalString !== null) {
-          clipboardData.setData('application/x-lexical-editor', lexicalString);
-        }
-
-        clipboardData.setData('text/plain', selection.getTextContent());
-      }
-    }
-  });
-}
-function onPasteForRichText(event, editor) {
-  event.preventDefault();
-  editor.update(() => {
-    const selection = lexical.$getSelection();
-    const clipboardData = event.clipboardData;
-
-    if (clipboardData != null && lexical.$isRangeSelection(selection)) {
-      clipboard.$insertDataTransferForRichText(clipboardData, selection, editor);
-    }
-  });
-}
-
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-// Convoluted logic to make this work with Flow. Order matters.
-const options = {
-  tag: 'history-merge'
-};
-const setEditorOptions = options;
-const updateOptions = options;
-function initializeEditor(editor, initialEditorState) {
-  if (initialEditorState === null) {
-    return;
-  } else if (initialEditorState === undefined) {
-    editor.update(() => {
-      const root = lexical.$getRoot();
-      const firstChild = root.getFirstChild();
-
-      if (firstChild === null) {
-        const paragraph = lexical.$createParagraphNode();
-        root.append(paragraph);
-        const activeElement = document.activeElement;
-
-        if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
-          paragraph.select();
-        }
-      }
-    }, updateOptions);
-  } else if (initialEditorState !== null) {
-    switch (typeof initialEditorState) {
-      case 'string':
-        {
-          const parsedEditorState = editor.parseEditorState(initialEditorState);
-          editor.setEditorState(parsedEditorState, setEditorOptions);
-          break;
-        }
-
-      case 'object':
-        {
-          editor.setEditorState(initialEditorState, setEditorOptions);
-          break;
-        }
-
-      case 'function':
-        {
-          editor.update(initialEditorState, updateOptions);
-          break;
-        }
-    }
-  }
-}
-
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-function useLexicalDragonSupport(editor) {
-  React.useEffect(() => {
-    const handler = event => {
-      const rootElement = editor.getRootElement();
-
-      if (document.activeElement !== rootElement) {
-        return;
-      }
-
-      const data = event.data;
-
-      if (typeof data === 'string') {
-        let parsedData;
-
-        try {
-          parsedData = JSON.parse(data);
-        } catch (e) {
-          return;
-        }
-
-        if (parsedData && parsedData.protocol === 'nuanria_messaging' && parsedData.type === 'request') {
-          const payload = parsedData.payload;
-
-          if (payload && payload.functionId === 'makeChanges') {
-            const args = payload.args;
-
-            if (args) {
-              const [elementStart, elementLength, text, selStart, selLength, formatCommand] = args; // TODO: we should probably handle formatCommand somehow?
-              editor.update(() => {
-                const selection = lexical.$getSelection();
-
-                if (lexical.$isRangeSelection(selection)) {
-                  const anchor = selection.anchor;
-                  let anchorNode = anchor.getNode();
-                  let setSelStart = 0;
-                  let setSelEnd = 0;
-
-                  if (lexical.$isTextNode(anchorNode)) {
-                    // set initial selection
-                    if (elementStart >= 0 && elementLength >= 0) {
-                      setSelStart = elementStart;
-                      setSelEnd = elementStart + elementLength; // If the offset is more than the end, make it the end
-
-                      selection.setTextNodeRange(anchorNode, setSelStart, anchorNode, setSelEnd);
-                    }
-                  }
-
-                  if (setSelStart !== setSelEnd || text !== '') {
-                    selection.insertRawText(text);
-                    anchorNode = anchor.getNode();
-                  }
-
-                  if (lexical.$isTextNode(anchorNode)) {
-                    // set final selection
-                    setSelStart = selStart;
-                    setSelEnd = selStart + selLength;
-                    const anchorNodeTextLength = anchorNode.getTextContentSize(); // If the offset is more than the end, make it the end
-
-                    setSelStart = setSelStart > anchorNodeTextLength ? anchorNodeTextLength : setSelStart;
-                    setSelEnd = setSelEnd > anchorNodeTextLength ? anchorNodeTextLength : setSelEnd;
-                    selection.setTextNodeRange(anchorNode, setSelStart, anchorNode, setSelEnd);
-                  } // block the chrome extension from handling this event
-
-
-                  event.stopImmediatePropagation();
-                }
-              });
-            }
-          }
-        }
-      }
-    };
-
-    window.addEventListener('message', handler, true);
-    return () => {
-      window.removeEventListener('message', handler, true);
-    };
-  }, [editor]);
-}
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -302,249 +104,9 @@ function useLexicalDragonSupport(editor) {
  */
 function useRichTextSetup(editor, initialEditorState) {
   useLayoutEffect(() => {
-    const removeListener = editor.addListener('command', (type, payload) => {
-      const selection$1 = lexical.$getSelection();
-
-      if (type === 'click' && lexical.$isNodeSelection(selection$1)) {
-        selection$1.clear();
-        return true;
-      }
-
-      if (!lexical.$isRangeSelection(selection$1)) {
-        return false;
-      }
-
-      switch (type) {
-        case 'deleteCharacter':
-          {
-            const isBackward = payload;
-            selection$1.deleteCharacter(isBackward);
-            return true;
-          }
-
-        case 'deleteWord':
-          {
-            const isBackward = payload;
-            selection$1.deleteWord(isBackward);
-            return true;
-          }
-
-        case 'deleteLine':
-          {
-            const isBackward = payload;
-            selection$1.deleteLine(isBackward);
-            return true;
-          }
-
-        case 'insertText':
-          {
-            const eventOrText = payload;
-
-            if (typeof eventOrText === 'string') {
-              selection$1.insertText(eventOrText);
-            } else {
-              const dataTransfer = eventOrText.dataTransfer;
-
-              if (dataTransfer != null) {
-                clipboard.$insertDataTransferForRichText(dataTransfer, selection$1, editor);
-              } else {
-                const data = eventOrText.data;
-
-                if (data) {
-                  selection$1.insertText(data);
-                }
-              }
-            }
-
-            return true;
-          }
-
-        case 'removeText':
-          selection$1.removeText();
-          return true;
-
-        case 'formatText':
-          {
-            const format = payload;
-            selection$1.formatText(format);
-            return true;
-          }
-
-        case 'formatElement':
-          {
-            const format = payload;
-            const node = selection$1.anchor.getNode();
-            const element = lexical.$isElementNode(node) ? node : node.getParentOrThrow();
-            element.setFormat(format);
-            return true;
-          }
-
-        case 'insertLineBreak':
-          const selectStart = payload;
-          selection$1.insertLineBreak(selectStart);
-          return true;
-
-        case 'insertParagraph':
-          selection$1.insertParagraph();
-          return true;
-
-        case 'indentContent':
-          {
-            // Handle code blocks
-            const anchor = selection$1.anchor;
-            const parentBlock = anchor.type === 'element' ? anchor.getNode() : anchor.getNode().getParentOrThrow();
-
-            if (parentBlock.canInsertTab()) {
-              editor.execCommand('insertText', '\t');
-            } else {
-              if (parentBlock.getIndent() !== 10) {
-                parentBlock.setIndent(parentBlock.getIndent() + 1);
-              }
-            }
-
-            return true;
-          }
-
-        case 'outdentContent':
-          {
-            // Handle code blocks
-            const anchor = selection$1.anchor;
-            const anchorNode = anchor.getNode();
-            const parentBlock = anchor.type === 'element' ? anchor.getNode() : anchor.getNode().getParentOrThrow();
-
-            if (parentBlock.canInsertTab()) {
-              const textContent = anchorNode.getTextContent();
-              const character = textContent[anchor.offset - 1];
-
-              if (character === '\t') {
-                editor.execCommand('deleteCharacter', true);
-              }
-            } else {
-              if (parentBlock.getIndent() !== 0) {
-                parentBlock.setIndent(parentBlock.getIndent() - 1);
-              }
-            }
-
-            return true;
-          }
-
-        case 'keyArrowLeft':
-          {
-            const event = payload;
-            const isHoldingShift = event.shiftKey;
-
-            if (selection.$shouldOverrideDefaultCharacterSelection(selection$1, true)) {
-              event.preventDefault();
-              selection.$moveCharacter(selection$1, isHoldingShift, true);
-              return true;
-            }
-
-            return false;
-          }
-
-        case 'keyArrowRight':
-          {
-            const event = payload;
-            const isHoldingShift = event.shiftKey;
-
-            if (selection.$shouldOverrideDefaultCharacterSelection(selection$1, false)) {
-              event.preventDefault();
-              selection.$moveCharacter(selection$1, isHoldingShift, false);
-              return true;
-            }
-
-            return false;
-          }
-
-        case 'keyBackspace':
-          {
-            const event = payload;
-            event.preventDefault();
-            const {
-              anchor
-            } = selection$1;
-
-            if (selection$1.isCollapsed() && anchor.offset === 0) {
-              const element = anchor.type === 'element' ? anchor.getNode() : anchor.getNode().getParentOrThrow();
-
-              if (element.getIndent() > 0) {
-                return editor.execCommand('outdentContent');
-              }
-            }
-
-            return editor.execCommand('deleteCharacter', true);
-          }
-
-        case 'keyDelete':
-          {
-            const event = payload;
-            event.preventDefault();
-            return editor.execCommand('deleteCharacter', false);
-          }
-
-        case 'keyEnter':
-          {
-            const event = payload;
-            event.preventDefault();
-
-            if (event.shiftKey) {
-              return editor.execCommand('insertLineBreak');
-            }
-
-            return editor.execCommand('insertParagraph');
-          }
-
-        case 'keyTab':
-          {
-            const event = payload;
-            event.preventDefault();
-            return editor.execCommand(event.shiftKey ? 'outdentContent' : 'indentContent');
-          }
-
-        case 'keyEscape':
-          {
-            editor.blur();
-            return true;
-          }
-
-        case 'copy':
-          {
-            const event = payload;
-            onCopyForRichText(event, editor);
-            return true;
-          }
-
-        case 'cut':
-          {
-            const event = payload;
-            onCutForRichText(event, editor);
-            return true;
-          }
-
-        case 'paste':
-          {
-            const event = payload;
-            onPasteForRichText(event, editor);
-            return true;
-          }
-
-        case 'drop':
-        case 'dragstart':
-          {
-            // TODO: Make drag and drop work at some point.
-            const event = payload;
-            event.preventDefault();
-            return true;
-          }
-      }
-
-      return false;
-    }, 0);
-    initializeEditor(editor, initialEditorState);
-    return removeListener; // We only do this for init
+    return utils.mergeRegister(richText.registerRichText(editor, initialEditorState), dragon.registerDragonSupport(editor)); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
-  useLexicalDragonSupport(editor);
 }
 
 /**

package/LexicalRichTextPlugin.prod.js

@@ -4,15 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var g=require("@lexical/react/LexicalComposerContext"),h=require("react"),r=require("@lexical/text"),t=require("react-dom"),v=require("@lexical/clipboard"),w=require("@lexical/selection"),x=require("lexical"),y="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
-function z(c){const [e,f]=h.useState(c.getEditorState().read(r.$canShowPlaceholderCurry(c.isComposing())));y(()=>c.addListener("update",({editorState:d})=>{const b=c.isComposing();d=d.read(r.$canShowPlaceholderCurry(b));f(d)}),[c]);return e}
-function B(c){const [e,f]=h.useState(()=>c.getDecorators());y(()=>c.addListener("decorator",d=>{t.flushSync(()=>{f(d)})}),[c]);return h.useMemo(()=>{const d=[],b=Object.keys(e);for(let p=0;p<b.length;p++){var a=b[p];const u=e[a];a=c.getElementByKey(a);null!==a&&d.push(t.createPortal(u,a))}return d},[e,c])}function C(c,e){D(c,e);e.update(()=>{const f=x.$getSelection();x.$isRangeSelection(f)&&f.removeText()})}
-function D(c,e){c.preventDefault();e.update(()=>{const f=c.clipboardData,d=x.$getSelection();if(null!==d&&null!=f){const b=v.getHtmlContent(e),a=v.$getLexicalContent(e);null!==b&&f.setData("text/html",b);null!==a&&f.setData("application/x-lexical-editor",a);f.setData("text/plain",d.getTextContent())}})}function E(c,e){c.preventDefault();e.update(()=>{const f=x.$getSelection(),d=c.clipboardData;null!=d&&x.$isRangeSelection(f)&&v.$insertDataTransferForRichText(d,f,e)})}const F={tag:"history-merge"};
-function G(c,e){if(null!==e)if(void 0===e)c.update(()=>{var f=x.$getRoot();if(null===f.getFirstChild()){const d=x.$createParagraphNode();f.append(d);f=document.activeElement;(null!==x.$getSelection()||null!==f&&f===c.getRootElement())&&d.select()}},F);else if(null!==e)switch(typeof e){case "string":e=c.parseEditorState(e);c.setEditorState(e,F);break;case "object":c.setEditorState(e,F);break;case "function":c.update(e,F)}}
-function H(c){h.useEffect(()=>{const e=f=>{var d=c.getRootElement();if(document.activeElement===d&&(d=f.data,"string"===typeof d)){try{var b=JSON.parse(d)}catch(a){return}if(b&&"nuanria_messaging"===b.protocol&&"request"===b.type&&(b=b.payload)&&"makeChanges"===b.functionId&&(b=b.args)){const [a,p,u,A,I]=b;c.update(()=>{const q=x.$getSelection();if(x.$isRangeSelection(q)){var n=q.anchor;let k=n.getNode(),l=0,m=0;x.$isTextNode(k)&&0<=a&&0<=p&&(l=a,m=a+p,q.setTextNodeRange(k,l,k,m));if(l!==m||""!==
-u)q.insertRawText(u),k=n.getNode();x.$isTextNode(k)&&(l=A,m=A+I,n=k.getTextContentSize(),l=l>n?n:l,m=m>n?n:m,q.setTextNodeRange(k,l,k,m));f.stopImmediatePropagation()}})}}};window.addEventListener("message",e,!0);return()=>{window.removeEventListener("message",e,!0)}},[c])}
-function J(c,e){y(()=>{const f=c.addListener("command",(d,b)=>{var a=x.$getSelection();if("click"===d&&x.$isNodeSelection(a))return a.clear(),!0;if(!x.$isRangeSelection(a))return!1;switch(d){case "deleteCharacter":return a.deleteCharacter(b),!0;case "deleteWord":return a.deleteWord(b),!0;case "deleteLine":return a.deleteLine(b),!0;case "insertText":return"string"===typeof b?a.insertText(b):(d=b.dataTransfer,null!=d?v.$insertDataTransferForRichText(d,a,c):(b=b.data)&&a.insertText(b)),!0;case "removeText":return a.removeText(),
-!0;case "formatText":return a.formatText(b),!0;case "formatElement":return a=a.anchor.getNode(),(x.$isElementNode(a)?a:a.getParentOrThrow()).setFormat(b),!0;case "insertLineBreak":return a.insertLineBreak(b),!0;case "insertParagraph":return a.insertParagraph(),!0;case "indentContent":return a=a.anchor,a="element"===a.type?a.getNode():a.getNode().getParentOrThrow(),a.canInsertTab()?c.execCommand("insertText","\t"):10!==a.getIndent()&&a.setIndent(a.getIndent()+1),!0;case "outdentContent":return a=a.anchor,
-b=a.getNode(),d="element"===a.type?a.getNode():a.getNode().getParentOrThrow(),d.canInsertTab()?"\t"===b.getTextContent()[a.offset-1]&&c.execCommand("deleteCharacter",!0):0!==d.getIndent()&&d.setIndent(d.getIndent()-1),!0;case "keyArrowLeft":d=b.shiftKey;if(w.$shouldOverrideDefaultCharacterSelection(a,!0))return b.preventDefault(),w.$moveCharacter(a,d,!0),!0;break;case "keyArrowRight":d=b.shiftKey;if(w.$shouldOverrideDefaultCharacterSelection(a,!1))return b.preventDefault(),w.$moveCharacter(a,d,!1),
-!0;break;case "keyBackspace":return b.preventDefault(),{anchor:b}=a,a.isCollapsed()&&0===b.offset&&0<("element"===b.type?b.getNode():b.getNode().getParentOrThrow()).getIndent()?c.execCommand("outdentContent"):c.execCommand("deleteCharacter",!0);case "keyDelete":return b.preventDefault(),c.execCommand("deleteCharacter",!1);case "keyEnter":return b.preventDefault(),b.shiftKey?c.execCommand("insertLineBreak"):c.execCommand("insertParagraph");case "keyTab":return b.preventDefault(),c.execCommand(b.shiftKey?
-"outdentContent":"indentContent");case "keyEscape":return c.blur(),!0;case "copy":return D(b,c),!0;case "cut":return C(b,c),!0;case "paste":return E(b,c),!0;case "drop":case "dragstart":return b.preventDefault(),!0}return!1},0);G(c,e);return f},[c]);H(c)}module.exports=function({contentEditable:c,placeholder:e,initialEditorState:f}){const [d]=g.useLexicalComposerContext(),b=z(d);J(d,f);f=B(d);return h.createElement(h.Fragment,null,c,b&&e,f)};
+var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("react-dom"),n=require("@lexical/dragon"),p=require("@lexical/rich-text"),q=require("@lexical/utils"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
+function t(a){const [c,e]=h.useState(a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing())));r(()=>a.registerUpdateListener(({editorState:b})=>{const f=a.isComposing();b=b.read(l.$canShowPlaceholderCurry(f));e(b)}),[a]);return c}
+function u(a){const [c,e]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{m.flushSync(()=>{e(b)})}),[a]);return h.useMemo(()=>{const b=[],f=Object.keys(c);for(let k=0;k<f.length;k++){var g=f[k];const v=c[g];g=a.getElementByKey(g);null!==g&&b.push(m.createPortal(v,g))}return b},[c,a])}function w(a,c){r(()=>q.mergeRegister(p.registerRichText(a,c),n.registerDragonSupport(a)),[a])}
+module.exports=function({contentEditable:a,placeholder:c,initialEditorState:e}){const [b]=d.useLexicalComposerContext(),f=t(b);w(b,e);e=u(b);return h.createElement(h.Fragment,null,a,f&&c,e)};

package/LexicalTablePlugin.dev.js

@@ -29,52 +29,49 @@ function TablePlugin() {
       }
     }
 
-    return editor.addListener('command', (type, payload) => {
-      if (type === 'insertTable') {
-        const {
-          columns,
-          rows
-        } = payload;
-        const selection = lexical.$getSelection();
+    return editor.registerCommand(table.INSERT_TABLE_COMMAND, payload => {
+      const {
+        columns,
+        rows
+      } = payload;
+      const selection = lexical.$getSelection();
 
-        if (!lexical.$isRangeSelection(selection)) {
-          return true;
-        }
+      if (!lexical.$isRangeSelection(selection)) {
+        return true;
+      }
 
-        const focus = selection.focus;
-        const focusNode = focus.getNode();
+      const focus = selection.focus;
+      const focusNode = focus.getNode();
 
-        if (focusNode !== null) {
-          const tableNode = table.$createTableNodeWithDimensions(rows, columns);
+      if (focusNode !== null) {
+        const tableNode = table.$createTableNodeWithDimensions(Number(rows), Number(columns));
 
-          if (lexical.$isRootNode(focusNode)) {
-            const target = focusNode.getChildAtIndex(focus.offset);
+        if (lexical.$isRootNode(focusNode)) {
+          const target = focusNode.getChildAtIndex(focus.offset);
 
-            if (target !== null) {
-              target.insertBefore(tableNode);
-            } else {
-              focusNode.append(tableNode);
-            }
+          if (target !== null) {
+            target.insertBefore(tableNode);
           } else {
-            const topLevelNode = focusNode.getTopLevelElementOrThrow();
-            topLevelNode.insertAfter(tableNode);
+            focusNode.append(tableNode);
           }
 
-          tableNode.insertAfter(lexical.$createParagraphNode());
-          const firstCell = tableNode.getFirstChildOrThrow().getFirstChildOrThrow();
-          firstCell.select();
+          tableNode.insertBefore(lexical.$createParagraphNode());
+        } else {
+          const topLevelNode = focusNode.getTopLevelElementOrThrow();
+          topLevelNode.insertAfter(tableNode);
         }
 
-        return true;
+        tableNode.insertAfter(lexical.$createParagraphNode());
+        const firstCell = tableNode.getFirstChildOrThrow().getFirstChildOrThrow();
+        firstCell.select();
       }
 
-      return false;
+      return true;
     }, EditorPriority);
   }, [editor]);
   react.useEffect(() => {
     const tableSelections = new Map();
-    return editor.addListener('mutation', table.TableNode, nodeMutations => {
-      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    return editor.registerMutationListener(table.TableNode, nodeMutations => {
       for (const [nodeKey, mutation] of nodeMutations) {
         if (mutation === 'created') {
           editor.update(() => {

package/LexicalTablePlugin.prod.js

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 var e=require("@lexical/react/LexicalComposerContext"),g=require("@lexical/table"),k=require("lexical"),m=require("react");
-module.exports=function(){const [d]=e.useLexicalComposerContext();m.useEffect(()=>{if(!d.hasNodes([g.TableNode,g.TableCellNode,g.TableRowNode]))throw Error("Minified Lexical error #54; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");return d.addListener("command",(a,b)=>{if("insertTable"===a){const {columns:h,rows:f}=b;a=k.$getSelection();if(!k.$isRangeSelection(a))return!0;var c=a.focus;a=c.getNode();null!==a&&(b=g.$createTableNodeWithDimensions(f,
-h),k.$isRootNode(a)?(c=a.getChildAtIndex(c.offset),null!==c?c.insertBefore(b):a.append(b)):a.getTopLevelElementOrThrow().insertAfter(b),b.insertAfter(k.$createParagraphNode()),b.getFirstChildOrThrow().getFirstChildOrThrow().select());return!0}return!1},0)},[d]);m.useEffect(()=>{const a=new Map;return d.addListener("mutation",g.TableNode,b=>{for(const [c,h]of b)"created"===h?d.update(()=>{var f=d.getElementByKey(c);const l=k.$getNodeByKey(c);f&&l&&(f=g.applyTableHandlers(l,f,d),a.set(c,f))}):"destroyed"===
-h&&(b=a.get(c))&&(b.removeListeners(),a.delete(c))})},[d]);return null};
+module.exports=function(){const [c]=e.useLexicalComposerContext();m.useEffect(()=>{if(!c.hasNodes([g.TableNode,g.TableCellNode,g.TableRowNode]))throw Error("Minified Lexical error #54; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");return c.registerCommand(g.INSERT_TABLE_COMMAND,a=>{const {columns:h,rows:f}=a;a=k.$getSelection();if(!k.$isRangeSelection(a))return!0;var d=a.focus;a=d.getNode();if(null!==a){const b=g.$createTableNodeWithDimensions(Number(f),
+Number(h));k.$isRootNode(a)?(d=a.getChildAtIndex(d.offset),null!==d?d.insertBefore(b):a.append(b),b.insertBefore(k.$createParagraphNode())):a.getTopLevelElementOrThrow().insertAfter(b);b.insertAfter(k.$createParagraphNode());b.getFirstChildOrThrow().getFirstChildOrThrow().select()}return!0},0)},[c]);m.useEffect(()=>{const a=new Map;return c.registerMutationListener(g.TableNode,h=>{for(const [f,d]of h)"created"===d?c.update(()=>{var b=c.getElementByKey(f);const l=k.$getNodeByKey(f);b&&l&&(b=g.applyTableHandlers(l,
+b,c),a.set(f,b))}):"destroyed"===d&&(h=a.get(f))&&(h.removeListeners(),a.delete(f))})},[c]);return null};

package/LexicalTreeView.dev.js

@@ -47,7 +47,7 @@ function TreeView({
   const [isPlaying, setIsPlaying] = React.useState(false);
   React.useEffect(() => {
     setContent(generateContent(editor.getEditorState()));
-    return editor.addListener('update', ({
+    return editor.registerUpdateListener(({
       editorState
     }) => {
       const compositionKey = editor._compositionKey;

package/LexicalTreeView.prod.js

@@ -14,7 +14,7 @@ function M(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase(
 function N({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:f}){if(!k.$isTextNode(c)||!k.$isRangeSelection(d)||!b||k.$isElementNode(c))return"";b=d.anchor;var g=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===g.offset)return"";g=d.anchor;const m=d.focus,v=c.getTextContent(!0),u=v.length;b=d=-1;if("text"===g.type&&"text"===m.type){const n=g.getNode(),w=m.getNode();n===w&&c===n&&g.offset!==m.offset?[d,b]=g.offset<m.offset?[g.offset,m.offset]:[m.offset,
 g.offset]:c===n?[d,b]=n.isBefore(w)?[g.offset,u]:[0,g.offset]:c===w?[d,b]=w.isBefore(n)?[m.offset,u]:[0,m.offset]:[d,b]=[0,u]}c=(v.slice(0,d).match(D)||[]).length;g=(v.slice(d,b).match(D)||[]).length;const [r,l]=[d+c,b+c+g];if(r===l)return"";c=a[a.length-1]===E.hasNextSibling?E.ancestorHasNextSibling:E.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(r).fill(" ");d=Array(l-r).fill(E.selectedChar);e=Array(e.length+(f.length+3)).fill(" ");return[E.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+
 "\n"}
-module.exports=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:e,timeTravelPanelClassName:d,editor:f}){const [g,m]=q.useState([]),[v,u]=q.useState(""),[r,l]=q.useState(!1),n=q.useRef(0),w=q.useRef(null),B=q.useRef(null),[z,C]=q.useState(!1);q.useEffect(()=>{u(H(f.getEditorState()));return f.addListener("update",({editorState:h})=>{const p=f._compositionKey,x=H(f.getEditorState());u([x,null!==p&&`Composition key: ${p}`].filter(Boolean).join("\n\n"));r||
+module.exports=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:e,timeTravelPanelClassName:d,editor:f}){const [g,m]=q.useState([]),[v,u]=q.useState(""),[r,l]=q.useState(!1),n=q.useRef(0),w=q.useRef(null),B=q.useRef(null),[z,C]=q.useState(!1);q.useEffect(()=>{u(H(f.getEditorState()));return f.registerUpdateListener(({editorState:h})=>{const p=f._compositionKey,x=H(f.getEditorState());u([x,null!==p&&`Composition key: ${p}`].filter(Boolean).join("\n\n"));r||
 m(A=>[...A,[Date.now(),h]])})},[r,f]);const y=g.length;q.useEffect(()=>{if(z){let h;const p=()=>{const x=n.current;x===y-1?C(!1):h=setTimeout(()=>{n.current++;const A=n.current,I=B.current;null!==I&&(I.value=String(A));f.setEditorState(g[A][1]);p()},g[x+1][0]-g[x][0])};p();return()=>{window.clearTimeout(h)}}},[g,z,f,y]);q.useEffect(()=>{const h=w.current;if(null!==h)return h.__lexicalEditor=f,()=>{h.__lexicalEditor=null}},[f]);return q.createElement("div",{className:e},!r&&2<y&&q.createElement("button",
 {onClick:()=>{const h=f.getRootElement();null!==h&&(h.contentEditable="false",n.current=y-1,l(!0))},className:a},"Time Travel"),q.createElement("pre",{ref:w},v),r&&q.createElement("div",{className:d},q.createElement("button",{className:c,onClick:()=>{C(!z)}},z?"Pause":"Play"),q.createElement("input",{className:b,ref:B,onChange:h=>{h=Number(h.target.value);const p=g[h];p&&(n.current=h,f.setEditorState(p[1]))},type:"range",min:"1",max:y-1}),q.createElement("button",{className:c,onClick:()=>{var h=f.getRootElement();
 if(null!==h){h.contentEditable="true";h=g.length-1;f.setEditorState(g[h][1]);const p=B.current;null!==p&&(p.value=String(h));l(!1);C(!1)}}},"Exit")))};