From 7f8ddf53b32f0db5311bfd6230b231b9b3f42aed Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Tue, 12 Dec 2023 14:14:51 +0100
Subject: [PATCH] little cleanup: useEventListener hook (#2749)

---
 frontend/common/useDialog.js                  | 12 +--
 frontend/common/useEventListener.js           | 10 +++
 frontend/components/BottomRightPanel.js       | 14 ++--
 frontend/components/Cell.js                   | 55 ++++++-------
 .../components/CellInput/tab_help_plugin.js   |  2 -
 frontend/components/ExportBanner.js           | 27 ++++---
 frontend/components/FrontmatterInput.js       | 62 ++++++--------
 .../HijackExternalLinksToOpenInNewTab.js      | 18 +++--
 frontend/components/NonCellOutput.js          | 14 ++--
 frontend/components/PasteHandler.js           | 17 ++--
 frontend/components/Popup.js                  | 81 +++++++++----------
 frontend/components/Scroller.js               | 17 ++--
 frontend/components/UndoDelete.js             |  2 +-
 13 files changed, 161 insertions(+), 170 deletions(-)
 create mode 100644 frontend/common/useEventListener.js

diff --git a/frontend/common/useDialog.js b/frontend/common/useDialog.js
index 3c03f5fb70..9a81064704 100644
--- a/frontend/common/useDialog.js
+++ b/frontend/common/useDialog.js
@@ -1,7 +1,7 @@
 //@ts-ignore
 import dialogPolyfill from "https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.esm.min.js"
 
-import { useEffect, useLayoutEffect, useRef } from "../imports/Preact.js"
+import { useLayoutEffect, useMemo, useRef } from "../imports/Preact.js"
 
 /**
  * @returns {[import("../imports/Preact.js").Ref<HTMLDialogElement?>, () => void, () => void, () => void]}
@@ -13,9 +13,11 @@ export const useDialog = () => {
         if (dialog_ref.current != null) dialogPolyfill.registerDialog(dialog_ref.current)
     }, [dialog_ref.current])
 
-    const open = () => dialog_ref.current?.showModal()
-    const close = () => dialog_ref.current?.close()
-    const toggle = () => (dialog_ref.current?.open === true ? dialog_ref.current?.close() : dialog_ref.current?.showModal())
+    return useMemo(() => {
+        const open = () => dialog_ref.current?.showModal()
+        const close = () => dialog_ref.current?.close()
+        const toggle = () => (dialog_ref.current?.open === true ? dialog_ref.current?.close() : dialog_ref.current?.showModal())
 
-    return [dialog_ref, open, close, toggle]
+        return [dialog_ref, open, close, toggle]
+    }, [dialog_ref])
 }
diff --git a/frontend/common/useEventListener.js b/frontend/common/useEventListener.js
new file mode 100644
index 0000000000..1fcb44514a
--- /dev/null
+++ b/frontend/common/useEventListener.js
@@ -0,0 +1,10 @@
+import { useCallback, useEffect } from "../imports/Preact.js"
+
+export const useEventListener = (element, event_name, handler, deps) => {
+    let handler_cached = useCallback(handler, deps)
+    useEffect(() => {
+        if (element == null) return
+        element.addEventListener(event_name, handler_cached)
+        return () => element.removeEventListener(event_name, handler_cached)
+    }, [element, event_name, handler_cached])
+}
diff --git a/frontend/components/BottomRightPanel.js b/frontend/components/BottomRightPanel.js
index f7ade801c4..df7c8b2a2c 100644
--- a/frontend/components/BottomRightPanel.js
+++ b/frontend/components/BottomRightPanel.js
@@ -5,6 +5,7 @@ import { LiveDocsTab } from "./LiveDocsTab.js"
 import { is_finished, ProcessTab, total_done, total_tasks, useStatusItem } from "./ProcessTab.js"
 import { useMyClockIsAheadBy } from "../common/clock sync.js"
 import { BackendLaunchPhase } from "../common/Binder.js"
+import { useEventListener } from "../common/useEventListener.js"
 
 /**
  * @typedef PanelTabName
@@ -40,8 +41,10 @@ export let BottomRightPanel = ({
     const hidden = open_tab == null
 
     // Open panel when "open_bottom_right_panel" event is triggered
-    useEffect(() => {
-        let handler = (/** @type {CustomEvent} */ e) => {
+    useEventListener(
+        window,
+        "open_bottom_right_panel",
+        (/** @type {CustomEvent} */ e) => {
             console.log(e.detail)
             // https://github.com/fonsp/Pluto.jl/issues/321
             focus_docs_on_open_ref.current = false
@@ -49,10 +52,9 @@ export let BottomRightPanel = ({
             if (window.getComputedStyle(container_ref.current).display === "none") {
                 alert("This browser window is too small to show docs.\n\nMake the window bigger, or try zooming out.")
             }
-        }
-        window.addEventListener("open_bottom_right_panel", handler)
-        return () => window.removeEventListener("open_bottom_right_panel", handler)
-    }, [])
+        },
+        [set_open_tab]
+    )
 
     const status = useWithBackendStatus(notebook, backend_launch_phase)
 
