@mdxeditor/editor 1.9.2 → 1.10.1

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

@@ -1,11 +1,10 @@
 import React__default from "react";
-import { corePluginHooks } from "../../core/index.js";
 import styles from "../../../styles/ui.module.css.js";
+import { corePluginHooks } from "../../core/index.js";
 import { sandpackPluginHooks } from "../../sandpack/index.js";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
-import DeleteIcon from "../../../icons/delete.svg.js";
 const ShowSandpackInfo = () => {
-  const [editorInFocus, theEditor] = corePluginHooks.useEmitterValues("editorInFocus", "activeEditor");
+  const [editorInFocus, theEditor, iconComponentFor] = corePluginHooks.useEmitterValues("editorInFocus", "activeEditor", "iconComponentFor");
   const sandpackNode = editorInFocus.rootNode;
   const [sandpackConfig] = sandpackPluginHooks.useEmitterValues("sandpackConfig");
   const preset = sandpackConfig.presets.find((preset2) => preset2.meta === sandpackNode.getMeta());
@@ -24,7 +23,7 @@ const ShowSandpackInfo = () => {
         });
       }
     },
-    /* @__PURE__ */ React__default.createElement(DeleteIcon, null)
+    iconComponentFor("delete_big")
   ), /* @__PURE__ */ React__default.createElement("label", null, "Sandpack preset: ", preset.name));
 };
 export {

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

@@ -1,12 +1,11 @@
 import { mergeRegister } from "@lexical/utils";
 import { CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from "lexical";
 import React__default from "react";
-import RedoIcon from "../../../icons/redo.svg.js";
-import UndoIcon from "../../../icons/undo.svg.js";
 import { IS_APPLE } from "../../../utils/detectMac.js";
 import { corePluginHooks } from "../../core/index.js";
 import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
 const UndoRedo = () => {
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
   const [activeEditor] = corePluginHooks.useEmitterValues("activeEditor");
   const [canUndo, setCanUndo] = React__default.useState(false);
   const [canRedo, setCanRedo] = React__default.useState(false);
@@ -39,14 +38,14 @@ const UndoRedo = () => {
         {
           title: IS_APPLE ? "Undo (⌘Z)" : "Undo (Ctrl+Z)",
           disabled: !canUndo,
-          contents: /* @__PURE__ */ React__default.createElement(UndoIcon, null),
+          contents: iconComponentFor("undo"),
           active: false,
           onChange: () => activeEditor == null ? void 0 : activeEditor.dispatchCommand(UNDO_COMMAND, void 0)
         },
         {
           title: IS_APPLE ? "Redo (⌘Y)" : "Redo (Ctrl+Y)",
           disabled: !canRedo,
-          contents: /* @__PURE__ */ React__default.createElement(RedoIcon, null),
+          contents: iconComponentFor("redo"),
           active: false,
           onChange: () => activeEditor == null ? void 0 : activeEditor.dispatchCommand(REDO_COMMAND, void 0)
         }

package/dist/plugins/toolbar/index.d.ts

@@ -1,3 +1,4 @@
+import type { IconKey } from '../core/Icon';
 import type { Options } from 'mdast-util-to-markdown';
 import type { Config } from 'mdast-util-from-markdown/lib';
 import type { Extension } from 'micromark-util-types';
@@ -66,6 +67,7 @@ export declare const toolbarSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }>], (r: Realm) => {
     toolbarContents: RealmNode<() => React.ReactNode>;
 }>;
@@ -126,6 +128,7 @@ toolbarPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }>], (r: Realm) => {
     toolbarContents: RealmNode<() => React.ReactNode>;
 }>, {
@@ -190,8 +193,9 @@ toolbarPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     }>;
-    useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "toolbarContents">(key: K, callback: (value: ValueForKey<{
+    useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "toolbarContents">(key: K, callback: (value: ValueForKey<{
         toolbarContents: RealmNode<() => React.ReactNode>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -248,6 +252,7 @@ toolbarPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     }, K>) => void) => void;
     useEmitterValues: <K_1 extends SystemKeys<{
         toolbarContents: RealmNode<() => React.ReactNode>;
@@ -306,6 +311,7 @@ toolbarPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     }>>(...keys: K_1) => ValuesForKeys<{
         toolbarContents: RealmNode<() => React.ReactNode>;
     } & {
@@ -363,6 +369,7 @@ toolbarPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     }, K_1>;
     usePubKeys: () => (values: SystemDict<{
         toolbarContents: RealmNode<() => React.ReactNode>;
@@ -421,8 +428,9 @@ toolbarPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     }>) => void;
-    usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "toolbarContents">(key: K_2) => (value: ValueForKey<{
+    usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "iconComponentFor" | "toolbarContents">(key: K_2) => (value: ValueForKey<{
         toolbarContents: RealmNode<() => React.ReactNode>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -479,5 +487,6 @@ toolbarPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     }, K_2>) => void;
 };

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

@@ -3,9 +3,6 @@ import * as RadixToolbar from "@radix-ui/react-toolbar";
 import React__default from "react";
 import classNames from "classnames";
 import { useCombobox } from "downshift";
-import DropDownIcon from "../../../icons/arrow_drop_down.svg.js";
-import CheckIcon from "../../../icons/check.svg.js";
-import CloseIcon from "../../../icons/close.svg.js";
 import { corePluginHooks } from "../../core/index.js";
 import styles from "../../../styles/ui.module.css.js";
 import { TooltipWrap } from "./TooltipWrap.js";
@@ -34,6 +31,7 @@ const DialogButton = React__default.forwardRef(
 );
 const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlaceholder, submitButtonTitle }) => {
   const [items, setItems] = React__default.useState(autocompleteSuggestions.slice(0, MAX_SUGGESTIONS));
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
   const enableAutoComplete = autocompleteSuggestions.length > 0;
   const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
     initialInputValue: "",
@@ -91,7 +89,7 @@ const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlac
       size: 30,
       "data-editor-dialog": true
     }
-  ), enableAutoComplete && /* @__PURE__ */ React__default.createElement("button", { "aria-label": "toggle menu", type: "button", ...getToggleButtonProps() }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))), /* @__PURE__ */ React__default.createElement("div", { className: styles.downshiftAutocompleteContainer }, /* @__PURE__ */ React__default.createElement("ul", { ...getMenuProps(), "data-visible": dropdownIsVisible }, items.map((item, index) => /* @__PURE__ */ React__default.createElement(
+  ), enableAutoComplete && /* @__PURE__ */ React__default.createElement("button", { "aria-label": "toggle menu", type: "button", ...getToggleButtonProps() }, iconComponentFor("arrow_drop_down"))), /* @__PURE__ */ React__default.createElement("div", { className: styles.downshiftAutocompleteContainer }, /* @__PURE__ */ React__default.createElement("ul", { ...getMenuProps(), "data-visible": dropdownIsVisible }, items.map((item, index) => /* @__PURE__ */ React__default.createElement(
     "li",
     {
       "data-selected": selectedItem === item,
@@ -108,8 +106,8 @@ const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlac
       "aria-label": submitButtonTitle,
       className: classNames(styles.actionButton, styles.primaryActionButton)
     },
-    /* @__PURE__ */ React__default.createElement(CheckIcon, null)
-  ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { className: styles.actionButton }, /* @__PURE__ */ React__default.createElement(CloseIcon, null)));
+    iconComponentFor("check")
+  ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { className: styles.actionButton }, iconComponentFor("close")));
 };
 export {
   DialogButton

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

@@ -5,7 +5,7 @@ import styles from "../../../styles/ui.module.css.js";
 import { corePluginHooks } from "../../core/index.js";
 const TooltipWrap = React__default.forwardRef(({ title, children }, ref) => {
   const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
-  return /* @__PURE__ */ React__default.createElement(Tooltip.Provider, { delayDuration: 100 }, /* @__PURE__ */ React__default.createElement(Tooltip.Root, null, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { ref, asChild: true }, /* @__PURE__ */ React__default.createElement("span", null, children)), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 10 }, title))));
+  return /* @__PURE__ */ React__default.createElement(Tooltip.Provider, { delayDuration: 100 }, /* @__PURE__ */ React__default.createElement(Tooltip.Root, null, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { ref, asChild: true }, /* @__PURE__ */ React__default.createElement("span", { className: styles.tooltipTrigger }, children)), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 10 }, title))));
 });
 export {
   TooltipWrap

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

@@ -1,6 +1,5 @@
 import React__default from "react";
 import * as RadixSelect from "@radix-ui/react-select";
-import DropDownIcon from "../../../icons/arrow_drop_down.svg.js";
 import classNames from "classnames";
 import styles from "../../../styles/ui.module.css.js";
 import { TooltipWrap } from "./TooltipWrap.js";
@@ -11,7 +10,7 @@ const SelectItem = React__default.forwardRef(
   }
 );
 const SelectTrigger = ({ title, placeholder, className }) => {
-  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
+  const [readOnly, iconComponentFor] = corePluginHooks.useEmitterValues("readOnly", "iconComponentFor");
   return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(
     RadixSelect.Trigger,
     {
@@ -21,7 +20,7 @@ const SelectTrigger = ({ title, placeholder, className }) => {
       disabled: readOnly
     },
     /* @__PURE__ */ React__default.createElement(RadixSelect.Value, { placeholder }),
-    /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))
+    /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, iconComponentFor("arrow_drop_down"))
   ));
 };
 const SelectContent = ({
@@ -36,8 +35,8 @@ const SelectButtonTrigger = ({
   title,
   className
 }) => {
-  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
-  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className), disabled: readOnly }, children, /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))));
+  const [readOnly, iconComponentFor] = corePluginHooks.useEmitterValues("readOnly", "iconComponentFor");
+  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className), disabled: readOnly }, children, /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, iconComponentFor("arrow_drop_down"))));
 };
 const Select = (props) => {
   return /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: props.value || void 0, onValueChange: props.onChange }, /* @__PURE__ */ React__default.createElement(SelectTrigger, { title: props.triggerTitle, placeholder: props.placeholder }), /* @__PURE__ */ React__default.createElement(SelectContent, null, props.items.map((item, index) => {