@mdxeditor/editor 4.0.4 → 4.1.1

package/dist/MDXEditor.js

@@ -2,22 +2,18 @@ import { usePublisher, useCellValue, useCellValues, useRealm } from "@mdxeditor/
 import React__default from "react";
 import { corePlugin, editorRootElementRef$, editorWrapperElementRef$, rootEditor$, useTranslation, contentEditableRef$, contentEditableWrapperElement$, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, bottomAreaChildren$, viewMode$, activeEditor$, exportVisitors$, toMarkdownExtensions$, toMarkdownOptions$, jsxComponentDescriptors$, jsxIsAvailable$, insertMarkdown$, setMarkdown$, markdownSourceEditorValue$, markdown$ } from "./plugins/core/index.js";
 import { RealmWithPlugins } from "./RealmWithPlugins.js";
-import { createLexicalComposerContext, LexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { LexicalExtensionEditorComposer } from "@lexical/react/LexicalExtensionEditorComposer";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import classNames from "classnames";
 import { defaultSvgIcons } from "./defaultSvgIcons.js";
-import { lexicalTheme } from "./styles/lexicalTheme.js";
 import styles from "./styles/ui.module.css.js";
 import { noop } from "./utils/fp.js";
 import { getSelectionAsMarkdown } from "./utils/lexicalHelpers.js";
 const LexicalProvider = ({ children }) => {
   const rootEditor = useCellValue(rootEditor$);
-  const composerContextValue = React__default.useMemo(() => {
-    return [rootEditor, createLexicalComposerContext(null, lexicalTheme)];
-  }, [rootEditor]);
-  return /* @__PURE__ */ React__default.createElement(LexicalComposerContext.Provider, { value: composerContextValue }, children);
+  return /* @__PURE__ */ React__default.createElement(LexicalExtensionEditorComposer, { initialEditor: rootEditor }, children);
 };
 const RichTextEditor = () => {
   const t = useTranslation();
@@ -96,56 +92,145 @@ const EditorRootElement = ({ children, className, overlayContainer }) => {
   }, [className, editorRootElementRef, overlayContainer, setEditorRootElementRef, setEditorWrapperElementRef]);
   return /* @__PURE__ */ React__default.createElement("div", { className: classNames("mdxeditor", styles.editorRoot, styles.editorWrapper, className), ref: wrapperElementRef }, children);
 };
