feat(markup): br 改为气泡/消息分隔符 + 行内白名单收窄到五项（Web + IM 两侧）
主人 2026-10-07：「对消息内的 <br> 始终处理为多条消息隔断」。 Web 侧（frontend/web）： - chat.tsx 的 splitParagraphs（SplitChatBubble 的切分层）新增 BR_SEPARATOR_RE 与 splitBubbleBreaks：<br>/<br/>/</br> 等价、属性不解析、<brow>/<br2> 挡掉、 流式半截 <br 不切；不含 <br> 的段逐字返回原样（既有 p 口径一字节不动） - inlineMarkup.ts 删掉 break 节点（br 不再是行内元素），白名单收窄为 b/strong/i/em/code 五项；renderContent.tsx 同步；测试 76 -> 99 checks - 40 条基线逐字节对照：28 IDENTICAL，12 个 DIFF 恰是含 br/u/s/<BR> 的样例 IM 侧（internal/services/channelbridge）： - 新增 inline_tags.go：成对平衡的白名单行内标签剥标签留文本、白名单外与 结构不平衡整段原样保留；br 作为第二级分隔符交给 splitBubbles - 两级切分：p 块为第一级，块内按 br 再切为第二级；空气泡丢弃 - br 切分放在角色注记摘除之后：否则 action 里的 br 会把注记正文漏成聊天气泡 （变异专门钉住这条顺序） 两路各 4 个自带变异均「改坏 -> 编译过 -> 变红 -> 还原 -> 复绿」。
This commit is contained in:
AskaEth committed
1 parent
6ac214366e
commit
a19d12b228
7 files changed
+646
-60
No files matched your search
@@ -7,14 +7,17 @@
|
||||
// 这个测试锁住「行内标签渲染」这一层，以及**它不能带来的风险**：产物是不可信文本
|
||||
// （模型生成、用户可诱导），任何把它当 HTML 注入的写法都必须在这里变红。
|
||||
//
|
||||
// 分六组：
|
||||
// ① 白名单标签渲染成真元素（不是字面量）；
|
||||
// 分七组：
|
||||
// ① 白名单标签渲染成真元素（不是字面量）；白名单同日收窄到**五项** —— `u` / `s` 出列
|
||||
// （她百条输出 0 命中）⇒ 从此按白名单外口径逐字原样；
|
||||
// ② 白名单外（`<script>` / `<img onerror>` / `<div>` / `<a>`）⇒ **纯文本字面量**，
|
||||
// 树里不出现这些元素、不出现任何来自产物的属性；
|
||||
// ③ 未闭合 / 落单闭标签 ⇒ 整段降级为纯文本，不崩、字符一个不丢；
|
||||
// ④ 交错标签（`<b>a<i>b</b>c</i>`）⇒ 同上，不崩、字符一个不丢；
|
||||
// ⑤ 带属性 ⇒ 只出元素本身，属性既不进 markup 也不进 props；
|
||||
// ⑥ 既有 `<p>` / `<action>` 行为无回归（走真实的 SplitChatBubble 链路）。
|
||||
// ⑥ 既有 `<p>` / `<action>` 行为无回归（走真实的 SplitChatBubble 链路）；
|
||||
// ⑦ 🆕 `<br>` = **气泡/消息分隔符**（主人 2026-10-07 口径「对消息内的 `<br>` 始终处理
|
||||
// 为多条消息隔断」）：与 `<p>` 同级切气泡、空气泡丢弃、**绝不**是气泡内换行。
|
||||
//
|
||||
// 跑法（react-dom/server 的 CJS 构建需要 require，所以必须打成 cjs）：
|
||||
//
|
||||
@@ -128,12 +131,12 @@ const REAL_SAMPLE =
|
||||
ok(!has(html, "<b>"), "① 不再把 `<b>` 当字面量显示");
|
||||
ok(seen("日落 <b>18:35</b> 了") === "日落 18:35 了", "① 标签本身不作为文字出现（只剩正文）");
|
||||
|
||||
// 白名单 = **五项**（主人 2026-10-07 晚收窄：`u` / `s` / `br` 出列）。
|
||||
const tags: [string, string][] = [
|
||||
["<b>粗</b>", "<b>粗</b>"],
|
||||
["<strong>粗</strong>", "<strong>粗</strong>"],
|
||||
["<i>斜</i>", "<i>斜</i>"],
|
||||
["<em>强调</em>", "<em>强调</em>"],
|
||||
["<u>下划</u>", "<u>下划</u>"],
|
||||
["<s>划掉</s>", "<s>划掉</s>"],
|
||||
];
|
||||
for (const [src, want] of tags) ok(has(markup(src), want), `① ${want} 正常渲染`);
|
||||
ok(has(markup("<code>go build</code>"), "<code"), "① `<code>` 渲染成等宽元素");
|
||||
@@ -141,15 +144,17 @@ const REAL_SAMPLE =
|
||||
|
||||
// 大小写混写：按 HTML 口径不敏感（`<B>` 就是 `<b>`）。
|
||||
ok(has(markup("<B>大写</B>"), "<b>大写</b>"), "① `<B>` 大小写不敏感");
|
||||
ok(has(markup("<b>x</b><BR>y"), "<br/>"), "① `<BR>` 也认（标签名大小写不敏感）");
|
||||
|
||||
// br 是 void 元素：`<br>` / `<br/>` / `</br>`（HTML5 等价写法）都出换行，两侧文本不丢。
|
||||
ok(seen("上<br>下") === "上下" && has(markup("上<br/>下"), "<br/>"), "① `<br>` / `<br/>` 出换行");
|
||||
ok(has(markup("上</br>下"), "<br/>"), "① `</br>` 按 HTML5 口径等同 `<br>`");
|
||||
|
||||
// 嵌套白名单标签（正常闭合）照常渲染。
|
||||
const nested = markup("<b>外 <i>内</i></b>");
|
||||
ok(has(nested, "<b>外 <i>内</i></b>"), "① 正常嵌套逐层渲染");
|
||||
|
||||
// 🔴 白名单收窄：`u` / `s` 出列（她百条输出 0 命中、不值得各端返工）⇒ 它们从此按
|
||||
// **白名单外**口径逐字原样，不再产出元素。
|
||||
for (const [src, tag] of [["<u>下划</u>", "u"], ["<s>划掉</s>", "s"]] as [string, string][]) {
|
||||
ok(seen(src) === src, `① 出列的 \`<${tag}>\` 逐字原样显示（字符不丢）`);
|
||||
ok(!has(markup(src), `<${tag}>`), `① 不再为 \`${tag}\` 产出元素`);
|
||||
}
|
||||
}
|
||||
|
||||
// ── ② 白名单外一律纯文本字面量，且不产生任何节点/属性 ──────────────────────────
|
||||
@@ -265,4 +270,61 @@ const REAL_SAMPLE =
|
||||
ok(!has(user, "<script") && has(user, "<script>x</script>"), "⑥ 用户气泡里的白名单外标签仍是字面量");
|
||||
}
|
||||
|
||||
// ── ⑦ `<br>` = 气泡/消息分隔（与 `<p>` 同级，**不是**气泡内换行） ────────────────
|
||||
// 主人 2026-10-07 口径：「对消息内的 `<br>` 始终处理为多条消息隔断」。这一组全部走
|
||||
// **真实链路**（`SplitChatBubble` → `splitBubble` → `splitParagraphs` → `renderContent`），
|
||||
// 所以它同时是「上一轮把 `<br>` 当行内换行」那个错误实现的**反向断言**。
|
||||
{
|
||||
const BUBBLE = "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5";
|
||||
const asst = (content: string) => render({ id: "br1", role: "assistant", content, createdAt: 1 } as ChatMessage);
|
||||
|
||||
// 主人给的四条口径。
|
||||
const inP = asst("<p>甲<br>乙</p>");
|
||||
ok(count(inP, BUBBLE) === 2, "⑦ `<p>甲<br>乙</p>` ⇒ 两个气泡");
|
||||
ok(has(inP, "<span>甲</span>") && has(inP, "<span>乙</span>"), "⑦ 两个气泡的正文分别是 甲 / 乙");
|
||||
ok(!has(inP, "<br/>") && !has(inP, "<br"), "⑦ `<br>` 既不进 DOM、也不作为字面量出现在正文里");
|
||||
|
||||
const noP = asst("甲<br>乙");
|
||||
ok(count(noP, BUBBLE) === 2, "⑦ 无 `<p>` 时 `甲<br>乙` ⇒ 两个气泡");
|
||||
ok(has(noP, "<span>甲</span>") && has(noP, "<span>乙</span>"), "⑦ 无 `<p>` 时同样按 `<br>` 切开");
|
||||
|
||||
ok(count(asst("<p>甲<br><br>乙</p>"), BUBBLE) === 2, "⑦ `<p>甲<br><br>乙</p>` ⇒ 两个气泡（中间空气泡丢弃）");
|
||||
ok(count(asst("<p>甲 <br> 乙</p>"), BUBBLE) === 2, "⑦ `<br>` 两侧空白 ⇒ 不产生多余空气泡");
|
||||
ok(count(asst("<p>甲<br></p>"), BUBBLE) === 1, "⑦ 尾随 `<br>` 不留空气泡");
|
||||
ok(count(asst("<p>甲<br> </p>"), BUBBLE) === 1, "⑦ `<br>` 后全空白不留空气泡");
|
||||
|
||||
// 正文只剩 `<br>`：气泡分隔把它切光 ⇒ 按空正文交下去（空气泡丢弃，别把字面量画出来）。
|
||||
const onlyBr = asst("<br>");
|
||||
ok(count(onlyBr, BUBBLE) === 1 && !has(onlyBr, "<br"), "⑦ 正文只剩 `<br>` ⇒ 不产生字面量、只留空回复外壳");
|
||||
|
||||
// 三种写法等价（HTML5）：`<br>` / `<br/>` / `</br>`；属性不解析（`<br class=x>` 照样切）。
|
||||
for (const src of ["<p>甲<br>乙</p>", "<p>甲<br/>乙</p>", "<p>甲</br>乙</p>", "<p>甲<br class=\"x\">乙</p>"]) {
|
||||
ok(count(asst(src), BUBBLE) === 2, `⑦ 等价写法都切成两个气泡：${src}`);
|
||||
}
|
||||
|
||||
// 护栏：`<brow>` / `<br2>` 不是 br 标签（与 `1 < 2`、`a<b`、`<p2>` 同一条口径）。
|
||||
const brow = asst("<p>甲<brow>乙</brow>丙</p>");
|
||||
ok(count(brow, BUBBLE) === 1, "⑦ `<brow>` 不是 br ⇒ 不切气泡");
|
||||
ok(has(brow, "<brow>"), "⑦ `<brow>` 按白名单外口径逐字原样");
|
||||
ok(count(asst("<p>甲<br2>乙</br2>丙</p>"), BUBBLE) === 1, "⑦ `<br2>` / `</br2>` 同样不是 br");
|
||||
|
||||
// 流式半截 `<br`（还没等到 `>`）⇒ 不是分隔符，本段仍是一个气泡。
|
||||
const partial = asst("<p>甲<br</p>");
|
||||
ok(count(partial, BUBBLE) === 1, "⑦ 流式半截 `<br`（无 `>`）不切气泡");
|
||||
ok(has(partial, "<br"), "⑦ 半截标签按字面量显示（字符不丢）");
|
||||
|
||||
// 与行内标签混用：切开的两段各自照常做行内渲染。
|
||||
const mixed = asst("<p>日落 <b>18:35</b><br>晚安</p>");
|
||||
ok(count(mixed, BUBBLE) === 2, "⑦ 含行内标签的段落同样按 `<br>` 切开");
|
||||
ok(has(mixed, "<b>18:35</b>") && has(mixed, "<span>晚安</span>"), "⑦ 两段各自渲染（第一段保留粗体）");
|
||||
|
||||
// 用户气泡走同一条链。
|
||||
const userBr = render({ id: "u2", role: "user", content: "<p>甲<br>乙</p>", createdAt: 2 } as ChatMessage);
|
||||
ok(count(userBr, "mu-rise-in flex flex-col items-end gap-0.5") === 2, "⑦ 用户气泡同样按 `<br>` 切成两个");
|
||||
|
||||
// `<action>` 注记不受 `<br>` 影响（注记文案原样、仍在气泡外），正文照常切。
|
||||
const noteBr = asst("<action>她 笑 了</action><p>甲<br>乙</p>");
|
||||
ok(count(noteBr, BUBBLE) === 2 && has(noteBr, "＊动作：她 笑 了＊"), "⑦ 注记照旧在气泡外，正文照常切成两段");
|
||||
}
|
||||
|
||||
console.log(`inline markup render test: ${checks} checks passed`);
|
||||
Reference in new issue
Block a user