jpuri / html-to-draftjs

MIT License
161 stars 104 forks source link

Error: Unknown DraftEntity key. #27

Open paduvi opened 7 years ago

paduvi commented 7 years ago

I'm having trouble with Error: Unknown DraftEntity key. with following code:

const htmlToContentState = (html = "") => {
    const {contentBlocks, entityMap} = htmlToDraft(html);
    return ContentState.createFromBlockArray(contentBlocks, entityMap);
}
"html-to-draftjs": "0.1.0-beta14",
"react-draft-wysiwyg": "^1.10.7",

This is my html sample:

<p><strong>Hỗ trợ công nghệ</strong><strong> cảm ứng thông minh, dễ dàng một chạm để điều khiển cuộc gọi và âm nhạc. Tương thích với hầu hết thiết bị hiện nay, smartphone, máy tính bảng, laptop...</strong></p>
<figure><img alt="" src="http://i.imgur.com/qSq4vIa.jpg"/></figure>
paduvi commented 7 years ago

Current fix temporarily by stripping all figure tag. I know there would be many unknown tags, not only figure. I think we need a more complete approach than this:

const htmlToContentState = (html = "") => {
    const {contentBlocks, entityMap} = htmlToDraft(preprocessHtml(html));
    return ContentState.createFromBlockArray(contentBlocks, entityMap);
}

const preprocessHtml = (html = "") => {
    const $ = cheerio.load(html, {
        normalizeWhitespace: true,
        decodeEntities: false
    });

    $.root().find('*').contents().filter((i, el) => el.type === 'comment').remove();
    $("figure").contents().each((i, el) => {
        $(el).insertBefore($(el).parent());
    });
    $("script, noscript, figure").remove();

    return $('body').html() || "";
}
jpuri commented 7 years ago

@paduvi : plz not that this lib is made to handle only the html generated by https://github.com/jpuri/react-draft-wysiwyg. It can not handle all html tags.