convertFromHTML returns 0 contentBlocks for an empty string or an empty tag

[mstoltenburg]

Do you want to request a feature or report a bug?
Report a 🐛

What is the current behavior?
convertFromHTML returns zero contentBlocks for an empty string or an empty tag like <p></p> or <em></em>. When I use that result to create a ContentState with ContentState.createFromBlockArray(), the ContentState can't be used in e.g.EditorState.createWithContent() or ContentState.hasText().

Please provide the steps to reproduce and if possible a minimal demo of the problem.

1. convert empty tag like e.g. convertFromHTML('<p></p>')
2. use the result in ContentState.createFromBlockArray()
3. Try to use that content state in e.g. EditorState.createWithContent(content) or content.hasText()

import { ContentState, convertFromHTML } from 'draft-js';

const { contentBlocks, entityMap } = convertFromHTML('<p></p>');
const content = ContentState.createFromBlockArray(contentBlocks, entityMap);
const hasText = content.hasText();

// throws TypeError: blockMap.first(...) is undefined

https://jsfiddle.net/xygf095s/

What is the expected behavior?
Return a usable ContentState for empty strings or empty tags converted with convertFromHTML or maybe that the blockMap size is equal for ContentState.createFromText and ContentState.createFromBlockArray if I converted an empty string or tag with convertFromHTML.

const emptyString = '':
const { contentBlocks, entityMap } = convertFromHTML(emptyString);
ContentState.createFromText(emptyString).blockMap.size === 1
ContentState.createFromBlockArray(contentBlocks, entityMap).blockMap.size === 0

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
draft-js 0.11.1
Chrome 78

[davoscript]

Hi @mstoltenburg, I was having the same issue, I sent this pull request (#2240) yesterday which fixes the problem in case you want to take a look at it.

[mstoltenburg]

Very nice. My fix at the moment is quite similar to yours 😃

export function createEditorStateWithContent(html) {
    const content = createContentStateFromHtml(html);

    return content.getBlockMap().size
        ? EditorState.createWithContent(content)
        : EditorState.createEmpty();
}

export function createContentStateFromHtml(html) {
    const { contentBlocks, entityMap } = convertFromHTML(html);

    return ContentState.createFromBlockArray(contentBlocks, entityMap);
}

I'm still not sure if this should be expected behaviour, that using convertFromHTML on e.g. the HTML string <p></p> creates zero blocks at all.

[mrkev]

Merged #2240. Not quite sure when the next release to NPM will be, but it should be soon. The fix will be included there. Thanks to both!

[mrkev]

Merged #2240. Not quite sure when the next release to NPM will be, but it should be soon. The fix will be included there. Ty 👍