mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
d470adf262
* added image-resizing support * link form removed * updated image upload logic and 35% default width on upload * removed shadow, added alert if not saved and ts errors * prevent enter key on Link selector to trigger modal submit * added workspace slug to all tiptap instances * added delete plugin with loading indicator * added better syncing of "Saved" state of editor and Image uploads * removed redundant description_html check
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
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 (
|
|
<>
|
|
<Moveable
|
|
target={document.querySelector(".ProseMirror-selectednode") as any}
|
|
container={null}
|
|
origin={false}
|
|
edge={false}
|
|
throttleDrag={0}
|
|
keepRatio={true}
|
|
resizable={true}
|
|
throttleResize={0}
|
|
onResize={({
|
|
target,
|
|
width,
|
|
height,
|
|
delta,
|
|
}:
|
|
any) => {
|
|
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;
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|