@lexical/react 0.6.4 → 0.7.0

package/DEPRECATED_useLexical.dev.js

@@ -39,7 +39,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing()));
   return currentCanShowPlaceholder;
 }
 

package/DEPRECATED_useLexical.prod.js

@@ -4,5 +4,5 @@
  * 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 c=require("lexical"),f=require("react"),g=require("@lexical/text"),h=require("@lexical/utils"),k="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?f.useLayoutEffect:f.useEffect;function l(a){return a.getEditorState().read(g.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
+'use strict';var c=require("lexical"),f=require("react"),g=require("@lexical/text"),h=require("@lexical/utils"),k="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?f.useLayoutEffect:f.useEffect;function l(a){return a.getEditorState().read(g.$canShowPlaceholderCurry(a.isComposing()))}
 function m(a){let [b,d]=f.useState(()=>l(a));k(()=>{function e(){let n=l(a);d(n)}e();return h.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerEditableListener(()=>{e()}))},[a]);return b}function p(a){let b=m(a);return[f.useCallback(d=>{a.setRootElement(d)},[a]),b]}exports.useLexical=function(a){let b=f.useMemo(()=>c.createEditor(a),[]),[d,e]=p(b);return[b,d,e]}

package/DEPRECATED_useLexicalCanShowPlaceholder.dev.js

@@ -38,7 +38,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing()));
   return currentCanShowPlaceholder;
 }
 

package/DEPRECATED_useLexicalCanShowPlaceholder.prod.js

@@ -4,5 +4,5 @@
  * 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 b=require("@lexical/text"),d=require("@lexical/utils"),e=require("react"),f="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?e.useLayoutEffect:e.useEffect;function g(a){return a.getEditorState().read(b.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
+'use strict';var b=require("@lexical/text"),d=require("@lexical/utils"),e=require("react"),f="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?e.useLayoutEffect:e.useEffect;function g(a){return a.getEditorState().read(b.$canShowPlaceholderCurry(a.isComposing()))}
 function h(a){let [k,l]=e.useState(()=>g(a));f(()=>{function c(){let m=g(a);l(m)}c();return d.mergeRegister(a.registerUpdateListener(()=>{c()}),a.registerEditableListener(()=>{c()}))},[a]);return k}exports.useLexicalCanShowPlaceholder=function(a){return h(a)}

package/DEPRECATED_useLexicalEditor.dev.js

@@ -38,7 +38,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing()));
   return currentCanShowPlaceholder;
 }
 

package/DEPRECATED_useLexicalEditor.prod.js

@@ -4,5 +4,5 @@
  * 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 b=require("react"),f=require("@lexical/text"),g=require("@lexical/utils"),h="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?b.useLayoutEffect:b.useEffect;function k(a){return a.getEditorState().read(f.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
+'use strict';var b=require("react"),f=require("@lexical/text"),g=require("@lexical/utils"),h="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?b.useLayoutEffect:b.useEffect;function k(a){return a.getEditorState().read(f.$canShowPlaceholderCurry(a.isComposing()))}
 function l(a){let [c,d]=b.useState(()=>k(a));h(()=>{function e(){let m=k(a);d(m)}e();return g.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerEditableListener(()=>{e()}))},[a]);return c}exports.useLexicalEditor=function(a){let c=l(a);return[b.useCallback(d=>{a.setRootElement(d)},[a]),c]}

package/LexicalAutoEmbedPlugin.d.ts

