@mdxeditor/editor 1.1.1 → 1.2.0

package/dist/plugins/image/index.js

@@ -1,10 +1,11 @@
 import { $wrapNodeInElement } from "@lexical/utils";
-import { $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 { $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 { coreSystem } from "../core/index.js";
 import { $createImageNode, $isImageNode, ImageNode } from "./ImageNode.js";
 import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
 import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "./MdastImageVisitor.js";
 import { CAN_USE_DOM } from "../../utils/detectMac.js";
+import { ImageDialog } from "./ImageDialog.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
 const imageSystem = system(
@@ -14,15 +15,51 @@ const imageSystem = system(
     const disableImageResize = r.node(false);
     const imageUploadHandler = r.node(null);
     const imagePreviewHandler = r.node(null);
-    r.sub(r.pipe(insertImage, r.o.withLatestFrom(rootEditor)), ([src, theEditor]) => {
-      theEditor == null ? void 0 : theEditor.update(() => {
-        const imageNode = $createImageNode({ altText: "", src, title: "" });
-        $insertNodes([imageNode]);
-        if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
-          $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+    const imageDialogState = r.node({ type: "inactive" });
+    const openNewImageDialog = r.node();
+    const openEditImageDialog = r.node();
+    const closeImageDialog = r.node();
+    const saveImage = r.node();
+    r.link(r.pipe(closeImageDialog, r.o.mapTo({ type: "inactive" })), imageDialogState);
+    r.link(r.pipe(openNewImageDialog, r.o.mapTo({ type: "new" })), imageDialogState);
+    r.link(
+      r.pipe(
+        openEditImageDialog,
+        r.o.map((payload) => ({ type: "editing", ...payload }))
+      ),
+      imageDialogState
+    );
+    r.sub(
+      r.pipe(saveImage, r.o.withLatestFrom(rootEditor, imageUploadHandler, imageDialogState)),
+      ([values, theEditor, imageUploadHandler2, dialogState]) => {
+        const handler = dialogState.type === "editing" ? (src) => {
+          theEditor == null ? void 0 : theEditor.update(() => {
+            const { nodeKey } = dialogState;
+            const imageNode = $getNodeByKey(nodeKey);
+            imageNode.setTitle(values.title);
+            imageNode.setAltText(values.altText);
+            imageNode.setSrc(src);
+          });
+          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(imageDialogState, { type: "inactive" });
+        };
+        if (values.file.length > 0) {
+          imageUploadHandler2 == null ? void 0 : imageUploadHandler2(values.file.item(0)).then(handler).catch((e) => {
+            throw e;
+          });
+        } else if (values.src) {
+          handler(values.src);
         }
-      });
-    });
+      }
+    );
     r.sub(rootEditor, (editor) => {
       editor == null ? void 0 : editor.registerCommand(
         INSERT_IMAGE_COMMAND,
@@ -73,7 +110,10 @@ const imageSystem = system(
           const imageUploadHandlerValue = r.getValue(imageUploadHandler);
           Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()))).then((urls) => {
             urls.forEach((url) => {
-              r.pub(insertImage, url);
+              editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                src: url,
+                altText: ""
+              });
             });
           }).catch((e) => {
             throw e;
@@ -84,6 +124,11 @@ const imageSystem = system(
       );
     });
     return {
+      imageDialogState,
+      saveImage,
+      openNewImageDialog,
+      openEditImageDialog,
+      closeImageDialog,
       imageUploadHandler,
       imageAutocompleteSuggestions,
       disableImageResize,
@@ -113,6 +158,7 @@ const [
     realm.pubKey("addImportVisitor", MdastJsxImageVisitor);
     realm.pubKey("addLexicalNode", ImageNode);
     realm.pubKey("addExportVisitor", LexicalImageVisitor);
+    realm.pubKey("addComposerChild", ImageDialog);
   }
 });
 const getDOMSelection = (targetWindow) => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;

package/dist/plugins/link-dialog/LinkDialog.d.ts

@@ -2,12 +2,15 @@ import React from 'react';
 import { LexicalCommand } from 'lexical';
 export declare const OPEN_LINK_DIALOG: LexicalCommand<undefined>;
 interface LinkEditFormProps {
-    initialUrl: string;
-    initialTitle: string;
-    onSubmit: (link: [string, string]) => void;
+    url: string;
+    title: string;
+    onSubmit: (link: {
+        url: string;
+        title: string;
+    }) => void;
     onCancel: () => void;
     linkAutocompleteSuggestions: string[];
 }
-export declare function LinkEditForm({ initialUrl, initialTitle, onSubmit, onCancel, linkAutocompleteSuggestions }: LinkEditFormProps): React.JSX.Element;
+export declare function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggestions }: LinkEditFormProps): React.JSX.Element;
 export declare const LinkDialog: React.FC;
 export {};

