Avoid HTML escaping when setting editor value

[carlosabalde]

Hi,

As mentioned in https://github.com/summernote/react-summernote/pull/51, after that PR was merged, I don't find a way to properly initialise a ReactSummernote component with HTML content. For example, if this.props.value is set to Hello <b>world</b>! and I use children={ this.props.value }, the editor is initialised with the HTML escaped version (i.e. Hello <b>world</b>!).

I guess I'm missing something obvious here, but I still not able to find the solution. Help? :)

[wonieeVicky]

I have the same Issue. So I use dangeroulySetInnerHTML in {chilren} props :)

<ReactSummernote
      children={<div dangerouslySetInnerHTML={{ __html: value }}></div>}

[carlosabalde]

In the beginning I tried that approach too, but it adds and extra div wrapper to edited contents and that was not acceptable. Then I 'fixed' this setting the initial value using jQuery during componentDidMount(). That worked fine, but then a few more bugs popped up. At the end I switched to a different React WYSIWYG editor. I liked React Summernote simplicity and cleanness, but it looks like the project is slightly abandoned.

In any case, thanks a lot for the hint! :)

[DenisKhay]

You also can just unescape the string before use it in the editor

const unescapeString = (str: string): string => {
    const newString = new DOMParser().parseFromString(str ?? '', 'text/html').documentElement.textContent;
    return newString != null ? DomPurify.sanitize(newString) : str;
}

[aldosolis]

You can do the following <ReactSummernote onInit={({summernote}) => summernote('code', yourcodegoeshere)} />