使用 Tiptap 重构文章编辑器#36
Draft
kev1nweng wants to merge 3 commits into
Draft
Conversation
将文章编辑器从 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 重构文章编辑器
Member
Author
|
经过审阅这个 PR 还存在很多问题而且会和主线发版前其他更改产生剧烈冲突,暂缓合并。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题描述
旧版文章编辑页基于 Monaco 进行纯文本 Markdown 编辑,格式化与预览入口较分散,编辑区中间按钮也影响写作观感。与此同时,编辑页改为全屏覆盖后遮住了主布局中的窗口控制按钮。此次改造需要在不改变 Markdown 持久化、预览和发布链路的前提下,将文章编辑器迁移到 Tiptap,并保证特殊 Markdown 语法保存后不丢失。
解决方案
TiptapMarkdownEditor组件,使用@tiptap/markdown驱动 Markdown 输入与序列化,保留现有modelValue仍为 Markdown 字符串<!-- more -->、原始 HTML 块、脚注定义、行内 HTML / 下标等语法增加 custom node 与 passthrough 预处理,避免序列化时静默丢失内容editor:save,恢复 Ctrl/Cmd+S 保存;在编辑页头部补回窗口控制按钮,并重新划分拖拽区与可点击区,避免误触发拖拽改动范围
frontend/src/components/TiptapMarkdownEditor/*- 新增 Tiptap 编辑器、扩展与 Markdown passthrough 处理frontend/src/views/articles/editor/*- 重构文章编辑页、顶部栏、预览组件、设置抽屉与保存/预览辅助逻辑frontend/package.jsonfrontend/package-lock.jsonfrontend/vite.config.mtsgo.modgo.sum测试
npm run buildwails build