React-draft-wysiwyg: Using mention breaks the app
If I add editorState and mention together it breaks the editor
<Editor
toolbar={toolbar}
editorState={editorState}
onEditorStateChange={onEditorStateChange}
mention={{
separator: ' ',
trigger: '@',
suggestions: [
{ text: 'APPLE', value: 'apple', url: 'apple' },
{ text: 'BANANA', value: 'banana', url: 'banana' },
{ text: 'CHERRY', value: 'cherry', url: 'cherry' },
{ text: 'DURIAN', value: 'durian', url: 'durian' },
{ text: 'EGGFRUIT', value: 'eggfruit', url: 'eggfruit' },
{ text: 'FIG', value: 'fig', url: 'fig' },
{ text: 'GRAPEFRUIT', value: 'grapefruit', url: 'grapefruit' },
{ text: 'HONEYDEW', value: 'honeydew', url: 'honeydew' },
],
}}
/>
The above code doesn't work. If I remove the mentions prop or the editorState it works. The error thrown is
react-draft-wysiwyg.js:7 Uncaught TypeError: Cannot read property 'editorState' of undefined
at Object.a.getEditorState (react-draft-wysiwyg.js:7)
at findSuggestionEntities (react-draft-wysiwyg.js:7)
at CompositeDraftDecorator.js:78
at Array.forEach (<anonymous>)
at CompositeDraftDecorator.getDecorations (CompositeDraftDecorator.js:56)
at Object.generate (BlockTree.js:57)
at EditorState.js:461
at immutable.js:3004
at immutable.js:2687
at List.__iterate (immutable.js:2194)
at OrderedMap.__iterate (immutable.js:2686)
at KeyedIterable.mappedSequence.__iterateUncached (immutable.js:3003)
at seqIterate (immutable.js:606)
at KeyedIterable.Seq.__iterate (immutable.js:276)
at KeyedIterable.forEach (immutable.js:4374)
at immutable.js:2639
at OrderedMap.Map.withMutations (immutable.js:1341)
at OrderedMap [as constructor] (immutable.js:2634)
at reify (immutable.js:3554)
at OrderedMap.map (immutable.js:4394)
at generateNewTreeMap (EditorState.js:460)
at EditorState.js:101
at Record.Map.withMutations (immutable.js:1341)
at Function.set (EditorState.js:82)
at r.a.createEditorState (react-draft-wysiwyg.js:7)
at new r (react-draft-wysiwyg.js:7)
at constructClassInstance (react-dom.development.js:14204)
at updateClassComponent (react-dom.development.js:18413)
at beginWork$1 (react-dom.development.js:20186)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at beginWork$$1 (react-dom.development.js:25780)
at performUnitOfWork (react-dom.development.js:24698)
at workLoopSync (react-dom.development.js:24671)
at performSyncWorkOnRoot (react-dom.development.js:24270)
at react-dom.development.js:12199
at unstable_runWithPriority (scheduler.development.js:697)
at runWithPriority$2 (react-dom.development.js:12149)
at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
at flushSyncCallbackQueue (react-dom.development.js:12182)
at discreteUpdates$1 (react-dom.development.js:24423)
at discreteUpdates (react-dom.development.js:1438)
at dispatchDiscreteEvent (react-dom.development.js:5881)
00karthik
All 5 comments
Got the same problem after upgrage to ^1.14.4 version.
Works:
editorState without Mentions
Mentions with empty editorState
both empty
Not working:
editorState with Mentions
karpolan
on 20 Feb 2020
Working combination of NPMs is:
"draft-js": "0.11.2"
"react-draft-wysiwyg": "1.13.2",
karpolan
on 20 Feb 2020
For me is working with this combination of NPMs:
"draft-js": "0.11.4"
"react-draft-wysiwyg": "1.13.2",
JeffersonFilho
on 26 Feb 2020
This issue is caused by the constructor here:
https://github.com/jpuri/react-draft-wysiwyg/blob/1876e3a7af75e19ea44473fc325575363b4f032a/src/Editor/index.js#L60
It indirectly calls into https://github.com/jpuri/react-draft-wysiwyg/blob/1876e3a7af75e19ea44473fc325575363b4f032a/src/decorators/Mention/Suggestion/index.js#L37 where it tries to get the state before it's ready: https://github.com/jpuri/react-draft-wysiwyg/blob/1876e3a7af75e19ea44473fc325575363b4f032a/src/Editor/index.js#L63
git9am
on 4 Mar 2020
This issue is caused by the constructor here:
https://github.com/jpuri/react-draft-wysiwyg/blob/1876e3a7af75e19ea44473fc325575363b4f032a/src/Editor/index.js#L60It indirectly calls into
where it tries to get the state before it's ready:
https://github.com/jpuri/react-draft-wysiwyg/blob/1876e3a7af75e19ea44473fc325575363b4f032a/src/Editor/index.js#L63
@git9am @jpuri Any suggestion on how to fix this?
luispeerez
on 16 Mar 2020
Related issues
gyarasu
路
4Comments
Leadrive
路
3Comments
Satherial
路
4Comments
june50232
路
4Comments
ananddodia
路
4Comments
Most helpful comment
This issue is caused by the constructor here:
https://github.com/jpuri/react-draft-wysiwyg/blob/1876e3a7af75e19ea44473fc325575363b4f032a/src/Editor/index.js#L60
It indirectly calls into https://github.com/jpuri/react-draft-wysiwyg/blob/1876e3a7af75e19ea44473fc325575363b4f032a/src/decorators/Mention/Suggestion/index.js#L37 where it tries to get the state before it's ready: https://github.com/jpuri/react-draft-wysiwyg/blob/1876e3a7af75e19ea44473fc325575363b4f032a/src/Editor/index.js#L63