@mdxeditor/editor 1.8.0 → 1.9.0

package/dist/icons/format_list_checked.svg.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 const SvgFormatListChecked = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "mask0_592_44", style: {
   maskType: "alpha"
-}, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 24, height: 24 }, /* @__PURE__ */ React.createElement("rect", { width: 24, height: 24, fill: "#D9D9D9" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#mask0_592_44)" }, /* @__PURE__ */ React.createElement("path", { d: "M5.55 15L2 11.45L3.4 10.05L5.525 12.175L9.775 7.925L11.175 9.35L5.55 15ZM5.55 9L2 5.45L3.4 4.05L5.525 6.175L9.775 1.925L11.175 3.35L5.55 9ZM13 13V11H22V13H13ZM13 7V5H22V7H13Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M13 19V17H22V19H13Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M5.55 21L2 17.45L3.4 16.05L5.525 18.175L9.775 13.925L11.175 15.35L5.55 21Z", fill: "currentColor" })));
+}, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 24, height: 24 }, /* @__PURE__ */ React.createElement("rect", { width: 24, height: 24, fill: "#D9D9D9" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#mask0_592_44)" }, /* @__PURE__ */ React.createElement("path", { d: "M5.55 19L2 15.45L3.4 14.05L5.525 16.175L9.775 11.925L11.175 13.35L5.55 19ZM5.55 11L2 7.45L3.4 6.05L5.525 8.175L9.775 3.925L11.175 5.35L5.55 11ZM13 17V15H22V17H13ZM13 9V7H22V9H13Z", fill: "currentColor" })));
 const CheckedListIcon = SvgFormatListChecked;
 export {
   CheckedListIcon as default

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

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

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

@@ -4,7 +4,22 @@ 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 DownshiftAutoComplete = (props) => {
+  if (props.suggestions.length > 0) {
+    return /* @__PURE__ */ React__default.createElement(DownshiftAutoCompleteWithSuggestions, { ...props });
+  } else {
+    return /* @__PURE__ */ React__default.createElement("input", { className: styles.textInput, size: 40, autoFocus: true, ...props.register(props.inputName) });
+  }
+};
+const DownshiftAutoCompleteWithSuggestions = ({
+  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({
@@ -62,5 +77,6 @@ const DownshiftAutoComplete = ({ autofocus, suggestions, control, inputName, pla
   )))));
 };
 export {
-  DownshiftAutoComplete
+  DownshiftAutoComplete,
+  DownshiftAutoCompleteWithSuggestions
 };

package/dist/plugins/image/ImageDialog.js

@@ -49,6 +49,7 @@ const ImageDialog = () => {
         /* @__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,
           {
+            register,
             initialInputValue: state.type === "editing" ? state.initialValues.src || "" : "",
             inputName: "src",
             suggestions: imageAutocompleteSuggestions,

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

@@ -44,6 +44,7 @@ function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggesti
     /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-url" }, "URL"), /* @__PURE__ */ React__default.createElement(
       DownshiftAutoComplete,
       {
+        register,
         initialInputValue: url,
         inputName: "url",
         suggestions: linkAutocompleteSuggestions,

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

@@ -1,5 +1,5 @@
 import { TOGGLE_LINK_COMMAND, $isLinkNode } from "@lexical/link";
-import { $isRangeSelection, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, COMMAND_PRIORITY_HIGH } from "lexical";
+import { $isRangeSelection, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, COMMAND_PRIORITY_HIGH, $createTextNode, $insertNodes } from "lexical";
 import { IS_APPLE } from "../../utils/detectMac.js";
 import { getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
 import { coreSystem } from "../core/index.js";
@@ -93,7 +93,7 @@ const linkDialogSystem = system(
         (event) => {
           if (event.key === "k" && (IS_APPLE ? event.metaKey : event.ctrlKey)) {
             const selection = $getSelection();
-            if ($isRangeSelection(selection) && (getLinkNodeInSelection(selection) || !selection.isCollapsed())) {
+            if ($isRangeSelection(selection)) {
               r.pub(openLinkEditDialog, true);
               event.stopPropagation();
               event.preventDefault();
@@ -127,32 +127,48 @@ const linkDialogSystem = system(
       ),
       linkDialogState
     );
-    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.sub(
+      r.pipe(updateLink, r.o.withLatestFrom(activeEditor, linkDialogState, currentSelection)),
+      ([payload, editor, state, selection]) => {
+        const url = payload.url.trim();
+        const title = payload.title.trim();
+        if (url.trim() !== "") {
+          if (selection == null ? void 0 : selection.isCollapsed()) {
+            const linkContent = title || url;
+            editor == null ? void 0 : editor.update(
+              () => {
+                if (!getLinkNodeInSelection(selection)) {
+                  const node = $createTextNode(linkContent);
+                  $insertNodes([node]);
+                  node.select();
+                }
+              },
+              { discrete: true }
+            );
+          }
+          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);
+            });
+          }, 100);
+          r.pub(linkDialogState, {
+            type: "preview",
+            linkNodeKey: state.linkNodeKey,
+            rectangle: state.rectangle,
+            url
+          });
+        } else {
+          if (state.type === "edit" && state.initialUrl !== "") {
+            editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+          }
+          r.pub(linkDialogState, {
+            type: "inactive"
           });
-        });
-        r.pub(linkDialogState, {
-          type: "preview",
-          linkNodeKey: state.linkNodeKey,
-          rectangle: state.rectangle,
-          url
-        });
-      } else {
-        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(
         cancelLinkEdit,