@mdxeditor/editor 3.0.2 → 3.0.3

package/dist/index.d.ts

@@ -291,6 +291,11 @@ export declare const applyListType$: NodeRef<"" | ListType>;
 
 /* Excluded from this release type: autoFocus$ */
 
+declare interface BaseImageParameters {
+    altText?: string;
+    title?: string;
+}
+
 /**
  * The type of the block that the current selection is in.
  * @group Core
@@ -984,7 +989,7 @@ export declare const disableImageSettingsButton$: NodeRef<boolean>;
 export declare type EditingImageDialogState = {
     type: 'editing';
     nodeKey: string;
-    initialValues: Omit<InsertImageParameters, 'file'>;
+    initialValues: Omit<SaveImageParameters, 'file'>;
 };
 
 /**
@@ -1056,6 +1061,10 @@ export declare type FallbackOption = {
     fallback: () => React_2.ReactNode;
 };
 
+declare interface FileImageParameters extends BaseImageParameters {
+    file: File;
+}
+
 /**
  * Fetches a value from the Lexical editor read cycle.
  * @group Utils
@@ -1384,12 +1393,7 @@ export declare const InsertImage: React_2.ForwardRefExoticComponent<Omit<Record<
 /**
  * @group Image
  */
-export declare interface InsertImageParameters {
-    src?: string;
-    altText?: string;
-    title?: string;
-    file: FileList;
-}
+export declare type InsertImageParameters = FileImageParameters | SrcImageParameters;
 
 /* Excluded from this release type: InsertImagePayload */
 
@@ -2387,7 +2391,15 @@ declare type SandpackProviderProps = React_2.ComponentProps<typeof SandpackProvi
  * Saves the data from the image dialog
  * @group Image
  */
-export declare const saveImage$: NodeRef<InsertImageParameters>;
+export declare const saveImage$: NodeRef<SaveImageParameters>;
+
+/**
+ * @group Image
+ */
+export declare interface SaveImageParameters extends BaseImageParameters {
+    src?: string;
+    file: FileList;
+}
 
 /**
  * A toolbar primitive you can use to build dropdowns, such as the block type select.
@@ -2503,6 +2515,10 @@ export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChan
 
 /* Excluded from this release type: SingleToggleGroup */
 
+declare interface SrcImageParameters extends BaseImageParameters {
+    src: string;
+}
+
 /**
  * An action that switches the link dialog from preview mode to edit mode.
  * @group Link Dialog

package/dist/plugins/image/index.js

@@ -1,6 +1,6 @@
 import { $wrapNodeInElement, mergeRegister } from "@lexical/utils";
-import { Signal, Cell, withLatestFrom, Action, mapTo, map } from "@mdxeditor/gurx";
-import { $getNodeByKey, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, DRAGSTART_COMMAND, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, COMMAND_PRIORITY_LOW, DROP_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_CRITICAL, createCommand, $createRangeSelection, $setSelection, $getSelection, $isNodeSelection } from "lexical";
+import { Signal, withLatestFrom, Cell, Action, mapTo, map } from "@mdxeditor/gurx";
+import { $insertNodes, $isRootOrShadowRoot, $createParagraphNode, $getNodeByKey, COMMAND_PRIORITY_EDITOR, DRAGSTART_COMMAND, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, COMMAND_PRIORITY_LOW, DROP_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_CRITICAL, createCommand, $createRangeSelection, $setSelection, $getSelection, $isNodeSelection } from "lexical";
 import { realmPlugin } from "../../RealmWithPlugins.js";
 import { CAN_USE_DOM } from "../../utils/detectMac.js";
 import { activeEditor$, createActiveEditorSubscription$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$ } from "../core/index.js";
@@ -8,7 +8,31 @@ import { ImageDialog } from "./ImageDialog.js";
 import { $createImageNode, ImageNode, $isImageNode } from "./ImageNode.js";
 import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
 import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "./MdastImageVisitor.js";
-const insertImage$ = Signal();
+const internalInsertImage$ = Signal((r) => {
+  r.sub(r.pipe(internalInsertImage$, withLatestFrom(activeEditor$)), ([values, theEditor]) => {
+    theEditor == null ? void 0 : theEditor.update(() => {
+      const imageNode = $createImageNode({ altText: values.altText ?? "", src: values.src, title: values.title ?? "" });
+      $insertNodes([imageNode]);
+      if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+        $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+      }
+    });
+  });
+});
+const insertImage$ = Signal((r) => {
+  r.sub(r.pipe(insertImage$, withLatestFrom(imageUploadHandler$)), ([values, imageUploadHandler]) => {
+    const handler = (src) => {
+      r.pub(internalInsertImage$, { ...values, src });
+    };
+    if ("file" in values) {
+      imageUploadHandler == null ? void 0 : imageUploadHandler(values.file).then(handler).catch((e) => {
+        throw e;
+      });
+    } else {
+      handler(values.src);
+    }
+  });
+});
 const imageAutocompleteSuggestions$ = Cell([]);
 const disableImageResize$ = Cell(false);
 const imageUploadHandler$ = Cell(null);
@@ -29,13 +53,7 @@ const imageDialogState$ = Cell(
           });
           r.pub(imageDialogState$, { type: "inactive" });
         } : (src) => {
-          theEditor == null ? void 0 : theEditor.update(() => {
-            const imageNode = $createImageNode({ altText: values.altText ?? "", src, title: values.title ?? "" });
-            $insertNodes([imageNode]);
-            if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
-              $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
-            }
-          });
+          r.pub(internalInsertImage$, { ...values, src });
           r.pub(imageDialogState$, { type: "inactive" });
         };
         if (values.file.length > 0) {

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",