diff --git a/frontend/components/Cell.js b/frontend/components/Cell.js
index a6e90612ff..81afa26d80 100644
--- a/frontend/components/Cell.js
+++ b/frontend/components/Cell.js
@@ -9,6 +9,7 @@ import { cl } from "../common/ClassTable.js"
 import { PlutoActionsContext } from "../common/PlutoContext.js"
 import { open_pluto_popup } from "../common/open_pluto_popup.js"
 import { SafePreviewOutput } from "./SafePreviewUI.js"
+import { useEventListener } from "../common/useEventListener.js"
 
 const useCellApi = (node_ref, published_object_keys, pluto_actions) => {
     const [cell_api_ready, set_cell_api_ready] = useState(false)
@@ -145,30 +146,34 @@ export const Cell = ({
     const [cm_highlighted_line, set_cm_highlighted_line] = useState(null)
     const [cm_diagnostics, set_cm_diagnostics] = useState([])
 
-    useEffect(() => {
-        const diagnosticListener = (e) => {
+    useEventListener(
+        window,
+        "cell_diagnostics",
+        (e) => {
             if (e.detail.cell_id === cell_id) {
                 set_cm_diagnostics(e.detail.diagnostics)
             }
-        }
-        window.addEventListener("cell_diagnostics", diagnosticListener)
-        return () => window.removeEventListener("cell_diagnostics", diagnosticListener)
-    }, [cell_id])
+        },
+        [cell_id, set_cm_diagnostics]
+    )
 
-    useEffect(() => {
-        const highlightRangeListener = (e) => {
+    useEventListener(
+        window,
+        "cell_highlight_range",
+        (e) => {
             if (e.detail.cell_id == cell_id && e.detail.from != null && e.detail.to != null) {
                 set_cm_highlighted_range({ from: e.detail.from, to: e.detail.to })
             } else {
                 set_cm_highlighted_range(null)
             }
-        }
-        window.addEventListener("cell_highlight_range", highlightRangeListener)
-        return () => window.removeEventListener("cell_highlight_range", highlightRangeListener)
-    }, [cell_id])
+        },
+        [cell_id]
+    )
 
-    useEffect(() => {
-        const focusListener = (e) => {
+    useEventListener(
+        window,
+        "cell_focus",
+        useCallback((e) => {
             if (e.detail.cell_id === cell_id) {
                 if (e.detail.line != null) {
                     const ch = e.detail.ch
@@ -187,13 +192,8 @@ export const Cell = ({
                     }
                 }
             }
-        }
-        window.addEventListener("cell_focus", focusListener)
-        // cleanup
-        return () => {
-            window.removeEventListener("cell_focus", focusListener)
-        }
-    }, [])
+        }, [])
+    )
 
     // When you click to run a cell, we use `waiting_to_run` to immediately set the cell's traffic light to 'queued', while waiting for the backend to catch up.
     const [waiting_to_run, set_waiting_to_run] = useState(false)
@@ -219,13 +219,14 @@ export const Cell = ({
     disable_input_ref.current = disable_input
     const should_set_waiting_to_run_ref = useRef(true)
     should_set_waiting_to_run_ref.current = !running_disabled && !depends_on_disabled_cells
-    useEffect(() => {
-        const handler = (e) => {
+    useEventListener(
+        window,
+        "set_waiting_to_run_smart",
+        (e) => {
             if (e.detail.cell_ids.includes(cell_id)) set_waiting_to_run(should_set_waiting_to_run_ref.current)
-        }
-        window.addEventListener("set_waiting_to_run_smart", handler)
-        return () => window.removeEventListener("set_waiting_to_run_smart", handler)
-    }, [cell_id])
+        },
+        [cell_id, set_waiting_to_run]
+    )
 
     const cell_api_ready = useCellApi(node_ref, published_object_keys, pluto_actions)
     const on_delete = useCallback(() => {
diff --git a/frontend/components/CellInput/tab_help_plugin.js b/frontend/components/CellInput/tab_help_plugin.js
index 0e35d264cd..228088a6c9 100644
--- a/frontend/components/CellInput/tab_help_plugin.js
+++ b/frontend/components/CellInput/tab_help_plugin.js
@@ -56,10 +56,8 @@ export const tab_help_plugin = ViewPlugin.define(
                 this.setready(false)
             },
             keydown: function (event, view) {
-                console.error(event.key, view.state.field(TabHelp), view.state.field(LastFocusWasForced))
                 if (event.key == "Tab") {
                     if (view.state.field(TabHelp) && !view.state.field(LastFocusWasForced) && !view.state.readOnly) {
-                        console.log(123)
                         open_pluto_popup({
                             type: "info",
                             source_element: view.dom,
diff --git a/frontend/components/ExportBanner.js b/frontend/components/ExportBanner.js
index 043b9afeef..959f659262 100644
--- a/frontend/components/ExportBanner.js
+++ b/frontend/components/ExportBanner.js
@@ -1,3 +1,4 @@
+import { useEventListener } from "../common/useEventListener.js"
 import { html, useEffect, useRef } from "../imports/Preact.js"
 
 const Circle = ({ fill }) => html`
@@ -57,22 +58,24 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook
 
     //
     let print_old_title_ref = useRef("")
-    useEffect(() => {
-        let a = () => {
+    useEventListener(
+        window,
+        "beforeprint",
+        () => {
             console.log("beforeprint")
             print_old_title_ref.current = document.title
             document.title = print_title.replace(/\.jl$/, "").replace(/\.plutojl$/, "")
-        }
-        let b = () => {
+        },
+        [print_title]
+    )
+    useEventListener(
+        window,
+        "afterprint",
+        () => {
             document.title = print_old_title_ref.current
-        }
-        window.addEventListener("beforeprint", a)
-        window.addEventListener("afterprint", b)
-        return () => {
-            window.removeEventListener("beforeprint", a)
-            window.removeEventListener("afterprint", b)
-        }
-    }, [print_title])
+        },
+        [print_title]
+    )
 
     return html`
         <aside id="export" inert=${!open}>
diff --git a/frontend/components/FrontmatterInput.js b/frontend/components/FrontmatterInput.js
index 26ce5dabd6..ee792cb2ac 100644
--- a/frontend/components/FrontmatterInput.js
+++ b/frontend/components/FrontmatterInput.js
@@ -1,14 +1,14 @@
-import { html, Component, useRef, useLayoutEffect, useState, useEffect } from "../imports/Preact.js"
+import { html, useRef, useLayoutEffect, useState, useEffect, useCallback } from "../imports/Preact.js"
 import { has_ctrl_or_cmd_pressed } from "../common/KeyboardShortcuts.js"
 import _ from "../imports/lodash.js"
 
 import "https://cdn.jsdelivr.net/gh/fonsp/rebel-tag-input@1.0.6/lib/rebel-tag-input.mjs"
 
 //@ts-ignore
-import dialogPolyfill from "https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.esm.min.js"
 import immer from "../imports/immer.js"
 import { useDialog } from "../common/useDialog.js"
 import { FeaturedCard } from "./welcome/FeaturedCard.js"
+import { useEventListener } from "../common/useEventListener.js"
 
 /**
  * @param {{
@@ -24,10 +24,6 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
         set_frontmatter(remote_frontmatter ?? {})
     }, [remote_frontmatter])
 
-    // useEffect(() => {
-    //     console.log("New frontmatter:", frontmatter)
-    // }, [frontmatter])
-
     const fm_setter = (key) => (value) =>
         set_frontmatter(
             immer((fm) => {
@@ -41,43 +37,23 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
         set_frontmatter(remote_frontmatter ?? {})
         close()
     }
-    const submit = () => {
+    const submit = useCallback(() => {
         set_remote_frontmatter(clean_data(frontmatter) ?? {}).then(() =>
             alert("Frontmatter synchronized ✔\n\nThese parameters will be used in future exports.")
         )
         close()
-    }
-
-    const clean_data = (obj) => {
-        let a = _.isPlainObject(obj)
-            ? Object.fromEntries(
-                  Object.entries(obj)
-                      .map(([key, val]) => [key, clean_data(val)])
-                      .filter(([key, val]) => val != null)
-              )
-            : _.isArray(obj)
-            ? obj.map(clean_data).filter((x) => x != null)
-            : obj
-
-        return _.isEmpty(a) ? null : a
-    }
+    }, [clean_data, set_remote_frontmatter, frontmatter, close])
 
-    useLayoutEffect(() => {
-        window.addEventListener("open pluto frontmatter", open)
-        return () => {
-            window.removeEventListener("open pluto frontmatter", open)
-        }
-    }, [])
+    useEventListener(window, "open pluto frontmatter", open)
 
-    useLayoutEffect(() => {
-        const listener = (e) => {
+    useEventListener(
+        window,
+        "keydown",
+        (e) => {
             if (dialog_ref.current != null) if (dialog_ref.current.contains(e.target)) if (e.key === "Enter" && has_ctrl_or_cmd_pressed(e)) submit()
-        }
-        window.addEventListener("keydown", listener)
-        return () => {
-            window.removeEventListener("keydown", listener)
-        }
-    }, [])
+        },
+        [dialog_ref, submit]
+    )
 
     const frontmatter_with_defaults = {
         title: null,
@@ -188,6 +164,20 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
     </dialog>`
 }
 
+const clean_data = (obj) => {
+    let a = _.isPlainObject(obj)
+        ? Object.fromEntries(
+              Object.entries(obj)
+                  .map(([key, val]) => [key, clean_data(val)])
+                  .filter(([key, val]) => val != null)
+          )
+        : _.isArray(obj)
+        ? obj.map(clean_data).filter((x) => x != null)
+        : obj
+
+    return _.isEmpty(a) ? null : a
+}
+
 const special_field_names = ["tags", "date", "license", "url", "color"]
 
 const field_type = (name) => {
diff --git a/frontend/components/HackySideStuff/HijackExternalLinksToOpenInNewTab.js b/frontend/components/HackySideStuff/HijackExternalLinksToOpenInNewTab.js
index 3871d4bc99..de2818311d 100644
--- a/frontend/components/HackySideStuff/HijackExternalLinksToOpenInNewTab.js
+++ b/frontend/components/HackySideStuff/HijackExternalLinksToOpenInNewTab.js
@@ -1,12 +1,13 @@
+import { useEventListener } from "../../common/useEventListener.js"
 import { useEffect } from "../../imports/Preact.js"
 
 /**
  * Time flies when you're building Pluto...
  * At one moment you self-assignee to issue number #1, next moment we're approaching issue #2000...
- * 
+ *
  * We can't just put `<base target="_blank">` in the `<head>`, because this also opens hash links
  * like `#id` in a new tab...
- * 
+ *
  * This components takes every click event on an <a> that points to another origin (i.e. not `#id`)
  * and sneakily puts in a `target="_blank"` attribute so it opens in a new tab.
  *
@@ -14,8 +15,10 @@ import { useEffect } from "../../imports/Preact.js"
  * Based on https://stackoverflow.com/a/12552017/2681964
  */
 export let HijackExternalLinksToOpenInNewTab = () => {
-    useEffect(() => {
-        let handler = (event) => {
+    useEventListener(
+        document,
+        "click",
+        (event) => {
             if (event.defaultPrevented) return
 
             const origin = event.target.closest(`a`)
@@ -26,10 +29,9 @@ export let HijackExternalLinksToOpenInNewTab = () => {
                     origin.target = "_blank"
                 }
             }
-        }
-        document.addEventListener("click", handler)
-        return () => document.removeEventListener("click", handler)
-    })
+        },
+        []
+    )
 
     return null
 }
diff --git a/frontend/components/NonCellOutput.js b/frontend/components/NonCellOutput.js
index 099491132a..2c82f099d7 100644
--- a/frontend/components/NonCellOutput.js
+++ b/frontend/components/NonCellOutput.js
@@ -1,3 +1,4 @@
+import { useEventListener } from "../common/useEventListener.js"
 import { html, useEffect, useRef, useState } from "../imports/Preact.js"
 /**
  * Sometimes, we want to render HTML outside of the Cell Output,
@@ -20,17 +21,18 @@ import { html, useEffect, useRef, useState } from "../imports/Preact.js"
 export const NonCellOutput = ({ environment_component, notebook_id }) => {
     const surely_the_latest_updated_set = useRef()
     const [component_set, update_component_set] = useState({})
-    useEffect(() => {
-        const hn = (e) => {
+    useEventListener(
+        document,
+        "eexperimental_add_node_non_cell_output",
+        (e) => {
             try {
                 const { name, node, order } = e.detail
                 surely_the_latest_updated_set.current = { ...surely_the_latest_updated_set.current, [name]: { node, order } }
                 update_component_set(surely_the_latest_updated_set.current)
             } catch (e) {}
-        }
-        document.addEventListener("experimental_add_node_non_cell_output", hn)
-        return () => document.removeEventListener("experimental_add_node_non_cell_output", hn)
-    }, [surely_the_latest_updated_set])
+        },
+        [surely_the_latest_updated_set, update_component_set]
+    )
 
     let components = Object.values(component_set)
     components.sort(({ order: o1 }, { order: o2 }) => o1 - o2)
diff --git a/frontend/components/PasteHandler.js b/frontend/components/PasteHandler.js
index 3ecc856af1..1c6ec4395c 100644
--- a/frontend/components/PasteHandler.js
+++ b/frontend/components/PasteHandler.js
@@ -1,3 +1,4 @@
+import { useEventListener } from "../common/useEventListener.js"
 import { html, useEffect, useRef } from "../imports/Preact.js"
 import { link_edit } from "./welcome/Open.js"
 
@@ -86,18 +87,10 @@ export const PasteHandler = ({ on_start_navigation }) => {
         }
     }
 
-    useEffect(() => {
-        document.addEventListener("paste", processFile)
-        document.addEventListener("drop", processFile)
-        document.addEventListener("dragstart", processFile)
-        document.addEventListener("dragover", processFile)
-        return () => {
-            document.removeEventListener("paste", processFile)
-            document.removeEventListener("drop", processFile)
-            document.removeEventListener("dragstart", processFile)
-            document.removeEventListener("dragover", processFile)
-        }
-    })
+    useEventListener(document, "paste", processFile, [processFile])
+    useEventListener(document, "drop", processFile, [processFile])
+    useEventListener(document, "dragstart", processFile, [processFile])
+    useEventListener(document, "dragover", processFile, [processFile])
 
     return html`<span />`
 }
diff --git a/frontend/components/Popup.js b/frontend/components/Popup.js
index f94947c67d..59b5acb8f8 100644
--- a/frontend/components/Popup.js
+++ b/frontend/components/Popup.js
@@ -1,4 +1,4 @@
-import { html, useState, useRef, useEffect, useContext } from "../imports/Preact.js"
+import { html, useState, useRef, useEffect, useContext, useCallback } from "../imports/Preact.js"
 import { cl } from "../common/ClassTable.js"
 
 import { PlutoActionsContext } from "../common/PlutoContext.js"
@@ -7,6 +7,7 @@ import { PkgTerminalView } from "./PkgTerminalView.js"
 import { useDebouncedTruth } from "./RunArea.js"
 import { time_estimate, usePackageTimingData } from "../common/InstallTimeEstimate.js"
 import { pretty_long_time } from "./EditOrRunButton.js"
+import { useEventListener } from "../common/useEventListener.js"
 
 // This funny thing is a way to tell parcel to bundle these files..
 // Eventually I'll write a plugin that is able to parse html`...`, but this is it for now.
@@ -32,14 +33,6 @@ export const help_circle_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/
  * @property {Boolean} [big]
  */
 
-export const open_pluto_popup = (/** @type{PkgPopupDetails | MiscPopupDetails} */ detail) => {
-    window.dispatchEvent(
-        new CustomEvent("open pluto popup", {
-            detail,
-        })
-    )
-}
-
 export const Popup = ({ notebook, disable_input }) => {
     const [recent_event, set_recent_event] = useState(/** @type{(PkgPopupDetails | MiscPopupDetails)?} */ (null))
     const recent_event_ref = useRef(/** @type{(PkgPopupDetails | MiscPopupDetails)?} */ (null))
@@ -47,52 +40,52 @@ export const Popup = ({ notebook, disable_input }) => {
     const recent_source_element_ref = useRef(/** @type{HTMLElement?} */ (null))
     const pos_ref = useRef("")
 
-    const open = (/** @type {CustomEvent} */ e) => {
-        const el = e.detail.source_element
-        recent_source_element_ref.current = el
+    const open = useCallback(
+        (/** @type {CustomEvent} */ e) => {
+            const el = e.detail.source_element
+            recent_source_element_ref.current = el
 
-        if (el == null) {
-            pos_ref.current = `top: 20%; left: 50%; transform: translate(-50%, -50%); position: fixed;`
-        } else {
-            const elb = el.getBoundingClientRect()
-            const bodyb = document.body.getBoundingClientRect()
+            if (el == null) {
+                pos_ref.current = `top: 20%; left: 50%; transform: translate(-50%, -50%); position: fixed;`
+            } else {
+                const elb = el.getBoundingClientRect()
+                const bodyb = document.body.getBoundingClientRect()
 
-            pos_ref.current = `top: ${0.5 * (elb.top + elb.bottom) - bodyb.top}px; left: min(max(0px,100vw - 251px - 30px), ${elb.right - bodyb.left}px);`
-        }
+                pos_ref.current = `top: ${0.5 * (elb.top + elb.bottom) - bodyb.top}px; left: min(max(0px,100vw - 251px - 30px), ${elb.right - bodyb.left}px);`
+            }
 
-        set_recent_event(e.detail)
-    }
+            set_recent_event(e.detail)
+        },
+        [set_recent_event]
+    )
 
-    const close = () => {
+    const close = useCallback(() => {
         set_recent_event(null)
-    }
-
-    useEffect(() => {
-        const onpointerdown = (e) => {
+    }, [set_recent_event])
+
+    useEventListener(window, "open pluto popup", open, [open])
+    useEventListener(window, "close pluto popup", close, [close])
+    useEventListener(
+        window,
+        "pointerdown",
+        (e) => {
             if (recent_event_ref.current == null) return
             if (e.target == null) return
             if (e.target.closest("pluto-popup") != null) return
             if (recent_source_element_ref.current != null && recent_source_element_ref.current.contains(e.target)) return
 
             close()
-        }
-        const onkeydown = (e) => {
-            if (e.key === "Escape") {
-                close()
-            }
-        }
-        window.addEventListener("open pluto popup", open)
-        window.addEventListener("close pluto popup", close)
-        window.addEventListener("pointerdown", onpointerdown)
-        document.addEventListener("keydown", onkeydown)
-
-        return () => {
-            window.removeEventListener("open pluto popup", open)
-            window.removeEventListener("close pluto popup", close)
-            window.removeEventListener("pointerdown", onpointerdown)
-            document.removeEventListener("keydown", onkeydown)
-        }
-    }, [])
+        },
+        [close]
+    )
+    useEventListener(
+        window,
+        "keydown",
+        (e) => {
+            if (e.key === "Escape") close()
+        },
+        [close]
+    )
 
     const type = recent_event?.type
     return html`<pluto-popup
diff --git a/frontend/components/Scroller.js b/frontend/components/Scroller.js
index b3483c4424..d31fc89470 100644
--- a/frontend/components/Scroller.js
+++ b/frontend/components/Scroller.js
@@ -1,3 +1,4 @@
+import { useEventListener } from "../common/useEventListener.js"
 import { useEffect, useRef, useState } from "../imports/Preact.js"
 
 /**
@@ -9,17 +10,11 @@ import { useEffect, useRef, useState } from "../imports/Preact.js"
 export const Scroller = ({ active }) => {
     const pointer = useRef()
 
-    useEffect(() => {
-        const handler = (e) => {
-            pointer.current = { x: e.clientX, y: e.clientY }
-        }
-        document.addEventListener("pointermove", handler)
-        document.addEventListener("dragover", handler)
-        return () => {
-            document.removeEventListener("pointermove", handler)
-            document.removeEventListener("dragover", handler)
-        }
-    }, [])
+    const onmove = (e) => {
+        pointer.current = { x: e.clientX, y: e.clientY }
+    }
+    useEventListener(window, "pointermove", onmove, [])
+    useEventListener(window, "dragover", onmove, [])
 
     useEffect(() => {
         if (active.up || active.down) {
diff --git a/frontend/components/UndoDelete.js b/frontend/components/UndoDelete.js
index 472822621e..8f3898f946 100644
--- a/frontend/components/UndoDelete.js
+++ b/frontend/components/UndoDelete.js
@@ -1,7 +1,7 @@
 import { html, useState, useEffect } from "../imports/Preact.js"
 import { cl } from "../common/ClassTable.js"
-import { open_pluto_popup } from "./Popup.js"
 import { scroll_cell_into_view } from "./Scroller.js"
+import { open_pluto_popup } from "../common/open_pluto_popup.js"
 
 export const UndoDelete = ({ recently_deleted, on_click }) => {
     const [hidden, set_hidden] = useState(true)