-const Methods = ({ mdxRef }) => {
-  const realm = useRealm();
-  React__default.useImperativeHandle(
-    mdxRef,
-    () => {
-      return {
-        getMarkdown: () => {
-          const viewMode = realm.getValue(viewMode$);
-          if (viewMode === "source" || viewMode === "diff") {
-            return realm.getValue(markdownSourceEditorValue$);
-          }
-          return realm.getValue(markdown$);
-        },
-        setMarkdown: (markdown) => {
-          realm.pub(setMarkdown$, markdown);
-        },
-        insertMarkdown: (markdown) => {
-          realm.pub(insertMarkdown$, markdown);
-        },
-        focus: (callbackFn, opts) => {
-          var _a;
-          (_a = realm.getValue(rootEditor$)) == null ? void 0 : _a.focus(callbackFn, opts);
-        },
-        getContentEditableHTML: () => {
-          var _a;
-          return ((_a = realm.getValue(contentEditableRef$)) == null ? void 0 : _a.current.innerHTML) ?? "";
-        },
-        getSelectionMarkdown: () => {
-          const viewMode = realm.getValue(viewMode$);
-          if (viewMode === "source" || viewMode === "diff") {
-            return "";
-          }
-          const activeEditor = realm.getValue(activeEditor$);
-          if (!activeEditor) {
-            return "";
-          }
-          realm.getValue(exportVisitors$);
-          realm.getValue(toMarkdownExtensions$);
-          realm.getValue(toMarkdownOptions$);
-          realm.getValue(jsxComponentDescriptors$);
-          realm.getValue(jsxIsAvailable$);
-          return getSelectionAsMarkdown(activeEditor);
-        }
-      };
+function createMethods(realm) {
+  return {
+    getMarkdown: () => {
+      const viewMode = realm.getValue(viewMode$);
+      if (viewMode === "source" || viewMode === "diff") {
+        return realm.getValue(markdownSourceEditorValue$);
+      }
+      return realm.getValue(markdown$);
     },
-    [realm]
-  );
+    setMarkdown: (markdown) => {
+      realm.pub(setMarkdown$, markdown);
+    },
+    insertMarkdown: (markdown) => {
+      realm.pub(insertMarkdown$, markdown);
+    },
+    focus: (callbackFn, opts) => {
+      var _a;
+      (_a = realm.getValue(rootEditor$)) == null ? void 0 : _a.focus(callbackFn, opts);
+    },
+    getContentEditableHTML: () => {
+      var _a;
+      return ((_a = realm.getValue(contentEditableRef$)) == null ? void 0 : _a.current.innerHTML) ?? "";
+    },
+    getSelectionMarkdown: () => {
+      const viewMode = realm.getValue(viewMode$);
+      if (viewMode === "source" || viewMode === "diff") {
+        return "";
+      }
+      const activeEditor = realm.getValue(activeEditor$);
+      if (!activeEditor) {
+        return "";
+      }
+      const visitors = realm.getValue(exportVisitors$);
+      const toMarkdownExtensions = realm.getValue(toMarkdownExtensions$);
+      const toMarkdownOptions = realm.getValue(toMarkdownOptions$);
+      const jsxComponentDescriptors = realm.getValue(jsxComponentDescriptors$);
+      const jsxIsAvailable = realm.getValue(jsxIsAvailable$);
+      return getSelectionAsMarkdown(activeEditor, {
+        visitors,
+        toMarkdownExtensions,
+        toMarkdownOptions,
+        jsxComponentDescriptors,
+        jsxIsAvailable
+      });
+    }
+  };
+}
+const Methods = ({ onReady, onDispose }) => {
+  const realm = useRealm();
+  const methods = React__default.useMemo(() => createMethods(realm), [realm]);
+  React__default.useLayoutEffect(() => {
+    onReady(methods);
+    return () => {
+      onDispose(methods);
+    };
+  }, [methods, onDispose, onReady]);
   return null;
 };
 const MDXEditor = React__default.forwardRef((props, ref) => {
+  const realmMethods = React__default.useRef(null);
+  const replayingRealmMethods = React__default.useRef(null);
+  const pendingMethodCalls = React__default.useRef([]);
+  const preReadyMarkdown = React__default.useRef(props.trim === false ? props.markdown : props.markdown.trim());
+  const callWhenReady = React__default.useCallback((call) => {
+    const methods = realmMethods.current;
+    if (methods && replayingRealmMethods.current === null) {
+      call(methods);
+    } else {
+      pendingMethodCalls.current.push(call);
+    }
+  }, []);
+  const publicMethods = React__default.useMemo(
+    () => ({
+      getMarkdown: () => {
+        var _a;
+        return ((_a = realmMethods.current) == null ? void 0 : _a.getMarkdown()) ?? preReadyMarkdown.current;
+      },
+      setMarkdown: (markdown) => {
+        preReadyMarkdown.current = markdown;
+        callWhenReady((methods) => {
+          methods.setMarkdown(markdown);
+        });
+      },
+      insertMarkdown: (markdown) => {
+        callWhenReady((methods) => {
+          methods.insertMarkdown(markdown);
+        });
+      },
+      focus: (callbackFn, opts) => {
+        callWhenReady((methods) => {
+          methods.focus(callbackFn, opts);
+        });
+      },
+      getContentEditableHTML: () => {
+        var _a;
+        return ((_a = realmMethods.current) == null ? void 0 : _a.getContentEditableHTML()) ?? "";
+      },
+      getSelectionMarkdown: () => {
+        var _a;
+        return ((_a = realmMethods.current) == null ? void 0 : _a.getSelectionMarkdown()) ?? "";
+      }
+    }),
+    [callWhenReady]
+  );
+  const attachRealmMethods = React__default.useCallback((methods) => {
+    realmMethods.current = methods;
+    if (replayingRealmMethods.current === methods) {
+      return;
+    }
+    if (pendingMethodCalls.current.length === 0) {
+      preReadyMarkdown.current = methods.getMarkdown();
+      return;
+    }
+    replayingRealmMethods.current = methods;
+    const replayNext = () => {
+      if (realmMethods.current !== methods) {
+        if (replayingRealmMethods.current === methods) {
+          replayingRealmMethods.current = null;
+        }
+        return;
+      }
+      const call = pendingMethodCalls.current.shift();
+      if (!call) {
+        replayingRealmMethods.current = null;
+        preReadyMarkdown.current = methods.getMarkdown();
+        return;
+      }
+      call(methods);
+      queueMicrotask(replayNext);
+    };
+    replayNext();
+  }, []);
+  const detachRealmMethods = React__default.useCallback((methods) => {
+    if (realmMethods.current === methods) {
+      preReadyMarkdown.current = methods.getMarkdown();
+      realmMethods.current = null;
+    }
+  }, []);
+  React__default.useImperativeHandle(ref, () => publicMethods, [publicMethods]);
   return /* @__PURE__ */ React__default.createElement(
     RealmWithPlugins,
     {
@@ -175,7 +260,7 @@ const MDXEditor = React__default.forwardRef((props, ref) => {
       ]
     },
     /* @__PURE__ */ React__default.createElement(EditorRootElement, { className: props.className, overlayContainer: props.overlayContainer }, /* @__PURE__ */ React__default.createElement(LexicalProvider, null, /* @__PURE__ */ React__default.createElement(RichTextEditor, null))),
-    /* @__PURE__ */ React__default.createElement(Methods, { mdxRef: ref })
+    /* @__PURE__ */ React__default.createElement(Methods, { onReady: attachRealmMethods, onDispose: detachRealmMethods })
   );
 });
 export {

package/dist/RealmWithPlugins.js

@@ -1,6 +1,6 @@
 import React__default from "react";
 import { Realm, RealmContext } from "@mdxeditor/gurx";
-import { tap } from "./utils/fp.js";
+import { disposeRealmSession } from "./realmSession.js";
 function realmPlugin(plugin) {
   return function(params) {
     return {
@@ -20,23 +20,41 @@ function realmPlugin(plugin) {
   };
 }
 function RealmWithPlugins({ children, plugins }) {
-  const theRealm = React__default.useMemo(() => {
-    return tap(new Realm(), (r) => {
-      var _a, _b;
+  const [theRealm, setTheRealm] = React__default.useState(null);
+  React__default.useEffect(() => {
+    var _a, _b;
+    const realm = new Realm();
+    try {
       for (const plugin of plugins) {
-        (_a = plugin.init) == null ? void 0 : _a.call(plugin, r);
+        (_a = plugin.init) == null ? void 0 : _a.call(plugin, realm);
       }
       for (const plugin of plugins) {
-        (_b = plugin.postInit) == null ? void 0 : _b.call(plugin, r);
+        (_b = plugin.postInit) == null ? void 0 : _b.call(plugin, realm);
+      }
+    } catch (error) {
+      try {
+        disposeRealmSession(realm);
+      } catch (cleanupError) {
+        throw new AggregateError([error, cleanupError], "Realm plugin initialization and cleanup both failed");
       }
-    });
+      throw error;
+    }
+    setTheRealm(realm);
+    return () => {
+      disposeRealmSession(realm);
+    };
   }, []);
   React__default.useEffect(() => {
     var _a;
-    for (const plugin of plugins) {
-      (_a = plugin.update) == null ? void 0 : _a.call(plugin, theRealm);
+    if (theRealm) {
+      for (const plugin of plugins) {
+        (_a = plugin.update) == null ? void 0 : _a.call(plugin, theRealm);
+      }
     }
   });
+  if (!theRealm) {
+    return null;
+  }
   return /* @__PURE__ */ React__default.createElement(RealmContext.Provider, { value: theRealm }, children);
 }
 export {

package/dist/exportMarkdownFromLexical.js

@@ -15,7 +15,7 @@ function exportLexicalTreeToMdast({
   let unistRoot = null;
   const referredComponents = /* @__PURE__ */ new Set();
   const knownImportSources = /* @__PURE__ */ new Map();
-  visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  visitors = [...visitors].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
   visit(root, null);
   function registerReferredComponent(componentName, importStatement) {
     referredComponents.add(componentName);

package/dist/index.d.ts

@@ -571,7 +571,7 @@ export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
     static getType(): string;
     static clone(node: CodeBlockNode): CodeBlockNode;
     afterCloneFrom(prevNode: this): void;
-    static importJSON(serializedNode: SerializedCodeBlockNode): CodeBlockNode;
+    static importJSON(serializedNode: SerializedLexicalNode & Record<string, unknown>): CodeBlockNode;
     static importDOM(): DOMConversionMap;
     constructor(code: string, language: string, meta: string, key?: NodeKey);
     exportJSON(): SerializedCodeBlockNode;
@@ -1394,11 +1394,10 @@ export declare function getSelectedNode(selection: RangeSelection): TextNode | E
 /**
  * Gets the markdown representation of the current selection in the Lexical editor.
  * Returns an empty string if there is no selection or if the selection is collapsed.
- * Converts selected nodes to markdown by recursively processing them and preserving formatting.
- * Note: Selects entire nodes, not partial selections within nodes.
+ * Uses the same visitors and serialization options as the editor's full markdown export.
  * @group Utils
  */
-export declare function getSelectionAsMarkdown(editor: LexicalEditor, _exportParams: Omit<ExportMarkdownFromLexicalOptions, 'root'>): string;
+export declare function getSelectionAsMarkdown(editor: LexicalEditor, exportParams: Omit<ExportMarkdownFromLexicalOptions, 'root'>): string;
 
 /**
  * Gets the coordinates of the selection in the Lexical editor.
@@ -2311,7 +2310,8 @@ export declare interface MDXEditorMethods {
      */
     getContentEditableHTML: () => string;
     /**
-     * Gets the markdown representation of the current selection.
+     * Gets the markdown representation of the active root or nested editor selection
+     * using the editor's configured visitors and serialization options.
      * Returns an empty string if there is no selection, if selection is collapsed, or if editor is in source/diff mode.
      */
     getSelectionMarkdown: () => string;
@@ -2458,7 +2458,7 @@ export declare const muteChange$: NodeRef<boolean>;
 export declare const NESTED_EDITOR_UPDATED_COMMAND: LexicalCommand<undefined>;
 
 /**
- * React Components registered to be rendered inside `LexicalNestedComposer`. Useful if you're using lexical editor plugins that are wrapped as react components.
+ * React components registered inside each nested editor's standard Lexical composer context. Useful for Lexical plugins wrapped as React components.
  * @group Core
  */
 export declare const nestedEditorChildren$: NodeRef<default_2.ComponentType<{}>[]>;
@@ -2536,7 +2536,7 @@ export declare const NestedLexicalEditor: <T extends Mdast.RootContent>(props: {
      * Whether or not the editor edits blocks (multiple paragraphs)
      */
     block?: boolean;
-}) => JSX_2.Element;
+}) => JSX_2.Element | null;
 
 /**
  * The state of the image dialog when it is in new mode.
@@ -2620,6 +2620,8 @@ export declare interface PreviewLinkDialog {
     type: 'preview';
     title: string;
     url: string;
+    /** The fail-closed URL used only for automatic preview navigation. */
+    href?: string;
     linkNodeKey: string;
     rectangle: RectData;
 }
@@ -3110,7 +3112,7 @@ export declare function useEditorSearch(): {
     cursor: number;
     setSearch: (term: string | null) => void;
     search: string;
-    currentRange: Range;
+    currentRange: Range | null;
     isSearchOpen: boolean;
     setIsSearchOpen: (value: boolean) => void;
     openSearch: () => void;
@@ -3121,8 +3123,8 @@ export declare function useEditorSearch(): {
         ignoreIfInView?: boolean;
         behavior?: ScrollBehavior;
     }) => void;
-    replace: (str: string, onUpdate?: () => void) => void;
-    replaceAll: (str: string, onUpdate?: () => void) => void;
+    replace: (replacement: string, onUpdate?: () => void) => void;
+    replaceAll: (replacement: string, onUpdate?: () => void) => void;
 };
 
 /**

package/dist/index.js

@@ -1,4 +1,4 @@
-import "./styles/globals.css.js";
+/* empty css                   */
 export * from "@mdxeditor/gurx";
 import { MDXEditor } from "./MDXEditor.js";
 import { defaultSvgIcons } from "./defaultSvgIcons.js";
@@ -62,13 +62,13 @@ import { RealmWithPlugins, realmPlugin } from "./RealmWithPlugins.js";
 import { DEFAULT_FORMAT, IS_BOLD, IS_CODE, IS_HIGHLIGHT, IS_ITALIC, IS_STRIKETHROUGH, IS_SUBSCRIPT, IS_SUPERSCRIPT, IS_UNDERLINE } from "./FormatConstants.js";
 import { lexicalTheme } from "./styles/lexicalTheme.js";
 import * as lexical from "lexical";
-import { htmlTags, isMdastHTMLNode } from "./plugins/core/MdastHTMLNode.js";
-import { $createGenericHTMLNode, $isGenericHTMLNode, GenericHTMLNode, TYPE_NAME } from "./plugins/core/GenericHTMLNode.js";
-import { $convertTableElement, $createTableNode, $isTableNode, TableNode } from "./plugins/table/TableNode.js";
-import { $createImageNode, $isImageNode, ImageNode } from "./plugins/image/ImageNode.js";
-import { $createFrontmatterNode, $isFrontmatterNode, FrontmatterNode } from "./plugins/frontmatter/FrontmatterNode.js";
 import { $convertPreElement, $createCodeBlockNode, $isCodeBlockNode, CodeBlockNode, useCodeBlockEditorContext } from "./plugins/codeblock/CodeBlockNode.js";
+import { $convertTableElement, $createTableNode, $isTableNode, TableNode } from "./plugins/table/TableNode.js";
 import { $createDirectiveNode, $isDirectiveNode, DirectiveNode } from "./plugins/directives/DirectiveNode.js";
+import { $createFrontmatterNode, $isFrontmatterNode, FrontmatterNode } from "./plugins/frontmatter/FrontmatterNode.js";
+import { $createGenericHTMLNode, $isGenericHTMLNode, GenericHTMLNode, TYPE_NAME } from "./plugins/core/GenericHTMLNode.js";
+import { $createImageNode, $isImageNode, ImageNode } from "./plugins/image/ImageNode.js";
+import { htmlTags, isMdastHTMLNode } from "./plugins/core/MdastHTMLNode.js";
 export {
   $convertPreElement,
   $convertTableElement,

package/dist/mdastUtilHtmlComment.js

@@ -1,6 +1,7 @@
 import { factorySpace } from "micromark-factory-space";
 import { markdownLineEnding } from "micromark-util-character";
-import { codes, types } from "micromark-util-symbol";
+const codes = { dash: 45, eof: null, exclamationMark: 33, greaterThan: 62 };
+const types = { data: "data", lineEnding: "lineEnding", linePrefix: "linePrefix" };
 function commentFromMarkdown(_options) {
   return {
     canContainEols: ["comment"],

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { useCellValue } from "@mdxeditor/gurx";
 import { DecoratorNode } from "lexical";
 import React__default from "react";
@@ -54,7 +51,9 @@ class CodeBlockNode extends DecoratorNode {
     this.__focusEmitter = voidEmitter();
   }
   static importJSON(serializedNode) {
-    const { code, meta, language } = serializedNode;
+    const code = typeof serializedNode.code === "string" ? serializedNode.code : "";
+    const language = typeof serializedNode.language === "string" ? serializedNode.language : "";
+    const meta = typeof serializedNode.meta === "string" ? serializedNode.meta : "";
     return $createCodeBlockNode({
       code,
       language,

package/dist/plugins/codeblock/index.js

@@ -1,6 +1,6 @@
 import { CodeBlockVisitor } from "./CodeBlockVisitor.js";
 import { MdastCodeVisitor } from "./MdastCodeVisitor.js";
-import { Appender, defaultCodeBlockLanguage$, insertDecoratorNode$, codeBlockEditorDescriptors$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
+import { Appender, codeBlockEditorDescriptors$, defaultCodeBlockLanguage$, insertDecoratorNode$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
 import { $createCodeBlockNode, CodeBlockNode } from "./CodeBlockNode.js";
 import { $convertPreElement, $isCodeBlockNode, useCodeBlockEditorContext } from "./CodeBlockNode.js";
 import { Signal, withLatestFrom, map } from "@mdxeditor/gurx";

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -5,7 +5,7 @@ import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
 import { useTranslation, readOnly$, iconComponentFor$ } from "../core/index.js";
 import { languages } from "@codemirror/language-data";
 import { EditorState } from "@codemirror/state";
-import { lineNumbers, keymap, EditorView } from "@codemirror/view";
+import { EditorView, lineNumbers, keymap } from "@codemirror/view";
 import { indentWithTab } from "@codemirror/commands";
 import { basicLight } from "cm6-theme-basic-light";
 import { basicSetup } from "codemirror";

package/dist/plugins/core/GenericHTMLNode.js

@@ -1,10 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { ElementNode, $applyNodeReplacement } from "lexical";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { $applyNodeReplacement, ElementNode } from "lexical";
 const TYPE_NAME = "generic-html";
 class GenericHTMLNode extends ElementNode {
   /**

package/dist/plugins/core/NestedLexicalEditor.js

@@ -1,18 +1,18 @@
-import { $addUpdateTag, $getNodeByKey, createEditor, $getRoot, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_CRITICAL } from "lexical";
+import { FOCUS_COMMAND, COMMAND_PRIORITY_LOW, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_CRITICAL, $getNodeByKey, $addUpdateTag, $getRoot } from "lexical";
 import React__default from "react";
-import { NESTED_EDITOR_UPDATED_COMMAND, rootEditor$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, defaultCodeBlockLanguage$, jsxIsAvailable$, nestedEditorChildren$, lexicalTheme$, editorInFocus$ } from "./index.js";
+import { rootEditor$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, defaultCodeBlockLanguage$, jsxIsAvailable$, nestedEditorChildren$, lexicalTheme$, editorInFocus$, historyState$, NESTED_EDITOR_UPDATED_COMMAND } from "./index.js";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { LexicalExtensionEditorComposer } from "@lexical/react/LexicalExtensionEditorComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import classNames from "classnames";
 import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
 import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
 import styles from "../../styles/ui.module.css.js";
-import { SharedHistoryPlugin } from "./SharedHistoryPlugin.js";
 import { mergeRegister } from "@lexical/utils";
 import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
 import { useRealm, useCellValues, usePublisher } from "@mdxeditor/gurx";
+import { createExtensionEditor, editorHasSharedHistory } from "./lexicalExtensions.js";
 const NestedEditorsContext = React__default.createContext(void 0);
 function useNestedEditorContext() {
   const context = React__default.useContext(NestedEditorsContext);
@@ -49,7 +49,7 @@ function useLexicalNodeRemove() {
 }
 const NestedLexicalEditor = function(props) {
   const { getContent, getUpdatedMdastNode, contentEditableProps, block = false } = props;
-  const { mdastNode, lexicalNode, focusEmitter } = useNestedEditorContext();
+  const { parentEditor, mdastNode, lexicalNode, focusEmitter } = useNestedEditorContext();
   const updateMdastNode = useMdastNodeUpdater();
   const removeNode = useLexicalNodeRemove();
   const content = getContent(mdastNode);
@@ -80,45 +80,62 @@ const NestedLexicalEditor = function(props) {
     lexicalTheme$
   );
   const setEditorInFocus = usePublisher(editorInFocus$);
-  const [editor] = React__default.useState(() => {
-    const editor2 = createEditor({
+  const [editor, setEditor] = React__default.useState(null);
+  React__default.useEffect(() => {
+    if (!rootEditor) {
+      return;
+    }
+    const editor2 = createExtensionEditor({
+      name: "@mdxeditor/nested",
       nodes: usedLexicalNodes,
-      theme: realm.getValue(lexicalTheme$),
-      namespace: "NestedEditor"
+      theme: lexicalTheme,
+      namespace: "NestedEditor",
+      parentEditor,
+      historyMode: editorHasSharedHistory(rootEditor) ? "nested-shared" : "nested-external",
+      historyState: realm.getValue(historyState$),
+      initialEditorState: () => {
+        let theContent = content;
+        if (block) {
+          if (theContent.length === 0) {
+            theContent = [{ type: "paragraph", children: [] }];
+          }
+        } else {
+          theContent = [{ type: "paragraph", children: content }];
+        }
+        importMdastTreeToLexical({
+          root: $getRoot(),
+          mdastRoot: {
+            type: "root",
+            children: theContent
+          },
+          visitors: importVisitors,
+          directiveDescriptors,
+          codeBlockEditorDescriptors,
+          defaultCodeBlockLanguage,
+          jsxComponentDescriptors
+        });
+      }
     });
-    return editor2;
-  });
+    setEditor(editor2);
+    return () => {
+      editor2.dispose();
+    };
+  }, []);
   React__default.useEffect(() => {
+    if (!editor) {
+      return;
+    }
     focusEmitter.subscribe(() => {
       editor.focus();
     });
+    return () => {
+      focusEmitter.subscribe(() => void 0);
+    };
   }, [editor, focusEmitter]);
   React__default.useEffect(() => {
-    editor.update(() => {
-      $getRoot().clear();
-      let theContent = content;
-      if (block) {
-        if (theContent.length === 0) {
-          theContent = [{ type: "paragraph", children: [] }];
-        }
-      } else {
-        theContent = [{ type: "paragraph", children: content }];
-      }
-      importMdastTreeToLexical({
-        root: $getRoot(),
-        mdastRoot: {
-          type: "root",
-          children: theContent
-        },
-        visitors: importVisitors,
-        directiveDescriptors,
-        codeBlockEditorDescriptors,
-        defaultCodeBlockLanguage,
-        jsxComponentDescriptors
-      });
-    });
-  }, [editor, block, importVisitors]);
-  React__default.useEffect(() => {
+    if (!editor) {
+      return;
+    }
     function updateParentNode() {
       editor.getEditorState().read(() => {
         const mdast = exportLexicalTreeToMdast({
@@ -198,14 +215,17 @@ const NestedLexicalEditor = function(props) {
     updateMdastNode,
     rootEditor
   ]);
-  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor, initialTheme: lexicalTheme }, /* @__PURE__ */ React__default.createElement(
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(LexicalExtensionEditorComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(
     RichTextPlugin,
     {
       contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { ...contentEditableProps, className: classNames(styles.nestedEditor, contentEditableProps == null ? void 0 : contentEditableProps.className) }),
       placeholder: null,
       ErrorBoundary: LexicalErrorBoundary
     }
-  ), /* @__PURE__ */ React__default.createElement(SharedHistoryPlugin, null), nestedEditorChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })));
+  ), nestedEditorChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })));
 };
 export {
   NestedEditorsContext,