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

@@ -265,6 +265,25 @@ test('top bar is masthead + centered toolbar, with no brand text in the toolbar
assert.doesNotMatch(rest, /'home'\s*=>\s*esc_url_raw\(\$home\)/);
});
test('block delete overlay lives inside the editor iframe and stays hidden', () => {
const runtime = read('assets/creator-studio/src/editor-runtime.ts');
const contentStyle = read('assets/creator-studio/src/editor-content-style.ts');
const pageStyles = read('assets/creator-studio/src/styles/_block-tools.scss');
// 浮层插在 TinyMCE iframe 的 body 里。
assert.match(runtime, /doc\.body\.appendChild\(bar\)/);
assert.match(runtime, /bar\.id = 'jio-block-actions'/);
// iframe 是独立文档:页面级样式表管不到它,隐藏规则必须写在 content_style。
assert.match(contentStyle, /#jio-block-actions\s*\{[^}]*position:\s*absolute/);
assert.match(contentStyle, /#jio-block-actions\s*\{[^}]*opacity:\s*0/);
assert.match(contentStyle, /#jio-block-actions\.is-visible\s*\{[^}]*opacity:\s*1/);
assert.match(contentStyle, /body\s*\{[^}]*position:\s*relative/);
// 页面级 SCSS 不再重复定义 iframe 内部的选择器(否则只是死样式)。
assert.doesNotMatch(pageStyles, /\.jio-creator__block-actions\s*\{/);
// data-mce-bogus 让 TinyMCE 序列化、字数和选区都跳过这个浮层。
assert.match(runtime, /setAttribute\('data-mce-bogus', 'all'\)/);
});
test('creator studio build artifacts and contracts exist', () => {
assert.ok(exists('assets/creator-studio/package.json'));
assert.ok(exists('assets/creator-studio/package-lock.json'));