feat(apollo-react): add remark-breaks to sticky note markdown rendering, scroll improvements (3/3) [MST-7636]

packages/apollo-react/package.json

@@ -212,6 +212,7 @@
     "react-syntax-highlighter": "^16.1.0",
     "react-window": "^2.2.1",
     "rehype-katex": "^7.0.1",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "reselect": "^5.1.1",

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

@@ -5,6 +5,7 @@ import { NodeResizeControl, useReactFlow } from '@uipath/apollo-react/canvas/xyf
 import { AnimatePresence } from 'motion/react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import { GRID_SPACING } from '../../constants';
 import type { ToolbarAction } from '../Toolbar';
@@ -33,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;
@@ -57,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,
@@ -353,16 +356,16 @@ const StickyNoteNodeComponent = ({
               />
             </>
           ) : (
-            <StickyNoteMarkdown>
+            <StickyNoteMarkdown ref={markdownRef} {...scrollCaptureProps}>
               {localContent ? (
-                <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownComponents}>
                   {preserveNewlines(localContent)}
                 </ReactMarkdown>
               ) : (
                 // Render placeholder if renderPlaceholderOnSelect is enabled, node is selected, and the content is empty
                 renderPlaceholderOnSelect &&
                 selected && (
-                  <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                  <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownComponents}>
                     {placeholder}
                   </ReactMarkdown>
                 )

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,
+    },
+  };
+}