React-draft-wysiwyg: Upon uploading image using editor file-uploader, editor could not read img tag. "Unknown DraftEntity key: null." erros occurs

[ShrawanLakhe]

When i upload image using file-uploader of editor and save the content, it is working fine. But when i try to load the saved content in the editor that has img tag, it throws error saying "Unknown DraftEntity key: null."

Here is the stack trace message:
stack
:
"Invariant Violation: Unknown DraftEntity key: null.↵ at invariant (webpack-internal:///15:42:15)↵ at Object.__get (webpack-internal:///224:166:27)↵ at ContentState.getEntity (webpack-internal:///333:155:24)↵ at eval (webpack-internal:///1396:6:208832)↵ at DraftEditorContents.render (webpack-internal:///1416:115:28)↵ at eval (webpack-internal:///995:793:21)↵ at measureLifeCyclePerf (webpack-internal:///995:73:12)↵ at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (webpack-internal:///995:792:25)↵ at ReactCompositeComponentWrapper._renderValidatedComponent (webpack-internal:///995:819:32)↵ at ReactCompositeComponentWrapper.performInitialMount (webpack-internal:///995:359:30)"
__proto__
:
Object

But once i removed the img tag, the editor is loading the content fine without any errors.

Please help me solve the issue

[ShrawanLakhe]

this issue was resolved when i updated the package. Thank you for this awesome editor @jpuri

[zhouyingkai1]

@ShrawanLakhe hello, how do you fix it, and what's your version

[ChuckIrvine]

@ShrawanLakhe can you provide some more detail on what you did to resolve this problem? When you updated which package?

[ShrawanLakhe]

I was having the issue with uploading image, but once i updated the package to the latest version at that time, it was automatically resolved.

Below is my package.json file:

"draft-js": "^0.10.4",
"draft-js-export-html": "^1.2.0",
"draftjs-to-html": "^0.7.4",
"html-to-draftjs": "^1.0.1",

[jperasmus]

I am experiencing this same problem even with those exact same version numbers as suggested by @ShrawanLakhe

[jperasmus]

Found the cause of the error in my case. If the content starts with an <img> tag, it crashes with this error. Adding a blank <p></p> tag at the start of my content fixed the issue. Definitely think this is a defect that should be reopened.

[jpuri]

@jperasmus: plz note that editor can not support just any html. Only the html products by editor itself can be converted back to editor content using "html-to-draftjs".

[jperasmus]

Hi @jpuri

Thanks, it is possible that the way we are using it is incorrect.

We use html-to-draftjs to convert the stored string of HTML text the "blocks" format. We then use ContentState from draft-js like this:

ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap)

The output from the above is passed to the EditorState.createWithContent(output) method to create our initial editor state. This editor state is passed to the component and updated whenever the editor state changes.

Once we save to the DB again, we use the draftjs-to-html plugin to convert the content to an HTML string again.

What I've done for now is just to ensure that if the HTML content does not begin with a div or p tag, just to wrap the content, which seems to work okay for now.

[marcaaron]

@jperasmus Thanks for pointing this out... I was having the same issue and this seems to have fixed it. But is there a reason the editor has no issues starting with a <p> tag but struggles with the <img> ?? @jpuri you've said the editor can not support 'just any' html... what does this mean exactly?

[jpuri]

draftjs-to-html can take care of only html generated by react-draft-wysiwyg. react-draft-wysiwyg actually produces content surrounded by <p> tag.

[marcaaron]

I think the editor might not always be producing content surrounded by a <p> tag? E.g. when adding, inserting, and deleting images it's possible to end up with the image tags as the first element. i.e. after converting with draft-js-to-html... and then if consumed by html-to-draftjs will cause errors.

Would it make sense at all to provide validation for this in html-to-draftjs? the issue of ending up with an <img> tag first seems to occur often enough that auto-wrapping the html input if it does not start with valid html seems like a potential solution.

[jperasmus]

@marcaaron this was what I found as well and why I ended up checking the output when saving and wrapping the content with a div or p if needed.

[jpuri]

@marcaaron : there is actually no validation in html-to-draftjs but its way HTML parsing algo is written atm, it needs some refactoring to fix this.