Невозможно редактировать текст в редакторе Reaction-draft-wysiwyg, загруженном в componentDidMount

Question

Я использую response-draft-wysiwyg.Editor в моем проекте React / Redux с SSR. Редактор использует DOM для создания выпадающих панелей инструментов, поэтому, чтобы избежать проблем с SSR, я создаю Редактор в componentDidMount. Компонент отображается правильно, контент может быть выбран, но невозможно редактировать любой контент.

Если я не жду componentDidMount() и помещаю непосредственно Editor в render(), содержимое редактируется, но при прямой загрузке из SSR выпадающие списки панели инструментов не генерируются, потому что реагировать-draft-wysiwyg.Editor использует DOM.

import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'antd';
import { EditorState, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import htmlToDraft from 'html-to-draftjs';
import { stateToHTML } from 'draft-js-export-html';

class Wysiwyg extends React.Component {
  constructor(props) {
    super(props);

    this.html = props.data;

    const contentBlock = typeof window !== 'undefined' ? htmlToDraft(this.html) : null;

    if(contentBlock) {
      const
        contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks),
        editorState = EditorState.createWithContent(contentState);

      this.state = {
        editorState: editorState,
        editor: null,
      };
    } else {
      this.state = {
        editorState: null,
        editor: null,
      };
    }

  }

  componentDidMount() {
    const
      {
        state,
        onEditorStateChange,
      } = this,
      {
        editorState,
      } = state,
      editor = (
        <Editor
          editorState={editorState}
          onEditorStateChange={onEditorStateChange}
        />
      );

    this.setState({
      ...state,
      editor: editor,
    });
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  };

  render() {
    const
      {
        props,
        state,
      } = this,
      {
        form,
        fieldId,
      } = props,
      {
        editorState,
        editor,
      } = state,
      {
        getFieldDecorator,
      } = form;

    const fieldOptions = {
      initialValue: editorState,
    }

    return (
      <Form.Item
        hasFeedback
        label="DESCRIPTION"
      >
        {editor ? getFieldDecorator(fieldId, fieldOptions)(editor) : null}
      </Form.Item>
    );
  }
}

export default Wysiwyg;

Содержание редактора не редактируется.

У меня нет сообщений об ошибках. Я невежественен....

Answer 1

Редактор не может пройти через состояние. Поэтому я установил логическое условие в ожидании componentDidMount.

import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'antd';
import { EditorState, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import htmlToDraft from 'html-to-draftjs';

class Wysiwyg extends React.Component {
  constructor(props) {
    super(props);

    this.html = props.data;

    const contentBlock = typeof window !== 'undefined' ? htmlToDraft(this.html) : null;

    if(contentBlock) {
      const
        contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks),
        editorState = EditorState.createWithContent(contentState);

      this.state = {
        editorState: editorState,
        editor: null,
      };
    } else {
      this.state = {
        editorState: null,
        editor: null,
      };
    }

  }

  componentDidMount() {
    this.setState({
      editor: true,
    });
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  };

  render() {
    const
      {
        props,
        state,
        onEditorStateChange,
      } = this,
      {
        form,
        fieldId,
      } = props,
      {
        editorState,
        editor,
      } = state,
      {
        getFieldDecorator,
      } = form;

    const fieldOptions = {
      initialValue: editorState,
    }

    return (
      <Form.Item
        hasFeedback
        label="DESCRIPTION"
      >
        {editor ? getFieldDecorator(fieldId, fieldOptions)(
          <Editor
            editorState={editorState}
            onEditorStateChange={onEditorStateChange}
          />
        ) : null}
      </Form.Item>
    );
  }
}

export default Wysiwyg;