Mention Plugin - Error thrown when displaying mentions in readOnly Editor

Mentions are correctly inserted in the Editor in editing mode but do not work in readOnly mode. The thrown error: Unhandled promise rejection TypeError: mention.has is not a function(…)

Details of the error The error comes from this code if (mention.has('link')) As Entity.get(entityKey) returns an object, the code tries to use .has() on an Object so it throws an exception.

Scenario to reproduce this error:

1. In edit mode : add some mentions
2. Save your rawContent somewhere like in a database so you can reuse it later (My sample below)
3. Display your content in an readOnly Editor

If you want to test it quickly, here is my rawContent:

{"entityMap": {"0": {"type": "mention", "mutability": "IMMUTABLE", "data": {"mention": {"link": "/user/17", "name": "Maxime Rota", "avatar": "http://1A922.http.par01.cdn.softlayer.net/preprod/line_operator.jpg"}}}}, "blocks": [{"key": "en8l2", "depth": 0, "inlineStyleRanges": [], "type": "unstyled", "entityRanges": [{"key": 0, "length": 11, "offset": 0}], "text": "Maxime Rota "}]}

[Stanley]

Here is the workaround that solved this issue for me:

var fromJS = require('immutable').fromJS

_.forEach(rawContent.entityMap, function(val, key) {
  val.data.mention = fromJS(val.data.mention)
})

var contentState = Draft.convertFromRaw(rawContent)
var editorState = Draft.EditorState.createWithContent(contentState)

Hope this helps with finding more permanent solution for this bug.

[nikgraf]

This got already fixed in the latest version of the mentions plugin. It not accepts immutable data structures as well as plain JS objects: https://github.com/draft-js-plugins/draft-js-plugins/pull/326