@lexical/react 0.3.8 → 0.3.9

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');
@@ -241,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;
@@ -263,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);d.delete(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.js.flow

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

package/LexicalTreeView.dev.js

@@ -6,6 +6,7 @@
  */
 'use strict';
 
+var link = require('@lexical/link');
 var mark = require('@lexical/mark');
 var lexical = require('lexical');
 var React = require('react');
@@ -92,7 +93,7 @@ function TreeView({
 
       play();
       return () => {
-        window.clearTimeout(timeoutId);
+        clearTimeout(timeoutId);
       };
     }
   }, [timeStampedEditorStates, isPlaying, editor, totalEditorStates]);
@@ -120,7 +121,8 @@ function TreeView({
         setTimeTravelEnabled(true);
       }
     },
-    className: timeTravelButtonClassName
+    className: timeTravelButtonClassName,
+    type: "button"
   }, "Time Travel"), /*#__PURE__*/React.createElement("pre", {
     ref: treeElementRef
   }, content), timeTravelEnabled && /*#__PURE__*/React.createElement("div", {
@@ -129,7 +131,8 @@ function TreeView({
     className: timeTravelPanelButtonClassName,
     onClick: () => {
       setIsPlaying(!isPlaying);
-    }
+    },
+    type: "button"
   }, isPlaying ? 'Pause' : 'Play'), /*#__PURE__*/React.createElement("input", {
     className: timeTravelPanelSliderClassName,
     ref: inputRef,
@@ -164,7 +167,8 @@ function TreeView({
         setTimeTravelEnabled(false);
         setIsPlaying(false);
       }
-    }
+    },
+    type: "button"
   }, "Exit")));
 }
 
