Ace编辑器点击回车出现红点的问题排查与解决求助

问题背景 #

启用RTL相关配置（rtl: true、rtlText: true）后，点击回车键会生成一个红点，对应DOM元素：

<span class="ace_invisible ace_invisible_space ace_invalid">·</span>

即使设置useWorker: false关闭实时语法检查，红点仍未消失。排查发现该红点是编辑器渲染Unicode编码为8235（Right-To-Left Embedding，RLE）的控制字符时生成的，对应ace.js中的这段逻辑：

else if (controlCharacter) {
     console.log(`controlCharacter: (${controlCharacter})`);
     var span = this.dom.createElement("span");
     span.className = "ace_invisible ace_invisible_space ace_invalid";
     span.textContent = lang.stringRepeat(self.SPACE_CHAR, controlCharacter.length);
     valueFragment.appendChild(span);
}

解决方法 #

方法1：自定义渲染器过滤RLE字符 #

重写编辑器渲染器的文本节点生成方法，移除RLE字符对应的错误样式：

var renderer = editor.renderer;
var originalGetTextTokenNode = renderer.$textLayer.getTextTokenNode;

renderer.$textLayer.getTextTokenNode = function(token, session, baseStyle) {
    var node = originalGetTextTokenNode.call(this, token, session, baseStyle);
    if (token.value.includes(String.fromCharCode(8235))) {
        node.classList.remove("ace_invalid");
    }
    return node;
};

editor.renderer.updateFull();

方法2：修改Ace源码排除RLE字符 #

直接调整ace.js中控制字符的处理逻辑，排除RLE字符的错误标记：

else if (controlCharacter) {
     // 跳过RLE字符的错误样式标记
     if (controlCharacter[0] === String.fromCharCode(8235)) {
         var span = this.dom.createElement("span");
         span.className = "ace_invisible ace_invisible_space";
         span.textContent = lang.stringRepeat(self.SPACE_CHAR, controlCharacter.length);
         valueFragment.appendChild(span);
         return;
     }
     console.log(`controlCharacter: (${controlCharacter})`);
     var span = this.dom.createElement("span");
     span.className = "ace_invisible ace_invisible_space ace_invalid";
     span.textContent = lang.stringRepeat(self.SPACE_CHAR, controlCharacter.length);
     valueFragment.appendChild(span);
}

方法3：CSS隐藏红点 #

通过样式直接隐藏带有错误标记的不可见字符：

.ace_invisible.ace_invalid {
    display: none !important;
}

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