@mdxeditor/editor 0.10.0 → 0.11.0

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

@@ -0,0 +1,52 @@
+import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { $createParagraphNode } from "lexical";
+import React__default from "react";
+import { corePluginHooks } from "../../core/index.js";
+import { Select } from "../primitives/select.js";
+import { useHasPlugin } from "../../../gurx/react.js";
+const BlockTypeSelect = () => {
+  const convertSelectionToNode = corePluginHooks.usePublisher("convertSelectionToNode");
+  const [currentBlockType] = corePluginHooks.useEmitterValues("currentBlockType");
+  const hasQuote = useHasPlugin("quote");
+  const hasHeadings = useHasPlugin("headings");
+  if (!hasQuote && !hasHeadings) {
+    return null;
+  }
+  const items = [{ label: "Paragraph", value: "paragraph" }];
+  if (hasQuote) {
+    items.push({ label: "Quote", value: "quote" });
+  }
+  if (hasHeadings) {
+    items.push(...[1, 2, 3, 4, 5, 6].map((n) => ({ label: `Heading ${n}`, value: `h${n}` })));
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    Select,
+    {
+      value: currentBlockType,
+      onChange: (blockType) => {
+        switch (blockType) {
+          case "quote":
+            convertSelectionToNode(() => $createQuoteNode());
+            break;
+          case "paragraph":
+            convertSelectionToNode(() => $createParagraphNode());
+            break;
+          default:
+            if (blockType == "")
+              ;
+            else if (blockType.startsWith("h")) {
+              convertSelectionToNode(() => $createHeadingNode(blockType));
+            } else {
+              throw new Error(`Unknown block type: ${blockType}`);
+            }
+        }
+      },
+      triggerTitle: "Select block type",
+      placeholder: "Block type",
+      items
+    }
+  );
+};
+export {
+  BlockTypeSelect
+};

package/dist/plugins/toolbar/components/BoldItalicUnderlineToggles.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * A toolbar component that lets the user toggle bold, italic and underline formatting.
+ */
+export declare const BoldItalicUnderlineToggles: React.FC;

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

@@ -0,0 +1,35 @@
+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");
+  const boldIsOn = (currentFormat & IS_BOLD) !== 0;
+  const italicIsOn = (currentFormat & IS_ITALIC) !== 0;
+  const underlineIsOn = (currentFormat & IS_UNDERLINE) !== 0;
+  const boldTitle = boldIsOn ? "Remove bold" : "Bold";
+  const italicTitle = italicIsOn ? "Remove italic" : "Italic";
+  const underlineTitle = underlineIsOn ? "Remove underline" : "Underline";
+  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: underlineTitle,
+          contents: /* @__PURE__ */ React__default.createElement(UnderlinedIcon, { style: { transform: "translateY(2px)" } }),
+          active: underlineIsOn,
+          onChange: applyFormat.bind(null, "underline")
+        }
+      ]
+    }
+  );
+};
+export {
+  BoldItalicUnderlineToggles
+};

package/dist/plugins/toolbar/components/ChangeAdmonitionType.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A component that allows the user to change the admonition type of the current selection.
+ * For this component to work, you must pass the {@link AdmonitionDirectiveDescriptor} to the `directivesPlugin` `directiveDescriptors` parameter.
+ */
+export declare const ChangeAdmonitionType: () => React.JSX.Element;

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

@@ -0,0 +1,30 @@
+import React__default from "react";
+import { corePluginHooks } from "../../core/index.js";
+import { Select } from "../primitives/select.js";
+import { ADMONITION_TYPES } from "../../../directive-editors/AdmonitionDirectiveDescriptor.js";
+const ChangeAdmonitionType = () => {
+  const [editorInFocus, rootEditor] = corePluginHooks.useEmitterValues("editorInFocus", "rootEditor");
+  const admonitionNode = editorInFocus.rootNode;
+  return /* @__PURE__ */ React__default.createElement(
+    Select,
+    {
+      value: admonitionNode.getMdastNode().name,
+      onChange: (name) => {
+        rootEditor == null ? void 0 : rootEditor.update(() => {
+          admonitionNode.setMdastNode({ ...admonitionNode.getMdastNode(), name });
+          setTimeout(() => {
+            rootEditor == null ? void 0 : rootEditor.update(() => {
+              admonitionNode.getLatest().select();
+            });
+          }, 80);
+        });
+      },
+      triggerTitle: "Select admonition type",
+      placeholder: "Admonition type",
+      items: ADMONITION_TYPES.map((type) => ({ label: type, value: type }))
+    }
+  );
+};
+export {
+  ChangeAdmonitionType
+};

