mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
80 lines (79 loc) • 3.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ResizableImageResizer;
const jsx_runtime_1 = require("react/jsx-runtime");
const styles_1 = require("@mui/material/styles");
const clsx_1 = require("clsx");
const react_1 = require("react");
const styles_2 = require("../styles");
const ResizableImageResizer_classes_1 = require("./ResizableImageResizer.classes");
const componentName = (0, styles_2.getUtilityComponentName)("ResizableImageResizer");
const ResizableImageResizerRoot = (0, styles_1.styled)("div", {
name: componentName,
slot: "root",
overridesResolver: (props, styles) => styles.root,
})(({ theme }) => ({
position: "absolute",
// The `outline` styles of the selected image add 3px to the edges, so we'll
// position this offset by 3px outside to the bottom right
bottom: -3,
right: -3,
width: 12,
height: 12,
background: theme.palette.primary.main,
cursor: "nwse-resize",
}));
function ResizableImageResizer(inProps) {
const props = (0, styles_1.useThemeProps)({ props: inProps, name: componentName });
const { onResize, className, mouseDown, setMouseDown, classes = {}, sx, } = props;
(0, react_1.useEffect)(() => {
if (!mouseDown) {
return;
}
// If the user is currently holding down the resize handle, we'll have mouse
// movements fire the onResize callback (since the user would be "dragging"
// the handle).
const handleMouseMove = (event) => {
onResize(event);
};
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, [mouseDown, onResize]);
(0, react_1.useEffect)(() => {
const handleMouseUp = () => {
setMouseDown(false);
};
window.addEventListener("mouseup", handleMouseUp);
return () => {
window.removeEventListener("mouseup", handleMouseUp);
};
}, [setMouseDown]);
const handleMouseDown = (0, react_1.useCallback)((event) => {
// Ensure this click event doesn't trigger dragging of the image itself
event.preventDefault();
event.stopPropagation();
setMouseDown(true);
}, [setMouseDown]);
return (
// There isn't a great role to use here (perhaps role="separator" is the
// closest, as described here https://stackoverflow.com/a/43022983/4543977,
// but we don't do keyboard-based resizing at this time so it doesn't make
// sense to have it keyboard focusable)
(0, jsx_runtime_1.jsx)(ResizableImageResizerRoot
// TODO(Steven DeMartini): Add keyboard support and better accessibility
// here, and allow users to override the aria-label when that happens to
// support localization.
// aria-label="resize image"
, {
// TODO(Steven DeMartini): Add keyboard support and better accessibility
// here, and allow users to override the aria-label when that happens to
// support localization.
// aria-label="resize image"
className: (0, clsx_1.clsx)([
ResizableImageResizer_classes_1.resizableImageResizerClasses.root,
className,
classes.root,
]), onMouseDown: handleMouseDown, sx: sx }));
}