@@ -8,14 +8,15 @@
 import type { LexicalNode } from 'lexical';
 import { MenuRenderFn, TypeaheadOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { LexicalCommand, LexicalEditor } from 'lexical';
-export declare type EmbedMatchResult = {
+export declare type EmbedMatchResult<TEmbedMatchResult = unknown> = {
     url: string;
     id: string;
+    data?: TEmbedMatchResult;
 };
-export interface EmbedConfig {
+export interface EmbedConfig<TEmbedMatchResultData = unknown, TEmbedMatchResult = EmbedMatchResult<TEmbedMatchResultData>> {
     type: string;
-    parseUrl: (text: string) => EmbedMatchResult | null;
-    insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => void;
+    parseUrl: (text: string) => Promise<TEmbedMatchResult | null> | TEmbedMatchResult | null;
+    insertNode: (editor: LexicalEditor, result: TEmbedMatchResult) => void;
 }
 export declare const URL_MATCHER: RegExp;
 export declare const INSERT_EMBED_COMMAND: LexicalCommand<EmbedConfig['type']>;

package/LexicalAutoEmbedPlugin.dev.js

@@ -44,15 +44,18 @@ function LexicalAutoEmbedPlugin({
     setActiveEmbedConfig(null);
   }, []);
   const checkIfLinkNodeIsEmbeddable = React.useCallback(key => {
-    editor.getEditorState().read(() => {
+    editor.getEditorState().read(async () => {
       const linkNode = lexical.$getNodeByKey(key);
 
       if (link.$isLinkNode(linkNode)) {
-        const embedConfigMatch = embedConfigs.find(embedConfig => embedConfig.parseUrl(linkNode.__url));
+        for (let i = 0; i < embedConfigs.length; i++) {
+          const embedConfig = embedConfigs[i];
+          const urlMatch = await Promise.resolve(embedConfig.parseUrl(linkNode.__url));
 
-        if (embedConfigMatch != null) {
-          setActiveEmbedConfig(embedConfigMatch);
-          setNodeKey(linkNode.getKey());
+          if (urlMatch != null) {
+            setActiveEmbedConfig(embedConfig);
+            setNodeKey(linkNode.getKey());
+          }
         }
       }
     });
@@ -87,7 +90,7 @@ function LexicalAutoEmbedPlugin({
       return false;
     }, lexical.COMMAND_PRIORITY_EDITOR);
   }, [editor, embedConfigs, onOpenEmbedModalForConfig]);
-  const embedLinkViaActiveEmbedConfig = React.useCallback(() => {
+  const embedLinkViaActiveEmbedConfig = React.useCallback(async () => {
     if (activeEmbedConfig != null && nodeKey != null) {
       const linkNode = editor.getEditorState().read(() => {
         const node = lexical.$getNodeByKey(nodeKey);
@@ -100,18 +103,16 @@ function LexicalAutoEmbedPlugin({
       });
 
       if (link.$isLinkNode(linkNode)) {
-        const result = activeEmbedConfig.parseUrl(linkNode.__url);
+        const result = await Promise.resolve(activeEmbedConfig.parseUrl(linkNode.__url));
 
         if (result != null) {
           editor.update(() => {
             activeEmbedConfig.insertNode(editor, result);
-          });
 
-          if (linkNode.isAttached()) {
-            editor.update(() => {
+            if (linkNode.isAttached()) {
               linkNode.remove();
-            });
-          }
+            }
+          });
         }
       }
     }

package/LexicalAutoEmbedPlugin.prod.js

@@ -4,7 +4,7 @@
  * 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/link"),k=require("@lexical/react/LexicalComposerContext"),m=require("@lexical/react/LexicalTypeaheadMenuPlugin"),q=require("@lexical/utils"),r=require("lexical"),z=require("react");let A=r.createCommand("INSERT_EMBED_COMMAND");class B extends m.TypeaheadOption{constructor(g,n){super(g);this.title=g;this.onSelect=n.onSelect.bind(this)}}exports.AutoEmbedOption=B;exports.INSERT_EMBED_COMMAND=A;
-exports.LexicalAutoEmbedPlugin=function({embedConfigs:g,onOpenEmbedModalForConfig:n,getMenuOptions:t,menuRenderFn:C}){let [b]=k.useLexicalComposerContext(),[f,u]=z.useState(null),[h,v]=z.useState(null),l=z.useCallback(()=>{u(null);v(null)},[]),w=z.useCallback(c=>{b.getEditorState().read(()=>{const a=r.$getNodeByKey(c);if(d.$isLinkNode(a)){const e=g.find(p=>p.parseUrl(a.__url));null!=e&&(v(e),u(a.getKey()))}})},[b,g]);z.useEffect(()=>{let c=(a,{updateTags:e,dirtyLeaves:p})=>{for(const [x,D]of a)"created"===
-D&&e.has("paste")&&1===p.size?w(x):x===f&&l()};return q.mergeRegister(...[d.LinkNode,d.AutoLinkNode].map(a=>b.registerMutationListener(a,(...e)=>c(...e))))},[w,b,g,f,l]);z.useEffect(()=>b.registerCommand(A,c=>{let a=g.find(({type:e})=>e===c);return a?(n(a),!0):!1},r.COMMAND_PRIORITY_EDITOR),[b,g,n]);let y=z.useCallback(()=>{if(null!=h&&null!=f){const c=b.getEditorState().read(()=>{const a=r.$getNodeByKey(f);return d.$isLinkNode(a)?a:null});if(d.$isLinkNode(c)){const a=h.parseUrl(c.__url);null!=a&&
-(b.update(()=>{h.insertNode(b,a)}),c.isAttached()&&b.update(()=>{c.remove()}))}}},[h,b,f]),E=z.useMemo(()=>null!=h&&null!=f?t(h,y,l):[],[h,y,t,f,l]),F=z.useCallback((c,a,e)=>{b.update(()=>{c.onSelect(a);e()})},[b]);return null!=f?z.createElement(m.LexicalNodeMenuPlugin,{nodeKey:f,onClose:l,onSelectOption:F,options:E,menuRenderFn:C}):null};exports.URL_MATCHER=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/
+'use strict';var e=require("@lexical/link"),k=require("@lexical/react/LexicalComposerContext"),m=require("@lexical/react/LexicalTypeaheadMenuPlugin"),q=require("@lexical/utils"),r=require("lexical"),z=require("react");let A=r.createCommand("INSERT_EMBED_COMMAND");class B extends m.TypeaheadOption{constructor(f,n){super(f);this.title=f;this.onSelect=n.onSelect.bind(this)}}exports.AutoEmbedOption=B;exports.INSERT_EMBED_COMMAND=A;
+exports.LexicalAutoEmbedPlugin=function({embedConfigs:f,onOpenEmbedModalForConfig:n,getMenuOptions:t,menuRenderFn:C}){let [b]=k.useLexicalComposerContext(),[g,u]=z.useState(null),[h,v]=z.useState(null),l=z.useCallback(()=>{u(null);v(null)},[]),w=z.useCallback(c=>{b.getEditorState().read(async()=>{const a=r.$getNodeByKey(c);if(e.$isLinkNode(a))for(let d=0;d<f.length;d++){const p=f[d];null!=await Promise.resolve(p.parseUrl(a.__url))&&(v(p),u(a.getKey()))}})},[b,f]);z.useEffect(()=>{let c=(a,{updateTags:d,
+dirtyLeaves:p})=>{for(const [x,D]of a)"created"===D&&d.has("paste")&&1===p.size?w(x):x===g&&l()};return q.mergeRegister(...[e.LinkNode,e.AutoLinkNode].map(a=>b.registerMutationListener(a,(...d)=>c(...d))))},[w,b,f,g,l]);z.useEffect(()=>b.registerCommand(A,c=>{let a=f.find(({type:d})=>d===c);return a?(n(a),!0):!1},r.COMMAND_PRIORITY_EDITOR),[b,f,n]);let y=z.useCallback(async()=>{if(null!=h&&null!=g){const c=b.getEditorState().read(()=>{const a=r.$getNodeByKey(g);return e.$isLinkNode(a)?a:null});if(e.$isLinkNode(c)){const a=
+await Promise.resolve(h.parseUrl(c.__url));null!=a&&b.update(()=>{h.insertNode(b,a);c.isAttached()&&c.remove()})}}},[h,b,g]),E=z.useMemo(()=>null!=h&&null!=g?t(h,y,l):[],[h,y,t,g,l]),F=z.useCallback((c,a,d)=>{b.update(()=>{c.onSelect(a);d()})},[b]);return null!=g?z.createElement(m.LexicalNodeMenuPlugin,{nodeKey:g,onClose:l,onSelectOption:F,options:E,menuRenderFn:C}):null};exports.URL_MATCHER=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/

package/LexicalAutoFocusPlugin.dev.js

@@ -29,7 +29,7 @@ function AutoFocusPlugin({
       const activeElement = document.activeElement;
       const rootElement = editor.getRootElement();
 
-      if (!rootElement.contains(activeElement) || rootElement !== null || activeElement === null) {
+      if (rootElement !== null && (activeElement === null || !rootElement.contains(activeElement))) {
         // Note: preventScroll won't work in Webkit.
         rootElement.focus({
           preventScroll: true

package/LexicalAutoFocusPlugin.prod.js

@@ -4,4 +4,4 @@
  * 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 e=require("@lexical/react/LexicalComposerContext"),f=require("react");exports.AutoFocusPlugin=function({defaultSelection:c}){let [a]=e.useLexicalComposerContext();f.useEffect(()=>{a.focus(()=>{let d=document.activeElement,b=a.getRootElement();b.contains(d)&&null===b&&null!==d||b.focus({preventScroll:!0})},{defaultSelection:c})},[c,a]);return null}
+'use strict';var e=require("@lexical/react/LexicalComposerContext"),f=require("react");exports.AutoFocusPlugin=function({defaultSelection:c}){let [a]=e.useLexicalComposerContext();f.useEffect(()=>{a.focus(()=>{let d=document.activeElement,b=a.getRootElement();null===b||null!==d&&b.contains(d)||b.focus({preventScroll:!0})},{defaultSelection:c})},[c,a]);return null}

package/LexicalNodeEventPlugin.dev.js

@@ -45,11 +45,15 @@ function NodeEventPlugin({
   listenerRef.current = eventListener;
   useLayoutEffect(() => {
     return editor.registerMutationListener(nodeType, mutations => {
+      const registedElements = new WeakSet();
       editor.getEditorState().read(() => {
         for (const [key, mutation] of mutations) {
           const element = editor.getElementByKey(key);
 
-          if (mutation === 'created' && element !== null) {
+          if ( // Updated might be a move, so that might mean a new DOM element
+          // is created. In this case, we need to add and event listener too.
+          (mutation === 'created' || mutation === 'updated') && element !== null && !registedElements.has(element)) {
+            registedElements.add(element);
             element.addEventListener(eventType, event => {
               listenerRef.current(event, editor, key);
             });

package/LexicalNodeEventPlugin.prod.js

@@ -4,5 +4,5 @@
  * 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 b=require("@lexical/react/LexicalComposerContext"),h=require("react"),k="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
-exports.NodeEventPlugin=function({nodeType:c,eventType:l,eventListener:d}){let [a]=b.useLexicalComposerContext(),e=h.useRef(d);e.current=d;k(()=>a.registerMutationListener(c,m=>{a.getEditorState().read(()=>{for(let [f,n]of m){let g=a.getElementByKey(f);"created"===n&&null!==g&&g.addEventListener(l,p=>{e.current(p,a,f)})}})}),[a,c]);return null}
+'use strict';var c=require("@lexical/react/LexicalComposerContext"),l=require("react"),m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?l.useLayoutEffect:l.useEffect;
+exports.NodeEventPlugin=function({nodeType:d,eventType:n,eventListener:e}){let [a]=c.useLexicalComposerContext(),f=l.useRef(e);f.current=e;m(()=>a.registerMutationListener(d,p=>{let g=new WeakSet;a.getEditorState().read(()=>{for(let [h,k]of p){let b=a.getElementByKey(h);"created"!==k&&"updated"!==k||null===b||g.has(b)||(g.add(b),b.addEventListener(n,q=>{f.current(q,a,h)}))}})}),[a,d]);return null}

package/LexicalPlainTextPlugin.d.ts

@@ -8,6 +8,6 @@
 import { ErrorBoundaryType } from './shared/useDecorators';
 export declare function PlainTextPlugin({ contentEditable, placeholder, ErrorBoundary, }: {
     contentEditable: JSX.Element;
-    placeholder: JSX.Element | string;
+    placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
     ErrorBoundary: ErrorBoundaryType;
 }): JSX.Element;

package/LexicalPlainTextPlugin.dev.js

@@ -7,6 +7,7 @@
 'use strict';
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var useLexicalEditable = require('@lexical/react/useLexicalEditable');
 var React = require('react');
 var text = require('@lexical/text');
 var utils = require('@lexical/utils');
@@ -42,7 +43,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing()));
   return currentCanShowPlaceholder;
 }
 
@@ -137,10 +138,29 @@ function PlainTextPlugin({
   ErrorBoundary
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const showPlaceholder = useCanShowPlaceholder(editor);
   const decorators = useDecorators(editor, ErrorBoundary);
   usePlainTextSetup(editor);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, /*#__PURE__*/React.createElement(Placeholder, {
+    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 {
+    return content;
+  }
 }
 
 exports.PlainTextPlugin = PlainTextPlugin;

package/LexicalPlainTextPlugin.js.flow

@@ -18,6 +18,6 @@ type InitialEditorStateType =
 
 declare export function PlainTextPlugin({
   contentEditable: React$Node,
-  placeholder: React$Node,
+  placeholder: ((isEditable: boolean) => React$Node) | React$Node,
   ErrorBoundary: ErrorBoundaryType,
 }): React$Node;

package/LexicalPlainTextPlugin.prod.js

@@ -4,7 +4,7 @@
  * 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 b=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),q=require("@lexical/dragon"),r=require("@lexical/plain-text"),t="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function u(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
-function v(a){let [f,d]=h.useState(()=>u(a));t(()=>{function c(){let e=u(a);d(e)}c();return m.mergeRegister(a.registerUpdateListener(()=>{c()}),a.registerEditableListener(()=>{c()}))},[a]);return f}
-function w(a,f){let [d,c]=h.useState(()=>a.getDecorators());t(()=>a.registerDecoratorListener(e=>{n.flushSync(()=>{c(e)})}),[a]);h.useEffect(()=>{c(a.getDecorators())},[a]);return h.useMemo(()=>{let e=[],p=Object.keys(d);for(let k=0;k<p.length;k++){var g=p[k];let y=h.createElement(f,{onError:x=>a._onError(x)},h.createElement(h.Suspense,{fallback:null},d[g]));g=a.getElementByKey(g);null!==g&&e.push(n.createPortal(y,g))}return e},[f,d,a])}
-function z(a){t(()=>m.mergeRegister(r.registerPlainText(a),q.registerDragonSupport(a)),[a])}exports.PlainTextPlugin=function({contentEditable:a,placeholder:f,ErrorBoundary:d}){let [c]=b.useLexicalComposerContext(),e=v(c);d=w(c,d);z(c);return h.createElement(h.Fragment,null,a,e&&f,d)}
+'use strict';var b=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/react/useLexicalEditable"),l=require("react"),m=require("@lexical/text"),n=require("@lexical/utils"),p=require("react-dom"),r=require("@lexical/dragon"),t=require("@lexical/plain-text"),u="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?l.useLayoutEffect:l.useEffect;
+function v(a){return a.getEditorState().read(m.$canShowPlaceholderCurry(a.isComposing()))}function w(a){let [d,c]=l.useState(()=>v(a));u(()=>{function e(){let f=v(a);c(f)}e();return n.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerEditableListener(()=>{e()}))},[a]);return d}
+function x(a,d){let [c,e]=l.useState(()=>a.getDecorators());u(()=>a.registerDecoratorListener(f=>{p.flushSync(()=>{e(f)})}),[a]);l.useEffect(()=>{e(a.getDecorators())},[a]);return l.useMemo(()=>{let f=[],q=Object.keys(c);for(let k=0;k<q.length;k++){var g=q[k];let z=l.createElement(d,{onError:y=>a._onError(y)},l.createElement(l.Suspense,{fallback:null},c[g]));g=a.getElementByKey(g);null!==g&&f.push(p.createPortal(z,g))}return f},[d,c,a])}
+function A(a){u(()=>n.mergeRegister(t.registerPlainText(a),r.registerDragonSupport(a)),[a])}function B({content:a}){var [d]=b.useLexicalComposerContext();d=w(d);let c=h();return d?"function"===typeof a?a(c):a:null}exports.PlainTextPlugin=function({contentEditable:a,placeholder:d,ErrorBoundary:c}){let [e]=b.useLexicalComposerContext();c=x(e,c);A(e);return l.createElement(l.Fragment,null,a,l.createElement(B,{content:d}),c)}

package/LexicalRichTextPlugin.d.ts

@@ -6,8 +6,8 @@
  *
  */
 import { ErrorBoundaryType } from './shared/useDecorators';
-export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary, }: Readonly<{
+export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary, }: {
     contentEditable: JSX.Element;
-    placeholder: JSX.Element | string;
+    placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
     ErrorBoundary: ErrorBoundaryType;
-}>): JSX.Element;
+}): JSX.Element;

package/LexicalRichTextPlugin.dev.js

@@ -7,6 +7,7 @@
 'use strict';
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var useLexicalEditable = require('@lexical/react/useLexicalEditable');
 var React = require('react');
 var text = require('@lexical/text');
 var utils = require('@lexical/utils');
@@ -42,7 +43,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing()));
   return currentCanShowPlaceholder;
 }
 
@@ -137,10 +138,29 @@ function RichTextPlugin({
   ErrorBoundary
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const showPlaceholder = useCanShowPlaceholder(editor);
   const decorators = useDecorators(editor, ErrorBoundary);
   useRichTextSetup(editor);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, showPlaceholder && placeholder, decorators);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, /*#__PURE__*/React.createElement(Placeholder, {
+    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 {
+    return content;
+  }
 }
 
 exports.RichTextPlugin = RichTextPlugin;

package/LexicalRichTextPlugin.js.flow

@@ -18,6 +18,6 @@ type InitialEditorStateType =
 
 declare export function RichTextPlugin({
   contentEditable: React$Node,
-  placeholder: React$Node,
+  placeholder: ((isEditable: boolean) => React$Node) | React$Node,
   ErrorBoundary: ErrorBoundaryType,
 }): React$Node;

package/LexicalRichTextPlugin.prod.js

@@ -4,7 +4,7 @@
  * 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 b=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),q=require("@lexical/dragon"),r=require("@lexical/rich-text"),t="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function u(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
-function v(a){let [f,d]=h.useState(()=>u(a));t(()=>{function c(){let e=u(a);d(e)}c();return m.mergeRegister(a.registerUpdateListener(()=>{c()}),a.registerEditableListener(()=>{c()}))},[a]);return f}
-function w(a,f){let [d,c]=h.useState(()=>a.getDecorators());t(()=>a.registerDecoratorListener(e=>{n.flushSync(()=>{c(e)})}),[a]);h.useEffect(()=>{c(a.getDecorators())},[a]);return h.useMemo(()=>{let e=[],p=Object.keys(d);for(let k=0;k<p.length;k++){var g=p[k];let y=h.createElement(f,{onError:x=>a._onError(x)},h.createElement(h.Suspense,{fallback:null},d[g]));g=a.getElementByKey(g);null!==g&&e.push(n.createPortal(y,g))}return e},[f,d,a])}
-function z(a){t(()=>m.mergeRegister(r.registerRichText(a),q.registerDragonSupport(a)),[a])}exports.RichTextPlugin=function({contentEditable:a,placeholder:f,ErrorBoundary:d}){let [c]=b.useLexicalComposerContext(),e=v(c);d=w(c,d);z(c);return h.createElement(h.Fragment,null,a,e&&f,d)}
+'use strict';var b=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/react/useLexicalEditable"),l=require("react"),m=require("@lexical/text"),n=require("@lexical/utils"),p=require("react-dom"),r=require("@lexical/dragon"),t=require("@lexical/rich-text"),u="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?l.useLayoutEffect:l.useEffect;
+function v(a){return a.getEditorState().read(m.$canShowPlaceholderCurry(a.isComposing()))}function w(a){let [d,c]=l.useState(()=>v(a));u(()=>{function e(){let f=v(a);c(f)}e();return n.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerEditableListener(()=>{e()}))},[a]);return d}
+function x(a,d){let [c,e]=l.useState(()=>a.getDecorators());u(()=>a.registerDecoratorListener(f=>{p.flushSync(()=>{e(f)})}),[a]);l.useEffect(()=>{e(a.getDecorators())},[a]);return l.useMemo(()=>{let f=[],q=Object.keys(c);for(let k=0;k<q.length;k++){var g=q[k];let z=l.createElement(d,{onError:y=>a._onError(y)},l.createElement(l.Suspense,{fallback:null},c[g]));g=a.getElementByKey(g);null!==g&&f.push(p.createPortal(z,g))}return f},[d,c,a])}
+function A(a){u(()=>n.mergeRegister(t.registerRichText(a),r.registerDragonSupport(a)),[a])}function B({content:a}){var [d]=b.useLexicalComposerContext();d=w(d);let c=h();return d?"function"===typeof a?a(c):a:null}exports.RichTextPlugin=function({contentEditable:a,placeholder:d,ErrorBoundary:c}){let [e]=b.useLexicalComposerContext();c=x(e,c);A(e);return l.createElement(l.Fragment,null,a,l.createElement(B,{content:d}),c)}

package/LexicalTabIndentationPlugin.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+/**
+ * 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.
+ */
+export declare function TabIndentationPlugin(): null;

package/LexicalTabIndentationPlugin.dev.js

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var react = require('react');
+
+/**
+ * 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.
+ *
+ */
+/**
+ * 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);
+  });
+  return null;
+}
+
+exports.TabIndentationPlugin = TabIndentationPlugin;

package/LexicalTabIndentationPlugin.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+'use strict'
+const LexicalTabIndentationPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalTabIndentationPlugin.dev.js') : require('./LexicalTabIndentationPlugin.prod.js')
+module.exports = LexicalTabIndentationPlugin;

package/LexicalTabIndentationPlugin.prod.js

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+'use strict';var a=require("@lexical/react/LexicalComposerContext"),d=require("lexical"),e=require("react");exports.TabIndentationPlugin=function(){let [b]=a.useLexicalComposerContext();e.useEffect(()=>b.registerCommand(d.KEY_TAB_COMMAND,c=>{let f=d.$getSelection();if(!d.$isRangeSelection(f))return!1;c.preventDefault();return b.dispatchCommand(c.shiftKey?d.OUTDENT_CONTENT_COMMAND:d.INDENT_CONTENT_COMMAND,void 0)},d.COMMAND_PRIORITY_EDITOR));return null}

package/LexicalTreeView.dev.js

@@ -47,22 +47,40 @@ function TreeView({
   const treeElementRef = React.useRef(null);
   const inputRef = React.useRef(null);
   const [isPlaying, setIsPlaying] = React.useState(false);
+  const [isLimited, setIsLimited] = React.useState(false);
+  const [showLimited, setShowLimited] = React.useState(false);
+  const lastEditorStateRef = React.useRef(null);
+  const generateTree = React.useCallback(editorState => {
+    const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
+    setContent(treeText);
+
+    if (!timeTravelEnabled) {
+      setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
+    }
+  }, [editor, timeTravelEnabled]);
   React.useEffect(() => {
     setContent(generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable));
+  }, [editor]);
+  React.useEffect(() => {
     return utils.mergeRegister(editor.registerUpdateListener(({
-      editorState
+      editorState,
+      dirtyLeaves
     }) => {
-      const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
-      setContent(treeText);
+      if (!showLimited && dirtyLeaves.size > 1000) {
+        lastEditorStateRef.current = editorState;
+        setIsLimited(true);
 
-      if (!timeTravelEnabled) {
-        setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
+        if (!showLimited) {
+          return;
+        }
       }
+
+      generateTree(editorState);
     }), editor.registerEditableListener(() => {
       const treeText = generateContent(editor.getEditorState(), editor._config, editor._compositionKey, editor._editable);
       setContent(treeText);
     }));
-  }, [timeTravelEnabled, editor]);
+  }, [editor, isLimited, generateTree, showLimited]);
   const totalEditorStates = timeStampedEditorStates.length;
   React.useEffect(() => {
     if (isPlaying) {
@@ -113,7 +131,32 @@ function TreeView({
   }, [editor]);
   return /*#__PURE__*/React.createElement("div", {
     className: viewClassName
-  }, !timeTravelEnabled && totalEditorStates > 2 && /*#__PURE__*/React.createElement("button", {
+  }, !showLimited && isLimited ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginRight: 20
+    }
+  }, "Detected large EditorState, this can impact debugging performance."), /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      setShowLimited(true);
+      const editorState = lastEditorStateRef.current;
+
+      if (editorState !== null) {
+        lastEditorStateRef.current = null;
+        generateTree(editorState);
+      }
+    },
+    style: {
+      background: 'transparent',
+      border: '1px solid white',
+      color: 'white',
+      cursor: 'pointer',
+      padding: 5
+    }
+  }, "Show full tree")) : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/React.createElement("button", {
     onClick: () => {
       const rootElement = editor.getRootElement();
 
@@ -125,9 +168,9 @@ function TreeView({
     },
     className: timeTravelButtonClassName,
     type: "button"
-  }, "Time Travel"), /*#__PURE__*/React.createElement("pre", {
+  }, "Time Travel"), (showLimited || !isLimited) && /*#__PURE__*/React.createElement("pre", {
     ref: treeElementRef
-  }, content), timeTravelEnabled && /*#__PURE__*/React.createElement("div", {
+  }, content), timeTravelEnabled && (showLimited || !isLimited) && /*#__PURE__*/React.createElement("div", {
     className: timeTravelPanelClassName
   }, /*#__PURE__*/React.createElement("button", {
     className: timeTravelPanelButtonClassName,

package/LexicalTreeView.prod.js

@@ -4,18 +4,19 @@
  * 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 k=require("@lexical/link"),r=require("@lexical/mark"),v=require("@lexical/utils"),C=require("lexical"),D=require("react");let E=Object.freeze({"\t":"\\t","\n":"\\n"}),F=new RegExp(Object.keys(E).join("|"),"g"),G=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
-function H(a){let c="",e=K(a),l=a.anchor;a=a.focus;let f=l.offset,b=a.offset;c=c+`: range ${""!==e?`{ ${e} }`:""}`+`\n  \u251c anchor { key: ${l.key}, offset: ${null===f?"null":f}, type: ${l.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===b?"null":b}, type: ${a.type} }`}
-function L(a,c,e,l){let f=" root\n";a=a.read(()=>{const b=C.$getSelection();M(C.$getRoot(),(d,n)=>{const x=`(${d.getKey()})`,t=d.getType()||"",q=d.isSelected(),z=r.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var m=f,w=q?G.selectedLine:" ",A=n.join(" ");if(C.$isTextNode(d)){var h=d.getTextContent();var p=0===h.length?"(empty)":`"${N(h)}"`;h=[K(d),O(d),P(d)].filter(Boolean).join(", ");h=[p,0!==h.length?`{ ${h} }`:null].filter(Boolean).join(" ").trim()}else if(k.$isLinkNode(d)){h=d.getURL();
-h=0===h.length?"(empty)":`"${N(h)}"`;p=d.getTarget();null!=p&&(p="target: "+p);var y=Boolean;let g=d.getRel();null!=g&&(g="rel: "+g);p=[p,g].filter(y).join(", ");h=[h,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else h="";f=m+`${w} ${A} ${x} ${t} ${z} ${h}\n`;f+=Q({indent:n,isSelected:q,node:d,nodeKeyDisplay:x,selection:b,typeDisplay:t})});return null===b?": null":C.$isRangeSelection(b)?H(b):C.DEPRECATED_$isGridSelection(b)?`: grid\n  \u2514 { grid: ${b.gridKey}, anchorCell: ${b.anchor.key}, focusCell: ${b.focus.key} }`:
-`: node\n  \u2514 [${Array.from(b._nodes).join(", ")}]`});f+="\n selection"+a;f+="\n\n editor:";f+=`\n  \u2514 namespace ${c.namespace}`;null!==e&&(f+=`\n  \u2514 compositionKey ${e}`);return f+=`\n  \u2514 editable ${String(l)}`}function M(a,c,e=[]){a=a.getChildren();let l=a.length;a.forEach((f,b)=>{c(f,e.concat(b===l-1?G.isLastChild:G.hasNextSibling));C.$isElementNode(f)&&M(f,c,e.concat(b===l-1?G.ancestorIsLastChild:G.ancestorHasNextSibling))})}
-function N(a){return Object.entries(E).reduce((c,[e,l])=>c.replace(new RegExp(e,"g"),String(l)),a)}
-let R=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],S=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],T=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
-function O(a){let c=S.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function P(a){let c=T.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function K(a){let c=R.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
-function Q({indent:a,isSelected:c,node:e,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!C.$isTextNode(e)||!C.$isRangeSelection(f)||!c||C.$isElementNode(e))return"";c=f.anchor;var d=f.focus;if(""===e.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===d.offset)return"";d=f.anchor;let n=f.focus,x=e.getTextContent(),t=x.length;c=f=-1;if("text"===d.type&&"text"===n.type){let m=d.getNode(),w=n.getNode();m===w&&e===m&&d.offset!==n.offset?[f,c]=d.offset<n.offset?[d.offset,n.offset]:[n.offset,
-d.offset]:e===m?[f,c]=m.isBefore(w)?[d.offset,t]:[0,d.offset]:e===w?[f,c]=w.isBefore(m)?[n.offset,t]:[0,n.offset]:[f,c]=[0,t]}e=(x.slice(0,f).match(F)||[]).length;d=(x.slice(f,c).match(F)||[]).length;let [q,z]=[f+e,c+e+d];if(q===z)return"";e=a[a.length-1]===G.hasNextSibling?G.ancestorHasNextSibling:G.ancestorIsLastChild;a=[...a.slice(0,a.length-1),e];e=Array(q+1).fill(" ");f=Array(z-q).fill(G.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[G.selectedLine,a.join(" "),[...l,...e,...f].join("")].join(" ")+
+'use strict';var h=require("@lexical/link"),t=require("@lexical/mark"),v=require("@lexical/utils"),F=require("lexical"),I=require("react");let J=Object.freeze({"\t":"\\t","\n":"\\n"}),K=new RegExp(Object.keys(J).join("|"),"g"),L=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
+function M(a){let c="",e=P(a),l=a.anchor;a=a.focus;let f=l.offset,b=a.offset;c=c+`: range ${""!==e?`{ ${e} }`:""}`+`\n  \u251c anchor { key: ${l.key}, offset: ${null===f?"null":f}, type: ${l.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===b?"null":b}, type: ${a.type} }`}
+function Q(a,c,e,l){let f=" root\n";a=a.read(()=>{const b=F.$getSelection();R(F.$getRoot(),(d,n)=>{const x=`(${d.getKey()})`,u=d.getType()||"",r=d.isSelected(),y=t.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var m=f,w=r?L.selectedLine:" ",D=n.join(" ");if(F.$isTextNode(d)){var k=d.getTextContent();var p=0===k.length?"(empty)":`"${S(k)}"`;k=[P(d),T(d),U(d)].filter(Boolean).join(", ");k=[p,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else if(h.$isLinkNode(d)){k=d.getURL();
+k=0===k.length?"(empty)":`"${S(k)}"`;p=d.getTarget();null!=p&&(p="target: "+p);var z=Boolean;let B=d.getRel();null!=B&&(B="rel: "+B);p=[p,B].filter(z).join(", ");k=[k,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else k="";f=m+`${w} ${D} ${x} ${u} ${y} ${k}\n`;f+=V({indent:n,isSelected:r,node:d,nodeKeyDisplay:x,selection:b,typeDisplay:u})});return null===b?": null":F.$isRangeSelection(b)?M(b):F.DEPRECATED_$isGridSelection(b)?`: grid\n  \u2514 { grid: ${b.gridKey}, anchorCell: ${b.anchor.key}, focusCell: ${b.focus.key} }`:
+`: node\n  \u2514 [${Array.from(b._nodes).join(", ")}]`});f+="\n selection"+a;f+="\n\n editor:";f+=`\n  \u2514 namespace ${c.namespace}`;null!==e&&(f+=`\n  \u2514 compositionKey ${e}`);return f+=`\n  \u2514 editable ${String(l)}`}function R(a,c,e=[]){a=a.getChildren();let l=a.length;a.forEach((f,b)=>{c(f,e.concat(b===l-1?L.isLastChild:L.hasNextSibling));F.$isElementNode(f)&&R(f,c,e.concat(b===l-1?L.ancestorIsLastChild:L.ancestorHasNextSibling))})}
+function S(a){return Object.entries(J).reduce((c,[e,l])=>c.replace(new RegExp(e,"g"),String(l)),a)}
+let W=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],X=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],Y=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
+function T(a){let c=X.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function U(a){let c=Y.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function P(a){let c=W.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
+function V({indent:a,isSelected:c,node:e,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!F.$isTextNode(e)||!F.$isRangeSelection(f)||!c||F.$isElementNode(e))return"";c=f.anchor;var d=f.focus;if(""===e.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===d.offset)return"";d=f.anchor;let n=f.focus,x=e.getTextContent(),u=x.length;c=f=-1;if("text"===d.type&&"text"===n.type){let m=d.getNode(),w=n.getNode();m===w&&e===m&&d.offset!==n.offset?[f,c]=d.offset<n.offset?[d.offset,n.offset]:[n.offset,
+d.offset]:e===m?[f,c]=m.isBefore(w)?[d.offset,u]:[0,d.offset]:e===w?[f,c]=w.isBefore(m)?[n.offset,u]:[0,n.offset]:[f,c]=[0,u]}e=(x.slice(0,f).match(K)||[]).length;d=(x.slice(f,c).match(K)||[]).length;let [r,y]=[f+e,c+e+d];if(r===y)return"";e=a[a.length-1]===L.hasNextSibling?L.ancestorHasNextSibling:L.ancestorIsLastChild;a=[...a.slice(0,a.length-1),e];e=Array(r+1).fill(" ");f=Array(y-r).fill(L.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[L.selectedLine,a.join(" "),[...l,...e,...f].join("")].join(" ")+
 "\n"}
-exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [d,n]=D.useState([]),[x,t]=D.useState(""),[q,z]=D.useState(!1),m=D.useRef(0),w=D.useRef(null),A=D.useRef(null),[h,p]=D.useState(!1);D.useEffect(()=>{t(L(b.getEditorState(),b._config,b._compositionKey,b._editable));return v.mergeRegister(b.registerUpdateListener(({editorState:g})=>{let u=L(b.getEditorState(),b._config,b._compositionKey,
-b._editable);t(u);q||n(B=>[...B,[Date.now(),g]])}),b.registerEditableListener(()=>{let g=L(b.getEditorState(),b._config,b._compositionKey,b._editable);t(g)}))},[q,b]);let y=d.length;D.useEffect(()=>{if(h){let g,u=()=>{const B=m.current;B===y-1?p(!1):g=setTimeout(()=>{m.current++;const I=m.current,J=A.current;null!==J&&(J.value=String(I));b.setEditorState(d[I][1]);u()},d[B+1][0]-d[B][0])};u();return()=>{clearTimeout(g)}}},[d,h,b,y]);D.useEffect(()=>{let g=w.current;if(null!==g)return g.__lexicalEditor=
-b,()=>{g.__lexicalEditor=null}},[b]);return D.createElement("div",{className:l},!q&&2<y&&D.createElement("button",{onClick:()=>{let g=b.getRootElement();null!==g&&(g.contentEditable="false",m.current=y-1,z(!0))},className:a,type:"button"},"Time Travel"),D.createElement("pre",{ref:w},x),q&&D.createElement("div",{className:f},D.createElement("button",{className:e,onClick:()=>{m.current===y-1&&(m.current=1);p(!h)},type:"button"},h?"Pause":"Play"),D.createElement("input",{className:c,ref:A,onChange:g=>
-{g=Number(g.target.value);let u=d[g];u&&(m.current=g,b.setEditorState(u[1]))},type:"range",min:"1",max:y-1}),D.createElement("button",{className:e,onClick:()=>{var g=b.getRootElement();if(null!==g){g.contentEditable="true";g=d.length-1;b.setEditorState(d[g][1]);let u=A.current;null!==u&&(u.value=String(g));z(!1);p(!1)}},type:"button"},"Exit")))}
+exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [d,n]=I.useState([]),[x,u]=I.useState(""),[r,y]=I.useState(!1),m=I.useRef(0),w=I.useRef(null),D=I.useRef(null),[k,p]=I.useState(!1),[z,B]=I.useState(!1),[A,Z]=I.useState(!1),G=I.useRef(null),H=I.useCallback(g=>{const q=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);u(q);r||n(E=>[...E,[Date.now(),g]])},[b,r]);
+I.useEffect(()=>{u(Q(b.getEditorState(),b._config,b._compositionKey,b._editable))},[b]);I.useEffect(()=>v.mergeRegister(b.registerUpdateListener(({editorState:g,dirtyLeaves:q})=>{if(!A&&1E3<q.size&&(G.current=g,B(!0),!A))return;H(g)}),b.registerEditableListener(()=>{let g=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);u(g)})),[b,z,H,A]);let C=d.length;I.useEffect(()=>{if(k){let g,q=()=>{const E=m.current;E===C-1?p(!1):g=setTimeout(()=>{m.current++;const N=m.current,O=D.current;null!==
+O&&(O.value=String(N));b.setEditorState(d[N][1]);q()},d[E+1][0]-d[E][0])};q();return()=>{clearTimeout(g)}}},[d,k,b,C]);I.useEffect(()=>{let g=w.current;if(null!==g)return g.__lexicalEditor=b,()=>{g.__lexicalEditor=null}},[b]);return I.createElement("div",{className:l},!A&&z?I.createElement("div",{style:{padding:20}},I.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),I.createElement("button",{onClick:()=>{Z(!0);let g=G.current;null!==
+g&&(G.current=null,H(g))},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,!r&&(A||!z)&&2<C&&I.createElement("button",{onClick:()=>{let g=b.getRootElement();null!==g&&(g.contentEditable="false",m.current=C-1,y(!0))},className:a,type:"button"},"Time Travel"),(A||!z)&&I.createElement("pre",{ref:w},x),r&&(A||!z)&&I.createElement("div",{className:f},I.createElement("button",{className:e,onClick:()=>{m.current===C-1&&(m.current=
+1);p(!k)},type:"button"},k?"Pause":"Play"),I.createElement("input",{className:c,ref:D,onChange:g=>{g=Number(g.target.value);let q=d[g];q&&(m.current=g,b.setEditorState(q[1]))},type:"range",min:"1",max:C-1}),I.createElement("button",{className:e,onClick:()=>{var g=b.getRootElement();if(null!==g){g.contentEditable="true";g=d.length-1;b.setEditorState(d[g][1]);let q=D.current;null!==q&&(q.value=String(g));y(!1);p(!1)}},type:"button"},"Exit")))}

package/package.json

@@ -8,29 +8,29 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "dependencies": {
-    "@lexical/clipboard": "0.6.4",
-    "@lexical/code": "0.6.4",
-    "@lexical/dragon": "0.6.4",
-    "@lexical/hashtag": "0.6.4",
-    "@lexical/history": "0.6.4",
-    "@lexical/link": "0.6.4",
-    "@lexical/list": "0.6.4",
-    "@lexical/mark": "0.6.4",
-    "@lexical/markdown": "0.6.4",
-    "@lexical/overflow": "0.6.4",
-    "@lexical/plain-text": "0.6.4",
-    "@lexical/rich-text": "0.6.4",
-    "@lexical/selection": "0.6.4",
-    "@lexical/table": "0.6.4",
-    "@lexical/text": "0.6.4",
-    "@lexical/utils": "0.6.4",
-    "@lexical/yjs": "0.6.4",
+    "@lexical/clipboard": "0.7.0",
+    "@lexical/code": "0.7.0",
+    "@lexical/dragon": "0.7.0",
+    "@lexical/hashtag": "0.7.0",
+    "@lexical/history": "0.7.0",
+    "@lexical/link": "0.7.0",
+    "@lexical/list": "0.7.0",
+    "@lexical/mark": "0.7.0",
+    "@lexical/markdown": "0.7.0",
+    "@lexical/overflow": "0.7.0",
+    "@lexical/plain-text": "0.7.0",
+    "@lexical/rich-text": "0.7.0",
+    "@lexical/selection": "0.7.0",
+    "@lexical/table": "0.7.0",
+    "@lexical/text": "0.7.0",
+    "@lexical/utils": "0.7.0",
+    "@lexical/yjs": "0.7.0",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
-    "lexical": "0.6.4",
+    "lexical": "0.7.0",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },

package/useLexicalEditable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ *
+ */
+export default function useLexicalEditable(): boolean;

package/useLexicalEditable.dev.js

@@ -0,0 +1,88 @@
+/**
+ * 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.
+ */
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var react = require('react');
+
+/**
+ * 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.
+ *
+ */
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * 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.
+ *
+ */
+const useLayoutEffectImpl = CAN_USE_DOM ? react.useLayoutEffect : react.useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Shortcut to Lexical subscriptions when values are used for render.
+ */
+function useLexicalSubscription(subscription) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const initializedSubscription = react.useMemo(() => subscription(editor), [editor, subscription]);
+  const valueRef = react.useRef(initializedSubscription.initialValueFn());
+  const [value, setValue] = react.useState(valueRef.current);
+  useLayoutEffect(() => {
+    const {
+      initialValueFn,
+      subscribe
+    } = initializedSubscription;
+    const currentValue = initialValueFn();
+
+    if (valueRef.current !== currentValue) {
+      valueRef.current = currentValue;
+      setValue(currentValue);
+    }
+
+    return subscribe(newValue => {
+      valueRef.current = newValue;
+      setValue(newValue);
+    });
+  }, [initializedSubscription, subscription]);
+  return value;
+}
+
+/**
+ * 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 subscription(editor) {
+  return {
+    initialValueFn: () => editor.isEditable(),
+    subscribe: callback => {
+      return editor.registerEditableListener(callback);
+    }
+  };
+}
+
+function useLexicalEditable() {
+  return useLexicalSubscription(subscription);
+}
+
+module.exports = useLexicalEditable;

package/useLexicalEditable.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+'use strict'
+const useLexicalEditable = process.env.NODE_ENV === 'development' ? require('./useLexicalEditable.dev.js') : require('./useLexicalEditable.prod.js')
+module.exports = useLexicalEditable;

package/useLexicalEditable.js.flow

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type {LexicalEditor} from 'lexical';
+
+declare export default function useLexicalEditable(): boolean;

package/useLexicalEditable.prod.js

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+'use strict';var b=require("@lexical/react/LexicalComposerContext"),k=require("react"),l="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?k.useLayoutEffect:k.useEffect;
+function m(a){let [c]=b.useLexicalComposerContext(),e=k.useMemo(()=>a(c),[c,a]),d=k.useRef(e.initialValueFn()),[n,g]=k.useState(d.current);l(()=>{let {initialValueFn:p,subscribe:q}=e,f=p();d.current!==f&&(d.current=f,g(f));return q(h=>{d.current=h;g(h)})},[e,a]);return n}function r(a){return{initialValueFn:()=>a.isEditable(),subscribe:c=>a.registerEditableListener(c)}}module.exports=function(){return m(r)}

package/useLexicalSubscription.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+export declare type LexicalSubscription<T> = {
+    initialValueFn: () => T;
+    subscribe: (callback: (value: T) => void) => () => void;
+};
+/**
+ * Shortcut to Lexical subscriptions when values are used for render.
+ */
+export default function useLexicalSubscription<T>(subscription: (editor: LexicalEditor) => LexicalSubscription<T>): T;

package/useLexicalSubscription.dev.js

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var react = require('react');
+
+/**
+ * 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.
+ *
+ */
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * 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.
+ *
+ */
+const useLayoutEffectImpl = CAN_USE_DOM ? react.useLayoutEffect : react.useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Shortcut to Lexical subscriptions when values are used for render.
+ */
+function useLexicalSubscription(subscription) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const initializedSubscription = react.useMemo(() => subscription(editor), [editor, subscription]);
+  const valueRef = react.useRef(initializedSubscription.initialValueFn());
+  const [value, setValue] = react.useState(valueRef.current);
+  useLayoutEffect(() => {
+    const {
+      initialValueFn,
+      subscribe
+    } = initializedSubscription;
+    const currentValue = initialValueFn();
+
+    if (valueRef.current !== currentValue) {
+      valueRef.current = currentValue;
+      setValue(currentValue);
+    }
+
+    return subscribe(newValue => {
+      valueRef.current = newValue;
+      setValue(newValue);
+    });
+  }, [initializedSubscription, subscription]);
+  return value;
+}
+
+module.exports = useLexicalSubscription;

package/useLexicalSubscription.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+'use strict'
+const useLexicalSubscription = process.env.NODE_ENV === 'development' ? require('./useLexicalSubscription.dev.js') : require('./useLexicalSubscription.prod.js')
+module.exports = useLexicalSubscription;

package/useLexicalSubscription.js.flow

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type {LexicalEditor} from 'lexical';
+
+export type LexicalSubscription<T> = {
+  initialValueFn: () => T,
+  subscribe: (callback: (value: T) => void) => () => void,
+};
+
+declare export default function useLexicalSubscription<T>(
+  subscription: (editor: LexicalEditor) => LexicalSubscription<T>,
+): T;

package/useLexicalSubscription.prod.js

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+'use strict';var a=require("@lexical/react/LexicalComposerContext"),k=require("react"),l="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?k.useLayoutEffect:k.useEffect;
+module.exports=function(c){let [f]=a.useLexicalComposerContext(),d=k.useMemo(()=>c(f),[f,c]),b=k.useRef(d.initialValueFn()),[m,g]=k.useState(b.current);l(()=>{let {initialValueFn:n,subscribe:p}=d,e=n();b.current!==e&&(b.current=e,g(e));return p(h=>{b.current=h;g(h)})},[d,c]);return m}