package/dist/plugins/link-dialog/LinkDialog.js

@@ -7,75 +7,51 @@ import CopyIcon from "../../icons/content_copy.svg.js";
 import EditIcon from "../../icons/edit.svg.js";
 import LinkOffIcon from "../../icons/link_off.svg.js";
 import OpenInNewIcon from "../../icons/open_in_new.svg.js";
-import DropDownIcon from "../../icons/arrow_drop_down.svg.js";
 import classNames from "classnames";
-import { useCombobox } from "downshift";
 import styles from "../../styles/ui.module.css.js";
 import { corePluginHooks } from "../core/index.js";
 import { linkDialogPluginHooks } from "./index.js";
+import { useForm } from "react-hook-form";
+import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
 createCommand();
-const MAX_SUGGESTIONS = 20;
-function LinkEditForm({ initialUrl, initialTitle, onSubmit, onCancel, linkAutocompleteSuggestions }) {
-  const [items, setItems] = React__default.useState(linkAutocompleteSuggestions.slice(0, MAX_SUGGESTIONS));
-  const [title, setTitle] = React__default.useState(initialTitle);
-  const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem, inputValue } = useCombobox({
-    initialInputValue: initialUrl,
-    onInputValueChange({ inputValue: inputValue2 }) {
-      inputValue2 = (inputValue2 == null ? void 0 : inputValue2.toLowerCase()) || "";
-      const matchingItems = [];
-      for (const url of linkAutocompleteSuggestions) {
-        if (url.toLowerCase().includes(inputValue2)) {
-          matchingItems.push(url);
-          if (matchingItems.length >= MAX_SUGGESTIONS) {
-            break;
-          }
-        }
-      }
-      setItems(matchingItems);
-    },
-    items,
-    itemToString(item) {
-      return item ?? "";
+function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggestions }) {
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    reset: _
+  } = useForm({
+    values: {
+      url,
+      title
     }
   });
-  const onSubmitEH = (e) => {
-    e.preventDefault();
-    onSubmit([inputValue, title]);
-  };
-  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();
-        onSubmit([e.target.value, title]);
-      }
-    },
-    [isOpen, items, onSubmit, title]
-  );
-  const handleSaveClick = (event) => {
-    event.stopPropagation();
-  };
-  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, onReset: onCancel, className: classNames(styles.linkDialogEditForm) }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-url" }, "URL")), /* @__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", { id: "link-url", className: styles.linkDialogInput, ...inputProps, autoFocus: true, size: 40, "data-editor-dialog": true }), /* @__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, index) => /* @__PURE__ */ React__default.createElement(
-    "li",
+  return /* @__PURE__ */ React__default.createElement(
+    "form",
     {
-      "data-selected": selectedItem === item,
-      "data-highlighted": highlightedIndex === index,
-      key: `${item}${index}`,
-      ...getItemProps({ item, index })
+      onSubmit: (e) => {
+        void handleSubmit(onSubmit)(e);
+        e.nativeEvent.stopImmediatePropagation();
+      },
+      onReset: onCancel,
+      className: classNames(styles.multiFieldForm, styles.linkDialogEditForm)
     },
-    item
-  ))))), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-title" }, "Title")), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { className: styles.linkDialogInputWrapper }, /* @__PURE__ */ React__default.createElement("input", { id: "link-title", className: styles.linkDialogInput, size: 40, value: title, onChange: (e) => setTitle(e.target.value) }))), /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "reset", title: "Cancel change", "aria-label": "Cancel change", className: classNames(styles.secondaryButton) }, "Cancel"), /* @__PURE__ */ React__default.createElement("button", { type: "submit", title: "Set URL", "aria-label": "Set URL", className: classNames(styles.primaryButton), onClick: handleSaveClick }, "Save")));
+    /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-url" }, "URL"), /* @__PURE__ */ React__default.createElement(
+      DownshiftAutoComplete,
+      {
+        initialInputValue: url,
+        inputName: "url",
+        suggestions: linkAutocompleteSuggestions,
+        setValue,
+        control,
+        placeholder: "Select or paste an URL",
+        autofocus: true
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-title" }, "Title"), /* @__PURE__ */ React__default.createElement("input", { id: "link-title", className: styles.textInput, size: 40, ...register("title") })),
+    /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", title: "Set URL", "aria-label": "Set URL", className: classNames(styles.primaryButton) }, "Save"), /* @__PURE__ */ React__default.createElement("button", { type: "reset", title: "Cancel change", "aria-label": "Cancel change", className: classNames(styles.secondaryButton) }, "Cancel"))
+  );
 }
 const LinkDialog = () => {
   const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
@@ -85,11 +61,10 @@ const LinkDialog = () => {
     "linkDialogState",
     "linkAutocompleteSuggestions"
   );
-  const updateLinkUrl = linkDialogPluginHooks.usePublisher("updateLinkUrl");
+  const updateLink = linkDialogPluginHooks.usePublisher("updateLink");
   const cancelLinkEdit = linkDialogPluginHooks.usePublisher("cancelLinkEdit");
   const switchFromPreviewToLinkEdit = linkDialogPluginHooks.usePublisher("switchFromPreviewToLinkEdit");
   const removeLink = linkDialogPluginHooks.usePublisher("removeLink");
-  const applyLinkChanges = linkDialogPluginHooks.usePublisher("applyLinkChanges");
   React__default.useEffect(() => {
     const update = () => {
       activeEditor == null ? void 0 : activeEditor.getEditorState().read(() => {
@@ -105,13 +80,6 @@ const LinkDialog = () => {
   }, [activeEditor, publishWindowChange]);
   const [copyUrlTooltipOpen, setCopyUrlTooltipOpen] = React__default.useState(false);
   const theRect = linkDialogState == null ? void 0 : linkDialogState.rectangle;
-  const onSubmitEH = React__default.useCallback(
-    (payload) => {
-      updateLinkUrl(payload);
-      applyLinkChanges(true);
-    },
-    [applyLinkChanges, updateLinkUrl]
-  );
   const urlIsExternal = linkDialogState.type === "preview" && linkDialogState.url.startsWith("http");
   return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, { open: linkDialogState.type !== "inactive" }, /* @__PURE__ */ React__default.createElement(
     RadixPopover.Anchor,
@@ -136,9 +104,9 @@ const LinkDialog = () => {
     linkDialogState.type === "edit" && /* @__PURE__ */ React__default.createElement(
       LinkEditForm,
       {
-        initialUrl: linkDialogState.url,
-        initialTitle: linkDialogState.title,
-        onSubmit: onSubmitEH,
+        url: linkDialogState.url,
+        title: linkDialogState.title,
+        onSubmit: updateLink,
         onCancel: cancelLinkEdit.bind(null, true),
         linkAutocompleteSuggestions
       }

package/dist/plugins/link-dialog/index.d.ts

@@ -148,7 +148,10 @@ linkDialogPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     dialogState: RealmNode<boolean>;
     onWindowChange: RealmNode<true>;
     linkDialogState: RealmNode<InactiveLinkDialog | PreviewLinkDialog | EditLinkDialog>;
-    updateLinkUrl: RealmNode<[string, string]>;
+    updateLink: RealmNode<{
+        url: string;
+        title: string;
+    }>;
     switchFromPreviewToLinkEdit: RealmNode<true>;
     cancelLinkEdit: RealmNode<true>;
     removeLink: RealmNode<true>;
@@ -164,7 +167,10 @@ linkDialogPluginHooks: {
         dialogState: RealmNode<boolean>;
         onWindowChange: RealmNode<true>;
         linkDialogState: RealmNode<InactiveLinkDialog | PreviewLinkDialog | EditLinkDialog>;
-        updateLinkUrl: RealmNode<[string, string]>;
+        updateLink: RealmNode<{
+            url: string;
+            title: string;
+        }>;
         switchFromPreviewToLinkEdit: RealmNode<true>;
         cancelLinkEdit: RealmNode<true>;
         removeLink: RealmNode<true>;
@@ -227,11 +233,14 @@ linkDialogPluginHooks: {
         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" | "dialogState" | "onWindowChange" | "linkDialogState" | "updateLinkUrl" | "switchFromPreviewToLinkEdit" | "cancelLinkEdit" | "removeLink" | "openLinkEditDialog" | "applyLinkChanges" | "linkAutocompleteSuggestions">(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" | "dialogState" | "onWindowChange" | "linkDialogState" | "updateLink" | "switchFromPreviewToLinkEdit" | "cancelLinkEdit" | "removeLink" | "openLinkEditDialog" | "applyLinkChanges" | "linkAutocompleteSuggestions">(key: K, callback: (value: ValueForKey<{
         dialogState: RealmNode<boolean>;
         onWindowChange: RealmNode<true>;
         linkDialogState: RealmNode<InactiveLinkDialog | PreviewLinkDialog | EditLinkDialog>;
-        updateLinkUrl: RealmNode<[string, string]>;
+        updateLink: RealmNode<{
+            url: string;
+            title: string;
+        }>;
         switchFromPreviewToLinkEdit: RealmNode<true>;
         cancelLinkEdit: RealmNode<true>;
         removeLink: RealmNode<true>;
@@ -298,7 +307,10 @@ linkDialogPluginHooks: {
         dialogState: RealmNode<boolean>;
         onWindowChange: RealmNode<true>;
         linkDialogState: RealmNode<InactiveLinkDialog | PreviewLinkDialog | EditLinkDialog>;
-        updateLinkUrl: RealmNode<[string, string]>;
+        updateLink: RealmNode<{
+            url: string;
+            title: string;
+        }>;
         switchFromPreviewToLinkEdit: RealmNode<true>;
         cancelLinkEdit: RealmNode<true>;
         removeLink: RealmNode<true>;
@@ -364,7 +376,10 @@ linkDialogPluginHooks: {
         dialogState: RealmNode<boolean>;
         onWindowChange: RealmNode<true>;
         linkDialogState: RealmNode<InactiveLinkDialog | PreviewLinkDialog | EditLinkDialog>;
-        updateLinkUrl: RealmNode<[string, string]>;
+        updateLink: RealmNode<{
+            url: string;
+            title: string;
+        }>;
         switchFromPreviewToLinkEdit: RealmNode<true>;
         cancelLinkEdit: RealmNode<true>;
         removeLink: RealmNode<true>;
@@ -431,7 +446,10 @@ linkDialogPluginHooks: {
         dialogState: RealmNode<boolean>;
         onWindowChange: RealmNode<true>;
         linkDialogState: RealmNode<InactiveLinkDialog | PreviewLinkDialog | EditLinkDialog>;
-        updateLinkUrl: RealmNode<[string, string]>;
+        updateLink: RealmNode<{
+            url: string;
+            title: string;
+        }>;
         switchFromPreviewToLinkEdit: RealmNode<true>;
         cancelLinkEdit: RealmNode<true>;
         removeLink: RealmNode<true>;
@@ -494,11 +512,14 @@ linkDialogPluginHooks: {
         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" | "dialogState" | "onWindowChange" | "linkDialogState" | "updateLinkUrl" | "switchFromPreviewToLinkEdit" | "cancelLinkEdit" | "removeLink" | "openLinkEditDialog" | "applyLinkChanges" | "linkAutocompleteSuggestions">(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" | "dialogState" | "onWindowChange" | "linkDialogState" | "updateLink" | "switchFromPreviewToLinkEdit" | "cancelLinkEdit" | "removeLink" | "openLinkEditDialog" | "applyLinkChanges" | "linkAutocompleteSuggestions">(key: K_2) => (value: ValueForKey<{
         dialogState: RealmNode<boolean>;
         onWindowChange: RealmNode<true>;
         linkDialogState: RealmNode<InactiveLinkDialog | PreviewLinkDialog | EditLinkDialog>;
-        updateLinkUrl: RealmNode<[string, string]>;
+        updateLink: RealmNode<{
+            url: string;
+            title: string;
+        }>;
         switchFromPreviewToLinkEdit: RealmNode<true>;
         cancelLinkEdit: RealmNode<true>;
         removeLink: RealmNode<true>;

package/dist/plugins/link-dialog/index.js

@@ -27,7 +27,7 @@ const linkDialogSystem = system(
     const dialogState = r.node(false);
     const onWindowChange = r.node();
     const linkDialogState = r.node({ type: "inactive" }, true);
-    const updateLinkUrl = r.node();
+    const updateLink = r.node();
     const cancelLinkEdit = r.node();
     const applyLinkChanges = r.node();
     const switchFromPreviewToLinkEdit = r.node();
@@ -124,54 +124,32 @@ const linkDialogSystem = system(
       ),
       linkDialogState
     );
-    r.sub(r.pipe(applyLinkChanges, r.o.withLatestFrom(linkDialogState, activeEditor)), ([, state, editor]) => {
-      if (state.type === "edit") {
-        const url = state.url.trim();
-        const title = state.title.trim();
-        if (url.trim() !== "") {
-          editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url, title });
-          setTimeout(() => {
-            editor == null ? void 0 : editor.update(() => {
-              const node = getLinkNodeInSelection($getSelection());
-              node == null ? void 0 : node.setTitle(title);
-            });
-          });
-          r.pub(linkDialogState, {
-            type: "preview",
-            linkNodeKey: state.linkNodeKey,
-            rectangle: state.rectangle,
-            url
-          });
-        } else {
-          if (state.initialUrl !== "") {
-            editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-          }
-          r.pub(linkDialogState, {
-            type: "inactive"
+    r.sub(r.pipe(updateLink, r.o.withLatestFrom(activeEditor, linkDialogState)), ([payload, editor, state]) => {
+      const url = payload.url.trim();
+      const title = payload.title.trim();
+      if (url.trim() !== "") {
+        editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url, title });
+        setTimeout(() => {
+          editor == null ? void 0 : editor.update(() => {
+            const node = getLinkNodeInSelection($getSelection());
+            node == null ? void 0 : node.setTitle(title);
           });
-        }
+        });
+        r.pub(linkDialogState, {
+          type: "preview",
+          linkNodeKey: state.linkNodeKey,
+          rectangle: state.rectangle,
+          url
+        });
       } else {
-        throw new Error("Cannot apply link edit when not in edit mode");
+        if (state.type === "edit" && state.initialUrl !== "") {
+          editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        }
+        r.pub(linkDialogState, {
+          type: "inactive"
+        });
       }
     });
-    r.link(
-      r.pipe(
-        updateLinkUrl,
-        r.o.withLatestFrom(linkDialogState),
-        r.o.map(([[url, title], state]) => {
-          if (state.type === "edit") {
-            return {
-              ...state,
-              url,
-              title
-            };
-          } else {
-            throw new Error("Cannot update link url when not in edit mode");
-          }
-        })
-      ),
-      linkDialogState
-    );
     r.link(
       r.pipe(
         cancelLinkEdit,
@@ -230,7 +208,7 @@ const linkDialogSystem = system(
       dialogState,
       onWindowChange,
       linkDialogState,
-      updateLinkUrl,
+      updateLink,
       switchFromPreviewToLinkEdit,
       cancelLinkEdit,
       removeLink,

package/dist/plugins/toolbar/components/InsertImage.js

@@ -1,22 +1,14 @@
 import React__default from "react";
 import { imagePluginHooks } from "../../image/index.js";
-import { DialogButton } from "../primitives/DialogButton.js";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
 import AddPhotoIcon from "../../../icons/add_photo.svg.js";
+import styles from "../../../styles/ui.module.css.js";
+import { corePluginHooks } from "../../core/index.js";
+import { TooltipWrap } from "../primitives/TooltipWrap.js";
 const InsertImage = React__default.forwardRef((_, forwardedRef) => {
-  const [imageAutocompleteSuggestions] = imagePluginHooks.useEmitterValues("imageAutocompleteSuggestions");
-  const insertImage = imagePluginHooks.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
-    }
-  );
+  const openNewImageDialog = imagePluginHooks.usePublisher("openNewImageDialog");
+  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
+  return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly, onClick: () => openNewImageDialog(true) }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: "Insert image" }, /* @__PURE__ */ React__default.createElement(AddPhotoIcon, null)));
 });
 export {
   InsertImage

package/dist/plugins/toolbar/primitives/DialogButton.js

@@ -77,7 +77,7 @@ const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlac
   };
   const onSubmitEH = (e) => {
     e.preventDefault();
-    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
     onSubmitCallback(inputProps.value);
   };
   const dropdownIsVisible = isOpen && items.length > 0;
@@ -91,7 +91,7 @@ const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlac
       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, index) => /* @__PURE__ */ React__default.createElement(
+  ), 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,