@webiny/lexical-editor 6.3.0 → 6.4.0-beta.1

package/ui/ImageResizer.js

@@ -1,211 +1,180 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import * as React from "react";
-import { useRef } from "react";
+import * as __rspack_external_react from "react";
 function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
+    return Math.min(Math.max(value, min), max);
 }
 const Direction = {
-  east: 1 << 0,
-  north: 1 << 3,
-  south: 1 << 1,
-  west: 1 << 2
+    east: 1,
+    north: 8,
+    south: 2,
+    west: 4
 };
-export function ImageResizer({
-  onResizeStart,
-  onResizeEnd,
-  buttonRef,
-  imageRef,
-  maxWidth,
-  editor,
-  showCaption,
-  setShowCaption,
-  captionsEnabled
-}) {
-  const controlWrapperRef = useRef(null);
-  const userSelect = useRef({
-    priority: "",
-    value: "default"
-  });
-  const positioningRef = useRef({
-    currentHeight: 0,
-    currentWidth: 0,
-    direction: 0,
-    isResizing: false,
-    ratio: 0,
-    startHeight: 0,
-    startWidth: 0,
-    startX: 0,
-    startY: 0
-  });
-  const editorRootElement = editor.getRootElement();
-  // Find max width, accounting for editor padding.
-  const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
-  const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
-  const minWidth = 100;
-  const minHeight = 100;
-  const setStartCursor = direction => {
-    const ew = direction === Direction.east || direction === Direction.west;
-    const ns = direction === Direction.north || direction === Direction.south;
-    const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
-    const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
-    if (editorRootElement !== null) {
-      editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
-    }
-    if (document.body !== null) {
-      document.body.style.setProperty("cursor", `${cursorDir}-resize`, "important");
-      userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
-      userSelect.current.priority = document.body.style.getPropertyPriority("-webkit-user-select");
-      document.body.style.setProperty("-webkit-user-select", `none`, "important");
-    }
-  };
-  const setEndCursor = () => {
-    if (editorRootElement !== null) {
-      editorRootElement.style.setProperty("cursor", "text");
-    }
-    if (document.body !== null) {
-      document.body.style.setProperty("cursor", "default");
-      document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);
-    }
-  };
-  const handlePointerDown = (event, direction) => {
-    if (!editor.isEditable()) {
-      return;
-    }
-    const image = imageRef.current;
-    const controlWrapper = controlWrapperRef.current;
-    if (image !== null && controlWrapper !== null) {
-      const {
-        width,
-        height
-      } = image.getBoundingClientRect();
-      const positioning = positioningRef.current;
-      positioning.startWidth = width;
-      positioning.startHeight = height;
-      positioning.ratio = width / height;
-      positioning.currentWidth = width;
-      positioning.currentHeight = height;
-      positioning.startX = event.clientX;
-      positioning.startY = event.clientY;
-      positioning.isResizing = true;
-      positioning.direction = direction;
-      setStartCursor(direction);
-      onResizeStart();
-      controlWrapper.classList.add("image-control-wrapper--resizing");
-      image.style.height = `${height}px`;
-      image.style.width = `${width}px`;
-      document.addEventListener("pointermove", handlePointerMove);
-      document.addEventListener("pointerup", handlePointerUp);
-    }
-  };
-  const handlePointerMove = event => {
-    const image = imageRef.current;
-    const positioning = positioningRef.current;
-    const isHorizontal = positioning.direction & (Direction.east | Direction.west);
-    const isVertical = positioning.direction & (Direction.south | Direction.north);
-    if (image !== null && positioning.isResizing) {
-      // Corner cursor
-      if (isHorizontal && isVertical) {
-        let diff = Math.floor(positioning.startX - event.clientX);
-        diff = positioning.direction & Direction.east ? -diff : diff;
-        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
-        const height = width / positioning.ratio;
-        image.style.width = `${width}px`;
-        image.style.height = `${height}px`;
-        positioning.currentHeight = height;
-        positioning.currentWidth = width;
-      } else if (isVertical) {
-        let diff = Math.floor(positioning.startY - event.clientY);
-        diff = positioning.direction & Direction.south ? -diff : diff;
-        const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
-        image.style.height = `${height}px`;
-        positioning.currentHeight = height;
-      } else {
-        let diff = Math.floor(positioning.startX - event.clientX);
-        diff = positioning.direction & Direction.east ? -diff : diff;
-        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
-        image.style.width = `${width}px`;
-        positioning.currentWidth = width;
-      }
-    }
-  };
-  const handlePointerUp = () => {
-    const image = imageRef.current;
-    const positioning = positioningRef.current;
-    const controlWrapper = controlWrapperRef.current;
-    if (image !== null && controlWrapper !== null && positioning.isResizing) {
-      const width = positioning.currentWidth;
-      const height = positioning.currentHeight;
-      positioning.startWidth = 0;
-      positioning.startHeight = 0;
-      positioning.ratio = 0;
-      positioning.startX = 0;
-      positioning.startY = 0;
-      positioning.currentWidth = 0;
-      positioning.currentHeight = 0;
-      positioning.isResizing = false;
-      controlWrapper.classList.remove("image-control-wrapper--resizing");
-      setEndCursor();
-      onResizeEnd(width, height);
-      document.removeEventListener("pointermove", handlePointerMove);
-      document.removeEventListener("pointerup", handlePointerUp);
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    ref: controlWrapperRef
-  }, !showCaption && captionsEnabled && /*#__PURE__*/React.createElement("button", {
-    className: "image-caption-button",
-    ref: buttonRef,
-    onClick: () => {
-      setShowCaption(!showCaption);
-    }
-  }, "Add Caption"), /*#__PURE__*/React.createElement("div", {
-    className: "image-resizer image-resizer-n",
-    onPointerDown: event => {
-      handlePointerDown(event, Direction.north);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "image-resizer image-resizer-ne",
-    onPointerDown: event => {
-      handlePointerDown(event, Direction.north | Direction.east);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "image-resizer image-resizer-e",
-    onPointerDown: event => {
-      handlePointerDown(event, Direction.east);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "image-resizer image-resizer-se",
-    onPointerDown: event => {
-      handlePointerDown(event, Direction.south | Direction.east);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "image-resizer image-resizer-s",
-    onPointerDown: event => {
-      handlePointerDown(event, Direction.south);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "image-resizer image-resizer-sw",
-    onPointerDown: event => {
-      handlePointerDown(event, Direction.south | Direction.west);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "image-resizer image-resizer-w",
-    onPointerDown: event => {
-      handlePointerDown(event, Direction.west);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "image-resizer image-resizer-nw",
-    onPointerDown: event => {
-      handlePointerDown(event, Direction.north | Direction.west);
-    }
-  }));
+function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled }) {
+    const controlWrapperRef = (0, __rspack_external_react.useRef)(null);
+    const userSelect = (0, __rspack_external_react.useRef)({
+        priority: "",
+        value: "default"
+    });
+    const positioningRef = (0, __rspack_external_react.useRef)({
+        currentHeight: 0,
+        currentWidth: 0,
+        direction: 0,
+        isResizing: false,
+        ratio: 0,
+        startHeight: 0,
+        startWidth: 0,
+        startX: 0,
+        startY: 0
+    });
+    const editorRootElement = editor.getRootElement();
+    const maxWidthContainer = maxWidth ? maxWidth : null !== editorRootElement ? editorRootElement.getBoundingClientRect().width - 20 : 100;
+    const maxHeightContainer = null !== editorRootElement ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+    const minWidth = 100;
+    const minHeight = 100;
+    const setStartCursor = (direction)=>{
+        const ew = direction === Direction.east || direction === Direction.west;
+        const ns = direction === Direction.north || direction === Direction.south;
+        const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
+        const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+        if (null !== editorRootElement) editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+        if (null !== document.body) {
+            document.body.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+            userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
+            userSelect.current.priority = document.body.style.getPropertyPriority("-webkit-user-select");
+            document.body.style.setProperty("-webkit-user-select", "none", "important");
+        }
+    };
+    const setEndCursor = ()=>{
+        if (null !== editorRootElement) editorRootElement.style.setProperty("cursor", "text");
+        if (null !== document.body) {
+            document.body.style.setProperty("cursor", "default");
+            document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);
+        }
+    };
+    const handlePointerDown = (event, direction)=>{
+        if (!editor.isEditable()) return;
+        const image = imageRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (null !== image && null !== controlWrapper) {
+            const { width, height } = image.getBoundingClientRect();
+            const positioning = positioningRef.current;
+            positioning.startWidth = width;
+            positioning.startHeight = height;
+            positioning.ratio = width / height;
+            positioning.currentWidth = width;
+            positioning.currentHeight = height;
+            positioning.startX = event.clientX;
+            positioning.startY = event.clientY;
+            positioning.isResizing = true;
+            positioning.direction = direction;
+            setStartCursor(direction);
+            onResizeStart();
+            controlWrapper.classList.add("image-control-wrapper--resizing");
+            image.style.height = `${height}px`;
+            image.style.width = `${width}px`;
+            document.addEventListener("pointermove", handlePointerMove);
+            document.addEventListener("pointerup", handlePointerUp);
+        }
+    };
+    const handlePointerMove = (event)=>{
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+        const isVertical = positioning.direction & (Direction.south | Direction.north);
+        if (null !== image && positioning.isResizing) if (isHorizontal && isVertical) {
+            let diff = Math.floor(positioning.startX - event.clientX);
+            diff = positioning.direction & Direction.east ? -diff : diff;
+            const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+            const height = width / positioning.ratio;
+            image.style.width = `${width}px`;
+            image.style.height = `${height}px`;
+            positioning.currentHeight = height;
+            positioning.currentWidth = width;
+        } else if (isVertical) {
+            let diff = Math.floor(positioning.startY - event.clientY);
+            diff = positioning.direction & Direction.south ? -diff : diff;
+            const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+            image.style.height = `${height}px`;
+            positioning.currentHeight = height;
+        } else {
+            let diff = Math.floor(positioning.startX - event.clientX);
+            diff = positioning.direction & Direction.east ? -diff : diff;
+            const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+            image.style.width = `${width}px`;
+            positioning.currentWidth = width;
+        }
+    };
+    const handlePointerUp = ()=>{
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (null !== image && null !== controlWrapper && positioning.isResizing) {
+            const width = positioning.currentWidth;
+            const height = positioning.currentHeight;
+            positioning.startWidth = 0;
+            positioning.startHeight = 0;
+            positioning.ratio = 0;
+            positioning.startX = 0;
+            positioning.startY = 0;
+            positioning.currentWidth = 0;
+            positioning.currentHeight = 0;
+            positioning.isResizing = false;
+            controlWrapper.classList.remove("image-control-wrapper--resizing");
+            setEndCursor();
+            onResizeEnd(width, height);
+            document.removeEventListener("pointermove", handlePointerMove);
+            document.removeEventListener("pointerup", handlePointerUp);
+        }
+    };
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        ref: controlWrapperRef
+    }, !showCaption && captionsEnabled && /*#__PURE__*/ __rspack_external_react.createElement("button", {
+        className: "image-caption-button",
+        ref: buttonRef,
+        onClick: ()=>{
+            setShowCaption(!showCaption);
+        }
+    }, "Add Caption"), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "image-resizer image-resizer-n",
+        onPointerDown: (event)=>{
+            handlePointerDown(event, Direction.north);
+        }
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "image-resizer image-resizer-ne",
+        onPointerDown: (event)=>{
+            handlePointerDown(event, Direction.north | Direction.east);
+        }
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "image-resizer image-resizer-e",
+        onPointerDown: (event)=>{
+            handlePointerDown(event, Direction.east);
+        }
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "image-resizer image-resizer-se",
+        onPointerDown: (event)=>{
+            handlePointerDown(event, Direction.south | Direction.east);
+        }
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "image-resizer image-resizer-s",
+        onPointerDown: (event)=>{
+            handlePointerDown(event, Direction.south);
+        }
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "image-resizer image-resizer-sw",
+        onPointerDown: (event)=>{
+            handlePointerDown(event, Direction.south | Direction.west);
+        }
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "image-resizer image-resizer-w",
+        onPointerDown: (event)=>{
+            handlePointerDown(event, Direction.west);
+        }
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "image-resizer image-resizer-nw",
+        onPointerDown: (event)=>{
+            handlePointerDown(event, Direction.north | Direction.west);
+        }
+    }));
 }
