@mdxeditor/editor 3.0.1 → 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/dist/style.css

@@ -490,7 +490,8 @@
     padding-inline-start: var(--spacing-4);
   }
 
-._toolbarModeSwitch_r5eta_177 ._toolbarToggleItem_r5eta_187:active, ._toolbarModeSwitch_r5eta_177 ._toolbarToggleItem_r5eta_187[data-state=on] {
+._toolbarModeSwitch_r5eta_177 ._toolbarToggleItem_r5eta_187:active,
+    ._toolbarModeSwitch_r5eta_177 ._toolbarToggleItem_r5eta_187[data-state=on] {
       background-color: var(--baseBorder);
     }
 
@@ -499,17 +500,22 @@
   margin: 0 var(--spacing-1);
 }
 
-._toolbarToggleSingleGroup_r5eta_203:first-of-type ._toolbarToggleItem_r5eta_187:only-child, ._toolbarToggleSingleGroup_r5eta_203:only-child ._toolbarToggleItem_r5eta_187:first-child, ._toolbarModeSwitch_r5eta_177 ._toolbarToggleItem_r5eta_187:first-child {
+._toolbarToggleSingleGroup_r5eta_203:first-of-type ._toolbarToggleItem_r5eta_187:only-child,
+._toolbarToggleSingleGroup_r5eta_203:only-child ._toolbarToggleItem_r5eta_187:first-child,
+._toolbarModeSwitch_r5eta_177 ._toolbarToggleItem_r5eta_187:first-child {
   border-top-left-radius: var(--radius-base);
   border-bottom-left-radius: var(--radius-base);
 }
 
-._toolbarToggleSingleGroup_r5eta_203:last-of-type ._toolbarToggleItem_r5eta_187:only-child, ._toolbarToggleSingleGroup_r5eta_203:only-child ._toolbarToggleItem_r5eta_187:last-child, ._toolbarModeSwitch_r5eta_177 ._toolbarToggleItem_r5eta_187:last-child {
+._toolbarToggleSingleGroup_r5eta_203:last-of-type ._toolbarToggleItem_r5eta_187:only-child,
+._toolbarToggleSingleGroup_r5eta_203:only-child ._toolbarToggleItem_r5eta_187:last-child,
+._toolbarModeSwitch_r5eta_177 ._toolbarToggleItem_r5eta_187:last-child {
   border-top-right-radius: var(--radius-base);
   border-bottom-right-radius: var(--radius-base);
 }
 
-._toolbarToggleItem_r5eta_187, ._toolbarButton_r5eta_218 {
+._toolbarToggleItem_r5eta_187,
+._toolbarButton_r5eta_218 {
   border: 0;
   background-color: transparent;
   font-size: inherit;
@@ -534,7 +540,10 @@
     transform: translate(1px, 1px);
   }
 
-._toolbarToggleItem_r5eta_187[data-state=on], ._toolbarButton_r5eta_218[data-state=on], ._toolbarToggleItem_r5eta_187:active, ._toolbarButton_r5eta_218:active {
+._toolbarToggleItem_r5eta_187[data-state=on],
+  ._toolbarButton_r5eta_218[data-state=on],
+  ._toolbarToggleItem_r5eta_187:active,
+  ._toolbarButton_r5eta_218:active {
     color: var(--baseTextContrast);
     background-color: var(--baseBgActive);
   }
@@ -556,7 +565,10 @@
   white-space: nowrap;
 }
 
-._toolbarNodeKindSelectContainer_r5eta_258, ._toolbarButtonDropdownContainer_r5eta_259, ._toolbarCodeBlockLanguageSelectContent_r5eta_260, ._selectContainer_r5eta_261 {
+._toolbarNodeKindSelectContainer_r5eta_258,
+._toolbarButtonDropdownContainer_r5eta_259,
+._toolbarCodeBlockLanguageSelectContent_r5eta_260,
+._selectContainer_r5eta_261 {
   filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.20));
   z-index: 3;
   width: var(--spacing-36);
@@ -574,7 +586,9 @@
     border-top-right-radius: var(--radius-base);
   }
 
-._toolbarNodeKindSelectTrigger_r5eta_279, ._toolbarButtonSelectTrigger_r5eta_280, ._selectTrigger_r5eta_281 {
+._toolbarNodeKindSelectTrigger_r5eta_279,
+._toolbarButtonSelectTrigger_r5eta_280,
+._selectTrigger_r5eta_281 {
   border: 0;
   background-color: transparent;
   display: flex;
@@ -608,11 +622,13 @@
   padding-block: var(--spacing-0_5);
 }
 
-._toolbarCodeBlockLanguageSelectTrigger_r5eta_315, ._toolbarCodeBlockLanguageSelectContent_r5eta_260 {
+._toolbarCodeBlockLanguageSelectTrigger_r5eta_315,
+._toolbarCodeBlockLanguageSelectContent_r5eta_260 {
   width: var(--spacing-48);
 }
 
-._toolbarNodeKindSelectItem_r5eta_320, ._selectItem_r5eta_274 {
+._toolbarNodeKindSelectItem_r5eta_320,
+._selectItem_r5eta_274 {
   cursor: default;
   display: flex;
   padding: var(--spacing-2);
@@ -636,7 +652,8 @@
     border-bottom-right-radius: var(--radius-base);
   }
 
-._toolbarNodeKindSelectDropdownArrow_r5eta_345, ._selectDropdownArrow_r5eta_346 {
+._toolbarNodeKindSelectDropdownArrow_r5eta_345,
+._selectDropdownArrow_r5eta_346 {
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -773,11 +790,13 @@
     color: var(--accentText);
   }
 
-._iconButton_r5eta_416:disabled, ._iconButton_r5eta_416:disabled:hover {
+._iconButton_r5eta_416:disabled,
+  ._iconButton_r5eta_416:disabled:hover {
     color: var(--baseLine);
   }
 
-._primaryButton_r5eta_464, ._secondaryButton_r5eta_465 {
+._primaryButton_r5eta_464,
+._secondaryButton_r5eta_465 {
   border: 0;
   background-color: transparent;
   font-size: inherit;
@@ -860,7 +879,8 @@
     padding-right: var(--spacing-2);
   }
 
-._linkDialogInput_r5eta_506, ._dialogInput_r5eta_533 {
+._linkDialogInput_r5eta_506,
+._dialogInput_r5eta_533 {
   border: 0;
   background-color: transparent;
   font-size: inherit;
@@ -897,7 +917,9 @@
     visibility: hidden;
   }
 
-._linkDialogPopoverContent_r5eta_558, ._tableColumnEditorPopoverContent_r5eta_559, ._dialogContent_r5eta_560 {
+._linkDialogPopoverContent_r5eta_558,
+._tableColumnEditorPopoverContent_r5eta_559,
+._dialogContent_r5eta_560 {
   filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.20));
   display: flex;
   align-items: center;
@@ -1024,7 +1046,8 @@
     transform: translate(1px, 1px);
   }
 
-._actionButton_r5eta_652[data-state=on], ._actionButton_r5eta_652:active {
+._actionButton_r5eta_652[data-state=on],
+  ._actionButton_r5eta_652:active {
     background-color: var(--baseBgHover);
     color: var(--baseTextContrast);
   }
@@ -1051,7 +1074,8 @@
     text-align: right;
   }
 
-._tableEditor_r5eta_668>tbody>tr>td:not(._toolCell_r5eta_679), ._tableEditor_r5eta_668>tbody>tr>th:not(._toolCell_r5eta_679):not(:last-of-type) {
+._tableEditor_r5eta_668>tbody>tr>td:not(._toolCell_r5eta_679),
+  ._tableEditor_r5eta_668>tbody>tr>th:not(._toolCell_r5eta_679):not(:last-of-type) {
     border: 1px solid var(--baseBgActive);
     padding: var(--spacing-1) var(--spacing-2);
     white-space: normal;
@@ -1069,11 +1093,19 @@
       outline: solid 1px var(--baseSolid);
     }
 
-._tableEditor_r5eta_668 ._tableColumnEditorTrigger_r5eta_698, ._tableEditor_r5eta_668 ._tableRowEditorTrigger_r5eta_699, ._tableEditor_r5eta_668 ._addRowButton_r5eta_700, ._tableEditor_r5eta_668 ._addColumnButton_r5eta_701, ._tableEditor_r5eta_668 ._iconButton_r5eta_416 {
+._tableEditor_r5eta_668 ._tableColumnEditorTrigger_r5eta_698,
+  ._tableEditor_r5eta_668 ._tableRowEditorTrigger_r5eta_699,
+  ._tableEditor_r5eta_668 ._addRowButton_r5eta_700,
+  ._tableEditor_r5eta_668 ._addColumnButton_r5eta_701,
+  ._tableEditor_r5eta_668 ._iconButton_r5eta_416 {
     opacity: .15;
   }
 
-._tableEditor_r5eta_668:hover ._tableColumnEditorTrigger_r5eta_698, ._tableEditor_r5eta_668:hover ._tableRowEditorTrigger_r5eta_699, ._tableEditor_r5eta_668:hover ._addRowButton_r5eta_700, ._tableEditor_r5eta_668:hover ._addColumnButton_r5eta_701, ._tableEditor_r5eta_668:hover ._iconButton_r5eta_416 {
+._tableEditor_r5eta_668:hover ._tableColumnEditorTrigger_r5eta_698,
+    ._tableEditor_r5eta_668:hover ._tableRowEditorTrigger_r5eta_699,
+    ._tableEditor_r5eta_668:hover ._addRowButton_r5eta_700,
+    ._tableEditor_r5eta_668:hover ._addColumnButton_r5eta_701,
+    ._tableEditor_r5eta_668:hover ._iconButton_r5eta_416 {
       opacity: 0.3;
     }
 
@@ -1118,7 +1150,8 @@
     transform: translate(1px, 1px);
   }
 
-._tableColumnEditorTrigger_r5eta_698[data-state=on], ._tableColumnEditorTrigger_r5eta_698:active {
+._tableColumnEditorTrigger_r5eta_698[data-state=on],
+  ._tableColumnEditorTrigger_r5eta_698:active {
     background-color: var(--baseBgHover);
     color: var(--baseTextContrast);
   }
@@ -1156,7 +1189,8 @@
     transform: translate(1px, 1px);
   }
 
-._tableColumnEditorToolbar_r5eta_742>button[data-state=on], ._tableColumnEditorToolbar_r5eta_742>button:active {
+._tableColumnEditorToolbar_r5eta_742>button[data-state=on],
+  ._tableColumnEditorToolbar_r5eta_742>button:active {
     background-color: var(--baseBgHover);
     color: var(--baseTextContrast);
   }
@@ -1201,7 +1235,8 @@
   }
 
 
-._toggleGroupRoot_r5eta_756 button[data-state=on], ._toggleGroupRoot_r5eta_756 button:active {
+._toggleGroupRoot_r5eta_756 button[data-state=on],
+  ._toggleGroupRoot_r5eta_756 button:active {
     background-color: var(--baseBgHover);
     color: var(--baseTextContrast);
   }
@@ -1239,7 +1274,8 @@
   text-align: center;
 }
 
-._addColumnButton_r5eta_701, ._addRowButton_r5eta_700 {
+._addColumnButton_r5eta_701,
+._addRowButton_r5eta_700 {
   border: 0;
   background-color: transparent;
   font-size: inherit;
@@ -1268,7 +1304,10 @@
     transform: translate(1px, 1px);
   }
 
-._addColumnButton_r5eta_701[data-state=on], ._addRowButton_r5eta_700[data-state=on], ._addColumnButton_r5eta_701:active, ._addRowButton_r5eta_700:active {
+._addColumnButton_r5eta_701[data-state=on],
+  ._addRowButton_r5eta_700[data-state=on],
+  ._addColumnButton_r5eta_701:active,
+  ._addRowButton_r5eta_700:active {
     background-color: var(--baseBgHover);
     color: var(--baseTextContrast);
   }
@@ -1302,7 +1341,8 @@
   opacity: 0.5;
 }
 
-._dialogContent_r5eta_560, ._largeDialogContent_r5eta_572 {
+._dialogContent_r5eta_560,
+._largeDialogContent_r5eta_572 {
   position: fixed;
   top: 50%;
   left: 50%;
@@ -1311,7 +1351,8 @@
   z-index: 52;
 }
 
-._dialogContent_r5eta_560:focus, ._largeDialogContent_r5eta_572:focus {
+._dialogContent_r5eta_560:focus,
+._largeDialogContent_r5eta_572:focus {
   outline: none;
 }
 
@@ -1675,7 +1716,8 @@ form._multiFieldForm_r5eta_1149 ._formField_r5eta_1155 label {
   position: relative;
 }
 
-._inputSizer_r5eta_1180::after, ._inputSizer_r5eta_1180 input {
+._inputSizer_r5eta_1180::after,
+  ._inputSizer_r5eta_1180 input {
     width: auto;
     min-width: 1rem;
     grid-area: 1 / 2;
@@ -2025,7 +2067,8 @@ form._multiFieldForm_r5eta_1149 ._formField_r5eta_1155 label {
   list-style-type: none;
 }
 
-._nestedListItem_1tncs_59:before, ._nestedListItem_1tncs_59:after {
+._nestedListItem_1tncs_59:before,
+._nestedListItem_1tncs_59:after {
   display: none;
 }
 
@@ -2033,7 +2076,8 @@ form._multiFieldForm_r5eta_1149 ._formField_r5eta_1155 label {
   margin: var(--spacing-2) 0;
 }
 
-._listItemChecked_1tncs_73, ._listItemUnchecked_1tncs_74 {
+._listItemChecked_1tncs_73,
+._listItemUnchecked_1tncs_74 {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -2048,7 +2092,8 @@ form._multiFieldForm_r5eta_1149 ._formField_r5eta_1155 label {
   text-decoration: line-through;
 }
 
-._listItemUnchecked_1tncs_74:before, ._listItemChecked_1tncs_73:before {
+._listItemUnchecked_1tncs_74:before,
+._listItemChecked_1tncs_73:before {
   content: '';
   width: var(--spacing-4);
   height: var(--spacing-4);
@@ -2060,12 +2105,14 @@ form._multiFieldForm_r5eta_1149 ._formField_r5eta_1155 label {
   position: absolute;
 }
 
-._listItemUnchecked_1tncs_74[dir='rtl']:before, ._listItemChecked_1tncs_73[dir='rtl']:before {
+._listItemUnchecked_1tncs_74[dir='rtl']:before,
+._listItemChecked_1tncs_73[dir='rtl']:before {
   left: auto;
   right: 0;
 }
 
-._listItemUnchecked_1tncs_74:focus:before, ._listItemChecked_1tncs_73:focus:before {
+._listItemUnchecked_1tncs_74:focus:before,
+._listItemChecked_1tncs_73:focus:before {
   box-shadow: 0 0 0 2px var(--accentBgActive);
   border-radius: var(--radius-small);
 }
@@ -2102,11 +2149,16 @@ form._multiFieldForm_r5eta_1149 ._formField_r5eta_1155 label {
   list-style-type: none;
 }
 
-._nestedListItem_1tncs_59:before, ._nestedListItem_1tncs_59:after {
+._nestedListItem_1tncs_59:before,
+._nestedListItem_1tncs_59:after {
   display: none;
 }
 
-._admonitionDanger_1tncs_151, ._admonitionInfo_1tncs_152, ._admonitionNote_1tncs_153, ._admonitionTip_1tncs_154, ._admonitionCaution_1tncs_155 {
+._admonitionDanger_1tncs_151,
+._admonitionInfo_1tncs_152,
+._admonitionNote_1tncs_153,
+._admonitionTip_1tncs_154,
+._admonitionCaution_1tncs_155 {
   padding: var(--spacing-2);
   margin-top: var(--spacing-2);
   margin-bottom: var(--spacing-2);

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -133,7 +133,6 @@
     "micromark-util-types": "^2.0.0",
     "multer": "1.4.5-lts.1",
     "postcss": "^8.4.24",
-    "postcss-extend": "^1.0.5",
     "postcss-mixins": "^9.0.4",
     "postcss-nesting": "^11.2.2",
     "prettier": "^3.1.1",