@mdxeditor/editor 0.0.1 → 0.0.5-development

package/dist/plugins/thematic-break/index.js

@@ -0,0 +1,39 @@
+import { coreSystem } from "../core/index.js";
+import { MdastThematicBreakVisitor } from "./MdastThematicBreakVisitor.js";
+import { LexicalThematicBreakVisitor } from "./LexicalThematicBreakVisitor.js";
+import { INSERT_HORIZONTAL_RULE_COMMAND, HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode.js";
+import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const thematicBreakSystem = system(
+  (r, [{ activeEditor }]) => {
+    const insertThematicBreak = r.node();
+    r.sub(r.pipe(insertThematicBreak, r.o.withLatestFrom(activeEditor)), ([, theEditor]) => {
+      theEditor == null ? void 0 : theEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
+    });
+    return {
+      insertThematicBreak
+    };
+  },
+  [coreSystem]
+);
+const [
+  /** @internal */
+  thematicBreakPlugin,
+  /** @internal */
+  thematicBreakPluginHooks
+] = realmPlugin({
+  id: "thematic-break",
+  systemSpec: thematicBreakSystem,
+  init: (realm) => {
+    realm.pubKey("addImportVisitor", MdastThematicBreakVisitor);
+    realm.pubKey("addLexicalNode", HorizontalRuleNode);
+    realm.pubKey("addExportVisitor", LexicalThematicBreakVisitor);
+    realm.pubKey("addComposerChild", HorizontalRulePlugin);
+  }
+});
+export {
+  thematicBreakPlugin,
+  thematicBreakPluginHooks,
+  thematicBreakSystem
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * A toolbar component that allows the user to change the block type of the current selection.
+ * Supports paragraphs, headings and block quotes.
+ */
+export declare const BlockTypeSelect: () => React.JSX.Element | null;

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

@@ -0,0 +1,54 @@
+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 { headingsPluginHooks } from "../../headings/index.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) {
+    const [allowedHeadingLevels] = headingsPluginHooks.useEmitterValues("allowedHeadingLevels");
+    items.push(...allowedHeadingLevels.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,33 @@
+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";
+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";
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  return /* @__PURE__ */ React__default.createElement(
+    MultipleChoiceToggleGroup,
+    {
+      items: [
+        { 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("div", { style: { transform: "translateY(2px)" } }, iconComponentFor("format_underlined")),
+          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.replace(/^./, (l) => l.toUpperCase()), 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,19 @@
+import React__default from "react";
+import { IS_CODE } from "../../../FormatConstants.js";
+import { corePluginHooks } from "../../core/index.js";
+import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
+const CodeToggle = () => {
+  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: iconComponentFor("code"), 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,20 @@
+import React__default from "react";
+import { ButtonWithTooltip } from "../primitives/toolbar.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,
+    {
+      title: "Create link",
+      onClick: (_) => {
+        openLinkDialog(true);
+      }
+    },
+    iconComponentFor("link")
+  );
+};
+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,25 @@
+import React__default from "react";
+import { diffSourcePluginHooks } from "../../diff-source/index.js";
+import { SingleChoiceToggleGroup } from "../primitives/toolbar.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: 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")
+    }
+  )));
+};
+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 { 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()) })),
+    []
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    ButtonOrDropdownButton,
+    {
+      title: "Insert admonition",
+      onChoose: (admonitionName) => {
+        insertDirective({
+          type: "containerDirective",
+          name: admonitionName
+        });
+      },
+      items
+    },
+    iconComponentFor("admonition")
+  );
+};
+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 { codeBlockPluginHooks } from "../../codeblock/index.js";
+const InsertCodeBlock = () => {
+  const insertCodeBlock = codeBlockPluginHooks.usePublisher("insertCodeBlock");
+  const [iconComponentFor] = codeBlockPluginHooks.useEmitterValues("iconComponentFor");
+  return /* @__PURE__ */ React__default.createElement(
+    ButtonWithTooltip,
+    {
+      title: "Insert code block",
+      onClick: () => {
+        insertCodeBlock({});
+      }
+    },
+    iconComponentFor("frame_source")
+  );
+};
+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,24 @@
+import React__default from "react";
+import { ButtonWithTooltip } from "../primitives/toolbar.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,
+    {
+      title: hasFrontmatter ? "Edit frontmatter" : "Insert frontmatter",
+      className: classNames({
+        [styles.activeToolbarButton]: hasFrontmatter
+      }),
+      onClick: insertFrontmatter.bind(null, true)
+    },
+    iconComponentFor("frontmatter")
+  );
+};
+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,14 @@
+import React__default from "react";
+import { imagePluginHooks } from "../../image/index.js";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+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, 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.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 { 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]);
+  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.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";
+const InsertTable = () => {
+  const [iconComponentFor] = tablePluginHooks.useEmitterValues("iconComponentFor");
+  const insertTable = tablePluginHooks.usePublisher("insertTable");
+  return /* @__PURE__ */ React__default.createElement(
+    ButtonWithTooltip,
+    {
+      title: "Insert table",
+      onClick: () => {
+        insertTable({ rows: 3, columns: 3 });
+      }
+    },
+    iconComponentFor("table")
+  );
+};
+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";
+const InsertThematicBreak = () => {
+  const insertThematicBreak = thematicBreakPluginHooks.usePublisher("insertThematicBreak");
+  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/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 { 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: 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
+    }
+  );
+};
+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;