+export { ImageResizer };
 
 //# sourceMappingURL=ImageResizer.js.map

package/ui/ImageResizer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","clamp","value","min","max","Math","Direction","east","north","south","west","ImageResizer","onResizeStart","onResizeEnd","buttonRef","imageRef","maxWidth","editor","showCaption","setShowCaption","captionsEnabled","controlWrapperRef","userSelect","priority","positioningRef","currentHeight","currentWidth","direction","isResizing","ratio","startHeight","startWidth","startX","startY","editorRootElement","getRootElement","maxWidthContainer","getBoundingClientRect","width","maxHeightContainer","height","minWidth","minHeight","setStartCursor","ew","ns","nwse","cursorDir","style","setProperty","document","body","current","getPropertyValue","getPropertyPriority","setEndCursor","handlePointerDown","event","isEditable","image","controlWrapper","positioning","clientX","clientY","classList","add","addEventListener","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff","floor","remove","removeEventListener","createElement","ref","className","onClick","onPointerDown"],"sources":["ImageResizer.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { LexicalEditor } from \"lexical\";\n\nimport * as React from \"react\";\nimport { useRef } from \"react\";\n\nfunction clamp(value: number, min: number, max: number) {\n    return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n    east: 1 << 0,\n    north: 1 << 3,\n    south: 1 << 1,\n    west: 1 << 2\n};\n\nexport function ImageResizer({\n    onResizeStart,\n    onResizeEnd,\n    buttonRef,\n    imageRef,\n    maxWidth,\n    editor,\n    showCaption,\n    setShowCaption,\n    captionsEnabled\n}: {\n    editor: LexicalEditor;\n    buttonRef: { current: null | HTMLButtonElement };\n    imageRef: { current: null | HTMLElement };\n    maxWidth?: number;\n    onResizeEnd: (width: \"inherit\" | number, height: \"inherit\" | number) => void;\n    onResizeStart: () => void;\n    setShowCaption: (show: boolean) => void;\n    showCaption: boolean;\n    captionsEnabled: boolean;\n}): React.JSX.Element {\n    const controlWrapperRef = useRef<HTMLDivElement>(null);\n    const userSelect = useRef({\n        priority: \"\",\n        value: \"default\"\n    });\n    const positioningRef = useRef<{\n        currentHeight: \"inherit\" | number;\n        currentWidth: \"inherit\" | number;\n        direction: number;\n        isResizing: boolean;\n        ratio: number;\n        startHeight: number;\n        startWidth: number;\n        startX: number;\n        startY: number;\n    }>({\n        currentHeight: 0,\n        currentWidth: 0,\n        direction: 0,\n        isResizing: false,\n        ratio: 0,\n        startHeight: 0,\n        startWidth: 0,\n        startX: 0,\n        startY: 0\n    });\n    const editorRootElement = editor.getRootElement();\n    // Find max width, accounting for editor padding.\n    const maxWidthContainer = maxWidth\n        ? maxWidth\n        : editorRootElement !== null\n          ? editorRootElement.getBoundingClientRect().width - 20\n          : 100;\n    const maxHeightContainer =\n        editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;\n\n    const minWidth = 100;\n    const minHeight = 100;\n\n    const setStartCursor = (direction: number) => {\n        const ew = direction === Direction.east || direction === Direction.west;\n        const ns = direction === Direction.north || direction === Direction.south;\n        const nwse =\n            (direction & Direction.north && direction & Direction.west) ||\n            (direction & Direction.south && direction & Direction.east);\n\n        const cursorDir = ew ? \"ew\" : ns ? \"ns\" : nwse ? \"nwse\" : \"nesw\";\n\n        if (editorRootElement !== null) {\n            editorRootElement.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n        }\n        if (document.body !== null) {\n            document.body.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n            userSelect.current.value = document.body.style.getPropertyValue(\"-webkit-user-select\");\n            userSelect.current.priority =\n                document.body.style.getPropertyPriority(\"-webkit-user-select\");\n            document.body.style.setProperty(\"-webkit-user-select\", `none`, \"important\");\n        }\n    };\n\n    const setEndCursor = () => {\n        if (editorRootElement !== null) {\n            editorRootElement.style.setProperty(\"cursor\", \"text\");\n        }\n        if (document.body !== null) {\n            document.body.style.setProperty(\"cursor\", \"default\");\n            document.body.style.setProperty(\n                \"-webkit-user-select\",\n                userSelect.current.value,\n                userSelect.current.priority\n            );\n        }\n    };\n\n    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, direction: number) => {\n        if (!editor.isEditable()) {\n            return;\n        }\n\n        const image = imageRef.current;\n        const controlWrapper = controlWrapperRef.current;\n\n        if (image !== null && controlWrapper !== null) {\n            const { width, height } = image.getBoundingClientRect();\n            const positioning = positioningRef.current;\n            positioning.startWidth = width;\n            positioning.startHeight = height;\n            positioning.ratio = width / height;\n            positioning.currentWidth = width;\n            positioning.currentHeight = height;\n            positioning.startX = event.clientX;\n            positioning.startY = event.clientY;\n            positioning.isResizing = true;\n            positioning.direction = direction;\n\n            setStartCursor(direction);\n            onResizeStart();\n\n            controlWrapper.classList.add(\"image-control-wrapper--resizing\");\n            image.style.height = `${height}px`;\n            image.style.width = `${width}px`;\n\n            document.addEventListener(\"pointermove\", handlePointerMove);\n            document.addEventListener(\"pointerup\", handlePointerUp);\n        }\n    };\n    const handlePointerMove = (event: PointerEvent) => {\n        const image = imageRef.current;\n        const positioning = positioningRef.current;\n\n        const isHorizontal = positioning.direction & (Direction.east | Direction.west);\n        const isVertical = positioning.direction & (Direction.south | Direction.north);\n\n        if (image !== null && positioning.isResizing) {\n            // Corner cursor\n            if (isHorizontal && isVertical) {\n                let diff = Math.floor(positioning.startX - event.clientX);\n                diff = positioning.direction & Direction.east ? -diff : diff;\n\n                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n                const height = width / positioning.ratio;\n                image.style.width = `${width}px`;\n                image.style.height = `${height}px`;\n                positioning.currentHeight = height;\n                positioning.currentWidth = width;\n            } else if (isVertical) {\n                let diff = Math.floor(positioning.startY - event.clientY);\n                diff = positioning.direction & Direction.south ? -diff : diff;\n\n                const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);\n\n                image.style.height = `${height}px`;\n                positioning.currentHeight = height;\n            } else {\n                let diff = Math.floor(positioning.startX - event.clientX);\n                diff = positioning.direction & Direction.east ? -diff : diff;\n\n                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n                image.style.width = `${width}px`;\n                positioning.currentWidth = width;\n            }\n        }\n    };\n    const handlePointerUp = () => {\n        const image = imageRef.current;\n        const positioning = positioningRef.current;\n        const controlWrapper = controlWrapperRef.current;\n        if (image !== null && controlWrapper !== null && positioning.isResizing) {\n            const width = positioning.currentWidth;\n            const height = positioning.currentHeight;\n            positioning.startWidth = 0;\n            positioning.startHeight = 0;\n            positioning.ratio = 0;\n            positioning.startX = 0;\n            positioning.startY = 0;\n            positioning.currentWidth = 0;\n            positioning.currentHeight = 0;\n            positioning.isResizing = false;\n\n            controlWrapper.classList.remove(\"image-control-wrapper--resizing\");\n\n            setEndCursor();\n            onResizeEnd(width, height);\n\n            document.removeEventListener(\"pointermove\", handlePointerMove);\n            document.removeEventListener(\"pointerup\", handlePointerUp);\n        }\n    };\n    return (\n        <div ref={controlWrapperRef}>\n            {!showCaption && captionsEnabled && (\n                <button\n                    className=\"image-caption-button\"\n                    ref={buttonRef}\n                    onClick={() => {\n                        setShowCaption(!showCaption);\n                    }}\n                >\n                    Add Caption\n                </button>\n            )}\n            <div\n                className=\"image-resizer image-resizer-n\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-ne\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north | Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-e\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-se\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south | Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-s\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-sw\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south | Direction.west);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-w\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.west);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-nw\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north | Direction.west);\n                }}\n            />\n        </div>\n    );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ui/ImageResizer.js","sources":["../../src/ui/ImageResizer.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { LexicalEditor } from \"lexical\";\n\nimport * as React from \"react\";\nimport { useRef } from \"react\";\n\nfunction clamp(value: number, min: number, max: number) {\n    return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n    east: 1 << 0,\n    north: 1 << 3,\n    south: 1 << 1,\n    west: 1 << 2\n};\n\nexport function ImageResizer({\n    onResizeStart,\n    onResizeEnd,\n    buttonRef,\n    imageRef,\n    maxWidth,\n    editor,\n    showCaption,\n    setShowCaption,\n    captionsEnabled\n}: {\n    editor: LexicalEditor;\n    buttonRef: { current: null | HTMLButtonElement };\n    imageRef: { current: null | HTMLElement };\n    maxWidth?: number;\n    onResizeEnd: (width: \"inherit\" | number, height: \"inherit\" | number) => void;\n    onResizeStart: () => void;\n    setShowCaption: (show: boolean) => void;\n    showCaption: boolean;\n    captionsEnabled: boolean;\n}): React.JSX.Element {\n    const controlWrapperRef = useRef<HTMLDivElement>(null);\n    const userSelect = useRef({\n        priority: \"\",\n        value: \"default\"\n    });\n    const positioningRef = useRef<{\n        currentHeight: \"inherit\" | number;\n        currentWidth: \"inherit\" | number;\n        direction: number;\n        isResizing: boolean;\n        ratio: number;\n        startHeight: number;\n        startWidth: number;\n        startX: number;\n        startY: number;\n    }>({\n        currentHeight: 0,\n        currentWidth: 0,\n        direction: 0,\n        isResizing: false,\n        ratio: 0,\n        startHeight: 0,\n        startWidth: 0,\n        startX: 0,\n        startY: 0\n    });\n    const editorRootElement = editor.getRootElement();\n    // Find max width, accounting for editor padding.\n    const maxWidthContainer = maxWidth\n        ? maxWidth\n        : editorRootElement !== null\n          ? editorRootElement.getBoundingClientRect().width - 20\n          : 100;\n    const maxHeightContainer =\n        editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;\n\n    const minWidth = 100;\n    const minHeight = 100;\n\n    const setStartCursor = (direction: number) => {\n        const ew = direction === Direction.east || direction === Direction.west;\n        const ns = direction === Direction.north || direction === Direction.south;\n        const nwse =\n            (direction & Direction.north && direction & Direction.west) ||\n            (direction & Direction.south && direction & Direction.east);\n\n        const cursorDir = ew ? \"ew\" : ns ? \"ns\" : nwse ? \"nwse\" : \"nesw\";\n\n        if (editorRootElement !== null) {\n            editorRootElement.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n        }\n        if (document.body !== null) {\n            document.body.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n            userSelect.current.value = document.body.style.getPropertyValue(\"-webkit-user-select\");\n            userSelect.current.priority =\n                document.body.style.getPropertyPriority(\"-webkit-user-select\");\n            document.body.style.setProperty(\"-webkit-user-select\", `none`, \"important\");\n        }\n    };\n\n    const setEndCursor = () => {\n        if (editorRootElement !== null) {\n            editorRootElement.style.setProperty(\"cursor\", \"text\");\n        }\n        if (document.body !== null) {\n            document.body.style.setProperty(\"cursor\", \"default\");\n            document.body.style.setProperty(\n                \"-webkit-user-select\",\n                userSelect.current.value,\n                userSelect.current.priority\n            );\n        }\n    };\n\n    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, direction: number) => {\n        if (!editor.isEditable()) {\n            return;\n        }\n\n        const image = imageRef.current;\n        const controlWrapper = controlWrapperRef.current;\n\n        if (image !== null && controlWrapper !== null) {\n            const { width, height } = image.getBoundingClientRect();\n            const positioning = positioningRef.current;\n            positioning.startWidth = width;\n            positioning.startHeight = height;\n            positioning.ratio = width / height;\n            positioning.currentWidth = width;\n            positioning.currentHeight = height;\n            positioning.startX = event.clientX;\n            positioning.startY = event.clientY;\n            positioning.isResizing = true;\n            positioning.direction = direction;\n\n            setStartCursor(direction);\n            onResizeStart();\n\n            controlWrapper.classList.add(\"image-control-wrapper--resizing\");\n            image.style.height = `${height}px`;\n            image.style.width = `${width}px`;\n\n            document.addEventListener(\"pointermove\", handlePointerMove);\n            document.addEventListener(\"pointerup\", handlePointerUp);\n        }\n    };\n    const handlePointerMove = (event: PointerEvent) => {\n        const image = imageRef.current;\n        const positioning = positioningRef.current;\n\n        const isHorizontal = positioning.direction & (Direction.east | Direction.west);\n        const isVertical = positioning.direction & (Direction.south | Direction.north);\n\n        if (image !== null && positioning.isResizing) {\n            // Corner cursor\n            if (isHorizontal && isVertical) {\n                let diff = Math.floor(positioning.startX - event.clientX);\n                diff = positioning.direction & Direction.east ? -diff : diff;\n\n                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n                const height = width / positioning.ratio;\n                image.style.width = `${width}px`;\n                image.style.height = `${height}px`;\n                positioning.currentHeight = height;\n                positioning.currentWidth = width;\n            } else if (isVertical) {\n                let diff = Math.floor(positioning.startY - event.clientY);\n                diff = positioning.direction & Direction.south ? -diff : diff;\n\n                const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);\n\n                image.style.height = `${height}px`;\n                positioning.currentHeight = height;\n            } else {\n                let diff = Math.floor(positioning.startX - event.clientX);\n                diff = positioning.direction & Direction.east ? -diff : diff;\n\n                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n                image.style.width = `${width}px`;\n                positioning.currentWidth = width;\n            }\n        }\n    };\n    const handlePointerUp = () => {\n        const image = imageRef.current;\n        const positioning = positioningRef.current;\n        const controlWrapper = controlWrapperRef.current;\n        if (image !== null && controlWrapper !== null && positioning.isResizing) {\n            const width = positioning.currentWidth;\n            const height = positioning.currentHeight;\n            positioning.startWidth = 0;\n            positioning.startHeight = 0;\n            positioning.ratio = 0;\n            positioning.startX = 0;\n            positioning.startY = 0;\n            positioning.currentWidth = 0;\n            positioning.currentHeight = 0;\n            positioning.isResizing = false;\n\n            controlWrapper.classList.remove(\"image-control-wrapper--resizing\");\n\n            setEndCursor();\n            onResizeEnd(width, height);\n\n            document.removeEventListener(\"pointermove\", handlePointerMove);\n            document.removeEventListener(\"pointerup\", handlePointerUp);\n        }\n    };\n    return (\n        <div ref={controlWrapperRef}>\n            {!showCaption && captionsEnabled && (\n                <button\n                    className=\"image-caption-button\"\n                    ref={buttonRef}\n                    onClick={() => {\n                        setShowCaption(!showCaption);\n                    }}\n                >\n                    Add Caption\n                </button>\n            )}\n            <div\n                className=\"image-resizer image-resizer-n\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-ne\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north | Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-e\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-se\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south | Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-s\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-sw\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south | Direction.west);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-w\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.west);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-nw\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north | Direction.west);\n                }}\n            />\n        </div>\n    );\n}\n"],"names":["clamp","value","min","max","Math","Direction","ImageResizer","onResizeStart","onResizeEnd","buttonRef","imageRef","maxWidth","editor","showCaption","setShowCaption","captionsEnabled","controlWrapperRef","useRef","userSelect","positioningRef","editorRootElement","maxWidthContainer","maxHeightContainer","minWidth","minHeight","setStartCursor","direction","ew","ns","nwse","cursorDir","document","setEndCursor","handlePointerDown","event","image","controlWrapper","width","height","positioning","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff"],"mappings":"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"}