Fixes keyboard shortcuts while typing, improves page panel input
Adds enter key to confirm
This commit is contained in:
parent
884aefc14f
commit
24c65fc5a8
3 changed files with 41 additions and 22 deletions
|
@ -10,21 +10,14 @@ import PagePanel from './page-panel/page-panel'
|
||||||
import CodePanel from './code-panel/code-panel'
|
import CodePanel from './code-panel/code-panel'
|
||||||
import DebugPanel from './debug-panel/debug-panel'
|
import DebugPanel from './debug-panel/debug-panel'
|
||||||
import ControlsPanel from './controls-panel/controls-panel'
|
import ControlsPanel from './controls-panel/controls-panel'
|
||||||
import { useEffect, useRef } from 'react'
|
|
||||||
|
|
||||||
export default function Editor({ roomId }: { roomId?: string }): JSX.Element {
|
export default function Editor({ roomId }: { roomId?: string }): JSX.Element {
|
||||||
const rLayout = useRef<HTMLDivElement>(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
rLayout.current?.focus()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
useKeyboardEvents(rLayout)
|
|
||||||
useLoadOnMount(roomId)
|
useLoadOnMount(roomId)
|
||||||
useStateTheme()
|
useStateTheme()
|
||||||
|
useKeyboardEvents()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout ref={rLayout} tabIndex={-1}>
|
<Layout>
|
||||||
<MenuButtons>
|
<MenuButtons>
|
||||||
<Menu />
|
<Menu />
|
||||||
<DebugPanel />
|
<DebugPanel />
|
||||||
|
|
|
@ -10,11 +10,15 @@ import {
|
||||||
DialogInputWrapper,
|
DialogInputWrapper,
|
||||||
Divider,
|
Divider,
|
||||||
} from 'components/shared'
|
} from 'components/shared'
|
||||||
import { useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import state, { useSelector } from 'state'
|
import state, { useSelector } from 'state'
|
||||||
import { Page } from 'types'
|
import { Page } from 'types'
|
||||||
|
|
||||||
export default function PageOptions({ page }: { page: Page }): JSX.Element {
|
export default function PageOptions({ page }: { page: Page }): JSX.Element {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
||||||
|
const rInput = useRef<HTMLInputElement>(null)
|
||||||
|
|
||||||
const hasOnlyOnePage = useSelector(
|
const hasOnlyOnePage = useSelector(
|
||||||
(s) => Object.keys(s.data.document.pages).length <= 1
|
(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) {
|
function handleOpenChange(isOpen: boolean) {
|
||||||
if (isOpen) return
|
setIsOpen(isOpen)
|
||||||
|
|
||||||
|
if (isOpen) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (page.name.length === 0) {
|
if (page.name.length === 0) {
|
||||||
state.send('RENAMED_PAGE', {
|
state.send('RENAMED_PAGE', {
|
||||||
|
@ -57,8 +65,24 @@ export default function PageOptions({ page }: { page: Page }): JSX.Element {
|
||||||
e.stopPropagation()
|
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 (
|
return (
|
||||||
<Dialog.Root onOpenChange={handleOpenChange}>
|
<Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
|
||||||
<Dialog.Trigger
|
<Dialog.Trigger
|
||||||
as={IconButton}
|
as={IconButton}
|
||||||
bp={breakpoints}
|
bp={breakpoints}
|
||||||
|
@ -70,12 +94,16 @@ export default function PageOptions({ page }: { page: Page }): JSX.Element {
|
||||||
<Dialog.Overlay as={DialogOverlay} />
|
<Dialog.Overlay as={DialogOverlay} />
|
||||||
<Dialog.Content
|
<Dialog.Content
|
||||||
as={DialogContent}
|
as={DialogContent}
|
||||||
onKeyPress={stopPropagation}
|
|
||||||
onKeyDown={stopPropagation}
|
onKeyDown={stopPropagation}
|
||||||
onKeyUp={stopPropagation}
|
onKeyUp={stopPropagation}
|
||||||
>
|
>
|
||||||
<DialogInputWrapper>
|
<DialogInputWrapper>
|
||||||
<MenuTextInput value={name} onChange={handleNameChange} />
|
<MenuTextInput
|
||||||
|
ref={rInput}
|
||||||
|
value={name}
|
||||||
|
onChange={handleNameChange}
|
||||||
|
onKeyDown={handleKeydown}
|
||||||
|
/>
|
||||||
</DialogInputWrapper>
|
</DialogInputWrapper>
|
||||||
<Divider />
|
<Divider />
|
||||||
<Dialog.Action
|
<Dialog.Action
|
||||||
|
|
|
@ -1,13 +1,11 @@
|
||||||
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
|
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
|
||||||
import { MutableRefObject, useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
import state from 'state'
|
import state from 'state'
|
||||||
import inputs from 'state/inputs'
|
import inputs from 'state/inputs'
|
||||||
import { ColorStyle, MoveType, SizeStyle } from 'types'
|
import { ColorStyle, MoveType, SizeStyle } from 'types'
|
||||||
import { metaKey } from 'utils'
|
import { metaKey } from 'utils'
|
||||||
|
|
||||||
export default function useKeyboardEvents(
|
export default function useKeyboardEvents() {
|
||||||
ref: MutableRefObject<HTMLDivElement>
|
|
||||||
) {
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function handleKeyDown(e: KeyboardEvent) {
|
function handleKeyDown(e: KeyboardEvent) {
|
||||||
const info = inputs.keydown(e)
|
const info = inputs.keydown(e)
|
||||||
|
@ -367,11 +365,11 @@ export default function useKeyboardEvents(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ref.current?.addEventListener('keydown', handleKeyDown)
|
window.addEventListener('keydown', handleKeyDown)
|
||||||
ref.current?.addEventListener('keyup', handleKeyUp)
|
window.addEventListener('keyup', handleKeyUp)
|
||||||
return () => {
|
return () => {
|
||||||
ref.current?.removeEventListener('keydown', handleKeyDown)
|
window.removeEventListener('keydown', handleKeyDown)
|
||||||
ref.current?.removeEventListener('keyup', handleKeyUp)
|
window.removeEventListener('keyup', handleKeyUp)
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue