@mdxeditor/editor 3.46.1 → 3.48.0

package/dist/MDXEditor.js

@@ -1,6 +1,6 @@
 import { usePublisher, useCellValue, useCellValues, useRealm } from "@mdxeditor/gurx";
 import React__default from "react";
-import { corePlugin, editorRootElementRef$, rootEditor$, useTranslation, contentEditableRef$, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, bottomAreaChildren$, insertMarkdown$, setMarkdown$, viewMode$, markdownSourceEditorValue$, markdown$ } from "./plugins/core/index.js";
+import { corePlugin, editorRootElementRef$, rootEditor$, useTranslation, contentEditableRef$, contentEditableWrapperElement$, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, bottomAreaChildren$, insertMarkdown$, setMarkdown$, viewMode$, markdownSourceEditorValue$, markdown$ } from "./plugins/core/index.js";
 import { RealmWithPlugins } from "./RealmWithPlugins.js";
 import { createLexicalComposerContext, LexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -21,8 +21,10 @@ const LexicalProvider = ({ children }) => {
 const RichTextEditor = () => {
   const t = useTranslation();
   const setContentEditableRef = usePublisher(contentEditableRef$);
-  const onRef = (_contentEditableRef) => {
-    setContentEditableRef({ current: _contentEditableRef });
+  const setEditorRootWrapperElement = usePublisher(contentEditableWrapperElement$);
+  const onRef = (el) => {
+    setEditorRootWrapperElement(el);
+    setContentEditableRef({ current: el });
   };
   const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder, bottomAreaChildren] = useCellValues(
     contentEditableClassName$,

package/dist/index.d.ts

@@ -689,6 +689,8 @@ export declare const contentEditableClassName$: NodeRef<string>;
  */
 export declare const contentEditableRef$: NodeRef<default_2.RefObject<HTMLDivElement> | null>;
 
+export declare const contentEditableWrapperElement$: NodeRef<HTMLDivElement | null>;
+
 /**
  * Returns true if the user is pressing the control key on Windows or the meta key on Mac.
  * @group Utils
@@ -1120,7 +1122,7 @@ export declare interface EditingImageDialogState {
 export declare interface EditLinkDialog {
     type: 'edit';
     initialUrl: string;
-    initialTitle?: string;
+    hasInitialText: boolean;
     url: string;
     title: string;
     linkNodeKey: string;
@@ -1964,6 +1966,10 @@ export declare const linkDialogPlugin: (params?: {
      * Invoked when a link is clicked in read-only mode
      */
     onReadOnlyClickLinkCallback?: ReadOnlyClickLinkCallback | undefined;
+    /**
+     * If true, show the "Link title" field in link dialogs (this sets mouseover text, NOT anchor text)
+     */
+    showLinkTitleField?: boolean | undefined;
 } | undefined) => RealmPlugin;
 
 /**
@@ -2830,6 +2836,8 @@ export declare type SerializedTableNode = Spread<{
  */
 export declare const setMarkdown$: NodeRef<string>;
 
+/* Excluded from this release type: showLinkTitleField$ */
+
 /**
  * A component that displays the focused live code block's name.
  * For this component to work, you must enable the `sandpackPlugin` for the editor.
@@ -3042,6 +3050,7 @@ export declare class UnrecognizedMarkdownConstructError extends Error {
  * @group Link Dialog
  */
 export declare const updateLink$: NodeRef<{
+    text: string | undefined;
     url: string | undefined;
     title: string | undefined;
 }>;

package/dist/index.js

@@ -4,7 +4,7 @@ import { MDXEditor } from "./MDXEditor.js";
 import { defaultSvgIcons } from "./defaultSvgIcons.js";
 import { MarkdownParseError, UnrecognizedMarkdownConstructError, importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
 import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
-import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addBottomAreaChild$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
+import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addBottomAreaChild$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
 import { ALL_HEADING_LEVELS, allowedHeadingLevels$, headingsPlugin } from "./plugins/headings/index.js";
 import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-break/index.js";
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
@@ -24,7 +24,7 @@ import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLang
 import { directivesPlugin, insertDirective$ } from "./plugins/directives/index.js";
 import { ADMONITION_TYPES, AdmonitionDirectiveDescriptor } from "./directive-editors/AdmonitionDirectiveDescriptor.js";
 import { GenericDirectiveEditor } from "./directive-editors/GenericDirectiveEditor.js";
-import { applyLinkChanges$, cancelLinkEdit$, linkAutocompleteSuggestions$, linkDialogPlugin, linkDialogState$, onClickLinkCallback$, onReadOnlyClickLinkCallback$, onWindowChange$, openLinkEditDialog$, removeLink$, switchFromPreviewToLinkEdit$, updateLink$ } from "./plugins/link-dialog/index.js";
+import { applyLinkChanges$, cancelLinkEdit$, linkAutocompleteSuggestions$, linkDialogPlugin, linkDialogState$, onClickLinkCallback$, onReadOnlyClickLinkCallback$, onWindowChange$, openLinkEditDialog$, removeLink$, showLinkTitleField$, switchFromPreviewToLinkEdit$, updateLink$ } from "./plugins/link-dialog/index.js";
 import { toolbarClassName$, toolbarContents$, toolbarPlugin } from "./plugins/toolbar/index.js";
 import { cmExtensions$, diffMarkdown$, diffSourcePlugin, readOnlyDiff$ } from "./plugins/diff-source/index.js";
 import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
@@ -206,6 +206,7 @@ export {
   composerChildren$,
   contentEditableClassName$,
   contentEditableRef$,
+  contentEditableWrapperElement$,
   controlOrMeta,
   convertSelectionToNode$,
   corePlugin,
@@ -326,6 +327,7 @@ export {
   searchOpen$,
   searchPlugin,
   setMarkdown$,
+  showLinkTitleField$,
   spellCheck$,
   switchFromPreviewToLinkEdit$,
   syntaxExtensions$,

package/dist/plugins/core/index.js

@@ -190,6 +190,7 @@ function rebind() {
     return activeEditorValue ? subs.map((s) => s(activeEditorValue)) : [];
   }, []);
 }
+const contentEditableWrapperElement$ = Cell(null);
 const activeEditorSubscriptions$ = Cell([], (r) => {
   r.pipe(r.combine(activeEditorSubscriptions$, activeEditor$), rebind());
 });
@@ -624,6 +625,7 @@ export {
   composerChildren$,
   contentEditableClassName$,
   contentEditableRef$,
+  contentEditableWrapperElement$,
   convertSelectionToNode$,
   corePlugin,
   createActiveEditorSubscription$,

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

@@ -7,10 +7,18 @@ import styles from "../../styles/ui.module.css.js";
 import classNames from "classnames";
 import { createCommand } from "lexical";
 import { useForm } from "react-hook-form";
-import { linkDialogState$, linkAutocompleteSuggestions$, onClickLinkCallback$, onWindowChange$, updateLink$, cancelLinkEdit$, switchFromPreviewToLinkEdit$, removeLink$ } from "./index.js";
+import { linkDialogState$, linkAutocompleteSuggestions$, onClickLinkCallback$, showLinkTitleField$, onWindowChange$, updateLink$, cancelLinkEdit$, switchFromPreviewToLinkEdit$, removeLink$ } from "./index.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 createCommand();
-function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggestions }) {
+function LinkEditForm({
+  url,
+  title,
+  onSubmit,
+  onCancel,
+  linkAutocompleteSuggestions,
+  showLinkTitleField,
+  showAnchorTextField
+}) {
   const {
     register,
     handleSubmit,
@@ -20,7 +28,9 @@ function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggesti
   } = useForm({
     values: {
       url,
-      title
+      title,
+      text: ""
+      // text is only for freshly created links with no content, it always starts empty
     }
   });
   const t = useTranslation();
@@ -51,7 +61,8 @@ function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggesti
         autofocus: true
       }
     )),
-    /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-title" }, t("createLink.title", "Title")), /* @__PURE__ */ React__default.createElement("input", { id: "link-title", className: styles.textInput, size: 40, ...register("title") })),
+    showAnchorTextField ? /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-text", title: t("createLink.textTooltip", "The text to be displayed for the link") }, t("createLink.text", "Anchor text")), /* @__PURE__ */ React__default.createElement("input", { id: "link-text", className: styles.textInput, size: 40, ...register("text") })) : null,
+    showLinkTitleField ? /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-title", title: t("createLink.titleTooltip", "The link's title attribute, shown on hover") }, t("createLink.title", "Link title")), /* @__PURE__ */ React__default.createElement("input", { id: "link-title", className: styles.textInput, size: 40, ...register("title") })) : null,
     /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement(
       "button",
       {
@@ -74,13 +85,22 @@ function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggesti
   );
 }
 const LinkDialog = () => {
-  const [editorRootElementRef, activeEditor, iconComponentFor, linkDialogState, linkAutocompleteSuggestions, onClickLinkCallback] = useCellValues(
+  const [
+    editorRootElementRef,
+    activeEditor,
+    iconComponentFor,
+    linkDialogState,
+    linkAutocompleteSuggestions,
+    onClickLinkCallback,
+    showLinkTitleField
+  ] = useCellValues(
     editorRootElementRef$,
     activeEditor$,
     iconComponentFor$,
     linkDialogState$,
     linkAutocompleteSuggestions$,
-    onClickLinkCallback$
+    onClickLinkCallback$,
+    showLinkTitleField$
   );
   const publishWindowChange = usePublisher(onWindowChange$);
   const updateLink = usePublisher(updateLink$);
@@ -135,7 +155,9 @@ const LinkDialog = () => {
         title: linkDialogState.title,
         onSubmit: updateLink,
         onCancel: cancelLinkEdit.bind(null),
-        linkAutocompleteSuggestions
+        linkAutocompleteSuggestions,
+        showLinkTitleField,
+        showAnchorTextField: !linkDialogState.hasInitialText
       }
     ),
     linkDialogState.type === "preview" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(

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

@@ -73,6 +73,7 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
           return {
             type: "edit",
             initialUrl: state.url,
+            hasInitialText: true,
             url: state.url,
             title: state.title,
             linkNodeKey: state.linkNodeKey,
@@ -86,12 +87,13 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
     linkDialogState$
   );
   r.sub(r.pipe(updateLink$, withLatestFrom(activeEditor$, linkDialogState$, currentSelection$)), ([payload, editor, state, selection]) => {
-    var _a, _b;
-    const url = ((_a = payload.url) == null ? void 0 : _a.trim()) ?? "";
-    const title = ((_b = payload.title) == null ? void 0 : _b.trim()) ?? "";
+    var _a, _b, _c;
+    const text = ((_a = payload.text) == null ? void 0 : _a.trim()) ?? "";
+    const url = ((_b = payload.url) == null ? void 0 : _b.trim()) ?? "";
+    const title = ((_c = payload.title) == null ? void 0 : _c.trim()) ?? "";
     if (url !== "") {
       if (selection == null ? void 0 : selection.isCollapsed()) {
-        const linkContent = title || url;
+        const linkContent = text || title || url;
         editor == null ? void 0 : editor.update(
           () => {
             const linkNode = getLinkNodeInSelection(selection);
@@ -208,7 +210,7 @@ const openLinkEditDialog$ = Action((r) => {
               r.pub(linkDialogState$, {
                 type: "edit",
                 initialUrl: node.getURL(),
-                initialTitle: node.getTitle() ?? "",
+                hasInitialText: true,
                 url: node.getURL(),
                 title: node.getTitle() ?? "",
                 linkNodeKey: node.getKey(),
@@ -218,7 +220,7 @@ const openLinkEditDialog$ = Action((r) => {
               r.pub(linkDialogState$, {
                 type: "edit",
                 initialUrl: "",
-                initialTitle: "",
+                hasInitialText: !(selection == null ? void 0 : selection.isCollapsed()),
                 title: "",
                 url: "",
                 linkNodeKey: "",
@@ -260,11 +262,13 @@ const onReadOnlyClickLinkCallback$ = Cell(null, (r) => {
     });
   });
 });
+const showLinkTitleField$ = Cell(true);
 const linkDialogPlugin = realmPlugin({
   init(r, params) {
     r.pub(addComposerChild$, (params == null ? void 0 : params.LinkDialog) ?? LinkDialog);
     r.pub(onClickLinkCallback$, (params == null ? void 0 : params.onClickLinkCallback) ?? null);
     r.pub(onReadOnlyClickLinkCallback$, (params == null ? void 0 : params.onReadOnlyClickLinkCallback) ?? null);
+    r.pub(showLinkTitleField$, (params == null ? void 0 : params.showLinkTitleField) ?? true);
   },
   update(r, params = {}) {
     r.pub(linkAutocompleteSuggestions$, params.linkAutocompleteSuggestions ?? []);
@@ -281,6 +285,7 @@ export {
   onWindowChange$,
   openLinkEditDialog$,
   removeLink$,
+  showLinkTitleField$,
   switchFromPreviewToLinkEdit$,
   updateLink$
 };

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.46.1",
+  "version": "3.48.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",