package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * A component that allows the user to change the code block language of the current selection.
+ * For this component to work, you must enable the `codeMirrorPlugin` for the editor.
+ * See {@link ConditionalContents} for an example on how to display the dropdown only when a code block is in focus.
+ */
+export declare const ChangeCodeMirrorLanguage: () => React.JSX.Element;

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

@@ -0,0 +1,32 @@
+import React__default from "react";
+import { corePluginHooks } from "../../core/index.js";
+import { Select } from "../primitives/select.js";
+import { codeMirrorHooks } from "../../codemirror/index.js";
+import styles from "../../../styles/ui.module.css.js";
+const ChangeCodeMirrorLanguage = () => {
+  const [editorInFocus, theEditor] = corePluginHooks.useEmitterValues("editorInFocus", "activeEditor");
+  const codeBlockNode = editorInFocus.rootNode;
+  const [codeBlockLanguages] = codeMirrorHooks.useEmitterValues("codeBlockLanguages");
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement("label", null, "Code block language:"), /* @__PURE__ */ React__default.createElement(
+    Select,
+    {
+      value: codeBlockNode.getLanguage(),
+      onChange: (language) => {
+        theEditor == null ? void 0 : theEditor.update(() => {
+          codeBlockNode.setLanguage(language);
+          setTimeout(() => {
+            theEditor == null ? void 0 : theEditor.update(() => {
+              codeBlockNode.getLatest().select();
+            });
+          });
+        });
+      },
+      triggerTitle: "Select code block language",
+      placeholder: "Code block language",
+      items: Object.entries(codeBlockLanguages).map(([value, label]) => ({ value, label }))
+    }
+  ));
+};
+export {
+  ChangeCodeMirrorLanguage
+};

package/dist/plugins/toolbar/components/CodeToggle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A toolbar component that lets the user toggle code formatting.
+ * Use for inline `code` elements (like variables, methods, etc).
+ */
+export declare const CodeToggle: React.FC;

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

@@ -0,0 +1,20 @@
+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 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") }]
+    }
+  );
+};
+export {
+  CodeToggle
+};

package/dist/plugins/toolbar/components/CreateLink.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A toolbar component that opens the link edit dialog.
+ * For this component to work, you must include the `linkDialogPlugin`.
+ */
+export declare const CreateLink: () => React.JSX.Element;

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

@@ -0,0 +1,11 @@
+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");
+  return /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: "Create link", onClick: (_) => openLinkDialog(true) }, /* @__PURE__ */ React__default.createElement(LinkIcon, null));
+};
+export {
+  CreateLink
+};

package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/**
+ * A wrapper element for the toolbar contents that lets the user toggle between rich text, diff and source mode.
+ * Put the rich text toolbar contents as children of this component.
+ * For this component to work, you must include the `diffSourcePlugin`.
+ *
+ * @example
+ * ```tsx
+ *  <MDXEditor markdown='Hello world'
+ *    plugins={[toolbarPlugin({
+ *      toolbarContents: () => ( <> <DiffSourceToggleWrapper><UndoRedo /><BoldItalicUnderlineToggles /></DiffSourceToggleWrapper></>)
+ *    }), diffSourcePlugin()]}
+ *  />
+ * ```
+ */
+export declare const DiffSourceToggleWrapper: React.FC<{
+    children: React.ReactNode;
+}>;

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

@@ -0,0 +1,27 @@
+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");
+  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" } }, /* @__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" }
+      ],
+      onChange: (value) => changeViewMode(value || "rich-text")
+    }
+  )));
+};
+export {
+  DiffSourceToggleWrapper
+};

