Files
mnote/design/11-wolai/pages/basic-editing-skills.md
T
lix-2026 cdff672aa5 feat: align local-first workspace direction
Document the VSCode-like local-first product shape, demote Convex to a control-plane role, and retire stale architecture drafts.

Add local workspace migration/export references plus smoke coverage for no-Convex managed workspace startup, local markdown title/body/options persistence, asset upload behavior, and Convex fixture export.

Verification: git diff --cached --check; node scripts/check-local-first-convex-guard.js --staged; node scripts/task444-convex-workspace-export-local-fixture-smoke.js; node scripts/task166-local-first-managed-workspace-no-convex-smoke.js; node scripts/task167-local-markdown-title-body-options-no-convex-smoke.js
2026-05-19 08:11:58 +08:00

93 lines
4.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 基本编辑能力
> 来源: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 扩展 |