Draft-js: Bug in convertFromHTML (empty lines are missing)

[matiosfree]

convertFromHTML works wrong. Let's see examples.

https://jsfiddle.net/m6z0xn4r/176/
There we see 3 different blocks instead of 4. And each block has 1 test row and 1 blank row

https://jsfiddle.net/m6z0xn4r/177/
There we see good pasting text, but third line (empty) is missed.

Actualy, I expect:
The first line //data-offset-key="b7tn6-0-0"
The second line //data-offset-key="2oula-0-0"
_empty line_ //data-offset-key="avbam-0-0"
The fourth line //data-offset-key="3l8as-0-0"

in v0.9 it worked fine

I use DraftJS 0.10 + Webpack 2.0

[cpwinn]

I ran into this (or very similar) issue this week also. Though, I could replicate the same problem in v0.9.1 so I figured it was intentional somehow. I've setup a similar test with a range of HTML block elements that I'd expect to get converted to ContentBlocks. Sadly only blocks with text get converted.

Here is my Stack Overflow question on it.
Here is my ver 0.10.0 jsfiddle
Here is my ver 0.9.1 jsfiddle

[maierson]

Same here (missing empty lines) when converting from previously saved as html content to draft-js content. DraftJS 0.10 + Webpack 2.0

[NoZiL]

I resolved many problems by using https://github.com/sstur/draft-js-import-html instead

[cpwinn]

It looks like draft-js-import-html might get the job done. I might have to manipulate my HTML a bit but at least it supports empty blocks. Also, I'll have to ignore some console warnings until they implement DraftJs 0.10 support but it could be worse.
Thanks for the tip @NoZiL.

[maierson]

Works here too on first try. Thank you @NoZiL

[maierson]

Update: turns out that draft-js-import-html doesn't import inline styles from html spans if existing. we ended up going with draft-convert which offers both options when using flat:true flag.

const contentState = convertFromHTML({
        // html restore rules
        htmlToStyle: (nodeName, node, currentStyle) => {
            if (nodeName === 'span' && node.style.color) {
                // restore custom color values 
                // must be present in the editorStyleMap
                const color = replaceAll(node.style.color, " ", "");
                return currentStyle.add(`COL_${color}`);
            } else {
                return currentStyle;
            }
        },
        htmlToEntity: (nodeName, node) => {
            // restore links
            if (nodeName === 'a') {
                return Entity.create(
                    'LINK',
                    'MUTABLE',
                    { url: node.href }
                )
            }
        }
    })(htmlString, { flat: true });

[jpca999]

i get this error : : 'convertFromHTML' is not defined no-undef

convertFromHTML

[thibaudcolas]

This is probably the same issue as #738 and #523.

[micchyboy]

This one worked for my issues https://github.com/jpuri/html-to-draftjs

Was able to read multiple new lines and text-align perfectly

[prawana-perera]

If anyone is still looking, I also ended up using draft-convert, I also had to preserve links as well (can preserve more stuff using the decordator)...and my code was as follows:

const Link = (props) => {
    const {url} = props.contentState.getEntity(props.entityKey).getData();
    return (
        <a href={url} target="_blank">
            {props.children}
        </a>
    );
};

const  findLinkEntities = (contentBlock, callback, contentState) => {
    contentBlock.findEntityRanges(
        (character) => {
            const entityKey = character.getEntity();
            return (
                entityKey != null && contentState.getEntity(entityKey).getType() === 'LINK'
            );
        },
        callback
    );
};

const decorator = new CompositeDecorator([
    {
        strategy: findLinkEntities,
        component: Link,
    }
]);
const html = '...whatever...html';

const blocksFromHTML = convertFromHTML({
            htmlToEntity: (nodeName, node, createEntity) => {
                if (nodeName === 'a') {
                    return createEntity('LINK', 'MUTABLE', { url: node.href });
                }
            }
        })(html);

const contentState = ContentState.createFromBlockArray(
            blocksFromHTML.getBlocksAsArray(),
            blocksFromHTML.getEntityMap
        );

editorState = EditorState.createWithContent(contentState, decorator);
...
...
<Editor
                    editorState={editorState}
                    ...etc
                />