@nkzw/mdx-editor 0.1.0

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

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { IS_HIGHLIGHT } from "../../../FormatConstants.js";
+import { currentFormat$, iconComponentFor$, applyFormat$, useTranslation } from "../../core/index.js";
+import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+const HighlightToggle = () => {
+  const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$);
+  const applyFormat = usePublisher(applyFormat$);
+  const t = useTranslation();
+  const highlightIsOn = (currentFormat & IS_HIGHLIGHT) !== 0;
+  const title = highlightIsOn ? t("toolbar.removeHighlight", "Remove highlight") : t("toolbar.highlight", "Highlight");
+  return /* @__PURE__ */ jsx(
+    MultipleChoiceToggleGroup,
+    {
+      items: [
+        {
+          title,
+          contents: iconComponentFor("format_highlight"),
+          active: highlightIsOn,
+          onChange: applyFormat.bind(null, "highlight")
+        }
+      ]
+    }
+  );
+};
+export {
+  HighlightToggle
+};

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

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { ButtonOrDropdownButton } from "../primitives/toolbar.js";
+import { insertDirective$ } from "../../directives/index.js";
+import { ADMONITION_TYPES } from "../../../directive-editors/AdmonitionDirectiveDescriptor.js";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
+import { admonitionLabelsMap } from "./ChangeAdmonitionType.js";
+const InsertAdmonition = () => {
+  const insertDirective = usePublisher(insertDirective$);
+  const iconComponentFor = useCellValue(iconComponentFor$);
+  const t = useTranslation();
+  const items = React.useMemo(() => {
+    const labels = admonitionLabelsMap(t);
+    return ADMONITION_TYPES.map((type) => ({ value: type, label: labels[type] }));
+  }, [t]);
+  return /* @__PURE__ */ jsx(
+    ButtonOrDropdownButton,
+    {
+      title: t("toolbar.admonition", "Insert Admonition"),
+      onChoose: (admonitionName) => {
+        insertDirective({
+          type: "containerDirective",
+          name: admonitionName
+        });
+      },
+      items,
+      children: iconComponentFor("admonition")
+    }
+  );
+};
+export {
+  InsertAdmonition
+};

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

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { ButtonWithTooltip } from "../primitives/toolbar.js";
+import { insertCodeBlock$ } from "../../codeblock/index.js";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
+const InsertCodeBlock = () => {
+  const insertCodeBlock = usePublisher(insertCodeBlock$);
+  const iconComponentFor = useCellValue(iconComponentFor$);
+  const t = useTranslation();
+  return /* @__PURE__ */ jsx(
+    ButtonWithTooltip,
+    {
+      title: t("toolbar.codeBlock", "Insert Code Block"),
+      onClick: () => {
+        insertCodeBlock({});
+      },
+      children: iconComponentFor("frame_source")
+    }
+  );
+};
+export {
+  InsertCodeBlock
+};

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

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { ButtonWithTooltip } from "../primitives/toolbar.js";
+import { insertFrontmatter$, hasFrontmatter$ } from "../../frontmatter/index.js";
+import styles from "../../../styles/ui.module.css.js";
+import classNames from "classnames";
+import { usePublisher, useCellValues } from "@mdxeditor/gurx";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
+const InsertFrontmatter = () => {
+  const insertFrontmatter = usePublisher(insertFrontmatter$);
+  const [hasFrontmatter, iconComponentFor] = useCellValues(hasFrontmatter$, iconComponentFor$);
+  const t = useTranslation();
+  return /* @__PURE__ */ jsx(
+    ButtonWithTooltip,
+    {
+      title: hasFrontmatter ? t("toolbar.editFrontmatter", "Edit frontmatter") : t("toolbar.insertFrontmatter", "Insert frontmatter"),
+      className: classNames({
+        [styles.activeToolbarButton]: hasFrontmatter
+      }),
+      onClick: () => {
+        insertFrontmatter();
+      },
+      children: iconComponentFor("frontmatter")
+    }
+  );
+};
+export {
+  InsertFrontmatter
+};

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

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { openNewImageDialog$ } from "../../image/index.js";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import styles from "../../../styles/ui.module.css.js";
+import { readOnly$, iconComponentFor$, useTranslation } from "../../core/index.js";
+import { TooltipWrap } from "../primitives/TooltipWrap.js";
+import { usePublisher, useCellValues } from "@mdxeditor/gurx";
+const InsertImage = React.forwardRef((_, forwardedRef) => {
+  const openNewImageDialog = usePublisher(openNewImageDialog$);
+  const [readOnly, iconComponentFor] = useCellValues(readOnly$, iconComponentFor$);
+  const t = useTranslation();
+  return /* @__PURE__ */ jsx(
+    RadixToolbar.Button,
+    {
+      "aria-label": t("toolbar.image", "Insert image"),
+      className: styles.toolbarButton,
+      ref: forwardedRef,
+      disabled: readOnly,
+      onClick: () => {
+        openNewImageDialog();
+      },
+      children: /* @__PURE__ */ jsx(TooltipWrap, { title: t("toolbar.image", "Insert image"), children: iconComponentFor("add_photo") })
+    }
+  );
+});
+export {
+  InsertImage
+};

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { ButtonWithTooltip } from "../primitives/toolbar.js";
+import { insertTable$ } from "../../table/index.js";
+import { useCellValue, usePublisher } from "@mdxeditor/gurx";
+import { iconComponentFor$, useTranslation, editorInTable$ } from "../../core/index.js";
+const InsertTable = () => {
+  const iconComponentFor = useCellValue(iconComponentFor$);
+  const insertTable = usePublisher(insertTable$);
+  const t = useTranslation();
+  const isDisabled = useCellValue(editorInTable$);
+  return /* @__PURE__ */ jsx(
+    ButtonWithTooltip,
+    {
+      title: t("toolbar.table", "Insert Table"),
+      onClick: () => {
+        insertTable({ rows: 3, columns: 3 });
+      },
+      ...isDisabled ? { "aria-disabled": true, "data-disabled": true, disabled: true } : {},
+      children: iconComponentFor("table")
+    }
+  );
+};
+export {
+  InsertTable
+};

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

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { insertThematicBreak$ } from "../../thematic-break/index.js";
+import { ButtonWithTooltip } from "../primitives/toolbar.js";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
+const InsertThematicBreak = () => {
+  const insertThematicBreak = usePublisher(insertThematicBreak$);
+  const iconComponentFor = useCellValue(iconComponentFor$);
+  const t = useTranslation();
+  return /* @__PURE__ */ jsx(
+    ButtonWithTooltip,
+    {
+      title: t("toolbar.thematicBreak", "Insert thematic break"),
+      onClick: () => {
+        insertThematicBreak();
+      },
+      children: iconComponentFor("horizontal_rule")
+    }
+  );
+};
+export {
+  InsertThematicBreak
+};

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

