# Milkdown 全屏 WYSIWYG Markdown 编辑器实施方案

## 项目概述

基于 `@milkdown/crepe` 实现全屏覆盖的所见即所得 Markdown 编辑器，替换现有的 contenteditable 编辑器。

## 技术选型

- **核心编辑器**: `@milkdown/crepe` - 功能完整的 WYSIWYG Markdown 编辑器
- **Vue 集成**: `@milkdown/vue` - Vue 3 组件支持
- **主题**: `frame`（简洁框架主题）

## 系统架构

```mermaid
graph TB
    A[App.vue] --> B[MilkdownProvider]
    B --> C[Milkdown Editor - Crepe]
    
    subgraph "Crepe 核心功能"
        D[WYSWIYG 编辑体验]
        E[Markdown 语法即时渲染]
        F[斜杠命令菜单 Slash Commands]
        G[代码块高亮]
        H[图片粘贴支持]
    end
```

## 实施步骤

### Step 1: 安装依赖包

```bash
npm install @milkdown/crepe @milkdown/vue
```

### Step 2: 创建 Milkdown 编辑器组件

**文件**: `src/components/MilkdownEditor.vue`

```vue
<template>
  <MilkdownProvider>
    <Milkdown />
  </MilkdownProvider>
</template>

<script setup>
import { Milkdown, MilkdownProvider, useEditor } from '@milkdown/vue'
import { Crepe } from '@milkdown/crepe'

const { get } = useEditor((root) => new Crepe({ root }))
</script>
```

### Step 3: 更新 App.vue

- 移除旧的 `MarkdownEditor` 组件引用
- 使用新的 `MilkdownEditor` 组件
- 保持全屏布局（100vh × 100vw）

### Step 4: 添加样式配置

在 `main.js` 中导入 Crepe 主题：
```js
import '@milkdown/crepe/theme/common/style.css'
import '@milkdown/crepe/theme/frame.css'
```

## 全屏覆盖样式要点

- 编辑器容器: `width: 100vw; height: 100vh`
- 移除默认 padding/margin
- 纯编辑器模式，无预览面板