@mdxeditor/editor 0.7.2 → 0.9.0

package/dist/{index-911b7e3d.js → index-ce0832cc.js}

@@ -13,7 +13,7 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
 import classNames from "classnames";
-import { ElementNode, $createParagraphNode, $applyNodeReplacement, DecoratorNode, createEditor, $getRoot, $isRootNode, $isParagraphNode, $isLineBreakNode, $isTextNode, $isElementNode, ParagraphNode, $createTextNode, $getSelection, $isRangeSelection, DEPRECATED_$isGridSelection, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, BLUR_COMMAND, COMMAND_PRIORITY_LOW, PASTE_COMMAND, FOCUS_COMMAND, KEY_ESCAPE_COMMAND, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_HIGH, createCommand, INDENT_CONTENT_COMMAND, $getNodeByKey, $insertNodes, COMMAND_PRIORITY_EDITOR, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $createRangeSelection, $setSelection, $isNodeSelection } from "lexical";
+import { ElementNode, $createParagraphNode, $applyNodeReplacement, DecoratorNode, createEditor, $getRoot, $isRootNode, $isParagraphNode, $isLineBreakNode, $isTextNode, $isElementNode, ParagraphNode, $createTextNode, $getSelection, $isRangeSelection, DEPRECATED_$isGridSelection, FORMAT_TEXT_COMMAND, $insertNodes, $isRootOrShadowRoot, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, BLUR_COMMAND, COMMAND_PRIORITY_LOW, PASTE_COMMAND, FOCUS_COMMAND, KEY_ESCAPE_COMMAND, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_HIGH, createCommand, INDENT_CONTENT_COMMAND, $getNodeByKey, COMMAND_PRIORITY_EDITOR, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $createRangeSelection, $setSelection, $isNodeSelection } from "lexical";
 import * as React from "react";
 import React__default, { createContext, forwardRef, useMemo, useImperativeHandle, createElement, useCallback, useContext, useState, useEffect } from "react";
 import { CodeNode } from "@lexical/code";
@@ -30,7 +30,7 @@ import { directive } from "micromark-extension-directive";
 import { frontmatter } from "micromark-extension-frontmatter";
 import { gfmTable } from "micromark-extension-gfm-table";
 import { mdxjs } from "micromark-extension-mdxjs";
