富文本编辑与内容渲染管线：Markdown、提及标签与安全渲染

发布侧：
编辑器（Markdown/WYSIWYG） → 序列化 → API 存储（AST/原始文本）
展示侧：
存储 → 服务端渲染（AST→HTML） → 清洗（安全） → 客户端渲染
                                       → 媒体懒加载 → 交互增强（提及跳转）

关键设计决策：
□ 存「结构」（AST/原始文本）而非存「渲染结果 HTML」
  → 渲染逻辑升级时不用重存数据
□ 渲染发生在「读路径」→ 配合缓存
□ 安全性在渲染时强制做（清洗/白名单），而非信任输入

Markdown 编辑器：
□ 交互简单，极客友好，渲染确定
□ 存储原始 Markdown → 服务端渲染
□ 预览需「编辑/预览」切换或分屏
□ 典型：CodeMirror、Monaco + markdown

所见即所得（WYSIWYG）：
□ 输入即所得，普通人友好
□ 底层是 ProseMirror/Tiptap（文档模型）
□ 存储 JSON 文档模型（AST）→ 渲染成 HTML
□ 复杂：光标处理、粘贴清洗、协作（可选）

选型建议：
□ 早期/面向开发者的产品 → Markdown（简单可靠）
□ 面向大众用户 → WYSIWYG（Tiptap/ProseMirror）
□ 混合：Markdown 编辑 + 富文本渲染（双向转换）

形态 1：原始源（Markdown 文本 / ProseMirror JSON）
  → 存储、编辑、版本对比用
形态 2：渲染 HTML（服务端生成）
  → 展示用，带样式、清洗、链接化

双向转换：
源 → AST → HTML   （渲染，一次完成）
HTML → 源         （编辑回填，编辑器加载用）

示例：Markdown 源 → AST
# 标题 → heading(level=1, text="标题")
**加粗** → bold(text="加粗")
[@alice](@alice) → mention(user_id="alice")

解析（AST 层面，不在 HTML 里做）：
□ @提及：@ + 用户名 → mention 节点（携带 user_id）
□ #标签：任意话题 → hashtag 节点（归一化：去空格/大小写）
□ 链接：http(s) → link 节点（待安全校验）

实体化（解析后的业务动作）：
□ 提及 → 生成通知（@alice 会收到提醒）
□ 标签 → 关联话题页、更新话题热度
□ 链接 → 预取标题/图片（链接卡片）

回写（展示）：
□ 提及渲染成可跳转的用户链接
□ 标签渲染成话题链接（#xxx → /tag/xxx）

关键坑：
□ 用户名里可能有「@」？先定规则：@ 后紧跟字母数字才算提及
□ 标签不能含空格/标点，否则解析歧义
□ 渲染时实体化要「一次性」，防止重复解析（用 AST 标记）

一致性的关键：同一渲染引擎
□ 编辑预览 = 服务端渲染结果（而不是编辑器自己的预览）
□ 或：编辑端与展示端共用同一份渲染器（如统一 Markdown 渲染库）

预览机制：
□ 输入防抖（500ms）→ 调服务端渲染 API → 返回 HTML 预览
□ 离线/弱网：编辑端本地渲染兜底（标注「预览可能与线上略有差异」）

渲染 API：
POST /api/render  {source, type} → {html, mentions, tags}
→ 预览、草稿、定时发布共用同一个入口

攻击向量：
□ <script> 标签、事件属性（onclick/onerror）
□ javascript: 协议的链接
□ 图片 src 注入（onerror 触发脚本）
□ Markdown 里嵌 HTML（默认允许 HTML → 危险）

防护层次（纵深防御）：
1. 输入侧：编辑器粘贴清洗（去除危险 HTML）
2. 存储侧：存结构数据，危险代码在渲染时才出现
3. 渲染侧（最关键）：白名单清洗
   → 只允许安全标签/属性（p、strong、a、img、code...）
   → 属性白名单（href 只允许 http/https/#、img src 校验）
   → 链接 rel="noopener nofollow"、javascript: 拒绝
4. 输出侧：CSP（Content-Security-Policy）兜底

<!-- 安全清洗后的链接 -->
<a href="https://example.com" rel="nofollow noopener" target="_blank">链接</a>

工具：
□ 服务端：DOMPurify（前端）/ Python bleach / Go bluemonday
□ 渲染后再次清洗（服务端生成 HTML 前必过清洗器）

图片：
□ 上传时生成多尺寸缩略图（见对象存储篇）
□ 嵌入 <img> 用缩略图 src + 原图 data-src（点击看原图）
□ 懒加载：进入视口才加载（IntersectionObserver）

视频：
□ 视频文件大，走「封面图 + 点击播放」模式
□ 可选：低清预转码 + 高清流式（转码管线）

链接卡片：
□ 检测到外链 → 预取标题/描述/图 → 渲染成卡片
□ 失败降级：只显示纯链接文本

<!-- 懒加载示例 -->
<img loading="lazy" src="/thumb/x.jpg" data-full="/full/x.jpg"
     alt="描述" width="480" height="270" />

缓存策略：
□ 内容 HTML 缓存：内容不变 → 渲染结果缓存（KV/Redis）
  key = content_id + render_version，失效 = 内容变更/渲染器升级
□ 首屏只渲染可见区：长内容分页/「展开全文」
□ 渲染结果带版本号：渲染器升级时全量重渲染（离线任务）

渲染 API 的性能：
□ 防抖 + 合并：预览请求合并（编辑时只渲染最新）
□ 限制输入长度：超过上限截断或拒绝
□ 渲染超时保护：单次渲染有 deadline

渲染缓存命中率目标 > 95%：
缓存 key 要含 render_version —— 渲染器升级后缓存自动失效

可观测指标：
□ 渲染延迟（P50/P99）、缓存命中率
□ 清洗拦截数（潜在 XSS 尝试的告警信号）
□ 预览一致性失败率（编辑预览与展示不符）
□ 提及/标签解析失败率（实体化找不到用户/话题）

治理：
□ 内容长度限制与提示（字数/图片数/视频时长）
□ 敏感词预检（渲染前挡一波，见审核篇）
□ 版本记录：内容编辑历史可回溯

安全告警示例：
清洗器拦截率突然升高 → 可能有针对 XSS 的批量攻击
→ 告警 + 抽查被拦内容 + 确认清洗规则无回归