Added possibility to trigger context menu on mobile devices.

CHANGELOG.md

@@ -36,7 +36,7 @@ the labels did not update correctly and were not removed correctly
 - New snips notification not disappearing from the not seen list once they are placed see [#100](https://gitlab.gwdg.de/irp/snip/-/issues/100)
 - Sidebar not clickable in fullscreen on some mobile devices. Added safe area padding to the sidebar to avoid this issue.
 - Reconnection issue on stale pages to websocket server see [#89](https://gitlab.gwdg.de/irp/snip/-/issues/89)
-
+- Allow contextMenu click on mobile devices by holding the touch event for a longer time
 
 ## [1.9.0]
 

apps/fullstack/app/debug/playground/inputs/contextMenu.tsx

+import useMobileSafeContextMenu from "lib/hooks/useMobileSafeContextMenu";
+
+import { Wrapper } from "./utils";
+
+export const ContextMenu = () => {
+    const eleProps = useMobileSafeContextMenu(() => {
+        alert("context menu");
+    });
+    return (
+        <Wrapper>
+            <h3>ContextMenu</h3>
+            <div
+                {...eleProps}
+                style={{
+                    width: "100px",
+                    height: "100px",
+                    backgroundColor: "red",
+                }}
+            >
+                Right click me or long press me on mobile
+            </div>
+        </Wrapper>
+    );
+};

apps/fullstack/app/debug/playground/inputs/page.tsx

@@ -3,6 +3,7 @@
 import React, { useState } from "react";
 
 import ColorInputs from "./color";
+import { ContextMenu } from "./contextMenu";
 import NumberInputs from "./number";
 import OptionInputs from "./options";
 import TextInputs from "./text";
@@ -266,6 +267,7 @@ const Page = () => {
                     showValid={state.showValid}
                     showInvalid={state.showInvalid}
                 />
+                <ContextMenu />
             </div>
         </div>
     );

apps/fullstack/components/editor/sidebar/previews/previewSnips.tsx

@@ -82,6 +82,7 @@ export function PreviewSnips({
     );
 }
 
+import useMobileSafeContextMenu from "lib/hooks/useMobileSafeContextMenu";
 import {
     TbLink,
     TbLinkOff,
@@ -131,7 +132,7 @@ function PreviewSingleSnip({
 }) {
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
-    // Prevernts hydration mismatch
+    // Prevents hydration mismatch
     const [info, setInfo] = useState<Info>({
         width: 0,
         height: 0,
@@ -139,8 +140,14 @@ function PreviewSingleSnip({
         id: -1,
     });
 
+    // Context menu
     const [showContext, setShowContext] = useState(false);
 
+    const contextMenuProps = useMobileSafeContextMenu((e) => {
+        e.preventDefault();
+        setShowContext((p) => !p);
+    });
+
     //Render snip
     useEffect(() => {
         const ctx = canvasRef.current!.getContext("2d")!;
@@ -208,17 +215,12 @@ function PreviewSingleSnip({
                 className={styles.snip}
                 data-active={active}
                 data-hidden={hidden}
-                onContextMenu={(e) => {
-                    e.preventDefault();
-                    setShowContext((p) => !p);
-                    // Handle outside click
-                    //document.addEventListener("click", outsideClickListener);
-                }}
                 onPointerMove={() => {
                     if (newBadge) {
                         resetNewBadge?.();
                     }
                 }}
+                {...contextMenuProps}
             >
                 <FlipCard
                     flipped={showContext}

apps/fullstack/lib/hooks/useMobileSafeContextMenu.ts

+import { UIEvent, useRef } from "react";
+
+/**
+ * A custom hook to handle context menu events in a mobile-friendly way.
+ * It triggers a custom context menu callback after a long press on touch devices
+ * or a right-click on desktop devices.
+ *
+ * @param onContextMenu - The callback function to execute when the context menu is triggered.
+ * @param duration - The duration (in milliseconds) to wait before triggering the context menu on touch devices. Default is 500ms.
+ * @returns An object containing event handlers to be spread onto the target element.
+ *
+ * @example
+ * const elemProps = useMobileSafeContextMenu((event) => {
+ *   console.log("Context menu triggered", event);
+ * });
+ *
+ * return (
+ *   <div
+ *     {...elemProps}
+ *   >
+ *     Right-click or long-press me
+ *   </div>
+ * );
+ */
+const useMobileSafeContextMenu = (
+    onContextMenu: (event: UIEvent) => void,
+    duration = 500,
+) => {
+    const pressTimer = useRef<number | null>(null);
+
+    const start = (event: UIEvent) => {
+        pressTimer.current = window.setTimeout(() => {
+            onContextMenu(event); // Trigger the context menu callback
+        }, duration);
+    };
+
+    const stop = () => {
+        if (pressTimer.current !== null) {
+            window.clearTimeout(pressTimer.current);
+        }
+    };
+
+    return {
+        onTouchStart: start,
+        onTouchEnd: stop,
+        onTouchCancel: stop,
+        onContextMenu: (event: UIEvent) => {
+            event.preventDefault(); // Prevent default context menu
+            onContextMenu(event);
+        },
+    };
+};
+
+export default useMobileSafeContextMenu;