42 lines
2.3 KiB
Markdown
42 lines
2.3 KiB
Markdown
# 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 里右键不再出现自带菜单（拼写检查/检查元素等）；
|
||
- 粘贴在桌面端的剪贴板权限表现（与顶部「编辑 → 粘贴」同一路径）。
|