Fixes keyboard shortcuts while typing, improves page panel input

Adds enter key to confirm

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 />

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

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)
     }
   }, [])
 }