@mdxeditor/editor 4.2.4 → 4.3.0

package/dist/index.d.ts

@@ -112,6 +112,8 @@ export declare function $createImageNode(params: CreateImageNodeParameters): Ima
  */
 export declare function $createTableNode(mdastNode: Mdast.Table): TableNode;
 
+/* Excluded from this release type: $insertDecoratorNodeAtSelection */
+
 /**
  * Returns true if the given node is a {@link CodeBlockNode}.
  * @group Code Block

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$, addTableCellEditorChild$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, defaultCodeBlockLanguage$, directiveDescriptors$, editorInFocus$, editorInTable$, editorRootElementRef$, editorWrapperElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, jsxKindMismatchPolicy$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, tableCellEditorChildren$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
+import { $insertDecoratorNodeAtSelection, Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addBottomAreaChild$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addTableCellEditorChild$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, defaultCodeBlockLanguage$, directiveDescriptors$, editorInFocus$, editorInTable$, editorRootElementRef$, editorWrapperElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, jsxKindMismatchPolicy$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, tableCellEditorChildren$, 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";
@@ -78,6 +78,7 @@ export {
   $createGenericHTMLNode,
   $createImageNode,
   $createTableNode,
+  $insertDecoratorNodeAtSelection,
   $isCodeBlockNode,
   $isDirectiveNode,
   $isFrontmatterNode,

package/dist/plugins/core/index.js

@@ -1,10 +1,11 @@
 import { realmPlugin } from "../../RealmWithPlugins.js";
 import { createEmptyHistoryState } from "@lexical/history";
 import { $isHeadingNode } from "@lexical/rich-text";
+import { $isListItemNode } from "@lexical/list";
 import { $setBlocksType } from "@lexical/selection";
-import { $findMatchingParent, $wrapNodeInElement, $insertNodeToNearestRoot } from "@lexical/utils";
+import { $wrapNodeInElement, $findMatchingParent, $insertNodeToNearestRoot } from "@lexical/utils";
 import { Signal, Cell, withLatestFrom, map, filter, useCellValue, scan } from "@mdxeditor/gurx";
-import { createCommand, FORMAT_TEXT_COMMAND, $getSelection, $isRangeSelection, BLUR_COMMAND, COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND, $getRoot, DecoratorNode, $createParagraphNode, FOCUS_COMMAND, $isRootOrShadowRoot, $insertNodes, $setSelection, ParagraphNode, TextNode } from "lexical";
+import { $insertNodes, $isRootOrShadowRoot, $createParagraphNode, $getSelection, $isRangeSelection, $caretFromPoint, $isTextPointCaret, $splitAtPointCaretNext, createCommand, FORMAT_TEXT_COMMAND, BLUR_COMMAND, COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND, $getRoot, DecoratorNode, FOCUS_COMMAND, $setSelection, ParagraphNode, TextNode } from "lexical";
 import { gfmStrikethrough } from "micromark-extension-gfm-strikethrough";
 import { gfmStrikethroughToMarkdown, gfmStrikethroughFromMarkdown } from "mdast-util-gfm-strikethrough";
 import { highlightMarkToMarkdown, highlightMarkFromMarkdown } from "mdast-util-highlight-mark";
@@ -438,6 +439,30 @@ const convertSelectionToNode$ = Signal((r) => {
     });
   });
 });
+function $insertDecoratorNodeAtSelection(node) {
+  if (node.isInline()) {
+    $insertNodes([node]);
+    if ($isRootOrShadowRoot(node.getParentOrThrow())) {
+      $wrapNodeInElement(node, $createParagraphNode).selectEnd();
+    }
+    return;
+  }
+  const selection = $getSelection();
+  if ($isRangeSelection(selection)) {
+    const listItem = $findMatchingParent(selection.focus.getNode(), $isListItemNode);
+    if ($isListItemNode(listItem)) {
+      let caret = $caretFromPoint(selection.focus, "next");
+      while (caret !== null && ($isTextPointCaret(caret) || !listItem.is(caret.getParentAtCaret()))) {
+        caret = $splitAtPointCaretNext(caret);
+      }
+      if (caret !== null) {
+        caret.insert(node);
+        return;
+      }
+    }
+  }
+  $insertNodeToNearestRoot(node);
+}
 const insertDecoratorNode$ = Signal((r) => {
   r.sub(r.pipe(insertDecoratorNode$, withLatestFrom(activeEditor$)), ([nodeFactory, theEditor]) => {
     theEditor == null ? void 0 : theEditor.focus(
@@ -447,14 +472,7 @@ const insertDecoratorNode$ = Signal((r) => {
           if ($isRangeSelection(selection)) {
             theEditor.update(() => {
               const node = nodeFactory();
-              if (node.isInline()) {
-                $insertNodes([node]);
-                if ($isRootOrShadowRoot(node.getParentOrThrow())) {
-                  $wrapNodeInElement(node, $createParagraphNode).selectEnd();
-                }
-              } else {
-                $insertNodeToNearestRoot(node);
-              }
+              $insertDecoratorNodeAtSelection(node);
               setTimeout(() => {
                 if ("select" in node && typeof node.select === "function") {
                   node.select();
@@ -611,6 +629,7 @@ function useTranslation() {
 }
 export {
   $createGenericHTMLNode,
+  $insertDecoratorNodeAtSelection,
   $isGenericHTMLNode,
   Appender,
   GenericHTMLNode,

package/dist/plugins/frontmatter/FrontmatterEditor.js

@@ -58,7 +58,7 @@ const FrontmatterEditor = ({ yaml, onChange }) => {
         setFrontmatterDialogOpen(open);
       }
     },
-    /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.largeDialogContent, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(Dialog.Title, { className: styles.dialogTitle }, t("frontmatterEditor.title", "Edit document frontmatter")), /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.largeDialogContent, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(Dialog.Title, { className: styles.dialogTitle }, t("frontmatterEditor.title", "Edit document frontmatter")), /* @__PURE__ */ React__default.createElement(Dialog.Description, { className: styles.visuallyHidden }, t("frontmatterEditor.dialogDescription", "Add, edit, or remove the key-value entries of the document frontmatter.")), /* @__PURE__ */ React__default.createElement(
       "form",
       {
         onSubmit: (e) => {

package/dist/plugins/image/ImageDialog.js

@@ -46,6 +46,7 @@ const ImageDialog = () => {
         }
       },
       /* @__PURE__ */ React__default.createElement(Dialog.Title, null, t("uploadImage.dialogTitle", "Upload an image")),
+      /* @__PURE__ */ React__default.createElement(Dialog.Description, { className: styles.visuallyHidden }, imageUploadHandler !== null ? t("uploadImage.dialogDescription", "Insert an image from a URL or upload one from your device.") : t("uploadImage.dialogDescriptionNoUpload", "Insert an image from a URL.")),
       /* @__PURE__ */ React__default.createElement(
         "form",
         {

package/dist/plugins/table/TableEditor.js

@@ -44,7 +44,10 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
   }, []);
   const setActiveCellWithBoundaries = React__default.useCallback(
     (cell) => {
-      const colCount = lexicalTable.getColCount();
+      const [colCount, rowCount] = parentEditor.getEditorState().read(() => {
+        const currentTable = $getTableNodeByKey(tableKey);
+        return currentTable ? [currentTable.getColCount(), currentTable.getRowCount()] : [0, 0];
+      });
       if (cell === null) {
         setActiveCell(null);
         return;
@@ -58,7 +61,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
         colIndex = colCount - 1;
         rowIndex -= 1;
       }
-      if (rowIndex > lexicalTable.getRowCount() - 1) {
+      if (rowIndex > rowCount - 1) {
         setActiveCell(null);
         parentEditor.update(() => {
           const currentTable = $getTableNodeByKey(tableKey);
@@ -86,7 +89,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
       }
       setActiveCell([colIndex, rowIndex]);
     },
-    [lexicalTable, parentEditor, tableKey]
+    [parentEditor, tableKey]
   );
   React__default.useEffect(() => {
     lexicalTable.focusEmitter.subscribe(setActiveCellWithBoundaries);
@@ -94,28 +97,48 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
   const addRowToBottom = React__default.useCallback(
     (e) => {
       e.preventDefault();
-      parentEditor.update(() => {
-        const currentTable = $getTableNodeByKey(tableKey);
-        if (!currentTable) {
-          return;
+      let nextCell = null;
+      parentEditor.update(
+        () => {
+          const currentTable = $getTableNodeByKey(tableKey);
+          if (!currentTable) {
+            return;
+          }
+          nextCell = [0, currentTable.getRowCount()];
+          currentTable.addRowToBottom();
+        },
+        {
+          onUpdate: () => {
+            if (nextCell) {
+              setActiveCell(nextCell);
+            }
+          }
         }
-        currentTable.addRowToBottom();
-        setActiveCell([0, currentTable.getRowCount()]);
-      });
+      );
     },
     [parentEditor, tableKey]
   );
   const addColumnToRight = React__default.useCallback(
     (e) => {
       e.preventDefault();
-      parentEditor.update(() => {
-        const currentTable = $getTableNodeByKey(tableKey);
-        if (!currentTable) {
-          return;
+      let nextCell = null;
+      parentEditor.update(
+        () => {
+          const currentTable = $getTableNodeByKey(tableKey);
+          if (!currentTable) {
+            return;
+          }
+          nextCell = [currentTable.getColCount(), 0];
+          currentTable.addColumnToRight();
+        },
+        {
+          onUpdate: () => {
+            if (nextCell) {
+              setActiveCell(nextCell);
+            }
+          }
         }
-        currentTable.addColumnToRight();
-        setActiveCell([currentTable.getColCount(), 0]);
-      });
+      );
     },
     [parentEditor, tableKey]
   );
@@ -384,14 +407,24 @@ const ColumnEditor = ({
   const [editorRootElementRef, iconComponentFor] = useCellValues(editorRootElementRef$, iconComponentFor$);
   const insertColumnAt = React__default.useCallback(
     (colIndex2) => {
-      parentEditor.update(() => {
-        const currentTable = $getTableNodeByKey(tableKey);
-        if (!currentTable) {
-          return;
+      let inserted = false;
+      parentEditor.update(
+        () => {
+          const currentTable = $getTableNodeByKey(tableKey);
+          if (!currentTable) {
+            return;
+          }
+          currentTable.insertColumnAt(colIndex2);
+          inserted = true;
+        },
+        {
+          onUpdate: () => {
+            if (inserted) {
+              setActiveCellWithBoundaries([colIndex2, 0]);
+            }
+          }
         }
-        currentTable.insertColumnAt(colIndex2);
-        setActiveCellWithBoundaries([colIndex2, 0]);
-      });
+      );
     },
     [parentEditor, setActiveCellWithBoundaries, tableKey]
   );
@@ -475,14 +508,24 @@ const RowEditor = ({
   const [editorRootElementRef, iconComponentFor] = useCellValues(editorRootElementRef$, iconComponentFor$);
   const insertRowAt = React__default.useCallback(
     (rowIndex2) => {
-      parentEditor.update(() => {
-        const currentTable = $getTableNodeByKey(tableKey);
-        if (!currentTable) {
-          return;
+      let inserted = false;
+      parentEditor.update(
+        () => {
+          const currentTable = $getTableNodeByKey(tableKey);
+          if (!currentTable) {
+            return;
+          }
+          currentTable.insertRowAt(rowIndex2);
+          inserted = true;
+        },
+        {
+          onUpdate: () => {
+            if (inserted) {
+              setActiveCellWithBoundaries([0, rowIndex2]);
+            }
+          }
         }
-        currentTable.insertRowAt(rowIndex2);
-        setActiveCellWithBoundaries([0, rowIndex2]);
-      });
+      );
     },
     [parentEditor, setActiveCellWithBoundaries, tableKey]
   );

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

@@ -18,7 +18,7 @@ const DialogButton = React__default.forwardRef(({ autocompleteSuggestions = [],
     },
     [onSubmit]
   );
-  return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { "aria-label": tooltipTitle, className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { "aria-label": tooltipTitle, className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(Dialog.Title, { className: styles.visuallyHidden }, tooltipTitle), /* @__PURE__ */ React__default.createElement(Dialog.Description, { className: styles.visuallyHidden }, dialogInputPlaceholder), /* @__PURE__ */ React__default.createElement(
     DialogForm,
     {
       submitButtonTitle,