@mdxeditor/editor 1.9.2 → 1.10.1

package/dist/plugins/table/TableEditor.js

@@ -5,28 +5,17 @@ import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
 import * as RadixPopover from "@radix-ui/react-popover";
 import { $createParagraphNode, createEditor, $getRoot, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND, BLUR_COMMAND } from "lexical";
 import React__default from "react";
-import { lexicalTheme } from "../../styles/lexicalTheme.js";
 import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
 import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
-import AddColumnIcon from "../../icons/add_column.svg.js";
-import AddRowIcon from "../../icons/add_row.svg.js";
-import DeleteSmallIcon from "../../icons/delete_small.svg.js";
-import AlignCenterIcon from "../../icons/format_align_center.svg.js";
-import AlignLeftIcon from "../../icons/format_align_left.svg.js";
-import AlignRightIcon from "../../icons/format_align_right.svg.js";
-import InsertColLeftIcon from "../../icons/insert_col_left.svg.js";
-import InsertColRightIcon from "../../icons/insert_col_right.svg.js";
-import InsertRowAboveIcon from "../../icons/insert_row_above.svg.js";
-import InsertRowBelowIcon from "../../icons/insert_row_below.svg.js";
-import MoreHorizIcon from "../../icons/more_horiz.svg.js";
+import { lexicalTheme } from "../../styles/lexicalTheme.js";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin.js";
+import { mergeRegister } from "@lexical/utils";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
 import classNames from "classnames";
 import styles from "../../styles/ui.module.css.js";
-import { corePluginHooks } from "../core/index.js";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin.js";
-import { mergeRegister } from "@lexical/utils";
 import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
 import { uuidv4 } from "../../utils/uuid4.js";
