react-draft-wysiwyg Default Value Style doesn't load

Question

I am not able to load default value style in React-draft-wysiwyg . Codesandbox Link: Editor

what I tried ? I am using react-draft-wysiwyg library for editor and draft-js for initializing and converting , and I have passed default value with style. if i remove style tag it works fine. but after adding style it doesn't work. how to fix style issue in default value

import { Editor } from "react-draft-wysiwyg";
import { EditorState, ContentState, convertFromHTML } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
export default function App() {
  const defaultValueRender = !true;
  const defaultValue = "**<p style="color:red**">This is a paragraph.</p>";

  const initialState = () => EditorState.createEmpty();

  const [editorState, setEditorState] = useState(initialState);

  useEffect(() => {
    if (defaultValue !== "") {
      setEditorState(
        EditorState.createWithContent(
          ContentState.createFromBlockArray(convertFromHTML(defaultValue))
        )
      );
    }
  }, []);

  const onChange = async (value) => {
    await setEditorState(value);
  };
  return (
    <div className="App">
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={(value) => onChange(value)}
        stripPastedStyles
        ariaLabel="draftEditor"
      />
    </div>
  );
}

Answer 1

You could use html-to-draftjs for converting html strings with inline styles.

import React, { useState } from 'react';
import PropTypes from 'prop-types';
// DRAFT
import { EditorState, ContentState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
// PURIFY
import DOMPurify from 'dompurify';
// INITIAL STATE
// EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(defaultValue)))
const getInitialState = (defaultValue) => {
  if (defaultValue) {
    const blocksFromHtml = htmlToDraft(defaultValue);
    const { contentBlocks, entityMap } = blocksFromHtml;
    const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
    return EditorState.createWithContent(contentState);
  } else {
    return EditorState.createEmpty();
  }
};

const DraftEditor = ({ defaultValue, onChange }) => {
  const [editorState, setEditorState] = useState(getInitialState(defaultValue));
  const onEditorChange = (val) => {
    setEditorState(val);
    const rawContentState = convertToRaw(val.getCurrentContent());
    const htmlOutput = draftToHtml(rawContentState);
    const cleanHtml = DOMPurify.sanitize(htmlOutput);
    onChange && onChange(cleanHtml);
  };

  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={onEditorChange} />
     );
};
DraftEditor.propTypes = {
  defaultValue: PropTypes.string,
  onChange: PropTypes.func.isRequired,
};

export default DraftEditor;

Answer 2

thanks to gokhan answer, i finally solved to get initial values to react-draft-wysiwyg + react-hook-form

import React, { useState, useEffect, useCallback } from 'react'
import { ContentState, EditorState, convertToRaw } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import htmlToDraft from 'html-to-draftjs'
import draftToHtml from 'draftjs-to-html'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

import { styContainer, styWrapper, styToolbar, styEditor } from './style'

const getInitialState = (defaultValue) => {
  if (defaultValue) {
    const blocksFromHtml = htmlToDraft(defaultValue)
    const { contentBlocks, entityMap } = blocksFromHtml
    const contentState = ContentState.createFromBlockArray(
      contentBlocks,
      entityMap
    )
    return EditorState.createWithContent(contentState)
  } else {
    return EditorState.createEmpty()
  }
}

const RichEditor = ({ defaultValue, onChange }) => {
  const [editorState, setEditorState] = useState()
  const [defaultValueState, setdefaultValueState] = useState()

  useEffect(() => {
    if (defaultValue) {
      const initialState = getInitialState(defaultValue)
      onEditorDefaultStateChange(initialState)
    }
  }, [onEditorDefaultStateChange, defaultValue])

  const onEditorDefaultStateChange = useCallback(
    (editorState) => {
      setdefaultValueState(editorState)
      return onChange(
        draftToHtml(convertToRaw(editorState.getCurrentContent()))
      )
    },
    [onChange]
  )

  const onEditorStateChange = useCallback(
    (editorState) => {
      setEditorState(editorState)
      return onChange(
        draftToHtml(convertToRaw(editorState.getCurrentContent()))
      )
    },
    [onChange]
  )

  return (
    <div className={styContainer}>
      <Editor
        editorState={editorState ? editorState : defaultValueState}
        onEditorStateChange={onEditorStateChange}
        wrapperClassName={styWrapper}
        toolbarClassName={styToolbar}
        editorClassName={styEditor}
      />
    </div>
  )
}

RichEditor.propTypes = {}

RichEditor.defaultProps = {}

export default RichEditor