如何在文本编辑器中更改单个单词的颜色/随着时间的推移淡出它们

Question

我正在尝试创建一个允许用户输入的文本框。正如他们所做的那样，最近（最后）的单词将是黑色的，而之前的单词将逐渐变为白色。

现在，我有一个 contenteditable 与以下代码。每当发生变化时，它都会获取当前文本，将其拆分为单词，将最后几个单词包装在一个带有黑色文本颜色类的跨度中，并将之前的几个单词包装在一个带有白色文本颜色类的跨度中（颜色之间有一些淡入淡出） .它有效，但不允许换行或任何格式（粗体/斜体/下划线）。有没有办法做到这一点仍然允许那些？我试过查看其他可自定义的富文本编辑器，如 quill，但无法弄清楚如何获得淡入淡出效果。我不需要这些富文本编辑器的大部分功能，真的只需要粗体/斜体/也许字体大小。

editor.setAttribute("data-placeholder", getRandomPlaceholder(placeholderTexts));


// get rid of spell check red squiggles
editor.spellcheck = false;
editor.focus();
editor.blur();

editor.addEventListener('input', () => {
    let words = editor.innerText.split(/\s+/);
    let blackWords = words.slice(-3);
    let fadeWords = words.slice(-8, -3);
    let whiteWords = words.slice(0, -8);

    let whiteSpan = document.createElement('span');
    whiteSpan.className = 'white';
    whiteSpan.innerText = whiteWords.join(' ');

    // Create fade spans
    let fadeSpans = fadeWords.map((word, index) => {
        let span = document.createElement('span');
        span.className = `fade-${index + 1}`;
        span.innerText = word;
        return span;
    });

    let blackSpan = document.createElement('span');
    blackSpan.className = 'black';
    blackSpan.innerText = blackWords.join(' ');

    editor.innerHTML = '';

    if (whiteWords.length > 0) {
        editor.appendChild(whiteSpan);
        editor.appendChild(document.createTextNode(' '));
    }

    // Append fade spans
    fadeSpans.forEach((span, index) => {
        editor.appendChild(span);
        if (index < fadeSpans.length - 1) {
            editor.appendChild(document.createTextNode(' '));
        }
    });

    if (fadeWords.length > 0) {
        editor.appendChild(document.createTextNode(' '));
    }

    editor.appendChild(blackSpan);

    // Move cursor to the end
    let range = document.createRange();
    let selection = window.getSelection();
    range.selectNodeContents(editor);
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
});