@lexical/react 0.3.7 → 0.3.10

package/LexicalCollaborationContext.js.flow

@@ -0,0 +1,21 @@
+/**
+ * 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 {Doc} from 'yjs';
+
+type CollaborationContextType = {
+  clientID: number,
+  color: string,
+  isCollabActive: boolean,
+  name: string,
+  yjsDocMap: Map<string, Doc>,
+};
+
+declare export var CollaborationContext: React$Context<CollaborationContextType>;
+declare export function useCollaborationContext(): CollaborationContextType;

package/LexicalCollaborationContext.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("react");let b=[["Cat","255,165,0"],["Dog","0,200,55"],["Rabbit","160,0,200"],["Frog","0,172,200"],["Fox","197,200,0"],["Hedgehog","31,200,0"],["Pigeon","200,0,0"],["Squirrel","200,0,148"],["Bear","255,235,0"],["Tiger","86,255,0"],["Leopard","0,255,208"],["Zebra","0,243,255"],["Wolf","0,102,255"],["Owl","147,0,255"],["Gull","255,0,153"],["Squid","0,220,255"]],c=b[Math.floor(Math.random()*b.length)],d=a.createContext({clientID:0,color:c[1],isCollabActive:!1,name:c[0],yjsDocMap:new Map});
+exports.CollaborationContext=d;exports.useCollaborationContext=function(e){let f=a.useContext(d);null!=e&&(f.name=e);return f}

package/LexicalCollaborationPlugin.d.ts

@@ -5,21 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { Doc } from 'yjs';
 import { WebsocketProvider } from 'y-websocket';
-declare type CollaborationContextType = {
-    clientID: number;
-    color: string;
-    name: string;
-    yjsDocMap: Map<string, Doc>;
-};
 export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, }: {
     id: string;
     providerFactory: (id: string, yjsDocMap: Map<string, Doc>) => WebsocketProvider;
     shouldBootstrap: boolean;
     username?: string;
 }): JSX.Element;
-export declare const CollaborationContext: React.Context<CollaborationContextType>;
-export declare function useCollaborationContext(username?: string): CollaborationContextType;
-export {};

package/LexicalCollaborationPlugin.dev.js

@@ -6,6 +6,7 @@
  */
 'use strict';
 
+var LexicalCollaborationContext = require('@lexical/react/LexicalCollaborationContext');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var React = require('react');
 var utils = require('@lexical/utils');
@@ -102,6 +103,7 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       provider.off('reload', onProviderDocReload);
       awareness.off('update', onAwarenessUpdate);
       root.getSharedType().unobserveDeep(onYjsTreeChanges);
+      docMap.delete(id);
       removeListener();
     };
   }, [binding, color, connect, disconnect, docMap, editor, id, name, provider, shouldBootstrap]);