@@ -0,0 +1,82 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ConditionalContents, Separator } from "../primitives/toolbar.js";
+import { BlockTypeSelect } from "./BlockTypeSelect.js";
+import { BoldItalicUnderlineToggles, StrikeThroughSupSubToggles } 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 { InsertTable } from "./InsertTable.js";
+import { InsertThematicBreak } from "./InsertThematicBreak.js";
+import { ListsToggle } from "./ListsToggle.js";
+import { UndoRedo } from "./UndoRedo.js";
+import { CreateLink } from "./CreateLink.js";
+import { HighlightToggle } from "./HighlightToggle.js";
+function whenInAdmonition(editorInFocus) {
+  const node = editorInFocus?.rootNode;
+  if (!node || node.getType() !== "directive") {
+    return false;
+  }
+  return ["note", "tip", "danger", "info", "caution"].includes(node.getMdastNode().name);
+}
+const KitchenSinkToolbar = () => {
+  return /* @__PURE__ */ jsx(DiffSourceToggleWrapper, { children: /* @__PURE__ */ jsx(
+    ConditionalContents,
+    {
+      options: [
+        { when: (editor) => editor?.editorType === "codeblock", contents: () => /* @__PURE__ */ jsx(ChangeCodeMirrorLanguage, {}) },
+        {
+          fallback: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(UndoRedo, {}),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(BoldItalicUnderlineToggles, {}),
+            /* @__PURE__ */ jsx(CodeToggle, {}),
+            /* @__PURE__ */ jsx(HighlightToggle, {}),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(StrikeThroughSupSubToggles, {}),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(ListsToggle, {}),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(
+              ConditionalContents,
+              {
+                options: [{ when: whenInAdmonition, contents: () => /* @__PURE__ */ jsx(ChangeAdmonitionType, {}) }, { fallback: () => /* @__PURE__ */ jsx(BlockTypeSelect, {}) }]
+              }
+            ),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(CreateLink, {}),
+            /* @__PURE__ */ jsx(InsertImage, {}),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(InsertTable, {}),
+            /* @__PURE__ */ jsx(InsertThematicBreak, {}),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(InsertCodeBlock, {}),
+            /* @__PURE__ */ jsx(
+              ConditionalContents,
+              {
+                options: [
+                  {
+                    when: (editorInFocus) => !whenInAdmonition(editorInFocus),
+                    contents: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Separator, {}),
+                      /* @__PURE__ */ jsx(InsertAdmonition, {})
+                    ] })
+                  }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsx(InsertFrontmatter, {})
+          ] })
+        }
+      ]
+    }
+  ) });
+};
+export {
+  KitchenSinkToolbar
+};

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

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { currentListType$, applyListType$ } from "../../lists/index.js";
+import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+import { iconComponentFor$, editorInTable$, useTranslation } from "../../core/index.js";
+const ICON_NAME_MAP = {
+  bullet: "format_list_bulleted",
+  number: "format_list_numbered",
+  check: "format_list_checked"
+};
+const ListsToggle = ({ options = ["bullet", "number", "check"] }) => {
+  const [currentListType, iconComponentFor, inTable] = useCellValues(currentListType$, iconComponentFor$, editorInTable$);
+  const applyListType = usePublisher(applyListType$);
+  const t = useTranslation();
+  const LIST_TITLE_MAP = {
+    bullet: t("toolbar.bulletedList", "Bulleted list"),
+    number: t("toolbar.numberedList", "Numbered list"),
+    check: t("toolbar.checkList", "Check list")
+  };
+  const items = options.map((type) => ({
+    value: type,
+    title: LIST_TITLE_MAP[type],
+    contents: iconComponentFor(ICON_NAME_MAP[type])
+  }));
+  return /* @__PURE__ */ jsx(SingleChoiceToggleGroup, { value: currentListType || "", items, onChange: applyListType, disabled: inTable });
+};
+export {
+  ListsToggle
+};

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

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeRegister } from "@lexical/utils";
+import { useCellValues } from "@mdxeditor/gurx";
+import { CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from "lexical";
+import React from "react";
+import { IS_APPLE } from "../../../utils/detectMac.js";
+import { iconComponentFor$, activeEditor$, useTranslation } from "../../core/index.js";
+import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
+const UndoRedo = () => {
+  const [iconComponentFor, activeEditor] = useCellValues(iconComponentFor$, activeEditor$);
+  const [canUndo, setCanUndo] = React.useState(false);
+  const [canRedo, setCanRedo] = React.useState(false);
+  const t = useTranslation();
+  React.useEffect(() => {
+    if (activeEditor) {
+      return mergeRegister(
+        activeEditor.registerCommand(
+          CAN_UNDO_COMMAND,
+          (payload) => {
+            setCanUndo(payload);
+            return false;
+          },
+          COMMAND_PRIORITY_CRITICAL
+        ),
+        activeEditor.registerCommand(
+          CAN_REDO_COMMAND,
+          (payload) => {
+            setCanRedo(payload);
+            return false;
+          },
+          COMMAND_PRIORITY_CRITICAL
+        )
+      );
+    }
+  }, [activeEditor]);
+  return /* @__PURE__ */ jsx(
+    MultipleChoiceToggleGroup,
+    {
+      items: [
+        {
+          title: t("toolbar.undo", "Undo {{shortcut}}", { shortcut: IS_APPLE ? "⌘Z" : "Ctrl+Z" }),
+          disabled: !canUndo,
+          contents: iconComponentFor("undo"),
+          active: false,
+          onChange: () => activeEditor?.dispatchCommand(UNDO_COMMAND, void 0)
+        },
+        {
+          title: t("toolbar.redo", "Redo {{shortcut}}", { shortcut: IS_APPLE ? "⌘Y" : "Ctrl+Y" }),
+          disabled: !canRedo,
+          contents: iconComponentFor("redo"),
+          active: false,
+          onChange: () => activeEditor?.dispatchCommand(REDO_COMMAND, void 0)
+        }
+      ]
+    }
+  );
+};
+export {
+  UndoRedo
+};

package/dist/plugins/toolbar/index.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { Cell, useCellValues } from "@mdxeditor/gurx";
+import { addBottomAreaChild$, addTopAreaChild$, readOnly$ } from "../core/index.js";
+import { Root } from "./primitives/toolbar.js";
+const toolbarContents$ = Cell(() => null);
+const toolbarClassName$ = Cell("");
+const DEFAULT_TOOLBAR_CONTENTS = () => {
+  return "This is an empty toolbar. Pass `{toolbarContents: () => { return <>toolbar components</> }}` to the toolbarPlugin to customize it.";
+};
+const toolbarPlugin = realmPlugin({
+  init(realm, params) {
+    const toolbarPositionSymbol = params?.toolbarPosition === "bottom" ? addBottomAreaChild$ : addTopAreaChild$;
+    realm.pubIn({
+      [toolbarContents$]: params?.toolbarContents ?? DEFAULT_TOOLBAR_CONTENTS,
+      [toolbarClassName$]: params?.toolbarClassName ?? "",
+      [toolbarPositionSymbol]: () => {
+        const [toolbarContents, readOnly, toolbarClassName] = useCellValues(toolbarContents$, readOnly$, toolbarClassName$);
+        return /* @__PURE__ */ jsx(Root, { className: toolbarClassName, readOnly, children: toolbarContents() });
+      }
+    });
+  },
+  update(realm, params) {
+    realm.pub(toolbarContents$, params?.toolbarContents ?? DEFAULT_TOOLBAR_CONTENTS);
+    realm.pub(toolbarClassName$, params?.toolbarClassName ?? "");
+  }
+});
+export {
+  toolbarClassName$,
+  toolbarContents$,
+  toolbarPlugin
+};

package/dist/plugins/toolbar/primitives/DialogButton.js

@@ -0,0 +1,130 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as Dialog from "@radix-ui/react-dialog";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import React from "react";
+import classNames from "classnames";
+import { useCombobox } from "downshift";
+import { editorRootElementRef$, readOnly$, iconComponentFor$, useTranslation } from "../../core/index.js";
+import styles from "../../../styles/ui.module.css.js";
+import { TooltipWrap } from "./TooltipWrap.js";
+import { useCellValues, useCellValue } from "@mdxeditor/gurx";
+const MAX_SUGGESTIONS = 20;
+const DialogButton = React.forwardRef(({ autocompleteSuggestions = [], submitButtonTitle, dialogInputPlaceholder, onSubmit, tooltipTitle, buttonContent }, forwardedRef) => {
+  const [editorRootElementRef, readOnly] = useCellValues(editorRootElementRef$, readOnly$);
+  const [open, setOpen] = React.useState(false);
+  const onSubmitCallback = React.useCallback(
+    (value) => {
+      onSubmit(value);
+      setOpen(false);
+    },
+    [onSubmit]
+  );
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(RadixToolbar.Button, { "aria-label": tooltipTitle, className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly, children: /* @__PURE__ */ jsx(TooltipWrap, { title: tooltipTitle, children: buttonContent }) }) }),
+    /* @__PURE__ */ jsxs(Dialog.Portal, { container: editorRootElementRef?.current, children: [
+      /* @__PURE__ */ jsx(Dialog.Overlay, { className: styles.dialogOverlay }),
+      /* @__PURE__ */ jsx(Dialog.Content, { className: styles.dialogContent, children: /* @__PURE__ */ jsx(
+        DialogForm,
+        {
+          submitButtonTitle,
+          autocompleteSuggestions,
+          onSubmitCallback,
+          dialogInputPlaceholder
+        }
+      ) })
+    ] })
+  ] });
+});
+const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlaceholder, submitButtonTitle }) => {
+  const [items, setItems] = React.useState(autocompleteSuggestions.slice(0, MAX_SUGGESTIONS));
+  const iconComponentFor = useCellValue(iconComponentFor$);
+  const t = useTranslation();
+  const enableAutoComplete = autocompleteSuggestions.length > 0;
+  const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
+    initialInputValue: "",
+    onInputValueChange({ inputValue }) {
+      inputValue = inputValue?.toLowerCase() ?? "";
+      const matchingItems = [];
+      for (const suggestion of autocompleteSuggestions) {
+        if (suggestion.toLowerCase().includes(inputValue)) {
+          matchingItems.push(suggestion);
+          if (matchingItems.length >= MAX_SUGGESTIONS) {
+            break;
+          }
+        }
+      }
+      setItems(matchingItems);
+    },
+    items,
+    itemToString(item) {
+      return item ?? "";
+    }
+  });
+  const onKeyDownEH = React.useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.target.form?.reset();
+      } else if (e.key === "Enter" && (!isOpen || items.length === 0)) {
+        e.preventDefault();
+        onSubmitCallback(e.target.value);
+      }
+    },
+    [isOpen, items, onSubmitCallback]
+  );
+  const downshiftInputProps = getInputProps();
+  const inputProps = {
+    ...downshiftInputProps,
+    onKeyDown: (e) => {
+      onKeyDownEH(e);
+      downshiftInputProps.onKeyDown(e);
+    }
+  };
+  const onSubmitEH = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onSubmitCallback(inputProps.value);
+  };
+  const dropdownIsVisible = isOpen && items.length > 0;
+  return /* @__PURE__ */ jsxs("form", { onSubmit: onSubmitEH, className: classNames(styles.dialogForm), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.linkDialogInputContainer, children: [
+      /* @__PURE__ */ jsxs("div", { "data-visible-dropdown": dropdownIsVisible, className: styles.linkDialogInputWrapper, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            placeholder: dialogInputPlaceholder,
+            className: styles.linkDialogInput,
+            ...inputProps,
+            autoFocus: true,
+            size: 30,
+            "data-editor-dialog": true
+          }
+        ),
+        enableAutoComplete && /* @__PURE__ */ jsx("button", { "aria-label": "toggle menu", type: "button", ...getToggleButtonProps(), children: iconComponentFor("arrow_drop_down") })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.downshiftAutocompleteContainer, children: /* @__PURE__ */ jsx("ul", { ...getMenuProps(), "data-visible": dropdownIsVisible, children: items.map((item, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          "data-selected": selectedItem === item,
+          "data-highlighted": highlightedIndex === index,
+          ...getItemProps({ item, index }),
+          children: item
+        },
+        `${item}${index}`
+      )) }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        title: submitButtonTitle,
+        "aria-label": submitButtonTitle,
+        className: classNames(styles.actionButton, styles.primaryActionButton),
+        children: iconComponentFor("check")
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog.Close, { "aria-label": t("dialog.close", "Close dialog"), className: styles.actionButton, children: iconComponentFor("close") })
+  ] });
+};
+export {
+  DialogButton
+};

