@mdxeditor/editor 3.52.1 → 3.52.3

package/dist/directive-editors/AdmonitionDirectiveDescriptor.js

@@ -9,10 +9,11 @@ const AdmonitionDirectiveDescriptor = {
     return ADMONITION_TYPES.includes(node.name);
   },
   Editor({ mdastNode }) {
+    var _a;
     const {
       config: { theme }
     } = useNestedEditorContext();
-    return /* @__PURE__ */ React__default.createElement("div", { className: theme.admonition[mdastNode.name] }, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React__default.createElement("div", { className: (_a = theme.admonition) == null ? void 0 : _a[mdastNode.name] }, /* @__PURE__ */ React__default.createElement(
       NestedLexicalEditor,
       {
         block: true,

package/dist/exportMarkdownFromLexical.js

@@ -212,7 +212,7 @@ function fixWrappingWhitespace(node, parentChain) {
   if (node.type === "strong" || node.type === "emphasis") {
     const lastChild = node.children.at(-1);
     if ((lastChild == null ? void 0 : lastChild.type) === "text") {
-      const trailingWhitespace = lastChild.value.match(TRAILING_WHITESPACE_REGEXP);
+      const trailingWhitespace = TRAILING_WHITESPACE_REGEXP.exec(lastChild.value);
       if (trailingWhitespace) {
         lastChild.value = lastChild.value.replace(TRAILING_WHITESPACE_REGEXP, "");
         const parent = parentChain.at(-1);
@@ -227,7 +227,7 @@ function fixWrappingWhitespace(node, parentChain) {
     }
     const firstChild = node.children.at(0);
     if ((firstChild == null ? void 0 : firstChild.type) === "text") {
-      const leadingWhitespace = firstChild.value.match(LEADING_WHITESPACE_REGEXP);
+      const leadingWhitespace = LEADING_WHITESPACE_REGEXP.exec(firstChild.value);
       if (leadingWhitespace) {
         firstChild.value = firstChild.value.replace(LEADING_WHITESPACE_REGEXP, "");
         const parent = parentChain.at(-1);

package/dist/importMarkdownToLexical.js

@@ -98,7 +98,7 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors })
     if (!visitor) {
       try {
         throw new UnrecognizedMarkdownConstructError(`Unsupported markdown syntax: ${toMarkdown(mdastNode)}`);
-      } catch (e) {
+      } catch (_e) {
         throw new UnrecognizedMarkdownConstructError(
           `Parsing of the following markdown structure failed: ${JSON.stringify({
             type: mdastNode.type,

package/dist/index.d.ts

@@ -424,7 +424,7 @@ export declare const ChangeAdmonitionType: () => JSX_2.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: () => JSX_2.Element;
+export declare const ChangeCodeMirrorLanguage: () => JSX_2.Element | null;
 
 export declare type ClickLinkCallback = (url: string) => void;
 
@@ -548,11 +548,12 @@ export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
     };
     static getType(): string;
     static clone(node: CodeBlockNode): CodeBlockNode;
+    afterCloneFrom(prevNode: this): void;
     static importJSON(serializedNode: SerializedCodeBlockNode): CodeBlockNode;
     static importDOM(): DOMConversionMap;
     constructor(code: string, language: string, meta: string, key?: NodeKey);
     exportJSON(): SerializedCodeBlockNode;
-    createDOM(_config: EditorConfig): HTMLDivElement;
+    createDOM(_config: EditorConfig, _editor: LexicalEditor): HTMLDivElement;
     updateDOM(): false;
     getCode(): string;
     getMeta(): string;
@@ -573,11 +574,11 @@ export declare const codeBlockPlugin: (params?: {
     /**
      * Pass an array of {@link CodeBlockEditorDescriptor} to register custom code block editors.
      */
-    codeBlockEditorDescriptors?: CodeBlockEditorDescriptor[] | undefined;
+    codeBlockEditorDescriptors?: CodeBlockEditorDescriptor[];
     /**
      * The default language to use when creating a new code block if no language is passed.
      */
-    defaultCodeBlockLanguage?: string | undefined;
+    defaultCodeBlockLanguage?: string;
 } | undefined) => RealmPlugin;
 
 /**
@@ -604,13 +605,13 @@ export declare const codeMirrorPlugin: (params?: {
     /**
      * Optional, additional CodeMirror extensions to load in the diff/source mode.
      */
-    codeMirrorExtensions?: Extension_2[] | undefined;
+    codeMirrorExtensions?: Extension_2[];
     /**
      * Whether or not to try to dynamically load the code block language support.
      * Disable if you want to manually pass the supported languages.
      * @group CodeMirror
      */
-    autoLoadLanguageSupport?: boolean | undefined;
+    autoLoadLanguageSupport?: boolean;
 } | undefined) => RealmPlugin;
 
 /**
@@ -887,7 +888,7 @@ export declare const DialogButton: default_2.ForwardRefExoticComponent<{
     /**
      * The autocomplete suggestions to show in the dialog input.
      */
-    autocompleteSuggestions?: string[] | undefined;
+    autocompleteSuggestions?: string[];
     /**
      * The callback to call when the dialog is submitted. The callback receives the value of the text input as a parameter.
      */
@@ -924,21 +925,21 @@ export declare const diffSourcePlugin: (params?: {
      * The initial view mode of the editor.
      * @default 'rich-text'
      */
-    viewMode?: ViewMode | undefined;
+    viewMode?: ViewMode;
     /**
      * The markdown to show in the diff editor.
      * @default ''
      */
-    diffMarkdown?: string | undefined;
+    diffMarkdown?: string;
     /**
      * Optional, additional CodeMirror extensions to load in the diff/source mode.
      */
-    codeMirrorExtensions?: Extension_2[] | undefined;
+    codeMirrorExtensions?: Extension_2[];
     /**
      * Set the diff editor to read-only.
      * @default false
      */
-    readOnlyDiff?: boolean | undefined;
+    readOnlyDiff?: boolean;
 } | undefined) => RealmPlugin;
 
 /**
@@ -1072,7 +1073,7 @@ export declare const directivesPlugin: (params?: {
      * Set this option to display unknown text-directives as normal text nodes.
      * This is handy when colons are used to separate words, e.g. in german "Schüler:in"
      */
-    escapeUnknownTextDirectives?: boolean | undefined;
+    escapeUnknownTextDirectives?: boolean;
 } | undefined) => RealmPlugin;
 
 /**
@@ -1362,7 +1363,7 @@ export declare const headingsPlugin: (params?: {
      * Allows you to limit the headings used in the editor. Affects the block type dropdown and the keyboard shortcuts.
      * @default [1, 2, 3, 4, 5, 6]
      */
-    allowedHeadingLevels?: readonly HEADING_LEVEL[] | undefined;
+    allowedHeadingLevels?: readonly HEADING_LEVEL[];
 } | undefined) => RealmPlugin;
 
 /**
@@ -1412,6 +1413,7 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     /* Excluded from this release type: __rest */
     /* Excluded from this release type: getType */
     /* Excluded from this release type: clone */
+    /* Excluded from this release type: afterCloneFrom */
     /* Excluded from this release type: importJSON */
     /* Excluded from this release type: exportDOM */
     /* Excluded from this release type: importDOM */
@@ -1451,15 +1453,15 @@ export declare const imagePlaceholder$: NodeRef< FC<{}> | null>;
  * @group Image
  */
 export declare const imagePlugin: (params?: {
-    imageUploadHandler?: ImageUploadHandler | undefined;
-    imageAutocompleteSuggestions?: string[] | undefined;
-    disableImageResize?: boolean | undefined;
-    disableImageSettingsButton?: boolean | undefined;
-    allowSetImageDimensions?: boolean | undefined;
-    imagePreviewHandler?: ImagePreviewHandler | undefined;
-    ImageDialog?: FC<{}> | (() => JSX.Element) | undefined;
-    EditImageToolbar?: FC<{}> | (() => JSX.Element) | undefined;
-    imagePlaceholder?: (() => JSX.Element) | null | undefined;
+    imageUploadHandler?: ImageUploadHandler;
+    imageAutocompleteSuggestions?: string[];
+    disableImageResize?: boolean;
+    disableImageSettingsButton?: boolean;
+    allowSetImageDimensions?: boolean;
+    imagePreviewHandler?: ImagePreviewHandler;
+    ImageDialog?: (() => JSX.Element) | React.FC;
+    EditImageToolbar?: (() => JSX.Element) | React.FC;
+    imagePlaceholder?: (() => JSX.Element) | null;
 } | undefined) => RealmPlugin;
 
 /**
@@ -1577,9 +1579,9 @@ export declare const insertDecoratorNode$: NodeRef<() => DecoratorNode<unknown>>
  * @group Directive
  */
 export declare const insertDirective$: NodeRef<{
-    type: Directives['type'];
+    type: Directives["type"];
     name: string;
-    attributes?: Directives['attributes'];
+    attributes?: Directives["attributes"];
 }>;
 
 /**
@@ -1620,15 +1622,15 @@ export declare type InsertImageParameters = FileImageParameters | SrcImageParame
  * @group JSX
  */
 export declare const insertJsx$: NodeRef<{
-    kind: 'text';
+    kind: "text";
     name: string;
     props: JsxProperties;
-    children?: Mdast.PhrasingContent[] | undefined;
+    children?: MdxJsxTextElement["children"];
 } | {
-    kind: 'flow';
+    kind: "flow";
     name: string;
     props: JsxProperties;
-    children?: (Mdast.BlockContent | Mdast.DefinitionContent)[] | undefined;
+    children?: MdxJsxFlowElement["children"];
 }>;
 
 /**
@@ -1666,11 +1668,11 @@ export declare const insertTable$: NodeRef<{
     /**
      * The number of rows of the table.
      */
-    rows?: number | undefined;
+    rows?: number;
     /**
      * The number of columns of the table.
      */
-    columns?: number | undefined;
+    columns?: number;
 }>;
 
 /**
@@ -1968,23 +1970,23 @@ export declare const linkDialogPlugin: (params?: {
     /**
      * If passed, the link dialog will be rendered using this component instead of the default one.
      */
-    LinkDialog?: (() => JSX.Element) | undefined;
+    LinkDialog?: () => JSX.Element;
     /**
      * If passed, the link input field will autocomplete using the published suggestions.
      */
-    linkAutocompleteSuggestions?: string[] | undefined;
+    linkAutocompleteSuggestions?: string[];
     /**
      * If set, clicking on the link in the preview popup will call this callback instead of opening the link.
      */
-    onClickLinkCallback?: ClickLinkCallback | undefined;
+    onClickLinkCallback?: ClickLinkCallback;
     /**
      * Invoked when a link is clicked in read-only mode
      */
-    onReadOnlyClickLinkCallback?: ReadOnlyClickLinkCallback | undefined;
+    onReadOnlyClickLinkCallback?: ReadOnlyClickLinkCallback;
     /**
      * If true, show the "Link title" field in link dialogs (this sets mouseover text, NOT anchor text)
      */
-    showLinkTitleField?: boolean | undefined;
+    showLinkTitleField?: boolean;
 } | undefined) => RealmPlugin;
 
 /**
@@ -2002,12 +2004,12 @@ export declare const linkPlugin: (params?: {
      * An optional function to validate the URL of a link.
      * By default, no validation is performed.
      */
-    validateUrl?: default_2.ComponentProps<typeof LinkPlugin>['validateUrl'];
+    validateUrl?: default_2.ComponentProps<typeof LinkPlugin>["validateUrl"];
     /**
      * Whether to disable the auto-linking of URLs and email addresses.
      * @default false
      */
-    disableAutoLink?: boolean | undefined;
+    disableAutoLink?: boolean;
 } | undefined) => RealmPlugin;
 
 /**
@@ -2237,7 +2239,7 @@ export declare interface MDXEditorMethods {
     /**
      * Sets focus on input
      */
-    focus: (callbackFn?: (() => void) | undefined, opts?: {
+    focus: (callbackFn?: () => void, opts?: {
         defaultSelection?: 'rootStart' | 'rootEnd';
         preventScroll?: boolean;
     }) => void;
@@ -2781,7 +2783,7 @@ export declare const Select: <T extends string>(props: {
     items: ({
         label: string | JSX.Element;
         value: T;
-    } | 'separator')[];
+    } | "separator")[];
 }) => JSX_2.Element;
 
 /* Excluded from this release type: SelectButtonTrigger */
@@ -2875,7 +2877,7 @@ export declare const showLinkTitleField$: NodeRef<boolean>;
  * 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: () => JSX_2.Element;
+export declare const ShowSandpackInfo: () => JSX_2.Element | null;
 
 /**
  * A toolbar primitive that allows you to build an UI with multiple exclusive toggle groups, like the list type toggle.
@@ -2887,8 +2889,8 @@ export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChan
         value: T;
         contents: default_2.ReactNode;
     }[];
-    onChange: (value: T | '') => void;
-    value: T | '';
+    onChange: (value: T | "") => void;
+    value: T | "";
     ggClassName?: string;
     className?: string;
 }) => JSX_2.Element;
@@ -3036,11 +3038,11 @@ export declare const toolbarPlugin: (params?: {
     /**
      * The class name to apply to the toolbar element
      */
-    toolbarClassName?: string | undefined;
+    toolbarClassName?: string;
     /**
      * Controls the position of the toolbar (top by default)
      */
-    toolbarPosition?: "top" | "bottom" | undefined;
+    toolbarPosition?: "top" | "bottom";
 } | undefined) => RealmPlugin;
 
 /* Excluded from this release type: ToolbarToggleItem */

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -45,6 +45,13 @@ class CodeBlockNode extends DecoratorNode {
   static clone(node) {
     return new CodeBlockNode(node.__code, node.__language, node.__meta, node.__key);
   }
+  afterCloneFrom(prevNode) {
+    super.afterCloneFrom(prevNode);
+    this.__code = prevNode.__code;
+    this.__meta = prevNode.__meta;
+    this.__language = prevNode.__language;
+    this.__focusEmitter = voidEmitter();
+  }
   static importJSON(serializedNode) {
     const { code, meta, language } = serializedNode;
     return $createCodeBlockNode({
@@ -73,7 +80,7 @@ class CodeBlockNode extends DecoratorNode {
     };
   }
   // View
-  createDOM(_config) {
+  createDOM(_config, _editor) {
     return document.createElement("div");
   }
   updateDOM() {
@@ -145,9 +152,7 @@ const CodeBlockEditorContainer = (props) => {
   const codeBlockEditorDescriptors = useCellValue(codeBlockEditorDescriptors$);
   const defaultCodeBlockLanguage = useCellValue(defaultCodeBlockLanguage$);
   let descriptor = codeBlockEditorDescriptors.sort((a, b) => b.priority - a.priority).find((descriptor2) => descriptor2.match(props.language || "", props.meta || ""));
-  if (!descriptor) {
-    descriptor = codeBlockEditorDescriptors.find((descriptor2) => descriptor2.match(defaultCodeBlockLanguage || "", props.meta || ""));
-  }
+  descriptor ?? (descriptor = codeBlockEditorDescriptors.find((descriptor2) => descriptor2.match(defaultCodeBlockLanguage || "", props.meta || "")));
   if (!descriptor) {
     throw new Error(`No CodeBlockEditor registered for language=${props.language} meta=${props.meta}`);
   }
@@ -164,10 +169,10 @@ function $isCodeBlockNode(node) {
 }
 function $convertPreElement(element) {
   const preElement = element;
-  const code = preElement.textContent ?? "";
+  const code = preElement.textContent;
   const classAttribute = element.getAttribute("class") ?? "";
   const dataLanguageAttribute = element.getAttribute("data-language") ?? "";
-  const languageMatch = classAttribute.match(/language-(\w+)/);
+  const languageMatch = /language-(\w+)/.exec(classAttribute);
   const language = languageMatch ? languageMatch[1] : dataLanguageAttribute;
   const meta = preElement.getAttribute("data-meta") ?? "";
   return {

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -66,7 +66,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
           try {
             const languageSupport = await languageData.load();
             extensions.push(languageSupport.extension);
-          } catch (e) {
+          } catch (_e) {
             console.warn("failed to load language support for", language);
           }
         }

package/dist/plugins/codemirror/index.js

@@ -46,7 +46,7 @@ const codeMirrorPlugin = realmPlugin({
 function buildCodeBlockDescriptor(codeBlockLanguages) {
   return {
     match(language, meta) {
-      return Boolean(Object.hasOwn(codeBlockLanguages, language ?? "")) && !meta;
+      return Object.hasOwn(codeBlockLanguages, language ?? "") && !meta;
     },
     priority: 1,
     Editor: CodeMirrorEditor

package/dist/plugins/core/index.js

@@ -70,9 +70,7 @@ const currentSelection$ = Cell(null, (r) => {
       const parent = e.getParent();
       return parent !== null && $isRootOrShadowRoot(parent);
     });
-    if (element === null) {
-      element = anchorNode.getTopLevelElementOrThrow();
-    }
+    element ?? (element = anchorNode.getTopLevelElementOrThrow());
     const elementKey = element.getKey();
     const elementDOM = theEditor.getElementByKey(elementKey);
     if (elementDOM !== null) {

package/dist/plugins/headings/index.js

@@ -6,31 +6,31 @@ import { controlOrMeta } from "../../utils/detectMac.js";
 import { createRootEditorSubscription$, convertSelectionToNode$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
 import { LexicalHeadingVisitor } from "./LexicalHeadingVisitor.js";
 import { MdastHeadingVisitor } from "./MdastHeadingVisitor.js";
-const FORMATTING_KEYS = [48, 49, 50, 51, 52, 53, 54];
+const FORMATTING_KEYS = ["Digit0", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6"];
 const ALL_HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
 const CODE_TO_HEADING_LEVEL_MAP = {
-  49: 1,
-  50: 2,
-  51: 3,
-  52: 4,
-  53: 5,
-  54: 6
+  Digit1: 1,
+  Digit2: 2,
+  Digit3: 3,
+  Digit4: 4,
+  Digit5: 5,
+  Digit6: 6
 };
 const allowedHeadingLevels$ = Cell(ALL_HEADING_LEVELS, (r) => {
   r.pub(createRootEditorSubscription$, (theRootEditor) => {
     return theRootEditor.registerCommand(
       KEY_DOWN_COMMAND,
       (event) => {
-        const { keyCode, ctrlKey, metaKey, altKey } = event;
-        if (FORMATTING_KEYS.includes(keyCode) && controlOrMeta(metaKey, ctrlKey) && altKey) {
+        const { code, ctrlKey, metaKey, altKey } = event;
+        if (FORMATTING_KEYS.includes(code) && controlOrMeta(metaKey, ctrlKey) && altKey) {
           event.preventDefault();
           theRootEditor.update(() => {
-            if (keyCode === 48) {
+            if (code === "Digit0") {
               r.pub(convertSelectionToNode$, () => $createParagraphNode());
             } else {
               const allowedHeadingLevels = r.getValue(allowedHeadingLevels$);
-              const requestedHeadingLevel = CODE_TO_HEADING_LEVEL_MAP[keyCode];
-              if (!allowedHeadingLevels.includes(requestedHeadingLevel)) {
+              const requestedHeadingLevel = CODE_TO_HEADING_LEVEL_MAP[code];
+              if (allowedHeadingLevels.includes(requestedHeadingLevel)) {
                 r.pub(convertSelectionToNode$, () => $createHeadingNode(`h${requestedHeadingLevel}`));
               }
             }

package/dist/plugins/image/EditImageToolbar.js

@@ -39,7 +39,7 @@ function EditImageToolbar(props) {
         openEditImageDialog({
           nodeKey,
           initialValues: {
-            src: !initialImagePath ? imageSource : initialImagePath,
+            src: initialImagePath ?? imageSource,
             title,
             altText: alt,
             width: parseImageDimension(width),

package/dist/plugins/image/ImageNode.js

@@ -37,8 +37,8 @@ class ImageNode extends DecoratorNode {
     this.__src = src;
     this.__title = title;
     this.__altText = altText;
-    this.__width = width ? width : "inherit";
-    this.__height = height ? height : "inherit";
+    this.__width = width ?? "inherit";
+    this.__height = height ?? "inherit";
     this.__rest = rest ?? [];
   }
   /** @internal */
@@ -50,6 +50,16 @@ class ImageNode extends DecoratorNode {
     return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__rest, node.__key);
   }
   /** @internal */
+  afterCloneFrom(prevNode) {
+    super.afterCloneFrom(prevNode);
+    this.__src = prevNode.__src;
+    this.__altText = prevNode.__altText;
+    this.__title = prevNode.__title;
+    this.__width = prevNode.__width;
+    this.__height = prevNode.__height;
+    this.__rest = prevNode.__rest;
+  }
+  /** @internal */
   static importJSON(serializedNode) {
     const { altText, title, src, width, rest, height } = serializedNode;
     const node = $createImageNode({
@@ -109,7 +119,7 @@ class ImageNode extends DecoratorNode {
     writable.__height = height;
   }
   /** @internal */
-  createDOM(config) {
+  createDOM(config, _editor) {
     const span = document.createElement("span");
     const theme = config.theme;
     const className = theme.image;

package/dist/plugins/image/ImageResizer.js

@@ -35,7 +35,7 @@ function ImageResizer({
     startY: 0
   });
   const editorRootElement = editor.getRootElement();
-  const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
+  const maxWidthContainer = maxWidth ?? (editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100);
   const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
   const minWidth = 100;
   const minHeight = 100;

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

@@ -1,6 +1,6 @@
-import { $isLinkNode, $createLinkNode, TOGGLE_LINK_COMMAND, LinkNode } from "@lexical/link";
+import { $isLinkNode, $createLinkNode, $isAutoLinkNode, 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, $getNodeByKey, $createTextNode, $insertNodes, $isTextNode, $getNearestNodeFromDOMNode } from "lexical";
+import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DOWN_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";
@@ -46,7 +46,7 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
   });
   r.pub(createActiveEditorSubscription$, (editor) => {
     return editor.registerCommand(
-      KEY_MODIFIER_COMMAND,
+      KEY_DOWN_COMMAND,
       (event) => {
         if (event.key === "k" && (IS_APPLE ? event.metaKey : event.ctrlKey) && !r.getValue(readOnly$)) {
           const selection = $getSelection();
@@ -104,9 +104,16 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
               $insertNodes([node]);
               node.select();
             } else {
-              linkNode.setURL(url);
-              linkNode.setTitle(title);
-              updateLinkText(linkNode.getFirstChild(), text);
+              if ($isAutoLinkNode(linkNode)) {
+                const newLinkNode = $createLinkNode(url, { title });
+                newLinkNode.append($createTextNode(text));
+                linkNode.replace(newLinkNode);
+                newLinkNode.select();
+              } else {
+                linkNode.setURL(url);
+                linkNode.setTitle(title);
+                updateLinkText(linkNode.getFirstChild(), text);
+              }
             }
           },
           { discrete: true }

package/dist/plugins/lists/LexicalListItemVisitor.js

@@ -23,12 +23,10 @@ const LexicalListItemVisitor = {
       let surroundingParagraph = null;
       for (const child of lexicalNode.getChildren()) {
         if ($isTextNode(child) || $isLineBreakNode(child) || child.isInline() && ($isElementNode(child) || $isDecoratorNode(child))) {
-          if (!surroundingParagraph) {
-            surroundingParagraph = actions.appendToParent(listItem, {
-              type: "paragraph",
-              children: []
-            });
-          }
+          surroundingParagraph ?? (surroundingParagraph = actions.appendToParent(listItem, {
+            type: "paragraph",
+            children: []
+          }));
           actions.visit(child, surroundingParagraph);
         } else {
           surroundingParagraph = null;

package/dist/plugins/lists/index.js

@@ -29,9 +29,7 @@ const currentListType$ = Cell("", (r) => {
       const parent = e.getParent();
       return parent !== null && $isRootOrShadowRoot(parent);
     });
-    if (element === null) {
-      element = anchorNode.getTopLevelElementOrThrow();
-    }
+    element ?? (element = anchorNode.getTopLevelElementOrThrow());
     const elementKey = element.getKey();
     const elementDOM = theEditor.getElementByKey(elementKey);
     if (elementDOM !== null) {

package/dist/plugins/maxlength/index.js

@@ -1,4 +1,4 @@
-import { trimTextContentFromAnchor } from "@lexical/selection";
+import { $trimTextContentFromAnchor } from "@lexical/selection";
 import { $restoreEditorState } from "@lexical/utils";
 import { RootNode, $getSelection, $isRangeSelection } from "lexical";
 import { realmPlugin } from "../../RealmWithPlugins.js";
@@ -23,7 +23,7 @@ const maxLengthPlugin = realmPlugin({
               lastRestoredEditorState = prevEditorState;
               $restoreEditorState(editor, prevEditorState);
             } else {
-              trimTextContentFromAnchor(editor, anchor, delCount);
+              $trimTextContentFromAnchor(editor, anchor, delCount);
             }
           }
         }

package/dist/plugins/table/TableEditor.js

@@ -33,9 +33,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
   const [iconComponentFor, readOnly] = useCellValues(iconComponentFor$, readOnly$);
   const getCellKey = React__default.useMemo(() => {
     return (cell) => {
-      if (!cell.__cacheKey) {
-        cell.__cacheKey = uuidv4();
-      }
+      cell.__cacheKey ?? (cell.__cacheKey = uuidv4());
       return cell.__cacheKey;
     };
   }, []);
@@ -323,7 +321,9 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
     );
   }, [colIndex, editor, rootEditor, rowIndex, saveAndFocus, setActiveCell]);
   React__default.useEffect(() => {
-    focus && editor.focus();
+    if (focus) {
+      editor.focus();
+    }
   }, [focus, editor]);
   return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(RichTextPlugin, { contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, null), placeholder: /* @__PURE__ */ React__default.createElement("div", null), ErrorBoundary: LexicalErrorBoundary }), nestedEditorChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(HistoryPlugin, null));
 };

package/dist/plugins/table/TableNode.js

@@ -157,9 +157,7 @@ class TableNode extends DecoratorNode {
   setColumnAlign(colIndex, align) {
     const self = this.getWritable();
     const table = self.__mdastNode;
-    if (table.align == null) {
-      table.align = [];
-    }
+    table.align ?? (table.align = []);
     table.align[colIndex] = align;
   }
   /** @internal */
@@ -195,7 +193,7 @@ function $convertTableElement(element) {
           children: [
             {
               type: "text",
-              value: cell.textContent ?? ""
+              value: cell.textContent
             }
           ]
         };

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

@@ -1,14 +1,18 @@
 import { useCellValues } from "@mdxeditor/gurx";
 import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
+import { $isCodeBlockNode } from "../../codeblock/CodeBlockNode.js";
 import { codeBlockLanguages$ } from "../../codemirror/index.js";
 import { editorInFocus$, activeEditor$, useTranslation } from "../../core/index.js";
 import { Select } from "../primitives/select.js";
 const EMPTY_VALUE = "__EMPTY_VALUE__";
 const ChangeCodeMirrorLanguage = () => {
   const [editorInFocus, theEditor, codeBlockLanguages] = useCellValues(editorInFocus$, activeEditor$, codeBlockLanguages$);
-  const codeBlockNode = editorInFocus.rootNode;
+  const codeBlockNode = $isCodeBlockNode(editorInFocus.rootNode) ? editorInFocus.rootNode : null;
   const t = useTranslation();
+  if (!codeBlockNode) {
+    return null;
+  }
   let currentLanguage = codeBlockNode.getLanguage();
   if (currentLanguage === "") {
     currentLanguage = EMPTY_VALUE;

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

@@ -1,5 +1,6 @@
 import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
+import { $isCodeBlockNode } from "../../codeblock/CodeBlockNode.js";
 import { editorInFocus$, activeEditor$, iconComponentFor$, useTranslation } from "../../core/index.js";
 import { sandpackConfig$ } from "../../sandpack/index.js";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
@@ -11,8 +12,11 @@ const ShowSandpackInfo = () => {
     iconComponentFor$,
     sandpackConfig$
   );
-  const sandpackNode = editorInFocus.rootNode;
   const t = useTranslation();
+  const sandpackNode = $isCodeBlockNode(editorInFocus.rootNode) ? editorInFocus.rootNode : null;
+  if (!sandpackNode) {
+    return null;
+  }
   const preset = sandpackConfig.presets.find((preset2) => preset2.meta === sandpackNode.getMeta());
   return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,

package/dist/utils/detectMac.js

@@ -1,5 +1,9 @@
 const CAN_USE_DOM = typeof window !== "undefined" && typeof window.document.createElement !== "undefined";
-const IS_APPLE = CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+const IS_APPLE = CAN_USE_DOM && (() => {
+  var _a;
+  const platform = (_a = navigator.userAgentData) == null ? void 0 : _a.platform;
+  return platform ? /mac/i.test(platform) : /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+})();
 function controlOrMeta(metaKey, ctrlKey) {
   if (IS_APPLE) {
     return metaKey;

package/dist/utils/lexicalHelpers.js

@@ -27,10 +27,26 @@ function getSelectedNode(selection) {
     } else {
       return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
     }
-  } catch (e) {
+  } catch {
     return null;
   }
 }
+const WILL_CHANGE_CONTAINING_BLOCK_PROPS = ["transform", "perspective", "filter", "backdrop-filter", "contain", "container-type"];
+const CONTAIN_VALUES_CREATING_CONTAINING_BLOCK = ["layout", "paint", "strict", "content"];
+function getFixedContainingBlock(element) {
+  let current = element == null ? void 0 : element.parentElement;
+  while (current) {
+    const style = window.getComputedStyle(current);
+    const willChangeProps = style.willChange.split(",").map((v) => v.trim());
+    const hasRelevantWillChange = willChangeProps.some((prop) => WILL_CHANGE_CONTAINING_BLOCK_PROPS.includes(prop));
+    const createsContainingBlock = style.transform !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || CONTAIN_VALUES_CREATING_CONTAINING_BLOCK.includes(style.contain) || style.containerType !== "normal" || style.contentVisibility === "auto" || hasRelevantWillChange;
+    if (createsContainingBlock) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
 function getSelectionRectangle(editor) {
   const selection = $getSelection();
   const nativeSelection = window.getSelection();
@@ -57,13 +73,23 @@ function getSelectionRectangle(editor) {
         rect = domRange.getBoundingClientRect();
       }
     }
+    const fixedContainer = getFixedContainingBlock(rootElement);
+    if (fixedContainer) {
+      const containerRect = fixedContainer.getBoundingClientRect();
+      return {
+        top: Math.round(rect.top - containerRect.top),
+        left: Math.round(rect.left - containerRect.left),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height)
+      };
+    }
     return {
       top: Math.round(rect.top),
       left: Math.round(rect.left),
       width: Math.round(rect.width),
       height: Math.round(rect.height)
     };
-  } else if (!activeElement || activeElement.className !== "link-input") {
+  } else if ((activeElement == null ? void 0 : activeElement.className) !== "link-input") {
     return null;
   }
   return null;

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.52.1",
+  "version": "3.52.3",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -107,6 +107,7 @@
     "@babel/preset-typescript": "^7.23.3",
     "@ladle/react": "^5.0.2",
     "@ngneat/falso": "^6.4.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^16.3.0",
     "@types/express": "^4.17.17",
@@ -117,14 +118,14 @@
     "@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",
+    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/parser": "^8.50.1",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.14",
     "cm6-theme-basic-dark": "^0.2.0",
     "dotenv": "^16.4.5",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -152,9 +153,9 @@
     "typedoc": "^0.25.13",
     "typedoc-plugin-markdown": "^4.0.2",
     "typedoc-plugin-no-inherit": "^1.4.0",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "^7.9.0",
+    "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.0.2",
+    "user-agent-data-types": "^0.4.2",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-svgr": "^4.2.0",