File size: 2,557 Bytes
c120a1c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import { morphdom } from '../../lib.js';
/**
* Check if the current browser supports native segmentation function.
* @returns {boolean} True if the Segmenter is supported by the current browser.
*/
export function isSegmenterSupported() {
return typeof Intl.Segmenter === 'function';
}
/**
* Segment text in the given HTML content using Intl.Segmenter.
* @param {HTMLElement} htmlElement Target HTML element
* @param {string} htmlContent HTML content to segment
* @param {'word'|'grapheme'|'sentence'} [granularity='word'] Text split granularity
*/
export function segmentTextInElement(htmlElement, htmlContent, granularity = 'word') {
htmlElement.innerHTML = htmlContent;
if (!isSegmenterSupported()) {
return;
}
// TODO: Support more locales, make granularity configurable.
const segmenter = new Intl.Segmenter('en-US', { granularity });
const textNodes = [];
const walker = document.createTreeWalker(htmlElement, NodeFilter.SHOW_TEXT);
while (walker.nextNode()) {
const textNode = /** @type {Text} */ (walker.currentNode);
// Skip ancestors of code/pre
if (textNode.parentElement && textNode.parentElement.closest('pre, code')) {
continue;
}
// Skip text nodes that are empty or only whitespace
if (/^\s*$/.test(textNode.data)) {
continue;
}
textNodes.push(textNode);
}
// Split every text node into segments using spans
for (const textNode of textNodes) {
const fragment = document.createDocumentFragment();
const segments = segmenter.segment(textNode.data);
for (const segment of segments) {
// TODO: Apply a different class for different segment length/content?
// For now, just use a single class for all segments.
const span = document.createElement('span');
span.innerText = segment.segment;
span.className = 'text_segment';
fragment.appendChild(span);
}
textNode.replaceWith(fragment);
}
}
/**
* Apply stream fade-in effect to the given message text element by morphing its content.
* @param {HTMLElement} messageTextElement Message text element
* @param {string} htmlContent New HTML content to apply
*/
export function applyStreamFadeIn(messageTextElement, htmlContent) {
const targetElement = /** @type {HTMLElement} */ (messageTextElement.cloneNode());
segmentTextInElement(targetElement, htmlContent);
morphdom(messageTextElement, targetElement);
}
|