mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
72 lines (71 loc) • 2.96 kB
TypeScript
import type { PopperProps } from "@mui/material/Popper";
import { type ReactNode } from "react";
import type { ColorPickerProps, SwatchColorOption } from "./ColorPicker";
import { type MenuButtonProps } from "./MenuButton";
import { type MenuButtonColorPickerClasses } from "./MenuButtonColorPicker.classes";
export type MenuButtonColorPickerProps = Omit<MenuButtonProps, "color" | "value" | "onChange" | "classes"> & {
/** The current CSS color string value. */
value: string | undefined;
/**
* The color shown in the color picker when it opens, if `value` is empty.
* Does not affect the button's color indicator bar (which remains transparent
* when `value` is empty).
*/
defaultPickerColor?: string;
/** Callback when the color changes. */
onChange: (newColor: string) => void;
/**
* Provide default list of colors (must be valid CSS color strings) which
* are used to form buttons for color swatches.
*/
swatchColors?: SwatchColorOption[];
/**
* If true, hides the horizontal bar at the base of the icon/button area that
* shows the currently active color `value`. The indicator pairs well with
* `*NoBar` icons like `FormatColorTextNoBar`, so you may want to hide it if
* your `IconComponent` clashes. By default false.
*/
hideColorIndicator?: boolean;
/**
* Override the props for the popper that houses the color picker interface.
*/
PopperProps?: Partial<PopperProps>;
/** Override the props for the color picker. */
ColorPickerProps?: Partial<ColorPickerProps>;
/**
* Unique HTML ID for the color picker popper that will be shown when clicking
* this button (used for aria-describedby for accessibility).
*/
popperId?: string;
/** Override the default labels for any of the content. */
labels?: {
/**
* Button label for removing the currently set color (setting the color to
* ""). By default "None".
*/
removeColorButton?: ReactNode;
/**
* Tooltip title for the button that removes the currently set color. By
* default "" (no tooltip shown).
*/
removeColorButtonTooltipTitle?: ReactNode;
/**
* Button label for canceling updating the color in the picker. By default
* "Cancel".
*/
cancelButton?: ReactNode;
/**
* Button label for saving the color chosen in the interface. By default
* "OK".
*/
saveButton?: ReactNode;
/**
* The placeholder shown in the text field entry for color. By default:
* 'Ex: "#7cb5ec"'
*/
textFieldPlaceholder?: string;
};
/** Override or extend existing styles. */
classes?: Partial<MenuButtonColorPickerClasses>;
};
export default function MenuButtonColorPicker(inProps: MenuButtonColorPickerProps): import("react/jsx-runtime").JSX.Element;