摩纳哥编辑器，添加新行时添加代码的最佳方式？

Question

对于客户端，我需要提供一个 Web Ide 来编辑 yaml 文件。所以，摩纳哥编辑器似乎是完美的选择。

一个请求的功能是：

add list item ( - ) for a new line if the previous one is a list item

我用 onDidChangeModelContent() 来检测变化和我想出了如何在添加新行后添加这个“-”，但我的问题是光标停留在“-”之前。

我尝试 setPosition() 或使用 executeEdits() 但在 onDidChangeModelContent() 执行后，一些代码覆盖了光标位置 ...

那么，这可能不是个好方法？有什么想法吗？

Answer 1

我会使用 editor.onDidType，我相信它不在文档中（这意味着它可能会在 v1.0 发布时消失）。

editor.onDidType(text => {
  const bulletText = '- ';

  const insertBullet = (pos) => {
    const range = new monaco.Range(pos.lineNumber, pos.column, pos.lineNumber, pos.column);
    editor.executeEdits('new-bullets', [{identifier: 'new-bullet', range, text: bulletText}])
  }

  if (text === '\n') {
    const model = editor.getModel();
    const position = editor.getPosition();
    const prevLine = model.getLineContent(position.lineNumber - 1);
    prevLine.trim().indexOf(bulletText) === 0 && insertBullet(position);
  }
})

我还没有实际测试过这个，但它应该能为您指明正确的方向。

Answer 2

多亏了 Benny，它现在可以正常工作了。只需要在insertBullet函数末尾添加setPosition即可。

editor.onDidType(text => {
  const bulletText = "- ";

  const insertBullet = pos => {
    const range = new monaco.Range(
      pos.lineNumber,
      pos.column,
      pos.lineNumber,
      pos.column
    );
    editor.executeEdits("new-bullets", [
      { identifier: "new-bullet", range, text: bulletText }
    ]);

    // Set position after bulletText
    editor.setPosition({
      lineNumber: pos.lineNumber,
      column: pos.column + 2
    });
  };

  if (text === "\n") {
    const model = this.editor.getModel();
    const position = this.editor.getPosition();
    const prevLine = model.getLineContent(position.lineNumber - 1);
    prevLine.trim().indexOf(bulletText) === 0 && insertBullet(position);
  }
});

摩纳哥编辑器，添加新行时添加代码的最佳方式？

Monaco Editor, best way to add code when new line added?

monaco-editor