@lexical/react 0.4.0 → 0.5.0

package/DEPRECATED_useLexical.js.flow

@@ -18,7 +18,6 @@ import type {
 declare export function useLexical<EditorContext>(editorConfig?: {
   namespace?: string,
   onError: (error: Error) => void,
-  initialEditorState?: EditorState,
   theme?: EditorThemeClasses,
   context?: EditorContext,
   nodes?: Array<Class<LexicalNode>>,

package/DEPRECATED_useLexicalPlainText.d.ts

@@ -6,5 +6,5 @@
  *
  */
 import type { HistoryState } from './DEPRECATED_useLexicalHistory';
-import type { EditorState, LexicalEditor } from 'lexical';
-export declare function useLexicalPlainText(editor: LexicalEditor, externalHistoryState?: HistoryState, initialEditorState?: null | string | EditorState | (() => void)): void;
+import type { LexicalEditor } from 'lexical';
+export declare function useLexicalPlainText(editor: LexicalEditor, externalHistoryState?: HistoryState): void;

package/DEPRECATED_useLexicalPlainText.dev.js

@@ -63,9 +63,9 @@ var useLayoutEffect = useLayoutEffectImpl;
  * LICENSE file in the root directory of this source tree.
  *
  */
-function usePlainTextSetup(editor, initialEditorState) {
+function usePlainTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(plainText.registerPlainText(editor, initialEditorState), dragon.registerDragonSupport(editor)); // We only do this for init
+    return utils.mergeRegister(plainText.registerPlainText(editor), dragon.registerDragonSupport(editor)); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 }
@@ -77,8 +77,8 @@ function usePlainTextSetup(editor, initialEditorState) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useLexicalPlainText(editor, externalHistoryState, initialEditorState) {
-  usePlainTextSetup(editor, initialEditorState);
+function useLexicalPlainText(editor, externalHistoryState) {
+  usePlainTextSetup(editor);
   useLexicalHistory(editor, externalHistoryState);
 }
 

package/DEPRECATED_useLexicalPlainText.js.flow

@@ -14,5 +14,4 @@ import type {EditorState, LexicalEditor} from 'lexical';
 declare export function useLexicalPlainText(
   editor: LexicalEditor,
   externalHistoryState?: HistoryState,
-  initialEditorState?: null | string | EditorState | (() => void),
 ): void;

package/DEPRECATED_useLexicalPlainText.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 history=require("@lexical/history"),d=require("react"),f=require("@lexical/dragon"),g=require("@lexical/plain-text"),h=require("@lexical/utils");function k(a,b,c=1E3){let e=d.useMemo(()=>b||history.createEmptyHistoryState(),[b]);d.useEffect(()=>history.registerHistory(a,e,c),[c,a,e])}function l(a,b,c=1E3){return k(a,b,c)}var m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?d.useLayoutEffect:d.useEffect;
-function n(a,b){m(()=>h.mergeRegister(g.registerPlainText(a,b),f.registerDragonSupport(a)),[a])}exports.useLexicalPlainText=function(a,b,c){n(a,c);l(a,b)}
+'use strict';var history=require("@lexical/history"),c=require("react"),f=require("@lexical/dragon"),g=require("@lexical/plain-text"),h=require("@lexical/utils");function k(a,b,d=1E3){let e=c.useMemo(()=>b||history.createEmptyHistoryState(),[b]);c.useEffect(()=>history.registerHistory(a,e,d),[d,a,e])}function l(a,b,d=1E3){return k(a,b,d)}var m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?c.useLayoutEffect:c.useEffect;
+function n(a){m(()=>h.mergeRegister(g.registerPlainText(a),f.registerDragonSupport(a)),[a])}exports.useLexicalPlainText=function(a,b){n(a);l(a,b)}

package/DEPRECATED_useLexicalRichText.d.ts

@@ -6,5 +6,5 @@
  *
  */
 import type { HistoryState } from './DEPRECATED_useLexicalHistory';
-import type { EditorState, LexicalEditor } from 'lexical';
-export declare function useLexicalRichText(editor: LexicalEditor, externalHistoryState?: HistoryState, initialEditorState?: null | string | EditorState | (() => void)): void;
+import type { LexicalEditor } from 'lexical';
+export declare function useLexicalRichText(editor: LexicalEditor, externalHistoryState?: HistoryState): void;

package/DEPRECATED_useLexicalRichText.dev.js

@@ -63,9 +63,9 @@ var useLayoutEffect = useLayoutEffectImpl;
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useRichTextSetup(editor, initialEditorState) {
+function useRichTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(richText.registerRichText(editor, initialEditorState), dragon.registerDragonSupport(editor)); // We only do this for init
+    return utils.mergeRegister(richText.registerRichText(editor), dragon.registerDragonSupport(editor)); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 }
@@ -77,8 +77,8 @@ function useRichTextSetup(editor, initialEditorState) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useLexicalRichText(editor, externalHistoryState, initialEditorState) {
-  useRichTextSetup(editor, initialEditorState);
+function useLexicalRichText(editor, externalHistoryState) {
+  useRichTextSetup(editor);
   useLexicalHistory(editor, externalHistoryState);
 }
 

package/DEPRECATED_useLexicalRichText.js.flow

@@ -14,5 +14,4 @@ import type {EditorState, LexicalEditor} from 'lexical';
 declare export function useLexicalRichText(
   editor: LexicalEditor,
   externalHistoryState?: HistoryState,
-  initialEditorState?: null | string | EditorState | (() => void),
 ): void;

package/DEPRECATED_useLexicalRichText.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 history=require("@lexical/history"),d=require("react"),f=require("@lexical/dragon"),g=require("@lexical/rich-text"),h=require("@lexical/utils");function k(a,b,c=1E3){let e=d.useMemo(()=>b||history.createEmptyHistoryState(),[b]);d.useEffect(()=>history.registerHistory(a,e,c),[c,a,e])}function l(a,b,c=1E3){return k(a,b,c)}var m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?d.useLayoutEffect:d.useEffect;
-function n(a,b){m(()=>h.mergeRegister(g.registerRichText(a,b),f.registerDragonSupport(a)),[a])}exports.useLexicalRichText=function(a,b,c){n(a,c);l(a,b)}
+'use strict';var history=require("@lexical/history"),c=require("react"),f=require("@lexical/dragon"),g=require("@lexical/rich-text"),h=require("@lexical/utils");function k(a,b,d=1E3){let e=c.useMemo(()=>b||history.createEmptyHistoryState(),[b]);c.useEffect(()=>history.registerHistory(a,e,d),[d,a,e])}function l(a,b,d=1E3){return k(a,b,d)}var m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?c.useLayoutEffect:c.useEffect;
+function n(a){m(()=>h.mergeRegister(g.registerRichText(a),f.registerDragonSupport(a)),[a])}exports.useLexicalRichText=function(a,b){n(a);l(a,b)}

package/LexicalAutoEmbedPlugin.d.ts

@@ -29,10 +29,8 @@ export declare type EmbedMenuProps = {
 export declare type EmbedMenuComponent = React.ComponentType<EmbedMenuProps>;
 export declare class AutoEmbedOption extends TypeaheadOption {
     title: string;
-    icon?: JSX.Element;
     onSelect: (targetNode: LexicalNode | null) => void;
     constructor(title: string, options: {
-        icon?: JSX.Element;
         onSelect: (targetNode: LexicalNode | null) => void;
     });
 }

package/LexicalAutoEmbedPlugin.dev.js

@@ -27,7 +27,6 @@ class AutoEmbedOption extends LexicalTypeaheadMenuPlugin.TypeaheadOption {
   constructor(title, options) {
     super(title);
     this.title = title;
-    this.icon = options.icon;
     this.onSelect = options.onSelect.bind(this);
   }
 

package/LexicalAutoEmbedPlugin.prod.js

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

@@ -97,8 +97,9 @@ function handleLinkCreation(node, matchers, onChange) {
         [, middleNode, lastNode] = lastNode.splitText(matchOffset, matchOffset + matchLength);
       }
 
+      const nodeFormat = node.__format;
       const linkNode = link.$createAutoLinkNode(match.url);
-      linkNode.append(lexical.$createTextNode(match.text));
+      linkNode.append(lexical.$createTextNode(match.text).setFormat(nodeFormat));
       middleNode.replace(linkNode);
       onChange(match.url, null);
     }

package/LexicalAutoLinkPlugin.prod.js

@@ -4,9 +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 h=require("@lexical/link"),l=require("@lexical/react/LexicalComposerContext"),p=require("@lexical/utils"),v=require("lexical"),w=require("react");function x(a,c){for(let b=0;b<c.length;b++){let e=c[b](a);if(e)return e}return null}function y(a){a=a.getPreviousSibling();v.$isElementNode(a)&&(a=a.getLastDescendant());return null===a||v.$isLineBreakNode(a)||v.$isTextNode(a)&&a.getTextContent().endsWith(" ")}
+'use strict';var h=require("@lexical/link"),m=require("@lexical/react/LexicalComposerContext"),p=require("@lexical/utils"),v=require("lexical"),w=require("react");function x(a,c){for(let b=0;b<c.length;b++){let e=c[b](a);if(e)return e}return null}function y(a){a=a.getPreviousSibling();v.$isElementNode(a)&&(a=a.getLastDescendant());return null===a||v.$isLineBreakNode(a)||v.$isTextNode(a)&&a.getTextContent().endsWith(" ")}
 function A(a){a=a.getNextSibling();v.$isElementNode(a)&&(a=a.getFirstDescendant());return null===a||v.$isLineBreakNode(a)||v.$isTextNode(a)&&a.getTextContent().startsWith(" ")}
 function B(a,c,b){var e=a.getChildren();let d=e.length;for(let f=0;f<d;f++){let g=e[f];if(!v.$isTextNode(g)||!g.isSimpleText()){C(a);b(null,a.getURL());return}}e=a.getTextContent();c=x(e,c);null===c||c.text!==e?(C(a),b(null,a.getURL())):y(a)&&A(a)?(e=a.getURL(),null!==c&&e!==c.url&&(a.setURL(c.url),b(c.url,e))):(C(a),b(null,a.getURL()))}function C(a){let c=a.getChildren();var b=c.length;for(--b;0<=b;b--)a.insertAfter(c[b]);a.remove();return c.map(e=>e.getLatest())}
 function D(a,c,b){w.useEffect(()=>{if(!a.hasNodes([h.AutoLinkNode]))throw Error("Minified Lexical error #77; visit https://lexical.dev/docs/error?code=77 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let e=(d,f)=>{b&&b(d,f)};return p.mergeRegister(a.registerNodeTransform(v.TextNode,d=>{var f=d.getParentOrThrow();if(h.$isAutoLinkNode(f))B(f,c,e);else if(!h.$isLinkNode(f)){if(d.isSimpleText()){f=d.getTextContent();let E=f.length,u=f,
-z=0,t=d;for(var g;(g=x(u,c))&&null!==g;){var m=g.index,n=z+m;let q=g.length;var r=void 0;r=0<n?" "===f[n-1]:y(d);n=n+q<E?" "===f[n+q]:A(d);if(r&&n){var k=void 0;0===m?[k,t]=t.splitText(q):[,k,t]=t.splitText(m,m+q);r=h.$createAutoLinkNode(g.url);r.append(v.$createTextNode(g.text));k.replace(r);b&&b(g.url,null)}m+=q;u=u.substring(m);z+=m}}k=d.getPreviousSibling();g=d.getNextSibling();d=d.getTextContent();h.$isAutoLinkNode(k)&&!d.startsWith(" ")&&(C(k),k=k.getURL(),b&&b(null,k));h.$isAutoLinkNode(g)&&
-!d.endsWith(" ")&&(C(g),d=g.getURL(),b&&b(null,d))}}),a.registerNodeTransform(h.AutoLinkNode,d=>{B(d,c,e)}))},[a,c,b])}exports.AutoLinkPlugin=function({matchers:a,onChange:c}){let [b]=l.useLexicalComposerContext();D(b,a,c);return null}
+z=0,r=d;for(var g;(g=x(u,c))&&null!==g;){var n=g.index,k=z+n;let q=g.length;var t=void 0;t=0<k?" "===f[k-1]:y(d);k=k+q<E?" "===f[k+q]:A(d);if(t&&k){var l=void 0;0===n?[l,r]=r.splitText(q):[,l,r]=r.splitText(n,n+q);t=d.__format;k=h.$createAutoLinkNode(g.url);k.append(v.$createTextNode(g.text).setFormat(t));l.replace(k);b&&b(g.url,null)}n+=q;u=u.substring(n);z+=n}}l=d.getPreviousSibling();g=d.getNextSibling();d=d.getTextContent();h.$isAutoLinkNode(l)&&!d.startsWith(" ")&&(C(l),l=l.getURL(),b&&b(null,
+l));h.$isAutoLinkNode(g)&&!d.endsWith(" ")&&(C(g),d=g.getURL(),b&&b(null,d))}}),a.registerNodeTransform(h.AutoLinkNode,d=>{B(d,c,e)}))},[a,c,b])}exports.AutoLinkPlugin=function({matchers:a,onChange:c}){let [b]=m.useLexicalComposerContext();D(b,a,c);return null}

