fix: image inline resizable issue

added mouse down event on image resizing.

src/extensions/ResizableImageComponent.tsx

@@ -2,7 +2,7 @@ import type { NodeViewProps } from "@tiptap/core";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { NodeViewWrapper } from "@tiptap/react";
 import throttle from "lodash/throttle";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
 import { makeStyles } from "tss-react/mui";
 import type ResizableImage from "./ResizableImage";
 import { ResizableImageResizer } from "./ResizableImageResizer";
@@ -80,6 +80,11 @@ function ResizableImageComponent(props: Props) {
 
   const imageRef = useRef<HTMLImageElement | null>(null);
 
+  // Moved the mouseDown state here from ResizableImageResizer to control the resizer visibility when "inline" option is enabled.
+  // Gave more leniency to selected condition to show the resizer by including mouseDown state.
+  const [mouseDown, setMouseDown] = useState(false);
+  const selectedOrDragging = selected || mouseDown;
+
   const handleResize = useMemo(
     () =>
       // Throttle our "on resize" handler, since the event fires very rapidly during
@@ -163,9 +168,9 @@ function ResizableImageComponent(props: Props) {
             classes.image,
             // For consistency with the standard Image extension selection
             // class/UI:
-            selected && "ProseMirror-selectednode",
+            selectedOrDragging && "ProseMirror-selectednode",
             // We'll only show the outline when the editor content is selected
-            selected && classes.imageSelected
+            selectedOrDragging && classes.imageSelected
           )}
           style={{
             // If no width has been specified, we use auto max-width
@@ -199,10 +204,12 @@ function ResizableImageComponent(props: Props) {
           }}
         />
 
-        {selected && (
+        {selectedOrDragging && (
           <ResizableImageResizer
             onResize={handleResize}
             className={classes.resizer}
+            mouseDown={mouseDown}
+            setMouseDown={setMouseDown}
           />
         )}
 

src/extensions/ResizableImageResizer.tsx

@@ -1,9 +1,16 @@
-import { useCallback, useEffect, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
 import { makeStyles } from "tss-react/mui";
 
 type ResizableImageResizerProps = {
   className?: string;
   onResize: (event: MouseEvent) => void;
+  mouseDown: boolean;
+  setMouseDown: Dispatch<SetStateAction<boolean>>;
 };
 
 const useStyles = makeStyles({ name: { ResizableImageResizer } })((theme) => ({
@@ -23,9 +30,10 @@ const useStyles = makeStyles({ name: { ResizableImageResizer } })((theme) => ({
 export function ResizableImageResizer({
   onResize,
   className,
+  mouseDown,
+  setMouseDown,
 }: ResizableImageResizerProps) {
   const { classes, cx } = useStyles();
-  const [mouseDown, setMouseDown] = useState(false);
 
   useEffect(() => {
     const handleMouseMove = (event: MouseEvent) => {
@@ -52,11 +60,14 @@ export function ResizableImageResizer({
     return () => {
       window.removeEventListener("mouseup", handleMouseUp);
     };
-  }, []);
+  }, [setMouseDown]);
 
-  const handleMouseDown = useCallback((_event: React.MouseEvent) => {
-    setMouseDown(true);
-  }, []);
+  const handleMouseDown = useCallback(
+    (_event: React.MouseEvent) => {
+      setMouseDown(true);
+    },
+    [setMouseDown]
+  );
 
   return (
     // There isn't a great role to use here (perhaps role="separator" is the