@mdxeditor/editor 3.50.0 → 3.52.0

package/dist/MDXEditor.js

@@ -25,7 +25,7 @@ const RichTextEditor = () => {
   const setEditorRootWrapperElement = usePublisher(contentEditableWrapperElement$);
   const onRef = (el) => {
     setEditorRootWrapperElement(el);
-    setContentEditableRef({ current: el });
+    setContentEditableRef(el ? { current: el } : null);
   };
   const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder, bottomAreaChildren] = useCellValues(
     contentEditableClassName$,
@@ -120,8 +120,8 @@ const Methods = ({ mdxRef }) => {
           (_a = realm.getValue(rootEditor$)) == null ? void 0 : _a.focus(callbackFn, opts);
         },
         getContentEditableHTML: () => {
-          var _a, _b;
-          return ((_b = (_a = realm.getValue(contentEditableRef$)) == null ? void 0 : _a.current) == null ? void 0 : _b.innerHTML) ?? "";
+          var _a;
+          return ((_a = realm.getValue(contentEditableRef$)) == null ? void 0 : _a.current.innerHTML) ?? "";
         },
         getSelectionMarkdown: () => {
           const viewMode = realm.getValue(viewMode$);

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import { Config } from 'mdast-util-from-markdown/lib';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { DecoratorNode } from 'lexical';
@@ -17,6 +15,8 @@ import { Extension as Extension_2 } from '@codemirror/state';
 import { FC } from 'react';
 import { HeadingTagType } from '@lexical/rich-text';
 import { HistoryState } from '@lexical/history';
+import { JSX } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KlassConstructor } from 'lexical';
 import * as lexical from 'lexical';
 import { LexicalCommand } from 'lexical';
@@ -336,7 +336,7 @@ export declare type BlockType = 'paragraph' | 'quote' | HeadingTagType | '';
  * Supports paragraphs, headings and block quotes.
  * @group Toolbar Components
  */
-export declare const BlockTypeSelect: () => default_2.JSX.Element | null;
+export declare const BlockTypeSelect: () => JSX_2.Element | null;
 
 /**
  * A toolbar component that lets the user toggle bold, italic and underline formatting.
@@ -354,7 +354,7 @@ export declare interface BoldItalicUnderlineTogglesProps {
  * A toolbar button primitive.
  * @group Toolbar Primitives
  */
-export declare const Button: default_2.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarButtonProps & default_2.RefAttributes<HTMLButtonElement>, "ref"> & default_2.RefAttributes<object>>;
+export declare const Button: default_2.ForwardRefExoticComponent<RadixToolbar.ToolbarButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Use this primitive to create a toolbar button that can be either a button or a dropdown, depending on the number of items passed.
@@ -387,15 +387,15 @@ export declare const ButtonOrDropdownButton: <T extends string>(props: {
          */
         label: string | JSX.Element;
     }[];
-}) => default_2.JSX.Element;
+}) => JSX_2.Element;
 
 /**
  * A toolbar button with tooltip primitive.
  * @group Toolbar Primitives
  */
-export declare const ButtonWithTooltip: ({ title, children, ...props }: Omit<RadixToolbar.ToolbarButtonProps & default_2.RefAttributes<HTMLButtonElement>, "ref"> & default_2.RefAttributes<object> & {
+export declare const ButtonWithTooltip: ({ title, children, ...props }: RadixToolbar.ToolbarButtonProps & default_2.RefAttributes<HTMLButtonElement> & {
     title: string;
-}) => default_2.JSX.Element;
+}) => JSX_2.Element;
 
 /**
  * Calls the passed function.
@@ -416,7 +416,7 @@ export declare const cancelLinkEdit$: NodeRef<void>;
  * For this component to work, you must pass the {@link AdmonitionDirectiveDescriptor} to the `directivesPlugin` `directiveDescriptors` parameter.
  * @group Toolbar Components
  */
