Merge pull request #8395 from 01zulfi/editor/image-resizing-dimensions

packages/editor/src/components/resizer/index.tsx

@@ -32,6 +32,7 @@ type ResizerProps = {
   height?: number;
   handleColor?: SchemeColors;
   onResize: (width: number, height: number) => void;
+  onResizeStop: (width: number, height: number) => void;
   style?: React.CSSProperties;
 };
 export function Resizer(props: PropsWithChildren<ResizerProps>) {
@@ -39,6 +40,7 @@ export function Resizer(props: PropsWithChildren<ResizerProps>) {
     enabled,
     selected,
     onResize,
+    onResizeStop,
     width,
     height,
     children,
@@ -92,13 +94,20 @@ export function Resizer(props: PropsWithChildren<ResizerProps>) {
           />
         )
       }}
-      onResizeStop={(_e, _direction, ref) => {
+      onResize={(_e, _direction, ref) => {
         try {
           onResize(ref.clientWidth, ref.clientHeight);
         } catch {
           // ignore
         }
       }}
+      onResizeStop={(_e, _direction, ref) => {
+        try {
+          onResizeStop(ref.clientWidth, ref.clientHeight);
+        } catch {
+          // ignore
+        }
+      }}
       onResizeStart={(e) => e.preventDefault()}
       lockAspectRatio={true}
     >

packages/editor/src/extensions/image/component.tsx

@@ -51,6 +51,10 @@ export function ImageComponent(
   const [bloburl, setBloburl] = useState<string | undefined>(
     toBlobURL("", "image", mime, hash)
   );
+  const [resizing, setResizing] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
   const controllerRef = useRef(new AbortController());
 
   const isMobile = useIsMobile();
@@ -123,6 +127,10 @@ export function ImageComponent(
           width={size.width}
           height={size.height}
           onResize={(width, height) => {
+            setResizing({ width, height });
+          }}
+          onResizeStop={(width, height) => {
+            setResizing(null);
             editor.commands.setImageSize({ width, height });
           }}
         >
@@ -165,6 +173,26 @@ export function ImageComponent(
                 />
               </Flex>
             )}
+            {Boolean(resizing) && (
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: -30,
+                  left: 0,
+                  zIndex: 9999,
+                  background: "var(--background-secondary)",
+                  px: 2,
+                  py: 1,
+                  borderRadius: "default"
+                }}
+              >
+                <Text variant="subBody" sx={{ fontWeight: "bold" }}>
+                  {resizing?.width}
+                  {" × "}
+                  {resizing?.height}
+                </Text>
+              </Box>
+            )}
           </DesktopOnly>
           {progress ? (
             <Flex