+import { corePluginHooks } from "../core/index.js";
 const AlignToTailwindClassMap = {
   center: styles.centeredCell,
   left: styles.leftAlignedCell,
@@ -34,6 +23,7 @@ const AlignToTailwindClassMap = {
 };
 const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
   const [activeCell, setActiveCell] = React__default.useState(null);
+  const [iconComponentFor, readOnly] = corePluginHooks.useEmitterValues("iconComponentFor", "readOnly");
   const getCellKey = React__default.useMemo(() => {
     const cellKeyMap = /* @__PURE__ */ new WeakMap();
     return (cell) => {
@@ -130,7 +120,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
     const currentColumnAlign = align[colIndex] || "left";
     const className = AlignToTailwindClassMap[currentColumnAlign];
     return /* @__PURE__ */ React__default.createElement("col", { key: colIndex, className });
-  }), /* @__PURE__ */ React__default.createElement("col", null)), /* @__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(
+  }), /* @__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",
     {
       className: styles.iconButton,
@@ -144,7 +134,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
         });
       }
     },
-    /* @__PURE__ */ React__default.createElement(DeleteSmallIcon, null)
+    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,
@@ -160,7 +150,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
       }
     ));
   }), /* @__PURE__ */ React__default.createElement("th", { className: styles.tableToolsColumn }))), /* @__PURE__ */ React__default.createElement("tbody", null, mdastNode.children.map((row, rowIndex) => {
-    return /* @__PURE__ */ React__default.createElement("tr", { key: rowIndex }, /* @__PURE__ */ React__default.createElement("td", { className: styles.toolCell, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(RowEditor, { ...{ setActiveCellWithBoundaries, parentEditor, rowIndex, highlightedCoordinates, lexicalTable } })), row.children.map((mdastCell, colIndex) => {
+    return /* @__PURE__ */ React__default.createElement("tr", { key: rowIndex }, readOnly || /* @__PURE__ */ React__default.createElement("td", { 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,
@@ -174,12 +164,12 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
             colIndex,
             lexicalTable,
             parentEditor,
-            activeCell
+            activeCell: readOnly ? [-1, -1] : activeCell
           }
         }
       );
-    }), 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 }, /* @__PURE__ */ React__default.createElement(AddColumnIcon, null))));
-  })), /* @__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 }, /* @__PURE__ */ React__default.createElement(AddRowIcon, null))), /* @__PURE__ */ React__default.createElement("th", null))));
+    }), 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;
@@ -295,6 +285,7 @@ const ColumnEditor = ({
   setActiveCellWithBoundaries
 }) => {
   const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
   const insertColumnAt = React__default.useCallback(
     (colIndex2) => {
       parentEditor.update(() => {
@@ -327,7 +318,7 @@ const ColumnEditor = ({
       "data-active": highlightedCoordinates[0] === colIndex + 1,
       title: "Column menu"
     },
-    /* @__PURE__ */ React__default.createElement(MoreHorizIcon, null)
+    iconComponentFor("more_horiz")
   ), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
     RadixPopover.PopoverContent,
     {
@@ -347,10 +338,11 @@ const ColumnEditor = ({
         type: "single",
         "aria-label": "Text alignment"
       },
-      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "left", title: "Align left" }, /* @__PURE__ */ React__default.createElement(AlignLeftIcon, null)),
-      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "center", title: "Align center" }, /* @__PURE__ */ React__default.createElement(AlignCenterIcon, null)),
-      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "right", title: "Align right" }, /* @__PURE__ */ React__default.createElement(AlignRightIcon, null))
-    ), /* @__PURE__ */ React__default.createElement(RadixToolbar.Separator, null), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertColumnAt.bind(null, colIndex), title: "Insert a column to the left of this one" }, /* @__PURE__ */ React__default.createElement(InsertColLeftIcon, null)), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertColumnAt.bind(null, colIndex + 1), title: "Insert a column to the right of this one" }, /* @__PURE__ */ React__default.createElement(InsertColRightIcon, null)), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteColumnAt.bind(null, colIndex), title: "Delete this column" }, /* @__PURE__ */ React__default.createElement(DeleteSmallIcon, null)))
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "left", title: "Align left" }, iconComponentFor("format_align_left")),
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "center", title: "Align center" }, iconComponentFor("format_align_center")),
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "right", title: "Align right" }, iconComponentFor("format_align_right"))
+    ), /* @__PURE__ */ React__default.createElement(RadixToolbar.Separator, null), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertColumnAt.bind(null, colIndex), title: "Insert a column to the left of this one" }, iconComponentFor("insert_col_left")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertColumnAt.bind(null, colIndex + 1), title: "Insert a column to the right of this one" }, iconComponentFor("insert_col_right")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteColumnAt.bind(null, colIndex), title: "Delete this column" }, iconComponentFor("delete_small"))),
+    /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
   )));
 };
 const RowEditor = ({
@@ -361,6 +353,7 @@ const RowEditor = ({
   setActiveCellWithBoundaries
 }) => {
   const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
   const insertRowAt = React__default.useCallback(
     (rowIndex2) => {
       parentEditor.update(() => {
@@ -378,7 +371,7 @@ const RowEditor = ({
     },
     [parentEditor, lexicalTable]
   );
-  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, null, /* @__PURE__ */ React__default.createElement(RadixPopover.PopoverTrigger, { className: styles.tableColumnEditorTrigger, "data-active": highlightedCoordinates[1] === rowIndex }, /* @__PURE__ */ React__default.createElement(MoreHorizIcon, null)), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, null, /* @__PURE__ */ React__default.createElement(RadixPopover.PopoverTrigger, { className: styles.tableColumnEditorTrigger, "data-active": highlightedCoordinates[1] === rowIndex }, iconComponentFor("more_horiz")), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
     RadixPopover.PopoverContent,
     {
       className: classNames(styles.tableColumnEditorPopoverContent),
@@ -386,7 +379,8 @@ const RowEditor = ({
       sideOffset: 5,
       side: "bottom"
     },
-    /* @__PURE__ */ React__default.createElement(RadixToolbar.Root, { className: styles.tableColumnEditorToolbar }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertRowAt.bind(null, rowIndex), title: "Insert a row above this one" }, /* @__PURE__ */ React__default.createElement(InsertRowAboveIcon, null)), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertRowAt.bind(null, rowIndex + 1), title: "Insert a row below this one" }, /* @__PURE__ */ React__default.createElement(InsertRowBelowIcon, null)), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteRowAt.bind(null, rowIndex), title: "Delete this row" }, /* @__PURE__ */ React__default.createElement(DeleteSmallIcon, null)))
+    /* @__PURE__ */ React__default.createElement(RadixToolbar.Root, { className: styles.tableColumnEditorToolbar }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertRowAt.bind(null, rowIndex), title: "Insert a row above this one" }, iconComponentFor("insert_row_above")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertRowAt.bind(null, rowIndex + 1), title: "Insert a row below this one" }, iconComponentFor("insert_row_below")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteRowAt.bind(null, rowIndex), title: "Delete this row" }, iconComponentFor("delete_small"))),
+    /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
   )));
 };
 export {

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
     }