react braft-editor 结合antd 自定义上传文件

我的需求是，上传word, ppt， excel, 以及图片。
感觉解析文件里面的文字回显方式，不太友好。所以改了一下思路：
上传的文件先把文件存到文件服务器，再来判断文件如果是图片类型，那就直接显示出来。如果是其他类型的，那就添加一个超链接来显示。
超链接点击直接预览或下载文件。（我做的是直接下载文件）。

 const [url, setUrl] = useState(''); //上传文件路径
  const [file, setFile] = useState(null); //上传文件
  const [editorValue, setEditorValue] = useState(
    BraftEditor.createEditorState('<p></p>')
  ); //初始化富文本内容

useEffect(() => {
    if (file == null || url == '') return;
    handleImageContentChange();
  }, [url, file]);

 const onEditorStateChange = (editorState) => {
    setEditorValue(editorState);
  };

 const handleImageContentChange = () => {
    if (
      file.name.indexOf('.jpg') !== -1 ||
      file.name.indexOf('.jpeg') !== -1 ||
      file.name.indexOf('.png') !== -1
    ) {
      setEditorValue(
        ContentUtils.insertMedias(editorValue, [
          {
            type: 'IMAGE',
            url: url,
          },
        ])
      );
    } else {
      setEditorValue(
        ContentUtils.insertText(
          editorValue,
          file.name,
          ['COLOR-00F', 'UNDERLINE'],
          {
            type: 'LINK',
            mutability: 'MUTABLE',
            data: {
              href: url,
              target: '_blank',
            },
          }
        )
      );
    }
  };
  const beforeUpload = (file) => {
    setFile(null);
    const formData = new FormData();
    formData.append('file', file);
    formData.append('token', sessionStorage.getItem('tokenv2'));
    uploadFile(formData).then((res) => {
      setUrl(res);
      setFile(file);
    });
    return false;
  };
  const editorProps = {
    height: 350,
    contentFormat: 'html',
    onChange: onEditorStateChange,
  };

 const controls = [
    'undo',
    'redo',
    'separator',
    'font-size',
    'line-height',
    'letter-spacing',
    'separator',
    'text-color',
    'bold',
    'italic',
    'underline',
    'strike-through',
    'separator',
    'superscript',
    'subscript',
    'remove-styles',
    'emoji',
    'separator',
    'text-indent',
    'text-align',
    'separator',
    'headings',
    'list-ul',
    'list-ol',
    'blockquote',
    'code',
    'separator',
    'clear',
  ];
  const extendControlsContent = [
    {
      key: 'antd-uploader',
      type: 'component',
      component: (
        <Upload
          accept="*"
          showUploadList={false}
          beforeUpload={beforeUpload}
          action="#"
        >
          <button type="button" className="control-item button upload-button">
            上传文件
          </button>
        </Upload>
      ),
    },
  ];

return <div className="content">
          <BraftEditor
            controls={controls}
            {...editorProps}
            extendControls={extendControlsContent}
            initialContent={editorValue || ''}
            value={editorValue}
          />
 </div>

参考效果如下：