100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
/**
|
|
* Word / WPS 粘贴富文本的归一化处理。
|
|
*
|
|
* 直接插入 Word 复制出的 HTML 会出现「表格被截断」，原因有三：
|
|
* ① 表格与单元格带绝对宽度（pt / px），宽度总和超过容器后被整体裁切；
|
|
* ② 单元格带 `white-space: nowrap` 或 `nowrap` 属性，内容不换行而横向溢出；
|
|
* ③ Word 私有 `mso-*` 样式与 `overflow: hidden` 把超出部分直接隐藏。
|
|
*
|
|
* 本模块只解除这些「布局锁定」，表格结构（行列、合并、边框、加粗、对齐）全部保留，
|
|
* 宽度改由各渲染端的 CSS 统一控制，避免同一份文书在不同容器里表现不一致。
|
|
*/
|
|
|
|
const COMMENTS = /<!--[\s\S]*?-->/g
|
|
/** 成对出现的标签整体删除（含内容） */
|
|
const BLOCK_TAGS = /<(script|style|meta|link)\b[^>]*>[\s\S]*?<\/\1>/gi
|
|
/** 自闭合标签：`<script />`、`<meta ...>`、`<link ...>` */
|
|
const VOID_TAGS = /<(script|meta|link)\b[^>]*\/?>/gi
|
|
|
|
/** 会造成截断的样式声明：绝对宽度、固定布局与内容裁剪 */
|
|
const LAYOUT_LOCK_STYLES = new Set([
|
|
'width',
|
|
'min-width',
|
|
'max-width',
|
|
'height',
|
|
'table-layout',
|
|
'white-space',
|
|
'overflow',
|
|
'overflow-x',
|
|
'overflow-y',
|
|
])
|
|
|
|
/** 与样式等价的 HTML 属性，Word 会同时输出两者 */
|
|
const LAYOUT_LOCK_ATTRIBUTES = ['width', 'height', 'nowrap']
|
|
|
|
function sanitizeStyleAttribute(style: string): string {
|
|
return style
|
|
.split(';')
|
|
.map((declaration) => declaration.trim())
|
|
.filter(Boolean)
|
|
.filter((declaration) => {
|
|
const property = (declaration.split(':')[0] ?? '').trim().toLowerCase()
|
|
|
|
if (!property || property.startsWith('mso-')) {
|
|
return false
|
|
}
|
|
|
|
return !LAYOUT_LOCK_STYLES.has(property)
|
|
})
|
|
.join('; ')
|
|
}
|
|
|
|
/**
|
|
* 归一化 Word / WPS 粘贴的富文本 HTML。
|
|
* 入参为空或解析失败时原样返回，不会抛错。
|
|
*/
|
|
export function normalizePastedHtml(html: string): string {
|
|
if (!html) {
|
|
return ''
|
|
}
|
|
|
|
const stripped = html.replace(COMMENTS, '').replace(BLOCK_TAGS, '').replace(VOID_TAGS, '')
|
|
|
|
const parsed = new DOMParser().parseFromString(`<div id="pasted-root">${stripped}</div>`, 'text/html')
|
|
const root = parsed.getElementById('pasted-root')
|
|
|
|
if (!root) {
|
|
return stripped
|
|
}
|
|
|
|
// Word 私有属性（mso-*、align 之外的 xmlns 等）在其他渲染环境里没有意义，留着反而干扰布局
|
|
root.querySelectorAll('*').forEach((element) => {
|
|
Array.from(element.attributes).forEach((attribute) => {
|
|
if (attribute.name.toLowerCase().startsWith('mso-')) {
|
|
element.removeAttribute(attribute.name)
|
|
}
|
|
})
|
|
})
|
|
|
|
// 表格、列定义与单元格：解除绝对尺寸与不换行约束，宽度交由渲染端 CSS 决定
|
|
root.querySelectorAll('table, col, colgroup, td, th').forEach((element) => {
|
|
LAYOUT_LOCK_ATTRIBUTES.forEach((name) => element.removeAttribute(name))
|
|
|
|
const style = element.getAttribute('style')
|
|
|
|
if (!style) {
|
|
return
|
|
}
|
|
|
|
const sanitized = sanitizeStyleAttribute(style)
|
|
|
|
if (sanitized) {
|
|
element.setAttribute('style', sanitized)
|
|
} else {
|
|
element.removeAttribute('style')
|
|
}
|
|
})
|
|
|
|
return root.innerHTML
|
|
}
|