fix(creator-studio): hide block-delete overlay inside the editor iframe

块级删除浮层插在 TinyMCE 的 iframe 里,但隐藏规则只写在父页面样式表,
iframe 是独立文档、拿不到这些样式,于是 opacity:0 / position:absolute 全部
失效,✕ 退化成正文顶部的常显元素。

- 把 #jio-block-actions 的定位与隐藏规则移入 content_style,并给 body 加
  position:relative 作为定位基准;隐藏时 pointer-events:none 避免挡住正文
- 浮层加 data-mce-bogus="all",让 TinyMCE 在序列化、字数和选区计算时跳过它,
  否则 ✕ 会被写进保存内容
- 删除 _block-tools.scss 中作用于同一选择器的页面级死样式
- 契约测试锁定「样式必须在 content_style」与 bogus 属性

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed 2026-11-08 22:36:57 +08:00
1 parent 1970db0b56
commit 3e48fdf61e
7 files changed
+77 -44

No files matched your search

@@ -143,6 +143,10 @@ export function syncCodeLabels(editor: any): void {
*
* 与 WPS 的块操作一致:鼠标悬停到块上时在右上角出现删除入口,
* 避免只能靠反复按退格键。
*
* 浮层直接插在 iframe 的 body 里,因此用 data-mce-bogus 让 TinyMCE 在
* 序列化、字数和选区计算时完全忽略它;它的样式写在 editor-content-style.ts
* (父页面样式表管不到 iframe 内部)。
*/
export function installBlockActions(editor: any): void {
const doc = editor.getDoc();
@@ -152,6 +156,8 @@ export function installBlockActions(editor: any): void {
const bar = doc.createElement('div');
bar.id = 'jio-block-actions';
bar.className = 'jio-creator__block-actions';
// "all" 让 TinyMCE 连同子节点一起跳过。
bar.setAttribute('data-mce-bogus', 'all');
bar.innerHTML =
'<button type="button" class="jio-creator__block-action" data-jio-block-delete title="' +
'删除此块' +