@lexical/react 0.9.1 → 0.10.0

package/LexicalAutoEmbedPlugin.dev.js

@@ -107,6 +107,10 @@ function LexicalAutoEmbedPlugin({
 
         if (result != null) {
           editor.update(() => {
+            if (!lexical.$getSelection()) {
+              linkNode.selectEnd();
+            }
+
             activeEmbedConfig.insertNode(editor, result);
 
             if (linkNode.isAttached()) {

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 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()@:%_+.~#?&//=]*)/
+'use strict';var e=require("@lexical/link"),k=require("@lexical/react/LexicalComposerContext"),l=require("@lexical/react/LexicalTypeaheadMenuPlugin"),q=require("@lexical/utils"),r=require("lexical"),z=require("react");let A=r.createCommand("INSERT_EMBED_COMMAND");class B extends l.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 [c]=k.useLexicalComposerContext(),[g,u]=z.useState(null),[h,v]=z.useState(null),m=z.useCallback(()=>{u(null);v(null)},[]),w=z.useCallback(b=>{c.getEditorState().read(async()=>{const a=r.$getNodeByKey(b);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()))}})},[c,f]);z.useEffect(()=>{let b=(a,{updateTags:d,
+dirtyLeaves:p})=>{for(const [x,D]of a)"created"===D&&d.has("paste")&&1===p.size?w(x):x===g&&m()};return q.mergeRegister(...[e.LinkNode,e.AutoLinkNode].map(a=>c.registerMutationListener(a,(...d)=>b(...d))))},[w,c,f,g,m]);z.useEffect(()=>c.registerCommand(A,b=>{let a=f.find(({type:d})=>d===b);return a?(n(a),!0):!1},r.COMMAND_PRIORITY_EDITOR),[c,f,n]);let y=z.useCallback(async()=>{if(null!=h&&null!=g){const b=c.getEditorState().read(()=>{const a=r.$getNodeByKey(g);return e.$isLinkNode(a)?a:null});if(e.$isLinkNode(b)){const a=
+await Promise.resolve(h.parseUrl(b.__url));null!=a&&c.update(()=>{r.$getSelection()||b.selectEnd();h.insertNode(c,a);b.isAttached()&&b.remove()})}}},[h,c,g]),E=z.useMemo(()=>null!=h&&null!=g?t(h,y,m):[],[h,y,t,g,m]),F=z.useCallback((b,a,d)=>{c.update(()=>{b.onSelect(a);d()})},[c]);return null!=g?z.createElement(l.LexicalNodeMenuPlugin,{nodeKey:g,onClose:m,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/LexicalClickableLinkPlugin.d.ts

@@ -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.
+ *
+ */
+export default function LexicalClickableLinkPlugin({ newTab, }: {
+    newTab?: boolean;
+}): null;

package/LexicalClickableLinkPlugin.dev.js

@@ -0,0 +1,112 @@
+/**
+ * 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 link = require('@lexical/link');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var utils = require('@lexical/utils');
+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 domGetParent(node, predicate) {
+  let parent = node.parentNode;
+
+  while (parent != null) {
+    if (predicate(parent)) {
+      return parent;
+    }
+
+    parent = parent.parentNode;
+  }
+
+  return null;
+}
+
+function LexicalClickableLinkPlugin({
+  newTab = true
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  react.useEffect(() => {
+    const onClick = event => {
+      const target = event.target;
+
+      if (!(target instanceof Node)) {
+        return;
+      }
+
+      const nearestEditor = lexical.getNearestEditorFromDOMNode(target);
+
+      if (nearestEditor === null) {
+        return;
+      }
+
+      let url = null;
+      let urlTarget = null;
+      nearestEditor.update(() => {
+        const clickedNode = lexical.$getNearestNodeFromDOMNode(target);
+
+        if (clickedNode !== null) {
+          const maybeLinkNode = utils.$findMatchingParent(clickedNode, lexical.$isElementNode);
+
+          if (link.$isLinkNode(maybeLinkNode)) {
+            url = maybeLinkNode.getURL();
+            urlTarget = maybeLinkNode.getTarget();
+          } else {
+            const a = utils.isHTMLAnchorElement(target) ? target : domGetParent(target, utils.isHTMLAnchorElement);
+            url = a.href;
+            urlTarget = a.target;
+          }
+        }
+      });
+
+      if (url === null || url === '') {
+        return;
+      } // Allow user to select link text without follwing url
+
+
+      const selection = editor.getEditorState().read(lexical.$getSelection);
+
+      if (lexical.$isRangeSelection(selection) && !selection.isCollapsed()) {
+        event.preventDefault();
+        return;
+      }
+
+      const isMiddle = event.type === 'auxclick' && event.button === 1;
+      window.open(url, newTab || isMiddle || event.metaKey || event.ctrlKey || urlTarget === '_blank' ? '_blank' : '_self');
+      event.preventDefault();
+    };
+
+    const onMouseUp = event => {
+      if (event.button === 1 && editor.isEditable()) {
+        onClick(event);
+      }
+    };
+
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener('click', onClick);
+        prevRootElement.removeEventListener('mouseup', onMouseUp);
+      }
+
+      if (rootElement !== null) {
+        rootElement.addEventListener('click', onClick);
+        rootElement.addEventListener('mouseup', onMouseUp);
+      }
+    });
+  }, [editor, newTab]);
+  return null;
+}
+
+module.exports = LexicalClickableLinkPlugin;

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

package/LexicalClickableLinkPlugin.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
+ */
+
+declare export function MLCClickableLinkPlugin({
+  newTab?: boolean,
+}): null;

package/LexicalClickableLinkPlugin.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 e=require("@lexical/link"),k=require("@lexical/react/LexicalComposerContext"),q=require("@lexical/utils"),r=require("lexical"),t=require("react");
+module.exports=function({newTab:n=!0}){let [h]=k.useLexicalComposerContext();t.useEffect(()=>{let m=a=>{const c=a.target;if(c instanceof Node){var d=r.getNearestEditorFromDOMNode(c);if(null!==d){var f=null,l=null;d.update(()=>{var b=r.$getNearestNodeFromDOMNode(c);if(null!==b)if(b=q.$findMatchingParent(b,r.$isElementNode),e.$isLinkNode(b))f=b.getURL(),l=b.getTarget();else{if(q.isHTMLAnchorElement(c))b=c;else a:{b=q.isHTMLAnchorElement;let g=c.parentNode;for(;null!=g;){if(b(g)){b=g;break a}g=g.parentNode}b=
+null}f=b.href;l=b.target}});if(null!==f&&""!==f){d=h.getEditorState().read(r.$getSelection);if(!r.$isRangeSelection(d)||d.isCollapsed())d="auxclick"===a.type&&1===a.button,window.open(f,n||d||a.metaKey||a.ctrlKey||"_blank"===l?"_blank":"_self");a.preventDefault()}}}},p=a=>{1===a.button&&h.isEditable()&&m(a)};return h.registerRootListener((a,c)=>{null!==c&&(c.removeEventListener("click",m),c.removeEventListener("mouseup",p));null!==a&&(a.addEventListener("click",m),a.addEventListener("mouseup",p))})},
+[h,n]);return null}

package/LexicalCollaborationPlugin.d.ts

@@ -7,10 +7,10 @@
  */
 /// <reference types="react" />
 import type { Doc } from 'yjs';
-import { Provider } from '@lexical/yjs';
+import { ExcludedProperties, Provider } from '@lexical/yjs';
 import { InitialEditorStateType } from './LexicalComposer';
 import { CursorsContainerRef } from './shared/useYjsCollaboration';
-export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, }: {
+declare type Props = {
     id: string;
     providerFactory: (id: string, yjsDocMap: Map<string, Doc>) => Provider;
     shouldBootstrap: boolean;
@@ -18,4 +18,7 @@ export declare function CollaborationPlugin({ id, providerFactory, shouldBootstr
     cursorColor?: string;
     cursorsContainerRef?: CursorsContainerRef;
     initialEditorState?: InitialEditorStateType;
-}): JSX.Element;
+    excludedProperties?: ExcludedProperties;
+};
+export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, }: Props): JSX.Element;
+export {};

package/LexicalCollaborationPlugin.dev.js

@@ -22,10 +22,10 @@ var yjs$1 = require('yjs');
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap, cursorsContainerRef, initialEditorState) {
+function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap, cursorsContainerRef, initialEditorState, excludedProperties) {
   const isReloadingDoc = React.useRef(false);
   const [doc, setDoc] = React.useState(docMap.get(id));
-  const binding = React.useMemo(() => yjs.createBinding(editor, provider, id, doc, docMap), [editor, provider, id, docMap, doc]);
+  const binding = React.useMemo(() => yjs.createBinding(editor, provider, id, doc, docMap, excludedProperties), [editor, provider, id, docMap, doc, excludedProperties]);
   const connect = React.useCallback(() => {
     provider.connect();
   }, [provider]);
@@ -290,7 +290,8 @@ function CollaborationPlugin({
   username,
   cursorColor,
   cursorsContainerRef,
-  initialEditorState
+  initialEditorState,
+  excludedProperties
 }) {
   const collabContext = LexicalCollaborationContext.useCollaborationContext(username, cursorColor);
   const {
@@ -310,7 +311,7 @@ function CollaborationPlugin({
     };
   }, [collabContext, editor]);
   const provider = React.useMemo(() => providerFactory(id, yjsDocMap), [id, providerFactory, yjsDocMap]);
-  const [cursors, binding] = useYjsCollaboration(editor, id, provider, yjsDocMap, name, color, shouldBootstrap, cursorsContainerRef, initialEditorState);
+  const [cursors, binding] = useYjsCollaboration(editor, id, provider, yjsDocMap, name, color, shouldBootstrap, cursorsContainerRef, initialEditorState, excludedProperties);
   collabContext.clientID = binding.clientID;
   useYjsHistory(editor, binding);
   useYjsFocusTracking(editor, provider, name, color);

package/LexicalCollaborationPlugin.prod.js

@@ -4,12 +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/LexicalCollaborationContext"),f=require("@lexical/react/LexicalComposerContext"),h=require("react"),z=require("@lexical/utils"),H=require("@lexical/yjs"),I=require("lexical"),J=require("react-dom"),K=require("yjs");
-function L(b,c,a,d,p,x,y,l,t){let q=h.useRef(!1),[v,r]=h.useState(d.get(c)),g=h.useMemo(()=>H.createBinding(b,a,c,v,d),[b,a,c,d,v]),n=h.useCallback(()=>{a.connect()},[a]),w=h.useCallback(()=>{try{a.disconnect()}catch(m){}},[a]);h.useEffect(()=>{let {root:m}=g,{awareness:A}=a,B=({status:k})=>{b.dispatchCommand(H.CONNECTED_COMMAND,"connected"===k)},C=k=>{y&&k&&m.isEmpty()&&0===m._xmlText._length&&!1===q.current&&M(b,t);q.current=!1},D=()=>{H.syncCursorPositions(g,a)},E=(k,u)=>{u=u.origin;u!==g&&H.syncYjsChangesToLexical(g,
-a,k,u instanceof K.UndoManager)};H.initLocalState(a,p,x,document.activeElement===b.getRootElement());let F=k=>{N(b,g);r(k);d.set(c,k);q.current=!0};a.on("reload",F);a.on("status",B);a.on("sync",C);A.on("update",D);m.getSharedType().observeDeep(E);let R=b.registerUpdateListener(({prevEditorState:k,editorState:u,dirtyLeaves:O,dirtyElements:P,normalizedNodes:Q,tags:G})=>{!1===G.has("skip-collab")&&H.syncLexicalUpdateToYjs(g,a,k,u,P,O,Q,G)});n();return()=>{!1===q.current&&w();a.off("sync",C);a.off("status",
-B);a.off("reload",F);A.off("update",D);m.getSharedType().unobserveDeep(E);d.delete(c);R()}},[g,x,n,w,d,b,c,t,p,a,y]);let S=h.useMemo(()=>J.createPortal(h.createElement("div",{ref:m=>{g.cursorsContainer=m}}),l&&l.current||document.body),[g,l]);h.useEffect(()=>b.registerCommand(H.TOGGLE_CONNECT_COMMAND,m=>{void 0!==n&&void 0!==w&&(m?(console.log("Collaboration connected!"),n()):(console.log("Collaboration disconnected!"),w()));return!0},I.COMMAND_PRIORITY_EDITOR),[n,w,b]);return[S,g]}
-function T(b,c,a,d){h.useEffect(()=>z.mergeRegister(b.registerCommand(I.FOCUS_COMMAND,()=>{H.setLocalStateFocus(c,a,d,!0);return!1},I.COMMAND_PRIORITY_EDITOR),b.registerCommand(I.BLUR_COMMAND,()=>{H.setLocalStateFocus(c,a,d,!1);return!1},I.COMMAND_PRIORITY_EDITOR)),[d,b,a,c])}
-function U(b,c){let a=h.useMemo(()=>H.createUndoManager(c,c.root.getSharedType()),[c]);h.useEffect(()=>z.mergeRegister(b.registerCommand(I.UNDO_COMMAND,()=>{a.undo();return!0},I.COMMAND_PRIORITY_EDITOR),b.registerCommand(I.REDO_COMMAND,()=>{a.redo();return!0},I.COMMAND_PRIORITY_EDITOR)));return h.useCallback(()=>{a.clear()},[a])}
-function M(b,c){b.update(()=>{var a=I.$getRoot();if(a.isEmpty())if(c)switch(typeof c){case "string":var d=b.parseEditorState(c);b.setEditorState(d,{tag:"history-merge"});break;case "object":b.setEditorState(c,{tag:"history-merge"});break;case "function":b.update(()=>{I.$getRoot().isEmpty()&&c(b)},{tag:"history-merge"})}else d=I.$createParagraphNode(),a.append(d),{activeElement:a}=document,(null!==I.$getSelection()||null!==a&&a===b.getRootElement())&&d.select()},{tag:"history-merge"})}
-function N(b,c){b.update(()=>{let d=I.$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 p=0;p<a.length;p++)c.removeChild(a[d])}}}}
-exports.CollaborationPlugin=function({id:b,providerFactory:c,shouldBootstrap:a,username:d,cursorColor:p,cursorsContainerRef:x,initialEditorState:y}){let l=e.useCollaborationContext(d,p),{yjsDocMap:t,name:q,color:v}=l,[r]=f.useLexicalComposerContext();h.useEffect(()=>{l.isCollabActive=!0;return()=>{null==r._parentEditor&&(l.isCollabActive=!1)}},[l,r]);d=h.useMemo(()=>c(b,t),[b,c,t]);let [g,n]=L(r,b,d,t,q,v,a,x,y);l.clientID=n.clientID;U(r,n);T(r,d,q,v);return g}
+'use strict';var e=require("@lexical/react/LexicalCollaborationContext"),f=require("@lexical/react/LexicalComposerContext"),h=require("react"),A=require("@lexical/utils"),I=require("@lexical/yjs"),J=require("lexical"),K=require("react-dom"),L=require("yjs");
+function M(b,c,a,d,p,y,z,v,m,t){let q=h.useRef(!1),[w,r]=h.useState(d.get(c)),g=h.useMemo(()=>I.createBinding(b,a,c,w,d,t),[b,a,c,d,w,t]),n=h.useCallback(()=>{a.connect()},[a]),x=h.useCallback(()=>{try{a.disconnect()}catch(l){}},[a]);h.useEffect(()=>{let {root:l}=g,{awareness:B}=a,C=({status:k})=>{b.dispatchCommand(I.CONNECTED_COMMAND,"connected"===k)},D=k=>{z&&k&&l.isEmpty()&&0===l._xmlText._length&&!1===q.current&&N(b,m);q.current=!1},E=()=>{I.syncCursorPositions(g,a)},F=(k,u)=>{u=u.origin;u!==
+g&&I.syncYjsChangesToLexical(g,a,k,u instanceof L.UndoManager)};I.initLocalState(a,p,y,document.activeElement===b.getRootElement());let G=k=>{O(b,g);r(k);d.set(c,k);q.current=!0};a.on("reload",G);a.on("status",C);a.on("sync",D);B.on("update",E);l.getSharedType().observeDeep(F);let S=b.registerUpdateListener(({prevEditorState:k,editorState:u,dirtyLeaves:P,dirtyElements:Q,normalizedNodes:R,tags:H})=>{!1===H.has("skip-collab")&&I.syncLexicalUpdateToYjs(g,a,k,u,Q,P,R,H)});n();return()=>{!1===q.current&&
+x();a.off("sync",D);a.off("status",C);a.off("reload",G);B.off("update",E);l.getSharedType().unobserveDeep(F);d.delete(c);S()}},[g,y,n,x,d,b,c,m,p,a,z]);let T=h.useMemo(()=>K.createPortal(h.createElement("div",{ref:l=>{g.cursorsContainer=l}}),v&&v.current||document.body),[g,v]);h.useEffect(()=>b.registerCommand(I.TOGGLE_CONNECT_COMMAND,l=>{void 0!==n&&void 0!==x&&(l?(console.log("Collaboration connected!"),n()):(console.log("Collaboration disconnected!"),x()));return!0},J.COMMAND_PRIORITY_EDITOR),
+[n,x,b]);return[T,g]}function U(b,c,a,d){h.useEffect(()=>A.mergeRegister(b.registerCommand(J.FOCUS_COMMAND,()=>{I.setLocalStateFocus(c,a,d,!0);return!1},J.COMMAND_PRIORITY_EDITOR),b.registerCommand(J.BLUR_COMMAND,()=>{I.setLocalStateFocus(c,a,d,!1);return!1},J.COMMAND_PRIORITY_EDITOR)),[d,b,a,c])}
+function V(b,c){let a=h.useMemo(()=>I.createUndoManager(c,c.root.getSharedType()),[c]);h.useEffect(()=>A.mergeRegister(b.registerCommand(J.UNDO_COMMAND,()=>{a.undo();return!0},J.COMMAND_PRIORITY_EDITOR),b.registerCommand(J.REDO_COMMAND,()=>{a.redo();return!0},J.COMMAND_PRIORITY_EDITOR)));return h.useCallback(()=>{a.clear()},[a])}
+function N(b,c){b.update(()=>{var a=J.$getRoot();if(a.isEmpty())if(c)switch(typeof c){case "string":var d=b.parseEditorState(c);b.setEditorState(d,{tag:"history-merge"});break;case "object":b.setEditorState(c,{tag:"history-merge"});break;case "function":b.update(()=>{J.$getRoot().isEmpty()&&c(b)},{tag:"history-merge"})}else d=J.$createParagraphNode(),a.append(d),{activeElement:a}=document,(null!==J.$getSelection()||null!==a&&a===b.getRootElement())&&d.select()},{tag:"history-merge"})}
+function O(b,c){b.update(()=>{let d=J.$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 p=0;p<a.length;p++)c.removeChild(a[d])}}}}
+exports.CollaborationPlugin=function({id:b,providerFactory:c,shouldBootstrap:a,username:d,cursorColor:p,cursorsContainerRef:y,initialEditorState:z,excludedProperties:v}){let m=e.useCollaborationContext(d,p),{yjsDocMap:t,name:q,color:w}=m,[r]=f.useLexicalComposerContext();h.useEffect(()=>{m.isCollabActive=!0;return()=>{null==r._parentEditor&&(m.isCollabActive=!1)}},[m,r]);d=h.useMemo(()=>c(b,t),[b,c,t]);let [g,n]=M(r,b,d,t,q,w,a,y,z,v);m.clientID=n.clientID;V(r,n);U(r,d,q,w);return g}

package/LexicalComposer.dev.js

@@ -57,7 +57,7 @@ function LexicalComposer({
 
     if (editor === null) {
       const newEditor = lexical.createEditor({
-        editable: false,
+        editable: initialConfig.editable,
         namespace,
         nodes,
         onError: error => onError(error, newEditor),

package/LexicalComposer.prod.js

@@ -6,4 +6,4 @@
  */
 'use strict';var e=require("@lexical/react/LexicalComposerContext"),f=require("lexical"),g=require("react");let m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement;var n=m?g.useLayoutEffect:g.useEffect;let p={tag:"history-merge"};
 function q(a,c){if(null!==c)if(void 0===c)a.update(()=>{var b=f.$getRoot();if(b.isEmpty()){let d=f.$createParagraphNode();b.append(d);b=m?document.activeElement:null;(null!==f.$getSelection()||null!==b&&b===a.getRootElement())&&d.select()}},p);else if(null!==c)switch(typeof c){case "string":let b=a.parseEditorState(c);a.setEditorState(b,p);break;case "object":a.setEditorState(c,p);break;case "function":a.update(()=>{f.$getRoot().isEmpty()&&c(a)},p)}}
-exports.LexicalComposer=function({initialConfig:a,children:c}){let b=g.useMemo(()=>{const {theme:d,namespace:h,editor__DEPRECATED:r,nodes:t,onError:u,editorState:v}=a,w=e.createLexicalComposerContext(null,d);let k=r||null;if(null===k){const l=f.createEditor({editable:!1,namespace:h,nodes:t,onError:x=>u(x,l),theme:d});q(l,v);k=l}return[k,w]},[]);n(()=>{let d=a.editable,[h]=b;h.setEditable(void 0!==d?d:!0)},[]);return g.createElement(e.LexicalComposerContext.Provider,{value:b},c)}
+exports.LexicalComposer=function({initialConfig:a,children:c}){let b=g.useMemo(()=>{const {theme:d,namespace:h,editor__DEPRECATED:r,nodes:t,onError:u,editorState:v}=a,w=e.createLexicalComposerContext(null,d);let k=r||null;if(null===k){const l=f.createEditor({editable:a.editable,namespace:h,nodes:t,onError:x=>u(x,l),theme:d});q(l,v);k=l}return[k,w]},[]);n(()=>{let d=a.editable,[h]=b;h.setEditable(void 0!==d?d:!0)},[]);return g.createElement(e.LexicalComposerContext.Provider,{value:b},c)}

package/LexicalContentEditable.js.flow

@@ -10,7 +10,7 @@
 import * as React from 'react';
 
 export type Props = $ReadOnly<{
-  ...$Partial<HTMLDivElement>,
+  ...Partial<HTMLDivElement>,
   ariaActiveDescendant?: HTMLDivElement['aria-activedescendant'],
   ariaAutoComplete?: HTMLDivElement['aria-autocomplete'],
   ariaControls?: HTMLDivElement['aria-controls'],

package/LexicalHorizontalRuleNode.d.ts

@@ -8,10 +8,7 @@
 /// <reference types="react" />
 import type { DOMConversionMap, DOMExportOutput, LexicalCommand, LexicalNode, SerializedLexicalNode } from 'lexical';
 import { DecoratorNode } from 'lexical';
-export declare type SerializedHorizontalRuleNode = SerializedLexicalNode & {
-    type: 'horizontalrule';
-    version: 1;
-};
+export declare type SerializedHorizontalRuleNode = SerializedLexicalNode;
 export declare const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;
 export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element> {
     static getType(): string;

package/LexicalHorizontalRulePlugin.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
+ */
+
+type Props = $ReadOnly<{}>;
+
+declare export function HorizontalRulePlugin(props: Props): null;

package/LexicalLinkPlugin.dev.js

@@ -43,11 +43,13 @@ function LinkPlugin({
         const {
           url,
           target,
-          rel
+          rel,
+          title
         } = payload;
         link.toggleLink(url, {
           rel,
-          target
+          target,
+          title
         });
         return true;
       }

package/LexicalLinkPlugin.prod.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var b=require("@lexical/link"),c=require("@lexical/react/LexicalComposerContext"),k=require("@lexical/utils"),l=require("lexical"),m=require("react");
-exports.LinkPlugin=function({validateUrl:d}){let [e]=c.useLexicalComposerContext();m.useEffect(()=>{if(!e.hasNodes([b.LinkNode]))throw Error("LinkPlugin: LinkNode not registered on editor");return k.mergeRegister(e.registerCommand(b.TOGGLE_LINK_COMMAND,a=>{if(null===a)return b.toggleLink(a),!0;if("string"===typeof a)return void 0===d||d(a)?(b.toggleLink(a),!0):!1;let {url:f,target:g,rel:h}=a;b.toggleLink(f,{rel:h,target:g});return!0},l.COMMAND_PRIORITY_LOW),void 0!==d?e.registerCommand(l.PASTE_COMMAND,
+exports.LinkPlugin=function({validateUrl:d}){let [e]=c.useLexicalComposerContext();m.useEffect(()=>{if(!e.hasNodes([b.LinkNode]))throw Error("LinkPlugin: LinkNode not registered on editor");return k.mergeRegister(e.registerCommand(b.TOGGLE_LINK_COMMAND,a=>{if(null===a)return b.toggleLink(a),!0;if("string"===typeof a)return void 0===d||d(a)?(b.toggleLink(a),!0):!1;let {url:f,target:g,rel:h,title:n}=a;b.toggleLink(f,{rel:h,target:g,title:n});return!0},l.COMMAND_PRIORITY_LOW),void 0!==d?e.registerCommand(l.PASTE_COMMAND,
 a=>{let f=l.$getSelection();if(!l.$isRangeSelection(f)||f.isCollapsed()||!(a instanceof ClipboardEvent)||null==a.clipboardData)return!1;let g=a.clipboardData.getData("text");return d(g)?f.getNodes().some(h=>l.$isElementNode(h))?!1:(e.dispatchCommand(b.TOGGLE_LINK_COMMAND,g),a.preventDefault(),!0):!1},l.COMMAND_PRIORITY_LOW):()=>{})},[e,d]);return null}

package/LexicalTablePlugin.d.ts

@@ -6,4 +6,7 @@
  *
  */
 /// <reference types="react" />
-export declare function TablePlugin(): JSX.Element | null;
+export declare function TablePlugin({ hasCellMerge, hasCellBackgroundColor, }: {
+    hasCellMerge?: boolean;
+    hasCellBackgroundColor?: boolean;
+}): JSX.Element | null;

package/LexicalTablePlugin.dev.js

@@ -8,6 +8,7 @@
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var table = require('@lexical/table');
+var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var react = require('react');
 
@@ -18,7 +19,21 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
-function TablePlugin() {
+
+function $insertFirst(parent, node) {
+  const firstChild = parent.getFirstChild();
+
+  if (firstChild !== null) {
+    firstChild.insertBefore(node);
+  } else {
+    parent.append(node);
+  }
+}
+
+function TablePlugin({
+  hasCellMerge = true,
+  hasCellBackgroundColor = true
+}) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   react.useEffect(() => {
     if (!editor.hasNodes([table.TableNode, table.TableCellNode, table.TableRowNode])) {
@@ -32,36 +47,12 @@ function TablePlugin() {
       rows,
       includeHeaders
     }) => {
-      const selection = lexical.$getSelection();
-
-      if (!lexical.$isRangeSelection(selection)) {
-        return true;
-      }
-
-      const focus = selection.focus;
-      const focusNode = focus.getNode();
-
-      if (focusNode !== null) {
-        const tableNode = table.$createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
-
-        if (lexical.$isRootOrShadowRoot(focusNode)) {
-          const target = focusNode.getChildAtIndex(focus.offset);
-
-          if (target !== null) {
-            target.insertBefore(tableNode);
-          } else {
-            focusNode.append(tableNode);
-          }
+      const tableNode = table.$createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
+      utils.$insertNodeToNearestRoot(tableNode);
+      const firstDescendant = tableNode.getFirstDescendant();
 
-          tableNode.insertBefore(lexical.$createParagraphNode());
-        } else {
-          const topLevelNode = focusNode.getTopLevelElementOrThrow();
-          topLevelNode.insertAfter(tableNode);
-        }
-
-        tableNode.insertAfter(lexical.$createParagraphNode());
-        const firstCell = tableNode.getFirstChildOrThrow().getFirstChildOrThrow();
-        firstCell.select();
+      if (lexical.$isTextNode(firstDescendant)) {
+        firstDescendant.select();
       }
 
       return true;
@@ -119,7 +110,79 @@ function TablePlugin() {
         tableSelection.removeListeners();
       }
     };
-  }, [editor]);
+  }, [editor]); // Unmerge cells when the feature isn't enabled
+
+  react.useEffect(() => {
+    if (hasCellMerge) {
+      return;
+    }
+
+    return editor.registerNodeTransform(table.TableCellNode, node => {
+      if (node.getColSpan() > 1 || node.getRowSpan() > 1) {
+        // When we have rowSpan we have to map the entire Table to understand where the new Cells
+        // fit best; let's analyze all Cells at once to save us from further transform iterations
+        const [,, gridNode] = lexical.DEPRECATED_$getNodeTriplet(node);
+        const [gridMap] = lexical.DEPRECATED_$computeGridMap(gridNode, node, node); // TODO this function expects Tables to be normalized. Look into this once it exists
+
+        const rowsCount = gridMap.length;
+        const columnsCount = gridMap[0].length;
+        let row = gridNode.getFirstChild();
+
+        if (!lexical.DEPRECATED_$isGridRowNode(row)) {
+          throw Error(`Expected TableNode first child to be a RowNode`);
+        }
+
+        const unmerged = [];
+
+        for (let i = 0; i < rowsCount; i++) {
+          if (i !== 0) {
+            row = row.getNextSibling();
+
+            if (!lexical.DEPRECATED_$isGridRowNode(row)) {
+              throw Error(`Expected TableNode first child to be a RowNode`);
+            }
+          }
+
+          let lastRowCell = null;
+
+          for (let j = 0; j < columnsCount; j++) {
+            const cellMap = gridMap[i][j];
+            const cell = cellMap.cell;
+
+            if (cellMap.startRow === i && cellMap.startColumn === j) {
+              lastRowCell = cell;
+              unmerged.push(cell);
+            } else if (cell.getColSpan() > 1 || cell.getRowSpan() > 1) {
+              const newCell = table.$createTableCellNode(cell.__headerState);
+
+              if (lastRowCell !== null) {
+                lastRowCell.insertAfter(newCell);
+              } else {
+                $insertFirst(row, newCell);
+              }
+            }
+          }
+        }
+
+        for (const cell of unmerged) {
+          cell.setColSpan(1);
+          cell.setRowSpan(1);
+        }
+      }
+    });
+  }, [editor, hasCellMerge]); // Remove cell background color when feature is disabled
+
+  react.useEffect(() => {
+    if (hasCellBackgroundColor) {
+      return;
+    }
+
+    return editor.registerNodeTransform(table.TableCellNode, node => {
+      if (node.getBackgroundColor() !== null) {
+        node.setBackgroundColor(null);
+      }
+    });
+  }, [editor, hasCellBackgroundColor, hasCellMerge]);
   return null;
 }
 

package/LexicalTablePlugin.js.flow

@@ -7,4 +7,8 @@
  * @flow strict
  */
 
-declare export function TablePlugin(): null;
+type Props = $ReadOnly<{
+  hasCellMerge?: boolean,
+  hasCellBackgroundColor?: boolean,
+}>;
+declare export function TablePlugin(props: Props): null;

package/LexicalTablePlugin.prod.js

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var d=require("@lexical/react/LexicalComposerContext"),f=require("@lexical/table"),l=require("lexical"),n=require("react");
-exports.TablePlugin=function(){let [e]=d.useLexicalComposerContext();n.useEffect(()=>{if(!e.hasNodes([f.TableNode,f.TableCellNode,f.TableRowNode]))throw Error("Minified Lexical error #10; visit https://lexical.dev/docs/error?code=10 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");return e.registerCommand(f.INSERT_TABLE_COMMAND,({columns:b,rows:g,includeHeaders:k})=>{var a=l.$getSelection();if(!l.$isRangeSelection(a))return!0;let c=a.focus;
-a=c.getNode();null!==a&&(b=f.$createTableNodeWithDimensions(Number(g),Number(b),k),l.$isRootOrShadowRoot(a)?(g=a.getChildAtIndex(c.offset),null!==g?g.insertBefore(b):a.append(b),b.insertBefore(l.$createParagraphNode())):a.getTopLevelElementOrThrow().insertAfter(b),b.insertAfter(l.$createParagraphNode()),b.getFirstChildOrThrow().getFirstChildOrThrow().select());return!0},l.COMMAND_PRIORITY_EDITOR)},[e]);n.useEffect(()=>{let b=new Map,g=a=>{const c=a.getKey(),h=e.getElementByKey(c);h&&!b.has(c)&&(a=
-f.applyTableHandlers(a,h,e),b.set(c,a))};e.getEditorState().read(()=>{let a=l.$nodesOfType(f.TableNode);for(let c of a)f.$isTableNode(c)&&g(c)});let k=e.registerMutationListener(f.TableNode,a=>{for(const [c,h]of a)"created"===h?e.getEditorState().read(()=>{const m=l.$getNodeByKey(c);f.$isTableNode(m)&&g(m)}):"destroyed"===h&&(a=b.get(c),void 0!==a&&(a.removeListeners(),b.delete(c)))});return()=>{k();for(let [,a]of b)a.removeListeners()}},[e]);return null}
+'use strict';var c=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/table"),n=require("@lexical/utils"),v=require("lexical"),w=require("react");
+exports.TablePlugin=function({hasCellMerge:q=!0,hasCellBackgroundColor:t=!0}){let [d]=c.useLexicalComposerContext();w.useEffect(()=>{if(!d.hasNodes([h.TableNode,h.TableCellNode,h.TableRowNode]))throw Error("Minified Lexical error #10; visit https://lexical.dev/docs/error?code=10 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");return d.registerCommand(h.INSERT_TABLE_COMMAND,({columns:a,rows:e,includeHeaders:g})=>{a=h.$createTableNodeWithDimensions(Number(e),
+Number(a),g);n.$insertNodeToNearestRoot(a);a=a.getFirstDescendant();v.$isTextNode(a)&&a.select();return!0},v.COMMAND_PRIORITY_EDITOR)},[d]);w.useEffect(()=>{let a=new Map,e=b=>{const f=b.getKey(),l=d.getElementByKey(f);l&&!a.has(f)&&(b=h.applyTableHandlers(b,l,d),a.set(f,b))};d.getEditorState().read(()=>{let b=v.$nodesOfType(h.TableNode);for(let f of b)h.$isTableNode(f)&&e(f)});let g=d.registerMutationListener(h.TableNode,b=>{for(const [f,l]of b)"created"===l?d.getEditorState().read(()=>{const m=
+v.$getNodeByKey(f);h.$isTableNode(m)&&e(m)}):"destroyed"===l&&(b=a.get(f),void 0!==b&&(b.removeListeners(),a.delete(f)))});return()=>{g();for(let [,b]of a)b.removeListeners()}},[d]);w.useEffect(()=>{if(!q)return d.registerNodeTransform(h.TableCellNode,a=>{if(1<a.getColSpan()||1<a.getRowSpan()){var [,,e]=v.DEPRECATED_$getNodeTriplet(a);[a]=v.DEPRECATED_$computeGridMap(e,a,a);let f=a.length,l=a[0].length;e=e.getFirstChild();if(!v.DEPRECATED_$isGridRowNode(e))throw Error("Expected TableNode first child to be a RowNode");
+let m=[];for(let k=0;k<f;k++){if(0!==k&&(e=e.getNextSibling(),!v.DEPRECATED_$isGridRowNode(e)))throw Error("Expected TableNode first child to be a RowNode");let r=null;for(let p=0;p<l;p++){var g=a[k][p],b=g.cell;if(g.startRow===k&&g.startColumn===p)r=b,m.push(b);else if(1<b.getColSpan()||1<b.getRowSpan())if(b=h.$createTableCellNode(b.__headerState),null!==r)r.insertAfter(b);else{g=e;let u=g.getFirstChild();null!==u?u.insertBefore(b):g.append(b)}}}for(let k of m)k.setColSpan(1),k.setRowSpan(1)}})},
+[d,q]);w.useEffect(()=>{if(!t)return d.registerNodeTransform(h.TableCellNode,a=>{null!==a.getBackgroundColor()&&a.setBackgroundColor(null)})},[d,t,q]);return null}

package/LexicalTreeView.d.ts

@@ -7,8 +7,9 @@
  */
 /// <reference types="react" />
 import type { LexicalEditor } from 'lexical';
-export declare function TreeView({ timeTravelButtonClassName, timeTravelPanelSliderClassName, timeTravelPanelButtonClassName, viewClassName, timeTravelPanelClassName, editor, }: {
+export declare function TreeView({ treeTypeButtonClassName, timeTravelButtonClassName, timeTravelPanelSliderClassName, timeTravelPanelButtonClassName, viewClassName, timeTravelPanelClassName, editor, }: {
     editor: LexicalEditor;
+    treeTypeButtonClassName: string;
     timeTravelButtonClassName: string;
     timeTravelPanelButtonClassName: string;
     timeTravelPanelClassName: string;

package/LexicalTreeView.dev.js

@@ -6,6 +6,7 @@
  */
 'use strict';
 
+var html = require('@lexical/html');
 var link = require('@lexical/link');
 var mark = require('@lexical/mark');
 var utils = require('@lexical/utils');
@@ -33,6 +34,7 @@ const SYMBOLS = Object.freeze({
   selectedLine: '>'
 });
 function TreeView({
+  treeTypeButtonClassName,
   timeTravelButtonClassName,
   timeTravelPanelSliderClassName,
   timeTravelPanelButtonClassName,
@@ -43,6 +45,7 @@ function TreeView({
   const [timeStampedEditorStates, setTimeStampedEditorStates] = React.useState([]);
   const [content, setContent] = React.useState('');
   const [timeTravelEnabled, setTimeTravelEnabled] = React.useState(false);
+  const [showExportDOM, setShowExportDOM] = React.useState(false);
   const playingIndexRef = React.useRef(0);
   const treeElementRef = React.useRef(null);
   const inputRef = React.useRef(null);
@@ -52,20 +55,20 @@ function TreeView({
   const lastEditorStateRef = React.useRef(null);
   const commandsLog = useLexicalCommandsLog(editor);
   const generateTree = React.useCallback(editorState => {
-    const treeText = generateContent(editor.getEditorState(), editor._config, commandsLog, editor._compositionKey, editor._editable);
+    const treeText = generateContent(editor, commandsLog, showExportDOM);
     setContent(treeText);
 
     if (!timeTravelEnabled) {
       setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
     }
-  }, [commandsLog, editor, timeTravelEnabled]);
+  }, [commandsLog, editor, timeTravelEnabled, showExportDOM]);
   React.useEffect(() => {
     const editorState = editor.getEditorState();
 
-    if (!showLimited && editorState._nodeMap.size > 1000) {
-      setContent(generateContent(editorState, editor._config, commandsLog, editor._compositionKey, editor._editable));
+    if (!showLimited && editorState._nodeMap.size < 1000) {
+      setContent(generateContent(editor, commandsLog, showExportDOM));
     }
-  }, [commandsLog, editor, showLimited]);
+  }, [commandsLog, editor, showLimited, showExportDOM]);
   React.useEffect(() => {
     return utils.mergeRegister(editor.registerUpdateListener(({
       editorState
@@ -81,10 +84,10 @@ function TreeView({
 
       generateTree(editorState);
     }), editor.registerEditableListener(() => {
-      const treeText = generateContent(editor.getEditorState(), editor._config, commandsLog, editor._compositionKey, editor._editable);
+      const treeText = generateContent(editor, commandsLog, showExportDOM);
       setContent(treeText);
     }));
-  }, [commandsLog, editor, isLimited, generateTree, showLimited]);
+  }, [commandsLog, editor, showExportDOM, isLimited, generateTree, showLimited]);
   const totalEditorStates = timeStampedEditorStates.length;
   React.useEffect(() => {
     if (isPlaying) {
@@ -160,7 +163,11 @@ function TreeView({
       cursor: 'pointer',
       padding: 5
     }
-  }, "Show full tree")) : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/React.createElement("button", {
+  }, "Show full tree")) : null, !showLimited ? /*#__PURE__*/React.createElement("button", {
+    onClick: () => setShowExportDOM(!showExportDOM),
+    className: treeTypeButtonClassName,
+    type: "button"
+  }, showExportDOM ? 'Tree' : 'Export DOM') : null, !timeTravelEnabled && (showLimited || !isLimited) && totalEditorStates > 2 && /*#__PURE__*/React.createElement("button", {
     onClick: () => {
       const rootElement = editor.getRootElement();
 
@@ -275,7 +282,20 @@ function printGridSelection(selection) {
   return `: grid\n  └ { grid: ${selection.gridKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
 }
 
-function generateContent(editorState, editorConfig, commandsLog, compositionKey, editable) {
+function generateContent(editor, commandsLog, exportDOM) {
+  const editorState = editor.getEditorState();
+  const editorConfig = editor._config;
+  const compositionKey = editor._compositionKey;
+  const editable = editor._editable;
+
+  if (exportDOM) {
+    let htmlString = '';
+    editorState.read(() => {
+      htmlString = printPrettyHTML(html.$generateHtmlFromNodes(editor));
+    });
+    return htmlString;
+  }
+
   let res = ' root\n';
   const selectionString = editorState.read(() => {
     const selection = lexical.$getSelection();
@@ -364,7 +384,7 @@ function printAllTextNodeProperties(node) {
 }
 
 function printAllLinkNodeProperties(node) {
-  return [printTargetProperties(node), printRelProperties(node)].filter(Boolean).join(', ');
+  return [printTargetProperties(node), printRelProperties(node), printTitleProperties(node)].filter(Boolean).join(', ');
 }
 
 function printDetailProperties(nodeOrSelection) {
@@ -417,6 +437,16 @@ function printRelProperties(node) {
   return str;
 }
 
+function printTitleProperties(node) {
+  let str = node.getTitle(); // TODO Fix nullish on LinkNode
+
+  if (str != null) {
+    str = 'title: ' + str;
+  }
+
+  return str;
+}
+
 function printSelectedCharsLine({
   indent,
   isSelected,
@@ -454,6 +484,31 @@ function printSelectedCharsLine({
   return [SYMBOLS.selectedLine, indentionChars.join(' '), [...nodePrintSpaces, ...unselectedChars, ...selectedChars].join('')].join(' ') + '\n';
 }
 
+function printPrettyHTML(str) {
+  const div = document.createElement('div');
+  div.innerHTML = str.trim();
+  return prettifyHTML(div, 0).innerHTML;
+}
+
+function prettifyHTML(node, level) {
+  const indentBefore = new Array(level++ + 1).join('  ');
+  const indentAfter = new Array(level - 1).join('  ');
+  let textNode;
+
+  for (let i = 0; i < node.children.length; i++) {
+    textNode = document.createTextNode('\n' + indentBefore);
+    node.insertBefore(textNode, node.children[i]);
+    prettifyHTML(node.children[i], level);
+
+    if (node.lastElementChild === node.children[i]) {
+      textNode = document.createTextNode('\n' + indentAfter);
+      node.appendChild(textNode);
+    }
+  }
+
+  return node;
+}
+
 function $getSelectionStartEnd(node, selection) {
   const anchor = selection.anchor;
   const focus = selection.focus;

package/LexicalTreeView.prod.js

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

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -56,9 +56,7 @@ class TypeaheadOption {
 }
 
 const scrollIntoViewIfNeeded = target => {
-  const container = document.getElementById('typeahead-menu');
-  if (!container) return;
-  const typeaheadContainerNode = container.querySelector('.typeahead-popover');
+  const typeaheadContainerNode = document.getElementById('typeahead-menu');
   if (!typeaheadContainerNode) return;
   const typeaheadRect = typeaheadContainerNode.getBoundingClientRect();
 

package/LexicalTypeaheadMenuPlugin.prod.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var k=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/utils"),x=require("lexical"),y=require("react"),z="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?y.useLayoutEffect:y.useEffect;class A{constructor(c){this.key=c;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(c){this.ref={current:c}}}
-let B=c=>{var a=document.getElementById("typeahead-menu");if(a&&(a=a.querySelector(".typeahead-popover"))){var b=a.getBoundingClientRect();b.top+b.height>window.innerHeight&&a.scrollIntoView({block:"center"});0>b.top&&a.scrollIntoView({block:"center"});c.scrollIntoView({block:"nearest"})}};function C(c,a){var b=window.getSelection();if(null===b||!b.isCollapsed)return!1;let e=b.anchorNode;b=b.anchorOffset;if(null==e||null==b)return!1;try{a.setStart(e,c),a.setEnd(e,b)}catch(g){return!1}return!0}
+let B=c=>{const a=document.getElementById("typeahead-menu");if(a){var b=a.getBoundingClientRect();b.top+b.height>window.innerHeight&&a.scrollIntoView({block:"center"});0>b.top&&a.scrollIntoView({block:"center"});c.scrollIntoView({block:"nearest"})}};function C(c,a){var b=window.getSelection();if(null===b||!b.isCollapsed)return!1;let e=b.anchorNode;b=b.anchorOffset;if(null==e||null==b)return!1;try{a.setStart(e,c),a.setEnd(e,b)}catch(g){return!1}return!0}
 function D(c){let a=null;c.getEditorState().read(()=>{var b=x.$getSelection();if(x.$isRangeSelection(b)){var e=b.anchor;"text"!==e.type?a=null:(b=e.getNode(),b.isSimpleText()?(e=e.offset,a=b.getTextContent().slice(0,e)):a=null)}});return a}
 function E(c,a){c=x.$getSelection();if(!x.$isRangeSelection(c)||!c.isCollapsed())return null;var b=c.anchor;if("text"!==b.type)return null;c=b.getNode();if(!c.isSimpleText())return null;b=b.offset;let e=c.getTextContent().slice(0,b);var g=a.matchingString;a=a.replaceableString.length;for(let p=a;p<=g.length;p++)e.substr(-p)===g.substr(0,p)&&(a=p);a=b-a;if(0>a)return null;let q;0===a?[q]=c.splitText(b):[,q]=c.splitText(a,b);return q}
 function F(c,a){return 0!==a?!1:c.getEditorState().read(()=>{var b=x.$getSelection();return x.$isRangeSelection(b)?(b=b.anchor.getNode().getPreviousSibling(),x.$isTextNode(b)&&b.isTextEntity()):!1})}function G(c){y.startTransition?y.startTransition(c):c()}

package/package.json

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

package/shared/useYjsCollaboration.d.ts

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { Binding, Provider } from '@lexical/yjs';
+import type { Binding, ExcludedProperties, Provider } from '@lexical/yjs';
 import type { LexicalEditor } from 'lexical';
 import * as React from 'react';
 import { Doc } from 'yjs';
 import { InitialEditorStateType } from '../LexicalComposer';
 export declare type CursorsContainerRef = React.MutableRefObject<HTMLElement | null>;
-export declare function useYjsCollaboration(editor: LexicalEditor, id: string, provider: Provider, docMap: Map<string, Doc>, name: string, color: string, shouldBootstrap: boolean, cursorsContainerRef?: CursorsContainerRef, initialEditorState?: InitialEditorStateType): [JSX.Element, Binding];
+export declare function useYjsCollaboration(editor: LexicalEditor, id: string, provider: Provider, docMap: Map<string, Doc>, name: string, color: string, shouldBootstrap: boolean, cursorsContainerRef?: CursorsContainerRef, initialEditorState?: InitialEditorStateType, excludedProperties?: ExcludedProperties): [JSX.Element, Binding];
 export declare function useYjsFocusTracking(editor: LexicalEditor, provider: Provider, name: string, color: string): void;
 export declare function useYjsHistory(editor: LexicalEditor, binding: Binding): () => void;