@lexical/react 0.4.1 → 0.5.1-next.0

package/LexicalPlainTextPlugin.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { InitialEditorStateType } from '@lexical/plain-text';
-export declare function PlainTextPlugin({ contentEditable, placeholder, initialEditorState, }: {
+import { ErrorBoundaryType } from './shared/useDecorators';
+export declare function PlainTextPlugin({ contentEditable, placeholder, ErrorBoundary, }: {
     contentEditable: JSX.Element;
-    initialEditorState?: InitialEditorStateType;
     placeholder: JSX.Element | string;
+    ErrorBoundary?: ErrorBoundaryType;
 }): JSX.Element;

package/LexicalPlainTextPlugin.dev.js

@@ -21,16 +21,94 @@ var plainText = require('@lexical/plain-text');
  * LICENSE file in the root directory of this source tree.
  *
  */
-function warnOnlyOnce(message) {
 
-  let run = false;
-  return () => {
-    if (!run) {
-      console.warn(message);
+const changedArray = (a = [], b = []) => a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+
+const initialState = {
+  error: null
+};
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = initialState;
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+  }
+
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+
+  resetErrorBoundary(...args) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onReset && this.props.onReset(...args);
+    this.reset();
+  }
+
+  reset() {
+    this.setState(initialState);
+  }
+
+  componentDidCatch(error, info) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onError && this.props.onError(error, info);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      error
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props; // There's an edge case where if the thing that triggered the error
+    // happens to *also* be in the resetKeys array, we'd end up resetting
+    // the error boundary immediately. This would likely trigger a second
+    // error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call
+    // of cDU after the error is set
+
+    if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
+      // @ts-ignore
+      // eslint-disable-next-line no-unused-expressions
+      this.props.onResetKeysChange && this.props.onResetKeysChange(prevProps.resetKeys, resetKeys);
+      this.reset();
     }
+  }
+
+  render() {
+    const {
+      error
+    } = this.state;
+    const {
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+
+    if (error !== null) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+
+      if ( /*#__PURE__*/React.isValidElement(fallback)) {
+        return fallback;
+      } else if (typeof fallbackRender === 'function') {
+        return fallbackRender(props);
+      } else if (FallbackComponent) {
+        return /*#__PURE__*/React.createElement(FallbackComponent, props);
+      } else {
+        throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');
+      }
+    }
+
+    return this.props.children;
+  }
 
-    run = true;
-  };
 }
 
 /**
@@ -90,7 +168,14 @@ function useCanShowPlaceholder(editor) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useDecorators(editor) {
+function useDecorators(editor, // TODO 0.6 Make non-optional non-default
+ErrorBoundary$1 = ({
+  children,
+  onError
+}) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+  fallback: null,
+  onError: onError
+}, children)) {
   const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
 
   useLayoutEffect(() => {
@@ -113,7 +198,11 @@ function useDecorators(editor) {
 
     for (let i = 0; i < decoratorKeys.length; i++) {
       const nodeKey = decoratorKeys[i];
-      const reactDecorator = decorators[nodeKey];
+      const reactDecorator = /*#__PURE__*/React.createElement(ErrorBoundary$1, {
+        onError: e => editor._onError(e)
+      }, /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: null
+      }, decorators[nodeKey]));
       const element = editor.getElementByKey(nodeKey);
 
       if (element !== null) {
@@ -122,7 +211,7 @@ function useDecorators(editor) {
     }
 
     return decoratedPortals;
-  }, [decorators, editor]);
+  }, [ErrorBoundary$1, decorators, editor]);
 }
 
 /**
@@ -132,9 +221,9 @@ function useDecorators(editor) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function usePlainTextSetup(editor, initialEditorState) {
+function usePlainTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(plainText.registerPlainText(editor, initialEditorState), 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]);
 }
@@ -146,20 +235,22 @@ function usePlainTextSetup(editor, initialEditorState) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const deprecatedInitialEditorStateWarning = warnOnlyOnce('`initialEditorState` on `PlainTextPlugin` is deprecated and will be removed soon. Use the `initialConfig.editorState` prop on the `LexicalComposer` instead.');
 function PlainTextPlugin({
   contentEditable,
   placeholder,
-  initialEditorState
+  // TODO 0.6 Make non-optional non-default
+  ErrorBoundary: ErrorBoundary$1 = ({
+    children,
+    onError
+  }) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: null,
+    onError: onError
+  }, children)
 }) {
-  if (deprecatedInitialEditorStateWarning && initialEditorState !== undefined) {
-    deprecatedInitialEditorStateWarning();
-  }
-
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useCanShowPlaceholder(editor);
-  const decorators = useDecorators(editor);
-  usePlainTextSetup(editor, initialEditorState);
+  const decorators = useDecorators(editor, ErrorBoundary$1);
+  usePlainTextSetup(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }
 

package/LexicalPlainTextPlugin.js.flow

@@ -7,6 +7,7 @@
  * @flow strict
  */
 
