ConvertFromHTML images are converted to unstyled rather than Atomic blocks
See original GitHub issueDo you want to request a feature or report a bug? bug
What is the current behavior?
img converted with convertFromHTML are converted to unstyled div.
<div class="" data-block="true" data-editor="48f1g" data-offset-key="2g03k-0-0">
<div data-offset-key="2g03k-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
<img src="image.png" height="112" width="200">
</div>
</div>
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: **
This is the current behaviour on the master branch convertFromHTML example.
What is the expected behavior?
Should convert to atomic and use customRenderFn
Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
Master branch of Draft.js
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:12 (1 by maintainers)
Top Results From Across the Web
How to solve Draft.js convertFromHTML converting image ...
How to solve Draft.js convertFromHTML converting image <img> tags into 'unstyled' contentBlock type instead of 'atomic' content block type?
Read more >javascript - Draft-JS - Translating <img> into an atomic block ...
So I have been trying to get the method convertFromHTML to translate Images into an atomic block so that it ...
Read more >Importing and exporting HTML - Draftail
HTML import. Let's use convertFromHTML from draft-convert . We can configure it to use the same identifiers as Draftail when converting HTML.
Read more >Custom Block Rendering - Draft.js
When pasting content, or when calling convertFromHTML, Draft will convert pasted content to the respective block rendering type by matching ...
Read more >draft-js | Yarn - Package Manager
convertFromHTML breaks after converting \n string, issue #1822 (#1823) (Sannikov in ... Fix bug where block data was not removed when deleting atomic...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi is still have the same problem like @apuntovanini. I get the following back if I run above code: My HTML:
<p><img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat" /></p>
return from convertFromHTML:
{"contentBlocks":[{"key":"adbln","type":"unstyled","text":"📷","characterList":[{"style":[],"entity":"2"},{"style":[],"entity":"2"}],"depth":0,"data":{}}],"entityMap":{}}
I’m running the latest version of draft-js 0.10.4@RaoHai I fixed my issue my editing the contentBlock after the conversion. You can see the code below. I want to edit the mutability of the entity of the images to “IMMUTABLE” but don’t think that is possible.
CustomConvertFromHTML: This solves the issue of adjacent paragraphs being combined into one contentBlock.
CustomContentStateConverter: This looks for contentBlocks with “IMAGE” entities and convert the Block type to ‘atomic’. I want to change the entity to “IMMUTABLE” but right now we can only edit entity data.