Nested Editor - how children editor trigger parent edtor update?

[emsurezhang]

Like the example of the Playground image caption, we treat the child editor as a node within the parent editor, and serialize it together when serializing the parent editor.

However, when the user inputs content in the child editor, it does not trigger the contentUpdate event in the parent editor, which means the changes made in the child editor cannot be saved.

What’s the best approach for this?

I’m currently trying to manually trigger the parent editor's update within the child editor's contentUpdate event, but this requires serializing the parent editor’s key information within the child editor. Is there a better way to handle this?

[emsurezhang]

I found there is a function getNearestEditorFromDOMNode which can help me got parent Editor from DOM.
so I write AutoSavingPlugin for both parent editor and child editor.

parent editor

1. autosave by OnChangePlugin;
2. add 'UPDATE_BY_CHILD_COMMAND' COMMAND;

child editor

1. got RootElement 's parent DOM node;
2. call getNearestEditorFromDOMNode;
3. got parent Editor and dispatch 'UPDATE_BY_CHILD_COMMAND' trigger parent saving function.

import { useDebouncedCallback } from "./useDebouncedCallback";
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { EditorState, LexicalEditor, getNearestEditorFromDOMNode, LexicalCommand, createCommand, COMMAND_PRIORITY_EDITOR } from "lexical";
import { useEffect } from "react";
import { useRoleContext } from "@/core/context/roleContext";
import { update_file } from "@/actions/FileActions";
import { update_comment } from "@/actions/ThreadAndCommentAction";
import { useBookContext } from "@/core/context/bookContext";
import type { Comment } from "@/core/comment/Comment";
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';

export const UPDATE_BY_CHILD_COMMAND: LexicalCommand<void> = createCommand(
    'UPDATE_BY_CHILD_COMMAND',
);

export function AutoSavePlugin({ id, isArticle }: { id: string, isArticle: boolean }) {

    const Role = useRoleContext();
    const Book = useBookContext();
    const [editor] = useLexicalComposerContext();
    const onChange = async (editor: LexicalEditor) => {
        if (Role.token) {
            const content = JSON.stringify(editor.getEditorState());
            Book.set_is_saving(true);
            if (isArticle) {
                const { status, result } = await update_file(Number(id), { content: content }, Role.token);
                if (status == 200) {

                } else {
                    console.error(result);
                }
            } else {
                const comment: any = Book.commentStore.getCommentOrThreadById(id);
                const { status, result } = await update_comment(
                    id,
                    content,
                    (comment as Comment).tags.join(','),
                    Role.token
                );
                if (status == 200) {

                } else {
                    console.error(result);
                }
            }
            Book.set_is_saving(false);
        }
    }
    const _onChange = async (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => {
        onChange(editor);
    };

    const titleOnChange = (titleContent: string) => {
        console.log('Title changed', titleContent);
        if (Role.token) {
            update_file(Number(id), { title: titleContent }, Role.token);
        }
    };

    const debouncedOnChange = useDebouncedCallback(_onChange, 500);

    const debouncedTitleChange = useDebouncedCallback(titleOnChange, 500);

    useEffect(() => {
        const title_input_element = document.querySelector(`input[id="${id}"].articleTitleInput`);
        if (title_input_element) {
            // 绑定 onChange 事件到防抖回调
            const handleInputChange = (e: Event) => {
                debouncedTitleChange((e.target as HTMLInputElement).value);
            };

            title_input_element.addEventListener('input', handleInputChange);

            // 清理函数：移除事件监听器
            return () => {
                title_input_element.removeEventListener('input', handleInputChange);
            };
        }
    }, [id, debouncedTitleChange])



    useEffect(() => {
        editor.registerCommand(
            UPDATE_BY_CHILD_COMMAND,
            () => {
                console.log("UPDATE_BY_CHILD_COMMAND");
                onChange(editor);
                return true;
            },
            COMMAND_PRIORITY_EDITOR,
        )
    }, [editor]);

    return (
        <OnChangePlugin
            onChange={debouncedOnChange}
            ignoreSelectionChange
        />
    );
}

export function InnerEditorAutoSavePlugin() {

    const Role = useRoleContext();    

    const onChange = async (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => {
        console.log('Editor state changed', editorState, editor, tags);
        
        const parent_dom_node = editor.getRootElement()?.parentNode;
        if(!parent_dom_node) {
            return
        }
        const parent_editor = getNearestEditorFromDOMNode(parent_dom_node);
        console.log(parent_editor?.getRootElement());
        parent_editor?.dispatchCommand(UPDATE_BY_CHILD_COMMAND, undefined);
        
    };

    const debouncedOnChange = useDebouncedCallback(onChange, 500);

    return (
        <OnChangePlugin
            onChange={debouncedOnChange}
            ignoreSelectionChange
        />
    );
}```