content: import React, { Component } from 'react';
  import Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';
  import createToolbarPlugin from '@draft-js-plugins/static-toolbar';
  import editorStyles from './editorStyles.module.css';
  
  const staticToolbarPlugin = createToolbarPlugin();
  const { Toolbar } = staticToolbarPlugin;
  const plugins = [staticToolbarPlugin];
  const text =
    'The toolbar above the editor can be used for formatting text, as in conventional static editors  …';
  
  export default class SimpleStaticToolbarEditor extends Component {
    state = {
      editorState: createEditorStateWithText(text),
    };
  
    onChange = (editorState) => {
      this.setState({
        editorState,
      });
    };
  
    componentDidMount() {
      // fixing issue with SSR https://github.com/facebook/draft-js/issues/2332#issuecomment-761573306
      // eslint-disable-next-line react/no-did-mount-set-state
      this.setState({
        editorState: createEditorStateWithText(text),
      });
    }
  
    focus = () => {
      this.editor.focus();
    };
  
    render() {
      return (
        <div>
          <div className={editorStyles.editor} onClick={this.focus}>
            <Editor
              editorState={this.state.editorState}
              onChange={this.onChange}
              plugins={plugins}
              ref={(element) => {
                this.editor = element;
              }}
            />
            <Toolbar />
          </div>
        </div>
      );
    }
  }
  