93 lines
4.1 KiB
Markdown
93 lines
4.1 KiB
Markdown
|
# 基本编辑能力
|
|||
|
|
|
|||
|
|
> 来源：https://www.wolai.com/wolai/qN1Bh9YjLAXs8bxCJoAJ6C
|
|||
|
|
> 用途：mnote 编辑器基础交互行为参考
|
|||
|
|
>
|
|||
|
|
> 实现状态：**大部分已实现** ✅ 11/18 🔧 3/18 ❌ 4/18
|
|||
|
|
|
|||
|
|
## 实现对照
|
|||
|
|
|
|||
|
|
## 核心概念
|
|||
|
|
|
|||
|
|
wolai 的编辑能力基于**块编辑器（Block Editor）**模式而非传统的富文本编辑器。
|
|||
|
|
|
|||
|
|
一段文本、一个列表项、一个图片、一个文件等，都被称为"块"。不同的块承担不同的角色，组合在一起组成一篇文章或一个主页。
|
|||
|
|
|
|||
|
|
## 功能清单
|
|||
|
|
|
|||
|
|
### 块操作
|
|||
|
|
|
|||
|
|
| 操作 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| **拖动块** | 所有块可通过左侧 `::` 图标拖动，拖动时出现辅助线指示位置。拖到另一个块的左/右侧可形成分栏结构 |
|
|||
|
|
| **选中块** | 光标输入状态按 `Esc` 选中当前块；上下方向键切换选中块；`Shift+上下` 多选块 |
|
|||
|
|
| **块选中后 Enter** | 回到光标编辑状态 |
|
|||
|
|
| **块选中后 Ctrl+A** | 第一次选中当前块全部文本，第二次选中所有块 |
|
|||
|
|
| **在上方/下方插入块** | 鼠标悬停 `::` 上方/下方点击 `+`；或 Esc 选中块后按 `a`（上方）/ `b`（下方）|
|
|||
|
|
| **块布局显示** | `Ctrl+Shift+U` 显示/隐藏所有块的虚线框布局 |
|
|||
|
|
|
|||
|
|
### 分栏
|
|||
|
|
|
|||
|
|
将一个块拖到另一个块的左边或右边，拖拽辅助线从横线变竖线时放开，即可实现分栏。分栏的块可继续拖动调整位置关系。
|
|||
|
|
|
|||
|
|
### 块转换
|
|||
|
|
|
|||
|
|
所有文本类块可互相转换：文本↔标题、待办列表↔数字列表、引述文字↔代码片段。文本类块转换为页面时，缩进结构变为页面内容。
|
|||
|
|
|
|||
|
|
三种转换方式：
|
|||
|
|
1. **块菜单**：点击 `::` → 转换为 → 选择类型
|
|||
|
|
2. **快捷键**：平台特定快捷键
|
|||
|
|
3. **快捷命令菜单**：按 `/` → 选择"转换为xxx"，或输入 `/zh + 块名拼音首字母`（如 `/zhlb` 转换为列表）
|
|||
|
|
|
|||
|
|
### 复制/粘贴
|
|||
|
|
|
|||
|
|
- `Ctrl+C / Ctrl+V` 标准复制粘贴
|
|||
|
|
- `Ctrl+Shift+V` 粘贴并匹配样式
|
|||
|
|
|
|||
|
|
### 缩进/取消缩进
|
|||
|
|
|
|||
|
|
- `Tab` 缩进（成为上一个块的子元素）
|
|||
|
|
- `Shift+Tab` 取消缩进
|
|||
|
|
|
|||
|
|
### 文本样式
|
|||
|
|
|
|||
|
|
选中文字后出现文本样式工具条，支持：粗体、斜体、下划线、删除线、行内代码、行内数学公式、文字颜色/背景颜色。
|
|||
|
|
|
|||
|
|
### 超链接
|
|||
|
|
|
|||
|
|
- `Ctrl+K` 创建超链接
|
|||
|
|
- 选中文字后直接粘贴 URL 可快速创建超链接
|
|||
|
|
|
|||
|
|
### 在页面中添加更多块
|
|||
|
|
|
|||
|
|
- 键入 `/` 唤起快捷命令菜单选择块类型
|
|||
|
|
- 点击空行前面的 `+` 图标选择创建块类型
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## mnote 实现状态
|
|||
|
|
|
|||
|
|
### ✅ 已实现
|
|||
|
|
| 功能 | 证据 |
|
|||
|
|
|------|------|
|
|||
|
|
| 块概念（Block Editor 模式） | `EditorBlockType` 枚举定义 14 种块类型（`core-protocol/src/editor/model.rs:7`）|
|
|||
|
|
| 文本输入/换行/方向键 | leptos-tiptap island（`rust/spikes/leptos-tiptap-spike/src/lib.rs`）|
|
|||
|
|
| 拖动块（`::` 手柄） | `HANDLE_SHELL_SELECTOR` 常量，拖拽事件处理（`lib.rs:45-47`）|
|
|||
|
|
| 选中块（Esc / 方向键 / Shift 多选） | `TiptapSelectionState` 选择状态管理 |
|
|||
|
|
| 上方/下方插入块（a / b 快捷键） | 块手柄菜单中的插入操作 |
|
|||
|
|
| 块转换（文本↔标题↔列表等） | `EditorCommand` 中的 `ReplaceBlock` 命令（`editor/command.rs:22-26`）|
|
|||
|
|
| 复制/粘贴（含匹配样式） | `write_mnote_text_to_clipboard` 剪贴板操作 |
|
|||
|
|
| 缩进/取消缩进（Tab/Shift+Tab） | Tiptap 原生 `indent`/`outdent` |
|
|||
|
|
| 文本样式工具条（粗体/斜体/下划线/删除线/行内代码） | `TextMark::{Bold, Italic, Underline, Strike, Code}`（`editor/model.rs:33-39`）|
|
|||
|
|
| 超链接（Ctrl+K） | `TiptapLinkResource` + `TiptapMarkName::Link` |
|
|||
|
|
| 行内数学公式 | `TiptapExtension` 中包含数学公式扩展 |
|
|||
|
|
| 选中文字颜色/背景色 | `TiptapColorAttributes` / `TiptapHighlightAttributes` |
|
|||
|
|
|
|||
|
|
### ❌ / 🔧 未实现/待完善
|
|||
|
|
| 功能 | 状态 | 说明 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| 分栏 | ❌ | `columnsLayout` Tiptap 扩展未注册 |
|
|||
|
|
| 块布局显示（Ctrl+Shift+U）| ❌ | 无对应功能 |
|
|||
|
|
| 选中文字→页面引用 | 🔧 | `PageReference` 类型存在但快捷创建交互未实现 |
|
|||
|
|
| 脚注与注释 | ❌ | 无脚注/注释 Tiptap 扩展 |
|