wei1306
commented
3 years ago Open ynnelson opened 3 years ago
wei1306
commented
3 years ago 
thibaudcolas
commented
3 years ago If at all possible, I would recommend avoiding the built-in convertFromHTML and instead using a separate library like https://github.com/HubSpot/draft-convert, where you will be able to configure the conversion to work like you expect.
You might also be interested in draftjs-filters, a library I wrote to detect cases like this and transform the output of convertFromHTML into the structure my editor expects. This works well for my use case of improving copy-pasting of rich text (including images), but it still falls short in some cases, hence why I wouldn’t recommend convertFromHTML if there are other options.
ramirezabel
commented
2 years ago @ynnelson did you ever figure this out? I am currently having the same issue, like you I am using the plugins editor where the image plugin expects an atomic block. Unfortunately the example provided by @wei1306 does not work since it does not use the plugin editor
ynnelson
So I have been trying to get the method
convertFromHTMLto translate Images into an atomic block so that it may be compatible with thedraft-js-image-pluginsince it expects blocks of the typeatomicGiven a simple HTML structure with some text and an image out of the box the
convertFromHTMLproduces thiscontentState:Which we can see that the
imgtag takes on aunstyledblock which is not what I'd like. So I created the following function that extends the default Block Render Map to account for theimgtag:Which results in this content State:
As you can see the entityMap now only has one key and all the data for the image is no longer there. How can I get it to make the
imgtag an atomic block while still creating theIMAGEentity in the entityMap???Any help anyone can provide would be greatly appreciated. I am currently pouring over the convertFromHTML code to find some clues...