package/dist/plugins/toolbar/components/InsertAdmonition.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A toolbar dropdown button that allows the user to insert admonitions.
+ * For this to work, you need to have the `directives` plugin enabled with the {@link AdmonitionDirectiveDescriptor} configured.
+ */
+export declare const InsertAdmonition: () => React.JSX.Element;

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

@@ -0,0 +1,29 @@
+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 items = React__default.useMemo(
+    () => ADMONITION_TYPES.map((type) => ({ value: type, label: type.replace(/^./, (l) => l.toUpperCase()) })),
+    []
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    ButtonOrDropdownButton,
+    {
+      title: "Insert admonition",
+      onChoose: (admonitionName) => {
+        insertDirective({
+          type: "containerDirective",
+          name: admonitionName
+        });
+      },
+      items
+    },
+    /* @__PURE__ */ React__default.createElement(AdmonitionIcon, null)
+  );
+};
+export {
+  InsertAdmonition
+};

package/dist/plugins/toolbar/components/InsertCodeBlock.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a fenced code block.
+ * Once the code block is focused, you can construct a special code block toolbar for it, using the {@link ConditionalContents} primitive.
+ * See the {@link ConditionalContents} documentation for an example.
+ */
+export declare const InsertCodeBlock: React.FC;

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

@@ -0,0 +1,20 @@
+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");
+  return /* @__PURE__ */ React__default.createElement(
+    ButtonWithTooltip,
+    {
+      title: "Insert code block",
+      onClick: () => {
+        insertCodeBlock({});
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(FrameSourceIcon, null)
+  );
+};
+export {
+  InsertCodeBlock
+};

package/dist/plugins/toolbar/components/InsertFrontmatter.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a {@link https://jekyllrb.com/docs/front-matter/ | front-matter} editor (if one is not already present).
+ * For this to work, you need to have the `frontmatterPlugin` plugin enabled.
+ */
+export declare const InsertFrontmatter: React.FC;

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

@@ -0,0 +1,11 @@
+import React__default from "react";
+import { ButtonWithTooltip } from "../primitives/toolbar.js";
+import FrontmatterIcon from "../../../icons/frontmatter.svg.js";
+import { frontmatterPluginHooks } from "../../frontmatter/index.js";
+const InsertFrontmatter = () => {
+  const insertFrontmatter = frontmatterPluginHooks.usePublisher("insertFrontmatter");
+  return /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: "Insert frontmatter editor", onClick: insertFrontmatter.bind(null, true) }, /* @__PURE__ */ React__default.createElement(FrontmatterIcon, null));
+};
+export {
+  InsertFrontmatter
+};

package/dist/plugins/toolbar/components/InsertImage.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A toolbar button that allows the user to insert an image from an URL.
+ * For the button to work, you need to have the `imagePlugin` plugin enabled.
+ */
+export declare const InsertImage: React.ForwardRefExoticComponent<Omit<Record<string, never>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,23 @@
+import React__default from "react";
+import { imagePluginHooks } from "../../image/index.js";
+import { DialogButton } from "../primitives/DialogButton.js";
+import AddPhotoIcon from "../../../icons/add_photo.svg.js";
+const InsertImage = React__default.forwardRef((_, forwardedRef) => {
+  const [imageAutocompleteSuggestions] = imagePluginHooks.useEmitterValues("imageAutocompleteSuggestions");
+  const insertImage = imagePluginHooks.usePublisher("insertImage");
+  return /* @__PURE__ */ React__default.createElement(
+    DialogButton,
+    {
+      ref: forwardedRef,
+      submitButtonTitle: "Insert Image",
+      dialogInputPlaceholder: "Paste or select image URL",
+      tooltipTitle: "Insert image",
+      onSubmit: insertImage,
+      buttonContent: /* @__PURE__ */ React__default.createElement(AddPhotoIcon, null),
+      autocompleteSuggestions: imageAutocompleteSuggestions
+    }
+  );
+});
+export {
+  InsertImage
+};

