@mdxeditor/editor 1.9.2 → 1.10.0

package/dist/plugins/link-dialog/LinkDialog.js

@@ -1,18 +1,13 @@
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import React__default from "react";
-import { createCommand } from "lexical";
-import CheckIcon from "../../icons/check.svg.js";
-import CopyIcon from "../../icons/content_copy.svg.js";
-import EditIcon from "../../icons/edit.svg.js";
-import LinkOffIcon from "../../icons/link_off.svg.js";
-import OpenInNewIcon from "../../icons/open_in_new.svg.js";
-import classNames from "classnames";
-import styles from "../../styles/ui.module.css.js";
 import { corePluginHooks } from "../core/index.js";
-import { linkDialogPluginHooks } from "./index.js";
-import { useForm } from "react-hook-form";
 import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
+import styles from "../../styles/ui.module.css.js";
+import classNames from "classnames";
+import { createCommand } from "lexical";
+import { useForm } from "react-hook-form";
+import { linkDialogPluginHooks } from "./index.js";
 createCommand();
 function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggestions }) {
   const {
@@ -62,6 +57,7 @@ const LinkDialog = () => {
   const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
   const publishWindowChange = linkDialogPluginHooks.usePublisher("onWindowChange");
   const [activeEditor] = corePluginHooks.useEmitterValues("activeEditor");
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
   const [linkDialogState, linkAutocompleteSuggestions] = linkDialogPluginHooks.useEmitterValues(
     "linkDialogState",
     "linkAutocompleteSuggestions"
@@ -125,8 +121,8 @@ const LinkDialog = () => {
         title: urlIsExternal ? `Open ${linkDialogState.url} in new window` : linkDialogState.url
       },
       /* @__PURE__ */ React__default.createElement("span", null, linkDialogState.url),
-      urlIsExternal && /* @__PURE__ */ React__default.createElement(OpenInNewIcon, null)
-    ), /* @__PURE__ */ React__default.createElement(ActionButton, { onClick: () => switchFromPreviewToLinkEdit(true), title: "Edit link URL", "aria-label": "Edit link URL" }, /* @__PURE__ */ React__default.createElement(EditIcon, null)), /* @__PURE__ */ React__default.createElement(Tooltip.Provider, null, /* @__PURE__ */ React__default.createElement(Tooltip.Root, { open: copyUrlTooltipOpen }, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+      urlIsExternal && iconComponentFor("open_in_new")
+    ), /* @__PURE__ */ React__default.createElement(ActionButton, { onClick: () => switchFromPreviewToLinkEdit(true), title: "Edit link URL", "aria-label": "Edit link URL" }, iconComponentFor("edit")), /* @__PURE__ */ React__default.createElement(Tooltip.Provider, null, /* @__PURE__ */ React__default.createElement(Tooltip.Root, { open: copyUrlTooltipOpen }, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
       ActionButton,
       {
         title: "Copy to clipboard",
@@ -138,8 +134,9 @@ const LinkDialog = () => {
           });
         }
       },
-      copyUrlTooltipOpen ? /* @__PURE__ */ React__default.createElement(CheckIcon, null) : /* @__PURE__ */ React__default.createElement(CopyIcon, null)
-    )), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 5 }, "Copied!", /* @__PURE__ */ React__default.createElement(Tooltip.Arrow, null))))), /* @__PURE__ */ React__default.createElement(ActionButton, { title: "Remove link", "aria-label": "Remove link", onClick: () => removeLink(true) }, /* @__PURE__ */ React__default.createElement(LinkOffIcon, null)))
+      copyUrlTooltipOpen ? iconComponentFor("check") : iconComponentFor("content_copy")
+    )), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 5 }, "Copied!", /* @__PURE__ */ React__default.createElement(Tooltip.Arrow, null))))), /* @__PURE__ */ React__default.createElement(ActionButton, { title: "Remove link", "aria-label": "Remove link", onClick: () => removeLink(true) }, iconComponentFor("link_off"))),
+    /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
   )));
 };
 const ActionButton = React__default.forwardRef(({ className, ...props }, ref) => {

package/dist/plugins/link-dialog/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';
@@ -89,6 +90,7 @@ linkDialogPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }>], (r: Realm, [{ activeEditor, currentSelection, createActiveEditorSubscription }]: [{
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -144,6 +146,7 @@ linkDialogPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }]) => {
     dialogState: RealmNode<boolean>;
     onWindowChange: RealmNode<true>;
@@ -232,8 +235,9 @@ linkDialogPluginHooks: {
         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" | "dialogState" | "onWindowChange" | "linkDialogState" | "updateLink" | "switchFromPreviewToLinkEdit" | "cancelLinkEdit" | "removeLink" | "openLinkEditDialog" | "applyLinkChanges" | "linkAutocompleteSuggestions">(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" | "dialogState" | "onWindowChange" | "linkDialogState" | "updateLink" | "switchFromPreviewToLinkEdit" | "cancelLinkEdit" | "removeLink" | "openLinkEditDialog" | "applyLinkChanges" | "linkAutocompleteSuggestions">(key: K, callback: (value: ValueForKey<{
         dialogState: RealmNode<boolean>;
         onWindowChange: RealmNode<true>;
         linkDialogState: RealmNode<InactiveLinkDialog | PreviewLinkDialog | EditLinkDialog>;
@@ -302,6 +306,7 @@ linkDialogPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K>) => void) => void;
     useEmitterValues: <K_1 extends SystemKeys<{
         dialogState: RealmNode<boolean>;
@@ -372,6 +377,7 @@ linkDialogPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }>>(...keys: K_1) => ValuesForKeys<{
         dialogState: RealmNode<boolean>;
         onWindowChange: RealmNode<true>;
@@ -441,6 +447,7 @@ linkDialogPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_1>;
     usePubKeys: () => (values: SystemDict<{
         dialogState: RealmNode<boolean>;
@@ -511,8 +518,9 @@ linkDialogPluginHooks: {
         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" | "dialogState" | "onWindowChange" | "linkDialogState" | "updateLink" | "switchFromPreviewToLinkEdit" | "cancelLinkEdit" | "removeLink" | "openLinkEditDialog" | "applyLinkChanges" | "linkAutocompleteSuggestions">(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" | "dialogState" | "onWindowChange" | "linkDialogState" | "updateLink" | "switchFromPreviewToLinkEdit" | "cancelLinkEdit" | "removeLink" | "openLinkEditDialog" | "applyLinkChanges" | "linkAutocompleteSuggestions">(key: K_2) => (value: ValueForKey<{
         dialogState: RealmNode<boolean>;
         onWindowChange: RealmNode<true>;
         linkDialogState: RealmNode<InactiveLinkDialog | PreviewLinkDialog | EditLinkDialog>;
@@ -581,6 +589,7 @@ linkDialogPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_2>) => void;
 };
 export {};

package/dist/plugins/lists/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';
@@ -69,6 +70,7 @@ export declare const listsSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }>], (r: Realm, [{ activeEditor, currentSelection }]: [{
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -124,6 +126,7 @@ export declare const listsSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }]) => {
     currentListType: RealmNode<"" | ListType>;
     applyListType: RealmNode<"" | ListType>;
@@ -185,6 +188,7 @@ listsPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }>], (r: Realm, [{ activeEditor, currentSelection }]: [{
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -240,6 +244,7 @@ listsPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }]) => {
     currentListType: RealmNode<"" | ListType>;
     applyListType: RealmNode<"" | ListType>;
@@ -304,8 +309,9 @@ listsPluginHooks: {
         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" | "currentListType" | "applyListType">(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" | "currentListType" | "applyListType">(key: K, callback: (value: ValueForKey<{
         currentListType: RealmNode<"" | ListType>;
         applyListType: RealmNode<"" | ListType>;
     } & {
@@ -363,6 +369,7 @@ listsPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K>) => void) => void;
     useEmitterValues: <K_1 extends SystemKeys<{
         currentListType: RealmNode<"" | ListType>;
@@ -422,6 +429,7 @@ listsPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }>>(...keys: K_1) => ValuesForKeys<{
         currentListType: RealmNode<"" | ListType>;
         applyListType: RealmNode<"" | ListType>;
@@ -480,6 +488,7 @@ listsPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_1>;
     usePubKeys: () => (values: SystemDict<{
         currentListType: RealmNode<"" | ListType>;
@@ -539,8 +548,9 @@ listsPluginHooks: {
         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" | "currentListType" | "applyListType">(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" | "currentListType" | "applyListType">(key: K_2) => (value: ValueForKey<{
         currentListType: RealmNode<"" | ListType>;
         applyListType: RealmNode<"" | ListType>;
     } & {
@@ -598,5 +608,6 @@ listsPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_2>) => void;
 };

package/dist/plugins/markdown-shortcut/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,4 +67,5 @@ export declare const markdownShortcutPlugin: PluginConstructor<SystemSpec<[Syste
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }>], (_: Realm) => {}>, object>;

package/dist/plugins/quote/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';
@@ -68,6 +69,7 @@ quotePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
 }>], () => {}>, object>, 
 /** @internal */
 quotePluginHooks: {
@@ -126,8 +128,9 @@ quotePluginHooks: {
         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">(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">(key: K, callback: (value: ValueForKey<{
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
         historyState: RealmNode<HistoryState>;
@@ -182,6 +185,7 @@ quotePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K>) => void) => void;
     useEmitterValues: <K_1 extends SystemKeys<{
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -238,6 +242,7 @@ quotePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }>>(...keys: K_1) => ValuesForKeys<{
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -293,6 +298,7 @@ quotePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_1>;
     usePubKeys: () => (values: SystemDict<{
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -349,8 +355,9 @@ quotePluginHooks: {
         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">(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">(key: K_2) => (value: ValueForKey<{
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
         historyState: RealmNode<HistoryState>;
@@ -405,5 +412,6 @@ quotePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => ReactNode>;
     }, K_2>) => void;
 };

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

@@ -1,4 +1,5 @@
 import type { CodeBlockEditorDescriptor, CreateCodeBlockNodeOptions } from '../codeblock';
+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';
@@ -130,6 +131,7 @@ export declare const sandpackSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }>, SystemSpec<[SystemSpec<[], (r: Realm) => {
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -185,6 +187,7 @@ export declare const sandpackSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }>], (r: Realm, [{ insertDecoratorNode }]: [{
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -240,6 +243,7 @@ export declare const sandpackSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }]) => {
     codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
     defaultCodeBlockLanguage: RealmNode<string>;
@@ -300,6 +304,7 @@ export declare const sandpackSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }, {
     codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
     defaultCodeBlockLanguage: RealmNode<string>;
@@ -366,6 +371,7 @@ sandpackPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }>, SystemSpec<[SystemSpec<[], (r: Realm) => {
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -421,6 +427,7 @@ sandpackPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }>], (r: Realm, [{ insertDecoratorNode }]: [{
     activeEditor: RealmNode<LexicalEditor | null>;
     inFocus: RealmNode<boolean>;
@@ -476,6 +483,7 @@ sandpackPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }]) => {
     codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
     defaultCodeBlockLanguage: RealmNode<string>;
@@ -536,6 +544,7 @@ sandpackPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
 }, {
     codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
     defaultCodeBlockLanguage: RealmNode<string>;
@@ -607,13 +616,14 @@ sandpackPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     } & {
         codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
         defaultCodeBlockLanguage: RealmNode<string>;
         appendCodeBlockEditorDescriptor: RealmNode<CodeBlockEditorDescriptor>;
         insertCodeBlock: RealmNode<Partial<CreateCodeBlockNodeOptions>>;
     }>;
-    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" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock" | "insertSandpack" | "sandpackConfig">(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" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock" | "insertSandpack" | "sandpackConfig">(key: K, callback: (value: ValueForKey<{
         insertSandpack: RealmNode<string>;
         sandpackConfig: RealmNode<SandpackConfig>;
     } & {
@@ -671,6 +681,7 @@ sandpackPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     } & {
         codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
         defaultCodeBlockLanguage: RealmNode<string>;
@@ -735,6 +746,7 @@ sandpackPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     } & {
         codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
         defaultCodeBlockLanguage: RealmNode<string>;
@@ -798,6 +810,7 @@ sandpackPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     } & {
         codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
         defaultCodeBlockLanguage: RealmNode<string>;
@@ -862,13 +875,14 @@ sandpackPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     } & {
         codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
         defaultCodeBlockLanguage: RealmNode<string>;
         appendCodeBlockEditorDescriptor: RealmNode<CodeBlockEditorDescriptor>;
         insertCodeBlock: RealmNode<Partial<CreateCodeBlockNodeOptions>>;
     }>) => 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" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock" | "insertSandpack" | "sandpackConfig">(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" | "codeBlockEditorDescriptors" | "defaultCodeBlockLanguage" | "appendCodeBlockEditorDescriptor" | "insertCodeBlock" | "insertSandpack" | "sandpackConfig">(key: K_2) => (value: ValueForKey<{
         insertSandpack: RealmNode<string>;
         sandpackConfig: RealmNode<SandpackConfig>;
     } & {
@@ -926,6 +940,7 @@ sandpackPluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
+        iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
     } & {
         codeBlockEditorDescriptors: RealmNode<CodeBlockEditorDescriptor[]>;
         defaultCodeBlockLanguage: RealmNode<string>;

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 {