State not updated when setState is called from tinyMCE onAction method

Question

I am working on book creator in react and tinymce. User is allowed to create multiple textblock on canvas and fill them with text.

Everything works fine when button with onClick method for creating new textblock is called outside editor, like typical .

Problem started when i've tried adding a toolbar button:

    setup: (editor) => {
        editor.ui.registry.addButton("AddNew", {
        text: "Add new",
        onAction: (buttonApi) => addTextBlock()
        });
    },

and it works once. It creates textBlock object by updating the state object but consecutive clicks on this button reset state to initial value (empty list) and add again one object.

Same code executed from button that is placed outside editor correctly created clicked amount of textblocks.

I've no error or relevant warning in console.

I seem to have the same problem. It initially worked perfectly allright when i had just a few buttons on the toolbar. I added a few more and then this problem surfaced. Since i dont have much time at the moment to track it down i am opting for a button outside the toolbar/editor for the save functionality. So my understanding is that essentially its not a save button issue as such but rather with one or more other toolbar buttons interfering with the save functionality. — arunmenon, Oct 24 '20 at 18:06

score 0 · Answer 1 · answered Jul 22 '21 at 09:35

I have same problem too then I resolved this with the following code:

setup: (editor) => {
    let self = this;
    editor.ui.registry.addButton('customButton', {
        text: 'Button',
        tooltip: 'Insert/edit image',
        onAction: function(){
            self.setState({click:true});
        }
    });
}

State not updated when setState is called from tinyMCE onAction method

1 Answers1