@rtdui/editor
Version:
React rich text editor based on tiptap
63 lines (61 loc) • 1.78 kB
JavaScript
'use client';
import { useRef } from "react";
import { NodeViewWrapper } from "@tiptap/react";
import { Resizable } from "re-resizable";
import { jsx } from "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 = 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__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx(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__ */ 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
export { ImageResizableComponent as default };