Monaco-editor: Move Cursor after an item is selected from AutoSuggestion list.

Created on 12 Apr 2017  路  2Comments  路  Source: microsoft/monaco-editor


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')
suggest

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

All 2 comments

@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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

brandalorian picture brandalorian  路  3Comments

zeegin picture zeegin  路  3Comments

andreymarchenko picture andreymarchenko  路  3Comments

hawkerm picture hawkerm  路  3Comments

akosyakov picture akosyakov  路  3Comments