mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
104 lines (103 loc) • 5.41 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import TextField from "@mui/material/TextField";
import { styled, useThemeProps } from "@mui/material/styles";
import { clsx } from "clsx";
import { useEffect, useRef } from "react";
import { HexAlphaColorPicker, HexColorPicker } from "react-colorful";
import { getUtilityComponentName } from "../styles";
import { colorToHex as colorToHexDefault } from "../utils/color";
import { colorPickerClasses, } from "./ColorPicker.classes";
import { ColorSwatchButton } from "./ColorSwatchButton";
const componentName = getUtilityComponentName("ColorPicker");
const StyledHexColorPicker = styled(HexColorPicker, {
name: componentName,
slot: "gradientPicker",
overridesResolver: (props, styles) => styles.gradientPicker,
})(() => ({
// Increase specificity to override the styles
"&&": {
width: "100%",
},
}));
const StyledHexAlphaColorPicker = styled(HexAlphaColorPicker, {
name: componentName,
slot: "gradientPicker",
overridesResolver: (props, styles) => styles.gradientPicker,
})(() => ({
// Increase specificity to override the styles
"&&": {
width: "100%",
},
}));
const ColorPickerColorTextInput = styled(TextField, {
name: componentName,
slot: "colorTextInput",
overridesResolver: (props, styles) => styles.colorTextInput,
})(({ theme }) => ({
marginTop: theme.spacing(1),
}));
const ColorPickerSwatchContainer = styled("div", {
name: componentName,
slot: "swatchContainer",
overridesResolver: (props, styles) => styles.swatchContainer,
})(({ theme }) => ({
display: "flex",
flexWrap: "wrap",
gap: 5,
marginTop: theme.spacing(1),
}));
/**
* Component for the user to choose a color from a gradient-based hue/saturation
* (and optionally alpha) color-picker or from the given swatch colors.
*/
export function ColorPicker(inProps) {
const props = useThemeProps({ props: inProps, name: componentName });
const { value, onChange, swatchColors, colorToHex = colorToHexDefault, disableAlpha = false, labels = {}, classes = {}, } = props;
const { textFieldPlaceholder = 'Ex: "#7cb5ec"' } = labels;
const inputRef = useRef(null);
useEffect(() => {
// Any time the color changes external to the text input, update the text
// input to show the latest value, unless the input is currently focused
// (since the user may be in the middle of editing)
if (inputRef.current && inputRef.current !== document.activeElement) {
inputRef.current.value = value;
}
}, [value]);
const swatchColorObjects = (swatchColors !== null && swatchColors !== void 0 ? swatchColors : []).map((swatchColor) => typeof swatchColor === "string" ? { value: swatchColor } : swatchColor);
const colorValueAsHex = colorToHex(value);
return (_jsxs(_Fragment, { children: [disableAlpha ? (_jsx(StyledHexColorPicker, { color: colorValueAsHex !== null && colorValueAsHex !== void 0 ? colorValueAsHex : "#000000", className: clsx([
colorPickerClasses.gradientPicker,
classes.gradientPicker,
]), onChange: (color) => {
onChange(color, "gradient");
} })) : (_jsx(StyledHexAlphaColorPicker, { color: colorValueAsHex !== null && colorValueAsHex !== void 0 ? colorValueAsHex : "#000000", className: clsx([
colorPickerClasses.gradientPicker,
classes.gradientPicker,
]), onChange: (color) => {
onChange(color, "gradient");
} })), _jsx(ColorPickerColorTextInput, { placeholder: textFieldPlaceholder, variant: "outlined", size: "small", defaultValue: value || "", inputRef: inputRef, spellCheck: false, className: clsx([
colorPickerClasses.colorTextInput,
classes.colorTextInput,
]), onChange: (event) => {
const newColor = event.target.value;
const newHexColor = colorToHex(newColor);
if (newHexColor) {
onChange(newHexColor, "text");
}
}, fullWidth: true }), swatchColorObjects.length > 0 && (_jsx(ColorPickerSwatchContainer, { className: clsx([
colorPickerClasses.swatchContainer,
classes.swatchContainer,
]), children: swatchColorObjects.map((swatchColor) => (_jsx(ColorSwatchButton, { value: swatchColor.value, label: swatchColor.label, onClick: () => {
var _a;
onChange((_a = swatchColor.value) !== null && _a !== void 0 ? _a : "", "swatch");
},
// We'll show the swatch as active if this swatch color is naively
// equal to the current color, if this swatch is for "transparent"
// and no color is set, or if the color matches when parsing and
// converting both colors to hex.
active: swatchColor.value == value ||
(!swatchColor.value && !value) ||
(!!swatchColor.value &&
!!colorValueAsHex &&
colorToHex(swatchColor.value) === colorValueAsHex) }, swatchColor.value))) }))] }));
}