+import type {ErrorBoundaryType} from './DEPRECATED_useLexicalDecorators';
 import type {EditorState, LexicalEditor} from 'lexical';
 
 type InitialEditorStateType =
@@ -17,6 +18,7 @@ type InitialEditorStateType =
 
 declare export function PlainTextPlugin({
   contentEditable: React$Node,
-  initialEditorState?: InitialEditorStateType,
   placeholder: React$Node,
+  // TODO 0.6 Make non-optional non-default
+  ErrorBoundary?: ErrorBoundaryType,
 }): React$Node;

package/LexicalPlainTextPlugin.prod.js

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/plain-text"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function t(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
-function u(a){let [c,f]=h.useState(()=>t(a));r(()=>{function b(){let g=t(a);f(g)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return c}
-function v(a){let [c,f]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{n.flushSync(()=>{f(b)})}),[a]);h.useEffect(()=>{f(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let k=0;k<g.length;k++){var e=g[k];let w=c[e];e=a.getElementByKey(e);null!==e&&b.push(n.createPortal(w,e))}return b},[c,a])}function x(a,c){r(()=>m.mergeRegister(q.registerPlainText(a,c),p.registerDragonSupport(a)),[a])}
-exports.PlainTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:f}){let [b]=d.useLexicalComposerContext(),g=u(b),e=v(b);x(b,f);return h.createElement(h.Fragment,null,a,g&&c,e)}
+'use strict';var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/plain-text");let t=(a=[],e=[])=>a.length!==e.length||a.some((c,b)=>!Object.is(c,e[b])),u={error:null};
+class v extends h.Component{constructor(a){super(a);this.state=u;this.resetErrorBoundary=this.resetErrorBoundary.bind(this)}static getDerivedStateFromError(a){return{error:a}}resetErrorBoundary(...a){this.props.onReset&&this.props.onReset(...a);this.reset()}reset(){this.setState(u)}componentDidCatch(a,e){this.props.onError&&this.props.onError(a,e)}componentDidUpdate(a,e){let {error:c}=this.state,{resetKeys:b}=this.props;null!==c&&null!==e.error&&t(a.resetKeys,b)&&(this.props.onResetKeysChange&&this.props.onResetKeysChange(a.resetKeys,
+b),this.reset())}render(){var {error:a}=this.state;let {fallbackRender:e,FallbackComponent:c,fallback:b}=this.props;if(null!==a){a={error:a,resetErrorBoundary:this.resetErrorBoundary};if(h.isValidElement(b))return b;if("function"===typeof e)return e(a);if(c)return h.createElement(c,a);throw Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");}return this.props.children}}
+var w="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function x(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}function y(a){let [e,c]=h.useState(()=>x(a));w(()=>{function b(){let f=x(a);c(f)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return e}
+function z(a,e=({children:c,onError:b})=>h.createElement(v,{fallback:null,onError:b},c)){let [c,b]=h.useState(()=>a.getDecorators());w(()=>a.registerDecoratorListener(f=>{n.flushSync(()=>{b(f)})}),[a]);h.useEffect(()=>{b(a.getDecorators())},[a]);return h.useMemo(()=>{let f=[],r=Object.keys(c);for(let k=0;k<r.length;k++){var g=r[k];let B=h.createElement(e,{onError:A=>a._onError(A)},h.createElement(h.Suspense,{fallback:null},c[g]));g=a.getElementByKey(g);null!==g&&f.push(n.createPortal(B,g))}return f},
+[e,c,a])}function C(a){w(()=>m.mergeRegister(q.registerPlainText(a),p.registerDragonSupport(a)),[a])}exports.PlainTextPlugin=function({contentEditable:a,placeholder:e,ErrorBoundary:c=({children:b,onError:f})=>h.createElement(v,{fallback:null,onError:f},b)}){let [b]=d.useLexicalComposerContext(),f=y(b);c=z(b,c);C(b);return h.createElement(h.Fragment,null,a,f&&e,c)}

package/LexicalRichTextPlugin.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { InitialEditorStateType } from '@lexical/rich-text';
-export declare function RichTextPlugin({ contentEditable, placeholder, initialEditorState, }: Readonly<{
+import { ErrorBoundaryType } from './shared/useDecorators';
+export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary, }: Readonly<{
     contentEditable: JSX.Element;
-    initialEditorState?: InitialEditorStateType;
     placeholder: JSX.Element | string;
+    ErrorBoundary?: ErrorBoundaryType;
 }>): JSX.Element;

package/LexicalRichTextPlugin.dev.js

@@ -21,16 +21,94 @@ var richText = require('@lexical/rich-text');
  * LICENSE file in the root directory of this source tree.
  *
  */
-function warnOnlyOnce(message) {
 
-  let run = false;
-  return () => {
-    if (!run) {
-      console.warn(message);
+const changedArray = (a = [], b = []) => a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+
+const initialState = {
+  error: null
+};
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = initialState;
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+  }
+
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+
+  resetErrorBoundary(...args) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onReset && this.props.onReset(...args);
+    this.reset();
+  }
+
+  reset() {
+    this.setState(initialState);
+  }
+
+  componentDidCatch(error, info) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onError && this.props.onError(error, info);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      error
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props; // There's an edge case where if the thing that triggered the error
+    // happens to *also* be in the resetKeys array, we'd end up resetting
+    // the error boundary immediately. This would likely trigger a second
+    // error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call
+    // of cDU after the error is set
+
+    if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
+      // @ts-ignore
+      // eslint-disable-next-line no-unused-expressions
+      this.props.onResetKeysChange && this.props.onResetKeysChange(prevProps.resetKeys, resetKeys);
+      this.reset();
     }
+  }
+
+  render() {
+    const {
+      error
+    } = this.state;
+    const {
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+
+    if (error !== null) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+
+      if ( /*#__PURE__*/React.isValidElement(fallback)) {
+        return fallback;
+      } else if (typeof fallbackRender === 'function') {
+        return fallbackRender(props);
+      } else if (FallbackComponent) {
+        return /*#__PURE__*/React.createElement(FallbackComponent, props);
+      } else {
+        throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');
+      }
+    }
+
+    return this.props.children;
+  }
 
-    run = true;
-  };
 }
 
 /**
@@ -90,7 +168,14 @@ function useCanShowPlaceholder(editor) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useDecorators(editor) {
+function useDecorators(editor, // TODO 0.6 Make non-optional non-default
+ErrorBoundary$1 = ({
+  children,
+  onError
+}) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+  fallback: null,
+  onError: onError
+}, children)) {
   const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
 
   useLayoutEffect(() => {
@@ -113,7 +198,11 @@ function useDecorators(editor) {
 
     for (let i = 0; i < decoratorKeys.length; i++) {
       const nodeKey = decoratorKeys[i];
-      const reactDecorator = decorators[nodeKey];
+      const reactDecorator = /*#__PURE__*/React.createElement(ErrorBoundary$1, {
+        onError: e => editor._onError(e)
+      }, /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: null
+      }, decorators[nodeKey]));
       const element = editor.getElementByKey(nodeKey);
 
       if (element !== null) {
@@ -122,7 +211,7 @@ function useDecorators(editor) {
     }
 
     return decoratedPortals;
-  }, [decorators, editor]);
+  }, [ErrorBoundary$1, decorators, editor]);
 }
 
 /**
@@ -132,9 +221,9 @@ function useDecorators(editor) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useRichTextSetup(editor, initialEditorState) {
+function useRichTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(richText.registerRichText(editor, initialEditorState), 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]);
 }
@@ -146,20 +235,22 @@ function useRichTextSetup(editor, initialEditorState) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const deprecatedInitialEditorStateWarning = warnOnlyOnce('`initialEditorState` on `RichTextPlugin` is deprecated and will be removed soon. Use the `initialConfig.editorState` prop on the `LexicalComposer` instead.');
 function RichTextPlugin({
   contentEditable,
   placeholder,
-  initialEditorState
+  // TODO 0.6 Make non-optional non-default
+  ErrorBoundary: ErrorBoundary$1 = ({
+    children,
+    onError
+  }) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: null,
+    onError: onError
+  }, children)
 }) {
-  if (deprecatedInitialEditorStateWarning && initialEditorState !== undefined) {
-    deprecatedInitialEditorStateWarning();
-  }
-
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useCanShowPlaceholder(editor);
-  const decorators = useDecorators(editor);
-  useRichTextSetup(editor, initialEditorState);
+  const decorators = useDecorators(editor, ErrorBoundary$1);
+  useRichTextSetup(editor);
   return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
 }
 

package/LexicalRichTextPlugin.js.flow

@@ -7,6 +7,7 @@
  * @flow strict
  */
 
