Добавить поддержку для пользовательского типа блока в Reaction-draft-wysiwyg

Question

В моем проекте я использую response-draft-wysiwyg в качестве текстового редактора. Я пытаюсь изменить поведение блока кода. Прямо сейчас, когда я выбираю блок кода из выпадающего списка, он вводит

<pre></pre>

тег в редакторе, но я хочу немного изменить его, чтобы я мог иметь

<pre><code></code></pre>

,

Как я могу добиться этого в реакции-черновик-wysiwyg? Ниже мой код:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { Editor } from 'react-draft-wysiwyg';
import 'draft-js/dist/Draft.css';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './editor.css';
import uploadDocumentFile from '../../../utils/imageApiHelper';
import draftToHtml from 'draftjs-to-html';
import { convertToRaw } from 'draft-js';//DefaultDraftBlockRenderMap
import CustomOption from './CustomOption';
// const Immutable = require('immutable');
import CodeBlock from './CodeBlock';

class HTMLEditor extends Component{
  constructor(props) {
    super(props);
    this.uploadCallback = this.uploadCallback.bind(this);
    this.myBlockRenderer = this.myBlockRenderer.bind(this);
  }

  myBlockRenderer(contentBlock) {
    const type = contentBlock.getType();
    if (type === 'code') {
      return {
        component: CodeBlock,
        props: {
          children: contentBlock.getText(),
          preClassName: this.props.preClassName
        },
      };
    }
  }

  uploadCallback (file) {
    return new Promise(
      (resolve) => {
        if (file) {
          file.preview = URL.createObjectURL(file);
          uploadDocumentFile(file)
            .then((res) => {
              const imageUrl = (res && res.data && res.data.file_path) ? res.data.file_path : '';
              resolve({data: {link: imageUrl}});
            })
            .catch(()=> {
              resolve({data: {link: ""}});
            });
        }
      }
    );
  }

  render() {
    // const blockRenderMap = Immutable.Map({
    //   'code-block': {
    //     // element is used during paste or html conversion to auto match your component;
    //     // it is also retained as part of this.props.children and not stripped out
    //     element: 'pre',
    //     wrapper: <CodeBlock/>
    //   },
    // });
    // const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);
    //blockRendererFn={this.myBlockRenderer}
    // blockRenderMap={extendedBlockRenderMap}

    return (
      <div className="text_editor">
        <Editor
          toolbarClassName="toolbar-class"
          wrapperClassName="wrapper-class"
          editorClassName="editor-class"
          editorState={this.props.editorState}
          onEditorStateChange={this.props.onEditorStateChange}
          onBlur={this.props.onBlur}
          toolbar={{
            image: {
              className: 'editor_uploader',
              uploadCallback: this.uploadCallback,
              urlEnabled: true,
              alt: { present: true, mandatory: true }
            },
          }}
          toolbarCustomButtons={[<CustomOption />]}
          hashtag={{
            separator: ' ',
            trigger: '#',
            className: 'hashtag-className',
          }}
          mention={{
            separator: ' ',
            trigger: '@',
            suggestions: [
            ],
          }}
          customBlockRenderFunc={this.myBlockRenderer}
        />
        <div className="form-group">
          <textarea
            className="form-control"
            rows="20"
            disabled="true"
            value={draftToHtml(convertToRaw(this.props.editorState.getCurrentContent()))}
          />
        </div>
      </div>
    );
  }
}

HTMLEditor.defaultProps = {
  editorState: {},
  preClassName: "language-* language-markup"
};

HTMLEditor.propTypes = {
  onBlur: PropTypes.func.isRequired,
  onEditorStateChange: PropTypes.func.isRequired,
  onHtmlContentChange: PropTypes.func,
  editorState: PropTypes.object.isRequired,
  preClassName: PropTypes.string
};

export default HTMLEditor;

Может ли кто-нибудь помочь мне добиться этого? Я застрял здесь.