package/dist/plugins/toolbar/primitives/TooltipWrap.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import classNames from "classnames";
+import React from "react";
+import styles from "../../../styles/ui.module.css.js";
+import { useCellValue } from "@mdxeditor/gurx";
+import { editorRootElementRef$ } from "../../core/index.js";
+const TooltipWrap = React.forwardRef(({ title, children }, ref) => {
+  const editorRootElementRef = useCellValue(editorRootElementRef$);
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 100, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { ref, asChild: true, children: /* @__PURE__ */ jsx("span", { className: styles.tooltipTrigger, children }) }),
+    /* @__PURE__ */ jsx(Tooltip.Portal, { container: editorRootElementRef?.current, children: /* @__PURE__ */ jsx(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 10, children: title }) })
+  ] }) });
+});
+export {
+  TooltipWrap
+};

package/dist/plugins/toolbar/primitives/select.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+import classNames from "classnames";
+import { EditorIcon } from "../../../EditorIcon.js";
+import styles from "../../../styles/ui.module.css.js";
+import { TooltipWrap } from "./TooltipWrap.js";
+import { readOnly$, editorRootElementRef$ } from "../../core/index.js";
+import { useCellValue } from "@mdxeditor/gurx";
+const SelectItem = React.forwardRef(
+  ({ children, className, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx(RadixSelect.Item, { ...props, ref: forwardedRef, className: classNames(className, styles.selectItem), children: /* @__PURE__ */ jsx(RadixSelect.ItemText, { children }) });
+  }
+);
+const SelectTrigger = ({ title, placeholder, className }) => {
+  const readOnly = useCellValue(readOnly$);
+  return /* @__PURE__ */ jsx(TooltipWrap, { title, children: /* @__PURE__ */ jsxs(
+    RadixSelect.Trigger,
+    {
+      "aria-label": placeholder,
+      className: classNames(styles.selectTrigger, className),
+      "data-toolbar-item": true,
+      disabled: readOnly,
+      children: [
+        /* @__PURE__ */ jsx(RadixSelect.Value, { placeholder }),
+        /* @__PURE__ */ jsx(RadixSelect.Icon, { className: styles.selectDropdownArrow, children: /* @__PURE__ */ jsx(EditorIcon, { name: "chevron-down" }) })
+      ]
+    }
+  ) });
+};
+const SelectContent = ({
+  children,
+  className = styles.selectContainer
+}) => {
+  const editorRootElementRef = useCellValue(editorRootElementRef$);
+  return /* @__PURE__ */ jsx(RadixSelect.Portal, { container: editorRootElementRef?.current, children: /* @__PURE__ */ jsx(
+    RadixSelect.Content,
+    {
+      className: classNames(className, "mdxeditor-select-content"),
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      position: "popper",
+      children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { "data-editor-dropdown": true, style: { maxHeight: "var(--radix-select-content-available-height)" }, children })
+    }
+  ) });
+};
+const SelectButtonTrigger = ({
+  children,
+  title,
+  className
+}) => {
+  const readOnly = useCellValue(readOnly$);
+  return /* @__PURE__ */ jsx(TooltipWrap, { title, children: /* @__PURE__ */ jsxs(RadixSelect.Trigger, { "aria-label": title, className: classNames(styles.toolbarButtonSelectTrigger, className), disabled: readOnly, children: [
+    children,
+    /* @__PURE__ */ jsx(RadixSelect.Icon, { className: styles.selectDropdownArrow, children: /* @__PURE__ */ jsx(EditorIcon, { name: "chevron-down" }) })
+  ] }) });
+};
+const Select = (props) => {
+  return /* @__PURE__ */ jsxs(RadixSelect.Root, { value: props.value || "", onValueChange: props.onChange, disabled: props.disabled, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { title: props.triggerTitle, placeholder: props.placeholder }),
+    /* @__PURE__ */ jsx(SelectContent, { children: props.items.map((item, index) => {
+      if (item === "separator") {
+        return /* @__PURE__ */ jsx(RadixSelect.Separator, {}, index);
+      }
+      return /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, index);
+    }) })
+  ] });
+};
+export {
+  Select,
+  SelectButtonTrigger,
+  SelectContent,
+  SelectItem,
+  SelectTrigger
+};