From 834e9fc07d73976edac0035f2697a54892adb91b Mon Sep 17 00:00:00 2001
From: lastnigtic <lastnigtic@gmail.com>
Date: Tue, 31 May 2022 20:42:07 +0800
Subject: [PATCH] fix(InlineImagePlugin): `Resize handler` not working after
 `mousedown` (#144)

fix #143
---
 .../src/reacts/image/view/image-resize-box.tsx        |  9 ++++-----
 packages/access-react/src/reacts/image/view/mask.tsx  | 11 +++++++++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/access-react/src/reacts/image/view/image-resize-box.tsx b/packages/access-react/src/reacts/image/view/image-resize-box.tsx
index 43082d4..df1f150 100644
--- a/packages/access-react/src/reacts/image/view/image-resize-box.tsx
+++ b/packages/access-react/src/reacts/image/view/image-resize-box.tsx
@@ -13,6 +13,7 @@ const clamp = (min: number, val: number, max: number): number => {
 interface IProps {
   height: number;
   config?: string;
+  onResizeStart: (w: number, height: number) => void;
   onResizeEnd: (w: number, height: number) => void;
   width: number;
   src: string;
@@ -22,10 +23,6 @@ interface IProps {
 
 interface IResizeProps extends IProps {
   direction: string;
-  height: number;
-  onResizeEnd: (w: number, height: number) => void;
-  src: string;
-  width: number;
 }
 
 const MIN_SIZE = 20;
@@ -115,6 +112,7 @@ class ImageResizeBoxControl extends React.PureComponent<IResizeProps, any> {
     this.resultHeight = this.height;
 
     this.bindEvent();
+    this.props.onResizeStart(this.resultWidth, this.resultHeight);
   }
 
   end(): void {
@@ -157,7 +155,7 @@ class ImageResizeBoxControl extends React.PureComponent<IResizeProps, any> {
 
 class ImageResizeBox extends React.PureComponent<IProps, any> {
   render() {
-    const { onResizeEnd, targetDOM } = this.props;
+    const { onResizeEnd, targetDOM, onResizeStart } = this.props;
     let { width, height } = this.props;
 
     let imgDOM: HTMLElement | null = null;
@@ -174,6 +172,7 @@ class ImageResizeBox extends React.PureComponent<IProps, any> {
         direction={key}
         height={height}
         key={key}
+        onResizeStart={onResizeStart}
         onResizeEnd={onResizeEnd}
         width={width}
       />
diff --git a/packages/access-react/src/reacts/image/view/mask.tsx b/packages/access-react/src/reacts/image/view/mask.tsx
index 95b0567..ac7e782 100644
--- a/packages/access-react/src/reacts/image/view/mask.tsx
+++ b/packages/access-react/src/reacts/image/view/mask.tsx
@@ -40,6 +40,7 @@ class ImageMask extends React.Component<IViewMapProps<ImageAttrs>, any> {
   private isInline = false;
   private imageMount = false;
   private inputting = false;
+  private isResizing = false;
 
   constructor(props: any) {
     super(props);
@@ -69,7 +70,7 @@ class ImageMask extends React.Component<IViewMapProps<ImageAttrs>, any> {
       this.updateImageUrl();
     }
 
-    if (this.props.isSelected !== prevProps.isSelected) {
+    if (!this.isResizing && this.props.isSelected !== prevProps.isSelected) {
       this.setState({ active: this.props.isSelected });
     }
   }
@@ -147,11 +148,16 @@ class ImageMask extends React.Component<IViewMapProps<ImageAttrs>, any> {
     }
   };
 
-  _onResizeEnd = (width: number, height: number): void =>
+  _onResizeStart = () => {
+    this.isResizing = true;
+  };
+  _onResizeEnd = (width: number, height: number): void => {
     this.dispatchUpdate({
       width,
       height,
     });
+    this.isResizing = false;
+  };
 
   _changeAlt: ChangeEventHandler<HTMLInputElement> = e => {
     this.setState({
@@ -181,6 +187,7 @@ class ImageMask extends React.Component<IViewMapProps<ImageAttrs>, any> {
         {editor.editable && !config.disableResize && active ? (
           <ImageResizeBox
             height={height}
+            onResizeStart={this._onResizeStart}
             onResizeEnd={this._onResizeEnd}
             editorDOM={editor.view.dom as HTMLElement}
             src={src}