diff --git a/package-lock.json b/package-lock.json index 22d02159..34718761 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 2ee389b7..c9feed13 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 79b8d1e3..70224e2a 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -1,6 +1,12 @@ import './status.css'; -import { Menu, MenuDivider, MenuHeader, MenuItem } from '@szhsin/react-menu'; +import { + ControlledMenu, + Menu, + MenuDivider, + MenuHeader, + MenuItem, +} from '@szhsin/react-menu'; import mem from 'mem'; import pThrottle from 'p-throttle'; import { memo } from 'preact/compat'; @@ -479,6 +485,26 @@ function Status({ ); + const [isContextMenuOpen, setIsContextMenuOpen] = useState(false); + const [contextMenuAnchorPoint, setContextMenuAnchorPoint] = useState({ + 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 (
{ + if (e.metaKey) return; + e.preventDefault(); + setContextMenuAnchorPoint({ + x: e.clientX, + y: e.clientY, + }); + setIsContextMenuOpen(true); + }} > + setIsContextMenuOpen(false)} + portal={{ + target: document.body, + }} + overflow="auto" + boundingBoxPadding="8 8 8 8" + unmountOnClose + > + {StatusMenuItems} + {size !== 'l' && (
{reblogged && }