@@ -228,27 +232,37 @@ function visitTree(currentNode, visitor, indent = []) {
 
 function normalize(text) {
   return Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
-}
+} // TODO Pass via props to allow customizability
+
 
 function printNode(node) {
   if (lexical.$isTextNode(node)) {
     const text = node.getTextContent(true);
     const title = text.length === 0 ? '(empty)' : `"${normalize(text)}"`;
-    const properties = printAllProperties(node);
+    const properties = printAllTextNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else if (link.$isLinkNode(node)) {
+    const link = node.getURL();
+    const title = link.length === 0 ? '(empty)' : `"${normalize(link)}"`;
+    const properties = printAllLinkNodeProperties(node);
+    return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else {
+    return '';
   }
-
-  return '';
 }
 
 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'];
 
-function printAllProperties(node) {
+function printAllTextNodeProperties(node) {
   return [printFormatProperties(node), printDetailProperties(node), printModeProperties(node)].filter(Boolean).join(', ');
 }
 
+function printAllLinkNodeProperties(node) {
+  return [printTargetProperties(node), printRelProperties(node)].filter(Boolean).join(', ');
+}
+
 function printDetailProperties(nodeOrSelection) {
   let str = DETAIL_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
 
@@ -279,6 +293,26 @@ function printFormatProperties(nodeOrSelection) {
   return str;
 }
 
+function printTargetProperties(node) {
+  let str = node.getTarget(); // TODO Fix nullish on LinkNode
+
+  if (str != null) {
+    str = 'target: ' + str;
+  }
+
+  return str;
+}
+
+function printRelProperties(node) {
+  let str = node.getRel(); // TODO Fix nullish on LinkNode
+
+  if (str != null) {
+    str = 'rel: ' + str;
+  }
+
+  return str;
+}
+
 function printSelectedCharsLine({
   indent,
   isSelected,

package/LexicalTreeView.prod.js

@@ -4,17 +4,17 @@
  * 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 l=require("@lexical/mark"),p=require("lexical"),r=require("react");let D=Object.freeze({"\t":"\\t","\n":"\\n"}),E=new RegExp(Object.keys(D).join("|"),"g"),F=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
-function G(a){let b="",c=H(a),e=a.anchor;a=a.focus;let d=e.offset,f=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${e.key}, offset: ${null===d?"null":d}, type: ${e.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===f?"null":f}, type: ${a.type} }`}
-function J(a){let b=" root\n";a=a.read(()=>{const c=p.$getSelection();K(p.$getRoot(),(e,d)=>{const f=`(${e.getKey()})`,g=e.getType()||"",m=e.isSelected(),v=l.$isMarkNode(e)?` id: [ ${e.getIDs().join(", ")} ] `:"";var u=b,q=m?F.selectedLine:" ",w=d.join(" ");if(p.$isTextNode(e)){var k=e.getTextContent(!0);let t=0===k.length?"(empty)":`"${L(k)}"`;k=[H(e),M(e),N(e)].filter(Boolean).join(", ");k=[t,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else k="";b=u+`${q} ${w} ${f} ${g} ${v} ${k}\n`;
-b+=O({indent:d,isSelected:m,node:e,nodeKeyDisplay:f,selection:c,typeDisplay:g})});return null===c?": null":p.$isRangeSelection(c)?G(c):p.$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchor.key}, focusCell: ${c.focus.key} }`:`: node\n  \u2514 [${Array.from(c._nodes).join(", ")}]`});return b+"\n selection"+a}
-function K(a,b,c=[]){a=a.getChildren();let e=a.length;a.forEach((d,f)=>{b(d,c.concat(f===e-1?F.isLastChild:F.hasNextSibling));p.$isElementNode(d)&&K(d,b,c.concat(f===e-1?F.ancestorIsLastChild:F.ancestorHasNextSibling))})}function L(a){return Object.entries(D).reduce((b,[c,e])=>b.replace(new RegExp(c,"g"),String(e)),a)}
-let P=[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"],Q=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],R=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];
-function M(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function N(a){let b=R.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function H(a){let b=P.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
-function O({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:f}){if(!p.$isTextNode(c)||!p.$isRangeSelection(d)||!b||p.$isElementNode(c))return"";b=d.anchor;var g=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===g.offset)return"";g=d.anchor;let m=d.focus,v=c.getTextContent(!0),u=v.length;b=d=-1;if("text"===g.type&&"text"===m.type){let k=g.getNode(),t=m.getNode();k===t&&c===k&&g.offset!==m.offset?[d,b]=g.offset<m.offset?[g.offset,m.offset]:[m.offset,
-g.offset]:c===k?[d,b]=k.isBefore(t)?[g.offset,u]:[0,g.offset]:c===t?[d,b]=t.isBefore(k)?[m.offset,u]:[0,m.offset]:[d,b]=[0,u]}c=(v.slice(0,d).match(E)||[]).length;g=(v.slice(d,b).match(E)||[]).length;let [q,w]=[d+c,b+c+g];if(q===w)return"";c=a[a.length-1]===F.hasNextSibling?F.ancestorHasNextSibling:F.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(q+1).fill(" ");d=Array(w-q).fill(F.selectedChar);e=Array(e.length+(f.length+3)).fill(" ");return[F.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+
+'use strict';var l=require("@lexical/link"),q=require("@lexical/mark"),t=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 b="",c=I(a),d=a.anchor;a=a.focus;let e=d.offset,g=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${d.key}, offset: ${null===e?"null":e}, type: ${d.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===g?"null":g}, type: ${a.type} }`}
+function K(a){let b=" root\n";a=a.read(()=>{const c=t.$getSelection();L(t.$getRoot(),(d,e)=>{const g=`(${d.getKey()})`,h=d.getType()||"",n=d.isSelected(),w=q.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var v=b,r=n?G.selectedLine:" ",x=e.join(" ");if(t.$isTextNode(d)){var f=d.getTextContent(!0);var m=0===f.length?"(empty)":`"${M(f)}"`;f=[I(d),N(d),O(d)].filter(Boolean).join(", ");f=[m,0!==f.length?`{ ${f} }`:null].filter(Boolean).join(" ").trim()}else if(l.$isLinkNode(d)){f=d.getURL();f=
+0===f.length?"(empty)":`"${M(f)}"`;m=d.getTarget();null!=m&&(m="target: "+m);var y=Boolean;let u=d.getRel();null!=u&&(u="rel: "+u);m=[m,u].filter(y).join(", ");f=[f,0!==m.length?`{ ${m} }`:null].filter(Boolean).join(" ").trim()}else f="";b=v+`${r} ${x} ${g} ${h} ${w} ${f}\n`;b+=P({indent:e,isSelected:n,node:d,nodeKeyDisplay:g,selection:c,typeDisplay:h})});return null===c?": null":t.$isRangeSelection(c)?H(c):t.$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchor.key}, focusCell: ${c.focus.key} }`:
+`: node\n  \u2514 [${Array.from(c._nodes).join(", ")}]`});return b+"\n selection"+a}function L(a,b,c=[]){a=a.getChildren();let d=a.length;a.forEach((e,g)=>{b(e,c.concat(g===d-1?G.isLastChild:G.hasNextSibling));t.$isElementNode(e)&&L(e,b,c.concat(g===d-1?G.ancestorIsLastChild:G.ancestorHasNextSibling))})}function M(a){return Object.entries(E).reduce((b,[c,d])=>b.replace(new RegExp(c,"g"),String(d)),a)}
+let Q=[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"],R=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],S=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];
+function N(a){let b=R.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function O(a){let b=S.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function I(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
+function P({indent:a,isSelected:b,node:c,nodeKeyDisplay:d,selection:e,typeDisplay:g}){if(!t.$isTextNode(c)||!t.$isRangeSelection(e)||!b||t.$isElementNode(c))return"";b=e.anchor;var h=e.focus;if(""===c.getTextContent()||b.getNode()===e.focus.getNode()&&b.offset===h.offset)return"";h=e.anchor;let n=e.focus,w=c.getTextContent(!0),v=w.length;b=e=-1;if("text"===h.type&&"text"===n.type){let f=h.getNode(),m=n.getNode();f===m&&c===f&&h.offset!==n.offset?[e,b]=h.offset<n.offset?[h.offset,n.offset]:[n.offset,
+h.offset]:c===f?[e,b]=f.isBefore(m)?[h.offset,v]:[0,h.offset]:c===m?[e,b]=m.isBefore(f)?[n.offset,v]:[0,n.offset]:[e,b]=[0,v]}c=(w.slice(0,e).match(F)||[]).length;h=(w.slice(e,b).match(F)||[]).length;let [r,x]=[e+c,b+c+h];if(r===x)return"";c=a[a.length-1]===G.hasNextSibling?G.ancestorHasNextSibling:G.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(r+1).fill(" ");e=Array(x-r).fill(G.selectedChar);d=Array(d.length+(g.length+3)).fill(" ");return[G.selectedLine,a.join(" "),[...d,...c,...e].join("")].join(" ")+
 "\n"}
-exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:e,timeTravelPanelClassName:d,editor:f}){let [g,m]=r.useState([]),[v,u]=r.useState(""),[q,w]=r.useState(!1),k=r.useRef(0),t=r.useRef(null),B=r.useRef(null),[z,C]=r.useState(!1);r.useEffect(()=>{u(J(f.getEditorState()));return f.registerUpdateListener(({editorState:h})=>{let n=f._compositionKey,x=J(f.getEditorState());u([x,null!==n&&`Composition key: ${n}`].filter(Boolean).join("\n\n"));q||
-m(A=>[...A,[Date.now(),h]])})},[q,f]);let y=g.length;r.useEffect(()=>{if(z){let h,n=()=>{const x=k.current;x===y-1?C(!1):h=setTimeout(()=>{k.current++;const A=k.current,I=B.current;null!==I&&(I.value=String(A));f.setEditorState(g[A][1]);n()},g[x+1][0]-g[x][0])};n();return()=>{window.clearTimeout(h)}}},[g,z,f,y]);r.useEffect(()=>{let h=t.current;if(null!==h)return h.__lexicalEditor=f,()=>{h.__lexicalEditor=null}},[f]);return r.createElement("div",{className:e},!q&&2<y&&r.createElement("button",{onClick:()=>
-{let h=f.getRootElement();null!==h&&(h.contentEditable="false",k.current=y-1,w(!0))},className:a},"Time Travel"),r.createElement("pre",{ref:t},v),q&&r.createElement("div",{className:d},r.createElement("button",{className:c,onClick:()=>{C(!z)}},z?"Pause":"Play"),r.createElement("input",{className:b,ref:B,onChange:h=>{h=Number(h.target.value);let n=g[h];n&&(k.current=h,f.setEditorState(n[1]))},type:"range",min:"1",max:y-1}),r.createElement("button",{className:c,onClick:()=>{var h=f.getRootElement();
-if(null!==h){h.contentEditable="true";h=g.length-1;f.setEditorState(g[h][1]);let n=B.current;null!==n&&(n.value=String(h));w(!1);C(!1)}}},"Exit")))}
+exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:d,timeTravelPanelClassName:e,editor:g}){let [h,n]=D.useState([]),[w,v]=D.useState(""),[r,x]=D.useState(!1),f=D.useRef(0),m=D.useRef(null),y=D.useRef(null),[u,C]=D.useState(!1);D.useEffect(()=>{v(K(g.getEditorState()));return g.registerUpdateListener(({editorState:k})=>{let p=g._compositionKey,z=K(g.getEditorState());v([z,null!==p&&`Composition key: ${p}`].filter(Boolean).join("\n\n"));r||
+n(B=>[...B,[Date.now(),k]])})},[r,g]);let A=h.length;D.useEffect(()=>{if(u){let k,p=()=>{const z=f.current;z===A-1?C(!1):k=setTimeout(()=>{f.current++;const B=f.current,J=y.current;null!==J&&(J.value=String(B));g.setEditorState(h[B][1]);p()},h[z+1][0]-h[z][0])};p();return()=>{clearTimeout(k)}}},[h,u,g,A]);D.useEffect(()=>{let k=m.current;if(null!==k)return k.__lexicalEditor=g,()=>{k.__lexicalEditor=null}},[g]);return D.createElement("div",{className:d},!r&&2<A&&D.createElement("button",{onClick:()=>
+{let k=g.getRootElement();null!==k&&(k.contentEditable="false",f.current=A-1,x(!0))},className:a,type:"button"},"Time Travel"),D.createElement("pre",{ref:m},w),r&&D.createElement("div",{className:e},D.createElement("button",{className:c,onClick:()=>{C(!u)},type:"button"},u?"Pause":"Play"),D.createElement("input",{className:b,ref:y,onChange:k=>{k=Number(k.target.value);let p=h[k];p&&(f.current=k,g.setEditorState(p[1]))},type:"range",min:"1",max:A-1}),D.createElement("button",{className:c,onClick:()=>
+{var k=g.getRootElement();if(null!==k){k.contentEditable="true";k=h.length-1;g.setEditorState(h[k][1]);let p=y.current;null!==p&&(p.value=String(k));x(!1);C(!1)}},type:"button"},"Exit")))}

package/LexicalTypeaheadMenuPlugin.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { TextNode } from 'lexical';
+import { LexicalEditor, NodeKey, TextNode } from 'lexical';
 import { MutableRefObject, ReactPortal } from 'react';
 export declare type QueryMatch = {
     leadOffset: number;
@@ -14,7 +14,7 @@ export declare type QueryMatch = {
 };
 export declare type Resolution = {
     match: QueryMatch;
-    range: Range;
+    getRect: () => ClientRect;
 };
 export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
 export declare class TypeaheadOption {
@@ -39,6 +39,14 @@ declare type TypeaheadMenuPluginArgs<TOption extends TypeaheadOption> = {
     menuRenderFn: MenuRenderFn<TOption>;
     triggerFn: TriggerFn;
 };
-declare type TriggerFn = (text: string) => QueryMatch | null;
+declare type TriggerFn = (text: string, editor: LexicalEditor) => QueryMatch | null;
 export declare function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({ options, onQueryChange, onSelectOption, menuRenderFn, triggerFn, }: TypeaheadMenuPluginArgs<TOption>): JSX.Element | null;
+declare type NodeMenuPluginArgs<TOption extends TypeaheadOption> = {
+    onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
+    options: Array<TOption>;
+    nodeKey: NodeKey | null;
+    onClose: () => void;
+    menuRenderFn: MenuRenderFn<TOption>;
+};
+export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, onClose, onSelectOption, menuRenderFn, }: NodeMenuPluginArgs<TOption>): JSX.Element | null;
 export {};