Rich Text editor based on mui-rte which exposes innerHTML and innerTEXT

MuiRichTextEditor.tsx

import MUIRichTextEditor from 'mui-rte'
import React from 'react'
import { stateToHTML } from 'draft-js-export-html'
import { TMUIRichTextEditorProps } from 'mui-rte/src/MUIRichTextEditor'

type CallbackProps = {
  data: string
  html: string
  text: string
  editorState: any
}

type RichTextProps = {
  rteRef: any
  getContent: (data: CallbackProps) => void
  rteProps?: TMUIRichTextEditorProps
}

export default function RichText({
  rteRef,
  getContent,
  rteProps
}: RichTextProps): JSX.Element {
  let _editorState: any = null

  return (
    <MUIRichTextEditor
      controls={[
        'bold',
        'italic',
        'underline',
        'bulletList',
        'numberList',
        'undo',
        'redo',
        'clear'
      ]}
      label={'Type your message here...'}
      {...rteProps}
      ref={rteRef}
      onChange={(state) => {
        _editorState = state
      }}
      onSave={(data) => {
        const html = stateToHTML(_editorState.getCurrentContent())
        const temp = document.createElement('div')
        temp.innerHTML = html
        getContent({
          data,
          editorState: _editorState,
          html: html,
          text: temp.textContent || temp.innerText
        })
      }}
    />
  )
}