javascript - executeEdits 重置我的编辑操作范围

Question

我正在尝试在 Monaco Editor 中进行一些基本的事件回放，但是，每当我将编辑传递给 executeEdits 时，它总是会重置我的编辑的范围到 { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 } (这是如果我 console.log after 调用 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 编辑器，如上所示。上下文提供了一个基本上允许我订阅播放事件的对象，传递给 handleMessage 的 message 对象的形状为 IIdentifiedSingleEditOperation

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

摩纳哥为何重置我的编辑操作范围？

Answer 1

关于 IIdentifiedSingleEditOperation 的文档在 range 属性中说:

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

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

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