46 lines
4.2 KiB
Markdown
46 lines
4.2 KiB
Markdown
## 目标效果
|
||
- 新增一个“所见即所得/预览编辑”模式：单栏展示（类似你图二），内容呈现为柔和的排版样式，同时可直接输入修改，最终落盘仍是 Markdown 文本。
|
||
- 输入 `# ` / `## ` / ... 时，当前行在编辑区内立即呈现为 H1/H2… 的视觉样式（标题更大、分割线等），并弱化 `#` 标记的存在感。
|
||
- 头部提供一排快捷按钮（加粗/斜体/删除线/行内代码/引用/列表/H1-H3/链接），一键对选中文本或当前行应用对应 Markdown 语法。
|
||
|
||
## 现状定位（已确认）
|
||
- 预览是 [Preview.vue](file:///d:/项目/utools插件/我的仓库gitee/markdown/src/components/Preview.vue) 用 markdown-it 渲染到 `v-html`，天然不可编辑。
|
||
- 编辑器是 [Editor.vue](file:///d:/项目/utools插件/我的仓库gitee/markdown/src/components/Editor.vue) 基于 CodeMirror 6。
|
||
- 模式切换在 [FileTab.vue](file:///d:/项目/utools插件/我的仓库gitee/markdown/src/components/FileTab.vue)（源码/分屏/预览）。
|
||
|
||
## 技术方案（不引入新依赖，基于现有 CodeMirror 6 实现“近似 Typora”）
|
||
- 新增组件 `LivePreviewEditor.vue`（或 `WysiwygEditor.vue`）：内部仍是 CodeMirror，但通过“行级装饰 + 主题样式”让 Markdown 在编辑时呈现为更像渲染态的排版。
|
||
- 行级装饰（核心）：
|
||
- 扫描每行文本，识别 `^#{1,6}\s+`、`^>\s+`、无序/有序/任务列表等；
|
||
- 对整行加 `Decoration.line`（例如 `cm-md-h1` / `cm-md-quote` / `cm-md-list`），让整行的字号、间距、分隔线等看起来像图二。
|
||
- 对语法标记部分（如 `#`、`>`、`-`、`1.`）加 `Decoration.mark`，把其颜色/透明度调低（“柔和”且弱存在感）。
|
||
- 对 fenced code block（```）做简单状态机：在代码块内不做上述弱化，避免误伤代码内容。
|
||
- 高亮与软主题：
|
||
- 复用现有 CSS 变量（`--card-background/--text-color/--border-color/...`），单独为 live 模式做一套更柔和的 EditorView.theme（行距、段落间距、标题线条更淡、代码块背景更柔）。
|
||
|
||
## 快捷按钮（头部工具条）
|
||
- `LivePreviewEditor` 顶部增加一个工具条（Ant Design Vue Button/Space/Divider）：
|
||
- H1/H2/H3：对当前行前缀加 `# ` / `## ` / `### `（若已存在则替换层级）。
|
||
- 加粗/斜体/删除线/行内代码：对选区做包裹（`**` / `*` / `~~` / `` ` ``），无选区则插入成对标记并把光标放在中间。
|
||
- 引用/列表：对当前行或多行统一加前缀（`> `、`- `、`1. `）。
|
||
- 链接：将选区变成 `[text](url)`，无选区则插入模板并定位光标到 url。
|
||
- 交互细节：按钮操作后保持焦点回到编辑器，不打断输入。
|
||
|
||
## 与现有模式的集成
|
||
- 扩展 [FileTab.vue](file:///d:/项目/utools插件/我的仓库gitee/markdown/src/components/FileTab.vue)：
|
||
- 在 RadioGroup 增加一个模式：`value="live"`（显示名：`预览编辑` 或 `所见即所得`）。
|
||
- `mode === 'live'` 时只渲染 `LivePreviewEditor` 占满整个编辑区域；其他模式保持原行为不变。
|
||
- `LivePreviewEditor` 使用同一个 `v-model="localContent"`，因此保存/dirty 逻辑无需改动。
|
||
|
||
## 复用与去重（顺手优化）
|
||
- 把现有 `Editor.vue` 的“粘贴图片并落盘插入 `![]()`”逻辑抽成一个可复用方法（例如 `useImagePaste(view, filePath, onChange)`），让 live 模式也支持同样体验且避免重复代码。
|
||
|
||
## 验证方式
|
||
- 手工验证：
|
||
- 切到“预览编辑”模式，输入 `# ` 后输入文字，视觉立即呈现标题样式；切回源码模式仍看到标准 Markdown。
|
||
- 点击工具条按钮，对选区应用加粗/标题/引用等，内容正确写回并可保存。
|
||
- 粘贴图片：生成资源文件并插入相对路径语法，预览模式仍能正确展示（利用现有相对路径解析逻辑）。
|
||
- 构建校验：执行 `npm run build` 确认通过（项目规则要求）。
|
||
|
||
## 说明（范围与预期）
|
||
- 该方案实现的是“Markdown 文本 + 编辑时视觉接近渲染”的 Typora 风格体验；不会引入真正富文本编辑器（ProseMirror/Tiptap）与 HTML 作为存储格式，因此兼容现有文件与渲染链路。 |