-export declare const ChangeAdmonitionType: () => default_2.JSX.Element;
+export declare const ChangeAdmonitionType: () => JSX_2.Element;
 
 /**
  * A component that allows the user to change the code block language of the current selection.
@@ -424,7 +424,7 @@ export declare const ChangeAdmonitionType: () => default_2.JSX.Element;
  * See {@link ConditionalContents} for an example on how to display the dropdown only when a code block is in focus.
  * @group Toolbar Components
  */
-export declare const ChangeCodeMirrorLanguage: () => default_2.JSX.Element;
+export declare const ChangeCodeMirrorLanguage: () => JSX_2.Element;
 
 export declare type ClickLinkCallback = (url: string) => void;
 
@@ -587,7 +587,7 @@ export declare const codeBlockPlugin: (params?: {
  */
 export declare const codeMirrorAutoLoadLanguageSupport$: NodeRef<boolean>;
 
-export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter }: CodeBlockEditorProps) => default_2.JSX.Element;
+export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter }: CodeBlockEditorProps) => JSX_2.Element;
 
 /**
  * The code mirror extensions for the coemirror code block editor.
@@ -760,7 +760,7 @@ export declare interface CreateImageNodeParameters {
  * For this component to work, you must include the `linkDialogPlugin`.
  * @group Toolbar Components
  */
-export declare const CreateLink: () => default_2.JSX.Element;
+export declare const CreateLink: () => JSX_2.Element;
 
 /**
  * An input signal that lets you register a new {@link EditorSubscription} for the root editor.
@@ -823,51 +823,51 @@ export declare const DEFAULT_FORMAT: 0;
 export declare const defaultCodeBlockLanguage$: NodeRef<string>;
 
 export declare const defaultSvgIcons: {
-    undo: default_2.JSX.Element;
-    redo: default_2.JSX.Element;
-    format_bold: default_2.JSX.Element;
-    format_italic: default_2.JSX.Element;
-    format_underlined: default_2.JSX.Element;
-    format_highlight: default_2.JSX.Element;
-    code: default_2.JSX.Element;
-    strikeThrough: default_2.JSX.Element;
-    superscript: default_2.JSX.Element;
-    subscript: default_2.JSX.Element;
-    format_list_bulleted: default_2.JSX.Element;
-    format_list_numbered: default_2.JSX.Element;
-    format_list_checked: default_2.JSX.Element;
-    link: default_2.JSX.Element;
-    add_photo: default_2.JSX.Element;
-    table: default_2.JSX.Element;
-    horizontal_rule: default_2.JSX.Element;
-    frontmatter: default_2.JSX.Element;
-    frame_source: default_2.JSX.Element;
-    arrow_drop_down: default_2.JSX.Element;
-    admonition: default_2.JSX.Element;
-    sandpack: default_2.JSX.Element;
-    rich_text: default_2.JSX.Element;
-    difference: default_2.JSX.Element;
-    markdown: default_2.JSX.Element;
-    open_in_new: default_2.JSX.Element;
-    link_off: default_2.JSX.Element;
-    edit: default_2.JSX.Element;
-    content_copy: default_2.JSX.Element;
-    more_horiz: default_2.JSX.Element;
-    more_vert: default_2.JSX.Element;
-    close: default_2.JSX.Element;
-    settings: default_2.JSX.Element;
-    delete_big: default_2.JSX.Element;
-    delete_small: default_2.JSX.Element;
-    format_align_center: default_2.JSX.Element;
-    format_align_left: default_2.JSX.Element;
-    format_align_right: default_2.JSX.Element;
-    add_row: default_2.JSX.Element;
-    add_column: default_2.JSX.Element;
-    insert_col_left: default_2.JSX.Element;
-    insert_row_above: default_2.JSX.Element;
-    insert_row_below: default_2.JSX.Element;
-    insert_col_right: default_2.JSX.Element;
-    check: default_2.JSX.Element;
+    undo: JSX_2.Element;
+    redo: JSX_2.Element;
+    format_bold: JSX_2.Element;
+    format_italic: JSX_2.Element;
+    format_underlined: JSX_2.Element;
+    format_highlight: JSX_2.Element;
+    code: JSX_2.Element;
+    strikeThrough: JSX_2.Element;
+    superscript: JSX_2.Element;
+    subscript: JSX_2.Element;
+    format_list_bulleted: JSX_2.Element;
+    format_list_numbered: JSX_2.Element;
+    format_list_checked: JSX_2.Element;
+    link: JSX_2.Element;
+    add_photo: JSX_2.Element;
+    table: JSX_2.Element;
+    horizontal_rule: JSX_2.Element;
+    frontmatter: JSX_2.Element;
+    frame_source: JSX_2.Element;
+    arrow_drop_down: JSX_2.Element;
+    admonition: JSX_2.Element;
+    sandpack: JSX_2.Element;
+    rich_text: JSX_2.Element;
+    difference: JSX_2.Element;
+    markdown: JSX_2.Element;
+    open_in_new: JSX_2.Element;
+    link_off: JSX_2.Element;
+    edit: JSX_2.Element;
+    content_copy: JSX_2.Element;
+    more_horiz: JSX_2.Element;
+    more_vert: JSX_2.Element;
+    close: JSX_2.Element;
+    settings: JSX_2.Element;
+    delete_big: JSX_2.Element;
+    delete_small: JSX_2.Element;
+    format_align_center: JSX_2.Element;
+    format_align_left: JSX_2.Element;
+    format_align_right: JSX_2.Element;
+    add_row: JSX_2.Element;
+    add_column: JSX_2.Element;
+    insert_col_left: JSX_2.Element;
+    insert_row_above: JSX_2.Element;
+    insert_row_below: JSX_2.Element;
+    insert_col_right: JSX_2.Element;
+    check: JSX_2.Element;
 };
 
 /**
@@ -1122,9 +1122,10 @@ export declare interface EditingImageDialogState {
 export declare interface EditLinkDialog {
     type: 'edit';
     initialUrl: string;
-    hasInitialText: boolean;
     url: string;
     title: string;
+    text: string;
+    withAnchorText: boolean;
     linkNodeKey: string;
     rectangle: RectData;
 }
@@ -1539,7 +1540,7 @@ export declare const initialMarkdownNormalize$: NodeRef<boolean>;
  *
  * @group Toolbar Components
  */
