feat: Super formatting toolbar on mobile now shows whether an option is active in the selection, and also shows hints when an option is long-pressed (#2432)

packages/web/src/javascripts/Hooks/useContextMenuEvent.tsx

@@ -3,7 +3,7 @@ import { useLongPressEvent } from './useLongPress'
 import { isIOS } from '@standardnotes/ui-services'
 
 export const useContextMenuEvent = (elementRef: RefObject<HTMLElement>, listener: (x: number, y: number) => void) => {
-  const { attachEvents, cleanupEvents } = useLongPressEvent(elementRef, listener)
+  const { attachEvents, cleanupEvents } = useLongPressEvent(elementRef, listener, true)
 
   const handleContextMenuEvent = useCallback(
     (event: MouseEvent) => {

packages/web/src/javascripts/Hooks/useLongPress.tsx

@@ -6,9 +6,11 @@ const ReactNativeLongpressDelay = 370
 export const useLongPressEvent = (
   elementRef: RefObject<HTMLElement>,
   listener: (x: number, y: number) => void,
+  clearOnPointerMove = false,
   delay = ReactNativeLongpressDelay,
 ) => {
   const longPressTimeout = useRef<number>()
+  const pointerPosition = useRef<{ x: number; y: number }>()
 
   const clearLongPressTimeout = useCallback(() => {
     if (longPressTimeout.current) {
@@ -19,14 +21,36 @@ export const useLongPressEvent = (
   const createLongPressTimeout = useCallback(
     (event: PointerEvent) => {
       clearLongPressTimeout()
+      pointerPosition.current = { x: event.clientX, y: event.clientY }
       longPressTimeout.current = window.setTimeout(() => {
+        elementRef.current?.addEventListener(
+          'mousedown',
+          (event) => {
+            event.preventDefault()
+            event.stopPropagation()
+          },
+          { once: true, capture: true },
+        )
+
         const x = event.clientX
         const y = event.clientY
 
         listener(x, y)
       }, delay)
     },
-    [clearLongPressTimeout, delay, listener],
+    [clearLongPressTimeout, delay, elementRef, listener],
+  )
+
+  const clearLongPressTimeoutIfMoved = useCallback(
+    (event: PointerEvent) => {
+      if (
+        pointerPosition.current &&
+        (event.clientX !== pointerPosition.current.x || event.clientY !== pointerPosition.current.y)
+      ) {
+        clearLongPressTimeout()
+      }
+    },
+    [clearLongPressTimeout],
   )
 
   const attachEvents = useCallback(() => {
@@ -35,10 +59,12 @@ export const useLongPressEvent = (
     }
 
     elementRef.current.addEventListener('pointerdown', createLongPressTimeout)
-    elementRef.current.addEventListener('pointermove', clearLongPressTimeout)
+    if (clearOnPointerMove) {
+      elementRef.current.addEventListener('pointermove', clearLongPressTimeoutIfMoved)
+    }
     elementRef.current.addEventListener('pointercancel', clearLongPressTimeout)
     elementRef.current.addEventListener('pointerup', clearLongPressTimeout)
-  }, [clearLongPressTimeout, createLongPressTimeout, elementRef])
+  }, [clearLongPressTimeout, clearLongPressTimeoutIfMoved, clearOnPointerMove, createLongPressTimeout, elementRef])
 
   const cleanupEvents = useCallback(() => {
     if (!elementRef.current) {
@@ -46,10 +72,12 @@ export const useLongPressEvent = (
     }
 
     elementRef.current.removeEventListener('pointerdown', createLongPressTimeout)
-    elementRef.current.removeEventListener('pointermove', clearLongPressTimeout)
+    if (clearOnPointerMove) {
+      elementRef.current.removeEventListener('pointermove', clearLongPressTimeoutIfMoved)
+    }
     elementRef.current.removeEventListener('pointercancel', clearLongPressTimeout)
     elementRef.current.removeEventListener('pointerup', clearLongPressTimeout)
-  }, [clearLongPressTimeout, createLongPressTimeout, elementRef])
+  }, [clearLongPressTimeout, clearLongPressTimeoutIfMoved, clearOnPointerMove, createLongPressTimeout, elementRef])
 
   const memoizedReturn = useMemo(
     () => ({