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

@@ -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, {

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