feat(menus): 编辑区自绘右键菜单 + 全局屏蔽 WebView 自带菜单(docs/26,含 docs/21 勘误)
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
# 菜单与切换五项(2026-11-14)
|
||||
|
||||
> **勘误(2026-11-14 晚,见 docs/26)**:本文 §1 所称「全局监听 contextmenu 屏蔽 WebView 菜单」当时并未真正落进代码(提交里只有文档与说明文字),编辑区右键一直是浏览器自带菜单。屏蔽与编辑区自绘右键菜单已在 docs/26 补齐。
|
||||
|
||||
## 1. 屏蔽浏览器右键菜单
|
||||
|
||||
App 全局监听 contextmenu 并 preventDefault:编辑区、标题栏等处不再冒出
|
||||
|
||||
41
docs/26-编辑区右键菜单.md
Normal file
41
docs/26-编辑区右键菜单.md
Normal 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 里右键不再出现自带菜单(拼写检查/检查元素等);
|
||||
- 粘贴在桌面端的剪贴板权限表现(与顶部「编辑 → 粘贴」同一路径)。
|
||||
Reference in New Issue
Block a user