@mdxeditor/editor 1.9.2 → 1.10.0

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

@@ -1,3 +1,4 @@
+import type { IconKey } from '../core/Icon';
 import type { RefObject, ReactNode, ComponentType } from 'react';
 import type { Options } from 'mdast-util-to-markdown';
 import type { Config } from 'mdast-util-from-markdown/lib';
@@ -77,6 +78,7 @@ export declare const tableSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }>], (r: Realm, [{ insertDecoratorNode }]: [{
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -132,6 +134,7 @@ export declare const tableSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }]) => {
     insertTable: RealmNode<InsertTablePayload>;
 }>;
@@ -192,6 +195,7 @@ tablePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }>], (r: Realm, [{ insertDecoratorNode }]: [{
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -247,6 +251,7 @@ tablePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }]) => {
     insertTable: RealmNode<InsertTablePayload>;
 }>, object>, 
@@ -309,8 +314,9 @@ tablePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => 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" | "insertTable">(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" | "insertTable">(key: K, callback: (value: ValueForKey<{
         insertTable: RealmNode<InsertTablePayload>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -367,6 +373,7 @@ tablePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K>) => void) => void;
     useEmitterValues: <K_1 extends SystemKeys<{
         insertTable: RealmNode<InsertTablePayload>;
@@ -425,6 +432,7 @@ tablePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }>>(...keys: K_1) => ValuesForKeys<{
         insertTable: RealmNode<InsertTablePayload>;
     } & {
@@ -482,6 +490,7 @@ tablePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_1>;
     usePubKeys: () => (values: SystemDict<{
         insertTable: RealmNode<InsertTablePayload>;
@@ -540,8 +549,9 @@ tablePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => 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" | "insertTable">(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" | "insertTable">(key: K_2) => (value: ValueForKey<{
         insertTable: RealmNode<InsertTablePayload>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -598,6 +608,7 @@ tablePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_2>) => void;
 };
 export {};

package/dist/plugins/thematic-break/index.d.ts

@@ -1,3 +1,4 @@
+import type { IconKey } from '../core/Icon';
 import type { RefObject, ReactNode, ComponentType } from 'react';
 import type { Options } from 'mdast-util-to-markdown';
 import type { Config } from 'mdast-util-from-markdown/lib';
@@ -67,6 +68,7 @@ export declare const thematicBreakSystem: SystemSpec<[SystemSpec<[], (r: Realm)
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }>], (r: Realm, [{ activeEditor }]: [{
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -122,6 +124,7 @@ export declare const thematicBreakSystem: SystemSpec<[SystemSpec<[], (r: Realm)
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }]) => {
     insertThematicBreak: RealmNode<true>;
 }>;
@@ -182,6 +185,7 @@ thematicBreakPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) =>
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }>], (r: Realm, [{ activeEditor }]: [{
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -237,6 +241,7 @@ thematicBreakPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) =>
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }]) => {
     insertThematicBreak: RealmNode<true>;
 }>, object>, 
