Refactoring Viewer's Context Menu (#686)

Author: ciur

frontend/apps/ui/src/components/document/Contextmenu.tsx renamed to frontend/apps/ui/src/components/document/ContextMenu.tsx

@@ -0,0 +1 @@
+export default function ContextMenuContainer() {}

frontend/apps/ui/src/features/document/components/ContextMenu/ContextMenu.tsx

@@ -1,18 +1,17 @@
 import {useAppDispatch, useAppSelector} from "@/app/hooks"
 import {useCurrentDoc} from "@/features/document/hooks"
 import {Flex, Group, Loader} from "@mantine/core"
-import {useContext, useEffect} from "react"
+import {useContext} from "react"
 import {useNavigate} from "react-router-dom"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
 import PanelContext from "@/contexts/PanelContext"
 
 import useGeneratePreviews from "@/features/document/hooks/useGeneratePreviews"
-import {useRef, useState} from "react"
+import {useRef} from "react"
 
-import {HIDDEN} from "@/cconstants"
 import ActionButtons from "@/components/document/ActionButtons"
-import ContextMenu from "@/components/document/Contextmenu"
+import ContextMenu from "@/components/document/ContextMenu"
 import DocumentDetails from "@/components/document/DocumentDetails/DocumentDetails"
 import DocumentDetailsToggle from "@/components/document/DocumentDetailsToggle"
 import ThumbnailsToggle from "@/components/document/ThumbnailsToggle"
@@ -24,10 +23,10 @@ import {
   selectContentHeight,
   selectThumbnailsPanelOpen
 } from "@/features/ui/uiSlice"
-import type {Coord, NType, PanelMode} from "@/types"
-import {useDisclosure} from "@mantine/hooks"
+import type {NType, PanelMode} from "@/types"
 import {DOC_VER_PAGINATION_PAGE_BATCH_SIZE} from "../constants"
 
+import useContextMenu from "@/features/document/hooks/useContextMenu"
 import PagesHaveChangedDialog from "./PageHaveChangedDialog"
 import PageList from "./PageList"
 import ThumbnailList from "./ThumbnailList"
@@ -48,23 +47,16 @@ export default function Viewer() {
     pageSize: DOC_VER_PAGINATION_PAGE_BATCH_SIZE,
     imageSize: "md"
   })
-
-  const [contextMenuPosition, setContextMenuPosition] = useState<Coord>(HIDDEN)
-  const [opened, {open, close}] = useDisclosure()
+  const {
+    opened,
+    options: {close},
+    position
+  } = useContextMenu({ref})
 
   const thumbnailsIsOpen = useAppSelector(s =>
     selectThumbnailsPanelOpen(s, mode)
   )
 
