search

instructure-react / react-tinymce

React TinyMCE component
181 stars 110 forks source link

This is not "Controlled Component" as most of react developers expect to be #41

Closed olessavluk closed 5 years ago

olessavluk commented 8 years ago

From official React documentation:

A Controlled component does not maintain its own internal state; the component renders purely based on props.

This is how I expected react-tinymce to work, but it is not. This is caused a lot of frustration for me and for other people too:

As I understand there is no way to make this component act the same as "controlled component" due to tinyMCE nature, only "hacky" solutions as update state by timeout and so on ?

So I think it is important to highlight this issue in readme to prevent people from making typical mistakes ?

brentropy commented 8 years ago

I agree this component needs some work. I have run in to several of these issues myself. I have access to contribute but haven't had time to dedicate to it. I will see what we can do about taking care of some of these issues. I am sorry for the frustration.

w- commented 7 years ago

specific to the @amcsi comment on https://github.com/instructure-react/react-tinymce/issues/10#issuecomment-187754397

I've placed my main comment here because that issue is closed where as this is open I implemented this hack so that I could at least get more frequent updates from the component without using timeout.

In the soruce here, an editor instance is now being pased to the event handlers. https://github.com/instructure-react/react-tinymce/blob/master/lib/components/TinyMCE.js#L112

so you can define an editor component like so:

<TinyMCE
    id="message"
    content={blah.message}
    config={/*... whatever .. */}

    onChange={this.handleMessageChange}
    onKeyup={this.handleMessageChange}
/>

and your single event handler in your own compnent can look like

handleMessageChange(evt, editor){
    let newContent = editor.getContent();
    console.log('message Changed: ', evt.type, newContent);
        // .....
}

this allows us to use onKeyup as a supplement to onChange. We get some duplicate events firing, but the unnecessary overheard looks to be the only way to do this atm. I still don't understand why the change even doesn't fire until we hit "enter" or move the cursor manually. Is this the existing behaviour in tinyMce

Silviu-Marian commented 7 years ago

onChange and onKeyUp may note be sufficient, use onInput instead so you can also intercept right-click -> paste and images that were dragged and dropped and lots of other stuff.

Also, right now react-tinymce doesn't expose its root container, but if it did, you could also hook it up to a MutationObserver.

What do you think?

olessavluk commented 5 years ago

There are other WYSIWYG editors which works well with React out of the box