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

Question

For a client I need to provide a Web Ide to edit yaml file. So, Monaco Editor seems to be the perfect choice.

One requested feature is:

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

I used onDidChangeModelContent() to detect change and I figure out how to add this "-" after a new line added but my problem is cursor stay before "-".

I try setPosition() or use executeEdits() but after onDidChangeModelContent() execution, some code override cursor position ...

So, may be, it's not the good way to do it ? any ideas ?

Answer 1

I would use editor.onDidType, which I believe is not in the docs (that means it might be gone by the time v1.0 comes out).

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

I haven't actually tested this, but it should point you in the right direction.