Using Draft.js with Reagent

Question

Does anyone have any luck adapting Draft.js for Reagent? There's pretty heavy editing issues if Draft.js is imported right away via reagent/adapt-react-class. Cursor jumps, disappearing symbols when you're typing, onChange calls with incorrect EditorState, you name it.

People are reporting problems like this in clojurians/reagent Slack channel, but it seems there's no solution so far.

Any help would be greatly appreciated.

Answer 1

Okay, thanks to tonsky, I got the answer. Reagent/Rum are using deferred rendering with requestAnimationFrame, but Draft.Editor should be re-rendered immediately when editorState is set.

All we need is to call forceUpdate for editor parent component whenever editor onChange is invoked:

:editorState @editor-state-atom
:onChange    (fn [new-state]
               (reset! editor-state-atom new-state)
               (.forceUpdate @wrapper-state))

Code example is for Reagent, solution for Rum is identical