Editor has incorrect scrolling behavior - unable to fix.

[burtonator]

Describe the bug

There's an issue with the editor that I'm like 99% certain that we can't fix without having us ship a native app.

The videos highlight the problem but also I attached the code showing how I attempted to swallow the mouse events to block scrolling.

https://drive.google.com/file/d/1k3QxdAwaJtviM9IbxrnBrLg3xk_d6dx7/view?usp=sharing,

https://drive.google.com/file/d/1xv5Eb6kxCSeI0acW87d1Z4uxIX9SSMZ7/view?usp=sharing

import React, { useCallback, useRef } from 'react';

export const FakeEditor = () => {
  const focusRef = useRef(false);

  const handleMouseEvent = useCallback(
    (event: React.MouseEvent | React.UIEvent) => {
      if (!focusRef.current) {
        return false;
      }
      event.preventDefault();
      event.stopPropagation();
    },
    [],
  );

  const handleFocus = useCallback(() => {
    focusRef.current = true;
  }, []);

  return (
    <div
      onMouseUp={handleMouseEvent}
      onMouseDown={handleMouseEvent}
      onPointerUp={handleMouseEvent}
      onPointerDown={handleMouseEvent}
      onMouseUpCapture={handleMouseEvent}
      onMouseDownCapture={handleMouseEvent}
      onPointerUpCapture={handleMouseEvent}
      onPointerDownCapture={handleMouseEvent}
      onWheel={handleMouseEvent}
      onWheelCapture={handleMouseEvent}
      onScroll={handleMouseEvent}
      onScrollCapture={handleMouseEvent}
    >
      <div
        onFocus={handleFocus}
        contentEditable={true}
        autoFocus={true}
        style={{
          backgroundColor: 'lightblue',
          height: '200px',
          width: '100vw',
        }}
      >
        Hello World
      </div>
      <div
        style={{
          padding: '5px',
          backgroundColor: 'lightpink',
          height: '75px',
          pointerEvents: 'none',
        }}
      >
        fake toolbar
      </div>
    </div>
  );
};

Initial conditions

Environment:

Branch/Release version:

Browser:

Wallet:

Reproduction steps

Actual behavior

Expected behavior

Screenshots / Video

Reporter

Additional context

[dillchen]

responded in slack, lmk what you think