package/dist/plugins/toolbar/components/InsertSandpack.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A dropdown button that allows the user to insert a live code block into the editor. The dropdown offers a list of presets that are defined in the sandpack plugin config.
+ * For this to work, you need to have the `sandpackPlugin` installed.
+ */
+export declare const InsertSandpack: () => React.JSX.Element;

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

@@ -0,0 +1,13 @@
+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.name })), [sandpackConfig]);
+  return /* @__PURE__ */ React__default.createElement(ButtonOrDropdownButton, { title: "Insert Sandpack", onChoose: insertSandpack, items }, /* @__PURE__ */ React__default.createElement(LiveCodeIcon, null));
+};
+export {
+  InsertSandpack
+};

package/dist/plugins/toolbar/components/InsertTable.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a table.
+ * For this button to work, you need to have the `tablePlugin` plugin enabled.
+ */
+export declare const InsertTable: React.FC;

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

@@ -0,0 +1,20 @@
+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 insertTable = tablePluginHooks.usePublisher("insertTable");
+  return /* @__PURE__ */ React__default.createElement(
+    ButtonWithTooltip,
+    {
+      title: "Insert table",
+      onClick: () => {
+        insertTable(true);
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(TableIcon, null)
+  );
+};
+export {
+  InsertTable
+};

package/dist/plugins/toolbar/components/InsertThematicBreak.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a thematic break (rendered as an HR HTML element).
+ * For this button to work, you need to have the `thematicBreakPlugin` plugin enabled.
+ */
+export declare const InsertThematicBreak: React.FC;

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

@@ -0,0 +1,11 @@
+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));
+};
+export {
+  InsertThematicBreak
+};

package/dist/plugins/toolbar/components/KitchenSinkToolbar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * A toolbar component that includes all toolbar components.
+ * Notice that some of the buttons will work only if you have the corresponding plugin enabled, so you should use it only for testing purposes.
+ * You'll probably want to create your own toolbar component that includes only the buttons that you need.
+ */
+export declare const KitchenSinkToolbar: React.FC;

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

