tinymce / tinymce-react

Offical TinyMCE React component
MIT License
937 stars 152 forks source link

The editor refreshing anytime i click on other element #521

Closed Rarafff closed 2 months ago

Rarafff commented 2 months ago

I'm building an admin project using TinyMCE. At first, when I tried to edit the content in TinyMCE editor, the cursor Jump back to start when hit the enter button. and i found a solution on TinyMCE page on how to build the Editor properly. And then i have this problem, every first or -1 char of the last char i fetch (because this is an edit form) the cursor's missing and after the +2 or -2 from the last char, the editor going well. But if i click on another element on the page, the page refresh not on my purpose, here is my code:

const BodyEditor = ({ initialValue, onChange }) => { const [value, setValue] = useState(initialValue ?? "");

const handleEditorChange = (content, editor) => {
  setValue(content);
  onChange(content);
};

useEffect(() => {
  setValue(initialValue ?? "");
}, [initialValue]);

return (
  <Editor
    apiKey={import.meta.env.VITE_TINYMCE_API}
    initialValue={initialValue}
    init={{
      directionality: "auto",
      branding: false,
      height: 500,
      menubar: true,
      plugins: [
        "image",
        "advlist",
        "autolink",
        "lists",
        "link",
        "image",
        "charmap",
        "preview",
        "anchor",
        "searchreplace",
        "visualblocks",
        "code",
        "fullscreen",
        "insertdatetime",
        "media",
        "table",
        "code",
        "help",
        "wordcount",
        "anchor",
      ],
      toolbar:
        "undo redo | blocks | image | bold italic forecolor | alignleft aligncenter 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 }",
    }}
    value={value}
    onEditorChange={handleEditorChange}
  />
);

};

const initialBodyValue = form.getValues("body");

( Title )} /> ( Body * form.setValue("body", content)} /> )} />

What is the expected behavior? The editor not refreshing accidentaly every time i click on another element on page

Which versions of TinyMCE, and which browser / OS are affected by this issue? "@tinymce/tinymce-react": "^4.3.2"