mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
45 lines (44 loc) • 2.42 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ToggleButton, { toggleButtonClasses, } from "@mui/material/ToggleButton";
import { styled, useThemeProps } from "@mui/material/styles";
import { clsx } from "clsx";
import { getUtilityComponentName } from "../styles";
import { getShortcutKeysDescription } from "../utils/platform";
import { menuButtonClasses, } from "./MenuButton.classes";
import MenuButtonTooltip from "./MenuButtonTooltip";
export const MENU_BUTTON_FONT_SIZE_DEFAULT = "1.25rem";
const componentName = getUtilityComponentName("MenuButton");
const MenuButtonRoot = styled("span", {
name: componentName,
slot: "root",
overridesResolver: (props, styles) => styles.root,
})(() => ({
// Use && for additional specificity, since MUI's conditional "disabled"
// styles also set the border
[`&& .${toggleButtonClasses.root}`]: {
border: "none",
padding: 5,
},
}));
// We can use an arbitrary component here ("span"), since we use `as` below with
// the `IconComponent` prop.
const MenuButtonIcon = styled("span", {
name: componentName,
slot: "icon",
overridesResolver: (props, styles) => styles.icon,
})(() => ({
fontSize: MENU_BUTTON_FONT_SIZE_DEFAULT,
}));
/**
* A general-purpose base component for showing an editor control for use in a
* menu.
*/
export default function MenuButton(inProps) {
const props = useThemeProps({ props: inProps, name: componentName });
const { tooltipLabel, tooltipShortcutKeys, IconComponent, buttonRef, children, className, classes = {}, sx, ...toggleButtonProps } = props;
// Expose keyboard shortcuts to screen readers. We use aria-description
// rather than aria-keyshortcuts due to inconsistent screen reader
// support for the latter.
const ariaDescription = getShortcutKeysDescription(tooltipShortcutKeys);
return (_jsx(MenuButtonRoot, { className: clsx([menuButtonClasses.root, className, classes.root]), sx: sx, children: _jsx(MenuButtonTooltip, { label: tooltipLabel, shortcutKeys: tooltipShortcutKeys, children: _jsx(ToggleButton, { ref: buttonRef, size: "small", value: tooltipLabel, "aria-label": tooltipLabel, "aria-description": ariaDescription, ...toggleButtonProps, children: children !== null && children !== void 0 ? children : (IconComponent && (_jsx(MenuButtonIcon, { as: IconComponent, className: clsx([menuButtonClasses.icon, classes.icon]) }))) }) }) }));
}