mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
77 lines (76 loc) • 3.25 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import Check from "@mui/icons-material/Check";
import { styled, useTheme, useThemeProps, } from "@mui/material/styles";
import { clsx } from "clsx";
import { forwardRef, } from "react";
import { getUtilityComponentName } from "../styles";
import { colorSwatchButtonClasses, } from "./ColorSwatchButton.classes";
const componentName = getUtilityComponentName("ColorSwatchButton");
const ColorSwatchButtonRoot = styled("button", {
name: componentName,
slot: "root",
overridesResolver: (props, styles) => [styles.root, props.ownerState.colorNotSet && styles.colorNotSet],
})(({ theme, ownerState }) => ({
height: theme.spacing(2.5),
width: theme.spacing(2.5),
minWidth: theme.spacing(2.5),
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.mode === "dark"
? theme.palette.grey[700]
: theme.palette.grey[400],
borderStyle: "solid",
borderWidth: 1,
cursor: "pointer",
// Use background-clip with content-box so that if a `padding` is specified by the
// user, it adds a gap between the color and the border.
padding: 0,
backgroundClip: "content-box",
...(ownerState.colorNotSet && {
// To indicate that a color hasn't been chosen, we'll use a checkerboard pattern
// (https://stackoverflow.com/a/65129916/4543977)
background: `repeating-conic-gradient(
${theme.palette.grey[400]} 0% 25%, ${theme.palette.common.white} 0% 50%)
50% / 12px 12px`,
backgroundClip: "content-box",
}),
}));
const ColorSwatchButtonActiveIcon = styled(Check, {
name: componentName,
slot: "activeIcon",
overridesResolver: (props, styles) => styles.activeIcon,
})(() => ({
height: "100%",
width: "80%",
verticalAlign: "middle",
}));
/**
* Renders a button in the given color `value`, useful for showing and allowing
* selecting a color preset.
*/
export const ColorSwatchButton = forwardRef((inProps, ref) => {
const props = useThemeProps({ props: inProps, name: componentName });
const { value: colorValue, label, padding, active, className, classes = {}, sx, ...buttonProps } = props;
const theme = useTheme();
const colorNotSet = !colorValue;
const ownerState = {
active,
colorNotSet,
};
return (_jsx(ColorSwatchButtonRoot, { ref: ref, type: "button", style: { backgroundColor: colorValue, padding }, "aria-label": label !== null && label !== void 0 ? label : colorValue, value: colorValue, ...buttonProps, className: clsx([
colorSwatchButtonClasses.root,
colorNotSet && [
colorSwatchButtonClasses.colorNotSet,
classes.colorNotSet,
],
classes.root,
className,
]), sx: sx, ownerState: ownerState, children: active && (_jsx(ColorSwatchButtonActiveIcon, { fontSize: "small", className: clsx([
colorSwatchButtonClasses.activeIcon,
classes.activeIcon,
]), style: {
color: colorValue
? theme.palette.getContrastText(colorValue)
: undefined,
} })) }));
});
ColorSwatchButton.displayName = "ColorSwatchButton";