@mdxeditor/editor 3.0.7 → 3.1.0

package/dist/plugins/sandpack/SandpackEditor.js

@@ -20,7 +20,7 @@ const SandpackEditor = ({ nodeKey, code, focusEmitter, preset }) => {
       theme: preset.sandpackTheme,
       files: {
         [preset.snippetFileName]: code,
-        ...Object.entries(preset.files || {}).reduce(
+        ...Object.entries(preset.files ?? {}).reduce(
           (acc, [filePath, fileContents]) => ({ ...acc, ...{ [filePath]: { code: fileContents, readOnly: true } } }),
           {}
         )

package/dist/plugins/sandpack/index.js

@@ -40,8 +40,8 @@ const insertSandpack$ = Signal((r) => {
           throw new Error(`No sandpack preset found with name ${presetName}`);
         }
         return {
-          code: preset.initialSnippetContent || "",
-          language: preset.snippetLanguage || "jsx",
+          code: preset.initialSnippetContent ?? "",
+          language: preset.snippetLanguage ?? "jsx",
           meta: preset.meta
         };
       })

package/dist/plugins/sandpack/useCodeMirrorRef.js

@@ -20,7 +20,7 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
     (e) => {
       var _a, _b, _c, _d;
       if (e.key === "ArrowDown") {
-        const state = (_b = (_a = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.state;
+        const state = (_b = (_a = codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.state;
         if (state) {
           const docLength = state.doc.length;
           const selectionEnd = state.selection.ranges[0].to;
@@ -33,7 +33,7 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
                 const node = $getNodeByKey(nodeKey);
                 const nextSibling = node.getNextSibling();
                 if (nextSibling) {
-                  (_b2 = (_a2 = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a2.getCodemirror()) == null ? void 0 : _b2.contentDOM.blur();
+                  (_b2 = (_a2 = codeMirrorRef.current) == null ? void 0 : _a2.getCodemirror()) == null ? void 0 : _b2.contentDOM.blur();
                   node.selectNext();
                 } else {
                   node.insertAfter($createParagraphNode());
@@ -44,7 +44,7 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
           }
         }
       } else if (e.key === "ArrowUp") {
-        const state = (_d = (_c = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _c.getCodemirror()) == null ? void 0 : _d.state;
+        const state = (_d = (_c = codeMirrorRef.current) == null ? void 0 : _c.getCodemirror()) == null ? void 0 : _d.state;
         if (state) {
           const selectionStart = state.selection.ranges[0].from;
           if (selectionStart === 0) {
@@ -56,7 +56,7 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
                 const node = $getNodeByKey(nodeKey);
                 const previousSibling = node.getPreviousSibling();
                 if (previousSibling) {
-                  (_b2 = (_a2 = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a2.getCodemirror()) == null ? void 0 : _b2.contentDOM.blur();
+                  (_b2 = (_a2 = codeMirrorRef.current) == null ? void 0 : _a2.getCodemirror()) == null ? void 0 : _b2.contentDOM.blur();
                   node.selectPrevious();
                 }
               });
@@ -73,9 +73,9 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
   React__default.useEffect(() => {
     const codeMirror = codeMirrorRef.current;
     setTimeout(() => {
-      var _a, _b, _c, _d;
-      (_b = (_a = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _a.contentDOM) == null ? void 0 : _b.addEventListener("focus", onFocusHandler);
-      (_d = (_c = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _c.contentDOM) == null ? void 0 : _d.addEventListener("keydown", onKeyDownHandler);
+      var _a, _b;
+      (_a = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _a.contentDOM.addEventListener("focus", onFocusHandler);
+      (_b = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _b.contentDOM.addEventListener("keydown", onKeyDownHandler);
     }, 300);
     return () => {
       var _a, _b;
@@ -86,7 +86,7 @@ function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
   React__default.useEffect(() => {
     focusEmitter.subscribe(() => {
       var _a, _b;
-      (_b = (_a = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.focus();
+      (_b = (_a = codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.focus();
       onFocusHandler();
     });
   }, [focusEmitter, codeMirrorRef, nodeKey, onFocusHandler]);

package/dist/plugins/table/TableEditor.js

@@ -122,67 +122,80 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
     setHighlightedCoordinates([colIndex, rowIndex]);
   }, []);
   const t = useTranslation();
-  return /* @__PURE__ */ React__default.createElement("table", { className: styles.tableEditor, onMouseOver: onTableMouseOver, onMouseLeave: () => setHighlightedCoordinates([-1, -1]) }, /* @__PURE__ */ React__default.createElement("colgroup", null, readOnly ? null : /* @__PURE__ */ React__default.createElement("col", null), Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
-    const align = mdastNode.align || [];
-    const currentColumnAlign = align[colIndex] || "left";
-    const className = AlignToTailwindClassMap[currentColumnAlign];
-    return /* @__PURE__ */ React__default.createElement("col", { key: colIndex, className });
-  }), readOnly ? null : /* @__PURE__ */ React__default.createElement("col", null)), readOnly || /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", { className: styles.tableToolsColumn, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(
-    "button",
+  return /* @__PURE__ */ React__default.createElement(
+    "table",
     {
-      className: styles.iconButton,
-      type: "button",
-      title: t("table.deleteTable", "Delete table"),
-      onClick: (e) => {
-        e.preventDefault();
-        parentEditor.update(() => {
-          lexicalTable.selectNext();
-          lexicalTable.remove();
-        });
+      className: styles.tableEditor,
+      onMouseOver: onTableMouseOver,
+      onMouseLeave: () => {
+        setHighlightedCoordinates([-1, -1]);
       }
     },
-    iconComponentFor("delete_small")
-  )), Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
-    return /* @__PURE__ */ React__default.createElement("th", { key: colIndex, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(
-      ColumnEditor,
+    /* @__PURE__ */ React__default.createElement("colgroup", null, readOnly ? null : /* @__PURE__ */ React__default.createElement("col", null), Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
+      const align = mdastNode.align ?? [];
+      const currentColumnAlign = align[colIndex] ?? "left";
+      const className = AlignToTailwindClassMap[currentColumnAlign];
+      return /* @__PURE__ */ React__default.createElement("col", { key: colIndex, className });
+    }), readOnly ? null : /* @__PURE__ */ React__default.createElement("col", null)),
+    readOnly || /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", { className: styles.tableToolsColumn, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(
+      "button",
       {
-        ...{
-          setActiveCellWithBoundaries,
-          parentEditor,
-          colIndex,
-          highlightedCoordinates,
-          lexicalTable,
-          align: (mdastNode.align || [])[colIndex]
+        className: styles.iconButton,
+        type: "button",
+        title: t("table.deleteTable", "Delete table"),
+        onClick: (e) => {
+          e.preventDefault();
+          parentEditor.update(() => {
+            lexicalTable.selectNext();
+            lexicalTable.remove();
+          });
         }
-      }
-    ));
-  }), /* @__PURE__ */ React__default.createElement("th", { className: styles.tableToolsColumn }))), /* @__PURE__ */ React__default.createElement("tbody", null, mdastNode.children.map((row, rowIndex) => {
-    const CellElement = getCellType(rowIndex);
-    return /* @__PURE__ */ React__default.createElement("tr", { key: rowIndex }, readOnly || /* @__PURE__ */ React__default.createElement(CellElement, { className: styles.toolCell, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(RowEditor, { ...{ setActiveCellWithBoundaries, parentEditor, rowIndex, highlightedCoordinates, lexicalTable } })), row.children.map((mdastCell, colIndex) => {
-      var _a;
-      return /* @__PURE__ */ React__default.createElement(
-        Cell,
+      },
+      iconComponentFor("delete_small")
+    )), Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
+      return /* @__PURE__ */ React__default.createElement("th", { key: colIndex, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(
+        ColumnEditor,
         {
-          align: (_a = mdastNode.align) == null ? void 0 : _a[colIndex],
-          key: getCellKey(mdastCell),
-          contents: mdastCell.children,
-          setActiveCell: setActiveCellWithBoundaries,
           ...{
-            rowIndex,
+            setActiveCellWithBoundaries,
+            parentEditor,
             colIndex,
+            highlightedCoordinates,
             lexicalTable,
-            parentEditor,
-            activeCell: readOnly ? [-1, -1] : activeCell
+            align: (mdastNode.align ?? [])[colIndex]
           }
         }
-      );
-    }), readOnly || rowIndex === 0 && /* @__PURE__ */ React__default.createElement("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addColumnButton, onClick: addColumnToRight }, iconComponentFor("add_column"))));
-  })), readOnly || /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null), /* @__PURE__ */ React__default.createElement("th", { colSpan: lexicalTable.getColCount() }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addRowButton, onClick: addRowToBottom }, iconComponentFor("add_row"))), /* @__PURE__ */ React__default.createElement("th", null))));
+      ));
+    }), /* @__PURE__ */ React__default.createElement("th", { className: styles.tableToolsColumn }))),
+    /* @__PURE__ */ React__default.createElement("tbody", null, mdastNode.children.map((row, rowIndex) => {
+      const CellElement = getCellType(rowIndex);
+      return /* @__PURE__ */ React__default.createElement("tr", { key: rowIndex }, readOnly || /* @__PURE__ */ React__default.createElement(CellElement, { className: styles.toolCell, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(RowEditor, { ...{ setActiveCellWithBoundaries, parentEditor, rowIndex, highlightedCoordinates, lexicalTable } })), row.children.map((mdastCell, colIndex) => {
+        var _a;
+        return /* @__PURE__ */ React__default.createElement(
+          Cell,
+          {
+            align: (_a = mdastNode.align) == null ? void 0 : _a[colIndex],
+            key: getCellKey(mdastCell),
+            contents: mdastCell.children,
+            setActiveCell: setActiveCellWithBoundaries,
+            ...{
+              rowIndex,
+              colIndex,
+              lexicalTable,
+              parentEditor,
+              activeCell: readOnly ? [-1, -1] : activeCell
+            }
+          }
+        );
+      }), readOnly || rowIndex === 0 && /* @__PURE__ */ React__default.createElement("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addColumnButton, onClick: addColumnToRight }, iconComponentFor("add_column"))));
+    })),
+    readOnly || /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null), /* @__PURE__ */ React__default.createElement("th", { colSpan: lexicalTable.getColCount() }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addRowButton, onClick: addRowToBottom }, iconComponentFor("add_row"))), /* @__PURE__ */ React__default.createElement("th", null)))
+  );
 };
 const Cell = ({ align, ...props }) => {
   const { activeCell, setActiveCell } = props;
   const isActive = Boolean(activeCell && activeCell[0] === props.colIndex && activeCell[1] === props.rowIndex);
-  const className = AlignToTailwindClassMap[align || "left"];
+  const className = AlignToTailwindClassMap[align ?? "left"];
   const CellElement = getCellType(props.rowIndex);
   return /* @__PURE__ */ React__default.createElement(
     CellElement,
@@ -307,7 +320,7 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
     );
   }, [colIndex, editor, rootEditor, rowIndex, saveAndFocus, setActiveCell]);
   React__default.useEffect(() => {
-    focus && (editor == null ? void 0 : editor.focus());
+    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 }), /* @__PURE__ */ React__default.createElement(HistoryPlugin, null));
 };
