Use use-long-press instead

package-lock.json

@@ -18,7 +18,6 @@
         "fast-deep-equal": "~3.1.3",
         "idb-keyval": "~6.2.0",
         "just-debounce-it": "~3.2.0",
-        "long-press-event": "~2.4.6",
         "masto": "~5.10.0",
         "mem": "~9.0.2",
         "p-retry": "~5.1.2",
@@ -32,6 +31,7 @@
         "toastify-js": "~1.12.0",
         "uid": "~2.0.1",
         "use-debounce": "~9.0.3",
+        "use-long-press": "~2.0.3",
         "use-resize-observer": "~9.1.0",
         "valtio": "1.9.0"
       },
@@ -4665,11 +4665,6 @@
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
       "dev": true
     },
-    "node_modules/long-press-event": {
-      "version": "2.4.6",
-      "resolved": "https://registry.npmjs.org/long-press-event/-/long-press-event-2.4.6.tgz",
-      "integrity": "sha512-59zL3M+uD7Q2DTuxJ2UkbVV3+0D9PrcI7zgem1AXRinH6g8mb7iN9vOKCqiVriW15S4L9OmKOr/d8q9qAaeCGQ=="
-    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -6570,6 +6565,18 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/use-long-press": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-2.0.3.tgz",
+      "integrity": "sha512-n3cfv90Y1ldNt+hhXzxnxuLZmgLOOC/+qfLGoeEBgOxmnokPPt39MPF3KmvKriq5VMoJ7uQdVjHejCdHBt9anw==",
+      "engines": {
+        "node": ">=10",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/use-resize-observer": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
@@ -10341,11 +10348,6 @@
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
       "dev": true
     },
-    "long-press-event": {
-      "version": "2.4.6",
-      "resolved": "https://registry.npmjs.org/long-press-event/-/long-press-event-2.4.6.tgz",
-      "integrity": "sha512-59zL3M+uD7Q2DTuxJ2UkbVV3+0D9PrcI7zgem1AXRinH6g8mb7iN9vOKCqiVriW15S4L9OmKOr/d8q9qAaeCGQ=="
-    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -11620,6 +11622,12 @@
       "integrity": "sha512-FhtlbDtDXILJV7Lix5OZj5yX/fW1tzq+VrvK1fnT2bUrPOGruU9Rw8NCEn+UI9wopfERBEZAOQ8lfeCJPllgnw==",
       "requires": {}
     },
+    "use-long-press": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-2.0.3.tgz",
+      "integrity": "sha512-n3cfv90Y1ldNt+hhXzxnxuLZmgLOOC/+qfLGoeEBgOxmnokPPt39MPF3KmvKriq5VMoJ7uQdVjHejCdHBt9anw==",
+      "requires": {}
+    },
     "use-resize-observer": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",

package.json

@@ -20,7 +20,6 @@
     "fast-deep-equal": "~3.1.3",
     "idb-keyval": "~6.2.0",
     "just-debounce-it": "~3.2.0",
-    "long-press-event": "~2.4.6",
     "masto": "~5.10.0",
     "mem": "~9.0.2",
     "p-retry": "~5.1.2",
@@ -34,6 +33,7 @@
     "toastify-js": "~1.12.0",
     "uid": "~2.0.1",
     "use-debounce": "~9.0.3",
+    "use-long-press": "~2.0.3",
     "use-resize-observer": "~9.1.0",
     "valtio": "1.9.0"
   },

src/app.css

@@ -537,6 +537,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   transition: background-color 0.2s ease-out;
   -webkit-tap-highlight-color: transparent;
   animation: appear 0.2s ease-out;
+  -webkit-touch-callout: none;
 }
 :is(.status-link, .status-focus):is(:focus, .is-active) {
   background-color: var(--link-bg-hover-color);
@@ -1051,6 +1052,11 @@ body:has(.status-deck) .media-post-link {
 
 /* MENU POPUP */
 
+.szh-menu-container {
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+}
 .szh-menu-container:has(.szh-menu--state-open) {
   inset: 0;
   inset: env(safe-area-inset-top) env(safe-area-inset-right)

src/components/status.jsx

@@ -7,12 +7,12 @@ import {
   MenuHeader,
   MenuItem,
 } from '@szhsin/react-menu';
-import 'long-press-event';
 import mem from 'mem';
 import pThrottle from 'p-throttle';
 import { memo } from 'preact/compat';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import 'swiped-events';
+import { useLongPress } from 'use-long-press';
 import useResizeObserver from 'use-resize-observer';
 import { useSnapshot } from 'valtio';
 
@@ -507,25 +507,27 @@ function Status({
     </>
   );
 
+  const contextMenuRef = useRef();
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
   const [contextMenuAnchorPoint, setContextMenuAnchorPoint] = useState({
     x: 0,
     y: 0,
   });
-  useEffect(() => {
-    function openContextMenu(e) {
-      e.preventDefault();
+  const bindLongPress = useLongPress(
+    (e) => {
+      const { clientX, clientY } = e.touches?.[0] || e;
       setContextMenuAnchorPoint({
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
       });
       setIsContextMenuOpen(true);
-    }
-    statusRef.current?.addEventListener?.('long-press', openContextMenu);
-    return () => {
-      statusRef.current?.removeEventListener?.('long-press', openContextMenu);
-    };
-  }, []);
+    },
+    {
+      captureEvent: true,
+      detect: 'touch',
+      cancelOnMovement: true,
+    },
+  );
 
   return (
     <article
@@ -551,9 +553,11 @@ function Status({
         });
         setIsContextMenuOpen(true);
       }}
+      {...bindLongPress()}
     >
       {size !== 'l' && (
         <ControlledMenu
+          ref={contextMenuRef}
           state={isContextMenuOpen ? 'open' : undefined}
           anchorPoint={contextMenuAnchorPoint}
           direction="right"
@@ -566,6 +570,9 @@ function Status({
               // Higher than the backdrop
               zIndex: 1001,
             },
+            onClick: () => {
+              contextMenuRef.current?.closeMenu?.();
+            },
           }}
           overflow="auto"
           boundingBoxPadding="8 8 8 8"