import { Editor } from "@tiptap/react"; import Moveable from "react-moveable"; export const ImageResizer = ({ editor }: { editor: Editor }) => { const updateMediaSize = () => { const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement; if (imageInfo) { const selection = editor.state.selection; editor.commands.setImage({ src: imageInfo.src, width: Number(imageInfo.style.width.replace("px", "")), height: Number(imageInfo.style.height.replace("px", "")), } as any); editor.commands.setNodeSelection(selection.from); } }; return ( <> { delta[0] && (target!.style.width = `${width}px`); delta[1] && (target!.style.height = `${height}px`); }} onResizeEnd={() => { updateMediaSize(); }} scalable={true} renderDirections={["w", "e"]} onScale={({ target, transform }: any) => { target!.style.transform = transform; }} /> ); };