-export declare const InsertAdmonition: () => default_2.JSX.Element;
+export declare const InsertAdmonition: () => JSX_2.Element;
 
 /**
  * A signal that inserts a new code block into the editor with the published options.
@@ -1648,7 +1649,7 @@ export declare const insertSandpack$: NodeRef<string>;
  * For this to work, you need to have the `sandpackPlugin` installed.
  * @group Toolbar Components
  */
-export declare const InsertSandpack: () => default_2.JSX.Element;
+export declare const InsertSandpack: () => JSX_2.Element;
 
 /**
  * A signal that will insert a table with the published amount of rows and columns into the active editor.
@@ -2470,7 +2471,7 @@ export declare const NestedLexicalEditor: <T extends Mdast.RootContent>(props: {
      * Whether or not the editor edits blocks (multiple paragraphs)
      */
     block?: boolean;
-}) => default_2.JSX.Element;
+}) => JSX_2.Element;
 
 /**
  * The state of the image dialog when it is in new mode.
@@ -2685,7 +2686,7 @@ export declare interface SandpackConfig {
     presets: SandpackPreset[];
 }
 
-export declare const SandpackEditor: ({ nodeKey, code, focusEmitter, preset }: SandpackEditorProps) => default_2.JSX.Element;
+export declare const SandpackEditor: ({ nodeKey, code, focusEmitter, preset }: SandpackEditorProps) => JSX_2.Element;
 
 export declare interface SandpackEditorProps extends CodeBlockEditorProps {
     preset: SandpackPreset;
@@ -2781,7 +2782,7 @@ export declare const Select: <T extends string>(props: {
         label: string | JSX.Element;
         value: T;
     } | 'separator')[];
-}) => default_2.JSX.Element;
+}) => JSX_2.Element;
 
 /* Excluded from this release type: SelectButtonTrigger */
 
