mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
101 lines (100 loc) • 6.96 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPickerPopperBody = ColorPickerPopperBody;
exports.ColorPickerPopper = ColorPickerPopper;
const jsx_runtime_1 = require("react/jsx-runtime");
const Button_1 = __importDefault(require("@mui/material/Button"));
const ClickAwayListener_1 = __importDefault(require("@mui/material/ClickAwayListener"));
const Fade_1 = __importDefault(require("@mui/material/Fade"));
const Paper_1 = __importDefault(require("@mui/material/Paper"));
const Popper_1 = __importDefault(require("@mui/material/Popper"));
const Stack_1 = __importDefault(require("@mui/material/Stack"));
const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
const styles_1 = require("@mui/material/styles");
const clsx_1 = require("clsx");
const react_1 = require("react");
const styles_2 = require("../styles");
const ColorPicker_1 = require("./ColorPicker");
const ColorPickerPopper_classes_1 = require("./ColorPickerPopper.classes");
// NOTE: This component's state logic is able to be kept simple because the
// component is unmounted whenever the outer Popper is not open, so we don't
// have to worry about resetting the state ourselves when the user cancels, for
// instance.
function ColorPickerPopperBody({ value, onCancel, onSave, swatchColors, labels = {}, ColorPickerProps, }) {
const { removeColorButton = "None", removeColorButtonTooltipTitle = "", cancelButton = "Cancel", saveButton = "OK", } = labels;
// Because color can change rapidly as the user drags the color in the
// ColorPicker gradient, we'll wait until "Save" to call the onSave prop, and
// we'll store an internal localColor until then. (This could alternatively be
// implemented such that we "save" directly whenever a swatch preset is
// clicked, by looking at the `source` from `ColorPicker.onChange`, but it may
// be useful to tweak a color from a swatch before saving.)
const [localColor, setLocalColor] = (0, react_1.useState)(value);
// Update our internal value whenever the `color` prop changes (since this is
// a controlled component)
(0, react_1.useEffect)(() => {
setLocalColor(value);
}, [value]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, Object.assign({ swatchColors: swatchColors, value: localColor, onChange: (newColor) => {
setLocalColor(newColor);
}, labels: labels }, ColorPickerProps)), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", sx: { justifyContent: "space-between", mt: 1 }, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: removeColorButtonTooltipTitle, arrow: true, children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => {
// No color being specified can mean "none" in some scenarios
// (e.g. highlighting) and "default color"/reset in others (text)
onSave("");
}, size: "small", children: removeColorButton }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onCancel, size: "small", children: cancelButton }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => {
onSave(localColor);
}, size: "small", children: saveButton })] })] }));
}
const componentName = (0, styles_2.getUtilityComponentName)("ColorPickerPopper");
const ColorPickerPopperRoot = (0, styles_1.styled)(Popper_1.default, {
name: componentName,
slot: "root",
overridesResolver: (props, styles) => styles.root,
})(({ theme }) => ({
// Ensure the popper is above modals, in case the editor is rendered in a
// modal, consistent with recommendations here
// https://github.com/mui/material-ui/issues/14216. See
// https://github.com/sjdemartini/mui-tiptap/issues/206.
zIndex: theme.zIndex.tooltip,
// This width seems to work well to allow exactly 8 swatches, as well as the
// default button content
width: 235,
}));
/**
* Renders the ColorPicker inside of a Popper interface, for use with the
* MenuButtonColorPicker.
*/
function ColorPickerPopper(inProps) {
const props = (0, styles_1.useThemeProps)({ props: inProps, name: componentName });
const { value, onSave, onCancel, swatchColors, ColorPickerProps, labels, classes = {}, sx } = props, popperProps = __rest(props, ["value", "onSave", "onCancel", "swatchColors", "ColorPickerProps", "labels", "classes", "sx"]);
return ((0, jsx_runtime_1.jsx)(ColorPickerPopperRoot, Object.assign({ transition: true, placement: "bottom-start" }, popperProps, { className: (0, clsx_1.clsx)([
ColorPickerPopper_classes_1.colorPickerPopperClasses.root,
classes.root,
popperProps.className,
]), sx: sx, children: ({ TransitionProps }) => ((0, jsx_runtime_1.jsx)(Fade_1.default, Object.assign({}, TransitionProps, { timeout: 100, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.default
// Listen for "leading" events (the start of a click or touch)
// rather than the trailing events (the end of a click) which is
// the default, since it's easy to accidentally drag the
// color-picker saturation/hue gradients beyond the edge of the
// Popper, and we don't want to close in that situation.
, {
// Listen for "leading" events (the start of a click or touch)
// rather than the trailing events (the end of a click) which is
// the default, since it's easy to accidentally drag the
// color-picker saturation/hue gradients beyond the edge of the
// Popper, and we don't want to close in that situation.
mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onCancel, children: (0, jsx_runtime_1.jsx)(Paper_1.default, { elevation: 5, sx: { p: 2.5, pb: 1 }, children: (0, jsx_runtime_1.jsx)(ColorPickerPopperBody, { value: value || "", onSave: onSave, onCancel: onCancel, swatchColors: swatchColors, ColorPickerProps: ColorPickerProps, labels: labels }) }) }) }) }))) })));
}