@mdxeditor/editor 0.10.0 → 0.11.0

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

@@ -0,0 +1,115 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import React__default from "react";
+import classNames from "classnames";
+import { useCombobox } from "downshift";
+import DropDownIcon from "../../../icons/arrow_drop_down.svg.js";
+import CheckIcon from "../../../icons/check.svg.js";
+import CloseIcon from "../../../icons/close.svg.js";
+import { corePluginHooks } from "../../core/index.js";
+import styles from "../../../styles/ui.module.css.js";
+import { TooltipWrap } from "./TooltipWrap.js";
+const MAX_SUGGESTIONS = 20;
+const DialogButton = React__default.forwardRef(
+  ({ autocompleteSuggestions = [], submitButtonTitle, dialogInputPlaceholder, onSubmit, tooltipTitle, buttonContent }, forwardedRef) => {
+    const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+    const [open, setOpen] = React__default.useState(false);
+    const onSubmitCallback = React__default.useCallback(
+      (value) => {
+        onSubmit(value);
+        setOpen(false);
+      },
+      [onSubmit]
+    );
+    return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(
+      DialogForm,
+      {
+        submitButtonTitle,
+        autocompleteSuggestions,
+        onSubmitCallback,
+        dialogInputPlaceholder
+      }
+    ))));
+  }
+);
+const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlaceholder, submitButtonTitle }) => {
+  const [items, setItems] = React__default.useState(autocompleteSuggestions.slice(0, MAX_SUGGESTIONS));
+  const enableAutoComplete = autocompleteSuggestions.length > 0;
+  const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
+    initialInputValue: "",
+    onInputValueChange({ inputValue }) {
+      inputValue = (inputValue == null ? void 0 : 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 onSubmitEH = (e) => {
+    e.preventDefault();
+    onSubmitCallback(selectedItem || "");
+  };
+  const onKeyDownEH = React__default.useCallback(
+    (e) => {
+      var _a;
+      if (e.key === "Escape") {
+        (_a = e.target.form) == null ? void 0 : _a.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 dropdownIsVisible = isOpen && items.length > 0;
+  return /* @__PURE__ */ React__default.createElement("form", { onSubmit: onSubmitEH, className: classNames(styles.linkDialogEditForm) }, /* @__PURE__ */ React__default.createElement("div", { className: styles.linkDialogInputContainer }, /* @__PURE__ */ React__default.createElement("div", { "data-visible-dropdown": dropdownIsVisible, className: styles.linkDialogInputWrapper }, /* @__PURE__ */ React__default.createElement(
+    "input",
+    {
+      placeholder: dialogInputPlaceholder,
+      className: styles.linkDialogInput,
+      ...inputProps,
+      autoFocus: true,
+      size: 30,
+      "data-editor-dialog": true
+    }
+  ), enableAutoComplete && /* @__PURE__ */ React__default.createElement("button", { "aria-label": "toggle menu", type: "button", ...getToggleButtonProps() }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))), /* @__PURE__ */ React__default.createElement("div", { className: styles.linkDialogAutocompleteContainer }, /* @__PURE__ */ React__default.createElement("ul", { ...getMenuProps(), "data-visible": dropdownIsVisible }, items.map((item, index) => /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      "data-selected": selectedItem === item,
+      "data-highlighted": highlightedIndex === index,
+      key: `${item}${index}`,
+      ...getItemProps({ item, index })
+    },
+    item
+  ))))), /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      type: "submit",
+      title: submitButtonTitle,
+      "aria-label": submitButtonTitle,
+      className: classNames(styles.actionButton, styles.primaryActionButton)
+    },
+    /* @__PURE__ */ React__default.createElement(CheckIcon, null)
+  ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { className: styles.actionButton }, /* @__PURE__ */ React__default.createElement(CloseIcon, null)));
+};
+export {
+  DialogButton
+};

package/dist/plugins/toolbar/primitives/TooltipWrap.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+/**
+ * A small styled wrapper around the radix-ui tooltip, that lets you display an instan tooltip on hover.
+ */
+export declare const TooltipWrap: React.ForwardRefExoticComponent<{
+    title: string;
+    children: ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,12 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
+import classNames from "classnames";
+import React__default from "react";
+import styles from "../../../styles/ui.module.css.js";
+import { corePluginHooks } from "../../core/index.js";
+const TooltipWrap = React__default.forwardRef(({ title, children }, ref) => {
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  return /* @__PURE__ */ React__default.createElement(Tooltip.Provider, { delayDuration: 100 }, /* @__PURE__ */ React__default.createElement(Tooltip.Root, null, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { ref, asChild: true }, /* @__PURE__ */ React__default.createElement("span", null, children)), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 10 }, title))));
+});
+export {
+  TooltipWrap
+};

