@mdxeditor/editor 1.1.1 → 1.2.0

package/dist/directive-editors/AdmonitionDirectiveDescriptor.js

@@ -10,14 +10,12 @@ const AdmonitionDirectiveDescriptor = {
   },
   Editor({ mdastNode }) {
     const {
-      config: { theme },
-      focusEmitter
+      config: { theme }
     } = useNestedEditorContext();
     return /* @__PURE__ */ React__default.createElement("div", { className: theme.admonition[mdastNode.name] }, /* @__PURE__ */ React__default.createElement(
       NestedLexicalEditor,
       {
         block: true,
-        focusEmitter,
         getContent: (node) => node.children,
         getUpdatedMdastNode: (mdastNode2, children) => ({ ...mdastNode2, children })
       }

package/dist/plugins/core/PropertyPopover.js

@@ -10,10 +10,11 @@ const PropertyPopover = ({ title, properties, onChange }) => {
   return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, { open, onOpenChange: (v) => setOpen(v) }, /* @__PURE__ */ React__default.createElement(RadixPopover.Trigger, { className: styles.iconButton }, /* @__PURE__ */ React__default.createElement(SettingsIcon, { style: { display: "block" } })), /* @__PURE__ */ React__default.createElement(PopoverPortal, null, /* @__PURE__ */ React__default.createElement(PopoverContent, null, /* @__PURE__ */ React__default.createElement(
     "form",
     {
-      onSubmit: handleSubmit((values) => {
-        onChange(values);
+      onSubmit: (e) => {
+        void handleSubmit(onChange)(e);
         setOpen(false);
-      })
+        e.nativeEvent.stopImmediatePropagation();
+      }
     },
     /* @__PURE__ */ React__default.createElement("h3", { className: styles.propertyPanelTitle }, title, " Attributes"),
     /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", { className: styles.readOnlyColumnCell }, "Attribute"), /* @__PURE__ */ React__default.createElement("th", null, "Value"))), /* @__PURE__ */ React__default.createElement("tbody", null, Object.keys(properties).map((propName) => /* @__PURE__ */ React__default.createElement("tr", { key: propName }, /* @__PURE__ */ React__default.createElement("th", { className: styles.readOnlyColumnCell }, " ", propName, " "), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("input", { ...register(propName), className: styles.propertyEditorInput }))))), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 2 }, /* @__PURE__ */ React__default.createElement("div", { className: styles.buttonsFooter }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", className: styles.primaryButton }, "Save"), /* @__PURE__ */ React__default.createElement(

package/dist/plugins/core/ui/DownshiftAutoComplete.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Control, UseFormSetValue } from 'react-hook-form';
+export declare const DownshiftAutoComplete: React.FC<{
+    suggestions: string[];
+    control: Control<any, any>;
+    setValue: UseFormSetValue<any>;
+    placeholder: string;
+    inputName: string;
+    autofocus?: boolean;
+    initialInputValue: string;
+}>;

package/dist/plugins/core/ui/DownshiftAutoComplete.js

@@ -0,0 +1,66 @@
+import { useCombobox } from "downshift";
+import React__default from "react";
+import { Controller } from "react-hook-form";
+import styles from "../../../styles/ui.module.css.js";
+import DropDownIcon from "../../../icons/arrow_drop_down.svg.js";
+const MAX_SUGGESTIONS = 20;
+const DownshiftAutoComplete = ({ autofocus, suggestions, control, inputName, placeholder, initialInputValue, setValue }) => {
+  const [items, setItems] = React__default.useState(suggestions.slice(0, MAX_SUGGESTIONS));
+  const enableAutoComplete = suggestions.length > 0;
+  const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
+    initialInputValue,
+    onInputValueChange({ inputValue }) {
+      inputValue = (inputValue == null ? void 0 : inputValue.toLowerCase()) || "";
+      setValue(inputName, inputValue);
+      const matchingItems = [];
+      for (const suggestion of suggestions) {
+        if (suggestion.toLowerCase().includes(inputValue)) {
+          matchingItems.push(suggestion);
+          if (matchingItems.length >= MAX_SUGGESTIONS) {
+            break;
+          }
+        }
+      }
+      setItems(matchingItems);
+    },
+    items,
+    itemToString(item) {
+      return item ?? "";
+    }
+  });
+  const dropdownIsVisible = isOpen && items.length > 0;
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.downshiftAutocompleteContainer }, /* @__PURE__ */ React__default.createElement("div", { "data-visible-dropdown": dropdownIsVisible, className: styles.downshiftInputWrapper }, /* @__PURE__ */ React__default.createElement(
+    Controller,
+    {
+      name: inputName,
+      control,
+      render: ({ field }) => {
+        const downshiftSrcProps = getInputProps();
+        return /* @__PURE__ */ React__default.createElement(
+          "input",
+          {
+            ...downshiftSrcProps,
+            name: field.name,
+            placeholder,
+            className: styles.downshiftInput,
+            size: 30,
+            "data-editor-dialog": true,
+            autoFocus: autofocus
+          }
+        );
+      }
+    }
+  ), 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.downshiftAutocompleteContainer }, /* @__PURE__ */ React__default.createElement("ul", { ...getMenuProps(), "data-visible": dropdownIsVisible }, items.map((item, index) => /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      "data-selected": selectedItem === item,
+      "data-highlighted": highlightedIndex === index,
+      key: `${item}${index}`,
+      ...getItemProps({ item, index })
+    },
+    item
+  )))));
+};
+export {
+  DownshiftAutoComplete
+};

