基于monaco-editor的编辑器点击格式化后Excel公式随机部分灰显是什么原因？

问题描述 #

我们使用monaco-editor开发了一款在线编辑器，用户可输入类似=1+2+3+4+5的Excel公式，点击Format按钮即可查看格式化后的公式。

点击Format按钮后，公式的随机部分经常会出现灰色高亮，相关示例如图：

请问是什么原因导致该异常现象？

备注：当前编辑器配置参数如下

const monacoOptions: monacoEditor.editor.IEditorConstructionOptions = {
  lineNumbers: 'off',
  selectionHighlight: false,
  glyphMargin: false, //left side,
  lineDecorationsWidth: 0, // width between line number and content,
  renderIndentGuides: false, // no indent guide lines
  minimap: { enabled: false },
};

问题原因及解决方案 #

出现灰色高亮是monaco-editor默认开启的部分高亮功能未关闭导致，现有配置仅关闭了选区高亮，没有覆盖所有自动高亮规则，核心原因有三个：

• 未关闭occurrencesHighlight配置：该配置默认值为true，作用是自动高亮当前内容中所有和匹配token相同的片段，格式化更新内容时触发了该规则，就会出现随机片段标灰的情况。
• 未关闭matchBrackets配置：该配置默认开启，公式中的成对括号、运算符会触发匹配高亮。
• 格式化替换内容时可能残留了之前的自定义装饰器，没有及时清理。

对应修改方案如下：

1. 补充编辑器配置，关闭所有不需要的自动高亮规则：

const monacoOptions: monacoEditor.editor.IEditorConstructionOptions = {
  // 原有配置保留
  lineNumbers: 'off',
  selectionHighlight: false,
  glyphMargin: false,
  lineDecorationsWidth: 0,
  renderIndentGuides: false,
  minimap: { enabled: false },
  // 新增配置
  occurrencesHighlight: false, // 关闭相同文本片段高亮
  matchBrackets: 'never', // 关闭括号匹配高亮
  renderLineHighlight: 'none', // 关闭当前行整体高亮
};

2. 如果修改配置后仍有问题，在每次格式化更新编辑器内容后，手动清理所有残留装饰器：

// editor为你的编辑器实例
editor.setValue(formattedFormula);
// 清理所有残留装饰器
editor.deltaDecorations(editor.getModel().getAllDecorations().map(item => item.id), []);

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