46 lines
1.6 KiB
JavaScript
46 lines
1.6 KiB
JavaScript
import { visit } from 'unist-util-visit';
|
||
|
||
/**
|
||
* rehype 插件：将段落等文本节点拆分为逐词 <span>，并添加淡入动画 class。
|
||
* 仅在流式渲染阶段使用，避免已渲染文字重复动画。
|
||
*/
|
||
export function rehypeSplitWordsIntoSpans() {
|
||
return (tree) => {
|
||
visit(tree, 'element', (node) => {
|
||
if (
|
||
['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'strong'].includes(node.tagName) &&
|
||
node.children
|
||
) {
|
||
const newChildren = [];
|
||
node.children.forEach((child) => {
|
||
if (child.type === 'text') {
|
||
try {
|
||
// 使用 Intl.Segmenter 精准拆分中英文及标点
|
||
const segmenter = new Intl.Segmenter('zh', { granularity: 'word' });
|
||
const segments = segmenter.segment(child.value);
|
||
Array.from(segments)
|
||
.map((seg) => seg.segment)
|
||
.filter(Boolean)
|
||
.forEach((word) => {
|
||
newChildren.push({
|
||
type: 'element',
|
||
tagName: 'span',
|
||
properties: {
|
||
className: ['animate-fade-in'],
|
||
},
|
||
children: [{ type: 'text', value: word }],
|
||
});
|
||
});
|
||
} catch (_) {
|
||
// Fallback：如果浏览器不支持 Segmenter，直接输出原文本
|
||
newChildren.push(child);
|
||
}
|
||
} else {
|
||
newChildren.push(child);
|
||
}
|
||
});
|
||
node.children = newChildren;
|
||
}
|
||
});
|
||
};
|
||
}
|