TinyMCE React cursor back to start after typing a key

Question

I'm using TinyMCE-React and when I type my text in the TinyMCE Editor with an initial value, the cursor constantly returns at the start of the text...

import { Editor } from "@tinymce/tinymce-react";

  const [formData, setFormData] = useState({
    title: "",
    text: "",
  });


if (post) {
  setFormData((formData) => ({
    ...formData,
    title: post.title,
    text: post.text,
  }));
}

const { title, text } = formData;

My function :

const textChange = (e) => {
setFormData({ ...formData.text, text: e });   };

My Editor :

    <Editor
      name='text'
      initialValue={text}
      onEditorChange={(e) => textChange(e)}
    />

I think it's because of the "setFormData" but I don't know how can I edit the text with a regular cursor which stays at the end of the text...

Answer 1

Late answer, but here's the fix: https://github.com/tinymce/tinymce-react/issues/267.

Change initialValue={text} to value={text}.

This is the right setup for using the TinyMCE React component as a "controlled" component: https://www.tiny.cloud/docs/integrations/react/#usingthetinymcereactcomponentasacontrolledcomponent.