@@ -240,21 +242,29 @@ function clearEditorSkipCollab(editor, binding) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const entries = [['Cat', '255,165,0'], ['Dog', '0,200,55'], ['Rabbit', '160,0,200'], ['Frog', '0,172,200'], ['Fox', '197,200,0'], ['Hedgehog', '31,200,0'], ['Pigeon', '200,0,0'], ['Squirrel', '200,0,148'], ['Bear', '255,235,0'], ['Tiger', '86,255,0'], ['Leopard', '0,255,208'], ['Zebra', '0,243,255'], ['Wolf', '0,102,255'], ['Owl', '147,0,255'], ['Gull', '255,0,153'], ['Squid', '0,220,255']];
-const randomEntry = entries[Math.floor(Math.random() * entries.length)];
 function CollaborationPlugin({
   id,
   providerFactory,
   shouldBootstrap,
   username
 }) {
-  const collabContext = useCollaborationContext(username);
+  const collabContext = LexicalCollaborationContext.useCollaborationContext(username);
   const {
     yjsDocMap,
     name,
     color
   } = collabContext;
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useEffect(() => {
+    collabContext.isCollabActive = true;
+    return () => {
+      // Reseting flag only when unmount top level editor collab plugin. Nested
+      // editors (e.g. image caption) should unmount without affecting it
+      if (editor._parentEditor == null) {
+        collabContext.isCollabActive = false;
+      }
+    };
+  }, [collabContext, editor]);
   const provider = React.useMemo(() => providerFactory(id, yjsDocMap), [id, providerFactory, yjsDocMap]);
   const [cursors, binding] = useYjsCollaboration(editor, id, provider, yjsDocMap, name, color, shouldBootstrap);
   collabContext.clientID = binding.clientID;
@@ -262,22 +272,5 @@ function CollaborationPlugin({
   useYjsFocusTracking(editor, provider, name, color);
   return cursors;
 }
-const CollaborationContext = /*#__PURE__*/React.createContext({
-  clientID: 0,
-  color: randomEntry[1],
-  name: randomEntry[0],
-  yjsDocMap: new Map()
-});
-function useCollaborationContext(username) {
-  const collabContext = React.useContext(CollaborationContext);
-
-  if (username != null) {
-    collabContext.name = username;
-  }
-
-  return collabContext;
-}
 
-exports.CollaborationContext = CollaborationContext;
 exports.CollaborationPlugin = CollaborationPlugin;
-exports.useCollaborationContext = useCollaborationContext;

package/LexicalCollaborationPlugin.js.flow

@@ -41,13 +41,6 @@ export interface Provider {
   off(type: 'reload', cb: (doc: Doc) => void): void;
 }
 
-type CollaborationContextType = {
-  clientID: number,
-  color: string,
-  name: string,
-  yjsDocMap: Map<string, Doc>,
-};
-
 export type ProviderFactory = (
   id: string,
   yjsDocMap: Map<string, Doc>,
@@ -59,5 +52,3 @@ declare export function CollaborationPlugin(arg0: {
   shouldBootstrap: boolean,
   username?: string,
 }): React$Node;
-declare export var CollaborationContext: React$Context<CollaborationContextType>;
-declare export function useCollaborationContext(): CollaborationContextType;

package/LexicalCollaborationPlugin.prod.js

@@ -4,13 +4,12 @@
  * 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"),h=require("@lexical/utils"),x=require("@lexical/yjs"),F=require("lexical"),G=require("react-dom");
-function H(b,c,a,d,l,p,q){let n=f.useRef(!1),[r,v]=f.useState(d.get(c)),g=f.useMemo(()=>x.createBinding(b,a,c,r,d),[b,a,c,d,r]),t=f.useCallback(()=>{a.connect()},[a]),u=f.useCallback(()=>{try{a.disconnect()}catch(m){}},[a]);f.useEffect(()=>{let {root:m}=g,{awareness:y}=a,z=({status:k})=>{b.dispatchCommand(x.CONNECTED_COMMAND,"connected"===k)},A=k=>{q&&k&&m.isEmpty()&&0===m._xmlText._length&&!1===n.current&&I(b);n.current=!1},B=()=>{x.syncCursorPositions(g,a)},C=(k,w)=>{w.origin!==g&&x.syncYjsChangesToLexical(g,
-a,k)};x.initLocalState(a,l,p,document.activeElement===b.getRootElement());let D=k=>{J(b,g);v(k);d.set(c,k);n.current=!0};a.on("reload",D);a.on("status",z);a.on("sync",A);y.on("update",B);m.getSharedType().observeDeep(C);let R=b.registerUpdateListener(({prevEditorState:k,editorState:w,dirtyLeaves:O,dirtyElements:P,normalizedNodes:Q,tags:E})=>{!1===E.has("skip-collab")&&x.syncLexicalUpdateToYjs(g,a,k,w,P,O,Q,E)});t();return()=>{!1===n.current&&u();a.off("sync",A);a.off("status",z);a.off("reload",D);
-y.off("update",B);m.getSharedType().unobserveDeep(C);R()}},[g,p,t,u,d,b,c,l,a,q]);let S=f.useMemo(()=>G.createPortal(f.createElement("div",{ref:m=>{g.cursorsContainer=m}}),document.body),[g]);f.useEffect(()=>b.registerCommand(x.TOGGLE_CONNECT_COMMAND,m=>{void 0!==t&&void 0!==u&&(m?(console.log("Collaboration connected!"),t()):(console.log("Collaboration disconnected!"),u()));return!0},F.COMMAND_PRIORITY_EDITOR),[t,u,b]);return[S,g]}
-function K(b,c,a,d){f.useEffect(()=>h.mergeRegister(b.registerCommand(F.FOCUS_COMMAND,()=>{x.setLocalStateFocus(c,a,d,!0);return!0},F.COMMAND_PRIORITY_EDITOR),b.registerCommand(F.BLUR_COMMAND,()=>{x.setLocalStateFocus(c,a,d,!1);return!0},F.COMMAND_PRIORITY_EDITOR)),[d,b,a,c])}
-function L(b,c){let a=f.useMemo(()=>x.createUndoManager(c,c.root.getSharedType()),[c]);f.useEffect(()=>h.mergeRegister(b.registerCommand(F.UNDO_COMMAND,()=>{a.undo();return!0},F.COMMAND_PRIORITY_EDITOR),b.registerCommand(F.REDO_COMMAND,()=>{a.redo();return!0},F.COMMAND_PRIORITY_EDITOR)));return f.useCallback(()=>{a.clear()},[a])}
-function I(b){b.update(()=>{var c=F.$getRoot();if(null===c.getFirstChild()){let a=F.$createParagraphNode();c.append(a);c=document.activeElement;(null!==F.$getSelection()||null!==c&&c===b.getRootElement())&&a.select()}},{tag:"history-merge"})}
-function J(b,c){b.update(()=>{let d=F.$getRoot();d.clear();d.select()},{tag:"skip-collab"});if(null!=c.cursors&&(b=c.cursors,null!=b&&(c=c.cursorsContainer,null!=c))){b=Array.from(b.values());for(let d=0;d<b.length;d++){var a=b[d].selection;if(a&&null!=a.selections){a=a.selections;for(let l=0;l<a.length;l++)c.removeChild(a[d])}}}}
-let M=[["Cat","255,165,0"],["Dog","0,200,55"],["Rabbit","160,0,200"],["Frog","0,172,200"],["Fox","197,200,0"],["Hedgehog","31,200,0"],["Pigeon","200,0,0"],["Squirrel","200,0,148"],["Bear","255,235,0"],["Tiger","86,255,0"],["Leopard","0,255,208"],["Zebra","0,243,255"],["Wolf","0,102,255"],["Owl","147,0,255"],["Gull","255,0,153"],["Squid","0,220,255"]],N=M[Math.floor(Math.random()*M.length)],T=f.createContext({clientID:0,color:N[1],name:N[0],yjsDocMap:new Map});
-function U(b){let c=f.useContext(T);null!=b&&(c.name=b);return c}exports.CollaborationContext=T;exports.CollaborationPlugin=function({id:b,providerFactory:c,shouldBootstrap:a,username:d}){d=U(d);let {yjsDocMap:l,name:p,color:q}=d,[n]=e.useLexicalComposerContext(),r=f.useMemo(()=>c(b,l),[b,c,l]),[v,g]=H(n,b,r,l,p,q,a);d.clientID=g.clientID;L(n,g);K(n,r,p,q);return v};exports.useCollaborationContext=U
+'use strict';var e=require("@lexical/react/LexicalCollaborationContext"),f=require("@lexical/react/LexicalComposerContext"),k=require("react"),x=require("@lexical/utils"),F=require("@lexical/yjs"),G=require("lexical"),H=require("react-dom");
+function I(b,c,a,d,h,q,r){let p=k.useRef(!1),[n,v]=k.useState(d.get(c)),g=k.useMemo(()=>F.createBinding(b,a,c,n,d),[b,a,c,d,n]),t=k.useCallback(()=>{a.connect()},[a]),u=k.useCallback(()=>{try{a.disconnect()}catch(m){}},[a]);k.useEffect(()=>{let {root:m}=g,{awareness:y}=a,z=({status:l})=>{b.dispatchCommand(F.CONNECTED_COMMAND,"connected"===l)},A=l=>{r&&l&&m.isEmpty()&&0===m._xmlText._length&&!1===p.current&&J(b);p.current=!1},B=()=>{F.syncCursorPositions(g,a)},C=(l,w)=>{w.origin!==g&&F.syncYjsChangesToLexical(g,
+a,l)};F.initLocalState(a,h,q,document.activeElement===b.getRootElement());let D=l=>{K(b,g);v(l);d.set(c,l);p.current=!0};a.on("reload",D);a.on("status",z);a.on("sync",A);y.on("update",B);m.getSharedType().observeDeep(C);let O=b.registerUpdateListener(({prevEditorState:l,editorState:w,dirtyLeaves:L,dirtyElements:M,normalizedNodes:N,tags:E})=>{!1===E.has("skip-collab")&&F.syncLexicalUpdateToYjs(g,a,l,w,M,L,N,E)});t();return()=>{!1===p.current&&u();a.off("sync",A);a.off("status",z);a.off("reload",D);
+y.off("update",B);m.getSharedType().unobserveDeep(C);d.delete(c);O()}},[g,q,t,u,d,b,c,h,a,r]);let P=k.useMemo(()=>H.createPortal(k.createElement("div",{ref:m=>{g.cursorsContainer=m}}),document.body),[g]);k.useEffect(()=>b.registerCommand(F.TOGGLE_CONNECT_COMMAND,m=>{void 0!==t&&void 0!==u&&(m?(console.log("Collaboration connected!"),t()):(console.log("Collaboration disconnected!"),u()));return!0},G.COMMAND_PRIORITY_EDITOR),[t,u,b]);return[P,g]}
+function Q(b,c,a,d){k.useEffect(()=>x.mergeRegister(b.registerCommand(G.FOCUS_COMMAND,()=>{F.setLocalStateFocus(c,a,d,!0);return!0},G.COMMAND_PRIORITY_EDITOR),b.registerCommand(G.BLUR_COMMAND,()=>{F.setLocalStateFocus(c,a,d,!1);return!0},G.COMMAND_PRIORITY_EDITOR)),[d,b,a,c])}
+function R(b,c){let a=k.useMemo(()=>F.createUndoManager(c,c.root.getSharedType()),[c]);k.useEffect(()=>x.mergeRegister(b.registerCommand(G.UNDO_COMMAND,()=>{a.undo();return!0},G.COMMAND_PRIORITY_EDITOR),b.registerCommand(G.REDO_COMMAND,()=>{a.redo();return!0},G.COMMAND_PRIORITY_EDITOR)));return k.useCallback(()=>{a.clear()},[a])}
+function J(b){b.update(()=>{var c=G.$getRoot();if(null===c.getFirstChild()){let a=G.$createParagraphNode();c.append(a);c=document.activeElement;(null!==G.$getSelection()||null!==c&&c===b.getRootElement())&&a.select()}},{tag:"history-merge"})}
+function K(b,c){b.update(()=>{let d=G.$getRoot();d.clear();d.select()},{tag:"skip-collab"});if(null!=c.cursors&&(b=c.cursors,null!=b&&(c=c.cursorsContainer,null!=c))){b=Array.from(b.values());for(let d=0;d<b.length;d++){var a=b[d].selection;if(a&&null!=a.selections){a=a.selections;for(let h=0;h<a.length;h++)c.removeChild(a[d])}}}}
+exports.CollaborationPlugin=function({id:b,providerFactory:c,shouldBootstrap:a,username:d}){let h=e.useCollaborationContext(d),{yjsDocMap:q,name:r,color:p}=h,[n]=f.useLexicalComposerContext();k.useEffect(()=>{h.isCollabActive=!0;return()=>{null==n._parentEditor&&(h.isCollabActive=!1)}},[h,n]);d=k.useMemo(()=>c(b,q),[b,c,q]);let [v,g]=I(n,b,d,q,r,p,a);h.clientID=g.clientID;R(n,g);Q(n,d,r,p);return v}

package/LexicalLinkPlugin.dev.js

@@ -26,8 +26,21 @@ function LinkPlugin() {
     }
   }, [editor]);
   react.useEffect(() => {
-    return editor.registerCommand(link.TOGGLE_LINK_COMMAND, url => {
-      link.toggleLink(url);
+    return editor.registerCommand(link.TOGGLE_LINK_COMMAND, payload => {
+      if (typeof payload === 'string' || payload === null) {
+        link.toggleLink(payload);
+      } else {
+        const {
+          url,
+          target,
+          rel
+        } = payload;
+        link.toggleLink(url, {
+          rel,
+          target
+        });
+      }
+
       return true;
     }, lexical.COMMAND_PRIORITY_EDITOR);
   }, [editor]);

package/LexicalLinkPlugin.prod.js

@@ -4,4 +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/link"),c=require("@lexical/react/LexicalComposerContext"),d=require("lexical"),e=require("react");exports.LinkPlugin=function(){let [a]=c.useLexicalComposerContext();e.useEffect(()=>{if(!a.hasNodes([b.LinkNode]))throw Error("LinkPlugin: LinkNode not registered on editor");},[a]);e.useEffect(()=>a.registerCommand(b.TOGGLE_LINK_COMMAND,f=>{b.toggleLink(f);return!0},d.COMMAND_PRIORITY_EDITOR),[a]);return null}
+'use strict';var a=require("@lexical/link"),d=require("@lexical/react/LexicalComposerContext"),e=require("lexical"),f=require("react");
+exports.LinkPlugin=function(){let [b]=d.useLexicalComposerContext();f.useEffect(()=>{if(!b.hasNodes([a.LinkNode]))throw Error("LinkPlugin: LinkNode not registered on editor");},[b]);f.useEffect(()=>b.registerCommand(a.TOGGLE_LINK_COMMAND,c=>{if("string"===typeof c||null===c)a.toggleLink(c);else{let {url:g,target:h,rel:k}=c;a.toggleLink(g,{rel:k,target:h})}return!0},e.COMMAND_PRIORITY_EDITOR),[b]);return null}

package/LexicalNestedComposer.dev.js

@@ -6,7 +6,7 @@
  */
 'use strict';
 
-var LexicalCollaborationPlugin = require('@lexical/react/LexicalCollaborationPlugin');
+var LexicalCollaborationContext = require('@lexical/react/LexicalCollaborationContext');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var React = require('react');
 
@@ -22,6 +22,7 @@ function LexicalNestedComposer({
   children,
   initialTheme
 }) {
+  const wasCollabPreviouslyReadyRef = React.useRef(false);
   const parentContext = React.useContext(LexicalComposerContext.LexicalComposerContext);
 
   if (parentContext == null) {
@@ -49,13 +50,18 @@ function LexicalNestedComposer({
   // until the collaboration subdocument is ready.
 
   const {
+    isCollabActive,
     yjsDocMap
-  } = LexicalCollaborationPlugin.useCollaborationContext();
-  const isCollab = yjsDocMap.get('main') !== undefined;
-  const isCollabReady = yjsDocMap.has(initialEditor.getKey());
+  } = LexicalCollaborationContext.useCollaborationContext();
+  const isCollabReady = wasCollabPreviouslyReadyRef.current || yjsDocMap.has(initialEditor.getKey());
+  React.useEffect(() => {
+    if (isCollabReady) {
+      wasCollabPreviouslyReadyRef.current = true;
+    }
+  }, [isCollabReady]);
   return /*#__PURE__*/React.createElement(LexicalComposerContext.LexicalComposerContext.Provider, {
     value: composerContext
-  }, !isCollab || isCollabReady ? children : null);
+  }, !isCollabActive || isCollabReady ? children : null);
 }
 
 exports.LexicalNestedComposer = LexicalNestedComposer;

package/LexicalNestedComposer.prod.js

@@ -4,6 +4,6 @@
  * 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/react/LexicalCollaborationPlugin"),d=require("@lexical/react/LexicalComposerContext"),h=require("react");
-exports.LexicalNestedComposer=function({initialEditor:a,children:k,initialTheme:l}){let e=h.useContext(d.LexicalComposerContext);if(null==e)throw Error("Minified Lexical error #9; visit https://lexical.dev/docs/error?code=9 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let p=h.useMemo(()=>{const [f,m]=e,g=l||m.getTheme()||void 0,n=d.createLexicalComposerContext(e,g);void 0!==g&&(a._config.theme=g);a._parentEditor=f;a._nodes=f._nodes;
-a._config.namespace=f._config.namespace;return[a,n]},[]);var {yjsDocMap:b}=c.useCollaborationContext();let q=void 0!==b.get("main");b=b.has(a.getKey());return h.createElement(d.LexicalComposerContext.Provider,{value:p},!q||b?k:null)}
+'use strict';var b=require("@lexical/react/LexicalCollaborationContext"),c=require("@lexical/react/LexicalComposerContext"),k=require("react");
+exports.LexicalNestedComposer=function({initialEditor:a,children:l,initialTheme:m}){let h=k.useRef(!1),d=k.useContext(c.LexicalComposerContext);if(null==d)throw Error("Minified Lexical error #9; visit https://lexical.dev/docs/error?code=9 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let q=k.useMemo(()=>{const [e,n]=d,f=m||n.getTheme()||void 0,p=c.createLexicalComposerContext(d,f);void 0!==f&&(a._config.theme=f);a._parentEditor=e;a._nodes=
+e._nodes;a._config.namespace=e._config.namespace;return[a,p]},[]),{isCollabActive:r,yjsDocMap:t}=b.useCollaborationContext(),g=h.current||t.has(a.getKey());k.useEffect(()=>{g&&(h.current=!0)},[g]);return k.createElement(c.LexicalComposerContext.Provider,{value:q},!r||g?l:null)}

package/LexicalOnChangePlugin.d.ts

@@ -6,7 +6,8 @@
  *
  */
 import type { EditorState, LexicalEditor } from 'lexical';
-export declare function OnChangePlugin({ ignoreInitialChange, ignoreSelectionChange, onChange, }: {
+export declare function OnChangePlugin({ ignoreHistoryMergeTagChange, ignoreInitialChange, ignoreSelectionChange, onChange, }: {
+    ignoreHistoryMergeTagChange?: boolean;
     ignoreInitialChange?: boolean;
     ignoreSelectionChange?: boolean;
     onChange: (editorState: EditorState, editor: LexicalEditor) => void;

package/LexicalOnChangePlugin.dev.js

@@ -36,6 +36,8 @@ var useLayoutEffect = useLayoutEffectImpl;
  *
  */
 function OnChangePlugin({
+  // TODO 0.4 flip to true
+  ignoreHistoryMergeTagChange = false,
   ignoreInitialChange = true,
   ignoreSelectionChange = false,
   onChange
@@ -47,9 +49,10 @@ function OnChangePlugin({
         editorState,
         dirtyElements,
         dirtyLeaves,
-        prevEditorState
+        prevEditorState,
+        tags
       }) => {
-        if (ignoreSelectionChange && dirtyElements.size === 0 && dirtyLeaves.size === 0) {
+        if (ignoreSelectionChange && dirtyElements.size === 0 && dirtyLeaves.size === 0 || ignoreHistoryMergeTagChange && tags.has('history-merge')) {
           return;
         }
 
@@ -60,7 +63,7 @@ function OnChangePlugin({
         onChange(editorState, editor);
       });
     }
-  }, [editor, ignoreInitialChange, ignoreSelectionChange, onChange]);
+  }, [editor, ignoreHistoryMergeTagChange, ignoreInitialChange, ignoreSelectionChange, onChange]);
   return null;
 }
 

package/LexicalOnChangePlugin.js.flow

@@ -10,6 +10,8 @@
 import type {EditorState, LexicalEditor} from 'lexical';
 
 declare export function OnChangePlugin({
+  ignoreHistoryMergeTagChange?: boolean,
+  // TODO 0.4 remove
   ignoreInitialChange?: boolean,
   ignoreSelectionChange?: boolean,
   onChange: (editorState: EditorState, editor: LexicalEditor) => void,

package/LexicalOnChangePlugin.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/react/LexicalComposerContext"),f=require("react"),g="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?f.useLayoutEffect:f.useEffect;
-exports.OnChangePlugin=function({ignoreInitialChange:d=!0,ignoreSelectionChange:e=!1,onChange:a}){let [b]=c.useLexicalComposerContext();g(()=>{if(a)return b.registerUpdateListener(({editorState:h,dirtyElements:k,dirtyLeaves:l,prevEditorState:m})=>{e&&0===k.size&&0===l.size||d&&m.isEmpty()||a(h,b)})},[b,d,e,a]);return null}
+'use strict';var c=require("@lexical/react/LexicalComposerContext"),g=require("react"),h="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?g.useLayoutEffect:g.useEffect;
+exports.OnChangePlugin=function({ignoreHistoryMergeTagChange:d=!1,ignoreInitialChange:e=!0,ignoreSelectionChange:f=!1,onChange:a}){let [b]=c.useLexicalComposerContext();h(()=>{if(a)return b.registerUpdateListener(({editorState:k,dirtyElements:l,dirtyLeaves:m,prevEditorState:n,tags:p})=>{f&&0===l.size&&0===m.size||d&&p.has("history-merge")||e&&n.isEmpty()||a(k,b)})},[b,d,e,f,a]);return null}

package/LexicalTableOfContents__EXPERIMENTAL.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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, NodeKey } from 'lexical';
+import { HeadingTagType } from '@lexical/rich-text';
+declare type Props = {
+    children: (values: Array<[key: NodeKey, text: string, tag: HeadingTagType]>, editor: LexicalEditor) => JSX.Element;
+};
+export default function LexicalTableOfContentsPlugin({ children, }: Props): JSX.Element;
+export {};

package/LexicalTableOfContents__EXPERIMENTAL.dev.js

@@ -0,0 +1,144 @@
+/**
+ * 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 richText = require('@lexical/rich-text');
+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.
+ *
+ */
+
+function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents) {
+  if (newHeading === null) {
+    return currentTableOfContents;
+  }
+
+  const newEntry = [newHeading.getKey(), newHeading.getTextContent(), newHeading.getTag()];
+  let newTableOfContents = [];
+
+  if (prevHeading === null) {
+    newTableOfContents = [newEntry, ...currentTableOfContents];
+  } else {
+    for (let i = 0; i < currentTableOfContents.length; i++) {
+      const key = currentTableOfContents[i][0];
+      newTableOfContents.push(currentTableOfContents[i]);
+
+      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        newTableOfContents.push(newEntry);
+      }
+    }
+  }
+
+  return newTableOfContents;
+}
+
+function $deleteHeadingFromTableOfContents(key, currentTableOfContents) {
+  const newTableOfContents = [];
+
+  for (const heading of currentTableOfContents) {
+    if (heading[0] !== key) {
+      newTableOfContents.push(heading);
+    }
+  }
+
+  return newTableOfContents;
+}
+
+function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
+  const newTextContent = heading.getTextContent();
+  const newTableOfContents = [];
+
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      newTableOfContents.push([heading.getKey(), newTextContent, heading.getTag()]);
+    } else {
+      newTableOfContents.push(oldHeading);
+    }
+  }
+
+  return newTableOfContents;
+}
+
+function LexicalTableOfContentsPlugin({
+  children
+}) {
+  const [tableOfContents, setTableOfContents] = react.useState([]);
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  react.useEffect(() => {
+    // Set table of contents initial state
+    let currentTableOfContents = [];
+    editor.getEditorState().read(() => {
+      const root = lexical.$getRoot();
+      const rootChildren = root.getChildren();
+
+      for (const child of rootChildren) {
+        if (richText.$isHeadingNode(child)) {
+          currentTableOfContents.push([child.getKey(), child.getTextContent(), child.getTag()]);
+        }
+      }
+
+      setTableOfContents(currentTableOfContents);
+    }); // Listen to updates to heading mutations and update state
+
+    const removeHeaderMutationListener = editor.registerMutationListener(richText.HeadingNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'created') {
+            const newHeading = lexical.$getNodeByKey(nodeKey);
+
+            if (newHeading !== null) {
+              let prevHeading = newHeading.getPreviousSibling();
+
+              while (prevHeading && !richText.$isHeadingNode(prevHeading)) {
+                prevHeading = prevHeading.getPreviousSibling();
+              }
+
+              currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
+              setTableOfContents(currentTableOfContents);
+            }
+          } else if (mutation === 'destroyed') {
+            currentTableOfContents = $deleteHeadingFromTableOfContents(nodeKey, currentTableOfContents);
+            setTableOfContents(currentTableOfContents);
+          }
+        }
+      });
+    }); // Listen to text node mutation updates
+
+    const removeTextNodeMutationListener = editor.registerMutationListener(lexical.TextNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'updated') {
+            const currNode = lexical.$getNodeByKey(nodeKey);
+
+            if (currNode !== null) {
+              const parentNode = currNode.getParentOrThrow();
+
+              if (richText.$isHeadingNode(parentNode)) {
+                currentTableOfContents = $updateHeadingInTableOfContents(parentNode, currentTableOfContents);
+                setTableOfContents(currentTableOfContents);
+              }
+            }
+          }
+        }
+      });
+    });
+    return () => {
+      removeHeaderMutationListener();
+      removeTextNodeMutationListener();
+    };
+  }, [editor]);
+  return children(tableOfContents, editor);
+}
+
+module.exports = LexicalTableOfContentsPlugin;