package/LexicalBlockWithAlignableContents.dev.js

@@ -35,7 +35,7 @@ function BlockWithAlignableContents({
       editor.update(() => {
         const node = lexical.$getNodeByKey(nodeKey);
 
-        if (lexical.$isDecoratorNode(node) && node.isTopLevel()) {
+        if (lexical.$isDecoratorNode(node)) {
           node.remove();
         }
 

package/LexicalBlockWithAlignableContents.prod.js

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var a=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/react/LexicalDecoratorBlockNode"),m=require("@lexical/react/useLexicalNodeSelection"),n=require("@lexical/utils"),u=require("lexical"),v=require("react");
-exports.BlockWithAlignableContents=function({children:w,format:p,nodeKey:g,className:q}){let [d]=a.useLexicalComposerContext(),[e,k,r]=m.useLexicalNodeSelection(g),t=v.useRef(null),l=v.useCallback(b=>{e&&u.$isNodeSelection(u.$getSelection())&&(b.preventDefault(),d.update(()=>{const c=u.$getNodeByKey(g);u.$isDecoratorNode(c)&&c.isTopLevel()&&c.remove();k(!1)}));return!1},[d,e,g,k]);v.useEffect(()=>n.mergeRegister(d.registerCommand(u.FORMAT_ELEMENT_COMMAND,b=>{if(e){var c=u.$getSelection();if(u.$isNodeSelection(c)){var f=
+exports.BlockWithAlignableContents=function({children:w,format:p,nodeKey:g,className:q}){let [d]=a.useLexicalComposerContext(),[e,k,r]=m.useLexicalNodeSelection(g),t=v.useRef(null),l=v.useCallback(b=>{e&&u.$isNodeSelection(u.$getSelection())&&(b.preventDefault(),d.update(()=>{const c=u.$getNodeByKey(g);u.$isDecoratorNode(c)&&c.remove();k(!1)}));return!1},[d,e,g,k]);v.useEffect(()=>n.mergeRegister(d.registerCommand(u.FORMAT_ELEMENT_COMMAND,b=>{if(e){var c=u.$getSelection();if(u.$isNodeSelection(c)){var f=
 u.$getNodeByKey(g);h.$isDecoratorBlockNode(f)&&f.setFormat(b)}else if(u.$isRangeSelection(c)){c=c.getNodes();for(f of c)h.$isDecoratorBlockNode(f)?f.setFormat(b):n.$getNearestBlockElementAncestorOrThrow(f).setFormat(b)}return!0}return!1},u.COMMAND_PRIORITY_LOW),d.registerCommand(u.CLICK_COMMAND,b=>{b.preventDefault();return b.target===t.current?(b.shiftKey||r(),k(!e),!0):!1},u.COMMAND_PRIORITY_LOW),d.registerCommand(u.KEY_DELETE_COMMAND,l,u.COMMAND_PRIORITY_LOW),d.registerCommand(u.KEY_BACKSPACE_COMMAND,
 l,u.COMMAND_PRIORITY_LOW)),[r,d,e,g,l,k]);return v.createElement("div",{className:[q.base,e?q.focus:null].filter(Boolean).join(" "),ref:t,style:{textAlign:p?p:void 0}},w)}

package/LexicalCollaborationPlugin.d.ts

@@ -7,9 +7,13 @@
  */
 import type { Doc } from 'yjs';
 import { WebsocketProvider } from 'y-websocket';
-export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, }: {
+import { InitialEditorStateType } from './LexicalComposer';
+import { CursorsContainerRef } from './shared/useYjsCollaboration';
+export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorsContainerRef, initialEditorState, }: {
     id: string;
     providerFactory: (id: string, yjsDocMap: Map<string, Doc>) => WebsocketProvider;
     shouldBootstrap: boolean;
     username?: string;
+    cursorsContainerRef?: CursorsContainerRef;
+    initialEditorState?: InitialEditorStateType;
 }): JSX.Element;

package/LexicalCollaborationPlugin.dev.js

@@ -21,7 +21,7 @@ var reactDom = require('react-dom');
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap) {
+function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap, cursorsContainerRef, initialEditorState) {
   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]);
@@ -50,7 +50,7 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
 
     const onSync = isSynced => {
       if (shouldBootstrap && isSynced && root.isEmpty() && root._xmlText._length === 0 && isReloadingDoc.current === false) {
-        initializeEditor(editor);
+        initializeEditor(editor, initialEditorState);
       }
 
       isReloadingDoc.current = false;
@@ -107,7 +107,7 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       docMap.delete(id);
       removeListener();
     };
-  }, [binding, color, connect, disconnect, docMap, editor, id, name, provider, shouldBootstrap]);
+  }, [binding, color, connect, disconnect, docMap, editor, id, initialEditorState, name, provider, shouldBootstrap]);
   const cursorsContainer = React.useMemo(() => {
     const ref = element => {
       binding.cursorsContainer = element;
@@ -115,8 +115,8 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
 
     return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement("div", {
       ref: ref
-    }), document.body);
-  }, [binding]);
+    }), cursorsContainerRef && cursorsContainerRef.current || document.body);
+  }, [binding, cursorsContainerRef]);
   React.useEffect(() => {
     return editor.registerCommand(yjs.TOGGLE_CONNECT_COMMAND, payload => {
       if (connect !== undefined && disconnect !== undefined) {
@@ -174,18 +174,54 @@ function useYjsHistory(editor, binding) {
   return clearHistory;
 }
 
-function initializeEditor(editor) {
+function initializeEditor(editor, initialEditorState) {
   editor.update(() => {
     const root = lexical.$getRoot();
-    const firstChild = root.getFirstChild();
 
-    if (firstChild === null) {
-      const paragraph = lexical.$createParagraphNode();
-      root.append(paragraph);
-      const activeElement = document.activeElement;
-
-      if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
-        paragraph.select();
+    if (root.isEmpty()) {
+      if (initialEditorState) {
+        switch (typeof initialEditorState) {
+          case 'string':
+            {
+              const parsedEditorState = editor.parseEditorState(initialEditorState);
+              editor.setEditorState(parsedEditorState, {
+                tag: 'history-merge'
+              });
+              break;
+            }
+
+          case 'object':
+            {
+              editor.setEditorState(initialEditorState, {
+                tag: 'history-merge'
+              });
+              break;
+            }
+
+          case 'function':
+            {
+              editor.update(() => {
+                const root1 = lexical.$getRoot();
+
+                if (root1.isEmpty()) {
+                  initialEditorState(editor);
+                }
+              }, {
+                tag: 'history-merge'
+              });
+              break;
+            }
+        }
+      } else {
+        const paragraph = lexical.$createParagraphNode();
+        root.append(paragraph);
+        const {
+          activeElement
+        } = document;
+
+        if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
+          paragraph.select();
+        }
       }
     }
   }, {
@@ -247,7 +283,9 @@ function CollaborationPlugin({
   id,
   providerFactory,
   shouldBootstrap,
-  username
+  username,
+  cursorsContainerRef,
+  initialEditorState
 }) {
   const collabContext = LexicalCollaborationContext.useCollaborationContext(username);
   const {
@@ -267,7 +305,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);
+  const [cursors, binding] = useYjsCollaboration(editor, id, provider, yjsDocMap, name, color, shouldBootstrap, cursorsContainerRef, initialEditorState);
   collabContext.clientID = binding.clientID;
   useYjsHistory(editor, binding);
   useYjsFocusTracking(editor, provider, name, color);

package/LexicalCollaborationPlugin.js.flow

@@ -33,6 +33,7 @@ export type ProviderFactory = (
 
 declare export function CollaborationPlugin(arg0: {
   id: string,
+  cursorsContainerRef?: {current: HTMLElement | null},
   providerFactory: ProviderFactory,
   shouldBootstrap: boolean,
   username?: string,

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"),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}
+'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");
+function K(b,c,a,d,p,w,m,q,t){let r=h.useRef(!1),[n,x]=h.useState(d.get(c)),g=h.useMemo(()=>H.createBinding(b,a,c,n,d),[b,a,c,d,n]),u=h.useCallback(()=>{a.connect()},[a]),v=h.useCallback(()=>{try{a.disconnect()}catch(l){}},[a]);h.useEffect(()=>{let {root:l}=g,{awareness:A}=a,B=({status:k})=>{b.dispatchCommand(H.CONNECTED_COMMAND,"connected"===k)},C=k=>{m&&k&&l.isEmpty()&&0===l._xmlText._length&&!1===r.current&&L(b,t);r.current=!1},D=()=>{H.syncCursorPositions(g,a)},E=(k,y)=>{y.origin!==g&&H.syncYjsChangesToLexical(g,
+a,k)};H.initLocalState(a,p,w,document.activeElement===b.getRootElement());let F=k=>{M(b,g);x(k);d.set(c,k);r.current=!0};a.on("reload",F);a.on("status",B);a.on("sync",C);A.on("update",D);l.getSharedType().observeDeep(E);let Q=b.registerUpdateListener(({prevEditorState:k,editorState:y,dirtyLeaves:N,dirtyElements:O,normalizedNodes:P,tags:G})=>{!1===G.has("skip-collab")&&H.syncLexicalUpdateToYjs(g,a,k,y,O,N,P,G)});u();return()=>{!1===r.current&&v();a.off("sync",C);a.off("status",B);a.off("reload",F);
+A.off("update",D);l.getSharedType().unobserveDeep(E);d.delete(c);Q()}},[g,w,u,v,d,b,c,t,p,a,m]);let R=h.useMemo(()=>J.createPortal(h.createElement("div",{ref:l=>{g.cursorsContainer=l}}),q&&q.current||document.body),[g,q]);h.useEffect(()=>b.registerCommand(H.TOGGLE_CONNECT_COMMAND,l=>{void 0!==u&&void 0!==v&&(l?(console.log("Collaboration connected!"),u()):(console.log("Collaboration disconnected!"),v()));return!0},I.COMMAND_PRIORITY_EDITOR),[u,v,b]);return[R,g]}
+function S(b,c,a,d){h.useEffect(()=>z.mergeRegister(b.registerCommand(I.FOCUS_COMMAND,()=>{H.setLocalStateFocus(c,a,d,!0);return!0},I.COMMAND_PRIORITY_EDITOR),b.registerCommand(I.BLUR_COMMAND,()=>{H.setLocalStateFocus(c,a,d,!1);return!0},I.COMMAND_PRIORITY_EDITOR)),[d,b,a,c])}
+function T(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 L(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 M(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,cursorsContainerRef:p,initialEditorState:w}){let m=e.useCollaborationContext(d),{yjsDocMap:q,name:t,color:r}=m,[n]=f.useLexicalComposerContext();h.useEffect(()=>{m.isCollabActive=!0;return()=>{null==n._parentEditor&&(m.isCollabActive=!1)}},[m,n]);d=h.useMemo(()=>c(b,q),[b,c,q]);let [x,g]=K(n,b,d,q,t,r,a,p,w);m.clientID=g.clientID;T(n,g);S(n,d,t,r);return x}

package/LexicalComposer.d.ts

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { Klass } from 'lexical';
-import { EditorState, EditorThemeClasses, LexicalEditor, LexicalNode } from 'lexical';
+import { EditorState, EditorThemeClasses, Klass, LexicalEditor, LexicalNode } from 'lexical';
 export declare type InitialEditorStateType = null | string | EditorState | ((editor: LexicalEditor) => void);
 declare type Props = {
     children: JSX.Element | string | (JSX.Element | string)[];

package/LexicalComposer.dev.js

@@ -74,7 +74,7 @@ function LexicalComposer({
   useLayoutEffect(() => {
     const isEditable = initialConfig.editable;
     const [editor] = composerContext;
-    editor.setEditable(isEditable || true); // We only do this for init
+    editor.setEditable(isEditable !== undefined ? isEditable : true); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(LexicalComposerContext.LexicalComposerContext.Provider, {
@@ -85,7 +85,21 @@ function LexicalComposer({
 function initializeEditor(editor, initialEditorState) {
   if (initialEditorState === null) {
     return;
-  } else if (initialEditorState === undefined) ; else if (initialEditorState !== null) {
+  } else if (initialEditorState === undefined) {
+    editor.update(() => {
+      const root = lexical.$getRoot();
+
+      if (root.isEmpty()) {
+        const paragraph = lexical.$createParagraphNode();
+        root.append(paragraph);
+        const activeElement = document.activeElement;
+
+        if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
+          paragraph.select();
+        }
+      }
+    }, HISTORY_MERGE_OPTIONS);
+  } else if (initialEditorState !== null) {
     switch (typeof initialEditorState) {
       case 'string':
         {

package/LexicalComposer.js.flow

@@ -7,20 +7,27 @@
  * @flow strict
  */
 
-import type {EditorThemeClasses, LexicalEditor, LexicalNode} from 'lexical';
-import type {InitialEditorStateType as InitialEditorStatePlainTextType} from '@lexical/plain-text';
-import type {InitialEditorStateType as InitialEditorStateRichTextType} from '@lexical/rich-text';
+import type {
+  EditorThemeClasses,
+  LexicalEditor,
+  LexicalNode,
+  EditorState,
+} from 'lexical';
+
+export type InitialEditorStateType =
+  | null
+  | string
+  | EditorState
+  | ((editor: LexicalEditor) => void);
 
 type Props = {
   initialConfig: $ReadOnly<{
     editor__DEPRECATED?: LexicalEditor | null,
-    readOnly?: boolean,
+    editable?: boolean,
     namespace: string,
     nodes?: $ReadOnlyArray<Class<LexicalNode>>,
     theme?: EditorThemeClasses,
-    editorState?:
-      | InitialEditorStateRichTextType
-      | InitialEditorStatePlainTextType,
+    editorState?: InitialEditorStateType,
     onError: (error: Error, editor: LexicalEditor) => void,
   }>,
   children: React$Node,

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

package/LexicalContentEditable.dev.js

@@ -58,7 +58,7 @@ function ContentEditable({
   testid
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isEditable, setEditable] = React.useState(true);
+  const [isEditable, setEditable] = React.useState(false);
   const ref = React.useCallback(rootElement => {
     editor.setRootElement(rootElement);
   }, [editor]);

package/LexicalContentEditable.prod.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var b=require("@lexical/react/LexicalComposerContext"),k=require("react"),l="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?k.useLayoutEffect:k.useEffect;
-exports.ContentEditable=function({ariaActiveDescendantID:m,ariaAutoComplete:n,ariaControls:p,ariaDescribedBy:q,ariaExpanded:r,ariaLabel:t,ariaLabelledBy:u,ariaMultiline:v,ariaOwneeID:w,ariaRequired:x,autoCapitalize:e,autoComplete:y,autoCorrect:f,className:z,id:A,role:g="textbox",spellCheck:B=!0,style:C,tabIndex:D,testid:E}){let [c]=b.useLexicalComposerContext(),[a,h]=k.useState(!0),F=k.useCallback(d=>{c.setRootElement(d)},[c]);l(()=>{h(c.isEditable());return c.registerEditableListener(d=>{h(d)})},
+exports.ContentEditable=function({ariaActiveDescendantID:m,ariaAutoComplete:n,ariaControls:p,ariaDescribedBy:q,ariaExpanded:r,ariaLabel:t,ariaLabelledBy:u,ariaMultiline:v,ariaOwneeID:w,ariaRequired:x,autoCapitalize:e,autoComplete:y,autoCorrect:f,className:z,id:A,role:g="textbox",spellCheck:B=!0,style:C,tabIndex:D,testid:E}){let [c]=b.useLexicalComposerContext(),[a,h]=k.useState(!1),F=k.useCallback(d=>{c.setRootElement(d)},[c]);l(()=>{h(c.isEditable());return c.registerEditableListener(d=>{h(d)})},
 [c]);return k.createElement("div",{"aria-activedescendant":a?m:null,"aria-autocomplete":a?n:null,"aria-controls":a?p:null,"aria-describedby":q,"aria-expanded":a?"combobox"===g?!!r:null:null,"aria-label":t,"aria-labelledby":u,"aria-multiline":v,"aria-owns":a?w:null,"aria-required":x,autoCapitalize:void 0!==e?String(e):void 0,autoComplete:y,autoCorrect:void 0!==f?String(f):void 0,className:z,contentEditable:a,"data-testid":E,id:A,ref:F,role:a?g:void 0,spellCheck:B,style:C,tabIndex:D})}

package/LexicalHorizontalRuleNode.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { LexicalCommand, LexicalNode, SerializedLexicalNode } from 'lexical';
+import type { DOMConversionMap, DOMExportOutput, LexicalCommand, LexicalNode, SerializedLexicalNode } from 'lexical';
 import { DecoratorNode } from 'lexical';
 export declare type SerializedHorizontalRuleNode = SerializedLexicalNode & {
     type: 'horizontalrule';
@@ -16,10 +16,12 @@ export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element> {
     static getType(): string;
     static clone(node: HorizontalRuleNode): HorizontalRuleNode;
     static importJSON(serializedNode: SerializedHorizontalRuleNode): HorizontalRuleNode;
+    static importDOM(): DOMConversionMap | null;
     exportJSON(): SerializedLexicalNode;
+    exportDOM(): DOMExportOutput;
     createDOM(): HTMLElement;
     getTextContent(): '\n';
-    isTopLevel(): true;
+    isInline(): false;
     updateDOM(): false;
     decorate(): JSX.Element;
 }

package/LexicalHorizontalRuleNode.dev.js

@@ -77,6 +77,15 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
     return $createHorizontalRuleNode();
   }
 
+  static importDOM() {
+    return {
+      hr: () => ({
+        conversion: convertHorizontalRuleElement,
+        priority: 0
+      })
+    };
+  }
+
   exportJSON() {
     return {
       type: 'horizontalrule',
@@ -84,6 +93,12 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
     };
   }
 
+  exportDOM() {
+    return {
+      element: document.createElement('hr')
+    };
+  }
+
   createDOM() {
     const div = document.createElement('div');
     div.style.display = 'contents';
@@ -94,8 +109,8 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
     return '\n';
   }
 
-  isTopLevel() {
-    return true;
+  isInline() {
+    return false;
   }
 
   updateDOM() {
@@ -109,6 +124,13 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
   }
 
 }
+
+function convertHorizontalRuleElement() {
+  return {
+    node: $createHorizontalRuleNode()
+  };
+}
+
 function $createHorizontalRuleNode() {
   return new HorizontalRuleNode();
 }

package/LexicalHorizontalRuleNode.js.flow

@@ -16,7 +16,6 @@ declare export class HorizontalRuleNode extends DecoratorNode<React$Node> {
   static clone(node: HorizontalRuleNode): HorizontalRuleNode;
   createDOM(): HTMLElement;
   getTextContent(): '\n';
-  isTopLevel(): true;
   updateDOM(): false;
   decorate(): React$Node;
 }

package/LexicalHorizontalRuleNode.prod.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var a=require("@lexical/react/LexicalComposerContext"),d=require("@lexical/react/useLexicalNodeSelection"),h=require("@lexical/utils"),n=require("lexical"),p=require("react");let q=n.createCommand();
-function r({nodeKey:b}){let [f]=a.useLexicalComposerContext(),l=p.useRef(null),[e,g,m]=d.useLexicalNodeSelection(b),k=p.useCallback(c=>{e&&n.$isNodeSelection(n.$getSelection())&&(c.preventDefault(),c=n.$getNodeByKey(b),t(c)&&c.remove(),g(!1));return!1},[e,b,g]);p.useEffect(()=>h.mergeRegister(f.registerCommand(n.CLICK_COMMAND,c=>c.target===l.current?(c.shiftKey||m(),g(!e),!0):!1,n.COMMAND_PRIORITY_LOW),f.registerCommand(n.KEY_DELETE_COMMAND,k,n.COMMAND_PRIORITY_LOW),f.registerCommand(n.KEY_BACKSPACE_COMMAND,
-k,n.COMMAND_PRIORITY_LOW)),[m,f,e,k,g]);return p.createElement("hr",{ref:l,className:e?"selected":void 0})}
-class u extends n.DecoratorNode{static getType(){return"horizontalrule"}static clone(b){return new u(b.__key)}static importJSON(){return v()}exportJSON(){return{type:"horizontalrule",version:1}}createDOM(){let b=document.createElement("div");b.style.display="contents";return b}getTextContent(){return"\n"}isTopLevel(){return!0}updateDOM(){return!1}decorate(){return p.createElement(r,{nodeKey:this.__key})}}function v(){return new u}function t(b){return b instanceof u}
-exports.$createHorizontalRuleNode=v;exports.$isHorizontalRuleNode=t;exports.HorizontalRuleNode=u;exports.INSERT_HORIZONTAL_RULE_COMMAND=q
+'use strict';var a=require("@lexical/react/LexicalComposerContext"),d=require("@lexical/react/useLexicalNodeSelection"),h=require("@lexical/utils"),l=require("lexical"),p=require("react");let q=l.createCommand();
+function r({nodeKey:b}){let [f]=a.useLexicalComposerContext(),m=p.useRef(null),[e,g,n]=d.useLexicalNodeSelection(b),k=p.useCallback(c=>{e&&l.$isNodeSelection(l.$getSelection())&&(c.preventDefault(),c=l.$getNodeByKey(b),t(c)&&c.remove(),g(!1));return!1},[e,b,g]);p.useEffect(()=>h.mergeRegister(f.registerCommand(l.CLICK_COMMAND,c=>c.target===m.current?(c.shiftKey||n(),g(!e),!0):!1,l.COMMAND_PRIORITY_LOW),f.registerCommand(l.KEY_DELETE_COMMAND,k,l.COMMAND_PRIORITY_LOW),f.registerCommand(l.KEY_BACKSPACE_COMMAND,
+k,l.COMMAND_PRIORITY_LOW)),[n,f,e,k,g]);return p.createElement("hr",{ref:m,className:e?"selected":void 0})}
+class u extends l.DecoratorNode{static getType(){return"horizontalrule"}static clone(b){return new u(b.__key)}static importJSON(){return v()}static importDOM(){return{hr:()=>({conversion:w,priority:0})}}exportJSON(){return{type:"horizontalrule",version:1}}exportDOM(){return{element:document.createElement("hr")}}createDOM(){let b=document.createElement("div");b.style.display="contents";return b}getTextContent(){return"\n"}isInline(){return!1}updateDOM(){return!1}decorate(){return p.createElement(r,{nodeKey:this.__key})}}
+function w(){return{node:v()}}function v(){return new u}function t(b){return b instanceof u}exports.$createHorizontalRuleNode=v;exports.$isHorizontalRuleNode=t;exports.HorizontalRuleNode=u;exports.INSERT_HORIZONTAL_RULE_COMMAND=q