mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
67 lines (66 loc) • 3.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import { alpha, styled, useThemeProps, } from "@mui/material/styles";
import { clsx } from "clsx";
import { getUtilityComponentName } from "../styles";
import { getModShortcutKey } from "../utils/platform";
import { menuButtonTooltipClasses, } from "./MenuButtonTooltip.classes";
const componentName = getUtilityComponentName("MenuButtonTooltip");
const MenuButtonTooltipTitleContainer = styled("div", {
name: componentName,
slot: "titleContainer",
overridesResolver: (props, styles) => styles.tooltip,
})(() => ({
textAlign: "center",
}));
const MenuButtonTooltipLabel = styled("div", {
name: componentName,
slot: "label",
overridesResolver: (props, styles) => styles.label,
})(({ theme }) => ({
fontSize: theme.typography.pxToRem(13),
}));
const MenuButtonTooltipShortcutKey = styled("span", {
name: componentName,
slot: "shortcutKey",
overridesResolver: (props, styles) => styles.shortcutKey,
})(({ theme }) => ({
fontSize: theme.typography.pxToRem(12),
border: `1px solid ${alpha(theme.palette.text.secondary, 0.2)}`,
backgroundColor: alpha(theme.palette.background.paper, 0.3),
height: "19px",
lineHeight: "19px",
padding: "0 4px",
minWidth: 17,
borderRadius: theme.shape.borderRadius,
display: "inline-block",
"&:not(:first-of-type)": {
marginLeft: 1,
},
}));
const MenuButtonTooltipContentWrapper = styled("span", {
name: componentName,
slot: "contentWrapper",
overridesResolver: (props, styles) => styles.contentWrapper,
})({});
export default function MenuButtonTooltip(inProps) {
const props = useThemeProps({ props: inProps, name: componentName });
const { label, shortcutKeys, placement = "top",
// eslint-disable-next-line @typescript-eslint/no-deprecated
contentWrapperClassName, children, className, classes = {}, sx, ...otherTooltipProps } = props;
return (_jsx(Tooltip, { title: label || (shortcutKeys && shortcutKeys.length > 0) ? (_jsxs(MenuButtonTooltipTitleContainer, { className: clsx([
menuButtonTooltipClasses.titleContainer,
classes.titleContainer,
]), children: [_jsx(MenuButtonTooltipLabel, { className: clsx([menuButtonTooltipClasses.label, classes.label]), children: label }), shortcutKeys && shortcutKeys.length > 0 && (_jsx(Typography, { variant: "body2", component: "div", children: shortcutKeys.map((shortcutKey, index) => (_jsx(MenuButtonTooltipShortcutKey, { className: clsx([
menuButtonTooltipClasses.shortcutKey,
classes.shortcutKey,
]), children: shortcutKey === "mod" ? getModShortcutKey() : shortcutKey }, index))) }))] })) : (""), placement: placement, arrow: true, sx: sx, ...otherTooltipProps, children: _jsx(MenuButtonTooltipContentWrapper, { className: clsx([
// Applying className here is equivalent to if we applied it to the
// Tooltip above, since it just forwards the value to its root child.
className,
menuButtonTooltipClasses.contentWrapper,
classes.contentWrapper,
contentWrapperClassName,
]), children: children }) }));
}