+import type {ErrorBoundaryType} from './DEPRECATED_useLexicalDecorators';
 import type {EditorState, LexicalEditor} from 'lexical';
 
 type InitialEditorStateType =
@@ -17,6 +18,7 @@ type InitialEditorStateType =
 
 declare export function RichTextPlugin({
   contentEditable: React$Node,
-  initialEditorState?: InitialEditorStateType,
   placeholder: React$Node,
+  // TODO 0.6 Make non-optional non-default
+  ErrorBoundary?: ErrorBoundaryType,
 }): React$Node;

package/LexicalRichTextPlugin.prod.js

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/rich-text"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function t(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
-function u(a){let [c,f]=h.useState(()=>t(a));r(()=>{function b(){let g=t(a);f(g)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return c}
-function v(a){let [c,f]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{n.flushSync(()=>{f(b)})}),[a]);h.useEffect(()=>{f(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let k=0;k<g.length;k++){var e=g[k];let w=c[e];e=a.getElementByKey(e);null!==e&&b.push(n.createPortal(w,e))}return b},[c,a])}function x(a,c){r(()=>m.mergeRegister(q.registerRichText(a,c),p.registerDragonSupport(a)),[a])}
-exports.RichTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:f}){let [b]=d.useLexicalComposerContext(),g=u(b),e=v(b);x(b,f);return h.createElement(h.Fragment,null,a,g&&c,e)}
+'use strict';var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/rich-text");let t=(a=[],e=[])=>a.length!==e.length||a.some((c,b)=>!Object.is(c,e[b])),u={error:null};
+class v extends h.Component{constructor(a){super(a);this.state=u;this.resetErrorBoundary=this.resetErrorBoundary.bind(this)}static getDerivedStateFromError(a){return{error:a}}resetErrorBoundary(...a){this.props.onReset&&this.props.onReset(...a);this.reset()}reset(){this.setState(u)}componentDidCatch(a,e){this.props.onError&&this.props.onError(a,e)}componentDidUpdate(a,e){let {error:c}=this.state,{resetKeys:b}=this.props;null!==c&&null!==e.error&&t(a.resetKeys,b)&&(this.props.onResetKeysChange&&this.props.onResetKeysChange(a.resetKeys,
+b),this.reset())}render(){var {error:a}=this.state;let {fallbackRender:e,FallbackComponent:c,fallback:b}=this.props;if(null!==a){a={error:a,resetErrorBoundary:this.resetErrorBoundary};if(h.isValidElement(b))return b;if("function"===typeof e)return e(a);if(c)return h.createElement(c,a);throw Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");}return this.props.children}}
+var w="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function x(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}function y(a){let [e,c]=h.useState(()=>x(a));w(()=>{function b(){let f=x(a);c(f)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return e}
+function z(a,e=({children:c,onError:b})=>h.createElement(v,{fallback:null,onError:b},c)){let [c,b]=h.useState(()=>a.getDecorators());w(()=>a.registerDecoratorListener(f=>{n.flushSync(()=>{b(f)})}),[a]);h.useEffect(()=>{b(a.getDecorators())},[a]);return h.useMemo(()=>{let f=[],r=Object.keys(c);for(let k=0;k<r.length;k++){var g=r[k];let B=h.createElement(e,{onError:A=>a._onError(A)},h.createElement(h.Suspense,{fallback:null},c[g]));g=a.getElementByKey(g);null!==g&&f.push(n.createPortal(B,g))}return f},
+[e,c,a])}function C(a){w(()=>m.mergeRegister(q.registerRichText(a),p.registerDragonSupport(a)),[a])}exports.RichTextPlugin=function({contentEditable:a,placeholder:e,ErrorBoundary:c=({children:b,onError:f})=>h.createElement(v,{fallback:null,onError:f},b)}){let [b]=d.useLexicalComposerContext(),f=y(b);c=z(b,c);C(b);return h.createElement(h.Fragment,null,a,f&&e,c)}

package/LexicalTableOfContents__EXPERIMENTAL.js.flow

@@ -10,7 +10,7 @@
 import type {HeadingTagType} from '@lexical/rich-text';
 import type {NodeKey} from 'lexical';
 
-declare export function LexicalTableOfContentsPlugin({
+declare export default function LexicalTableOfContentsPlugin({
   children: (
     tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
   ) => React$Node,

package/LexicalTablePlugin.dev.js

@@ -44,7 +44,7 @@ function TablePlugin() {
       if (focusNode !== null) {
         const tableNode = table.$createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
 
-        if (lexical.$isRootNode(focusNode)) {
+        if (lexical.$isRootOrShadowRoot(focusNode)) {
           const target = focusNode.getChildAtIndex(focus.offset);
 
           if (target !== null) {

package/LexicalTablePlugin.prod.js

@@ -6,5 +6,5 @@
  */
 'use strict';var e=require("@lexical/react/LexicalComposerContext"),f=require("@lexical/table"),k=require("lexical"),m=require("react");
 exports.TablePlugin=function(){let [d]=e.useLexicalComposerContext();m.useEffect(()=>{if(!d.hasNodes([f.TableNode,f.TableCellNode,f.TableRowNode]))throw Error("Minified Lexical error #10; visit https://lexical.dev/docs/error?code=10 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");return d.registerCommand(f.INSERT_TABLE_COMMAND,({columns:a,rows:c,includeHeaders:g})=>{var b=k.$getSelection();if(!k.$isRangeSelection(b))return!0;let h=b.focus;
-b=h.getNode();null!==b&&(a=f.$createTableNodeWithDimensions(Number(c),Number(a),g),k.$isRootNode(b)?(c=b.getChildAtIndex(h.offset),null!==c?c.insertBefore(a):b.append(a),a.insertBefore(k.$createParagraphNode())):b.getTopLevelElementOrThrow().insertAfter(a),a.insertAfter(k.$createParagraphNode()),a.getFirstChildOrThrow().getFirstChildOrThrow().select());return!0},k.COMMAND_PRIORITY_EDITOR)},[d]);m.useEffect(()=>{let a=new Map;return d.registerMutationListener(f.TableNode,c=>{for(let [g,b]of c)"created"===
+b=h.getNode();null!==b&&(a=f.$createTableNodeWithDimensions(Number(c),Number(a),g),k.$isRootOrShadowRoot(b)?(c=b.getChildAtIndex(h.offset),null!==c?c.insertBefore(a):b.append(a),a.insertBefore(k.$createParagraphNode())):b.getTopLevelElementOrThrow().insertAfter(a),a.insertAfter(k.$createParagraphNode()),a.getFirstChildOrThrow().getFirstChildOrThrow().select());return!0},k.COMMAND_PRIORITY_EDITOR)},[d]);m.useEffect(()=>{let a=new Map;return d.registerMutationListener(f.TableNode,c=>{for(let [g,b]of c)"created"===
 b?d.update(()=>{var h=d.getElementByKey(g);let l=k.$getNodeByKey(g);h&&l&&(h=f.applyTableHandlers(l,h,d),a.set(g,h))}):"destroyed"===b&&(c=a.get(g),void 0!==c&&(c.removeListeners(),a.delete(g)))})},[d]);return null}

package/LexicalTreeView.dev.js

@@ -8,6 +8,7 @@
 
 var link = require('@lexical/link');
 var mark = require('@lexical/mark');
+var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var React = require('react');
 
@@ -47,19 +48,20 @@ function TreeView({
   const inputRef = React.useRef(null);
   const [isPlaying, setIsPlaying] = React.useState(false);
   React.useEffect(() => {
-    setContent(generateContent(editor.getEditorState()));
-    return editor.registerUpdateListener(({
+    setContent(generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable));
+    return utils.mergeRegister(editor.registerUpdateListener(({
       editorState
     }) => {
-      const compositionKey = editor._compositionKey;
-      const treeText = generateContent(editor.getEditorState());
-      const compositionText = compositionKey !== null && `Composition key: ${compositionKey}`;
-      setContent([treeText, compositionText].filter(Boolean).join('\n\n'));
+      const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
+      setContent(treeText);
 
       if (!timeTravelEnabled) {
         setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
       }
-    });
+    }), editor.registerEditableListener(() => {
+      const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
+      setContent(treeText);
+    }));
   }, [timeTravelEnabled, editor]);
   const totalEditorStates = timeStampedEditorStates.length;
   React.useEffect(() => {
@@ -130,6 +132,10 @@ function TreeView({
   }, /*#__PURE__*/React.createElement("button", {
     className: timeTravelPanelButtonClassName,
     onClick: () => {
+      if (playingIndexRef.current === totalEditorStates - 1) {
+        playingIndexRef.current = 1;
+      }
+
       setIsPlaying(!isPlaying);
     },
     type: "button"
@@ -193,7 +199,7 @@ function printGridSelection(selection) {
   return `: grid\n  └ { grid: ${selection.gridKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
 }
 
-function generateContent(editorState) {
+function generateContent(editorState, editorConfig, compositionKey, editable) {
   let res = ' root\n';
   const selectionString = editorState.read(() => {
     const selection = lexical.$getSelection();
@@ -213,9 +219,18 @@ function generateContent(editorState) {
         typeDisplay
       });
     });
-    return selection === null ? ': null' : lexical.$isRangeSelection(selection) ? printRangeSelection(selection) : lexical.$isGridSelection(selection) ? printGridSelection(selection) : printObjectSelection(selection);
+    return selection === null ? ': null' : lexical.$isRangeSelection(selection) ? printRangeSelection(selection) : lexical.DEPRECATED_$isGridSelection(selection) ? printGridSelection(selection) : printObjectSelection(selection);
   });
-  return res + '\n selection' + selectionString;
+  res += '\n selection' + selectionString;
+  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 = []) {
@@ -237,7 +252,7 @@ function normalize(text) {
 
 function printNode(node) {
   if (lexical.$isTextNode(node)) {
-    const text = node.getTextContent(true);
+    const text = node.getTextContent();
     const title = text.length === 0 ? '(empty)' : `"${normalize(text)}"`;
     const properties = printAllTextNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
@@ -253,7 +268,7 @@ function printNode(node) {
 
 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', node => node.isInert() && 'Inert'];
+const MODE_PREDICATES = [node => node.isToken() && 'Token', node => node.isSegmented() && 'Segmented'];
 
 function printAllTextNodeProperties(node) {
   return [printFormatProperties(node), printDetailProperties(node), printModeProperties(node)].filter(Boolean).join(', ');
@@ -353,7 +368,7 @@ function printSelectedCharsLine({
 function $getSelectionStartEnd(node, selection) {
   const anchor = selection.anchor;
   const focus = selection.focus;
-  const textContent = node.getTextContent(true);
+  const textContent = node.getTextContent();
   const textLength = textContent.length;
   let start = -1;
   let end = -1; // Only one node is being selected.