@@ -358,7 +371,9 @@ const ColumnEditor = ({
     RadixPopover.PopoverContent,
     {
       className: classNames(styles.tableColumnEditorPopoverContent),
-      onOpenAutoFocus: (e) => e.preventDefault(),
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
       sideOffset: 5,
       side: "top"
     },
@@ -369,7 +384,7 @@ const ColumnEditor = ({
         onValueChange: (value) => {
           setColumnAlign(colIndex, value);
         },
-        value: align || "left",
+        value: align ?? "left",
         type: "single",
         "aria-label": t("table.textAlignment", "Text alignment")
       },
@@ -432,7 +447,9 @@ const RowEditor = ({
     RadixPopover.PopoverContent,
     {
       className: classNames(styles.tableColumnEditorPopoverContent),
-      onOpenAutoFocus: (e) => e.preventDefault(),
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
       sideOffset: 5,
       side: "bottom"
     },

package/dist/plugins/table/TableNode.js

@@ -31,7 +31,7 @@ class TableNode extends DecoratorNode {
     __publicField(this, "__mdastNode");
     /** @internal */
     __publicField(this, "focusEmitter", coordinatesEmitter());
-    this.__mdastNode = mdastNode || { type: "table", children: [] };
+    this.__mdastNode = mdastNode ?? { type: "table", children: [] };
   }
   /** @internal */
   static getType() {
@@ -160,7 +160,7 @@ class TableNode extends DecoratorNode {
    * Pass `undefined` to remove the focus.
    */
   select(coords) {
-    this.focusEmitter.publish(coords || [0, 0]);
+    this.focusEmitter.publish(coords ?? [0, 0]);
   }
   /** @internal */
   isInline() {

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

@@ -41,10 +41,10 @@ const BlockTypeSelect = () => {
           case "paragraph":
             convertSelectionToNode(() => $createParagraphNode());
             break;
+          case "":
+            break;
           default:
-            if (blockType == "")
-              ;
-            else if (blockType.startsWith("h")) {
+            if (blockType.startsWith("h")) {
               convertSelectionToNode(() => $createHeadingNode(blockType));
             } else {
               throw new Error(`Unknown block type: ${blockType}`);

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

@@ -1,34 +1,89 @@
-import { currentFormat$, iconComponentFor$, applyFormat$, useTranslation } from "../../core/index.js";
+import { useTranslation, currentFormat$, iconComponentFor$, applyFormat$ } from "../../core/index.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 import React__default from "react";
-import { IS_BOLD, IS_ITALIC, IS_UNDERLINE } from "../../../FormatConstants.js";
-import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
-const BoldItalicUnderlineToggles = () => {
+import { IS_BOLD, IS_ITALIC, IS_UNDERLINE, IS_STRIKETHROUGH, IS_SUPERSCRIPT, IS_SUBSCRIPT } from "../../../FormatConstants.js";
+import { ToggleSingleGroupWithItem } from "../primitives/toolbar.js";
+import styles from "../../../styles/ui.module.css.js";
+const FormatButton = ({ format, addTitle, removeTitle, icon, style, formatName }) => {
   const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$);
   const applyFormat = usePublisher(applyFormat$);
-  const t = useTranslation();
-  const boldIsOn = (currentFormat & IS_BOLD) !== 0;
-  const italicIsOn = (currentFormat & IS_ITALIC) !== 0;
-  const underlineIsOn = (currentFormat & IS_UNDERLINE) !== 0;
-  const boldTitle = boldIsOn ? t("toolbar.removeBold", "Remove bold") : t("toolbar.bold", "Bold");
-  const italicTitle = italicIsOn ? t("toolbar.removeItalic", "Remove italic") : t("toolbar.italic", "Italic");
-  const underlineTitle = underlineIsOn ? t("toolbar.removeUnderline", "Remove underline") : t("toolbar.underline", "Underline");
+  const active = (currentFormat & format) !== 0;
   return /* @__PURE__ */ React__default.createElement(
-    MultipleChoiceToggleGroup,
+    ToggleSingleGroupWithItem,
     {
-      items: [
-        { title: boldTitle, contents: iconComponentFor("format_bold"), active: boldIsOn, onChange: applyFormat.bind(null, "bold") },
-        { title: italicTitle, contents: iconComponentFor("format_italic"), active: italicIsOn, onChange: applyFormat.bind(null, "italic") },
-        {
-          title: underlineTitle,
-          contents: /* @__PURE__ */ React__default.createElement("div", { style: { transform: "translateY(2px)" } }, iconComponentFor("format_underlined")),
-          active: underlineIsOn,
-          onChange: applyFormat.bind(null, "underline")
-        }
-      ]
-    }
+      title: active ? removeTitle : addTitle,
+      on: active,
+      onValueChange: () => {
+        applyFormat(formatName);
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("div", { style }, iconComponentFor(icon))
   );
 };
+const BoldItalicUnderlineToggles = () => {
+  const t = useTranslation();
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.toolbarGroupOfGroups }, /* @__PURE__ */ React__default.createElement(
+    FormatButton,
+    {
+      format: IS_BOLD,
+      addTitle: t("toolbar.bold", "Bold"),
+      removeTitle: t("toolbar.removeBold", "Remove bold"),
+      icon: "format_bold",
+      formatName: "bold"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    FormatButton,
+    {
+      format: IS_ITALIC,
+      addTitle: t("toolbar.italic", "Italic"),
+      removeTitle: t("toolbar.removeItalic", "Remove italic"),
+      icon: "format_italic",
+      formatName: "italic"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    FormatButton,
+    {
+      format: IS_UNDERLINE,
+      addTitle: t("toolbar.underline", "Underline"),
+      removeTitle: t("toolbar.removeUnderline", "Remove underline"),
+      icon: "format_underlined",
+      formatName: "underline",
+      style: { transform: "translateY(2px)" }
+    }
+  ));
+};
+const StrikeThroughSupSubToggles = () => {
+  const t = useTranslation();
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.toolbarGroupOfGroups }, /* @__PURE__ */ React__default.createElement(
+    FormatButton,
+    {
+      format: IS_STRIKETHROUGH,
+      addTitle: t("toolbar.strikethrough", "Strikethrough"),
+      removeTitle: t("toolbar.removeStrikethrough", "Remove strikethrough"),
+      icon: "strikeThrough",
+      formatName: "strikethrough"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    FormatButton,
+    {
+      format: IS_SUPERSCRIPT,
+      addTitle: t("toolbar.superscript", "Superscript"),
+      removeTitle: t("toolbar.removeSuperscript", "Remove superscript"),
+      icon: "superscript",
+      formatName: "superscript"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    FormatButton,
+    {
+      format: IS_SUBSCRIPT,
+      addTitle: t("toolbar.subscript", "Subscript"),
+      removeTitle: t("toolbar.removeSubscript", "Remove subscript"),
+      icon: "subscript",
+      formatName: "subscript"
+    }
+  ));
+};
 export {
-  BoldItalicUnderlineToggles
+  BoldItalicUnderlineToggles,
+  StrikeThroughSupSubToggles
 };

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

@@ -25,7 +25,7 @@ const ChangeAdmonitionType = () => {
         rootEditor == null ? void 0 : rootEditor.update(() => {
           admonitionNode.setMdastNode({ ...admonitionNode.getMdastNode(), name });
           setTimeout(() => {
-            rootEditor == null ? void 0 : rootEditor.update(() => {
+            rootEditor.update(() => {
               admonitionNode.getLatest().select();
             });
           }, 80);

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

@@ -21,7 +21,7 @@ const ChangeCodeMirrorLanguage = () => {
         theEditor == null ? void 0 : theEditor.update(() => {
           codeBlockNode.setLanguage(language === EMPTY_VALUE ? "" : language);
           setTimeout(() => {
-            theEditor == null ? void 0 : theEditor.update(() => {
+            theEditor.update(() => {
               codeBlockNode.getLatest().select();
             });
           });

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

@@ -26,7 +26,9 @@ const DiffSourceToggleWrapper = ({
       className: styles.diffSourceToggle,
       value: viewMode,
       items: toggleGroupItems,
-      onChange: (value) => changeViewMode(value || "rich-text")
+      onChange: (value) => {
+        changeViewMode(value === "" ? "rich-text" : value);
+      }
     }
   )));
 };

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

@@ -16,7 +16,9 @@ const InsertFrontmatter = () => {
       className: classNames({
         [styles.activeToolbarButton]: hasFrontmatter
       }),
-      onClick: () => insertFrontmatter()
+      onClick: () => {
+        insertFrontmatter();
+      }
     },
     iconComponentFor("frontmatter")
   );

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

@@ -9,7 +9,18 @@ const InsertImage = React__default.forwardRef((_, forwardedRef) => {
   const openNewImageDialog = usePublisher(openNewImageDialog$);
   const [readOnly, iconComponentFor] = useCellValues(readOnly$, iconComponentFor$);
   const t = useTranslation();
-  return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly, onClick: () => openNewImageDialog() }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: t("toolbar.image", "Insert image") }, iconComponentFor("add_photo")));
+  return /* @__PURE__ */ React__default.createElement(
+    RadixToolbar.Button,
+    {
+      className: styles.toolbarButton,
+      ref: forwardedRef,
+      disabled: readOnly,
+      onClick: () => {
+        openNewImageDialog();
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: t("toolbar.image", "Insert image") }, iconComponentFor("add_photo"))
+  );
 });
 export {
   InsertImage

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

@@ -7,7 +7,16 @@ const InsertThematicBreak = () => {
   const insertThematicBreak = usePublisher(insertThematicBreak$);
   const iconComponentFor = useCellValue(iconComponentFor$);
   const t = useTranslation();
-  return /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: t("toolbar.thematicBreak", "Insert thematic break"), onClick: () => insertThematicBreak() }, iconComponentFor("horizontal_rule"));
+  return /* @__PURE__ */ React__default.createElement(
+    ButtonWithTooltip,
+    {
+      title: t("toolbar.thematicBreak", "Insert thematic break"),
+      onClick: () => {
+        insertThematicBreak();
+      }
+    },
+    iconComponentFor("horizontal_rule")
+  );
 };
 export {
   InsertThematicBreak

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

@@ -1,7 +1,7 @@
 import React__default from "react";
 import { ConditionalContents, Separator } from "../primitives/toolbar.js";
 import { BlockTypeSelect } from "./BlockTypeSelect.js";
-import { BoldItalicUnderlineToggles } from "./BoldItalicUnderlineToggles.js";
+import { BoldItalicUnderlineToggles, StrikeThroughSupSubToggles } from "./BoldItalicUnderlineToggles.js";
 import { ChangeAdmonitionType } from "./ChangeAdmonitionType.js";
 import { ChangeCodeMirrorLanguage } from "./ChangeCodeMirrorLanguage.js";
 import { CodeToggle } from "./CodeToggle.js";
@@ -32,7 +32,7 @@ const KitchenSinkToolbar = () => {
         { when: (editor) => (editor == null ? void 0 : editor.editorType) === "codeblock", contents: () => /* @__PURE__ */ React__default.createElement(ChangeCodeMirrorLanguage, null) },
         { when: (editor) => (editor == null ? void 0 : editor.editorType) === "sandpack", contents: () => /* @__PURE__ */ React__default.createElement(ShowSandpackInfo, null) },
         {
-          fallback: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(UndoRedo, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(BoldItalicUnderlineToggles, null), /* @__PURE__ */ React__default.createElement(CodeToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(ListsToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(
+          fallback: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(UndoRedo, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(BoldItalicUnderlineToggles, null), /* @__PURE__ */ React__default.createElement(CodeToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(StrikeThroughSupSubToggles, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(ListsToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(
             ConditionalContents,
             {
               options: [{ when: whenInAdmonition, contents: () => /* @__PURE__ */ React__default.createElement(ChangeAdmonitionType, null) }, { fallback: () => /* @__PURE__ */ React__default.createElement(BlockTypeSelect, null) }]

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

@@ -35,7 +35,7 @@ const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlac
   const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
     initialInputValue: "",
     onInputValueChange({ inputValue }) {
-      inputValue = (inputValue == null ? void 0 : inputValue.toLowerCase()) || "";
+      inputValue = (inputValue == null ? void 0 : inputValue.toLowerCase()) ?? "";
       const matchingItems = [];
       for (const suggestion of autocompleteSuggestions) {
         if (suggestion.toLowerCase().includes(inputValue)) {

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

@@ -33,7 +33,9 @@ const SelectContent = ({
     RadixSelect.Content,
     {
       className: classNames(className, "mdxeditor-select-content"),
-      onCloseAutoFocus: (e) => e.preventDefault(),
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
       position: "popper"
     },
     /* @__PURE__ */ React__default.createElement(RadixSelect.Viewport, { "data-editor-dropdown": true }, children)

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

@@ -58,7 +58,9 @@ const MultipleChoiceToggleGroup = ({ items }) => {
       key: index,
       title: item.title,
       on: item.active,
-      onValueChange: (v) => item.onChange(v === "on"),
+      onValueChange: (v) => {
+        item.onChange(v === "on");
+      },
       disabled: item.disabled
     },
     item.contents
@@ -77,14 +79,26 @@ const SingleChoiceToggleGroup = ({
       className: classNames(styles.toolbarToggleSingleGroup, className),
       onValueChange: onChange,
       value: value || "",
-      onFocus: (e) => e.preventDefault()
+      onFocus: (e) => {
+        e.preventDefault();
+      }
     },
     items.map((item, index) => /* @__PURE__ */ React__default.createElement(ToolbarToggleItem, { key: index, value: item.value }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: item.title }, item.contents)))
   ));
 };
 const ButtonOrDropdownButton = (props) => {
   const readOnly = useCellValue(readOnly$);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, props.items.length === 1 ? /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: props.title, onClick: () => props.onChoose(""), disabled: readOnly }, props.children) : /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: "", onValueChange: props.onChoose }, /* @__PURE__ */ React__default.createElement(SelectButtonTrigger, { title: props.title }, props.children), /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarButtonDropdownContainer }, props.items.map((item, index) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: index, value: item.value }, item.label)))));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, props.items.length === 1 ? /* @__PURE__ */ React__default.createElement(
+    ButtonWithTooltip,
+    {
+      title: props.title,
+      onClick: () => {
+        props.onChoose("");
+      },
+      disabled: readOnly
+    },
+    props.children
+  ) : /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: "", onValueChange: props.onChoose }, /* @__PURE__ */ React__default.createElement(SelectButtonTrigger, { title: props.title }, props.children), /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarButtonDropdownContainer }, props.items.map((item, index) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: index, value: item.value }, item.label)))));
 };
 function isConditionalContentsOption(option) {
   return Object.hasOwn(option, "when");

package/dist/utils/detectMac.js

@@ -1,4 +1,4 @@
-const CAN_USE_DOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+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);
 function controlOrMeta(metaKey, ctrlKey) {
   if (IS_APPLE) {

package/dist/utils/isPartOftheEditorUI.js

@@ -2,7 +2,7 @@ function isPartOftheEditorUI(element, editorRoot) {
   if (element === null || element === editorRoot) {
     return false;
   }
-  if (element.dataset["editorDialog"] !== void 0 || element.dataset["toolbarItem"] !== void 0 || element.dataset["editorDropdown"]) {
+  if (element.dataset.editorDialog !== void 0 || element.dataset.toolbarItem !== void 0 || element.dataset.editorDropdown) {
     return true;
   }
   return isPartOftheEditorUI(element.parentElement, editorRoot);

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.0.7",
+  "version": "3.1.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -69,6 +69,7 @@
     "mdast-util-directive": "^3.0.0",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-frontmatter": "^2.0.1",
+    "mdast-util-gfm-strikethrough": "^2.0.0",
     "mdast-util-gfm-table": "^2.0.0",
     "mdast-util-gfm-task-list-item": "^2.0.0",
     "mdast-util-mdx": "^3.0.0",
@@ -109,15 +110,14 @@
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
     "@types/unist": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.14",
     "cm6-theme-basic-dark": "^0.2.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-json": "^3.1.0",
@@ -141,13 +141,14 @@
     "semantic-release": "^21.0.5",
     "svgo": "^3.0.2",
     "terser": "^5.26.0",
-    "typedoc": "^0.25.6",
-    "typedoc-plugin-markdown": "^3.17.1",
+    "typedoc": "^0.25.13",
+    "typedoc-plugin-markdown": "^4.0.2",
     "typedoc-plugin-no-inherit": "^1.4.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.9.0",
     "typescript-plugin-css-modules": "^5.0.2",
     "vite": "^5.0.10",
-    "vite-plugin-dts": "^3.7.0",
+    "vite-plugin-dts": "^3.9.1",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.2.3",
     "vitest": "^1.1.1"