package/dist/plugins/diff-source/DiffViewer.js

@@ -28,7 +28,6 @@ const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
           orientation: "a-b",
           revertControls: "a-to-b",
           gutter: true,
-          collapseUnchanged: { margin: 2, minSize: 3 },
           a: {
             doc: oldMarkdown,
             extensions: [...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]

package/dist/plugins/frontmatter/FrontmatterEditor.js

@@ -46,20 +46,31 @@ const FrontmatterEditor = ({ yaml, onChange }) => {
     },
     [onChange, setFrontmatterDialogOpen, removeFrontmatter]
   );
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Dialog.Root, { open: frontmatterDialogOpen, onOpenChange: (open) => setFrontmatterDialogOpen(open) }, /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.largeDialogContent, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(Dialog.Title, { className: styles.dialogTitle }, "Edit document frontmatter"), /* @__PURE__ */ React__default.createElement("form", { onSubmit: handleSubmit(onSubmit), onReset: () => setFrontmatterDialogOpen(false) }, /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("colgroup", null, /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null)), /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, "Key"), /* @__PURE__ */ React__default.createElement("th", null, "Value"), /* @__PURE__ */ React__default.createElement("th", null))), /* @__PURE__ */ React__default.createElement("tbody", null, fields.map((item, index) => {
-    return /* @__PURE__ */ React__default.createElement("tr", { key: item.id }, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.key`, { required: true }), autofocusIfEmpty: true, readOnly })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.value`, { required: true }), readOnly })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("button", { type: "button", onClick: () => remove(index), className: styles.iconButton, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(DeleteIcon, null))));
-  })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(
-    "button",
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Dialog.Root, { open: frontmatterDialogOpen, onOpenChange: (open) => setFrontmatterDialogOpen(open) }, /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.largeDialogContent, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(Dialog.Title, { className: styles.dialogTitle }, "Edit document frontmatter"), /* @__PURE__ */ React__default.createElement(
+    "form",
     {
-      disabled: readOnly,
-      className: classNames(styles.primaryButton, styles.smallButton),
-      type: "button",
-      onClick: () => {
-        append({ key: "", value: "" });
-      }
+      onSubmit: (e) => {
+        void handleSubmit(onSubmit)(e);
+        e.nativeEvent.stopImmediatePropagation();
+      },
+      onReset: () => setFrontmatterDialogOpen(false)
     },
-    "Add entry"
-  ))))), /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "reset", className: styles.secondaryButton }, "Cancel"), /* @__PURE__ */ React__default.createElement("button", { type: "submit", className: styles.primaryButton }, "Save"))), /* @__PURE__ */ React__default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React__default.createElement("button", { className: styles.dialogCloseButton, "aria-label": "Close" }, /* @__PURE__ */ React__default.createElement(CloseIcon, null)))))));
+    /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("colgroup", null, /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null)), /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, "Key"), /* @__PURE__ */ React__default.createElement("th", null, "Value"), /* @__PURE__ */ React__default.createElement("th", null))), /* @__PURE__ */ React__default.createElement("tbody", null, fields.map((item, index) => {
+      return /* @__PURE__ */ React__default.createElement("tr", { key: item.id }, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.key`, { required: true }), autofocusIfEmpty: true, readOnly })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.value`, { required: true }), readOnly })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("button", { type: "button", onClick: () => remove(index), className: styles.iconButton, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(DeleteIcon, null))));
+    })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        disabled: readOnly,
+        className: classNames(styles.primaryButton, styles.smallButton),
+        type: "button",
+        onClick: () => {
+          append({ key: "", value: "" });
+        }
+      },
+      "Add entry"
+    ))))),
+    /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", className: styles.primaryButton }, "Save"), /* @__PURE__ */ React__default.createElement("button", { type: "reset", className: styles.secondaryButton }, "Cancel"))
+  ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React__default.createElement("button", { className: styles.dialogCloseButton, "aria-label": "Close" }, /* @__PURE__ */ React__default.createElement(CloseIcon, null)))))));
 };
 const TableInput = React__default.forwardRef(({ className, autofocusIfEmpty: _, ...props }, ref) => {
   return /* @__PURE__ */ React__default.createElement("input", { className: classNames(styles.propertyEditorInput, className), ...props, ref });

package/dist/plugins/image/ImageDialog.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ImageDialog: React.FC;

package/dist/plugins/image/ImageDialog.js

@@ -0,0 +1,68 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import classNames from "classnames";
+import React__default from "react";
+import { useForm } from "react-hook-form";
+import styles from "../../styles/ui.module.css.js";
+import { corePluginHooks } from "../core/index.js";
+import { imagePluginHooks } from "./index.js";
+import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
+const ImageDialog = () => {
+  const [imageAutocompleteSuggestions, state] = imagePluginHooks.useEmitterValues("imageAutocompleteSuggestions", "imageDialogState");
+  const saveImage = imagePluginHooks.usePublisher("saveImage");
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const closeImageDialog = imagePluginHooks.usePublisher("closeImageDialog");
+  const { register, handleSubmit, control, setValue, reset } = useForm({
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    values: state.type === "editing" ? state.initialValues : {}
+  });
+  return /* @__PURE__ */ React__default.createElement(
+    Dialog.Root,
+    {
+      open: state.type !== "inactive",
+      onOpenChange: (open) => {
+        if (!open) {
+          closeImageDialog(true);
+          reset({ src: "", title: "", altText: "" });
+        }
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(
+      Dialog.Content,
+      {
+        className: styles.dialogContent,
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        "form",
+        {
+          onSubmit: (e) => {
+            void handleSubmit(saveImage)(e);
+            reset({ src: "", title: "", altText: "" });
+            e.nativeEvent.stopImmediatePropagation();
+          },
+          className: styles.multiFieldForm
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "file" }, "Upload an image from your device:"), /* @__PURE__ */ React__default.createElement("input", { type: "file", ...register("file") })),
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "src" }, "Or add an image from an URL:"), /* @__PURE__ */ React__default.createElement(
+          DownshiftAutoComplete,
+          {
+            initialInputValue: state.type === "editing" ? state.initialValues.src || "" : "",
+            inputName: "src",
+            suggestions: imageAutocompleteSuggestions,
+            setValue,
+            control,
+            placeholder: "Select or paste an image src"
+          }
+        )),
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "alt" }, "Alt:"), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("altText"), className: styles.textInput })),
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "title" }, "Title:"), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("title"), className: styles.textInput })),
+        /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", title: "Save", "aria-label": "Save", className: classNames(styles.primaryButton) }, "Save"), /* @__PURE__ */ React__default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React__default.createElement("button", { type: "reset", title: "Cancel", "aria-label": "Cancel", className: classNames(styles.secondaryButton) }, "Cancel")))
+      )
+    ))
+  );
+};
+export {
+  ImageDialog
+};

