feat(menus): 编辑区自绘右键菜单 + 全局屏蔽 WebView 自带菜单(docs/26,含 docs/21 勘误)

This commit is contained in:
Muse
2026-11-14 16:46:39 +08:00
parent bd6fcf3d45
commit bfacdd5fbb
7 changed files with 215 additions and 1 deletions

View File

@@ -1,5 +1,7 @@
# 菜单与切换五项(2026-11-14)
> **勘误(2026-11-14 晚,见 docs/26)**:本文 §1 所称「全局监听 contextmenu 屏蔽 WebView 菜单」当时并未真正落进代码(提交里只有文档与说明文字),编辑区右键一直是浏览器自带菜单。屏蔽与编辑区自绘右键菜单已在 docs/26 补齐。
## 1. 屏蔽浏览器右键菜单
App 全局监听 contextmenu 并 preventDefault:编辑区、标题栏等处不再冒出

View File

@@ -0,0 +1,41 @@
# docs/26 编辑区自绘右键菜单 + WebView 自带菜单屏蔽(补账)
## 先说清一笔旧账
docs/21 §1 写了「App 全局监听 contextmenu 并 preventDefault、编辑区
右键已被屏蔽」,但核查提交 2d1cd30 的实际代码后确认:**那段监听从未
落进代码**,只有文档与提交说明写了。结果就是编辑区右键一直是 WebView
自带菜单——用户再次报回。docs/21 已加勘误。本次把屏蔽与自绘菜单一并
真正实现,并用无头浏览器的真实右键逐项验证(见下)。
## 实现
1. **全局屏蔽**(App 挂载 effect):document 监听 contextmenu 并
preventDefault;`input / textarea` 豁免(输入框保留系统菜单的拼写
检查与粘贴)。React 的各自定义菜单(标签/文件树/编辑区)在冒泡链
上先于 document 监听打开,不受影响。
2. **编辑区自绘菜单**(新组件 EditorContextMenu):在 .editor-area 上
按事件落点分发——富文本落在 .ProseMirror、源码落在 .source-cm 才
弹出。条目与顶部「编辑/格式」菜单同一套实现:
- 剪切 / 复制(无选区禁用,选区状态在打开瞬间从编辑器状态读取,
源码模式经 SourceEditorApi 新增的 hasSelection);
- 粘贴(走既有 pasteFromClipboard:富文本经剪贴板读文本插入,
源码聚焦后原生粘贴);全选;
- 富文本独有:加粗 / 斜体 / 删除线 / 行内代码 / 超链接…;
- 末项模式切换(源码模式 ↔ 即时渲染)。
菜单容器 mousedown 阻止默认行为,焦点与选区留在编辑器里,
execCommand 类命令作用准确;位置按窗口尺寸夹取不溢出。
## 验证
- 无头浏览器真实右键:菜单弹出且条目齐全;无选区时剪切/复制禁用、
全选后可用;点「加粗」选中文本真的变粗;标题栏右键无自绘菜单
(自带菜单已被屏蔽);合成事件核查:编辑区 contextmenu 被
preventDefault、输入框放行。
- 组件测试 2 例(tests/editor-context-menu.test.tsx);vitest 108+2;
tsc 0 错误;构建通过。
## 待真机复验
- WebView2 里右键不再出现自带菜单(拼写检查/检查元素等);
- 粘贴在桌面端的剪贴板权限表现(与顶部「编辑 → 粘贴」同一路径)。