package/LexicalTableOfContents__EXPERIMENTAL.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 LexicalTableOfContents__EXPERIMENTAL = process.env.NODE_ENV === 'development' ? require('./LexicalTableOfContents__EXPERIMENTAL.dev.js') : require('./LexicalTableOfContents__EXPERIMENTAL.prod.js')
+module.exports = LexicalTableOfContents__EXPERIMENTAL;

package/LexicalTableOfContents__EXPERIMENTAL.js.flow

@@ -0,0 +1,17 @@
+/**
+ * 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 {HeadingTagType} from '@lexical/rich-text';
+import type {NodeKey} from 'lexical';
+
+declare export function LexicalTableOfContentsPlugin({
+  children: (
+    tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
+  ) => React$Node,
+}): React$Node;

package/LexicalTableOfContents__EXPERIMENTAL.prod.js

@@ -0,0 +1,10 @@
+/**
+ * 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 k=require("@lexical/react/LexicalComposerContext"),l=require("@lexical/rich-text"),r=require("lexical"),u=require("react");
+module.exports=function({children:v}){let [w,m]=u.useState([]),[f]=k.useLexicalComposerContext();u.useEffect(()=>{let b=[];f.getEditorState().read(()=>{let h=r.$getRoot().getChildren();for(let a of h)l.$isHeadingNode(a)&&b.push([a.getKey(),a.getTextContent(),a.getTag()]);m(b)});let x=f.registerMutationListener(l.HeadingNode,h=>{f.getEditorState().read(()=>{for(const [n,p]of h)if("created"===p){var a=r.$getNodeByKey(n);if(null!==a){for(var c=a.getPreviousSibling();c&&!l.$isHeadingNode(c);)c=c.getPreviousSibling();
+a:{var d=b;if(null===a){b=d;break a}let e=[a.getKey(),a.getTextContent(),a.getTag()],g=[];if(null===c)g=[e,...d];else for(let q=0;q<d.length;q++){let t=d[q][0];g.push(d[q]);t===c.getKey()&&t!==a.getKey()&&g.push(e)}b=g}m(b)}}else if("destroyed"===p){c=n;a=b;d=[];for(let e of a)e[0]!==c&&d.push(e);b=d;m(b)}})}),y=f.registerMutationListener(r.TextNode,h=>{f.getEditorState().read(()=>{for(const [d,n]of h)if("updated"===n){var a=r.$getNodeByKey(d);if(null!==a&&(a=a.getParentOrThrow(),l.$isHeadingNode(a))){var c=
+b;let p=a.getTextContent(),e=[];for(let g of c)g[0]===a.getKey()?e.push([a.getKey(),p,a.getTag()]):e.push(g);b=e;m(b)}}})});return()=>{x();y()}},[f]);return v(w,f)}