Embedded block editor in block editor

I’m attempting to create UI in gutenberg block editor the place primary Editor interface picks individuals from the database of personnel (separate customized desk in MySQL), and every individual has button beneath, which when pressed opens a ‘window’ the place brief biography could possibly be entered.

Knowledge about which individuals are picked are saved in common web page, however biography for every individual must be saved in customized put up kind ‘biographies’, so it may be proven on a couple of web page, as popup and likewise as separate web page.

I made a decision that finest strategy can be to embed one other occasion of block-editor, much like reusable blocks. Nevertheless, I cannot get it to save lots of content material and to indicate correct blocks in inserter (it reveals blocks from context of primary editor)

That is what I got here with to this point (code is element which opens editor occasion window on a button and closes it with one other button in window:

 /**
 * Element for coming into biography
 */

import { BlockEditorProvider, BlockList, WritingFlow, ObserveTyping } from '@wordpress/block-editor';
import { Button } from '@wordpress/elements';
import { useState, useEffect, useSelect } from '@wordpress/ingredient';
import { useDispatch } from '@wordpress/information';
import { EntityProvider, useEntityBlockEditor, useEntityId  } from '@wordpress/core-data';

// const TABLE = 'tla_mit_lecturers_biography';


const BiographyModal = ({ title, showButton, postID, setPostID }) => {
    const [ isOpen, setIsOpen ] = useState(false);
    const [ blocks, onInput, onChange ] = useEntityBlockEditor(
        'postType',
        'biographies',
        { id: postID }
    );
    const retrievedID = useEntityId( 'postType', 'biographies' );
    useEffect(() => setPostID(retrievedID), [retrievedID])
    const editorSettings = {
        allowedBlockTypes: ['core/paragraph']
    }

    const editorInstance =
            // <EntityProvider
            //  type="postType"
            //  kind="biographies"
            //  id={postID}
            // >
                <BlockEditorProvider
                    worth={ blocks }
                    onChange={ onChange }
                    onInput={ onInput }
                    // choice={ choice }
                    settings={ editorSettings }
                    useSubRegistry={ true }
                >
                    <WritingFlow>
                        <ObserveTyping>
                            <BlockList />
                        </ObserveTyping>
                    </WritingFlow>
                </BlockEditorProvider>;
            // </EntityProvider>;

    const modal =
        <div className="biography-modal">
            <h3>{ `Životopis ${ title }` }</h3>
            {editorInstance}
            <Button isDefault onClick={ () => setIsOpen(false) }>
                Završi
            </Button>
        </div>;


    return (
        <div className="biography-module">
            {
                (showButton || isOpen) &&
                <Button isDefault disabled={isOpen} onClick={ () => setIsOpen( true ) }>Uredi životopis</Button>
            }
            { isOpen && modal }
        </div>
    )
}

export default BiographyModal;

I’m additionally unsure if block editor must be wrapped in EntityProvider or not, it appears to do nothing. Though editor seems and typing inside is feasible, it offers error Uncaught (in promise) TypeError: cannot entry property "blocks", document is undefined. I suppose it could possibly be as a result of BlockEditorProvider and useEntityBlockEditor function on completely different registries.