How can I use React packages with the clasic editor?

Question

I'm trying to add some extra functionality when editing a post using the classic editor, so that when the user clicks the Update button to save the post, I want to show a React component that will take the post id, title, content, and some custom fields data as props and use those to do some logic already built in the React component and then send the update to WP database.

I'm trying to reuse the logic in that component, and I cannot use Gutenberg editor for this (the component does work if the editor is Gutenberg but I need to make it work in classic editor). I thought of using useSelect from @wordpress/data with core/editor but it doesn't take the current post.

I'm already able to show the React component, I just need to set its props.

const CustomUpdateComponent = {...};

document.addEventListener('DOMContentLoaded', () => {
    // replace update button with our own
    const publishingActionButton = document.querySelector( '#publishing-action' );

    if (publishingActionButton) {
        render( <CustomUpdateComponent post={need-this-post-id} ... />, publishingActionButton );
    }
});

Any ideas?

Answer 1

I solved this by reading from the DOM. Not the prettiest way but it does what I needed.

const CustomUpdateComponent = {...};

document.addEventListener('DOMContentLoaded', () => {
    // replace update button with our own
    const publishingActionButton = document.querySelector( '#publishing-action' );

    if (publishingActionButton) {
        const postId = document.querySelector( '#post_ID' ).value;
        render( <CustomUpdateComponent post={postId} ... />, publishingActionButton );
    }
});