46 lines
2.5 KiB
Markdown
46 lines
2.5 KiB
Markdown
# 5-44 Block menu 打开后泄露 Material Symbols ligature 文本
|
||
|
||
> 创建时间：2026-07-08
|
||
> 状态：`done`
|
||
> Owner：`05-editor-mainline`
|
||
|
||
## 现象
|
||
|
||
在 mnote 主编辑器中 hover 到块手柄并点开块菜单后，菜单项图标位置直接显示 `auto_awesome`、`autorenew`、`chevron_right`、`content_copy`、`format_align_center` 等英文 ligature 文本，导致菜单宽度和排版明显错乱。
|
||
|
||
复现路径：
|
||
|
||
1. 打开本地主编辑器文档。
|
||
2. hover 到正文块左侧手柄。
|
||
3. 点击手柄打开块菜单。
|
||
4. 观察块菜单内图标列。
|
||
|
||
失败证据：
|
||
|
||
- `tmp/block-handle-menu-display-diagnostic/after-click.png`
|
||
- `tmp/block-handle-menu-display-diagnostic/metrics.json`
|
||
|
||
## 根因
|
||
|
||
主编辑器 island 的 icon helper 和部分动态菜单项只输出了 `class="material-symbols-outlined"` 加 ligature 文本，没有输出 `data-icon`。当前 mnote 主壳使用本地 SVG mask 作为 Material Symbols fallback，fallback CSS 只对带 `data-icon` 的节点生效；缺少 `data-icon` 时，浏览器没有 Material Symbols 字体可用，就直接把 ligature 文本当普通文本显示出来。
|
||
|
||
## 修复
|
||
|
||
- `material_icon()` 改为输出 `data-icon=<name>`，并移除可见 ligature 文本。
|
||
- block transform 子菜单和 slash 菜单动态图标同步输出 `data-icon`，不再把 ligature 作为可见文本。
|
||
- 补齐主壳 CSS 中块菜单常用 icon 的本地 fallback，确保无外部 Material Symbols 字体时仍能显示为稳定图标。
|
||
- 重新执行 wasm release build 与 `wasm-bindgen`，更新 `rust/spikes/leptos-tiptap-spike/generated/island/*` 产物。
|
||
|
||
## 验收
|
||
|
||
- `cargo check --manifest-path rust/spikes/leptos-tiptap-spike/Cargo.toml` 通过，只有既有 warning。
|
||
- `cargo build --manifest-path rust/spikes/leptos-tiptap-spike/Cargo.toml --target wasm32-unknown-unknown --release` 通过，只有既有 warning。
|
||
- `wasm-bindgen rust/spikes/leptos-tiptap-spike/target/wasm32-unknown-unknown/release/mnote_leptos_tiptap_spike.wasm --target web --out-dir rust/spikes/leptos-tiptap-spike/generated/island --out-name mnote-leptos-tiptap-spike-island` 通过。
|
||
- `node scripts/task489-block-menu-delete-undo-smoke.js` 通过。
|
||
- 浏览器诊断确认块菜单 `leaked=false`，12 个菜单项正常渲染，图标节点宽高恢复为 `20x20`。
|
||
- 修复后截图：`tmp/block-handle-menu-display-diagnostic/after-click-fixed.png`。
|
||
|
||
## 未覆盖
|
||
|
||
- 本轮只修复手柄菜单与 editor runtime 图标文本泄露；没有扩大到全站所有未带 `data-icon` 的历史图标节点。
|