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