Demo 6

[cjmorrison]

Demo 6 in https://jpuri.github.io/react-draft-wysiwyg/#/docs was not working.

sorry if this has already been pointed out. I have a working sample here

https://codesandbox.io/s/youthful-rui-07oejr?file=/src/App.tsx:913-1007

it looks like createFromBlockArray requires both the block and entity values, and instead of defaultEditorState I used defaultContentState also needed to convert it to raw with convertToRaw.

[kanso-git]

Here is your code working, i did some adjustments

import React from "react";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { convertFromHTML, ContentState, EditorState } from "draft-js";

const html =
  "<p>Lorem ipsum " +
  "dolor sit amet, consectetur adipiscing elit. Mauris tortor felis, volutpat sit amet " +
  "maximus nec, tempus auctor diam. Nunc odio elit,  " +
  "commodo quis dolor in, sagittis scelerisque nibh. " +
  "Suspendisse consequat, sapien sit amet pulvinar  " +
  "tristique, augue ante dapibus nulla, eget gravida " +
  "turpis est sit amet nulla. Vestibulum lacinia mollis  " +
  "accumsan. Vivamus porta cursus libero vitae mattis. " +
  "In gravida bibendum orci, id faucibus felis molestie ac.  " +
  "Etiam vel elit cursus, scelerisque dui quis, auctor risus.</p>";

const EditorToolbarWhenFocused = () => {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  React.useEffect(() => {
    const obj = convertFromHTML(html);
    const value = ContentState.createFromBlockArray(
      obj.contentBlocks,
      obj.entityMap
    );

    setEditorState(EditorState.createWithContent(value));
  }, [html]);
  return (
    <Editor
      toolbarClassName="demo-toolbar-absolute"
      wrapperClassName="demo-wrapper"
      editorClassName="demo-editor"
      editorState={editorState}
      toolbarOnFocus
      toolbar={{
        options: ["inline", "blockType", "fontSize", "fontFamily"],
        inline: {
          options: [
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "monospace"
          ],
          bold: { className: "bordered-option-classname" },
          italic: { className: "bordered-option-classname" },
          underline: { className: "bordered-option-classname" },
          strikethrough: { className: "bordered-option-classname" },
          code: { className: "bordered-option-classname" }
        },
        blockType: {
          className: "bordered-option-classname"
        },
        fontSize: {
          className: "bordered-option-classname"
        },
        fontFamily: {
          className: "bordered-option-classname"
        }
      }}
    />
  );
};
export default EditorToolbarWhenFocused;

[cjmorrison]

Sorry I am a bit new to codebox and I don't think my code saved properly. However, I think your solution is much better then my own. I was getting a "editorState.getImmutable" issue when using editorState which it why I had thought to use componentState instead. Brilliant use of React.useEffect I had not even considered that.