LexicalJS如何阻止同格式textNode在paragraphNode中合并？

问题解答 #

原生DOM TextNode的情况

原生DOM的TextNode本身支持在同一个段落（<p>）中存在多个独立节点，浏览器不会自动合并通过JS动态创建并插入的相邻TextNode——只有在解析HTML源码时，连续的文本内容才会被合并成单个TextNode。比如用JS写：

const p = document.createElement('p');
p.appendChild(document.createTextNode('hello'));
p.appendChild(document.createTextNode(' '));
p.appendChild(document.createTextNode('world'));
document.body.appendChild(p);

此时<p>内部会有3个独立的TextNode，不会被合并。

你遇到的合并问题原因

从你的代码里的$createTextNode、setFormat这些API来看，你应该是在使用某款封装好的富文本编辑器（而非原生DOM操作）。这类编辑器通常会内置同格式文本节点自动合并的优化逻辑——为了减少节点数量、提升性能，编辑器会把相邻且格式完全一致的文本节点合并成一个，这是编辑器自身的行为，和原生TextNode的特性无关。

实现需求的方案

要阻止编辑器合并同格式文本节点，有两种可行思路：

1. 插入分隔节点：在每个拆分后的TextNode之间，插入一个无视觉影响的空元素节点（比如隐藏的<span>），让编辑器认为节点之间被元素隔开，从而不合并。示例代码（适配你用的编辑器API）：

const currentTextNode = selection.extract()[0];
const currentParagraph = currentTextNode.getParent();
const nodeText = currentTextNode.__text;
if(nodeText.includes(" ")){
    const splitText = nodeText.split(" ");
    currentTextNode.remove(true);
    splitText.forEach((string) => {
        const newTextNode = $createTextNode(string + ' ');
        newTextNode.setFormat('bold');
        currentParagraph.append(newTextNode);
        // 插入隐藏的空span作为分隔
        const separator = $createElement('span');
        separator.setStyle('display', 'none');
        currentParagraph.append(separator);
    });
    // 移除最后一个多余的分隔节点（可选）
    currentParagraph.removeChild(currentParagraph.lastChild);
} else {
    currentTextNode.setFormat(0);
}

2. 制造微小格式差异：给每个拆分后的TextNode设置一个不影响视觉的细微格式差异（比如极微小的字间距），让编辑器判定它们格式不同，从而不合并。示例：

splitText.forEach((string, index) => {
    const newTextNode = $createTextNode(string + ' ');
    newTextNode.setFormat('bold');
    // 给每个节点设置不同的极小字间距，视觉无差异但编辑器认为格式不同
    newTextNode.setStyle('letter-spacing', `${index * 0.0001}px`);
    currentParagraph.append(newTextNode);
});

如果编辑器提供了关闭自动合并的配置项，优先调整配置会更简洁。

内容的提问来源于stack exchange，提问作者NeonDrive