package/dist/plugins/image/ImageEditor.d.ts

@@ -2,8 +2,9 @@
 export interface ImageEditorProps {
     nodeKey: string;
     src: string;
+    alt?: string;
     title?: string;
     width: number | 'inherit';
     height: number | 'inherit';
 }
-export declare function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorProps): JSX.Element | null;
+export declare function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEditorProps): JSX.Element | null;

package/dist/plugins/image/ImageEditor.js

@@ -2,12 +2,13 @@ import React__default from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext.js";
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection.js";
 import { mergeRegister } from "@lexical/utils";
+import classNames from "classnames";
 import { $isNodeSelection, $getSelection, $getNodeByKey, $setSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND } from "lexical";
+import { imagePluginHooks } from "./index.js";
+import SettingsIcon from "../../icons/settings.svg.js";
 import styles from "../../styles/ui.module.css.js";
-import classNames from "classnames";
 import { $isImageNode } from "./ImageNode.js";
 import ImageResizer from "./ImageResizer.js";
-import { imagePluginHooks } from "./index.js";
 const imageCache = /* @__PURE__ */ new Set();
 function useSuspenseImage(src) {
   if (!imageCache.has(src)) {
@@ -23,6 +24,7 @@ function useSuspenseImage(src) {
 }
 function LazyImage({
   title,
+  alt,
   className,
   imageRef,
   src,
@@ -30,9 +32,21 @@ function LazyImage({
   height
 }) {
   useSuspenseImage(src);
-  return /* @__PURE__ */ React__default.createElement("img", { className: className || void 0, src, title, ref: imageRef, draggable: "false", width, height });
+  return /* @__PURE__ */ React__default.createElement(
+    "img",
+    {
+      className: className || void 0,
+      alt,
+      src,
+      title,
+      ref: imageRef,
+      draggable: "false",
+      width,
+      height
+    }
+  );
 }
-function ImageEditor({ src, title, nodeKey, width, height }) {
+function ImageEditor({ src, title, alt, nodeKey, width, height }) {
   const imageRef = React__default.useRef(null);
   const buttonRef = React__default.useRef(null);
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
@@ -43,6 +57,7 @@ function ImageEditor({ src, title, nodeKey, width, height }) {
   const [disableImageResize] = imagePluginHooks.useEmitterValues("disableImageResize");
   const [imagePreviewHandler] = imagePluginHooks.useEmitterValues("imagePreviewHandler");
   const [imageSource, setImageSource] = React__default.useState(null);
+  const openEditImageDialog = imagePluginHooks.usePublisher("openEditImageDialog");
   const onDelete = React__default.useCallback(
     (payload) => {
       if (isSelected && $isNodeSelection($getSelection())) {
@@ -183,9 +198,27 @@ function ImageEditor({ src, title, nodeKey, width, height }) {
       }),
       src: imageSource,
       title: title || "",
+      alt: alt || "",
       imageRef
     }
-  )), draggable && isFocused && !disableImageResize && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd }))) : null;
+  )), draggable && isFocused && !disableImageResize && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd }), /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: classNames(styles.iconButton, styles.editImageButton),
+      title: "Edit image",
+      onClick: () => {
+        openEditImageDialog({
+          nodeKey,
+          initialValues: {
+            src: imageSource,
+            title: title || "",
+            altText: alt || ""
+          }
+        });
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(SettingsIcon, null)
+  ))) : null;
 }
 export {
   ImageEditor

package/dist/plugins/image/ImageNode.d.ts

@@ -39,6 +39,8 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     getWidth(): 'inherit' | number;
     hasExplicitDimensions(): boolean;
     setTitle(title: string | undefined): void;
+    setSrc(src: string): void;
+    setAltText(altText: string | undefined): void;
     decorate(_parentEditor: LexicalEditor): JSX.Element;
 }
 /**

package/dist/plugins/image/ImageNode.js

@@ -30,7 +30,7 @@ class ImageNode extends DecoratorNode {
     this.__height = height || "inherit";
   }
   static getType() {
-    return "image";
+    return "icage";
   }
   static clone(node) {
     return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__key);
@@ -118,8 +118,24 @@ class ImageNode extends DecoratorNode {
   setTitle(title) {
     this.getWritable().__title = title;
   }
+  setSrc(src) {
+    this.getWritable().__src = src;
+  }
+  setAltText(altText) {
+    this.getWritable().__altText = altText ?? "";
+  }
   decorate(_parentEditor) {
-    return /* @__PURE__ */ React__default.createElement(ImageEditor, { src: this.getSrc(), title: this.getTitle(), nodeKey: this.getKey(), width: this.__width, height: this.__height });
+    return /* @__PURE__ */ React__default.createElement(
+      ImageEditor,
+      {
+        src: this.getSrc(),
+        title: this.getTitle(),
+        nodeKey: this.getKey(),
+        width: this.__width,
+        height: this.__height,
+        alt: this.__altText
+      }
+    );
   }
 }
 function $createImageNode(options) {

package/dist/plugins/image/index.d.ts

@@ -15,6 +15,23 @@ import { CreateImageNodeOptions } from './ImageNode';
 export * from './ImageNode';
 export type ImageUploadHandler = ((image: File) => Promise<string>) | null;
 export type ImagePreviewHandler = ((imageSource: string) => Promise<string>) | null;
+export interface InsertImageFormValues {
+    src?: string;
+    altText?: string;
+    title?: string;
+    file: FileList;
+}
+type InactiveImageDialogState = {
+    type: 'inactive';
+};
+type NewImageDialogState = {
+    type: 'new';
+};
+type EditingImageDialogState = {
+    type: 'editing';
+    nodeKey: string;
+    initialValues: Omit<InsertImageFormValues, 'file'>;
+};
 /** @internal */
 export declare const imageSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     activeEditor: RealmNode<LexicalEditor | null>;
@@ -127,10 +144,15 @@ export declare const imageSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
 }]) => {
+    imageDialogState: RealmNode<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;
+    saveImage: RealmNode<InsertImageFormValues>;
+    openNewImageDialog: RealmNode<true>;
+    openEditImageDialog: RealmNode<Omit<EditingImageDialogState, "type">>;
+    closeImageDialog: RealmNode<true>;
     imageUploadHandler: RealmNode<ImageUploadHandler>;
     imageAutocompleteSuggestions: RealmNode<string[]>;
     disableImageResize: RealmNode<boolean>;
-    insertImage: RealmNode<string>;
+    insertImage: RealmNode<InsertImageFormValues>;
     imagePreviewHandler: RealmNode<ImagePreviewHandler>;
 }>;
 interface ImagePluginParams {
@@ -252,19 +274,29 @@ imagePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
 }]) => {
+    imageDialogState: RealmNode<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;
+    saveImage: RealmNode<InsertImageFormValues>;
+    openNewImageDialog: RealmNode<true>;
+    openEditImageDialog: RealmNode<Omit<EditingImageDialogState, "type">>;
+    closeImageDialog: RealmNode<true>;
     imageUploadHandler: RealmNode<ImageUploadHandler>;
     imageAutocompleteSuggestions: RealmNode<string[]>;
     disableImageResize: RealmNode<boolean>;
-    insertImage: RealmNode<string>;
+    insertImage: RealmNode<InsertImageFormValues>;
     imagePreviewHandler: RealmNode<ImagePreviewHandler>;
 }>, ImagePluginParams>, 
 /** @internal */
 imagePluginHooks: {
     useRealmContext: () => TypedRealm<{
+        imageDialogState: RealmNode<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;
+        saveImage: RealmNode<InsertImageFormValues>;
+        openNewImageDialog: RealmNode<true>;
+        openEditImageDialog: RealmNode<Omit<EditingImageDialogState, "type">>;
+        closeImageDialog: RealmNode<true>;
         imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
-        insertImage: RealmNode<string>;
+        insertImage: RealmNode<InsertImageFormValues>;
         imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -322,11 +354,16 @@ imagePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
     }>;
-    useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage" | "imagePreviewHandler">(key: K, callback: (value: ValueForKey<{
+    useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "imageDialogState" | "saveImage" | "openNewImageDialog" | "openEditImageDialog" | "closeImageDialog" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage" | "imagePreviewHandler">(key: K, callback: (value: ValueForKey<{
+        imageDialogState: RealmNode<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;
+        saveImage: RealmNode<InsertImageFormValues>;
+        openNewImageDialog: RealmNode<true>;
+        openEditImageDialog: RealmNode<Omit<EditingImageDialogState, "type">>;
+        closeImageDialog: RealmNode<true>;
         imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
-        insertImage: RealmNode<string>;
+        insertImage: RealmNode<InsertImageFormValues>;
         imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -385,10 +422,15 @@ imagePluginHooks: {
         onBlur: RealmNode<FocusEvent>;
     }, K>) => void) => void;
     useEmitterValues: <K_1 extends SystemKeys<{
+        imageDialogState: RealmNode<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;
+        saveImage: RealmNode<InsertImageFormValues>;
+        openNewImageDialog: RealmNode<true>;
+        openEditImageDialog: RealmNode<Omit<EditingImageDialogState, "type">>;
+        closeImageDialog: RealmNode<true>;
         imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
-        insertImage: RealmNode<string>;
+        insertImage: RealmNode<InsertImageFormValues>;
         imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -446,10 +488,15 @@ imagePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
     }>>(...keys: K_1) => ValuesForKeys<{
+        imageDialogState: RealmNode<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;
+        saveImage: RealmNode<InsertImageFormValues>;
+        openNewImageDialog: RealmNode<true>;
+        openEditImageDialog: RealmNode<Omit<EditingImageDialogState, "type">>;
+        closeImageDialog: RealmNode<true>;
         imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
-        insertImage: RealmNode<string>;
+        insertImage: RealmNode<InsertImageFormValues>;
         imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -508,10 +555,15 @@ imagePluginHooks: {
         onBlur: RealmNode<FocusEvent>;
     }, K_1>;
     usePubKeys: () => (values: SystemDict<{
+        imageDialogState: RealmNode<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;
+        saveImage: RealmNode<InsertImageFormValues>;
+        openNewImageDialog: RealmNode<true>;
+        openEditImageDialog: RealmNode<Omit<EditingImageDialogState, "type">>;
+        closeImageDialog: RealmNode<true>;
         imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
-        insertImage: RealmNode<string>;
+        insertImage: RealmNode<InsertImageFormValues>;
         imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -569,11 +621,16 @@ imagePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
     }>) => void;
-    usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage" | "imagePreviewHandler">(key: K_2) => (value: ValueForKey<{
+    usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "imageDialogState" | "saveImage" | "openNewImageDialog" | "openEditImageDialog" | "closeImageDialog" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage" | "imagePreviewHandler">(key: K_2) => (value: ValueForKey<{
+        imageDialogState: RealmNode<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;
+        saveImage: RealmNode<InsertImageFormValues>;
+        openNewImageDialog: RealmNode<true>;
+        openEditImageDialog: RealmNode<Omit<EditingImageDialogState, "type">>;
+        closeImageDialog: RealmNode<true>;
         imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
-        insertImage: RealmNode<string>;
+        insertImage: RealmNode<InsertImageFormValues>;
         imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;