所见即所得的 Markdown 编辑器，支持 GFM 标准、图表和 UML 扩展。

https://github.com/nhn/tui.editor

包：

• @toast-ui/editor Plain JavaScript component
• @toast-ui/react-editor React wrapper component

该库基于 CodeMirror ，如需与之混用，要把 tui.editor 的 CodeMirror 实例 mode 置空。

viewer 支持的效果有限，也没有暴露对应的钩子，如果要渲染 katex 公式等，可以使用 markdown-it 把 markdown 渲染成为 html 后再传入 viewer 。

通过 hooks 中的 addImageBlobHook 来自定义上传文件的逻辑。

{disabled ? (
  <div
    style={{
      height: '400px',
      overflow: 'auto',
      padding: '20px',
    }}
  >
    <TuiViewer initialValue={value} />
  </div>
) : (
  <TuiEditor
    previewStyle="vertical"
    height="400px"
    initialEditType="markdown"
    initialValue={value}
    ref={ref}
    onChange={() => {
      if (ref.current && onChange) {
        onChange(ref.current.getInstance().getMarkdown());
      }
    }}
    onFocus={() => setFocus(true)}
    onBlur={() => setFocus(false)}
    language="zh-CN"
    hooks={{
      addImageBlobHook: async (blob, callback) => {
        const uploadedImageURL = await uploadFile(blob as File);

        callback(uploadedImageURL);

        return false;
      },
    }}
  />
)}