@rtdui/editor
Version:
React rich text editor based on tiptap
63 lines (61 loc) • 1.89 kB
JavaScript
'use client';
let react = require("react");
let _tiptap_react = require("@tiptap/react");
let re_resizable = require("re-resizable");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/editor/src/RichTextEditor/tiptap_extensions/extension-image-upload/ImageResizableComponent.tsx
function ImageResizableComponent(props) {
const { editor, node, selected, updateAttributes, extension } = props;
const ref = (0, react.useRef)(null);
const handleImgLoad = (ev) => {
const img = ev.target;
const aspectRatio = img.naturalWidth / img.naturalHeight;
const { width } = img.getBoundingClientRect();
const height = width / aspectRatio;
ref.current.updateSize({
width,
height
});
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react.NodeViewWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(re_resizable.Resizable, {
ref,
size: node.attrs.width && node.attrs.height ? {
width: node.attrs.width,
height: node.attrs.height
} : {
width: "100%",
height: "auto"
},
onResizeStop: (ev, direction, element, delta) => {
updateAttributes({
width: Number(getComputedStyle(element).width.slice(0, -2)),
height: Number(getComputedStyle(element).height.slice(0, -2))
});
},
lockAspectRatio: true,
enable: extension.options.resizable && editor.isEditable ? {
top: false,
right: false,
bottom: false,
left: false,
topRight: false,
bottomRight: true,
bottomLeft: false,
topLeft: false
} : false,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
src: node.attrs.src,
alt: node.attrs.alt,
title: node.attrs.title,
className: selected ? "ProseMirror-selectednode" : void 0,
onLoad: handleImgLoad,
"data-drag-handle": true,
style: {
width: "100%",
height: "100%"
}
})
}) });
}
//#endregion
exports.default = ImageResizableComponent;