@@ -2866,7 +2867,7 @@ export declare type SerializedTableNode = Spread<{
  */
 export declare const setMarkdown$: NodeRef<string>;
 
-/* Excluded from this release type: showLinkTitleField$ */
+export declare const showLinkTitleField$: NodeRef<boolean>;
 
 /**
  * A component that displays the focused live code block's name.
@@ -2874,7 +2875,7 @@ export declare const setMarkdown$: NodeRef<string>;
  * See {@link ConditionalContents} for an example on how to display the dropdown only when a sandpack editor is in focus.
  * @group Toolbar Components
  */
-export declare const ShowSandpackInfo: () => default_2.JSX.Element;
+export declare const ShowSandpackInfo: () => JSX_2.Element;
 
 /**
  * A toolbar primitive that allows you to build an UI with multiple exclusive toggle groups, like the list type toggle.
@@ -2890,7 +2891,7 @@ export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChan
     value: T | '';
     ggClassName?: string;
     className?: string;
-}) => default_2.JSX.Element;
+}) => JSX_2.Element;
 
 /* Excluded from this release type: SingleToggleGroup */
 

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

@@ -13,6 +13,7 @@ createCommand();
 function LinkEditForm({
   url,
   title,
+  text,
   onSubmit,
   onCancel,
   linkAutocompleteSuggestions,
@@ -29,8 +30,7 @@ function LinkEditForm({
     values: {
       url,
       title,
-      text: ""
-      // text is only for freshly created links with no content, it always starts empty
+      text
     }
   });
   const t = useTranslation();
@@ -46,6 +46,12 @@ function LinkEditForm({
         e.stopPropagation();
         onCancel();
       },
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onCancel();
+        }
+      },
       className: classNames(styles.multiFieldForm, styles.linkDialogEditForm)
     },
     /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-url" }, t("createLink.url", "URL")), /* @__PURE__ */ React__default.createElement(
@@ -153,11 +159,12 @@ const LinkDialog = () => {
       {
         url: linkDialogState.url,
         title: linkDialogState.title,
+        text: linkDialogState.text,
         onSubmit: updateLink,
         onCancel: cancelLinkEdit.bind(null),
         linkAutocompleteSuggestions,
         showLinkTitleField,
-        showAnchorTextField: !linkDialogState.hasInitialText
+        showAnchorTextField: linkDialogState.withAnchorText
       }
     ),
     linkDialogState.type === "preview" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(

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

@@ -1,6 +1,6 @@
-import { $createLinkNode, TOGGLE_LINK_COMMAND, $isLinkNode, LinkNode } from "@lexical/link";
+import { $isLinkNode, $createLinkNode, TOGGLE_LINK_COMMAND, LinkNode } from "@lexical/link";
 import { Signal, Cell, Action, withLatestFrom, map, filter } from "@mdxeditor/gurx";
-import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $createTextNode, $insertNodes, $getNearestNodeFromDOMNode } from "lexical";
+import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $getNodeByKey, $createTextNode, $insertNodes, $isTextNode, $getNearestNodeFromDOMNode } from "lexical";
 import { realmPlugin } from "../../RealmWithPlugins.js";
 import { IS_APPLE } from "../../utils/detectMac.js";
 import { getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
@@ -64,28 +64,29 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
       COMMAND_PRIORITY_HIGH
     );
   });
