编辑器损坏 HTML 恢复

概述

Restore Editor Damaged HTML

Overview

在 WorkBuddy 或腾讯文档等富文本/产物编辑器中手动编辑 .html 文件时，常见两类损坏：

1. 误删内容：用户删错区域（如 HERO、CTA、footer），且编辑器无回退。
2. 结构污染：编辑器自动注入 data-page-node-id、data-dm-ref、<style id="__dm_no_drag_style__"> 等属性或标签，甚至把 <head> 提前闭合，导致 meta/title/style 溢出到 body。

本 skill 提供自动化恢复脚本与手动修复流程，目标是把 HTML 还原为干净的单文件状态：结构正确、无编辑器注入物、可正常渲染与截图。

When to Use

遇到以下任一情况时触发本 skill：

• 用户在右侧产物编辑器手动编辑 HTML 海报/网页后，发现区域缺失或样式错乱。
• 文件中搜到大量 data-page-node-id、data-dm-ref 或 __dm_ 前缀的 style 标签。
• <html>、<head>、<body> 标签被编辑器附加属性或提前闭合。
• 需要从更早的干净版本（如 <clean-ref>）提取某个区块补到当前损坏版本（如 <broken>）。

Workflow

Step 1: Inspect Damage

1. 读取当前 HTML 头部（前 20 行）与尾部，确认 <!DOCTYPE html>、<html>、<head>、<body>、</html> 是否完整。
2. 用 Grep 搜索 data-page-node-id、data-dm-ref、__dm_ 评估污染范围。
3. 搜索缺失区块的关键类名（如 class="hero"、class="brandbar"、class="cta-wrap"），确认是否被误删。

Step 2: Choose Recovery Path

• 若只需清洗注入物且结构基本完整：运行 scripts/clean_html_editor_injection.py <target.html>。
• 若还缺某个区块（如 HERO）：需准备一个干净参考文件 <ref.html>，然后运行脚本并提供缺失块的正则选择器。

Step 3: Restore via Script

使用本 skill 附带的 Python 脚本：

python scripts/clean_html_editor_injection.py <target.html> [ref.html] [block_selector_regex]

示例 1：仅清洗注入物

python scripts/clean_html_editor_injection.py <broken.html>

示例 2：从参考文件补回 HERO 区块并清洗

python scripts/clean_html_editor_injection.py <broken.html> <clean-ref.html> '<section class="hero"[^>]*>.*?</section>'

脚本会自动：

• 备份目标文件为 <target>-broken.html。
• 删除 <style id="__dm_*"> 等编辑器注入样式。
• 提取主 <style> 块与 <title>。
• 提取 <div class="page"> 主体。
• 若提供参考文件与选择器，从参考文件提取缺失块并清洗 data-page-node-id 与内联样式后插入目标位置（优先在 <!-- HERO --> 锚点后，否则在第一个 <div class="content"> 前）。
• 全局清理 data-page-node-id 与 data-dm-ref。
• 重建干净的 <head> 与 <body>，写出覆盖原文件。

Step 4: Validate

1. 结构校验：Grep 确认无 data-page-node-id、data-dm-ref、__dm_ 残留；<!DOCTYPE html> 在首行；<body>、</html> 闭合；缺失区块回归。
2. 视觉校验：用 Playwright / Puppeteer + 系统 Chrome 渲染无边框 PNG，检查缺失区块是否显示、布局是否错位。

Manual Fallback

若脚本无法运行或目标文件结构特殊，按以下顺序手动修复：

1. 备份：复制当前文件为 <name>-broken.html。
2. 重建 head：从当前文件提取主 <style>...</style>（含完整 CSS）和 <title>，重新组装为：

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
   <meta charset="UTF-8">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
   <title>...</title>
   <style>...</style>
   </head>
   <body>

1. 补回缺失块：从干净参考文件复制目标区块的 HTML，删除 data-page-node-id 与多余内联样式后插入正确位置。
2. 清理注入物：全局正则删除 s*data-page-node-id="[^"]*" 和 s*data-dm-ref="d*"。
3. 闭合标签：确保 </body></html> 在文件末尾。

Resources

• scripts/clean_html_editor_injection.py：核心恢复脚本，支持清洗 + 区块补回。