Extending Enter Key Behaviour

[itskhurrams]

Hi,
Can you please let me know how can i extend the Enter Key behavior. I want to use Enter key behavior on suggestion box but i want if user press enter key other then suggestion box the cursor should moved to next line and line should be indented on the condition of current line text.
I have achieved this but as i added the Command on Enter key its behavior on the suggestion box has stopped working.

Regards,
Khurram

[itskhurrams]

@alexandrudima do we have any way of doing this ?

[alexdima]

@itskhurram So you want Enter to behave as it does out of the box, minus what the indentation of the newline is? You can customize how Enter behaves on a specific language via monaco.languages.setLanguageConfiguration and by using onEnterRules. There you can declarative describe how indentation works in your language.

If that does not work for you, you can define a command that executes on Enter and use the context !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible. All of these widgets can potentially pop up (depending on the language you're using in your models) and need the Enter to accept something, not just the suggest widget.

[nmanumr]

i am doing this like that but that is not working for me

monaco.languages.setLanguageConfiguration('javascript',{ onEnterRules: function(){ alert('ss'); } })

[alexdima]

onEnterRules is not supposed to be a function. From the monaco.d.ts:

    export interface LanguageConfiguration {
        // ...
        onEnterRules?: OnEnterRule[];
        // ...
    }

    /**
     * Describes a rule to be evaluated when pressing Enter.
     */
    export interface OnEnterRule {
        /**
         * This rule will only execute if the text before the cursor matches this regular expression.
         */
        beforeText: RegExp;
        /**
         * This rule will only execute if the text after the cursor matches this regular expression.
         */
        afterText?: RegExp;
        /**
         * The action to execute.
         */
        action: EnterAction;
    }

You can find an example here: https://github.com/Microsoft/monaco-typescript/blob/master/src/mode.ts#L97

[nmanumr]

i am now doing this but when i press enter nothing happens

monaco.languages.setLanguageConfiguration('gb', {
                onEnterRules: [
                    {
                        beforeText: /^\s*[0-9]+/,
                        action: { appendText: 'hello world!' }
                    }
                ]
            })

[alexdima]

The following snippet works for me when I paste it in at https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages for example and press Run so perhaps you have a problem elsewhere?

monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.editor.create(document.getElementById("container"), {
    value: getCode(),
    language: 'mySpecialLanguage'
});

monaco.languages.setLanguageConfiguration('mySpecialLanguage', {
    onEnterRules: [
        {
            beforeText: /[0-9]$/,
            action: {
                indentAction: monaco.languages.IndentAction.None,
                appendText: 'hello world!'
            }
        }
    ]
})

function getCode() {
    return [
        'A line that ends in numbers: 123123132',
        'A line that doesn\'t end in numbers'
    ].join('\n');
}

[nmanumr]

monaco.languages.setLanguageConfiguration('mySpecialLanguage', {
    onEnterRules: [
        {
            beforeText: /[0-9]$/,
            action: {
                indentAction: monaco.languages.IndentAction.None,
                appendText: getNewLineText();
            }
        }
    ]
})

but getNewLineText function is called just once (while initializing) but i need to call it every time when enter is pressed.

[alexdima]

See my original answer:

If that does not work for you, you can define a command that executes on Enter and use the context !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible. All of these widgets can potentially pop up (depending on the language you're using in your models) and need the Enter to accept something, not just the suggest widget.

Here is a self-contained example:

var jsCode = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
].join('\n');

var editor = monaco.editor.create(document.getElementById("container"), {
    value: jsCode,
    language: "javascript"
});

editor.addCommand(monaco.KeyCode.Enter, function(accessor) {
    editor.trigger('bla', 'type', { text: '\nMyGreatDynamicTextHere' });
}, '!suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible')

[nmanumr]

everything working fine but when enter is pressed and find dialog in opened than instead of moving to next find result a new line is add with dynamic text.

i think we are missing something here '!suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible'

[alexdima]

@naumanumer Yep, my bad, please also use && editorTextFocus.

So all in all: 'editorTextFocus && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible'

[itskhurrams]

Hello,
I just have to execute my validation function on enter key press. I used the above "addCommand" but my cursor is not moving on to next line. I also used executeEdits in order to add '\n' on next line but it work some time but not all the time.

[tongshouyu1019]

hello,
i just want this,

editor.addCommand(monaco.KeyCode.Enter, function(accessor) {
editor.trigger('bla', 'type', { text: '\n' });
}, '!suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible')

but it dose not work, help!

[m-o-leary]

Sorry to dig up an old thread - but is there a way of adding a choice to the appended text?

Like with the provide completion items?

provideCompletionItems: () => {
          return [
            {
              label: 'Material',
              kind: monaco.languages.CompletionItemKind.Keyword,
              insertText: {
                value: [
                  '{',
                  '\tso\t\t\t: $1,',
                  '\tbid\t\t\t: $2,',
                  '\tlocation\t: ${3|'+locations+'|},',
                  '\},\n$0',
                ].join('\n')
              }
            },
            ...
             ]
 }

Is there a way to have this choice based on variables in the appended text here:

onEnterRules: [
          {
              beforeText: /[0-9]$/,
              action: {
                  indentAction: monaco.languages.IndentAction.None,
                 appendText: 'hello world!'
              }
          }
        ]

[alexdima]

Let's track in #102