@mdxeditor/editor 3.0.8 → 3.1.0

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.8",
+  "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",
@@ -117,7 +118,6 @@
     "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",
@@ -145,6 +145,7 @@
     "typedoc-plugin-markdown": "^4.0.2",
     "typedoc-plugin-no-inherit": "^1.4.0",
     "typescript": "^5.4.5",
+    "typescript-eslint": "^7.9.0",
     "typescript-plugin-css-modules": "^5.0.2",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.9.1",