package/dist/plugins/toolbar/primitives/select.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+/**
+ * @internal
+ */
+export declare const SelectItem: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children: React.ReactNode;
+    value: string;
+} & React.RefAttributes<HTMLDivElement | null>>;
+/**
+ * @internal
+ */
+export declare const SelectTrigger: React.FC<{
+    title: string;
+    placeholder: string;
+    className?: string;
+}>;
+/**
+ * @internal
+ */
+export declare const SelectContent: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+/**
+ * @internal
+ */
+export declare const SelectButtonTrigger: React.FC<{
+    children: React.ReactNode;
+    title: string;
+    className?: string;
+}>;
+/**
+ * The properties of the {@link Select} React component.
+ */
+export interface SelectProps<T extends string> {
+    value: T;
+    onChange: (value: T) => void;
+    triggerTitle: string;
+    placeholder: string;
+    items: ({
+        label: string;
+        value: T;
+    } | 'separator')[];
+}
+/**
+ * A toolbar primitive you can use to build dropdowns, such as the block type select.
+ * See {@link SelectProps} for more details.
+ */
+export declare const Select: <T extends string>(props: SelectProps<T>) => React.JSX.Element;

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

@@ -0,0 +1,44 @@
+import React__default from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+import DropDownIcon from "../../../icons/arrow_drop_down.svg.js";
+import classNames from "classnames";
+import styles from "../../../styles/ui.module.css.js";
+import { TooltipWrap } from "./TooltipWrap.js";
+import { corePluginHooks } from "../../core/index.js";
+const SelectItem = React__default.forwardRef(
+  ({ children, className, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ React__default.createElement(RadixSelect.Item, { ...props, ref: forwardedRef, className: classNames(className, styles.selectItem) }, /* @__PURE__ */ React__default.createElement(RadixSelect.ItemText, null, children));
+  }
+);
+const SelectTrigger = ({ title, placeholder, className }) => {
+  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { "aria-label": placeholder, className: classNames(styles.selectTrigger, className), "data-toolbar-item": true }, /* @__PURE__ */ React__default.createElement(RadixSelect.Value, { placeholder }), /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))));
+};
+const SelectContent = ({
+  children,
+  className = styles.selectContainer
+}) => {
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  return /* @__PURE__ */ React__default.createElement(RadixSelect.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(RadixSelect.Content, { className, onCloseAutoFocus: (e) => e.preventDefault(), position: "popper" }, /* @__PURE__ */ React__default.createElement(RadixSelect.Viewport, { "data-editor-dropdown": true }, children)));
+};
+const SelectButtonTrigger = ({
+  children,
+  title,
+  className
+}) => {
+  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className) }, children, /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))));
+};
+const Select = (props) => {
+  return /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: props.value, onValueChange: props.onChange }, /* @__PURE__ */ React__default.createElement(SelectTrigger, { title: props.triggerTitle, placeholder: props.placeholder }), /* @__PURE__ */ React__default.createElement(SelectContent, null, props.items.map((item, index) => {
+    if (item === "separator") {
+      return /* @__PURE__ */ React__default.createElement(RadixSelect.Separator, { key: index });
+    }
+    return /* @__PURE__ */ React__default.createElement(SelectItem, { key: index, value: item.value }, item.label);
+  })));
+};
+export {
+  Select,
+  SelectButtonTrigger,
+  SelectContent,
+  SelectItem,
+  SelectTrigger
+};

package/dist/plugins/toolbar/primitives/toolbar.d.ts

