ACE editor auto-completion duplicating prefix - ace-editor

Question

I'm trying to add auto-completions for mermaid diagrams to my editor:
const mermaids = Object.entries({
"mermaid graph": `graph LR\n x --> y`,
}).map(([name, autocompletion]) => ({
caption: name,
meta: name,
value: "``mermaid\n" + autocompletion + "\n```"
}));
aceeditor.setOptions({
enableBasicAutocompletion: [{
getCompletions: (editor, session, pos, prefix, callback) => {
callback(null, [
...mermaids
])
}
}],
enableSnippets: false,
enableLiveAutocompletion: true
});
In the resulting editor, if the user types "graph" or "mermaid" and hits enter to auto-complete, it works as expected. (With the exception of less-than desirable cursor position after the completion.) If the user types "```" and hits enter, the autocompletion occurs after the originally typed "```". E.g.,
``````mermaid
graph LR
x --> y
\``` <-- just escaped here for SO's sake
Is there an efficient way to correct this? If not, what event can I use to determine when an auto-completion has actually occurred and search for duplicate markers?
Is there a better way to do this in general?

Answer 1

I think the broader issue here is that your completion item more closely resembles a snippet. Using snippets would also give you better control over where the cursor goes after insertion.
Answering your second question, Autocomplete.insertMatch is the function responsible for inserting the chosen completion item. You could hook it, or perhaps use the mysteriously undocumented .completer field on the completion items? It's been there for 9 years now, perhaps it is not an accident.
const FakeCompleter = {
insertMatch: (editor, data) => {
// stolen from default insertMatch, needed to erase text that triggered our completion:
if (editor.completer.completions.filterText) {
var ranges = editor.selection.getAllRanges()
for (var i = 0, range; range = ranges[i]; i++) {
range.start.column -= editor.completer.completions.filterText.length
editor.session.remove(range)
}
}
// if there are ` symbols immediately before cursor, omit those from completion:
let text = (data.value || data)
const lead = editor.selection.lead
const prefix = editor.session.getLine(lead.row).substring(0, lead.column)
const mt = /.*?(`{1,3})$/.exec(prefix)
if (mt && text.startsWith(mt[1])) text = text.substring(mt[1].length)
// and finally call the regular insertion:
editor.execCommand("insertstring", text)
}
}
const mermaids = Object.entries({
"mermaid graph": `graph LR\n x --> y`,
}).map(([name, autocompletion]) => ({
caption: name,
meta: name,
value: "``mermaid\n" + autocompletion + "\n```",
completer: FakeCompleter
}));