? ????? Context? ?? DOM ??? ??? ?? ?? ??? ??? ? React ???????? ??? ???? ???? ???? ??? ?????. ?? ???? ????? ?? ?? ???? ??? ?? ?? ?? ??? ??? ? ?? ??? ?? ???? ? ????? focusout ???? ????? ??? ?? ???? ??? ???? ??? ?? ? ??? ???? ?? ??? ?? ??? ??? ?????.

React Context? Ref? ??? ??? ?????.

React?? ref? DOM ??? ?? ?? ????? ????? ?????. ?? ?? ?? ?? DOM ??? ??? ???? ? ? React Context? ????? ??? ????? ?????. ?? ??, ?? ?? ???? DOM ??? ??? ?? ?? ?? ?? ??? ? ??? ???? ??? ??? ??? ?? ?? ??? ????? ? ? ????.

?? ????? ??????. EditorProvider ?? ??? div ??? ??? ???? Context? ?? ?? ?? ?? ??? ?????.

 import React, { useRef, useContext, useMemo } from 'react';

// ???? ????? EditorContextProps? ??? ?????.
    ??????: ??; // ?, ?? ??? ?? ?? ??? ?????. ref: React.RefObject<htmldivelement>;
}

// ???? ??
const EditorContext = React.createContext<editorcontextprops>(???? ??);

// ???? ??? ???? ?? ?? ??? ??? ?????.
???? ?? useEditorContext(): EditorContextProps {
    const context = useContext(EditorContext);
    if (???? === ???? ??) {
        throw new Error('useEditorContext? EditorProvider ??? ????? ???.');
    }
    ????? ?????.
}

// EditorProvider ?? ?? ???? ?? ?? EditorProvider({ children }: { children: React.ReactNode }) {
    const ref = useRef<htmldivelement>(null); // ?? ??
    const HistoryState = useMemo(() => ({ /* ?? ?? */ }), []); // ?? const context = { HistoryState, ref };

    ?? (
        <editorcontext.provider>
            <div ref="{ref}"> {/* ??? DOM ??? ???*/}
                {????}
            </div>
        </editorcontext.provider>
    );
}</htmldivelement></editorcontextprops></htmldivelement>

? ??? EditorProvider? ?? HTMLDivElement? ??? ???? ??? ?????. ?? ?? ??(?: ?? ????)? useEditorContext ??? ?? ? ??? ?? ? ????.

?? ???? ??? ?????? ??

?? ??? ????? ? ?? ???? ??? ?? ?? ???? ????? ? ? ???? ??? ?? ???? ???? ????.

 import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider'; // ?? ?? function MyLexicalPlugin() {
    const { ref } = useEditorContext();

    const BlurHandler = useCallback((event: FocusEvent) => {
        console.log('???');
        // ??? ???? ??? ?????.}, []);

    useEffect(() => {
        const ?? = ref.current;
        if (??) {
            // ?? ??: ?? ???? ????? ????. element.addEventListener('blur', BlurHandler, false);
        }

        ?? () => {
            if (??) {
                element.removeEventListener('blur', BlurHandler);
            }
        };
    }, [ref.current, BlurHandler]); // ????? ref.current? ?????.

    null? ??; // ????? ????? DOM? ????? ????.
}

? ????, ?? ref? ???? div ?? ?? ???? ???? ???? ??, BlurHandler? ???? ????? ?? ? ????. ?? ?? ???? ???? ?? ?????. ?, ??? ?? ???? ???? ?? ???? ?? ?? ????? ????? ?? ?? ??(?: ref? ?? ??? div)? ???? ????.

? ??? ????? focusout ???? ???? ???. focusout ???? Blur ???? ???? ? ? ??? ???? ???? ?????. ??? ?? ???? focusout ???? ?????? ????. focusout ???? ?? ?? ?? ?? ?? ??? ???? ?? ? ???? ??????. ?? ?? ???? ?? ??? ??? ?? ?? ??? ?????? ? ??????.

focusout ???? ???? ??? ?? ?? ???? ??

??? ????? useEffect? ?? ???? focusout?? ????.

 import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider'; // ?? ?? function MyLexicalPlugin() {
    const { ref } = useEditorContext();

    const BlurHandler = useCallback((event: FocusEvent) => {
        console.log('?? ???? ?????? ???? ??? ???');
        // ??? ???? ??? ?????.}, []);

    useEffect(() => {
        const ?? = ref.current;
        if (??) {
            // ??? ?? ??: focusout ???? ???? ??? ?????. element.addEventListener('focusout', BlurHandler);
        } ? ?? {
            ??; // ??? ???? ??? ?? ??? ???? ????.}

        // ?? ??: ?? ??? ????? ???? ???? ??? ???? ?????. return () => {
            if (element) { // ??? ??? ???? ??? ????? ?? ??????. element.removeEventListener('focusout', BlurHandler);
            }
        };
    }, [ref.current, BlurHandler]); // ????? ref.current ? BlurHandler? ?????.

    null? ??;
}

?? ?? ? ?? ??:

1. useCallback? ??? ??? ??? ?????. BlurHandler? useCallback?? ???? ref.current? ???? ?? ?? ? ??? ?? BlurHandler? ??? ????? ????? ???. ?? ???? ??? ??? ???? ???? ?? useEffect? ??? ???? ?? ?????.
2. useEffect? ???:
   • ref.current: ref? ???? DOM ??? ???? useEffect? ?? ?????(????? EditorProvider??? ???? ??? ?? ??? ???? ?).
   • BlurHandler: useCallback? ?????? BlurHandler? ????? ?? ??? ???? ??? ??? ???? BlurHandler? ??? ?????. ?? ??? ??? ?? ??? ????? useEffect? ?? ???? ???.
3. ?? ??: useEffect? ???? ??? ?? ?????. ?? ??? ???? ? ?? useEffect? ???? ???? ?? ???? ?? ?????. ???? ??? ??? ???? ?? ??? ??? focusout ??? ???? ??????.
4. focusout ? focusin: ????? focusin ???? focus ???? ??? ?????. ?? ???? ?? ??? ??? ?? ??? ?????? ?? ?? focusin? ??? ? ????.
5. ?? ??: useEffect ???? ref.current? null?? ?? ?????. ?? ??? ?? ????? ref.current? ?? ?? ???? ??? ? ????.

??

React?? Context? ?? ?? ??? ??? ?? ?? ?? DOM ?? ??? ???? ?? ??? ?????. ??? ?? ???? ??? ???? ??? ? ??? ??? ??(?? ???? ??? ?)? ??? ???? ?? ?????. focusout ???? ??? ??? ?? ???? ?? ??? ??? ?? ?? ??? ???? ? ??????. useEffect ? useCallback? ???? ???? ??? ?? ?? ??? ??? ?? ????? ??? ? ????.

? ??? React? Context? ?? Ref? ???? ??? ???? ???? ??? ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!