-import { addClassNamesToElement, $insertNodeToNearestRoot, $findMatchingParent, $getNearestNodeOfType, mergeRegister, $wrapNodeInElement } from "@lexical/utils";
+import { addClassNamesToElement, $wrapNodeInElement, $insertNodeToNearestRoot, $findMatchingParent, $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $setBlocksType, $isAtNodeEnd } from "@lexical/selection";
 import { createEmptyHistoryState, HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
@@ -45,6 +45,7 @@ import { formatLines, diffLines } from "unidiff";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
 import * as Select from "@radix-ui/react-select";
 import * as Dialog from "@radix-ui/react-dialog";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
 class AdmonitionNode extends ElementNode {
   constructor(kind, key) {
     super(key);
@@ -833,6 +834,60 @@ function $isTableNode(node) {
 function $createTableNode(mdastNode) {
   return new TableNode(mdastNode);
 }
+class LeafDirectiveNode extends DecoratorNode {
+  constructor(mdastNode, key) {
+    super(key);
+    __publicField(this, "__mdastNode");
+    this.__mdastNode = mdastNode;
+  }
+  static getType() {
+    return "leafDirective";
+  }
+  static clone(node) {
+    return new LeafDirectiveNode(structuredClone(node.__mdastNode));
+  }
+  static importJSON(serializedNode) {
+    return $createLeafDirectiveNode(serializedNode.mdastNode);
+  }
+  getMdastNode() {
+    return this.__mdastNode;
+  }
+  exportJSON() {
+    return {
+      mdastNode: this.getMdastNode(),
+      type: "leafDirective",
+      version: 1
+    };
+  }
+  createDOM() {
+    return document.createElement("div");
+  }
+  updateDOM() {
+    return false;
+  }
+  setMdastNode(mdastNode) {
+    this.getWritable().__mdastNode = mdastNode;
+  }
+  decorate(parentEditor, {
+    theme: {
+      nodeDecoratorComponents: { LeafDirectiveEditor }
+    }
+  }) {
+    return /* @__PURE__ */ React__default.createElement(LeafDirectiveEditor, { leafDirective: this, mdastNode: this.getMdastNode(), parentEditor });
+  }
+  isInline() {
+    return false;
+  }
+  isKeyboardSelectable() {
+    return true;
+  }
+}
+function $createLeafDirectiveNode(mdastNode) {
+  return new LeafDirectiveNode(mdastNode);
+}
+function $isLeafDirectiveNode(node) {
+  return node instanceof LeafDirectiveNode;
+}
 const IS_BOLD = 1;
 const IS_ITALIC = 2;
 const IS_UNDERLINE = 8;
@@ -1045,6 +1100,12 @@ const LexicalTableVisitor = {
     actions.appendToParent(mdastParent, lexicalNode.getMdastNode());
   }
 };
+const LexicalLeafDirectiveVisitor = {
+  testLexicalNode: $isLeafDirectiveNode,
+  visitLexicalNode({ actions, mdastParent, lexicalNode }) {
+    actions.appendToParent(mdastParent, lexicalNode.getMdastNode());
+  }
+};
 const JsxVisitor = {
   testLexicalNode: $isJsxNode,
   visitLexicalNode({ mdastParent, lexicalNode, actions }) {
@@ -1079,7 +1140,8 @@ const defaultLexicalVisitors = {
   AdmonitionVisitor,
   LexicalImageVisitor,
   JsxVisitor,
-  LexicalTableVisitor
+  LexicalTableVisitor,
+  LexicalLeafDirectiveVisitor
 };
 function isParent$1(node) {
   return node.children instanceof Array;
@@ -1291,6 +1353,12 @@ const MdastAdmonitionVisitor = {
     actions.addAndStepInto($createAdmonitionNode(mdastNode.name));
   }
 };
+const MdastLeafDirectiveVisitor = {
+  testNode: "leafDirective",
+  visitNode({ lexicalParent, mdastNode }) {
+    lexicalParent.append($createLeafDirectiveNode(mdastNode));
+  }
+};
 const MdastHeadingVisitor = {
   testNode: "heading",
   visitNode: function({ mdastNode, actions }) {
@@ -1436,7 +1504,8 @@ const defaultMdastVisitors = {
   MdastAdmonitionVisitor,
   MdastMdxJsEsmVisitor,
   MdastMdxJsxElementVisitor,
-  MdastTableVisitor
+  MdastTableVisitor,
+  MdastLeafDirectiveVisitor
 };
 function isParent(node) {
   return node.children instanceof Array;
@@ -1479,7 +1548,8 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors }) {
       return visitor2.testNode(mdastNode);
     });
     if (!visitor) {
-      throw new Error(`no unist visitor found for ${mdastNode.type}`, {
+      debugger;
+      throw new Error(`no MdastImportVisitor found for ${mdastNode.type}`, {
         cause: mdastNode
       });
     }
@@ -1522,7 +1592,8 @@ const defaultLexicalNodes = {
   JsxNode,
   CodeNode,
   // this one should not be used, but markdown shortcuts complain about it
-  TableNode
+  TableNode,
+  LeafDirectiveNode
 };
 function uuidv4() {
   const hex = [...Array(256).keys()].map((index2) => index2.toString(16).padStart(2, "0"));
@@ -2221,6 +2292,7 @@ const [EditorSystem, EditorSystemType] = system((r) => {
   const activeEditorType = r.node({ type: "lexical" });
   const editorRootElementRef = r.node(null);
   const markdownParseOptions = r.node(null);
+  const customLeafDirectiveEditors = r.node([]);
   const lexicalConvertOptions = r.node(null);
   const lexicalNodes = r.node([]);
   const imageAutocompleteSuggestions = r.node([]);
@@ -2258,16 +2330,11 @@ const [EditorSystem, EditorSystemType] = system((r) => {
     theEditor == null ? void 0 : theEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
   });
   r.sub(r.pipe(insertImage, r.o.withLatestFrom(activeEditor)), ([src, theEditor]) => {
-    theEditor == null ? void 0 : theEditor.getEditorState().read(() => {
-      const selection = $getSelection();
-      if ($isRangeSelection(selection)) {
-        const focusNode = selection.focus.getNode();
-        if (focusNode !== null) {
-          theEditor.update(() => {
-            const imageNode = $createImageNode({ altText: "", src, title: "" });
-            $insertNodeToNearestRoot(imageNode);
-          });
-        }
+    theEditor == null ? void 0 : theEditor.update(() => {
+      const imageNode = $createImageNode({ altText: "", src, title: "" });
+      $insertNodes([imageNode]);
+      if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+        $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
       }
     });
   });
@@ -2423,8 +2490,11 @@ const [EditorSystem, EditorSystemType] = system((r) => {
           return false;
         }
         const imageUploadHandlerValue = r.getValue(imageUploadHandler);
-        const theImage = cbPayload[0].getAsFile();
-        imageUploadHandlerValue(theImage).then((url) => r.pub(insertImage, url)).catch((e) => {
+        Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()))).then((urls) => {
+          urls.forEach((url) => {
+            r.pub(insertImage, url);
+          });
+        }).catch((e) => {
           throw e;
         });
         return true;
@@ -2458,7 +2528,8 @@ const [EditorSystem, EditorSystemType] = system((r) => {
     imageAutocompleteSuggestions,
     markdownSource,
     setMarkdown,
-    imageUploadHandler
+    imageUploadHandler,
+    customLeafDirectiveEditors
   };
 }, []);
 const [JsxSystem, JsxSystemType] = system((r) => {
@@ -2600,6 +2671,8 @@ const [SandpackSystem] = system(
   },
   [EditorSystemType]
 );
+const CAN_USE_DOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+const IS_APPLE = CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 function getSelectedNode(selection) {
   const anchor = selection.anchor;
   const focus = selection.focus;
@@ -2650,8 +2723,6 @@ function getStateAsMarkdown(editor, exportParams) {
     });
   }).markdown;
 }
-const CAN_USE_DOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-const IS_APPLE = CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 function getLinkNodeInSelection(selection) {
   const node = getSelectedNode(selection);
   const parent = node.getParent();
@@ -2875,7 +2946,7 @@ const [OnChangeSystem, OnChangeSystemType] = system(
         r.pub(markdownSource, markdown);
       }
       updateMarkdown();
-      return activeEditor.registerUpdateListener(({ dirtyElements, dirtyLeaves, prevEditorState, tags }) => {
+      return rootEditor.registerUpdateListener(({ dirtyElements, dirtyLeaves, prevEditorState, tags }) => {
         if (dirtyElements.size === 0 && dirtyLeaves.size === 0 || tags.has("history-merge") || prevEditorState.isEmpty()) {
           return;
         }
@@ -2917,7 +2988,8 @@ const {
       viewMode: "viewMode",
       linkAutocompleteSuggestions: "linkAutocompleteSuggestions",
       imageAutocompleteSuggestions: "imageAutocompleteSuggestions",
-      codeBlockLanguages: "codeBlockLanguages"
+      codeBlockLanguages: "codeBlockLanguages",
+      customLeafDirectiveEditors: "customLeafDirectiveEditors"
     },
     events: {
       onChange: "onChange"
@@ -3076,9 +3148,9 @@ const styles = {
   imageWrapper
 };
 createCommand();
-const MAX_SUGGESTIONS$1 = 20;
+const MAX_SUGGESTIONS$2 = 20;
 function LinkEditForm({ initialUrl, onSubmit, onCancel, linkAutocompleteSuggestions }) {
-  const [items, setItems] = React__default.useState(linkAutocompleteSuggestions.slice(0, MAX_SUGGESTIONS$1));
+  const [items, setItems] = React__default.useState(linkAutocompleteSuggestions.slice(0, MAX_SUGGESTIONS$2));
   const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
     initialInputValue: initialUrl,
     onInputValueChange({ inputValue }) {
@@ -3087,7 +3159,7 @@ function LinkEditForm({ initialUrl, onSubmit, onCancel, linkAutocompleteSuggesti
       for (const url of linkAutocompleteSuggestions) {
         if (url.toLowerCase().includes(inputValue)) {
           matchingItems.push(url);
-          if (matchingItems.length >= MAX_SUGGESTIONS$1) {
+          if (matchingItems.length >= MAX_SUGGESTIONS$2) {
             break;
           }
         }
@@ -3286,7 +3358,7 @@ const SharedHistoryPlugin = () => {
   return /* @__PURE__ */ React__default.createElement(HistoryPlugin, { externalHistoryState: historyState });
 };
 const index = "";
-const SourceEditor = React__default.lazy(() => import("./SourceEditor-0399298a.js").then((module) => ({ default: module.SourceEditor })));
+const SourceEditor = React__default.lazy(() => import("./SourceEditor-e509d0a5.js").then((module) => ({ default: module.SourceEditor })));
 function DiffViewer({ oldText, newText }) {
   const diffText = formatLines(diffLines(oldText, newText), { context: 3 });
   if (diffText.trim() === "")
@@ -3429,7 +3501,124 @@ const SvgAddPhoto = (props) => /* @__PURE__ */ React.createElement("svg", { widt
   maskType: "alpha"
 }, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 24, height: 24 }, /* @__PURE__ */ React.createElement("rect", { width: 24, height: 24, fill: "#D9D9D9" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#mask0_343_38)" }, /* @__PURE__ */ React.createElement("path", { d: "M3 21V3H14V5H5V19H19V10H21V21H3ZM17 9V7H15V5H17V3H19V5H21V7H19V9H17ZM6 17H18L14.25 12L11.25 16L9 13L6 17Z", fill: "currentColor" })));
 const AddPhotoIcon = SvgAddPhoto;
-const ImageButton = React__default.forwardRef((props, forwardedRef) => {
+const MAX_SUGGESTIONS$1 = 20;
+const DialogButton = React__default.forwardRef(
+  ({ autocompleteSuggestions = [], submitButtonTitle, dialogInputPlaceholder, onSubmit, tooltipTitle, buttonContent }, forwardedRef) => {
+    const [editorRootElementRef] = useEmitterValues("editorRootElementRef");
+    const [open, setOpen] = React__default.useState(false);
+    const onSubmitCallback = React__default.useCallback(
+      (value) => {
+        onSubmit(value);
+        setOpen(false);
+      },
+      [onSubmit]
+    );
+    return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(InstantTooltip, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(
+      DialogForm,
+      {
+        submitButtonTitle,
+        autocompleteSuggestions,
+        onSubmitCallback,
+        dialogInputPlaceholder
+      }
+    ))));
+  }
+);
+const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlaceholder, submitButtonTitle }) => {
+  const [items, setItems] = React__default.useState(autocompleteSuggestions.slice(0, MAX_SUGGESTIONS$1));
+  const enableAutoComplete = autocompleteSuggestions.length > 0;
+  const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
+    initialInputValue: "",
+    onInputValueChange({ inputValue }) {
+      inputValue = (inputValue == null ? void 0 : inputValue.toLowerCase()) || "";
+      const matchingItems = [];
+      for (const suggestion of autocompleteSuggestions) {
+        if (suggestion.toLowerCase().includes(inputValue)) {
+          matchingItems.push(suggestion);
+          if (matchingItems.length >= MAX_SUGGESTIONS$1) {
+            break;
+          }
+        }
+      }
+      setItems(matchingItems);
+    },
+    items,
+    itemToString(item) {
+      return item ?? "";
+    }
+  });
+  const onSubmitEH = (e) => {
+    e.preventDefault();
+    onSubmitCallback(selectedItem || "");
+  };
+  const onKeyDownEH = React__default.useCallback(
+    (e) => {
+      var _a;
+      if (e.key === "Escape") {
+        (_a = e.target.form) == null ? void 0 : _a.reset();
+      } else if (e.key === "Enter" && (!isOpen || items.length === 0)) {
+        e.preventDefault();
+        onSubmitCallback(e.target.value);
+      }
+    },
+    [isOpen, items, onSubmitCallback]
+  );
+  const downshiftInputProps = getInputProps();
+  const inputProps = {
+    ...downshiftInputProps,
+    onKeyDown: (e) => {
+      onKeyDownEH(e);
+      downshiftInputProps.onKeyDown(e);
+    }
+  };
+  const dropdownIsVisible = isOpen && items.length > 0;
+  return /* @__PURE__ */ React__default.createElement("form", { onSubmit: onSubmitEH, className: classNames(styles.linkDialogEditForm) }, /* @__PURE__ */ React__default.createElement("div", { className: styles.linkDialogInputContainer }, /* @__PURE__ */ React__default.createElement("div", { "data-visible-dropdown": dropdownIsVisible, className: styles.linkDialogInputWrapper }, /* @__PURE__ */ React__default.createElement(
+    "input",
+    {
+      placeholder: dialogInputPlaceholder,
+      className: styles.linkDialogInput,
+      ...inputProps,
+      autoFocus: true,
+      size: 30,
+      "data-editor-dialog": true
+    }
+  ), enableAutoComplete && /* @__PURE__ */ React__default.createElement("button", { "aria-label": "toggle menu", type: "button", ...getToggleButtonProps() }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))), /* @__PURE__ */ React__default.createElement("div", { className: styles.linkDialogAutocompleteContainer }, /* @__PURE__ */ React__default.createElement("ul", { ...getMenuProps(), "data-visible": dropdownIsVisible }, items.map((item, index2) => /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      "data-selected": selectedItem === item,
+      "data-highlighted": highlightedIndex === index2,
+      key: `${item}${index2}`,
+      ...getItemProps({ item, index: index2 })
+    },
+    item
+  ))))), /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      type: "submit",
+      title: submitButtonTitle,
+      "aria-label": submitButtonTitle,
+      className: classNames(styles.actionButton, styles.primaryActionButton)
+    },
+    /* @__PURE__ */ React__default.createElement(CheckIcon, null)
+  ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { className: styles.actionButton }, /* @__PURE__ */ React__default.createElement(CloseIcon, null)));
+};
+const ImageButton = React__default.forwardRef((_, forwardedRef) => {
+  const [imageAutocompleteSuggestions] = useEmitterValues("imageAutocompleteSuggestions");
+  const insertImage = usePublisher("insertImage");
+  return /* @__PURE__ */ React__default.createElement(
+    DialogButton,
+    {
+      ref: forwardedRef,
+      submitButtonTitle: "Insert Image",
+      dialogInputPlaceholder: "Paste or select image URL",
+      tooltipTitle: "Insert image",
+      onSubmit: insertImage,
+      buttonContent: /* @__PURE__ */ React__default.createElement(AddPhotoIcon, null),
+      autocompleteSuggestions: imageAutocompleteSuggestions
+    }
+  );
+});
+React__default.forwardRef((props, forwardedRef) => {
   const [editorRootElementRef, imageAutocompleteSuggestions] = useEmitterValues("editorRootElementRef", "imageAutocompleteSuggestions");
   const [open, setOpen] = React__default.useState(false);
   const insertImage = usePublisher("insertImage");
@@ -3442,7 +3631,6 @@ const ImageButton = React__default.forwardRef((props, forwardedRef) => {
   );
   return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ...props, ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(InstantTooltip, { title: "Insert image" }, /* @__PURE__ */ React__default.createElement(AddPhotoIcon, null)))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(ImageForm, { initialUrl: "", onSubmit, imageAutocompleteSuggestions }))));
 });
-createCommand();
 const MAX_SUGGESTIONS = 20;
 const ImageForm = ({ initialUrl, onSubmit, imageAutocompleteSuggestions }) => {
   const [items, setItems] = React__default.useState(imageAutocompleteSuggestions.slice(0, MAX_SUGGESTIONS));
@@ -3646,9 +3834,10 @@ const ToolbarComponents = {
   BlockTypeSelect,
   BoldItalicUnderlineButtons,
   CodeBlockButton,
+  CodeFormattingButton,
   FrontmatterButton,
   GroupGroup,
-  HorizontalRuleIcon,
+  HorizontalRuleButton,
   LinkButton,
   ListButtons,
   SandpackButton,
@@ -3658,7 +3847,8 @@ const ToolbarComponents = {
   ToggleSingleGroupWithItem,
   ToolbarButton,
   ToolbarSeparator,
-  ImageButton
+  ImageButton,
+  DialogButton
 };
 const ToolbarPlugin = () => {
   const [activeEditorType, viewMode] = useEmitterValues("activeEditorType", "viewMode");
@@ -3797,10 +3987,12 @@ function onDrop(event, editor, imageUploadHandler) {
   cbPayload = cbPayload.filter((i) => /image/.test(i.type));
   if (cbPayload.length > 0) {
     event.preventDefault();
-    imageUploadHandler(cbPayload[0].getAsFile()).then((url) => {
-      editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
-        src: url,
-        altText: ""
+    Promise.all(cbPayload.map((image) => imageUploadHandler(image.getAsFile()))).then((urls) => {
+      urls.forEach((url) => {
+        editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+          src: url,
+          altText: ""
+        });
       });
     }).catch((e) => {
       throw e;
@@ -3869,24 +4061,28 @@ function getDragSelection(event) {
   return range;
 }
 const LazyFrontmatterEditor = React__default.lazy(
-  () => import("./FrontmatterEditor-bcb1a0fd.js").then((module) => ({ default: module.FrontmatterEditor }))
+  () => import("./FrontmatterEditor-e2f25a6a.js").then((module) => ({ default: module.FrontmatterEditor }))
 );
-const LazyJsxEditor = React__default.lazy(() => import("./JsxEditor-6fd46aaa.js").then((module) => ({ default: module.JsxEditor })));
+const LazyJsxEditor = React__default.lazy(() => import("./JsxEditor-88d55ef8.js").then((module) => ({ default: module.JsxEditor })));
 const LazySandpackEditor = React__default.lazy(
-  () => import("./SandpackEditor-cdcd7e95.js").then((module) => ({ default: module.SandpackEditor }))
+  () => import("./SandpackEditor-b1e22784.js").then((module) => ({ default: module.SandpackEditor }))
 );
 const LazyCodeBlockEditor = React__default.lazy(
-  () => import("./CodeBlockEditor-6e6cadb7.js").then((module) => ({ default: module.CodeBlockEditor }))
+  () => import("./CodeBlockEditor-ce4c85ed.js").then((module) => ({ default: module.CodeBlockEditor }))
+);
+const LazyTableEditor = React__default.lazy(() => import("./TableEditor-44bef804.js").then((module) => ({ default: module.TableEditor })));
+const LazyImageEditor = React__default.lazy(() => import("./ImageEditor-ad505654.js").then((module) => ({ default: module.ImageEditor })));
+const LazyLeafDirectiveEditor = React__default.lazy(
+  () => import("./LeafDirectiveEditor-34ead530.js").then((module) => ({ default: module.LeafDirectiveEditor }))
 );
-const LazyTableEditor = React__default.lazy(() => import("./TableEditor-533f6497.js").then((module) => ({ default: module.TableEditor })));
-const LazyImageEditor = React__default.lazy(() => import("./ImageEditor-c0184e9a.js").then((module) => ({ default: module.ImageEditor })));
 const defaultNodeDecorators = {
   FrontmatterEditor: LazyFrontmatterEditor,
   JsxEditor: LazyJsxEditor,
   SandpackEditor: LazySandpackEditor,
   CodeBlockEditor: LazyCodeBlockEditor,
   TableEditor: LazyTableEditor,
-  ImageEditor: LazyImageEditor
+  ImageEditor: LazyImageEditor,
+  LeafDirectiveEditor: LazyLeafDirectiveEditor
 };
 const defaultToolbarComponents = [
   BoldItalicUnderlineButtons,
@@ -3967,7 +4163,8 @@ const MDXEditor = React__default.forwardRef(
       toMarkdownOptions = defaultToMarkdownOptions,
       visitors: exportVisitors = Object.values(defaultLexicalVisitors)
     } = {},
-    lexicalNodes = Object.values(defaultLexicalNodes)
+    lexicalNodes = Object.values(defaultLexicalNodes),
+    customLeafDirectiveEditors = []
   }, ref) => {
     const editorRootElementRef = React__default.useRef(null);
     return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className), ref: editorRootElementRef }, /* @__PURE__ */ React__default.createElement(
@@ -4018,7 +4215,8 @@ const MDXEditor = React__default.forwardRef(
             toMarkdownExtensions
           },
           lexicalNodes,
-          imageUploadHandler
+          imageUploadHandler,
+          customLeafDirectiveEditors
         },
         /* @__PURE__ */ React__default.createElement(ToolbarPlugin, null),
         /* @__PURE__ */ React__default.createElement(ViewModeToggler, null, /* @__PURE__ */ React__default.createElement(
@@ -4060,6 +4258,68 @@ const MDXMethods = ({ mdxRef }) => {
   );
   return null;
 };
+const NestedEditorsContext = React__default.createContext(void 0);
+const useNestedEditorContext = () => {
+  const context = React__default.useContext(NestedEditorsContext);
+  if (!context) {
+    throw new Error("useNestedEditor must be used within a NestedEditorsProvider");
+  }
+  return context;
+};
+function useMdastNodeUpdater() {
+  const { parentEditor, lexicalNode } = useNestedEditorContext();
+  return function updateMdastNode(node) {
+    parentEditor.update(() => {
+      lexicalNode.setMdastNode(node);
+    });
+  };
+}
+const NestedEditor = function(props) {
+  const { getContent, getUpdatedMdastNode, contentEditableProps } = props;
+  const { mdastNode } = useNestedEditorContext();
+  const updateMdastNode = useMdastNodeUpdater();
+  const [markdownParseOptions, lexicalConvertOptions, jsxComponentDescriptors, lexicalNodes] = useEmitterValues(
+    "markdownParseOptions",
+    "lexicalConvertOptions",
+    "jsxComponentDescriptors",
+    "lexicalNodes"
+  );
+  const [editor] = React__default.useState(() => {
+    const editor2 = createEditor({
+      nodes: lexicalNodes,
+      theme
+    });
+    editor2.update(() => {
+      importMdastTreeToLexical({
+        root: $getRoot(),
+        mdastRoot: { type: "root", children: [{ type: "paragraph", children: getContent(mdastNode) }] },
+        visitors: markdownParseOptions.visitors
+      });
+    });
+    return editor2;
+  });
+  React__default.useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const mdast = exportLexicalTreeToMdast({
+          root: $getRoot(),
+          jsxComponentDescriptors,
+          ...lexicalConvertOptions
+        });
+        const rootParagraph = mdast.children[0];
+        updateMdastNode(getUpdatedMdastNode(mdastNode, rootParagraph.children));
+      });
+    });
+  }, [editor, getUpdatedMdastNode, jsxComponentDescriptors, lexicalConvertOptions, mdastNode, updateMdastNode]);
+  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(
+    RichTextPlugin,
+    {
+      contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { ...contentEditableProps }),
+      placeholder: /* @__PURE__ */ React__default.createElement("div", null),
+      ErrorBoundary: LexicalErrorBoundary
+    }
+  ), /* @__PURE__ */ React__default.createElement(SharedHistoryPlugin, null));
+};
 export {
   $isImageNode as $,
   AdmonitionNode as A,
@@ -4067,29 +4327,35 @@ export {
   FrontmatterNode as F,
   ImageNode as I,
   JsxNode as J,
+  LeafDirectiveNode as L,
   MDXEditor as M,
+  NestedEditorsContext as N,
   SharedHistoryPlugin as S,
   ToolbarComponents as T,
   usePublisher as a,
-  $createAdmonitionNode as b,
-  $isAdmonitionNode as c,
-  $createCodeBlockNode as d,
+  NestedEditor as b,
+  useMdastNodeUpdater as c,
+  $createAdmonitionNode as d,
   exportLexicalTreeToMdast as e,
-  $isCodeBlockNode as f,
-  $createFrontmatterNode as g,
-  $isFrontmatterNode as h,
+  $isAdmonitionNode as f,
+  $createCodeBlockNode as g,
+  $isCodeBlockNode as h,
   importMdastTreeToLexical as i,
-  $createImageNode as j,
-  $createJsxNode as k,
-  $isJsxNode as l,
-  SandpackNode as m,
-  $createSandpackNode as n,
-  $isSandpackNode as o,
-  TableNode as p,
-  $isTableNode as q,
-  $createTableNode as r,
+  $createFrontmatterNode as j,
+  $isFrontmatterNode as k,
+  $createImageNode as l,
+  $createJsxNode as m,
+  $isJsxNode as n,
+  SandpackNode as o,
+  $createSandpackNode as p,
+  $isSandpackNode as q,
+  TableNode as r,
   styles as s,
   theme as t,
   useEmitterValues as u,
-  defaultMdxOptionValues as v
+  $isTableNode as v,
+  $createTableNode as w,
+  $createLeafDirectiveNode as x,
+  $isLeafDirectiveNode as y,
+  defaultMdxOptionValues as z
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-93ab76f9.cjs"),r=require("lexical");require("@lexical/react/LexicalComposer"),require("@lexical/react/LexicalContentEditable"),require("@lexical/react/LexicalErrorBoundary"),require("@lexical/react/LexicalHorizontalRulePlugin"),require("@lexical/react/LexicalLinkPlugin"),require("@lexical/react/LexicalListPlugin"),require("@lexical/react/LexicalRichTextPlugin"),require("@lexical/react/LexicalTabIndentationPlugin"),require("classnames"),require("react"),require("@lexical/code"),require("@lexical/link"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("mdast-util-directive"),require("mdast-util-from-markdown"),require("mdast-util-frontmatter"),require("mdast-util-gfm-table"),require("mdast-util-mdx"),require("micromark-extension-directive"),require("micromark-extension-frontmatter"),require("micromark-extension-gfm-table"),require("micromark-extension-mdxjs"),require("@lexical/utils"),require("@lexical/react/LexicalComposerContext"),require("@lexical/selection"),require("@lexical/react/LexicalHistoryPlugin"),require("mdast-util-to-markdown"),require("@radix-ui/react-popover"),require("@radix-ui/react-tooltip"),require("downshift"),require("@lexical/markdown"),require("@lexical/react/LexicalMarkdownShortcutPlugin"),require("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog"),exports.$createAdmonitionNode=e.$createAdmonitionNode,exports.$createCodeBlockNode=e.$createCodeBlockNode,exports.$createFrontmatterNode=e.$createFrontmatterNode,exports.$createImageNode=e.$createImageNode,exports.$createJsxNode=e.$createJsxNode,exports.$createSandpackNode=e.$createSandpackNode,exports.$createTableNode=e.$createTableNode,exports.$isAdmonitionNode=e.$isAdmonitionNode,exports.$isCodeBlockNode=e.$isCodeBlockNode,exports.$isFrontmatterNode=e.$isFrontmatterNode,exports.$isImageNode=e.$isImageNode,exports.$isJsxNode=e.$isJsxNode,exports.$isSandpackNode=e.$isSandpackNode,exports.$isTableNode=e.$isTableNode,exports.AdmonitionNode=e.AdmonitionNode,exports.CodeBlockNode=e.CodeBlockNode,exports.FrontmatterNode=e.FrontmatterNode,exports.ImageNode=e.ImageNode,exports.JsxNode=e.JsxNode,exports.MDXEditor=e.MDXEditor,exports.SandpackNode=e.SandpackNode,exports.TableNode=e.TableNode,exports.ToolbarComponents=e.ToolbarComponents,exports.defaultMdxOptionValues=e.defaultMdxOptionValues,Object.defineProperty(exports,"AdmonitionKind",{enumerable:!0,get:()=>r.AdmonitionKind});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-21fcefae.cjs"),r=require("lexical");require("@lexical/react/LexicalComposer"),require("@lexical/react/LexicalContentEditable"),require("@lexical/react/LexicalErrorBoundary"),require("@lexical/react/LexicalHorizontalRulePlugin"),require("@lexical/react/LexicalLinkPlugin"),require("@lexical/react/LexicalListPlugin"),require("@lexical/react/LexicalRichTextPlugin"),require("@lexical/react/LexicalTabIndentationPlugin"),require("classnames"),require("react"),require("@lexical/code"),require("@lexical/link"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("mdast-util-directive"),require("mdast-util-from-markdown"),require("mdast-util-frontmatter"),require("mdast-util-gfm-table"),require("mdast-util-mdx"),require("micromark-extension-directive"),require("micromark-extension-frontmatter"),require("micromark-extension-gfm-table"),require("micromark-extension-mdxjs"),require("@lexical/utils"),require("@lexical/react/LexicalComposerContext"),require("@lexical/selection"),require("@lexical/react/LexicalHistoryPlugin"),require("mdast-util-to-markdown"),require("@radix-ui/react-popover"),require("@radix-ui/react-tooltip"),require("downshift"),require("@lexical/markdown"),require("@lexical/react/LexicalMarkdownShortcutPlugin"),require("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog"),require("@lexical/react/LexicalNestedComposer"),exports.$createAdmonitionNode=e.$createAdmonitionNode,exports.$createCodeBlockNode=e.$createCodeBlockNode,exports.$createFrontmatterNode=e.$createFrontmatterNode,exports.$createImageNode=e.$createImageNode,exports.$createJsxNode=e.$createJsxNode,exports.$createLeafDirectiveNode=e.$createLeafDirectiveNode,exports.$createSandpackNode=e.$createSandpackNode,exports.$createTableNode=e.$createTableNode,exports.$isAdmonitionNode=e.$isAdmonitionNode,exports.$isCodeBlockNode=e.$isCodeBlockNode,exports.$isFrontmatterNode=e.$isFrontmatterNode,exports.$isImageNode=e.$isImageNode,exports.$isJsxNode=e.$isJsxNode,exports.$isLeafDirectiveNode=e.$isLeafDirectiveNode,exports.$isSandpackNode=e.$isSandpackNode,exports.$isTableNode=e.$isTableNode,exports.AdmonitionNode=e.AdmonitionNode,exports.CodeBlockNode=e.CodeBlockNode,exports.FrontmatterNode=e.FrontmatterNode,exports.ImageNode=e.ImageNode,exports.JsxNode=e.JsxNode,exports.LeafDirectiveNode=e.LeafDirectiveNode,exports.MDXEditor=e.MDXEditor,exports.NestedEditor=e.NestedEditor,exports.SandpackNode=e.SandpackNode,exports.TableNode=e.TableNode,exports.ToolbarComponents=e.ToolbarComponents,exports.defaultMdxOptionValues=e.defaultMdxOptionValues,exports.useMdastNodeUpdater=e.useMdastNodeUpdater,Object.defineProperty(exports,"AdmonitionKind",{enumerable:!0,get:()=>r.AdmonitionKind});