From 81dd970d42b6fc1eb7240d1b7d2f3ff1f5354d92 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Thu, 31 Dec 2020 18:08:26 +1100
Subject: [PATCH] issue-193 Stop backspace key from going back a page in IDE

Using the 3d view could mean the user forgets that the editor has lost
focus, so trying to back space to delete characters they were just using
results in it going back to the previous page in the browser and the
user looses their work.

resolves #193
---
 web/src/components/IdeToolbar/IdeToolbar.js |  9 +++++++++
 web/src/helpers/hooks/useKeyPress.js        | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 web/src/helpers/hooks/useKeyPress.js

diff --git a/web/src/components/IdeToolbar/IdeToolbar.js b/web/src/components/IdeToolbar/IdeToolbar.js
index 01160f0..81947ad 100644
--- a/web/src/components/IdeToolbar/IdeToolbar.js
+++ b/web/src/components/IdeToolbar/IdeToolbar.js
@@ -13,6 +13,7 @@ import LoginModal from 'src/components/LoginModal'
 import { FORK_PART_MUTATION } from 'src/components/IdePartCell'
 import { QUERY as UsersPartsQuery } from 'src/components/PartsOfUserCell'
 import useUser from 'src/helpers/hooks/useUser'
+import useKeyPress from 'src/helpers/hooks/useKeyPress'
 
 const IdeToolbar = ({
   canEdit,
@@ -30,6 +31,14 @@ const IdeToolbar = ({
   const showForkButton = !(canEdit || isDraft)
   const [title, setTitle] = useState('untitled-part')
   const { user } = useUser()
+  useKeyPress((e) => {
+    const rx = /INPUT|SELECT|TEXTAREA/i
+    const didPressBackspaceOutsideOfInput =
+      (e.key == 'Backspace' || e.keyCode == 8) && !rx.test(e.target.tagName)
+    if (didPressBackspaceOutsideOfInput) {
+      e.preventDefault()
+    }
+  })
 
   const { addMessage } = useFlash()
   const [forkPart] = useMutation(FORK_PART_MUTATION, {
diff --git a/web/src/helpers/hooks/useKeyPress.js b/web/src/helpers/hooks/useKeyPress.js
new file mode 100644
index 0000000..83cfd16
--- /dev/null
+++ b/web/src/helpers/hooks/useKeyPress.js
@@ -0,0 +1,19 @@
+import { useRef, useEffect } from 'react'
+
+const useKeyPress = (fn) => {
+  const cb = useRef(fn)
+
+  useEffect(() => {
+    cb.current = fn
+  }, [fn])
+
+  useEffect(() => {
+    const onUnload = cb.current
+
+    window.addEventListener('keydown', onUnload)
+
+    return () => window.removeEventListener('keydown', onUnload)
+  }, [])
+}
+
+export default useKeyPress
-- 
2.39.5