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...

Buffo

You may have more luck getting this answered if you can create a working minimal example as testing this code is difficult in it's current state. stackoverflow.com/help/minimal-reproducible-example – Carpeting

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.

Saskatchewan

Answer 2

For me it worked when I had two separate variables for initial value and for the editor on change. Ref: https://github.com/instructure-react/react-tinymce/issues/76

Summons

Answer 3

For me it worked with newValue props

<Editor
      apiKey="jeiltvbooyoyr3fe3xt511l45gkbcj9wrq1pj5hhpfrsqmua"
      onInit={(evt, editor) => (editorRef.current = editor)}
      newValue={content}
      onChange={() => setContent(editorRef.current.getContent())}
      automatic_uploads={false}
      init={{
        height: 500,
        menubar: true,
        branding: false,
        images_upload_url: `${API_BASE_URL}/file/storage/upload`,
        plugins: [
          "advlist",
          "autolink",
          "lists",
          "link",
          "image",
          "charmap",
          "preview",
          "anchor",
          "searchreplace",
          "visualblocks",
          "code",
          "fullscreen",
          "insertdatetime",
          "media",
          "table",
          "code",
          "help",
          "wordcount",
        ],
        toolbar:
          "undo redo | blocks | " +
          "bold italic forecolor | alignleft aligncenter " +
          "alignright alignjustify | bullist numlist outdent indent | " +
          "removeformat | help",
        content_style:
          "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
      }}
    />

Stoup

Answer 4

I found a solution that is you need to set onInit function when Tinymce load then this function hits and value will load in initialValue which is starting value when Tinymce loaded.

interface ITinyMCE {
 value: string
  setValue: (val: any) => void
}

export default function TinyMCE({ value, setValue }: ITinyMCE) {
  const [initialValue, setInitialValue] = useState<string>('')

  return (
    <Editor
      apiKey='api-key'
      onInit={(evt, editor) => {
        setInitialValue(value)
      }}
      initialValue={initialValue}
      value={value}
      init={{
        height: 500,
        plugins: [
          "advlist",
          "autolink",
          "lists",
          "link",
          "image",
          "charmap",
          "preview",
          "anchor",
          "searchreplace",
          "visualblocks",
          "code",
          "fullscreen",
          "insertdatetime",
          "media",
          "table",
          "code",
          "help",
          "wordcount",
        ],
        toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code preview",
        images_upload_url: "http://localhost:3001/upload_article_images",
        automatic_uploads: true,
        images_reuse_filename: true,
        images_upload_handler: handleImageUpload
      }}
      onEditorChange={(content) => {
        setValue(content)
      }}
    />
  )
}

Bolero

Answer 5

In my case:

onChange={(value) => setEditorState(value?.level?.content)}

To:

onEditorChange={(val) => setEditorState(val)}

Fanatic