@@ -0,0 +1,160 @@
+import * as RadixToolbar from '@radix-ui/react-toolbar';
+import React from 'react';
+import { EditorInFocus } from '../../core';
+/**
+ * @internal
+ */
+export declare const Root: (props: RadixToolbar.ToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element;
+/**
+ * A toolbar button primitive.
+ */
+export declare const Button: React.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<object>>;
+/**
+ * A toolbar button with a custom toolbar primitive.
+ */
+export declare const ButtonWithTooltip: ({ title, children, ...props }: Omit<RadixToolbar.ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<object> & {
+    title: string;
+}) => React.JSX.Element;
+/**
+ * @internal
+ */
+export declare const ToolbarToggleItem: React.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarToggleItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<object>>;
+/**
+ * @internal
+ */
+export declare const SingleToggleGroup: React.ForwardRefExoticComponent<(Omit<RadixToolbar.ToolbarToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<RadixToolbar.ToolbarToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<object>>;
+/**
+ * @internal
+ */
+export declare const ToggleSingleGroupWithItem: React.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarToggleGroupSingleProps, "type"> & {
+    on: boolean;
+    title: string;
+    disabled?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A toolbar primitive that allows you to build an UI with multiple non-exclusive toggle groups, like the bold/italic/underline toggle.
+ */
+export declare const MultipleChoiceToggleGroup: React.FC<{
+    items: {
+        title: string;
+        contents: React.ReactNode;
+        active: boolean;
+        onChange: (active: boolean) => void;
+        disabled?: boolean;
+    }[];
+}>;
+/**
+ * The properties of the {@link SingleChoiceToggleGroup} React component.
+ */
+export interface SingleChoiceToggleGroupProps<T extends string> {
+    items: {
+        title: string;
+        value: T;
+        contents: React.ReactNode;
+    }[];
+    onChange: (value: T) => void;
+    value: T;
+    className?: string;
+}
+/**
+ * A toolbar primitive that allows you to build an UI with multiple exclusive toggle groups, like the list type toggle.
+ */
+export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChange, className, items }: SingleChoiceToggleGroupProps<T>) => React.JSX.Element;
+/**
+ * The properties of the {@link ButtonOrDropdownButton} React component.
+ */
+export interface ButtonOrDropdownButtonProps<T extends string> {
+    /**
+     * The contents of the button - usually an icon.
+     */
+    children: React.ReactNode;
+    /**
+     * The title used for the tooltip.
+     */
+    title: string;
+    /**
+     * The function to execute when the button is clicked or an item is chosen from the dropdown.
+     * If there is only one item in the dropdown, the value will be an empty string.
+     */
+    onChoose: (value: T) => void;
+    /**
+     * The items to show in the dropdown.
+     */
+    items: {
+        /**
+         * The value to pass to the `onChoose` function when this item is chosen.
+         */
+        value: T;
+        /**
+         * The label to show in the dropdown.
+         */
+        label: string;
+    }[];
+}
+/**
+ * Use this primitive to create a toolbar button that can be either a button or a dropdown, depending on the number of items passed.
+ *
+ * @see {@link ButtonOrDropdownButtonProps} for the properties of the React component.
+ */
+export declare const ButtonOrDropdownButton: <T extends string>(props: ButtonOrDropdownButtonProps<T>) => React.JSX.Element;
+/**
+ * An object that describes a possible option to be displayed in the {@link ConditionalContents} component.
+ */
+export type ConditionalContentsOption = {
+    /**
+     * A function that returns `true` if the option should be displayed for the current editor in focus.
+     */
+    when: (rootNode: EditorInFocus | null) => boolean;
+    /**
+     * The contents to display if the `when` function returns `true`.
+     */
+    contents: () => React.ReactNode;
+};
+/**
+ * A default option to be displayed in the {@link ConditionalContents} component if none of the other options match.
+ */
+export type FallBackOption = {
+    /**
+     * The contents to display
+     */
+    fallback: () => React.ReactNode;
+};
+/**
+ * The properties of the {@link ConditionalContents} React component.
+ */
+export interface ConditionalContentsProps {
+    /**
+     * A set of options that define the contents to show based on the editor that is in focus.
+     * Can be either a {@link ConditionalContentsOption} or a {@link FallBackOption}.
+     * See the {@link ConditionalContents} documentation for an example.
+     */
+    options: (ConditionalContentsOption | FallBackOption)[];
+}
+/**
+ * A toolbar primitive that allows you to show different contents based on the editor that is in focus.
+ * Useful for code editors that have different features and don't support rich text formatting.
+ * @example
+ * ```tsx
+ *    <ConditionalContents
+ *      options={[
+ *        { when: (editor) => editor?.editorType === 'codeblock', contents: () => <ChangeCodeMirrorLanguage /> },
+ *        { when: (editor) => editor?.editorType === 'sandpack', contents: () => <ShowSandpackInfo /> },
+ *        {
+ *          fallback: () => (
+ *            <>
+ *              <UndoRedo />
+ *              <BoldItalicUnderlineToggles />
+ *              <InsertCodeBlock />
+ *            </>
+ *          )
+ *        }
+ *      ]}
+ *    />
+ * ```
+ */
+export declare const ConditionalContents: React.FC<ConditionalContentsProps>;
+/**
+ * A toolbar primitive that allows you to show a separator between toolbar items.
+ * By default, the separator is styled as vertical line.
+ */
+export declare const Separator: React.ForwardRefExoticComponent<RadixToolbar.ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,111 @@
+import * as RadixSelect from "@radix-ui/react-select";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import classNames from "classnames";
+import React__default from "react";
+import styles from "../../../styles/ui.module.css.js";
+import { TooltipWrap } from "./TooltipWrap.js";
+import { SelectButtonTrigger, SelectContent, SelectItem } from "./select.js";
+import { corePluginHooks } from "../../core/index.js";
+function decorate(Component, decoratedProps) {
+  return (props) => {
+    const className = classNames(decoratedProps.className, props.className);
+    return /* @__PURE__ */ React__default.createElement(Component, { ...decoratedProps, ...props, className });
+  };
+}
+function decorateWithRef(Component, decoratedProps) {
+  return React__default.forwardRef((props, ref) => {
+    const className = classNames(decoratedProps.className, props.className);
+    return /* @__PURE__ */ React__default.createElement(Component, { ...decoratedProps, ...props, className, ref });
+  });
+}
+function addTooltipToChildren(Component) {
+  return ({ title, children, ...props }) => {
+    return /* @__PURE__ */ React__default.createElement(Component, { ...props }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, children));
+  };
+}
+const Root = decorate(RadixToolbar.Root, { className: styles.toolbarRoot });
+const Button = decorateWithRef(RadixToolbar.Button, { className: styles.toolbarButton, "data-toolbar-item": true });
+const ButtonWithTooltip = addTooltipToChildren(Button);
+const ToolbarToggleItem = decorateWithRef(RadixToolbar.ToggleItem, {
+  className: styles.toolbarToggleItem,
+  "data-toolbar-item": true
+});
+const SingleToggleGroup = decorateWithRef(RadixToolbar.ToggleGroup, {
+  type: "single",
+  className: styles.toolbarToggleSingleGroup
+});
+const ToggleSingleGroupWithItem = React__default.forwardRef(({ on, title, children, disabled, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React__default.createElement(
+    RadixToolbar.ToggleGroup,
+    {
+      type: "single",
+      className: styles.toolbarToggleSingleGroup,
+      ...props,
+      value: on ? "on" : "off",
+      ref: forwardedRef
+    },
+    /* @__PURE__ */ React__default.createElement(ToolbarToggleItem, { title, value: "on", disabled }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, children))
+  );
+});
+const MultipleChoiceToggleGroup = ({ items }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.toolbarGroupOfGroups }, items.map((item, index) => /* @__PURE__ */ React__default.createElement(
+    ToggleSingleGroupWithItem,
+    {
+      key: index,
+      title: item.title,
+      on: item.active,
+      onValueChange: (v) => item.onChange(v === "on"),
+      disabled: item.disabled
+    },
+    item.contents
+  )));
+};
+const SingleChoiceToggleGroup = ({ value, onChange, className, items }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.toolbarGroupOfGroups }, /* @__PURE__ */ React__default.createElement(
+    RadixToolbar.ToggleGroup,
+    {
+      type: "single",
+      className: classNames(styles.toolbarToggleSingleGroup, className),
+      onValueChange: onChange,
+      value: value || "",
+      onFocus: (e) => e.preventDefault()
+    },
+    items.map((item, index) => /* @__PURE__ */ React__default.createElement(ToolbarToggleItem, { key: index, value: item.value }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: item.title }, item.contents)))
+  ));
+};
+const ButtonOrDropdownButton = (props) => {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, props.items.length === 1 ? /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: props.title, onClick: () => props.onChoose("") }, props.children) : /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: "", onValueChange: props.onChoose }, /* @__PURE__ */ React__default.createElement(SelectButtonTrigger, { title: props.title }, props.children), /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarButtonDropdownContainer }, props.items.map((item, index) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: index, value: item.value }, item.label)))));
+};
+function isConditionalContentsOption(option) {
+  return Object.hasOwn(option, "when");
+}
+const ConditionalContents = ({ options }) => {
+  const [editorInFocus] = corePluginHooks.useEmitterValues("editorInFocus");
+  const contents = React__default.useMemo(() => {
+    const option = options.find((option2) => {
+      if (isConditionalContentsOption(option2)) {
+        if (option2.when(editorInFocus)) {
+          return true;
+        }
+      } else {
+        return true;
+      }
+    });
+    return option ? isConditionalContentsOption(option) ? option.contents() : option.fallback() : null;
+  }, [options, editorInFocus]);
+  return /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex" } }, contents);
+};
+const Separator = RadixToolbar.Separator;
+export {
+  Button,
+  ButtonOrDropdownButton,
+  ButtonWithTooltip,
+  ConditionalContents,
+  MultipleChoiceToggleGroup,
+  Root,
+  Separator,
+  SingleChoiceToggleGroup,
+  SingleToggleGroup,
+  ToggleSingleGroupWithItem,
+  ToolbarToggleItem
+};