Unknown DraftEntity key: null.
Open
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 163
- Forks
- 104
- PR merge metrics
- No merged PRs in 30d
Description
When using plug-in html-to-draftjs, if there are a lot of inline styles in the text, and multiple images will be wrong.
Error: Unknown DraftEntity key: null.
at invariant (roadhog.dll.js:5142)
at Object.__get (roadhog.dll.js:35372)
at ContentState.getEntity (roadhog.dll.js:45659)
at eval (react-draft-wysiwyg.js?3aba:66)
at DraftEditorContents.render (roadhog.dll.js:158320)
at roadhog.dll.js:113670
at measureLifeCyclePerf (roadhog.dll.js:112950)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (roadhog.dll.js:113669)
at ReactCompositeComponentWrapper._renderValidatedComponent (roadhog.dll.js:113696)
at ReactCompositeComponentWrapper.performInitialMount (roadhog.dll.js:113236)
html like this is wrong
<p>sdad</p>
<p>fsasf </p>
<p>dsfafa</p>
<p></p>
<img src="http://qqd.oss-cn-shanghai.aliyuncs.com/qqd/files/image/1511319379141.jpg?E…OSSAccessKeyId=LTAIL65DTXQAWPOw&Signature=aZe%2BHxuxvugALiJat3cck0a8xKk%3D" alt="" style="float:none;height: auto;width: 100px"/>
<p>sdfsfsdfsdfdsffsf</p>
<p>sfadasdffdgnsmgngdsfsf</p>
<p><span style="color: rgb(36,41,46);background-color: rgb(255,255,255);font-size: 14px;">The example is a bit misleading. It probably shouldn't try to use</span> <span style="color: rgb(36,41,46);background-color: rgb(255,255,255);font-size: 14px;"><code>img</code></span> <span style="color: rgb(36,41,46);background-color: rgb(255,255,255);font-size: 14px;">directly as the atomic block, but should instead use a wrapper div and apply the width to that. Then the</span> <span style="color: rgb(36,41,46);background-color: rgb(255,255,255);font-size: 14px;"><code>img</code></span> <span style="color: rgb(36,41,46);background-color: rgb(255,255,255);font-size: 14px;">can be an arbitrary width, but the div width should remain 100%.</span></p>
<img src="http://qqd.oss-cn-shanghai.aliyuncs.com/qqd/files/image/1511319471896.jpg?E…OSSAccessKeyId=LTAIL65DTXQAWPOw&Signature=jm9S1ji7g57sDn%2B3zQg5bfW3KYY%3D" alt="" style="float:none;height: auto;width: 200px"/>
A html string like this will display normally:
<p>222</p>
<p>kl khjhj jk hk </p>
<p> </p>
<img src="http://qqd.oss-cn-shanghai.aliyuncs.com/qqd/files/image/1511314523589.jpg?E…2&OSSAccessKeyId=LTAIL65DTXQAWPOw&Signature=sVUmBEUhZzrm4QlJuUZQNPTFW4o%3D" alt="" style="float:none;height: auto;width: 100px"/>
<p>dsaad </p>
<p>dfafafasfdaf</p>
<p> </p>
<img src="http://qqd.oss-cn-shanghai.aliyuncs.com/qqd/files/image/1511323398697.jpg?E…0&OSSAccessKeyId=LTAIL65DTXQAWPOw&Signature=E6vctlCqQxORqScZZLlP5ogg1sQ%3D" alt="" style="float:none;height: auto;width: auto"/>
<p>dsdadadadadas</p>
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with html-to-draftjs using the supplied HTML containing multiple inline styles and images, then inspect the Unknown DraftEntity key: null stack trace. Done means the input renders normally without the DraftEntity error and multiple images display correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100