npm package: @lianshu/editor
Description: 基于 Milkdown 和 Vue 3 的现代化 Markdown 编辑器 - 支持 Web、移动端、macOS 等多平台
Author: sleepin23
Latest version: 1.0.0

# 📝 Lianshu Markdown 编辑器

基于 **Milkdown** 和 **Vue 3** 构建的现代化 Markdown 编辑器，适用于嵌入到各种应用中。

## ✨ 功能特性

- 🎯 **完整的 Markdown 支持** - 基于 CommonMark 规范
- 🎨 **自定义工具栏** - 使用 Vue 组件实现的美观工具栏
- 🤖 **AI 智能润色** - 集成 AI 功能，一键优化文本
- ↩️ **撤销/重做** - 完整的历史记录支持
- 🎭 **实时状态高亮** - 格式按钮根据光标位置智能高亮
- 📱 **响应式设计** - 适配各种屏幕尺寸
- 🎪 **现代化 UI** - 精美的界面设计和流畅的动画效果

## 🛠️ 技术栈

- **Vue 3** (Composition API + `<script setup>`)
- **TypeScript** - 类型安全
- **Milkdown** - 强大的 Markdown 编辑器框架
- **Vite** - 快速的构建工具
- **ProseMirror** - 底层编辑器内核

## 📦 安装和使用

### Web 项目中使用

```bash
npm install @lianshu/editor
```

```vue
<template>
  <MilkdownEditor v-model="content" />
</template>

<script setup>
import { ref } from 'vue'
import { MilkdownEditor } from '@lianshu/editor'
import '@lianshu/editor/dist/style.css'

const content = ref('# Hello World')
</script>
```

### 原生应用（macOS/iOS）中使用

从 [Releases](https://github.com/yourusername/lianshu-editor/releases) 下载 `lianshu-editor-dist-vX.X.X.zip`，详见 [MACOS_INTEGRATION.md](./MACOS_INTEGRATION.md)

### 完整使用文档

查看 [DISTRIBUTION.md](./DISTRIBUTION.md) 了解所有使用方式。

---

## 🛠️ 本地开发

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

浏览器访问：`http://localhost:5173`

### 构建

```bash
# 构建 Web 应用（生成 dist/）
npm run build

# 构建 NPM 包（生成 lib/）
npm run build:lib

# 构建所有
npm run build:all
```

## 📁 项目结构

```
lianshu-editor/
├── src/
│   ├── App.vue                    # 应用入口组件
│   ├── main.ts                    # Vue 应用启动入口
│   ├── components/
│   │   ├── MilkdownEditor.vue     # Milkdown 编辑器核心组件
│   │   └── Toolbar.vue            # 自定义工具栏组件
│   ├── plugins/
│   │   └── AiPlugin.ts            # AI 润色插件
│   └── styles/
│       └── editor.css             # 全局样式和编辑器样式
├── index.html                     # HTML 入口
├── vite.config.ts                 # Vite 配置
├── tsconfig.json                  # TypeScript 配置
└── package.json                   # 项目依赖
```

## 🎯 核心功能说明

### 1. 基础 Markdown 编辑

支持所有标准 Markdown 语法：

- 标题 (`# H1`, `## H2`, etc.)
- 列表 (有序/无序)
- **粗体** 和 *斜体*
- 引用块
- 代码块
- 链接和图片
- 分割线

### 2. 工具栏功能

- **撤销/重做** - 完整的编辑历史管理
- **加粗** - 带状态高亮的格式按钮
- **无序列表** - 快速创建列表
- **AI 润色** - 选中文本后点击即可体验

### 3. AI 插件

自定义的 Milkdown 插件，实现：

- 获取用户选中的文本
- 异步调用 AI 接口（当前为模拟实现）
- 事务式替换原文本
- 无缝集成到编辑器命令系统

### 4. 状态管理

工具栏按钮会根据光标位置实时更新状态：

- 光标在粗体文本上时，加粗按钮会高亮
- 可扩展到其他格式按钮

## 🔧 自定义和扩展

### 添加新的工具栏按钮

在 `Toolbar.vue` 中添加新按钮并绑定 Milkdown 命令：

```vue
<button @click="handleYourCommand">
  Your Button
</button>
```

```typescript
const handleYourCommand = () => {
  executeCommand(yourCommand.key)
}
```

### 修改编辑器样式

编辑 `src/styles/editor.css` 文件，可以自定义：

- Markdown 元素样式
- 工具栏外观
- 编辑器容器样式

### 集成真实的 AI API

修改 `src/plugins/AiPlugin.ts` 中的 `mockAICall` 函数：

```typescript
async function realAICall(text: string): Promise<string> {
  const response = await fetch('your-ai-api-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text })
  })
  const data = await response.json()
  return data.polishedText
}
```

## 💡 使用建议

1. **作为独立应用** - 直接运行并使用
2. **嵌入到现有项目** - 将 `MilkdownEditor.vue` 作为组件引入
3. **自定义主题** - 修改 CSS 变量和样式
4. **扩展插件** - 参考 `AiPlugin.ts` 创建更多插件

## 📝 代码风格

- 使用 Vue 3 Composition API
- `<script setup>` 语法
- TypeScript 类型注解
- 详细的注释说明

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可

MIT License

---

Made with ❤️ using Vue 3 and Milkdown