How to use the react-quill.Quill.register function in react-quill

import React, { Component } from 'react';
import { Button, Icon } from 'choerodon-ui';
import PropTypes from 'prop-types';
import { isEqual } from 'lodash';
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import LightBox from 'react-image-lightbox';
import { randomWord } from '../../common/utils';
import ImageDrop from './ImageDrop';
import Link from './Link';
import './BaseEditor.scss';

Quill.register('modules/imageDrop', ImageDrop);
Quill.register('formats/link', Link);

const defaultStyle = {
  width: 498,
  height: 200,
  borderRight: 'none',
};
const defaultProps = {
  mode: 'edit',
};

const propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  value: PropTypes.any,
  placeholder: PropTypes.string,
  toolbarHeight: PropTypes.oneOfType([

Quill.register(header, true);

    // Add the SharePoint font sizes
    let SizeClass = Quill.import('formats/size');
    SizeClass.whitelist = [
      'small',
      'medium',
      'mediumplus',
      'large',
      'xlarge',
      'xlargeplus',
      'xxlarge',
      'xxxlarge',
      'xxlargeplus',
      'super'];
    Quill.register(SizeClass, true);

    return (
      <div> this._wrapperRef = ref} className={`${styles.richtext &amp;&amp; this.state.editing ? 'ql-active' : ''} ${this.props.className}`}&gt;
        <div style="{{top:this.state.wrapperTop}}" id="{this._toolbarId}">
          {
            showStyles &amp;&amp; (
               }
                        selectedKey={this.state.formats.header || 0}
                        options={this.ddStyleOpts}
                        onChanged={this.onChangeHeading}
                        onRenderOption={this.onRenderStyleOption}
                        onRenderTitle={this.onRenderStyleTitle}
                      /&gt;</div></div>

}

class BlockH extends Block {
    static create(value) {
        let node = super.create();
        console.log(node)
        return node;
    }
    static formats(node) {
        console.log(node)
        return BlockH.tagName.indexOf(node.tagName) + 1;
    }
}
BlockH.blotName = 'H';
BlockH.tagName = 'h2';
Quill.register(BlockH);

const CustomToolbar = () => (
    <div id="toolbar">
        <button></button>
        <button></button>
        <button></button>
        <button></button>
        <button></button>
        <button value="ordered"></button>
        <button value="bullet"></button>
        <button></button>
        <button></button>
        <button>
            
        </button>
    </div>

FormItemStyle,
  LongFormItemStyle,
  DefaultMailImageWidth,
  DefaultEmailContent
} from './constants'

import 'react-quill/dist/quill.core.css'
import 'react-quill/dist/quill.snow.css'

Quill.register('modules/imageResize', ImageResize)
Quill.register(BackgroundStyle, true)
Quill.register(ColorStyle, true)
Quill.register(SizeStyle, true)
Quill.register(FontStyle, true)
Quill.register(AlignStyle, true)
Quill.register(DirectionStyle, true)

const modules = {
  toolbar: [
    [{ font: [] }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote'],
    [{ color: [] }, { background: [] }],

    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ align: [] }],
    [{ indent: '-1' }, { indent: '+1' }],
    ['image', 'link'],
    ['clean']
  ],
  imageResize: {

import React, { useContext, useRef, useEffect } from "react";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import EditorContext from "contexts/editorContext";
import { FieldType } from "./Fields";
import ReactQuill, { Quill } from "react-quill";
import { ImageDrop } from "quill-image-drop-module";
import Delta from "quill-delta";
import "react-quill/dist/quill.snow.css";
import { bucket } from "../firebase";

import EditorModel from "./EditorModal";

Quill.register("modules/imageDrop", ImageDrop);

const useStyles = makeStyles(theme =>
  createStyles({
    test: { position: "absolute", top: 10, left: 10 },
    modal: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      maxWidth: 600,
      width: "100%",
    },
    paper: { padding: theme.spacing(2) },
    root: {
      margin: `${theme.spacing(1)}px 0`,

      "&:focus-within $sectionTitle": {

public constructor (props: IRichTextEditorProps) {
    super(props)
    const size = Quill.import('attributors/style/size')
    size.whitelist = props.fontSizes.map((fontSize) => `${fontSize}px`)
    Quill.register(size, true)
    Quill.register('modules/imageResize', ImageResize)
  }

'mirza',
      'arial'
    ];

    SizeStyle.whitelist = ['10px', '13px', '18px', '32px'];

    Quill.register(QuillTable.TableCell);
    Quill.register(QuillTable.TableRow);
    Quill.register(QuillTable.Table);
    Quill.register(QuillTable.Contain);
    Quill.register('modules/table', QuillTable.TableModule);

    Quill.register('modules/imageResize', ImageResize);
    Quill.register({ 'formats/video': Video });

    Quill.register(BackgroundStyle, true);
    Quill.register(FontStyle, true);
    Quill.register(SizeStyle, true);

    const icons = Quill.import('ui/icons');

    icons.bold = `<img src="${BoldIcon}">`;
    icons.italic = `<img src="${ItalicIcon}">`;
    icons.underline = `<img src="${UnderlineIcon}">`;
    icons['code-block'] = `<img src="${CodeIcon}">`;
    icons.image = `<img src="${ImageIcon}">`;
    icons.video = `<img src="${VideoIcon}">`;
    icons.list.ordered = `<img src="${ListOrderedIcon}">`;
    icons.link = `<img src="${LinkIcon}">`;
  }

import React from 'react';
import ReactDOM from 'react-dom';
import ReactQuill, { Quill, Mixin, Toolbar }  from 'react-quill';

import UnderlineStyle from "./custom-formats/UnderlineStyle.js"

let Inline = Quill.import('blots/inline');

var SizeStyle = Quill.import('attributors/style/size');
SizeStyle.whitelist = ['13px','15px', '18px', '32px'];

var Font = Quill.import('formats/font');
Font.whitelist = ['helvetica-neue', 'helvetica-neue-bold', 'helvetica-neue-light'];

Quill.register(Font, true);
Quill.register(UnderlineStyle)
Quill.register(SizeStyle, true);

const CustomToolbar = () => (
  <div id="toolbar">
    <select>
      <option value="helvetica-neue">Regular</option>
      <option value="helvetica-neue-bold">Bold</option>
      <option value="helvetica-neue-light">Light</option>
    </select>
    <select>
      <option value="13px">13 Points</option>
      <option value="15px">15 Points</option>
      <option value="18px">18 Points</option>
      <option value="32px">32 Points</option>
    </select>
    <select></select></div>

import 'react-quill/dist/quill.snow.css';
import './Editor.scss';
import { Modal, Input, Button, Form, Tabs, Upload, Icon } from 'choerodon-ui';
import { FormattedMessage, injectIntl } from 'react-intl';

const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const limitSize = 5120;
const Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);

const Size = Quill.import('attributors/style/size');
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
Quill.register(Size, true);

const Font = Quill.import('attributors/style/font');
Font.whitelist = ['STSong', 'STKaiti', 'STHeiti', 'STFangsong', 'SimSun', 'KaiTi', 'SimHei', 'FangSong', 'Microsoft-YaHei'];
Quill.register(Font, true);

const CustomToolbar = () => (
  <div id="toolbar">
    <span>
      <button>
      </button><button>
      </button><button>
    
    <span>
      </span></button><button value="ordered">
      </button><button value="bullet">
    </button></span></div>

const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const limitSize = 5120;
const Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);

const Size = Quill.import('attributors/style/size');
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px'];
Quill.register(Size, true);

const Font = Quill.import('attributors/style/font');
Font.whitelist = ['STSong', 'STKaiti', 'STHeiti', 'STFangsong', 'SimSun', 'KaiTi', 'SimHei', 'FangSong', 'Microsoft-YaHei'];
Quill.register(Font, true);

const CustomToolbar = () => (
  <div id="toolbar">
    <span>
      <button>
      </button><button>
      </button><button>
    
    <span>
      </span></button><button value="ordered">
      </button><button value="bullet">
    
    <span>
      <select>
      </select>
    </span></button></span></div>