ComponentDidMount wipes out all decorators

Use-case/Problem

I found a few mention of this error in the logged issues but none seemed to truly address the problem other than suggesting not to use ComponentDidMount() which makes it a bit problematic for what what I am trying to do.

I am currently using two plugins that have decorators and as long as I am not using ComponentDidMount they work as expected but for some reason when that life-cycle method is introduced it wipes out all established decorators.

I am currently using "draft-js-plugins-editor": "^3.0.0"

I am happy to try and workout a fix but I’ll need some pointers as to what in the codebase needs fixing. Or if someone has a simple work around.

[assaf]

Yes. The documentation suggests that you can set the decorator at any time https://draftjs.org/docs/advanced-topics-decorators#setting-new-decorators

Looking at the code, there’s no penalty on setting the decorator to the same value it already is: https://github.com/facebook/draft-js/blob/master/src/model/immutable/EditorState.js#L203.

So instead of using componentDidMount, draft-js-plugin-editor can set the decorator on editorState before passing it to the underlying Draft.js instance. Or it can set the decorator once in the constructor, and again whenever the editorState property changes.

[assaf]

Whenever something gets fixed with a setTimeout, it’s most likely a race condition.

When draft-js-plugin mounts, it uses the original editorState, adds decorators, and calls onChange.

https://github.com/draft-js-plugins/draft-js-plugins/blob/ed27d94b35dc91e5ceee510aab35a0813bf7dc7a/draft-js-plugins-editor/src/Editor/index.js#L66

Then the component mounts and calls focus, draft.js also uses the original editorState, adds focus, and calls onChange.

https://github.com/facebook/draft-js/blob/928563b1a3ac999389ed82dbf193dbc3bc9e7223/src/component/base/DraftEditor.react.js#L515

So there are two calls to onChange, one with decorators, one with focus, and the component only stores the last change.