diff --git a/package-lock.json b/package-lock.json index d6ae0115..14d07fae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "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", @@ -4664,6 +4665,11 @@ "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", @@ -10335,6 +10341,11 @@ "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", diff --git a/package.json b/package.json index b0807da3..460f02d3 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "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", diff --git a/src/components/status.jsx b/src/components/status.jsx index 04645030..85312b8c 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -7,6 +7,7 @@ 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'; @@ -511,6 +512,20 @@ function Status({ x: 0, y: 0, }); + useEffect(() => { + function openContextMenu(e) { + e.preventDefault(); + setContextMenuAnchorPoint({ + x: e.clientX, + y: e.clientY, + }); + setIsContextMenuOpen(true); + } + statusRef.current?.addEventListener?.('long-press', openContextMenu); + return () => { + statusRef.current?.removeEventListener?.('long-press', openContextMenu); + }; + }, []); return (