0

I'm looking for some help on how to convert a string of html like below to draftjs and convert back to html to display on a page as html without a rich text editor or WYSIWYG:

const htmlString = `<p>hello world</p>
   <ul>
     <li>hello</li>
     <li>world</li>
   <ul>
   <p>this is my string</p>`

I have used draft-js method convertFromHtml which results in this:

{
    "contentBlocks": [
        {
            "key": "f9aci",
            "type": "unstyled",
            "text": "hello world  ",
            "characterList": [
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                }
            ],
            "depth": 0,
            "data": {}
        },
        {
            "key": "boi9l",
            "type": "unordered-list-item",
            "text": "hello ",
            "characterList": [
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                }
            ],
            "depth": 0,
            "data": {}
        },
        {
            "key": "fbf9j",
            "type": "unordered-list-item",
            "text": "world  ",
            "characterList": [
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                }
            ],
            "depth": 0,
            "data": {}
        },
        {
            "key": "ejvm",
            "type": "unstyled",
            "text": "this is my string",
            "characterList": [
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                },
                {
                    "style": [],
                    "entity": null
                }
            ],
            "depth": 0,
            "data": {}
        }
    ],
    "entityMap": {}
}

i have tried using convertToRaw and then ConvertFromRaw with no avail just getting errors

Invariant Violation: invalid RawDraftContentState

My ultimate goal is to convert to draftjs for the server but when i receive the data to be able to convert back and display as html.

0 Answers0