mnote/bugs/05-editor-mainline/done/5-44-block-menu-material-icons-leak-v1.md

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 的历史图标节点。