draft-js写一个处理markdown的组件

要使用 Draft.js 处理 Markdown，需要先将 Markdown 转换成 Draft.js 的 `EditorState` 格式，然后再将其渲染成富文本编辑器。

下面是一个简单的将 Markdown 转换成 Draft.js `EditorState` 的函数：

import { EditorState, ContentState } from 'draft-js';
import { stateFromMarkdown } from 'draft-js-import-markdown';

function markdownToEditorState(markdown) {
  const contentState = stateFromMarkdown(markdown);
  return EditorState.createWithContent(contentState);
}

这个函数将 Markdown 转换成 `ContentState`，然后使用 `createWithContent` 方法将其转换为 `EditorState`。

接下来，我们可以将这个函数和 Draft.js 的 `Editor` 组件结合起来，创建一个能够处理 Markdown 的富文本编辑器组件。

import React, { useState } from 'react';
import { Editor, EditorState, convertToRaw } from 'draft-js';
import { stateFromMarkdown } from 'draft-js-import-markdown';
import { stateToMarkdown } from 'draft-js-export-markdown';
import 'draft-js/dist/Draft.css';

function MarkdownEditor({ defaultValue }) {
  const [editorState, setEditorState] = useState(
    markdownToEditorState(defaultValue || '')
  );

  function handleEditorChange(state) {
    setEditorState(state);
  }

  function handleMarkdownChange() {
    const content = editorState.getCurrentContent();
    const markdown = stateToMarkdown(content);
    console.log(markdown); // 输出 Markdown 格式的文本
  }

  return (
    <div>
      <Editor
        editorState={editorState}
        onChange={handleEditorChange}
      />
      <button onClick={handleMarkdownChange}>转换为 Markdown</button>
    </div>
  );
}

function markdownToEditorState(markdown) {
  const contentState = stateFromMarkdown(markdown);
  return EditorState.createWithContent(contentState);
}

export default MarkdownEditor;

这个组件接受一个 `defaultValue` 属性作为初始值，然后将其转换成 `EditorState`。用户编辑富文本时，`EditorState` 会自动更新。当用户点击“转换为 Markdown”按钮时，将当前 `EditorState` 转换成 Markdown 格式的文本，并输出到控制台中。

这样就可以用 Draft.js 来处理 Markdown 了。当然，这只是一个简单的例子，你可以根据自己的需求进行定制。