Improve white-space handling in browser clipping extension

[TCOTC]

汇总：HTML 转换 Markdown 时需要根据元素的 white-space 属性来处理空白字符

背景

应该按网页的实际呈现方式来解析空白字符

涵盖两种场景：

• 网页剪藏 → 浏览器拓展 与 Lute 进行处理
• 从网页复制内容粘贴到思源 → Lute 前端 进行处理

规范：https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

white-space 属性影响空白字符的处理方式，需要依据元素实际的 white-space 属性值分别处理的空白字符包含以下几种：

	换行符	空格和制表符	文本换行	行末空格	行末的其他空白分隔符
normal	合并	合并	换行	移除	挂起
nowrap	合并	合并	不换行	移除	挂起
pre	保留	保留	不换行	保留	不换行
pre-wrap	保留	保留	换行	挂起	挂起
pre-line	保留	合并	换行	移除	挂起
break-spaces	保留	保留	换行	换行	换行

方案

1. 首先获取元素的 white-space 属性值

   • 网页剪藏 → 浏览器拓展可以通过 Window.getComputedStyle() 获取元素的样式，例如：

     const pElement = document.querySelector('p');
     const computedStyle = window.getComputedStyle(pElement);
     console.log(computedStyle.whiteSpace); // 返回实际应用的 white-space 值（包括继承）

   • 从网页复制内容粘贴到思源 → 在复制得到的 HTML 中，元素的所有样式都是内联样式，可以直接判断

2. 然后针对实际的 white-space 属性值分别处理元素中的空白字符

关联问题

• 网页摘录时对span元素white-space和word-wrap样式换行识别 #13195
• 剪藏 span 元素换行问题 #13838
• 剪藏知乎遇到链接会换行 #14400
• 改进小红书剪藏 #14772 (comment)

@ruin1990

[ruin1990]

之前的逻辑还会还原回去，现在感觉不需要了，因为剪藏完毕还会刷新一次重新加载网页。我准备去掉这部分还原的代码，按理说剪藏速度能更快点。

[88250]

ok

…

---原始邮件--- 发件人: ***@***.***> 发送时间: 2025年5月17日(周六) 中午1:07 收件人: ***@***.***>; 抄送: ***@***.***>; 主题: Re: [siyuan-note/siyuan] 汇总：HTML 转换 Markdown 时需要根据元素的 white-space 属性来处理空白字符 (Issue #14775) ruin1990 left a comment (siyuan-note/siyuan#14775) 之前的逻辑还会还原回去，现在感觉不需要了，因为剪藏完毕还会刷新一次重新加载网页。我准备去掉这部分还原的代码，按理说剪藏速度能更快点。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[ruin1990]

汇总下测试链接：
https://mp.weixin.qq.com/s/Ie3gq3k81c5B-L7uH2h9PQ?utm_source=ld246.com
https://www.xiaohongshu.com/explore/681210f6000000002100533e?xsec_token=CBicRLl_qDeySqA1tLx50z5-Dmoa7_VXi-G7PbGk9EKHw=
https://www.bilibili.com/opus/465490977904921957
https://www.cnblogs.com/whuanle/p/18551532
https://mp.weixin.qq.com/s/stilz-Zm52G_-NUevcWD3w
https://mp.weixin.qq.com/s/_mpSXqLcBq17VF0p-7KSHg

[88250]

Lute 不处理了。