@@ -0,0 +1,58 @@
+import React__default from "react";
+import { ConditionalContents, Separator } from "../primitives/toolbar.js";
+import { BlockTypeSelect } from "./BlockTypeSelect.js";
+import { BoldItalicUnderlineToggles } from "./BoldItalicUnderlineToggles.js";
+import { ChangeAdmonitionType } from "./ChangeAdmonitionType.js";
+import { ChangeCodeMirrorLanguage } from "./ChangeCodeMirrorLanguage.js";
+import { CodeToggle } from "./CodeToggle.js";
+import { DiffSourceToggleWrapper } from "./DiffSourceToggleWrapper.js";
+import { InsertAdmonition } from "./InsertAdmonition.js";
+import { InsertCodeBlock } from "./InsertCodeBlock.js";
+import { InsertFrontmatter } from "./InsertFrontmatter.js";
+import { InsertImage } from "./InsertImage.js";
+import { InsertSandpack } from "./InsertSandpack.js";
+import { InsertTable } from "./InsertTable.js";
+import { InsertThematicBreak } from "./InsertThematicBreak.js";
+import { ListsToggle } from "./ListsToggle.js";
+import { ShowSandpackInfo } from "./ShowSandpackInfo.js";
+import { UndoRedo } from "./UndoRedo.js";
+import { CreateLink } from "./CreateLink.js";
+function whenInAdmonition(editorInFocus) {
+  const node = editorInFocus == null ? void 0 : editorInFocus.rootNode;
+  if (!node || node.getType() !== "directive") {
+    return false;
+  }
+  return ["note", "tip", "danger", "info", "caution"].includes(node.getMdastNode().name);
+}
+const KitchenSinkToolbar = () => {
+  return /* @__PURE__ */ React__default.createElement(DiffSourceToggleWrapper, null, /* @__PURE__ */ React__default.createElement(
+    ConditionalContents,
+    {
+      options: [
+        { when: (editor) => (editor == null ? void 0 : editor.editorType) === "codeblock", contents: () => /* @__PURE__ */ React__default.createElement(ChangeCodeMirrorLanguage, null) },
+        { when: (editor) => (editor == null ? void 0 : editor.editorType) === "sandpack", contents: () => /* @__PURE__ */ React__default.createElement(ShowSandpackInfo, null) },
+        {
+          fallback: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(UndoRedo, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(BoldItalicUnderlineToggles, null), /* @__PURE__ */ React__default.createElement(CodeToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(ListsToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(
+            ConditionalContents,
+            {
+              options: [{ when: whenInAdmonition, contents: () => /* @__PURE__ */ React__default.createElement(ChangeAdmonitionType, null) }, { fallback: () => /* @__PURE__ */ React__default.createElement(BlockTypeSelect, null) }]
+            }
+          ), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(CreateLink, null), /* @__PURE__ */ React__default.createElement(InsertImage, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(InsertTable, null), /* @__PURE__ */ React__default.createElement(InsertThematicBreak, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(InsertCodeBlock, null), /* @__PURE__ */ React__default.createElement(InsertSandpack, null), /* @__PURE__ */ React__default.createElement(
+            ConditionalContents,
+            {
+              options: [
+                {
+                  when: (editorInFocus) => !whenInAdmonition(editorInFocus),
+                  contents: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(InsertAdmonition, null))
+                }
+              ]
+            }
+          ), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(InsertFrontmatter, null))
+        }
+      ]
+    }
+  ));
+};
+export {
+  KitchenSinkToolbar
+};

package/dist/plugins/toolbar/components/ListsToggle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * A toolbar toggle that allows the user to toggle between bulleted and numbered lists.
+ * Pressing the selected button will convert the current list to the other type. Pressing it again will remove the list.
+ * For this button to work, you need to have the `listsPlugin` plugin enabled.
+ */
+export declare const ListsToggle: React.FC;

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

@@ -0,0 +1,23 @@
+import React__default from "react";
+import BulletedListIcon from "../../../icons/format_list_bulleted.svg.js";
+import NumberedListIcon from "../../../icons/format_list_numbered.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");
+  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" }
+      ],
+      onChange: applyListType
+    }
+  );
+};
+export {
+  ListsToggle
+};

package/dist/plugins/toolbar/components/ShowSandpackInfo.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * A component that displays the focused live code block's name.
+ * For this component to work, you must enable the `sandpackPlugin` for the editor.
+ * See {@link ConditionalContents} for an example on how to display the dropdown only when a sandpack editor is in focus.
+ */
+export declare const ShowSandpackInfo: () => React.JSX.Element;

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

@@ -0,0 +1,32 @@
+import React__default from "react";
+import { corePluginHooks } from "../../core/index.js";
+import styles from "../../../styles/ui.module.css.js";
+import { sandpackPluginHooks } from "../../sandpack/index.js";
+import { ButtonWithTooltip } from "../primitives/toolbar.js";
+import DeleteIcon from "../../../icons/delete.svg.js";
+const ShowSandpackInfo = () => {
+  const [editorInFocus, theEditor] = corePluginHooks.useEmitterValues("editorInFocus", "activeEditor");
+  const sandpackNode = editorInFocus.rootNode;
+  const [sandpackConfig] = sandpackPluginHooks.useEmitterValues("sandpackConfig");
+  const preset = sandpackConfig.presets.find((preset2) => preset2.meta === sandpackNode.getMeta());
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement(
+    ButtonWithTooltip,
+    {
+      title: "Delete this code block",
+      onClick: () => {
+        theEditor == null ? void 0 : theEditor.update(() => {
+          if (sandpackNode.getNextSibling()) {
+            sandpackNode.selectNext();
+          } else {
+            sandpackNode.selectPrevious();
+          }
+          sandpackNode.remove();
+        });
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(DeleteIcon, null)
+  ), /* @__PURE__ */ React__default.createElement("label", null, "Sandpack preset: ", preset.name));
+};
+export {
+  ShowSandpackInfo
+};

package/dist/plugins/toolbar/components/UndoRedo.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * A toolbar component that lets the user undo and redo changes in the editor.
+ */
+export declare const UndoRedo: React.FC;