instructure-react / react-tinymce

React TinyMCE component
181 stars 115 forks source link

UUID for isomorphic react apps #42

Open sirgallifrey opened 7 years ago

sirgallifrey commented 7 years ago

First of all, let me say that this lib is awesome!

I'm using react-tinymce on a isomorphic react app, and the thing is that UUID has a global count var, that is incremented for every page load on the server, and on the client side this var starts on zero. This causes a warning on react like this one:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) a id="react-tinymce-0" data-reactid="69" (server) a id="react-tinymce-1" data-reactid="69"

One way to fix this is to have a static method that allow to set count value. (or to reset to zero). And then I can call this on my main component so that way each server and client render starts with zero.

TinyMCE = require('react-tinymce');
TinyMCE.resetUUIDCount();

I can make a PR with this fix, if that's ok

(sorry for my poor english :P)