-  r.link(
-    r.pipe(
-      switchFromPreviewToLinkEdit$,
-      withLatestFrom(linkDialogState$),
-      map(([, state]) => {
-        if (state.type === "preview") {
-          return {
+  r.sub(r.pipe(switchFromPreviewToLinkEdit$, withLatestFrom(linkDialogState$, activeEditor$)), ([, state, editor]) => {
+    if (state.type === "preview") {
+      setTimeout(() => {
+        editor == null ? void 0 : editor.getEditorState().read(() => {
+          const node = $getNodeByKey(state.linkNodeKey);
+          const withAnchorText = $isLinkNode(node) ? node.getTextContent().length > 0 && node.getChildrenSize() <= 1 : false;
+          const text = withAnchorText && node ? node.getTextContent() : "";
+          r.pub(linkDialogState$, {
             type: "edit",
             initialUrl: state.url,
-            hasInitialText: true,
             url: state.url,
             title: state.title,
+            text,
+            withAnchorText,
             linkNodeKey: state.linkNodeKey,
             rectangle: state.rectangle
-          };
-        } else {
-          throw new Error("Cannot switch to edit mode when not in preview mode");
-        }
-      })
-    ),
-    linkDialogState$
-  );
+          });
+        });
+      });
+    } else {
+      throw new Error("Cannot switch to edit mode when not in preview mode");
+    }
+  });
   r.sub(r.pipe(updateLink$, withLatestFrom(activeEditor$, linkDialogState$, currentSelection$)), ([payload, editor, state, selection]) => {
     var _a, _b, _c;
     const text = ((_a = payload.text) == null ? void 0 : _a.trim()) ?? "";
@@ -105,11 +106,15 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
             } else {
               linkNode.setURL(url);
               linkNode.setTitle(title);
+              updateLinkText(linkNode.getFirstChild(), text);
             }
           },
           { discrete: true }
         );
       } else {
+        editor == null ? void 0 : editor.update(() => {
+          updateLinkText(selection == null ? void 0 : selection.anchor.getNode(), text);
+        });
         editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url, title });
       }
       r.pub(linkDialogState$, {
@@ -204,29 +209,24 @@ const openLinkEditDialog$ = Action((r) => {
       editor == null ? void 0 : editor.focus(() => {
         setTimeout(() => {
           editor.getEditorState().read(() => {
-            const node = getLinkNodeInSelection(selection);
+            const linkNode = getLinkNodeInSelection(selection);
             const rectangle = getSelectionRectangle(editor);
-            if (node) {
-              r.pub(linkDialogState$, {
-                type: "edit",
-                initialUrl: node.getURL(),
-                hasInitialText: true,
-                url: node.getURL(),
-                title: node.getTitle() ?? "",
-                linkNodeKey: node.getKey(),
-                rectangle
-              });
-            } else {
-              r.pub(linkDialogState$, {
-                type: "edit",
-                initialUrl: "",
-                hasInitialText: !(selection == null ? void 0 : selection.isCollapsed()),
-                title: "",
-                url: "",
-                linkNodeKey: "",
-                rectangle
-              });
-            }
+            const initialUrl = (linkNode == null ? void 0 : linkNode.getURL()) ?? "";
+            const url = (linkNode == null ? void 0 : linkNode.getURL()) ?? "";
+            const title = (linkNode == null ? void 0 : linkNode.getTitle()) ?? "";
+            const linkNodeKey = (linkNode == null ? void 0 : linkNode.getKey()) ?? "";
+            const withAnchorText = linkNode ? linkNode.getTextContent().length > 0 && linkNode.getChildrenSize() <= 1 : Boolean(selection == null ? void 0 : selection.isCollapsed());
+            const text = withAnchorText && linkNode ? linkNode.getTextContent() : "";
+            r.pub(linkDialogState$, {
+              type: "edit",
+              initialUrl,
+              url,
+              title,
+              text,
+              withAnchorText,
+              linkNodeKey,
+              rectangle
+            });
           });
         });
       });
@@ -262,6 +262,12 @@ const onReadOnlyClickLinkCallback$ = Cell(null, (r) => {
     });
   });
 });
+function updateLinkText(node, text) {
+  if ($isTextNode(node) && text) {
+    node.setTextContent(text);
+    node.selectStart();
+  }
+}
 const showLinkTitleField$ = Cell(true);
 const linkDialogPlugin = realmPlugin({
   init(r, params) {

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.50.0",
+  "version": "3.52.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -114,8 +114,8 @@
     "@types/mdast": "^4.0.3",
     "@types/multer": "^1.4.7",
     "@types/node": "^20.2.5",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/unist": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
@@ -144,9 +144,9 @@
     "postcss-mixins": "^9.0.4",
     "postcss-nesting": "^11.2.2",
     "prettier": "^3.1.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "semantic-release": "^21.0.5",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "semantic-release": "^25.0.2",
     "svgo": "^3.3.2",
     "terser": "^5.26.0",
     "typedoc": "^0.25.13",
@@ -162,7 +162,8 @@
     "vitest": "^1.1.1"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "engines": {
     "node": ">=16"