MUI-RTE default value not being parsed from HTML

Viewed 1025

I'm populating the defaultValue of MUI-RTE with the following code:

    // 1. Convert the HTML
    const contentHTML = convertFromHTML(tenant.config.confidentiality.text)

    // 2. Create the ContentState object
    const state = ContentState.createFromBlockArray(
        contentHTML.contentBlocks,
        contentHTML.entityMap
    )

    // 3. Stringify `state` object from a Draft.Model.Encoding.RawDraftContentState object
    const content = JSON.stringify(convertToRaw(state))

and then on the component I set content to the defaultValue prop:

<MUIRichTextEditor
                            key='text-editor'
                            label='Start typing confidentiality agreement...'
                            controls={[
                                'bold',
                                'italic',
                                'underline',
                                'strikethrough',
                                'link',
                                'numberList',
                                'bulletList',
                                'quote',
                                'media',
                                'undo',
                                'redo',
                            ]}
                            defaultValue={content}
                            onChange={onChange}
                        />

However, on the editor the text is shown as it is on the default string:

<p>Hola, como estamos? </p> <p><br></p> <p><strong>Ahora si esta funcionando bien, lo qeu pasaba es que </strong>volvia a asignar el valor default siempre</p> <p><br></p> <ol> <li>Ok.</li> </ol>

and is not letting me edit it.

This is the onChange function:

const onChange = (data) => {
        let options = {
            entityStyleFn: (entity) => {
                const entityType = entity.get('type').toLowerCase()
                if (entityType === 'image') {
                    const data = entity.getData()
                    return {
                        element: 'img',
                        attributes: {
                            src: data.url,
                        },
                        style: {
                            // Put styles here...
                        },
                    }
                }
            },
        }
        setConfidentialityText(stateToHTML(data.getCurrentContent(), options))
    }

Can you please help me to find a solution!

thanks

1 Answers

The default value must be , a stringified

Draft.Model.Encoding.RawDraftContentState object.

Also mentioned in doc

Related