search

tinymce / tinymce-react

Offical TinyMCE React component
MIT License
959 stars 156 forks source link

Pressing 'Return' starts in first line, not next line, when using `initialValue` from React State #389

Closed marco910 closed 1 year ago

marco910 commented 2 years ago

I'm trying to use TinyMCE in my React project and want to pass the value of a React state as initialValue to the editor. This works but when pressing the 'Return' key on my keyboard, the editor doesn't start in a new line but on the beginning of the first line. See the screen recording: https://user-images.githubusercontent.com/57726854/193872150-95fba5d1-f0ba-4e64-9cc0-2559c4fbd791.mov

When passing an HTML string as initial value, the issue doesn't appear.

What am I doing wrong, or is there a bug?

exalate-issue-sync[bot] commented 2 years ago

Ref: INT-3024

tiny-james commented 1 year ago

Could you share your editor configuration?

What I suspect you are doing is using initialValue for a user updated value. The fix will probably be to use value instead.

The initialValue prop will cause the editor to reset. This means that the undo history will be erased using the new initial value as the base state. Also the cursor position is not remembered when setting the initialValue because it's assumed that the user will not have begun editing.

The fix is simple, only use initialValue prop to set the base state of the editor. After that you must only use the value prop to control the editor.

Here's an example: https://codesandbox.io/s/asynchronous-initial-value-uh75r4

tiny-james commented 1 year ago

Given there is no reply in a week I'm assuming this is resolved.