Skip to content

使用 Tiptap 重构文章编辑器#36

Draft
kev1nweng wants to merge 3 commits into
mainfrom
revert-pr-34
Draft

使用 Tiptap 重构文章编辑器#36
kev1nweng wants to merge 3 commits into
mainfrom
revert-pr-34

Conversation

@kev1nweng
Copy link
Copy Markdown
Member

问题描述

旧版文章编辑页基于 Monaco 进行纯文本 Markdown 编辑,格式化与预览入口较分散,编辑区中间按钮也影响写作观感。与此同时,编辑页改为全屏覆盖后遮住了主布局中的窗口控制按钮。此次改造需要在不改变 Markdown 持久化、预览和发布链路的前提下,将文章编辑器迁移到 Tiptap,并保证特殊 Markdown 语法保存后不丢失。

解决方案

  1. 切换到 Tiptap Markdown 编辑器 - 新增 TiptapMarkdownEditor 组件,使用 @tiptap/markdown 驱动 Markdown 输入与序列化,保留现有 modelValue 仍为 Markdown 字符串
  2. 补齐 Markdown 保真能力 - 为 <!-- more -->、原始 HTML 块、脚注定义、行内 HTML / 下标等语法增加 custom node 与 passthrough 预处理,避免序列化时静默丢失内容
  3. 重构文章编辑页交互 - 编辑页改为单栏优先布局,移除正文中间的常驻按钮,将格式化、预览、保存、发布、设置等操作集中到顶部栏,并保留选区 Bubble Menu 作为轻量格式化入口
  4. 修复桌面端交互细节 - 对齐原生菜单保存事件为 editor:save,恢复 Ctrl/Cmd+S 保存;在编辑页头部补回窗口控制按钮,并重新划分拖拽区与可点击区,避免误触发拖拽

改动范围

  • frontend/src/components/TiptapMarkdownEditor/* - 新增 Tiptap 编辑器、扩展与 Markdown passthrough 处理
  • frontend/src/views/articles/editor/* - 重构文章编辑页、顶部栏、预览组件、设置抽屉与保存/预览辅助逻辑
  • frontend/package.json
  • frontend/package-lock.json
  • frontend/vite.config.mts
  • go.mod
  • go.sum

测试

  • npm run build
  • wails build
  • 手工回归验证:
    • 编辑器基础功能
    • Markdown roundtrip 保真
    • 图片上传、emoji、摘要分隔
    • 预览、设置、保存草稿、发布
    • 响应式布局
    • Ctrl/Cmd+S、Ctrl/Cmd+P
    • 编辑页窗口控制按钮与拖拽区行为

将文章编辑器从 Monaco 切换为 Tiptap,保留 Markdown 作为唯一持久化格式,
补充 `<!-- more -->`、原始 HTML、脚注定义、行内 HTML / 下标等语法的 passthrough 保真能力,
并将编辑页调整为单栏布局,把核心操作收敛到顶部栏与 Bubble Menu。

同时修复编辑页覆盖层遮挡主布局窗口控制按钮的问题,
在编辑页头部补回窗口控制入口,并对齐 `editor:save` 事件链,
保证 Ctrl/Cmd+S、Ctrl/Cmd+P、预览、保存、发布等交互可正常工作。
- 让 `<!-- more -->` 保持块级标记,避免被 inline passthrough 误包裹
- 将“插入摘要分隔”改为直接插入 `grideaMore` 节点
- 预览 HTML 仅在预览打开时渲染并缓存,降低长文输入开销
- 统一 Tiptap 暴露接口为 `getEditor()`,避免 ref 解包差异
- 移除仓库级 `legacy-peer-deps`,将 `vue` 收敛到 `3.5.32` 并重算 lockfile
使用 Tiptap 重构文章编辑器
@kev1nweng kev1nweng marked this pull request as draft April 19, 2026 07:39
@kev1nweng
Copy link
Copy Markdown
Member Author

经过审阅这个 PR 还存在很多问题而且会和主线发版前其他更改产生剧烈冲突,暂缓合并。

@kev1nweng kev1nweng added the enhancement New feature or request label Apr 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants