# Markdown编辑器

一个基于前后端分离架构的Markdown编辑器，支持实时预览、文件管理和正则表达式批量操作。

## 技术栈

### 前端
- **React 18** + **TypeScript** + **Vite**
- **react-markdown** - Markdown渲染
- **react-syntax-highlighter** - 代码高亮
- **KaTeX** - 数学公式渲染
- **SplitPane** - 可调整的分割布局

### 后端
- **Python Flask**
- **Markdown** - Markdown解析
- **Flask-CORS** - 跨域支持
- **正则表达式** - 批量文本操作

## 功能特性

### ✅ 已实现功能
- [x] Markdown解析器
- [x] 实时预览功能
- [x] 文件操作（创建、读取、更新、删除）
- [x] 正则表达式批量操作
- [x] 代码高亮和数学公式支持
- [x] 文件浏览器
- [x] 键盘快捷键支持
- [x] 自动保存到本地存储

### 🎯 核心功能
1. **Markdown编辑**
   - 实时语法高亮
   - 快捷键支持（Ctrl+B粗体，Ctrl+I斜体等）
   - 工具栏快捷操作

2. **实时预览**
   - 同步滚动
   - 目录生成
   - 代码块高亮
   - 数学公式渲染
   - 表格支持

3. **文件管理**
   - 文件浏览
   - 文件创建/编辑/删除
   - 目录导航
   - 文件搜索

4. **正则表达式工具**
   - 常用模式预设
   - 实时匹配测试
   - 批量替换
   - 捕获组支持
   - 操作历史记录

## 快速开始

### 安装依赖

1. **安装后端依赖**
```bash
cd backend
pip install -r requirements.txt
```

2. **安装前端依赖**
```bash
cd frontend
npm install
```

### 启动服务

1. **启动后端服务**
```bash
cd backend
python app.py
# 或使用环境变量设置端口和调试模式
PORT=5000 DEBUG=true python app.py
```

2. **启动前端服务**
```bash
cd frontend
npm run dev
```

3. **访问应用**
打开浏览器访问 `http://localhost:3000`

## API文档

### 健康检查
```
GET /api/health
```

### Markdown解析
```
POST /api/parse
{
  "content": "# Hello World"
}
```

### 文件操作
```
GET    /api/files              # 获取文件列表
GET    /api/files/read         # 读取文件内容
POST   /api/files/write        # 写入文件内容
DELETE /api/files/delete       # 删除文件
GET    /api/files/download     # 下载文件
```

### 正则表达式操作
```
POST /api/regex/replace        # 替换文本
POST /api/regex/extract        # 提取匹配项
```

## 项目结构

```
markdown-editor/
├── backend/
│   ├── app/
│   │   ├── __init__.py        # Flask应用初始化
│   │   └── routes.py          # API路由定义
│   ├── utils/
│   │   ├── __init__.py
│   │   ├── markdown_parser.py # Markdown解析器
│   │   ├── file_manager.py    # 文件管理器
│   │   └── regex_processor.py # 正则表达式处理器
│   ├── app.py                 # 应用入口
│   └── requirements.txt       # Python依赖
├── frontend/
│   ├── src/
│   │   ├── components/        # React组件
│   │   │   ├── MarkdownEditor.tsx
│   │   │   ├── EditorPanel.tsx
│   │   │   ├── PreviewPanel.tsx
│   │   │   ├── FileExplorer.tsx
│   │   │   ├── Toolbar.tsx
│   │   │   └── RegexPanel.tsx
│   │   ├── utils/            # 工具函数
│   │   │   ├── api.ts
│   │   │   └── markdown.ts
│   │   ├── types/            # TypeScript类型定义
│   │   └── App.tsx
│   ├── package.json
│   └── vite.config.ts
└── README.md
```

## 使用说明

### 基本操作
- **新建文件**: Ctrl+N 或点击工具栏的"新建"按钮
- **保存文件**: Ctrl+S 或点击工具栏的"保存"按钮
- **切换文件浏览器**: 点击工具栏的"文件"按钮
- **打开正则表达式工具**: Ctrl+Shift+F

### Markdown语法支持
- 标题: `# 一级标题`, `## 二级标题`
- 粗体: `**粗体文本**`
- 斜体: `*斜体文本*`
- 链接: `[链接文本](url)`
- 图片: `![alt文本](url)`
- 代码块: ```` ```语言 代码 ``` ````
- 表格: 使用 `|` 创建表格
- 数学公式: 行内 `$公式$` 或块级 `$$公式$$`

### 文件操作
- 在文件浏览器中点击文件打开
- 右键文件进行重命名或删除
- 使用面包屑导航目录结构
- 创建新的Markdown文件和目录

### 正则表达式使用
1. 选择常用模式或输入自定义正则
2. 设置替换文本和标志
3. 点击"测试"查看匹配结果
4. 点击"应用"执行替换操作

## 开发指南

### 添加新的Markdown扩展
编辑 `backend/utils/markdown_parser.py` 中的 `MarkdownParser` 类，添加新的扩展支持。

### 自定义主题
修改 `frontend/src/index.css` 中的样式变量，可以自定义编辑器的外观。

### 扩展API
在 `backend/app/routes.py` 中添加新的路由，并在前端 `frontend/src/utils/api.ts` 中添加对应的API调用。

## 技术细节

### 实时预览实现
使用防抖(debounce)技术，300ms延迟更新预览，避免频繁计算。

### 文件系统安全
- 所有文件操作限制在工作目录内
- 防止路径遍历攻击
- 自动创建必要的目录结构

### 性能优化
- 正则表达式预编译缓存
- 组件懒加载
- 防抖处理用户输入

## 许可证
MIT License