monaco-editor version: 0.8.3
Browser: Chrome
OS: Mac OSX Captain
Steps or JS usage snippet reproducing the issue:
I want to move the cursor after the item is selected from the list.
Is it possible?
function createDependencyProposals() {
// returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
// here you could do a server side lookup
return [
{
label: '"lodash"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "The Lodash library exported as Node.js modules.",
insertText: '"lodash": "*"'
},
{
label: '"express"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "Fast, unopinionated, minimalist web framework",
insertText: '"express": "*"'
},
{
label: '"mkdirp"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "Recursively mkdir, like <code>mkdir -p</code>",
insertText: '"mkdirp": "*"'
}
];
}
monaco.languages.registerCompletionItemProvider('json', {
provideCompletionItems: function(model, position) {
// find out if we are completing a property in the 'dependencies' object.
var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
var match = textUntilPosition.match(/"dependencies"\s*:\s*{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*("[^"]*)?$/); if (match) {
return createDependencyProposals();
}
return [];
}
});
const editor = monaco.editor.create(document.getElementById("container"), {
value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
language: "json"
});
var suggestWidgetContext = editor.createContextKey("suggestWidgetVisible", true);
editor.addCommand(monaco.KeyCode.Enter, function() {
/**
* This is not working. It even prevents from selecting item from the suggest widget.
*/
console.log("Enter pressed");
var model = editor.getModel();
model.modifyPosition(editor.getPosition(), -3);
}, 'suggestWidgetVisible')
@dragfire There are ways to create the suggestions in such a way that they act like a snippet and place the cursor at a certain position. I think the insertText can represent a snippet (via the SnippetString). For snippets, it is possible to control the end cursor position.
Als Alex suggested, use a snippet string as insertText, so { ..., insertText: {value: 'here$0cursor'}. Find the snippet syntax here: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax
Most helpful comment
Als Alex suggested, use a snippet string as
insertText, so{ ..., insertText: {value: 'here$0cursor'}. Find the snippet syntax here: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax