Question

对于客户端，我需要提供一个Web ID来编辑yaml文件。因此，摩纳哥编辑器似乎是最佳选择。

一个请求的功能是：

如果上一行是列表项，则为新行添加列表项（-）

我用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，它现在正在工作。只需在setPosition函数的末尾添加insertBullet。

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

摩纳哥编辑器，添加新行时添加代码的最佳方法是什么？

2 个答案: