mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
110 lines (109 loc) • 6.01 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPicker = ColorPicker;
const jsx_runtime_1 = require("react/jsx-runtime");
const TextField_1 = __importDefault(require("@mui/material/TextField"));
const styles_1 = require("@mui/material/styles");
const clsx_1 = require("clsx");
const react_1 = require("react");
const react_colorful_1 = require("react-colorful");
const styles_2 = require("../styles");
const color_1 = require("../utils/color");
const ColorPicker_classes_1 = require("./ColorPicker.classes");
const ColorSwatchButton_1 = require("./ColorSwatchButton");
const componentName = (0, styles_2.getUtilityComponentName)("ColorPicker");
const StyledHexColorPicker = (0, styles_1.styled)(react_colorful_1.HexColorPicker, {
name: componentName,
slot: "gradientPicker",
overridesResolver: (props, styles) => styles.gradientPicker,
})(() => ({
// Increase specificity to override the styles
"&&": {
width: "100%",
},
}));
const StyledHexAlphaColorPicker = (0, styles_1.styled)(react_colorful_1.HexAlphaColorPicker, {
name: componentName,
slot: "gradientPicker",
overridesResolver: (props, styles) => styles.gradientPicker,
})(() => ({
// Increase specificity to override the styles
"&&": {
width: "100%",
},
}));
const ColorPickerColorTextInput = (0, styles_1.styled)(TextField_1.default, {
name: componentName,
slot: "colorTextInput",
overridesResolver: (props, styles) => styles.colorTextInput,
})(({ theme }) => ({
marginTop: theme.spacing(1),
}));
const ColorPickerSwatchContainer = (0, styles_1.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.
*/
function ColorPicker(inProps) {
const props = (0, styles_1.useThemeProps)({ props: inProps, name: componentName });
const { value, onChange, swatchColors, colorToHex = color_1.colorToHex, disableAlpha = false, labels = {}, classes = {}, } = props;
const { textFieldPlaceholder = 'Ex: "#7cb5ec"' } = labels;
const inputRef = (0, react_1.useRef)(null);
(0, react_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [disableAlpha ? ((0, jsx_runtime_1.jsx)(StyledHexColorPicker, { color: colorValueAsHex !== null && colorValueAsHex !== void 0 ? colorValueAsHex : "#000000", className: (0, clsx_1.clsx)([
ColorPicker_classes_1.colorPickerClasses.gradientPicker,
classes.gradientPicker,
]), onChange: (color) => {
onChange(color, "gradient");
} })) : ((0, jsx_runtime_1.jsx)(StyledHexAlphaColorPicker, { color: colorValueAsHex !== null && colorValueAsHex !== void 0 ? colorValueAsHex : "#000000", className: (0, clsx_1.clsx)([
ColorPicker_classes_1.colorPickerClasses.gradientPicker,
classes.gradientPicker,
]), onChange: (color) => {
onChange(color, "gradient");
} })), (0, jsx_runtime_1.jsx)(ColorPickerColorTextInput, { placeholder: textFieldPlaceholder, variant: "outlined", size: "small", defaultValue: value || "", inputRef: inputRef, spellCheck: false, className: (0, clsx_1.clsx)([
ColorPicker_classes_1.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 && ((0, jsx_runtime_1.jsx)(ColorPickerSwatchContainer, { className: (0, clsx_1.clsx)([
ColorPicker_classes_1.colorPickerClasses.swatchContainer,
classes.swatchContainer,
]), children: swatchColorObjects.map((swatchColor) => ((0, jsx_runtime_1.jsx)(ColorSwatchButton_1.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))) }))] }));
}