import { useCallback , useState } from 'react' ; import { FocusType , isElementDomNode } from '@remirror/core' ; import { useRemirrorContext } from '@remirror/react-core' ; import { useEvent } from './use-event' ; export interface UseEditorFocusProps { /**
     * The elements that can be focused without setting `isFocused` to false.
     */ ignoredElements ? : Array < Element | null > ; default blurOnInactive ? : boolean ; } /**
 * Keep track of the editor focus.
 *
 * Returns a focused value which is updated whenever the editor focus changes.
 *
 * When `true`, the editor is focused when `false` the editor is not focused.
 */ export function useEditorFocus ( props = { } ) { const { ignoredElements = [ ] , blurOnInactive = false } = props ; const { view , commands } = useRemirrorContext ( ) ; const [ isFocused , setIsFocused ] = useState ( ( ) => view . hasFocus ( ) ) ; useEvent ( 'blur' , useCallback ( ( event ) => { const focusedElement = isElementDomNode ( event . target ) ? event . target : document . activeElement ; const ignoreBlur = ! blurOnInactive && ! focusedElement ; if ( ignoreBlur || view . dom . contains ( focusedElement ) ) { return false ; } for ( const element of ignoredElements ) { if ( element ?. contains ( focusedElement ) ) { return false ; } } setIsFocused ( false ) ; return false ; } , [ blurOnInactive , ignoredElements , view . dom ] ) ) ; useEvent ( 'focus' , useCallback ( ( _ ) => { if ( isFocused ) { return false ; } setIsFocused ( true ) ; return false ; } , [ isFocused ] ) ) ; return [ isFocused , commands . focus ] ; }