Bug: Height resets to default value after first drag resize

[dmitriyyan]

Description: After the first height change with drag resize, if you try to change the height again, the height is reset to the default value specified in the props

Steps to reproduce:

1. open https://uiwjs.github.io/react-md-editor/
2. resize any Editor on a page
3. try to resize it again

Expected behavior:
Height should change relative to the previous change

Actual behavior:
Height resets to default value

Markdown.Editor.for.React.mp4

Bug reason:
The bug occurs because the handleMouseDown function in the DragBar component references the props.height value. However, this value is outdated after the component's height has changed.

  function handleMouseDown(event: Event) {
    event.preventDefault();
    const clientY =
      (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;
    dragRef.current = {
      // this value will never update because of useEffect has no deps
      height: props.height,
      dragY: clientY,
    };
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
    $dom.current?.addEventListener('touchmove', handleMouseMove, { passive: false });
    $dom.current?.addEventListener('touchend', handleMouseUp, { passive: false });
  }

 // this effect will run only once after component did mount, because array deps is empty
  useEffect(() => {
    if (document) {
      $dom.current?.addEventListener('touchstart', handleMouseDown, { passive: false });
      $dom.current?.addEventListener('mousedown', handleMouseDown);
    }
    return () => {
      if (document) {
        $dom.current?.removeEventListener('touchstart', handleMouseDown);
        document.removeEventListener('mousemove', handleMouseMove);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

Solution:

  const heightRef = useRef(props.height);

  // this will update heightRef everytime when height updates
  useEffect(() => {
    if (heightRef.current !== props.height) {
      heightRef.current = props.height;
    }
  }, [props.height]);

  function handleMouseDown(event: Event) {
    event.preventDefault();
    const clientY =
      (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;
    dragRef.current = {
     // so function ref is always up to date
      height: heightRef.current,
      dragY: clientY,
    };
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
    $dom.current?.addEventListener('touchmove', handleMouseMove, { passive: false });
    $dom.current?.addEventListener('touchend', handleMouseUp, { passive: false });
  }

[dmitriyyan]

I created PR #502

Please, check it out as you can because this bug is very annoying 😟

[jaywcjlove]

@dmitriyyan Upgrade v3.20.7

[dmitriyyan]

@jaywcjlove Thanks a lot!