reactjs - 为什么代码的随机部分突出显示？

Question

我们有一个由 monaco-editor 制作的在线编辑器，这里是链接:https://v3.10studio.tech/#/formula-editor-addin?app=formula-editor-addin .用户可以输入 Excel 公式，如 =1+2+3+4+5 ，然后单击 Format按钮查看格式化的公式。
奇怪的是，在点击 Format 后按钮，公式的随机部分通常以灰色突出显示:


有谁知道可能是什么原因？
PS:当前选项设置如下:

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 },
};

Answer 1

当您设置模型的值时，即 editor.getModel().setValue('FORMATTED-CODE')您应该必须手动设置光标的位置。
选择实际上不是随机的。摩纳哥将选择您添加的所有额外文本。例如 -
之前:1+2+3+4+5 - 这里的最后一个位置是第 1 行第 10 列
格式:1 + 2 + 3 + 4 + 5 - 这里的最后一个位置是第 1 行第 18 列
所以额外的文字 + 4 + 5被选中，这意味着第 11 到 18 列被选中
将光标的位置设置在它之前的位置

const pos = editor.getPosition()
editor.getModel().setValue('FORMATTED-CODE')
editor.setPosition(pos)

设置光标位置在 Line 1 Column 1

editor.getModel().setValue('FORMATTED-CODE')
editor.setPosition({ lineNumber: 1, column: 1 })

最后设置光标的位置(使用偏移量)

const formatted = 'FORMATTED-CODE'
const offset = formatted.length
const pos = editor.getModel().getPositionAt(offset)

editor.getModel().setValue(formatted)
editor.setPosition(pos)

您还可以设置选择

editor.setSelection({
  startLineNumber: 1,
  startColumn: 1,
  endLineNumber: 1,
  endColumn: 5,
})

有关更多信息，您可以遵循这些 API -

setPosition - 设置光标位置

setSelection - 设置选择

setSelections - 设置多个位置和选择