Allow OnTypeFormattingEditProvider edits to preserve cursor position

[jonatanklosko]

monaco-editor version: 0.23.0
Browser: Chrome
OS: Linux (Ubuntu)

Playground code that reproduces the case

const ElixirOnTypeFormattingEditProvider = {
  autoFormatTriggerCharacters: ["\n"],
  provideOnTypeFormattingEdits(model, position, char, options, token) {
    if (char === "\n") {
      return closingEndTextEdits(model, position);
    }

    return [];
  },
};

function closingEndTextEdits(model, position) {
  const lines = model.getLinesContent();
  const lineIndex = position.lineNumber - 1;
  const prevLine = lines[lineIndex - 1];
  const prevIndentation = indentation(prevLine);

  if (shouldInsertClosingEnd(lines, lineIndex)) {
    return [{
      range: new monaco.Range(
        position.lineNumber,
        position.column,
        position.lineNumber,
        position.column
      ),
      text: `\n${prevIndentation}end`,
    }];
  }

  return [];
}

function shouldInsertClosingEnd(lines, lineIndex) {
  const prevLine = lines[lineIndex - 1];
  const prevTokens = tokens(prevLine);

  return last(prevTokens) === "do";
}

function indentation(line) {
  const [indentation] = line.match(/^\s*/);
  return indentation;
}

function tokens(line) {
  return line.replace(/#.*/, "").match(/->|[\w:]+/g) || [];
}

function last(list) {
  return list[list.length - 1];
}

monaco.languages.register({ id: "elixir" });

monaco.languages.registerOnTypeFormattingEditProvider(
  "elixir",
  ElixirOnTypeFormattingEditProvider
);

const editor = monaco.editor.create(document.getElementById("container"), {
  value: "defmodule Foo do",
  language: "elixir",
  quickSuggestions: false,
  formatOnType: true
});

We are trying to have a do/end block autocompletion using OnTypeFormattingEditProvider. The above snippet provides a simplified version that demonstrates the issue we are facing.

Here's a video of the behaviour:

do_end.mp4

Once the enter is pressed we end up in the following state:

defmodule Foo do
#<cursor>

Now if we insert \nend the cursor is moved, but we would like it to stay in place.

Sidenote

We are able to overcome this problem if there is a line below, because we simply insert end\n in that line. However this doesn't work if we are in the last line already (and in our use case that's the primary scenario).

Possible solutions

Ideally the text edit could have a property that leaves the cursor unchanged.

If there's a more proper way of implementing this, I'd be happy to hear!

[alexdima]

I think we mostly use OnTypeFormattingEditProvider to edit whitespace, not to insert actual text / change the structure of the code. Maybe for this case, the onEnterRules of a language might help. e.g.

// Register a new language
monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.languages.setLanguageConfiguration('mySpecialLanguage', {
	autoClosingPairs: [
		{ open: 'do', close: 'end', notIn: ['string'] }
	],
    onEnterRules: [{
        beforeText: /\sdo$/,
        afterText: /^end$/,
        action: {
            indentAction: monaco.languages.IndentAction.IndentOutdent
        }
    }]
});

monaco.editor.create(document.getElementById("container"), {
	value: `defmodule Foo `,
	language: 'mySpecialLanguage',
    wordBasedSuggestions: false
});

Kapture.2021-05-12.at.13.36.56.mp4

[jonatanklosko]

@alexdima thanks for the response! The problem with the suggested solution is that it would insert end to eagerly. For example someone may intend to type do: or an arbitrary word like docs. So only the newline clarifies the intention.