-  const onContextMenu = (ev: MouseEvent) => {
-    ev.preventDefault() // prevents default context menu
-
-    let new_y = ev.clientY
-    let new_x = ev.clientX
-    setContextMenuPosition({y: new_y, x: new_x})
-    open()
-  }
-
   const onClick = (node: NType) => {
     if (mode == "secondary" && node.ctype == "folder") {
       dispatch(
@@ -82,19 +74,6 @@ export default function Viewer() {
     }
   }
 
-  useEffect(() => {
-    // detect right click outside
-    if (ref.current) {
-      ref.current.addEventListener("contextmenu", onContextMenu)
-    }
-
-    return () => {
-      if (ref.current) {
-        ref.current.removeEventListener("contextmenu", onContextMenu)
-      }
-    }
-  }, [])
-
   if (!doc) {
     return <Loader />
   }
@@ -108,13 +87,13 @@ export default function Viewer() {
   }
 
   return (
-    <div>
+    <div ref={ref}>
       <ActionButtons doc={doc} isFetching={false} isError={false} />
       <Group justify="space-between">
         <Breadcrumbs breadcrumb={doc?.breadcrumb} onClick={onClick} />
         <DocumentDetailsToggle />
       </Group>
-      <Flex ref={ref} className={classes.inner} style={{height: `${height}px`}}>
+      <Flex className={classes.inner} style={{height: `${height}px`}}>
         {thumbnailsIsOpen && <ThumbnailList />}
         <ThumbnailsToggle />
         <PageList />
@@ -129,7 +108,7 @@ export default function Viewer() {
           isFetching={false}
           isError={false}
           opened={opened}
-          position={contextMenuPosition}
+          position={position}
           onChange={onContextMenuChange}
         />
       </Flex>

frontend/apps/ui/src/features/document/components/ContextMenu/index.tsx

@@ -0,0 +1,84 @@
+import {HIDDEN} from "@/cconstants"
+import type {Coord} from "@/types"
+import {useDisclosure} from "@mantine/hooks"
+import {RefObject, useCallback, useEffect, useState} from "react"
+
+interface Args {
+  ref: RefObject<HTMLDivElement | null>
+}
+
+interface ReturnType {
+  opened: boolean
+  options: {
+    open: () => void
+    close: () => void
+  }
+  position: Coord
+}
+
+export default function useContextMenu({ref}: Args): ReturnType {
+  const [contextMenuPosition, setContextMenuPosition] = useState<Coord>(HIDDEN)
+  const [opened, {open, close}] = useDisclosure()
+
+  const onContextMenu = useCallback(
+    (ev: MouseEvent) => {
+      ev.preventDefault() // prevents default context menu
+
+      let new_y = ev.clientY
+      let new_x = ev.clientX
+      setContextMenuPosition({y: new_y, x: new_x})
+      open()
+    },
+    [open]
+  )
+  useEffect(() => {
+    /* ref.current may be null when the hook runs,
+     * so addEventListener won’t work unless we wait until the element
+     * appears in the DOM. This code uses a MutationObserver to detect when
+     * DOM nodes are added — and attaches the listener as soon
+     * as ref.current becomes available.
+     */
+    const observer = new MutationObserver(() => {
+      const el = ref.current
+      if (!el) return
+      el.addEventListener("contextmenu", onContextMenu)
+      observer.disconnect() // only once
+    })
+
+    if (ref.current) {
+      ref.current.addEventListener("contextmenu", onContextMenu)
+    } else {
+      // listen for entire document.body DOM changes
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      })
+    }
+
+    return () => {
+      const el = ref.current
+      if (el) {
+        el.removeEventListener("contextmenu", onContextMenu)
+      }
+      observer.disconnect()
+    }
+  }, [ref, onContextMenu])
+
+  useEffect(() => {
+    const handleClick = () => {
+      if (opened) {
+        close()
+        setContextMenuPosition(HIDDEN)
+      }
+    }
+
+    window.addEventListener("click", handleClick)
+    return () => window.removeEventListener("click", handleClick)
+  }, [opened, close])
+
+  return {
+    opened,
+    options: {open, close},
+    position: contextMenuPosition
+  }
+}

frontend/apps/ui/src/features/document/components/Viewer.tsx

@@ -32,6 +32,9 @@ export default function Navbar() {
         <NavLink to="/extract-pages-modal" end>
           &lt;ExtractPagesModal /&gt;
         </NavLink>
+        <NavLink to="/context-menu" end>
+          &lt;ContextMenu /&gt;
+        </NavLink>
       </Stack>
     </nav>
   )

frontend/apps/ui/src/features/document/hooks/useContextMenu.ts

@@ -4,6 +4,7 @@ import {createRoot} from "react-dom/client"
 import {BrowserRouter, Route, Routes} from "react-router"
 import AppShell from "./app/AppShell"
 import "./index.css"
+import ContextMenuPage from "./pages/ContextMenu"
 import DownloadButton from "./pages/DownloadButton"
 import ExtractPagesModalPage from "./pages/ExtractPagesModal"
 import OnePage from "./pages/OnePage"
@@ -38,6 +39,7 @@ createRoot(document.getElementById("root")!).render(
               path="extract-pages-modal"
               element={<ExtractPagesModalPage />}
             />
+            <Route path="context-menu" element={<ContextMenuPage />} />
           </Route>
         </Routes>
       </BrowserRouter>