mui-tiptap/dist/esm/controls/MenuSelectHeading.d.ts

A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap

import { type SxProps } from "@mui/material/styles";
import { type ReactNode } from "react";
import { type MenuButtonTooltipProps } from "./MenuButtonTooltip";
import { type MenuSelectProps } from "./MenuSelect";
import { type MenuSelectHeadingClasses } from "./MenuSelectHeading.classes";
export type MenuSelectHeadingProps = Omit<MenuSelectProps<HeadingOptionValue | "">, "value" | "children" | "classes"> & {
    /**
     * Override the default labels for the select options. For any value that
     * is omitted in this object, it falls back to the default content.
     */
    labels?: {
        /** Label shown for the "Paragraph" (non-heading) option. */
        paragraph?: ReactNode;
        /** Label shown for the level 1 heading (h1) option. */
        heading1?: ReactNode;
        /** Label shown for the level 2 heading (h2) option. */
        heading2?: ReactNode;
        /** Label shown for the level 3 heading (h3) option. */
        heading3?: ReactNode;
        /** Label shown for the level 4 heading (h4) option. */
        heading4?: ReactNode;
        /** Label shown for the level 5 heading (h5) option. */
        heading5?: ReactNode;
        /** Label shown for the level 6 heading (h6) option. */
        heading6?: ReactNode;
        /**
         * Label shown when the user is currently on a non-paragraph, non-heading.
         * By default shows "Change to…" in italics, since choosing a new option
         * will change the node type to one of the given heading/paragraph types.
         */
        empty?: ReactNode;
        /** @deprecated Use `labels.empty` instead. */
        emptyValue?: React.ReactNode;
    };
    /**
     * Override the default shortcut keys shown in the tooltip for each heading
     * option. For any value that is omitted, it falls back to the default
     * shortcut keys. Use `hideShortcuts` to hide all shortcuts entirely.
     *
     * Useful for localizing key names, or for updating the displayed shortcuts to
     * match any custom keyboard shortcuts configured in your Tiptap editor.
     *
     * Use the literal string "mod" to represent Cmd on Mac and Ctrl on Windows
     * and Linux.
     */
    shortcutKeys?: {
        /** Shortcut keys for the "Paragraph" option. Default: ["mod", "alt", "0"] */
        paragraph?: MenuButtonTooltipProps["shortcutKeys"];
        /** Shortcut keys for Heading 1. Default: ["mod", "alt", "1"] */
        heading1?: MenuButtonTooltipProps["shortcutKeys"];
        /** Shortcut keys for Heading 2. Default: ["mod", "alt", "2"] */
        heading2?: MenuButtonTooltipProps["shortcutKeys"];
        /** Shortcut keys for Heading 3. Default: ["mod", "alt", "3"] */
        heading3?: MenuButtonTooltipProps["shortcutKeys"];
        /** Shortcut keys for Heading 4. Default: ["mod", "alt", "4"] */
        heading4?: MenuButtonTooltipProps["shortcutKeys"];
        /** Shortcut keys for Heading 5. Default: ["mod", "alt", "5"] */
        heading5?: MenuButtonTooltipProps["shortcutKeys"];
        /** Shortcut keys for Heading 6. Default: ["mod", "alt", "6"] */
        heading6?: MenuButtonTooltipProps["shortcutKeys"];
    };
    /**
     * Whether to hide the shortcut key tooltips for each heading option. By
     * default false.
     */
    hideShortcuts?: boolean;
    /** Override or extend existing styles. */
    classes?: Partial<MenuSelectHeadingClasses>;
    /** Provide custom styles. */
    sx?: SxProps;
};
declare const HEADING_OPTION_VALUES: {
    readonly Paragraph: "Paragraph";
    readonly Heading1: "Heading 1";
    readonly Heading2: "Heading 2";
    readonly Heading3: "Heading 3";
    readonly Heading4: "Heading 4";
    readonly Heading5: "Heading 5";
    readonly Heading6: "Heading 6";
};
export type HeadingOptionValue = (typeof HEADING_OPTION_VALUES)[keyof typeof HEADING_OPTION_VALUES];
export default function MenuSelectHeading(inProps: MenuSelectHeadingProps): import("react/jsx-runtime").JSX.Element;
export {};