executeEdits 重置我的编辑操作范围

Question

我正在尝试在 Monaco Editor 中进行一些基本的事件回放，但是，每当我将编辑传递给 executeEdits 时，它总是会将我编辑的 range 重置为 [=14] =]（这就是我 console.log 在 调用 executeEdits 之后 消息得到的结果）。实际上，我尝试插入或替换的任何文本总是在第一行的开头结束，并有效地反向输入文本。

import * as React from 'react'
import * as monaco from 'monaco-editor'

import { PlayerContext } from './player-context'

const defaultOptions = {
  minimap: {
    enabled: false
  }
}

export default class MonacoEditor extends React.Component {
  static contextType = PlayerContext

  handleMessage = message => {
    this._editor.executeEdits('', [
      { ...message, forceMoveMarkers: true }
    ])
  }

  componentDidMount() {
    const { path, value, language, ...options } = this.props
    const model = monaco.editor.createModel(value, language, path)
    this._editor = monaco.editor.create(this._node, {
      ...defaultOptions,
      ...options
    })
    this._editor.setModel(model)
    this.context.addMessageHandler('didChange', this.handleMessage)
  }

  componentWillUnmount() {
    this._editor && this._editor.dispose()
    this.context.removeMessageHandler('didChange', this.handleMessage)
  }

  render() {
    return <div style={{ height: 500 }} ref={c => (this._node = c)} />
  }
}

我正在使用 React 渲染 Monaco Editor，如上所示。上下文提供了一个基本上允许我订阅播放事件的对象，传递给 handleMessage 的 message 对象的形状为 IIdentifiedSingleEditOperation

{
  range: {
    startLineNumber: 0, 
    startColumn: 47, 
    endLineNumber: 0, 
    endColumn: 47
  },
  text: '!'
}

为什么 Monaco 会重置我的编辑操作范围？

Answer 1

IIdentifiedSingleEditOperation 上的文档在 range 属性 中说：

The range to replace. This can be empty to emulate a simple insert.

因此您应该能够只传递一个空对象，编辑操作将被附加。

但是，documentation on the Range class 声明行号和列从 1 开始，而不是 0。这以及给定范围应描述应 替换的文本部分这一事实，而不是应该附加操作的位置，导致 Monaco 替换（无效的）范围。