Unknown DraftEntity key: null.

Error:

Code to run:

        const contentBlock = htmlToDraft(sanitizeHtml(this.wysiwygHtml.value, sanitizeRules));
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        const newEditorState = EditorState.createWithContent(contentState);
        this.onEditorStateChange(newEditorState);

Code to paste:

<a href="https://test.com" target="_blank" data-saferedirecturl="https://www.test.com/url?hl=ru&amp;q=https://test.com&amp;source=gmail&amp;ust=1518687009434000&amp;usg=AFQjCNGJCuM_hG6wsHlvqVTpepzndFgVkQ"><img src="https://proxy/28oL4gKFefkX8wOuCE5zIS5UPzeCfGKO-3mjWWCNk_HZOIIhR9Kxyx9sKG2nNKU_SWOVY_dk_lVVJKxv-P7pRe__6VurG3wi6kOwiHXAERe7RjM=s0-d-e1-ft#https://test.com/images/signatures/new/ira.jpg" alt="" class="CToWUd"></a>

Versions:

    "react-draft-wysiwyg": "^1.12.7",
    "draft-js": "^0.10.5",
    "draftjs-to-html": "^0.8.2",
    "html-to-draftjs": "^1.1.2"

Issue Analytics

State:
Created 6 years ago
Comments:46 (7 by maintainers)

Top GitHub Comments

23reactions

paradoxxxzerocommented, Jan 4, 2019

This is a very real problem and I got a good reproduction case:

Go to https://jpuri.github.io/react-draft-wysiwyg/#/demo
Insert an image in the first editor
Go up to place the caret above the image and press delete to remove the very first <p>
You should have:

<img src="image.jpg" alt="undefined" style="float:none;height: auto;width: auto"/>
<p></p>

in the html preview.

First Problem: The image is still in the generated html but not in the editor anymore.

Second problem: If you initialize an editor with this HTML (which is generated by draftjs-to-html) you get the above crash: Invariant Violation: Unknown DraftEntity key: null.

–

Edit: Here’s the broken state json dump:

> JSON.stringify(editorState.getCurrentContent().toJSON(), null, 2)

{
  "entityMap": {},
  "blockMap": {
    "c9cv2": {
      "key": "c9cv2",
      "type": "atomic",
      "text": "",
      "characterList": [],
      "depth": 0,
      "data": {}
    },
    "2gj8i": {
      "key": "2gj8i",
      "type": "unstyled",
      "text": " ",
      "characterList": [
        {
          "style": [],
          "entity": "1"
        }
      ],
      "depth": 0,
      "data": {}
    }
  },
  "selectionBefore": {
    "anchorKey": "c9cv2",
    "anchorOffset": 0,
    "focusKey": "c9cv2",
    "focusOffset": 0,
    "isBackward": false,
    "hasFocus": false
  },
  "selectionAfter": {
    "anchorKey": "c9cv2",
    "anchorOffset": 0,
    "focusKey": "c9cv2",
    "focusOffset": 0,
    "isBackward": false,
    "hasFocus": false
  }
}

The first block (c9cv2) crash because block.getEntityAt(0) is null here: https://github.com/jpuri/react-draft-wysiwyg/blob/f0da14fe8d082ee078da1c2eceac3789d400db26/src/renderer/index.js#L11

13reactions

namnh06commented, Aug 23, 2018

I solved this error. I do a function which one add an image into editor, it’s mean I have to get the link of image then add it to img tag of HTML, problem is here. Add it into <p><img src="your_image_link" ></img></p> before parse it into editor again. The p tag is required in editor.