Monaco-editor: Trigger provideOnTypeFormattingEdits

Created on 11 Feb 2018  路  3Comments  路  Source: microsoft/monaco-editor

I am trying to add a OnType formatting to a custom language in Monaco Editor. It seems that we could use OnTypeFormattingEditProvider.

As an example, I have made a plunker, but I don't know why provideOnTypeFormattingEdits is not triggered when typing.

monaco.languages.registerOnTypeFormattingEditProvider('mySpecialLanguage', {
    provideOnTypeFormattingEdits: function (model, position, ch, options, token) {
        console.log("inside provideOnTypeFormattingEdits");
        return [
            {
              range: {
                startLineNumber: 1,
                startColumn: 1,
                endLineNumber: 1,
                endColumn: 1
              },
              text: `abc`
            }
        ]
    }
})

Could anyone help?

Most helpful comment

@chengtie When creating your editor, you need to tell Monaco to turn on the feature by enabling formatOnType to true.

var editor = monaco.editor.create(iElement[0], {
    language: monacoeditorOptions.language,
    lineNumbers: monacoeditorOptions.lineNumbers,
    minimap: monacoeditorOptions.minimap,
    automaticLayout: monacoeditorOptions.automaticLayout,
    scrollBeyondLastLine: monacoeditorOptions.scrollBeyondLastLine,
    theme: monacoeditorOptions.theme,
    formatOnType: true
});

You also need to define the _required_ string[] property autoFormatTriggerCharacters in your OnTypeFormattingEditProvider implementation.

monaco.languages.registerOnTypeFormattingEditProvider('mySpecialLanguage', {
    provideOnTypeFormattingEdits: function (model, position, ch, options, token) {
    console.log("inside provideOnTypeFormattingEdits");
        return [
            {
                range: {
                    startLineNumber: 1,
                    startColumn: 1,
                    endLineNumber: 1,
                    endColumn: 1
                },
                text: `abc`
            }
                ]
        },
    autoFormatTriggerCharacters: [ 'a' ]
});  

All 3 comments

@chengtie When creating your editor, you need to tell Monaco to turn on the feature by enabling formatOnType to true.

var editor = monaco.editor.create(iElement[0], {
    language: monacoeditorOptions.language,
    lineNumbers: monacoeditorOptions.lineNumbers,
    minimap: monacoeditorOptions.minimap,
    automaticLayout: monacoeditorOptions.automaticLayout,
    scrollBeyondLastLine: monacoeditorOptions.scrollBeyondLastLine,
    theme: monacoeditorOptions.theme,
    formatOnType: true
});

You also need to define the _required_ string[] property autoFormatTriggerCharacters in your OnTypeFormattingEditProvider implementation.

monaco.languages.registerOnTypeFormattingEditProvider('mySpecialLanguage', {
    provideOnTypeFormattingEdits: function (model, position, ch, options, token) {
    console.log("inside provideOnTypeFormattingEdits");
        return [
            {
                range: {
                    startLineNumber: 1,
                    startColumn: 1,
                    endLineNumber: 1,
                    endColumn: 1
                },
                text: `abc`
            }
                ]
        },
    autoFormatTriggerCharacters: [ 'a' ]
});  

@rcjsuen indeed, it works... thank you...

@chengtie No problem, good to hear that it's working for you.

Please close this issue then if you problem has been resolved.

Was this page helpful?
0 / 5 - 0 ratings