Uploading images with TinyMCE does not replace the src attribute inside the image tag about tinymce-react HOT 5 OPEN

Upon debugging, I discovered that the onEditorChange function isn't triggered after invoking uploadImages(). Despite implementing a method to update the body state, the body remains unchanged.

Here's how I integrate TinyMCE as a component in my form:

<TinyEditorComponent
  onInit={(evt, editor) => (editorRef.current = editor)}
  init={{
    content_style: 'body { font-size:14px };',
    height: '100vh',
  }}
  onEditorChange={onEditorChange}
  initialValue={text}
/>

Here, the text value in the initialValue prop is simply a state derived from data retrieved from the database.

And here's the method I've implemented:

const onEditorChange = (newContent) => {
  setData('body', newContent);
  console.log("Body changed:", newContent);
};

This method simply updates the state of the body, which is later sent via the request. Note that I'm using the setData function from the InertiaJS userForm hook, but I've also experimented with a conventional useState hook from React with the same outcome: the state data isn't updated.

Additionally, I have to manually invoke the onEditorChange method because TinyMCE doesn't trigger it automatically after uploadImages() completes. So, the submission process looks something like this:

const submit = (e) => {
  e.preventDefault();

  editorRef.current.uploadImages().then((uploadResults) => {
    const updatedContent = editorRef.current.getContent();
    onEditorChange(updatedContent);
  }).then(() => {
    // Additional actions after image upload
  });
};

from tinymce-react.

I resolved the issue through sending the updatedContent immediatly with the help of the interiaJS router and not depending on the state of data.body state.

from tinymce-react.

Apologies, this should've been moved to our React integration. Not updating the state after image upload might be a bug, so I'm reopening it and moving it over.

from tinymce-react.

If you need any more details or informations feel free to ask.

from tinymce-react.

Internal ref: INT-3289

from tinymce-react.