editorState.getCurrentContent() returns an empty entityMap in 0.10.5

[ggrossetie]

Do you want to request a feature or report a bug?

bug (or an undocumented feature ?)

What is the current behavior?

editorState.getCurrentContent() contains an empty entityMap

- Expected
+ Received

@@ -36,24 +36,11 @@
       "key": "4sa5t",
       "text": "Bonjour",
       "type": "unstyled",
     },
   },
-  "entityMap": Object {
-    "__add": [Function __add],
-    "__create": [Function __create],
-    "__get": [Function __get],
-    "__getLastCreatedEntityKey": [Function __getLastCreatedEntityKey],
-    "__mergeData": [Function __mergeData],
-    "__replaceData": [Function __replaceData],
-    "add": [Function add],
-    "create": [Function create],
-    "get": [Function get],
-    "getLastCreatedEntityKey": [Function getLastCreatedEntityKey],
-    "mergeData": [Function mergeData],
-    "replaceData": [Function replaceData],
-  },
+  "entityMap": Object {},
     "selectionAfter": Object {
     "anchorKey": "4sa5t",
     "anchorOffset": 0,
     "focusKey": "4sa5t",
     "focusOffset": 0,

{"blockMap": {"4sa5t": {"characterList": [{"entity": null, "style": Array []}, {"entity": null, "style": Array []}, {"entity": null, "style": Array []}, {"entity": null, "style": Array []}, {"entity": null, "style": Array []}, {"entity": null, "style": Array []}, {"entity": null, "style": Array []}], "data": {}, "depth": 0, "key": "4sa5t", "text": "Bonjour", "type": "unstyled"}}, "entityMap": {}, "selectionAfter": {"anchorKey": "4sa5t", "anchorOffset": 0, "focusKey": "4sa5t", "focusOffset": 0, "hasFocus": false, "isBackward": false}, "selectionBefore": {"anchorKey": "4sa5t", "anchorOffset": 0, "focusKey": "4sa5t", "focusOffset": 0, "hasFocus": false, "isBackward": false}}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

Here's a Jest test extracted from our tests suite:

import React from 'react';
import {shallow} from 'enzyme';
import Draft, {convertFromHTML, ContentState} from 'draft-js';

import BlockText from '../BlockText';

const exampleText = '<div>Hello</div>';
const blocksFromHTML = convertFromHTML(exampleText);
const state = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap
);

describe('BlockText', () => {
  it('should not be empty', () => {
    const wrapper = shallow(<BlockText text={Draft.convertToRaw(state)}/>);
    // works in 0.10.4 but fails in 0.10.5!
    expect(wrapper.find('DraftEditor').prop('editorState').getCurrentContent()).toEqual(state); 
  });
});

import React from 'react';
import PropTypes from 'prop-types';
import Draft, {Editor, EditorState} from 'draft-js';

function BlockText(props) {
  if (props.text) {
    const editorState = EditorState.createWithContent(Draft.convertFromRaw(props.text));
    return (
      <div className="block-text">
        <div className="block-text-content">
          <div className="rich-text-editor readonly">
            <Editor
              readOnly
              editorState={editorState}
            />
          </div>
        </div>
      </div>
    );
  }
  return null;
}

BlockText.propTypes = {
  text: PropTypes.object
};

export default BlockText;

What is the expected behavior?

editorState.getCurrentContent() should contain the complete state including entityMap

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

It was working in 0.10.4 but it does not work anymore in 0.10.5. I've read the changelog but, as far as I understand, nothing should have changed ? 😉

[davidspiess]

Same problem here

[tgus]

I'm not sure if this is related but I have an issue where the Firefox 58 browser returns null from convertFromHTML() whereas Chrome/Chromium returns the desired contentBlocks and entityMap data.

const sampleMarkup = '<b>Text</b>';
const blocksFromHTML = convertFromHTML(sampleMarkup); // returns null in Firefox but not in Chrome/Chromium

[ghost]

It's actually not. The object is hiding the actual entity collection and only making it accessible through the accessor functions. Tools that then rely on the standard JSON access patterns such as testing frameworks or Redux, then display an empty object, because they cannot access the internals.