da33179a31
This PR removes the automatic focus events from the editor. The `autoFocus` prop is now true by default. When true, the editor will begin in a focused state (`editor.instanceState.isFocused` will be `true`) and the component will respond to keyboard shortcuts and other interactions. When false, the editor will begin in an unfocused state and not respond to keyboard interactions. **It's now up to the developer** using the component to update `isFocused` themselves. There's no predictable way to do that on our side, so we leave it to the developer to decide when to turn on or off focus for a container (for example, using an intersection observer to "unfocus" components that are off screen). ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Open the multiple editors example. 2. Click to focus each editor. 3. Use the keyboard shortcuts to check that the correct editor is focused. 4. Start editing a shape, then select the other editor. The first editing shape should complete. - [x] Unit Tests - [x] End to end tests ### Release Notes - [editor] Make autofocus default, remove automatic blur / focus events. --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
15 lines
472 B
TypeScript
15 lines
472 B
TypeScript
import { useLayoutEffect } from 'react'
|
|
import { useEditor } from './useEditor'
|
|
|
|
/** @internal */
|
|
export function useFocusEvents(autoFocus: boolean) {
|
|
const editor = useEditor()
|
|
useLayoutEffect(() => {
|
|
if (autoFocus && !editor.instanceState.isFocused) {
|
|
editor.updateInstanceState({ isFocused: true })
|
|
editor.getContainer().focus()
|
|
} else if (editor.instanceState.isFocused) {
|
|
editor.updateInstanceState({ isFocused: false })
|
|
}
|
|
}, [editor, autoFocus])
|
|
}
|