Document Editor using Froala

FroalaEditor.js

const EditorComponent = forwardRef(({ defaultContent }, ref) => {
  // State
  const [state, setState] = useReducer(
    (prevState, nextState) => ({
      ...prevState,
      ...nextState
    }),
    {
      content: defaultContent || ""
    }
  );

  const editor = useRef({});

  const initializeEditor = (e, editorRef) => {
    editor.current = editorRef;
    window.editor = editorRef;
  };

  useImperativeHandle(ref, () => ({
    getContent
  }));

  const getContent = () => {
    return editor.current.html.get();
  };

  const editorConfig = {
    placeholder: "Edit Me",
    documentReady: true,
    events: {
      "froalaEditor.initialized": initializeEditor
    }
  };
  const onContentChange = model => {
    this.setState({
      content: model
    });
  };

  return (
    <div className="main-editor-container">
      <FroalaEditor
        config={editorConfig}
        tag="textarea"
        model={state.content}
        onModelChange={onContentChange}
      />
    </div>
  );
});

Useful snippet! One correction: this.setState on line 37 should just be setState.