From 24c65fc5a81e313e8fd7964c32321fc09303301b Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Wed, 14 Jul 2021 15:05:58 +0100
Subject: [PATCH] Fixes keyboard shortcuts while typing, improves page panel
 input

Adds enter key to confirm
---
 components/editor.tsx                  | 11 ++------
 components/page-panel/page-options.tsx | 38 ++++++++++++++++++++++----
 hooks/useKeyboardEvents.ts             | 14 ++++------
 3 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/components/editor.tsx b/components/editor.tsx
index 4f9e9c3cc..aab9587b5 100644
--- a/components/editor.tsx
+++ b/components/editor.tsx
@@ -10,21 +10,14 @@ import PagePanel from './page-panel/page-panel'
 import CodePanel from './code-panel/code-panel'
 import DebugPanel from './debug-panel/debug-panel'
 import ControlsPanel from './controls-panel/controls-panel'
-import { useEffect, useRef } from 'react'
 
 export default function Editor({ roomId }: { roomId?: string }): JSX.Element {
-  const rLayout = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    rLayout.current?.focus()
-  }, [])
-
-  useKeyboardEvents(rLayout)
   useLoadOnMount(roomId)
   useStateTheme()
+  useKeyboardEvents()
 
   return (
-    <Layout ref={rLayout} tabIndex={-1}>
+    <Layout>
       <MenuButtons>
         <Menu />
         <DebugPanel />
diff --git a/components/page-panel/page-options.tsx b/components/page-panel/page-options.tsx
index 49e97fddb..fda1afd64 100644
--- a/components/page-panel/page-options.tsx
+++ b/components/page-panel/page-options.tsx
@@ -10,11 +10,15 @@ import {
   DialogInputWrapper,
   Divider,
 } from 'components/shared'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import state, { useSelector } from 'state'
 import { Page } from 'types'
 
 export default function PageOptions({ page }: { page: Page }): JSX.Element {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const rInput = useRef<HTMLInputElement>(null)
+
   const hasOnlyOnePage = useSelector(
     (s) => Object.keys(s.data.document.pages).length <= 1
   )
@@ -34,7 +38,11 @@ export default function PageOptions({ page }: { page: Page }): JSX.Element {
   }
 
   function handleOpenChange(isOpen: boolean) {
-    if (isOpen) return
+    setIsOpen(isOpen)
+
+    if (isOpen) {
+      return
+    }
 
     if (page.name.length === 0) {
       state.send('RENAMED_PAGE', {
@@ -57,8 +65,24 @@ export default function PageOptions({ page }: { page: Page }): JSX.Element {
     e.stopPropagation()
   }
 
+  function handleKeydown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (e.key === 'Enter') {
+      handleSave()
+      setIsOpen(false)
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        rInput.current?.focus()
+        rInput.current?.select()
+      }, 0)
+    }
+  }, [isOpen])
+
   return (
-    <Dialog.Root onOpenChange={handleOpenChange}>
+    <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
       <Dialog.Trigger
         as={IconButton}
         bp={breakpoints}
@@ -70,12 +94,16 @@ export default function PageOptions({ page }: { page: Page }): JSX.Element {
       <Dialog.Overlay as={DialogOverlay} />
       <Dialog.Content
         as={DialogContent}
-        onKeyPress={stopPropagation}
         onKeyDown={stopPropagation}
         onKeyUp={stopPropagation}
       >
         <DialogInputWrapper>
-          <MenuTextInput value={name} onChange={handleNameChange} />
+          <MenuTextInput
+            ref={rInput}
+            value={name}
+            onChange={handleNameChange}
+            onKeyDown={handleKeydown}
+          />
         </DialogInputWrapper>
         <Divider />
         <Dialog.Action
diff --git a/hooks/useKeyboardEvents.ts b/hooks/useKeyboardEvents.ts
index ca09697c0..bd61ffd33 100644
--- a/hooks/useKeyboardEvents.ts
+++ b/hooks/useKeyboardEvents.ts
@@ -1,13 +1,11 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { MutableRefObject, useEffect } from 'react'
+import { useEffect } from 'react'
 import state from 'state'
 import inputs from 'state/inputs'
 import { ColorStyle, MoveType, SizeStyle } from 'types'
 import { metaKey } from 'utils'
 
-export default function useKeyboardEvents(
-  ref: MutableRefObject<HTMLDivElement>
-) {
+export default function useKeyboardEvents() {
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
       const info = inputs.keydown(e)
@@ -367,11 +365,11 @@ export default function useKeyboardEvents(
       }
     }
 
-    ref.current?.addEventListener('keydown', handleKeyDown)
-    ref.current?.addEventListener('keyup', handleKeyUp)
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
     return () => {
-      ref.current?.removeEventListener('keydown', handleKeyDown)
-      ref.current?.removeEventListener('keyup', handleKeyUp)
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
     }
   }, [])
 }