@@ -299,8 +304,9 @@ thematicBreakPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => 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" | "insertThematicBreak">(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" | "insertThematicBreak">(key: K, callback: (value: ValueForKey<{
         insertThematicBreak: RealmNode<true>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -357,6 +363,7 @@ thematicBreakPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K>) => void) => void;
     useEmitterValues: <K_1 extends SystemKeys<{
         insertThematicBreak: RealmNode<true>;
@@ -415,6 +422,7 @@ thematicBreakPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }>>(...keys: K_1) => ValuesForKeys<{
         insertThematicBreak: RealmNode<true>;
     } & {
@@ -472,6 +480,7 @@ thematicBreakPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_1>;
     usePubKeys: () => (values: SystemDict<{
         insertThematicBreak: RealmNode<true>;
@@ -530,8 +539,9 @@ thematicBreakPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => 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" | "insertThematicBreak">(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" | "insertThematicBreak">(key: K_2) => (value: ValueForKey<{
         insertThematicBreak: RealmNode<true>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -588,5 +598,6 @@ thematicBreakPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_2>) => void;
 };

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

@@ -2,9 +2,6 @@ import React__default from "react";
 import { corePluginHooks } from "../../core/index.js";
 import { IS_BOLD, IS_ITALIC, IS_UNDERLINE } from "../../../FormatConstants.js";
 import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
-import BoldIcon from "../../../icons/format_bold.svg.js";
-import ItalicIcon from "../../../icons/format_italic.svg.js";
-import UnderlinedIcon from "../../../icons/format_underlined.svg.js";
 const BoldItalicUnderlineToggles = () => {
   const [currentFormat] = corePluginHooks.useEmitterValues("currentFormat");
   const applyFormat = corePluginHooks.usePublisher("applyFormat");
@@ -14,15 +11,16 @@ const BoldItalicUnderlineToggles = () => {
   const boldTitle = boldIsOn ? "Remove bold" : "Bold";
   const italicTitle = italicIsOn ? "Remove italic" : "Italic";
   const underlineTitle = underlineIsOn ? "Remove underline" : "Underline";
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
   return /* @__PURE__ */ React__default.createElement(
     MultipleChoiceToggleGroup,
     {
       items: [
-        { title: boldTitle, contents: /* @__PURE__ */ React__default.createElement(BoldIcon, null), active: boldIsOn, onChange: applyFormat.bind(null, "bold") },
-        { title: italicTitle, contents: /* @__PURE__ */ React__default.createElement(ItalicIcon, null), active: italicIsOn, onChange: applyFormat.bind(null, "italic") },
+        { 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(UnderlinedIcon, { style: { transform: "translateY(2px)" } }),
+          contents: /* @__PURE__ */ React__default.createElement("div", { style: { transform: "translateY(2px)" } }, iconComponentFor("format_underlined")),
           active: underlineIsOn,
           onChange: applyFormat.bind(null, "underline")
         }

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

@@ -1,17 +1,16 @@
 import React__default from "react";
 import { IS_CODE } from "../../../FormatConstants.js";
-import CodeIcon from "../../../icons/code.svg.js";
 import { corePluginHooks } from "../../core/index.js";
 import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
 const CodeToggle = () => {
-  const [currentFormat] = corePluginHooks.useEmitterValues("currentFormat");
+  const [currentFormat, iconComponentFor] = corePluginHooks.useEmitterValues("currentFormat", "iconComponentFor");
   const applyFormat = corePluginHooks.usePublisher("applyFormat");
   const codeIsOn = (currentFormat & IS_CODE) !== 0;
   const title = codeIsOn ? "Remove code format" : "Inline code format";
   return /* @__PURE__ */ React__default.createElement(
     MultipleChoiceToggleGroup,
     {
-      items: [{ title, contents: /* @__PURE__ */ React__default.createElement(CodeIcon, null), active: codeIsOn, onChange: applyFormat.bind(null, "code") }]
+      items: [{ title, contents: iconComponentFor("code"), active: codeIsOn, onChange: applyFormat.bind(null, "code") }]
     }
   );
 };

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

@@ -1,9 +1,9 @@
 import React__default from "react";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
-import LinkIcon from "../../../icons/link.svg.js";
 import { linkDialogPluginHooks } from "../../link-dialog/index.js";
 const CreateLink = () => {
   const openLinkDialog = linkDialogPluginHooks.usePublisher("openLinkEditDialog");
+  const [iconComponentFor] = linkDialogPluginHooks.useEmitterValues("iconComponentFor");
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
@@ -12,7 +12,7 @@ const CreateLink = () => {
         openLinkDialog(true);
       }
     },
-    /* @__PURE__ */ React__default.createElement(LinkIcon, null)
+    iconComponentFor("link")
   );
 };
 export {

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

@@ -1,22 +1,20 @@
 import React__default from "react";
 import { diffSourcePluginHooks } from "../../diff-source/index.js";
 import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
-import RichTextIcon from "../../../icons/rich_text.svg.js";
-import DiffIcon from "../../../icons/difference.svg.js";
-import SourceIcon from "../../../icons/markdown.svg.js";
 import styles from "../../../styles/ui.module.css.js";
 const DiffSourceToggleWrapper = ({ children }) => {
   const [viewMode] = diffSourcePluginHooks.useEmitterValues("viewMode");
   const changeViewMode = diffSourcePluginHooks.usePublisher("viewMode");
+  const [iconComponentFor] = diffSourcePluginHooks.useEmitterValues("iconComponentFor");
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, viewMode === "rich-text" ? children : viewMode === "diff" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, "Diff mode") : /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, "Source mode"), /* @__PURE__ */ React__default.createElement("div", { style: { marginLeft: "auto", pointerEvents: "auto", opacity: 1 } }, /* @__PURE__ */ React__default.createElement(
     SingleChoiceToggleGroup,
     {
       className: styles.diffSourceToggle,
       value: viewMode,
       items: [
-        { title: "Rich text", contents: /* @__PURE__ */ React__default.createElement(RichTextIcon, null), value: "rich-text" },
-        { title: "Diff mode", contents: /* @__PURE__ */ React__default.createElement(DiffIcon, null), value: "diff" },
-        { title: "Source", contents: /* @__PURE__ */ React__default.createElement(SourceIcon, null), value: "source" }
+        { title: "Rich text", contents: iconComponentFor("rich_text"), value: "rich-text" },
+        { title: "Diff mode", contents: iconComponentFor("difference"), value: "diff" },
+        { title: "Source", contents: iconComponentFor("markdown"), value: "source" }
       ],
       onChange: (value) => changeViewMode(value || "rich-text")
     }

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

@@ -1,10 +1,10 @@
 import React__default from "react";
 import { ButtonOrDropdownButton } from "../primitives/toolbar.js";
-import AdmonitionIcon from "../../../icons/emergency_home.svg.js";
 import { directivesPluginHooks } from "../../directives/index.js";
 import { ADMONITION_TYPES } from "../../../directive-editors/AdmonitionDirectiveDescriptor.js";
 const InsertAdmonition = () => {
   const insertDirective = directivesPluginHooks.usePublisher("insertDirective");
+  const [iconComponentFor] = directivesPluginHooks.useEmitterValues("iconComponentFor");
   const items = React__default.useMemo(
     () => ADMONITION_TYPES.map((type) => ({ value: type, label: type.replace(/^./, (l) => l.toUpperCase()) })),
     []
@@ -21,7 +21,7 @@ const InsertAdmonition = () => {
       },
       items
     },
-    /* @__PURE__ */ React__default.createElement(AdmonitionIcon, null)
+    iconComponentFor("admonition")
   );
 };
 export {

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

@@ -1,9 +1,9 @@
 import React__default from "react";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
-import FrameSourceIcon from "../../../icons/frame_source.svg.js";
 import { codeBlockPluginHooks } from "../../codeblock/index.js";
 const InsertCodeBlock = () => {
   const insertCodeBlock = codeBlockPluginHooks.usePublisher("insertCodeBlock");
+  const [iconComponentFor] = codeBlockPluginHooks.useEmitterValues("iconComponentFor");
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
@@ -12,7 +12,7 @@ const InsertCodeBlock = () => {
         insertCodeBlock({});
       }
     },
-    /* @__PURE__ */ React__default.createElement(FrameSourceIcon, null)
+    iconComponentFor("frame_source")
   );
 };
 export {

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

@@ -1,12 +1,12 @@
 import React__default from "react";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
-import FrontmatterIcon from "../../../icons/frontmatter.svg.js";
 import { frontmatterPluginHooks } from "../../frontmatter/index.js";
 import styles from "../../../styles/ui.module.css.js";
 import classNames from "classnames";
 const InsertFrontmatter = () => {
   const insertFrontmatter = frontmatterPluginHooks.usePublisher("insertFrontmatter");
   const [hasFrontmatter] = frontmatterPluginHooks.useEmitterValues("hasFrontmatter");
+  const [iconComponentFor] = frontmatterPluginHooks.useEmitterValues("iconComponentFor");
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
@@ -16,7 +16,7 @@ const InsertFrontmatter = () => {
       }),
       onClick: insertFrontmatter.bind(null, true)
     },
-    /* @__PURE__ */ React__default.createElement(FrontmatterIcon, null)
+    iconComponentFor("frontmatter")
   );
 };
 export {

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

@@ -1,14 +1,13 @@
 import React__default from "react";
 import { imagePluginHooks } from "../../image/index.js";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
-import AddPhotoIcon from "../../../icons/add_photo.svg.js";
 import styles from "../../../styles/ui.module.css.js";
 import { corePluginHooks } from "../../core/index.js";
 import { TooltipWrap } from "../primitives/TooltipWrap.js";
 const InsertImage = React__default.forwardRef((_, forwardedRef) => {
   const openNewImageDialog = imagePluginHooks.usePublisher("openNewImageDialog");
-  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
-  return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly, onClick: () => openNewImageDialog(true) }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: "Insert image" }, /* @__PURE__ */ React__default.createElement(AddPhotoIcon, null)));
+  const [readOnly, iconComponentFor] = corePluginHooks.useEmitterValues("readOnly", "iconComponentFor");
+  return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly, onClick: () => openNewImageDialog(true) }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: "Insert image" }, iconComponentFor("add_photo")));
 });
 export {
   InsertImage

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

@@ -1,12 +1,12 @@
 import React__default from "react";
 import { ButtonOrDropdownButton } from "../primitives/toolbar.js";
-import LiveCodeIcon from "../../../icons/deployed_code.svg.js";
 import { sandpackPluginHooks } from "../../sandpack/index.js";
 const InsertSandpack = () => {
   const [sandpackConfig] = sandpackPluginHooks.useEmitterValues("sandpackConfig");
   const insertSandpack = sandpackPluginHooks.usePublisher("insertSandpack");
   const items = React__default.useMemo(() => sandpackConfig.presets.map((preset) => ({ value: preset.name, label: preset.label })), [sandpackConfig]);
-  return /* @__PURE__ */ React__default.createElement(ButtonOrDropdownButton, { title: "Insert Sandpack", onChoose: insertSandpack, items }, /* @__PURE__ */ React__default.createElement(LiveCodeIcon, null));
+  const [iconComponentFor] = sandpackPluginHooks.useEmitterValues("iconComponentFor");
+  return /* @__PURE__ */ React__default.createElement(ButtonOrDropdownButton, { title: "Insert Sandpack", onChoose: insertSandpack, items }, iconComponentFor("sandpack"));
 };
 export {
   InsertSandpack

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

@@ -1,8 +1,8 @@
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
 import React__default from "react";
 import { tablePluginHooks } from "../../table/index.js";
-import TableIcon from "../../../icons/table.svg.js";
 const InsertTable = () => {
+  const [iconComponentFor] = tablePluginHooks.useEmitterValues("iconComponentFor");
   const insertTable = tablePluginHooks.usePublisher("insertTable");
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
@@ -12,7 +12,7 @@ const InsertTable = () => {
         insertTable({ rows: 3, columns: 3 });
       }
     },
-    /* @__PURE__ */ React__default.createElement(TableIcon, null)
+    iconComponentFor("table")
   );
 };
 export {

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

@@ -1,10 +1,10 @@
 import React__default from "react";
 import { thematicBreakPluginHooks } from "../../thematic-break/index.js";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
-import HorizontalRuleIcon from "../../../icons/horizontal_rule.svg.js";
 const InsertThematicBreak = () => {
   const insertThematicBreak = thematicBreakPluginHooks.usePublisher("insertThematicBreak");
-  return /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: "Insert thematic break", onClick: insertThematicBreak.bind(null, true) }, /* @__PURE__ */ React__default.createElement(HorizontalRuleIcon, null));
+  const [iconComponentFor] = thematicBreakPluginHooks.useEmitterValues("iconComponentFor");
+  return /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: "Insert thematic break", onClick: insertThematicBreak.bind(null, true) }, iconComponentFor("horizontal_rule"));
 };
 export {
   InsertThematicBreak

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

@@ -1,20 +1,18 @@
 import React__default from "react";
-import BulletedListIcon from "../../../icons/format_list_bulleted.svg.js";
-import NumberedListIcon from "../../../icons/format_list_numbered.svg.js";
-import CheckedListIcon from "../../../icons/format_list_checked.svg.js";
 import { listsPluginHooks } from "../../lists/index.js";
 import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
 const ListsToggle = () => {
   const [currentListType] = listsPluginHooks.useEmitterValues("currentListType");
   const applyListType = listsPluginHooks.usePublisher("applyListType");
+  const [iconComponentFor] = listsPluginHooks.useEmitterValues("iconComponentFor");
   return /* @__PURE__ */ React__default.createElement(
     SingleChoiceToggleGroup,
     {
       value: currentListType || "",
       items: [
-        { title: "Bulleted list", contents: /* @__PURE__ */ React__default.createElement(BulletedListIcon, null), value: "bullet" },
-        { title: "Numbered list", contents: /* @__PURE__ */ React__default.createElement(NumberedListIcon, null), value: "number" },
-        { title: "Check list", contents: /* @__PURE__ */ React__default.createElement(CheckedListIcon, null), value: "check" }
+        { title: "Bulleted list", contents: iconComponentFor("format_list_bulleted"), value: "bullet" },
+        { title: "Numbered list", contents: iconComponentFor("format_list_numbered"), value: "number" },
+        { title: "Check list", contents: iconComponentFor("format_list_checked"), value: "check" }
       ],
       onChange: applyListType
     }

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;
 };