import React from 'react';
import { MarkdownEditor } from '@ant-design/md-editor';

export default () => {
  return (
    <MarkdownEditor
      initValue={`# Hello World

欢迎使用 md-editor！这是一个功能强大的 Markdown 编辑器。

## 主要特性

- ✅ 支持标准 Markdown 语法
- ✅ 实时预览功能
- ✅ 语法高亮
- ✅ 数学公式渲染 $E=mc^2$
- ✅ 代码块高亮

\`\`\`javascript
function hello() {
  console.log('Hello, md-editor!');
}
\`\`\`

## 表格支持

| 功能 | 支持 | 说明 |
|------|------|------|
| 基础编辑 | ✅ | 支持所有标准语法 |
| 实时预览 | ✅ | 所见即所得 |
| 插件系统 | ✅ | 可扩展架构 |

> 这只是一个简单的示例，更多功能等你探索！
`}
    />
  );
};

import React, { useRef } from 'react';
import { MarkdownEditor, MarkdownEditorInstance } from '@ant-design/md-editor';

export default () => {
  const editorRef = useRef<MarkdownEditorInstance>();

  const handleSave = () => {
    const content = editorRef.current?.getValue();
    console.log('保存内容:', content);
  };

  return (
    <MarkdownEditor
      editorRef={editorRef}
      height={600}
      initValue={# Hello World

欢迎使用 md-editor！这是一个功能强大的 Markdown 编辑器。

## 主要特性

- ✅ 支持标准 Markdown 语法
- ✅ 实时预览功能
- ✅ 语法高亮
- ✅ 数学公式渲染 $E=mc^2$
- ✅ 代码块高亮

\`\`\`javascript
function hello() {
  console.log('Hello, md-editor!');
}
\`\`\`

## 表格支持

| 功能 | 支持 | 说明 |
|------|------|------|
| 基础编辑 | ✅ | 支持所有标准语法 |
| 实时预览 | ✅ | 所见即所得 |
| 插件系统 | ✅ | 可扩展架构 |

> 这只是一个简单的示例，更多功能等你探索！
`}
      toolBar={{
        enable: true,
        extra: [
          <button key="save" onClick={handleSave}>
            保存
          </button>,
        ],
      }}
      onChange={(value, schema) => {
        console.log('内容变化:', value);
      }}
      image={{
        upload: async (files) => {
          // 自定义图片上传逻辑
          return ['https://example.com/uploaded-image.png'];
        },
      }}
    />
  );
};