@mdxeditor/editor 0.5.1 → 0.6.0

package/dist/{index-7651977e.js → index-a1fa6c7f.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, FOCUS_COMMAND, KEY_ESCAPE_COMMAND, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_HIGH, createCommand, INDENT_CONTENT_COMMAND, $getNodeByKey } from "lexical";
+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 * 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 } from "@lexical/utils";
+import { addClassNamesToElement, $insertNodeToNearestRoot, $findMatchingParent, $getNearestNodeOfType, mergeRegister, $wrapNodeInElement } from "@lexical/utils";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $setBlocksType, $isAtNodeEnd } from "@lexical/selection";
 import { createEmptyHistoryState, HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
@@ -372,8 +372,12 @@ class ImageNode extends DecoratorNode {
   setTitle(title) {
     this.getWritable().__title = title;
   }
-  decorate() {
-    return /* @__PURE__ */ React__default.createElement("img", { title: this.__title, src: this.__src, alt: this.__altText });
+  decorate(_parentEditor, {
+    theme: {
+      nodeDecoratorComponents: { ImageEditor }
+    }
+  }) {
+    return /* @__PURE__ */ React__default.createElement(ImageEditor, { src: this.getSrc(), title: this.getTitle(), nodeKey: this.getKey() });
   }
 }
 function $createImageNode(options) {
@@ -1028,11 +1032,17 @@ const LexicalThematicBreakVisitor = {
 };
 const LexicalImageVisitor = {
   testLexicalNode: $isImageNode,
-  visitLexicalNode({ lexicalNode, actions }) {
-    actions.addAndStepInto("image", {
-      url: lexicalNode.getSrc(),
-      alt: lexicalNode.getAltText(),
-      title: lexicalNode.getTitle()
+  visitLexicalNode({ mdastParent, lexicalNode, actions }) {
+    actions.appendToParent(mdastParent, {
+      type: "paragraph",
+      children: [
+        {
+          type: "image",
+          url: lexicalNode.getSrc(),
+          alt: lexicalNode.getAltText(),
+          title: lexicalNode.getTitle()
+        }
+      ]
     });
   }
 };
@@ -2220,6 +2230,9 @@ const [EditorSystem, EditorSystemType] = system((r) => {
   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");
+  });
   r.link(
     r.pipe(
       createEditorSubscription,
@@ -2394,6 +2407,26 @@ const [EditorSystem, EditorSystemType] = system((r) => {
       COMMAND_PRIORITY_LOW
     );
   });
+  r.pub(createEditorSubscription, (theEditor) => {
+    return theEditor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        var _a;
+        let cbPayload = Array.from(((_a = event.clipboardData) == null ? void 0 : _a.items) || []);
+        cbPayload = cbPayload.filter((i) => /image/.test(i.type));
+        if (!cbPayload.length || cbPayload.length === 0) {
+          return false;
+        }
+        const imageUploadHandlerValue = r.getValue(imageUploadHandler);
+        const theImage = cbPayload[0].getAsFile();
+        imageUploadHandlerValue(theImage).then((url) => r.pub(insertImage, url)).catch((e) => {
+          throw e;
+        });
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  });
   return {
     editor,
     activeEditor,
@@ -2418,7 +2451,8 @@ const [EditorSystem, EditorSystemType] = system((r) => {
     lexicalConvertOptions,
     lexicalNodes,
     imageAutocompleteSuggestions,
-    markdownSource
+    markdownSource,
+    imageUploadHandler
   };
 }, []);
 const [JsxSystem, JsxSystemType] = system((r) => {
@@ -2876,6 +2910,7 @@ const {
       lexicalNodes: "lexicalNodes"
     },
     optional: {
+      imageUploadHandler: "imageUploadHandler",
       editorRootElementRef: "editorRootElementRef",
       viewMode: "viewMode",
       linkAutocompleteSuggestions: "linkAutocompleteSuggestions",
@@ -2924,61 +2959,65 @@ const SvgArrowDropDown = (props) => /* @__PURE__ */ React.createElement("svg", {
   maskType: "alpha"
 } }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m12 15-5-5h10l-5 5Z" })));
 const DropDownIcon = SvgArrowDropDown;
-const editorRoot = "_editorRoot_gm91f_47";
-const editorWrapper = "_editorWrapper_gm91f_141";
-const nestedListItem = "_nestedListItem_gm91f_145";
-const toolbarRoot = "_toolbarRoot_gm91f_149";
-const toolbarModeSwitch = "_toolbarModeSwitch_gm91f_170";
-const toolbarToggleItem = "_toolbarToggleItem_gm91f_179";
-const toolbarGroupOfGroups = "_toolbarGroupOfGroups_gm91f_189";
-const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_gm91f_193";
-const toolbarButton = "_toolbarButton_gm91f_207";
-const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_gm91f_236";
-const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_gm91f_237";
-const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_gm91f_238";
-const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_gm91f_252";
-const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_gm91f_253";
-const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_gm91f_286";
-const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_gm91f_292";
-const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_gm91f_315";
-const contentEditable = "_contentEditable_gm91f_319";
-const sandpackWrapper = "_sandpackWrapper_gm91f_327";
-const frontmatterWrapper = "_frontmatterWrapper_gm91f_331";
-const frontmatterToggleButton = "_frontmatterToggleButton_gm91f_341";
-const frontmatterEditorTable = "_frontmatterEditorTable_gm91f_349";
-const iconButton = "_iconButton_gm91f_367";
-const frontmatterInput = "_frontmatterInput_gm91f_373";
-const primaryButton = "_primaryButton_gm91f_388";
-const linkDialogEditForm = "_linkDialogEditForm_gm91f_398";
-const linkDialogInputContainer = "_linkDialogInputContainer_gm91f_404";
-const linkDialogInputWrapper = "_linkDialogInputWrapper_gm91f_410";
-const linkDialogInput = "_linkDialogInput_gm91f_404";
-const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_gm91f_440";
-const linkDialogAnchor = "_linkDialogAnchor_gm91f_485";
-const linkDialogPopoverContent = "_linkDialogPopoverContent_gm91f_499";
-const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_gm91f_499";
-const dialogContent = "_dialogContent_gm91f_499";
-const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_gm91f_513";
-const tooltipContent = "_tooltipContent_gm91f_535";
-const actionButton = "_actionButton_gm91f_549";
-const primaryActionButton = "_primaryActionButton_gm91f_555";
-const tableEditor = "_tableEditor_gm91f_564";
-const toolCell = "_toolCell_gm91f_575";
-const tableColumnEditorTrigger = "_tableColumnEditorTrigger_gm91f_592";
-const tableRowEditorTrigger = "_tableRowEditorTrigger_gm91f_592";
-const addRowButton = "_addRowButton_gm91f_592";
-const addColumnButton = "_addColumnButton_gm91f_592";
-const tableColumnEditorToolbar = "_tableColumnEditorToolbar_gm91f_626";
-const toggleGroupRoot = "_toggleGroupRoot_gm91f_638";
-const tableToolsColumn = "_tableToolsColumn_gm91f_655";
-const leftAlignedCell = "_leftAlignedCell_gm91f_663";
-const rightAlignedCell = "_rightAlignedCell_gm91f_667";
-const centeredCell = "_centeredCell_gm91f_671";
-const dialogOverlay = "_dialogOverlay_gm91f_699";
-const overlayShow = "_overlayShow_gm91f_1";
-const contentShow = "_contentShow_gm91f_1";
+const editorRoot = "_editorRoot_2nk92_47";
+const dropZone = "_dropZone_2nk92_141";
+const editorWrapper = "_editorWrapper_2nk92_149";
+const nestedListItem = "_nestedListItem_2nk92_153";
+const toolbarRoot = "_toolbarRoot_2nk92_157";
+const toolbarModeSwitch = "_toolbarModeSwitch_2nk92_178";
+const toolbarToggleItem = "_toolbarToggleItem_2nk92_187";
+const toolbarGroupOfGroups = "_toolbarGroupOfGroups_2nk92_197";
+const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_2nk92_201";
+const toolbarButton = "_toolbarButton_2nk92_215";
+const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_2nk92_244";
+const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_2nk92_245";
+const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_2nk92_246";
+const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_2nk92_260";
+const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_2nk92_261";
+const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_2nk92_294";
+const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_2nk92_300";
+const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_2nk92_323";
+const contentEditable = "_contentEditable_2nk92_327";
+const sandpackWrapper = "_sandpackWrapper_2nk92_335";
+const frontmatterWrapper = "_frontmatterWrapper_2nk92_339";
+const frontmatterToggleButton = "_frontmatterToggleButton_2nk92_349";
+const frontmatterEditorTable = "_frontmatterEditorTable_2nk92_357";
+const iconButton = "_iconButton_2nk92_375";
+const frontmatterInput = "_frontmatterInput_2nk92_381";
+const primaryButton = "_primaryButton_2nk92_396";
+const linkDialogEditForm = "_linkDialogEditForm_2nk92_406";
+const linkDialogInputContainer = "_linkDialogInputContainer_2nk92_412";
+const linkDialogInputWrapper = "_linkDialogInputWrapper_2nk92_418";
+const linkDialogInput = "_linkDialogInput_2nk92_412";
+const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_2nk92_448";
+const linkDialogAnchor = "_linkDialogAnchor_2nk92_493";
+const linkDialogPopoverContent = "_linkDialogPopoverContent_2nk92_507";
+const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_2nk92_507";
+const dialogContent = "_dialogContent_2nk92_507";
+const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_2nk92_521";
+const tooltipContent = "_tooltipContent_2nk92_543";
+const actionButton = "_actionButton_2nk92_557";
+const primaryActionButton = "_primaryActionButton_2nk92_563";
+const tableEditor = "_tableEditor_2nk92_572";
+const toolCell = "_toolCell_2nk92_583";
+const tableColumnEditorTrigger = "_tableColumnEditorTrigger_2nk92_600";
+const tableRowEditorTrigger = "_tableRowEditorTrigger_2nk92_600";
+const addRowButton = "_addRowButton_2nk92_600";
+const addColumnButton = "_addColumnButton_2nk92_600";
+const tableColumnEditorToolbar = "_tableColumnEditorToolbar_2nk92_634";
+const toggleGroupRoot = "_toggleGroupRoot_2nk92_646";
+const tableToolsColumn = "_tableToolsColumn_2nk92_663";
+const leftAlignedCell = "_leftAlignedCell_2nk92_671";
+const rightAlignedCell = "_rightAlignedCell_2nk92_675";
+const centeredCell = "_centeredCell_2nk92_679";
+const dialogOverlay = "_dialogOverlay_2nk92_707";
+const overlayShow = "_overlayShow_2nk92_1";
+const contentShow = "_contentShow_2nk92_1";
+const focusedImage = "_focusedImage_2nk92_749";
+const imageWrapper = "_imageWrapper_2nk92_753";
 const styles = {
   editorRoot,
+  dropZone,
   editorWrapper,
   nestedListItem,
   toolbarRoot,
@@ -3030,7 +3069,9 @@ const styles = {
   centeredCell,
   dialogOverlay,
   overlayShow,
-  contentShow
+  contentShow,
+  focusedImage,
+  imageWrapper
 };
 createCommand();
 const MAX_SUGGESTIONS$1 = 20;
@@ -3675,23 +3716,191 @@ const RichTextButtonSet = () => {
   const [toolbarComponents] = useEmitterValues("toolbarComponents");
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toolbarComponents.map((Component, index2) => /* @__PURE__ */ React__default.createElement(Component, { key: index2 })));
 };
+const getDOMSelection = (targetWindow) => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
+const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
+const ImagesPlugin = () => {
+  const [editor] = useLexicalComposerContext();
+  const [imageUploadHandler] = useEmitterValues("imageUploadHandler");
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_IMAGE_COMMAND,
+        (payload) => {
+          const imageNode = $createImageNode(payload);
+          $insertNodes([imageNode]);
+          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+          }
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+      editor.registerCommand(
+        DRAGSTART_COMMAND,
+        (event) => {
+          return onDragStart(event);
+        },
+        COMMAND_PRIORITY_HIGH
+      ),
+      editor.registerCommand(
+        DRAGOVER_COMMAND,
+        (event) => {
+          return onDragover(event);
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        DROP_COMMAND,
+        (event) => {
+          return onDrop(event, editor, imageUploadHandler);
+        },
+        COMMAND_PRIORITY_HIGH
+      )
+    );
+  }, [editor, imageUploadHandler]);
+  return null;
+};
+const TRANSPARENT_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+const img = document.createElement("img");
+img.src = TRANSPARENT_IMAGE;
+function onDragStart(event) {
+  const node = getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  const dataTransfer = event.dataTransfer;
+  if (!dataTransfer) {
+    return false;
+  }
+  dataTransfer.setData("text/plain", "_");
+  dataTransfer.setDragImage(img, 0, 0);
+  dataTransfer.setData(
+    "application/x-lexical-drag",
+    JSON.stringify({
+      data: {
+        altText: node.__altText,
+        title: node.__title,
+        key: node.getKey(),
+        src: node.__src
+      },
+      type: "image"
+    })
+  );
+  return true;
+}
+function onDragover(event) {
+  var _a;
+  let cbPayload = Array.from(((_a = event.dataTransfer) == null ? void 0 : _a.items) || []);
+  cbPayload = cbPayload.filter((i) => /image/.test(i.type));
+  if (cbPayload.length > 0) {
+    event.preventDefault();
+    return true;
+  }
+  const node = getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  if (!canDropImage(event)) {
+    event.preventDefault();
+  }
+  return true;
+}
+function onDrop(event, editor, imageUploadHandler) {
+  var _a;
+  let cbPayload = Array.from(((_a = event.dataTransfer) == null ? void 0 : _a.items) || []);
+  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: ""
+      });
+    }).catch((e) => {
+      throw e;
+    });
+    return true;
+  }
+  const node = getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  const data = getDragImageData(event);
+  if (!data) {
+    return false;
+  }
+  event.preventDefault();
+  if (canDropImage(event)) {
+    const range = getDragSelection(event);
+    node.remove();
+    const rangeSelection = $createRangeSelection();
+    if (range !== null && range !== void 0) {
+      rangeSelection.applyDOMRange(range);
+    }
+    $setSelection(rangeSelection);
+    editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
+  }
+  return true;
+}
+function getImageNodeInSelection() {
+  const selection = $getSelection();
+  if (!$isNodeSelection(selection)) {
+    return null;
+  }
+  const nodes = selection.getNodes();
+  const node = nodes[0];
+  return $isImageNode(node) ? node : null;
+}
+function getDragImageData(event) {
+  var _a;
+  const dragData = (_a = event.dataTransfer) == null ? void 0 : _a.getData("application/x-lexical-drag");
+  if (!dragData) {
+    return null;
+  }
+  const { type, data } = JSON.parse(dragData);
+  if (type !== "image") {
+    return null;
+  }
+  return data;
+}
+function canDropImage(event) {
+  const target = event.target;
+  return !!(target && target instanceof HTMLElement && target.parentElement);
+}
+function getDragSelection(event) {
+  let range;
+  const target = event.target;
+  const targetWindow = target == null ? null : target.nodeType === 9 ? target.defaultView : target.ownerDocument.defaultView;
+  const domSelection = getDOMSelection(targetWindow);
+  if (document.caretRangeFromPoint) {
+    range = document.caretRangeFromPoint(event.clientX, event.clientY);
+  } else if (event.rangeParent && domSelection !== null) {
+    domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+    range = domSelection.getRangeAt(0);
+  } else {
+    throw Error(`Cannot get the selection when dragging`);
+  }
+  return range;
+}
 const LazyFrontmatterEditor = React__default.lazy(
-  () => import("./FrontmatterEditor-ecc0250f.js").then((module) => ({ default: module.FrontmatterEditor }))
+  () => import("./FrontmatterEditor-2362b83d.js").then((module) => ({ default: module.FrontmatterEditor }))
 );
-const LazyJsxEditor = React__default.lazy(() => import("./JsxEditor-13fe2ef4.js").then((module) => ({ default: module.JsxEditor })));
+const LazyJsxEditor = React__default.lazy(() => import("./JsxEditor-833132d2.js").then((module) => ({ default: module.JsxEditor })));
 const LazySandpackEditor = React__default.lazy(
-  () => import("./SandpackEditor-4069c473.js").then((module) => ({ default: module.SandpackEditor }))
+  () => import("./SandpackEditor-8562657d.js").then((module) => ({ default: module.SandpackEditor }))
 );
 const LazyCodeBlockEditor = React__default.lazy(
-  () => import("./CodeBlockEditor-85652bef.js").then((module) => ({ default: module.CodeBlockEditor }))
+  () => import("./CodeBlockEditor-b4eb4a95.js").then((module) => ({ default: module.CodeBlockEditor }))
 );
-const LazyTableEditor = React__default.lazy(() => import("./TableEditor-fe1c1548.js").then((module) => ({ default: module.TableEditor })));
+const LazyTableEditor = React__default.lazy(() => import("./TableEditor-e1050552.js").then((module) => ({ default: module.TableEditor })));
+const LazyImageEditor = React__default.lazy(() => import("./ImageEditor-3afec501.js").then((module) => ({ default: module.ImageEditor })));
 const defaultNodeDecorators = {
   FrontmatterEditor: LazyFrontmatterEditor,
   JsxEditor: LazyJsxEditor,
   SandpackEditor: LazySandpackEditor,
   CodeBlockEditor: LazyCodeBlockEditor,
-  TableEditor: LazyTableEditor
+  TableEditor: LazyTableEditor,
+  ImageEditor: LazyImageEditor
 };
 const defaultToolbarComponents = [
   BoldItalicUnderlineButtons,
@@ -3761,6 +3970,7 @@ const MDXEditor = React__default.forwardRef(
     className,
     contentEditableClassName,
     toolbarComponents = defaultToolbarComponents,
+    imageUploadHandler,
     markdownParseOptions: {
       syntaxExtensions = Object.values(defaultSyntaxExtensions),
       mdastExtensions = Object.values(defaultMdastExtensions),
@@ -3793,7 +4003,9 @@ const MDXEditor = React__default.forwardRef(
             nodeDecoratorComponents: defaultNodeDecorators
           },
           nodes: lexicalNodes,
-          onError: (error) => console.error(error)
+          onError: (error) => {
+            throw error;
+          }
         }
       },
       /* @__PURE__ */ React__default.createElement(
@@ -3819,7 +4031,8 @@ const MDXEditor = React__default.forwardRef(
             toMarkdownOptions,
             toMarkdownExtensions
           },
-          lexicalNodes
+          lexicalNodes,
+          imageUploadHandler
         },
         /* @__PURE__ */ React__default.createElement(ToolbarPlugin, null),
         /* @__PURE__ */ React__default.createElement(ViewModeToggler, null, /* @__PURE__ */ React__default.createElement(
@@ -3837,6 +4050,7 @@ const MDXEditor = React__default.forwardRef(
         /* @__PURE__ */ React__default.createElement(TabIndentationPlugin, null),
         /* @__PURE__ */ React__default.createElement(LinkDialogPlugin, null),
         /* @__PURE__ */ React__default.createElement(SharedHistoryPlugin, null),
+        /* @__PURE__ */ React__default.createElement(ImagesPlugin, null),
         /* @__PURE__ */ React__default.createElement(PatchedMarkdownShortcutPlugin, null),
         /* @__PURE__ */ React__default.createElement(MDXMethods, { mdxRef: ref })
       )
@@ -3859,7 +4073,7 @@ const MDXMethods = ({ mdxRef }) => {
   return null;
 };
 export {
-  $createAdmonitionNode as $,
+  $isImageNode as $,
   AdmonitionNode as A,
   CodeBlockNode as C,
   FrontmatterNode as F,
@@ -3869,15 +4083,15 @@ export {
   SharedHistoryPlugin as S,
   ToolbarComponents as T,
   usePublisher as a,
-  $isAdmonitionNode as b,
-  $createCodeBlockNode as c,
-  $isCodeBlockNode as d,
+  $createAdmonitionNode as b,
+  $isAdmonitionNode as c,
+  $createCodeBlockNode as d,
   exportLexicalTreeToMdast as e,
-  $createFrontmatterNode as f,
-  $isFrontmatterNode as g,
-  $createImageNode as h,
+  $isCodeBlockNode as f,
+  $createFrontmatterNode as g,
+  $isFrontmatterNode as h,
   importMdastTreeToLexical as i,
-  $isImageNode as j,
+  $createImageNode as j,
   $createJsxNode as k,
   $isJsxNode as l,
   SandpackNode as m,