feat(apollo-react): hijack canvas scroll events when sticky note has overflow

Author: david-rios-uipath

packages/apollo-react/src/canvas/components/StickyNoteNode/StickyNoteNode.tsx

@@ -34,6 +34,7 @@ import type { StickyNoteColor, StickyNoteData, TextSelection } from './StickyNot
 import { STICKY_NOTE_COLORS, withAlpha } from './StickyNoteNode.types';
 import { preserveNewlines } from './StickyNoteNode.utils';
 import { useMarkdownShortcuts } from './useMarkdownShortcuts';
+import { useScrollCapture } from './useScrollCapture';
 
 export interface StickyNoteNodeProps extends NodeProps {
   data: StickyNoteData;
@@ -58,6 +59,7 @@ const StickyNoteNodeComponent = ({
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
   const [localContent, setLocalContent] = useState(data.content || '');
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const { ref: markdownRef, scrollCaptureProps } = useScrollCapture();
   const colorButtonRef = useRef<HTMLDivElement>(null);
   const [activeFormats, setActiveFormats] = useState<ActiveFormats>({
     bold: false,
@@ -354,7 +356,7 @@ const StickyNoteNodeComponent = ({
               />
             </>
           ) : (
-            <StickyNoteMarkdown>
+            <StickyNoteMarkdown ref={markdownRef} {...scrollCaptureProps}>
               {localContent ? (
                 <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownComponents}>
                   {preserveNewlines(localContent)}

packages/apollo-react/src/canvas/components/StickyNoteNode/useScrollCapture.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const EVENT_START_POLL_INTERVAL = 150;
+
+/**
+ * Captures scroll (wheel) events on an overflowing element without hijacking
+ * an in-progress canvas zoom gesture.
+ *
+ * Returns a ref to attach to the scrollable element and props to spread onto it.
+ * Adds the `nowheel` class only when the pointer entered while no wheel gesture
+ * was active and the element has overflow.
+ */
+export function useScrollCapture<T extends HTMLElement = HTMLDivElement>() {
+  const ref = useRef<T>(null);
+  const [captureScroll, setCaptureScroll] = useState(false);
+  const wheelActiveRef = useRef(false);
+  const wheelTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+  // Track global wheel activity so we can distinguish "pointer entered while idle"
+  // from "pointer drifted over during a canvas zoom gesture".
+  useEffect(() => {
+    const onWheel = () => {
+      wheelActiveRef.current = true;
+      if (wheelTimeoutRef.current) clearTimeout(wheelTimeoutRef.current);
+      wheelTimeoutRef.current = setTimeout(() => {
+        wheelActiveRef.current = false;
+      }, EVENT_START_POLL_INTERVAL);
+    };
+    window.addEventListener('wheel', onWheel, { passive: true });
+    return () => window.removeEventListener('wheel', onWheel);
+  }, []);
+
+  const onMouseEnter = useCallback(() => {
+    if (wheelActiveRef.current) return;
+    const el = ref.current;
+    if (el && el.scrollHeight > el.clientHeight) {
+      setCaptureScroll(true);
+    }
+  }, []);
+
+  const onMouseLeave = useCallback(() => {
+    setCaptureScroll(false);
+  }, []);
+
+  return {
+    ref,
+    scrollCaptureProps: {
+      className: captureScroll ? 'nowheel' : undefined,
+      onMouseEnter,
+      onMouseLeave,
+    },
+  };
+}