@mdxeditor/editor 0.8.0 → 0.9.0

package/dist/{index-470693d8.js → index-ce0832cc.js}

@@ -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"));
@@ -2198,47 +2269,48 @@ function seedTable() {
     ]
   };
 }
-const [EditorSystem, EditorSystemType] = system((r2) => {
-  const editor = r2.node(null, true);
-  const markdownSource = r2.node("");
-  const setMarkdown = r2.node();
-  const historyState = r2.node(createEmptyHistoryState());
-  const activeEditor = r2.derive(editor, null);
-  const currentFormat = r2.node(0, true);
-  const currentSelection = r2.node(null);
-  const currentListType = r2.node(null);
-  const currentBlockType = r2.node(null);
-  const applyFormat = r2.node();
-  const applyListType = r2.node();
-  const applyBlockType = r2.node();
-  const insertHorizontalRule = r2.node();
-  const insertTable = r2.node();
-  const insertFrontmatter = r2.node();
-  const insertImage = r2.node();
-  const createEditorSubscription = r2.node();
-  const editorSubscriptions = r2.node([]);
-  const inFocus = r2.node(false, true);
-  const activeEditorType = r2.node({ type: "lexical" });
-  const editorRootElementRef = r2.node(null);
-  const markdownParseOptions = r2.node(null);
-  const lexicalConvertOptions = r2.node(null);
-  const lexicalNodes = r2.node([]);
-  const imageAutocompleteSuggestions = r2.node([]);
-  const imageUploadHandler = r2.node((_) => {
+const [EditorSystem, EditorSystemType] = system((r) => {
+  const editor = r.node(null, true);
+  const markdownSource = r.node("");
+  const setMarkdown = r.node();
+  const historyState = r.node(createEmptyHistoryState());
+  const activeEditor = r.derive(editor, null);
+  const currentFormat = r.node(0, true);
+  const currentSelection = r.node(null);
+  const currentListType = r.node(null);
+  const currentBlockType = r.node(null);
+  const applyFormat = r.node();
+  const applyListType = r.node();
+  const applyBlockType = r.node();
+  const insertHorizontalRule = r.node();
+  const insertTable = r.node();
+  const insertFrontmatter = r.node();
+  const insertImage = r.node();
+  const createEditorSubscription = r.node();
+  const editorSubscriptions = r.node([]);
+  const inFocus = r.node(false, true);
+  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([]);
+  const imageUploadHandler = r.node((_) => {
     throw new Error("Image upload handling is not implemented");
   });
-  r2.link(
-    r2.pipe(
+  r.link(
+    r.pipe(
       createEditorSubscription,
-      r2.o.withLatestFrom(editorSubscriptions),
-      r2.o.map(([createSubscription, subscriptions]) => {
+      r.o.withLatestFrom(editorSubscriptions),
+      r.o.map(([createSubscription, subscriptions]) => {
         return [...subscriptions, createSubscription];
       })
     ),
     editorSubscriptions
   );
-  r2.sub(r2.pipe(setMarkdown, r2.o.withLatestFrom(editor, markdownParseOptions)), ([markdown, editor2, markdownParseOptions2]) => {
-    r2.pub(markdownSource, markdown);
+  r.sub(r.pipe(setMarkdown, r.o.withLatestFrom(editor, markdownParseOptions)), ([markdown, editor2, markdownParseOptions2]) => {
+    r.pub(markdownSource, markdown);
     editor2 == null ? void 0 : editor2.update(() => {
       $getRoot().clear();
       importMarkdownToLexical({
@@ -2248,16 +2320,16 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
       });
     });
   });
-  r2.sub(r2.pipe(applyListType, r2.o.withLatestFrom(activeEditor)), ([listType, theEditor]) => {
+  r.sub(r.pipe(applyListType, r.o.withLatestFrom(activeEditor)), ([listType, theEditor]) => {
     theEditor == null ? void 0 : theEditor.dispatchCommand(ListTypeCommandMap.get(listType), void 0);
   });
-  r2.sub(r2.pipe(applyFormat, r2.o.withLatestFrom(activeEditor)), ([format, theEditor]) => {
+  r.sub(r.pipe(applyFormat, r.o.withLatestFrom(activeEditor)), ([format, theEditor]) => {
     theEditor == null ? void 0 : theEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
   });
-  r2.sub(r2.pipe(insertHorizontalRule, r2.o.withLatestFrom(activeEditor)), ([, theEditor]) => {
+  r.sub(r.pipe(insertHorizontalRule, r.o.withLatestFrom(activeEditor)), ([, theEditor]) => {
     theEditor == null ? void 0 : theEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
   });
-  r2.sub(r2.pipe(insertImage, r2.o.withLatestFrom(activeEditor)), ([src, theEditor]) => {
+  r.sub(r.pipe(insertImage, r.o.withLatestFrom(activeEditor)), ([src, theEditor]) => {
     theEditor == null ? void 0 : theEditor.update(() => {
       const imageNode = $createImageNode({ altText: "", src, title: "" });
       $insertNodes([imageNode]);
@@ -2266,7 +2338,7 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
       }
     });
   });
-  r2.sub(r2.pipe(insertFrontmatter, r2.o.withLatestFrom(activeEditor)), ([, theEditor]) => {
+  r.sub(r.pipe(insertFrontmatter, r.o.withLatestFrom(activeEditor)), ([, theEditor]) => {
     theEditor == null ? void 0 : theEditor.update(() => {
       const firstItem = $getRoot().getFirstChild();
       if (!$isFrontmatterNode(firstItem)) {
@@ -2279,7 +2351,7 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
       }
     });
   });
-  r2.sub(r2.pipe(insertTable, r2.o.withLatestFrom(activeEditor)), ([, theEditor]) => {
+  r.sub(r.pipe(insertTable, r.o.withLatestFrom(activeEditor)), ([, theEditor]) => {
     theEditor == null ? void 0 : theEditor.getEditorState().read(() => {
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
@@ -2296,7 +2368,7 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
       }
     });
   });
-  r2.sub(r2.pipe(applyBlockType, r2.o.withLatestFrom(activeEditor)), ([type, theEditor]) => {
+  r.sub(r.pipe(applyBlockType, r.o.withLatestFrom(activeEditor)), ([type, theEditor]) => {
     if (theEditor) {
       switch (type) {
         case "paragraph": {
@@ -2321,7 +2393,7 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
       }
     }
   });
-  r2.sub(r2.pipe(currentSelection, r2.o.withLatestFrom(activeEditor)), ([selection, theEditor]) => {
+  r.sub(r.pipe(currentSelection, r.o.withLatestFrom(activeEditor)), ([selection, theEditor]) => {
     if (!selection || !theEditor) {
       return;
     }
@@ -2339,14 +2411,14 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
       if ($isListNode(element)) {
         const parentList = $getNearestNodeOfType(anchorNode, ListNode);
         const type = parentList ? parentList.getListType() : element.getListType();
-        r2.pubIn({
+        r.pubIn({
           [currentListType.key]: type,
           [currentBlockType.key]: ""
         });
       } else {
-        r2.pub(currentListType, null);
+        r.pub(currentListType, null);
         const blockType = $isHeadingNode(element) ? element.getTag() : $isAdmonitionNode(element) ? element.getKind() : element.getType();
-        r2.pubIn({
+        r.pubIn({
           [currentListType.key]: null,
           [currentBlockType.key]: blockType
         });
@@ -2356,18 +2428,18 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
   function handleSelectionChange() {
     const selection = $getSelection();
     if ($isRangeSelection(selection)) {
-      r2.pubKeys({
+      r.pubKeys({
         currentSelection: selection,
         currentFormat: selection.format
       });
     }
   }
-  r2.sub(editor, (theEditor) => {
+  r.sub(editor, (theEditor) => {
     if (theEditor) {
       theEditor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         (_, editor2) => {
-          r2.pubIn({
+          r.pubIn({
             [activeEditor.key]: editor2,
             [inFocus.key]: true
           });
@@ -2378,36 +2450,36 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
       );
     }
   });
-  r2.pipe(
-    r2.combine(editorSubscriptions, activeEditor),
-    r2.o.scan((teardowns, [editorSubscriptions2, activeEditorValue]) => {
+  r.pipe(
+    r.combine(editorSubscriptions, activeEditor),
+    r.o.scan((teardowns, [editorSubscriptions2, activeEditorValue]) => {
       teardowns.forEach((u) => u());
-      return activeEditorValue ? editorSubscriptions2.map((s) => s(activeEditorValue, r2.getValue(editor))) : [];
+      return activeEditorValue ? editorSubscriptions2.map((s) => s(activeEditorValue, r.getValue(editor))) : [];
     }, [])
   );
-  r2.pub(createEditorSubscription, (editor2) => {
+  r.pub(createEditorSubscription, (editor2) => {
     return editor2.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
         handleSelectionChange();
       });
     });
   });
-  r2.pub(createEditorSubscription, (theEditor) => {
+  r.pub(createEditorSubscription, (theEditor) => {
     return theEditor.registerCommand(
       BLUR_COMMAND,
       (payload) => {
         var _a;
-        const rootEditor = r2.getValue(editor);
+        const rootEditor = r.getValue(editor);
         const movingOutside = !((_a = rootEditor.getRootElement()) == null ? void 0 : _a.contains(payload.relatedTarget));
         if (movingOutside) {
-          r2.pub(inFocus, false);
+          r.pub(inFocus, false);
         }
         return false;
       },
       COMMAND_PRIORITY_LOW
     );
   });
-  r2.pub(createEditorSubscription, (theEditor) => {
+  r.pub(createEditorSubscription, (theEditor) => {
     return theEditor.registerCommand(
       PASTE_COMMAND,
       (event) => {
@@ -2417,10 +2489,10 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
         if (!cbPayload.length || cbPayload.length === 0) {
           return false;
         }
-        const imageUploadHandlerValue = r2.getValue(imageUploadHandler);
+        const imageUploadHandlerValue = r.getValue(imageUploadHandler);
         Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()))).then((urls) => {
           urls.forEach((url) => {
-            r2.pub(insertImage, url);
+            r.pub(insertImage, url);
           });
         }).catch((e) => {
           throw e;
@@ -2456,7 +2528,8 @@ const [EditorSystem, EditorSystemType] = system((r2) => {
     imageAutocompleteSuggestions,
     markdownSource,
     setMarkdown,
-    imageUploadHandler
+    imageUploadHandler,
+    customLeafDirectiveEditors
   };
 }, []);
 const [JsxSystem, JsxSystemType] = system((r) => {
@@ -2598,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;
@@ -2648,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();
@@ -2873,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;
         }
@@ -2915,7 +2988,8 @@ const {
       viewMode: "viewMode",
       linkAutocompleteSuggestions: "linkAutocompleteSuggestions",
       imageAutocompleteSuggestions: "imageAutocompleteSuggestions",
-      codeBlockLanguages: "codeBlockLanguages"
+      codeBlockLanguages: "codeBlockLanguages",
+      customLeafDirectiveEditors: "customLeafDirectiveEditors"
     },
     events: {
       onChange: "onChange"
@@ -3074,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 }) {
@@ -3085,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;
           }
         }
@@ -3284,7 +3358,7 @@ const SharedHistoryPlugin = () => {
   return /* @__PURE__ */ React__default.createElement(HistoryPlugin, { externalHistoryState: historyState });
 };
 const index = "";
-const SourceEditor = React__default.lazy(() => import("./SourceEditor-e499b8bb.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() === "")
@@ -3427,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");
@@ -3440,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));
@@ -3644,9 +3834,10 @@ const ToolbarComponents = {
   BlockTypeSelect,
   BoldItalicUnderlineButtons,
   CodeBlockButton,
+  CodeFormattingButton,
   FrontmatterButton,
   GroupGroup,
-  HorizontalRuleIcon,
+  HorizontalRuleButton,
   LinkButton,
   ListButtons,
   SandpackButton,
@@ -3656,7 +3847,8 @@ const ToolbarComponents = {
   ToggleSingleGroupWithItem,
   ToolbarButton,
   ToolbarSeparator,
-  ImageButton
+  ImageButton,
+  DialogButton
 };
 const ToolbarPlugin = () => {
   const [activeEditorType, viewMode] = useEmitterValues("activeEditorType", "viewMode");
@@ -3869,24 +4061,28 @@ function getDragSelection(event) {
   return range;
 }
 const LazyFrontmatterEditor = React__default.lazy(
-  () => import("./FrontmatterEditor-2b27f5a7.js").then((module) => ({ default: module.FrontmatterEditor }))
+  () => import("./FrontmatterEditor-e2f25a6a.js").then((module) => ({ default: module.FrontmatterEditor }))
 );
-const LazyJsxEditor = React__default.lazy(() => import("./JsxEditor-f061cc75.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-ce901c3c.js").then((module) => ({ default: module.SandpackEditor }))
+  () => import("./SandpackEditor-b1e22784.js").then((module) => ({ default: module.SandpackEditor }))
 );
 const LazyCodeBlockEditor = React__default.lazy(
-  () => import("./CodeBlockEditor-59b65408.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-bb94be2b.js").then((module) => ({ default: module.TableEditor })));
-const LazyImageEditor = React__default.lazy(() => import("./ImageEditor-5f203a1c.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
 };