Monaco-editor: Monaco editor replace double quote with two single quote characters

[DevidCIC]

My custom language does not have the character " (double-quotes) so I would like on user input to replace double quotes with two single quotes ' .

Is the registerOnTypeFormattingEditProvider method the right way to do it ?

window.monaco.languages.registerOnTypeFormattingEditProvider(clarionLanguage, {
        autoFormatTriggerCharacters: ['"'],
        provideOnTypeFormattingEdits: (model, position, ch, options, token) => {
            console.log('character typed ', ch );
            return [
                {
                    range: {
                        startLineNumber: position.lineNumber,
                        startColumn: position.column,
                        endLineNumber: position.lineNumber,
                        endColumn: position.column
                    },
                    text: `''`
                }
            ];
        }
    });

Now I have the problem that instead of two single quotes I get a double quote followed by two single quotes like this "'' instead of just this ''

Can anyone help ?

[rcjsuen]

@DevidCIC I don't feel like using the formatter is the way to go but here's some code that does it your way. Please try it out in the playground. The issue with your original code was that your range calculation was wrong which caused the editor to only insert text and not replace the ".

monaco.languages.register({
    id: "testLang"
})

monaco.editor.create(document.getElementById("container"), {
    value: "Hello Monaco world!",
    language: "testLang",
    formatOnType: true
});

monaco.languages.registerOnTypeFormattingEditProvider("testLang", {
    autoFormatTriggerCharacters: ['"'],
    provideOnTypeFormattingEdits: (model, position, ch, options, token) => {
        console.log('character typed ', ch);
        return [
            {
                range: {
                    startLineNumber: position.lineNumber,
                    startColumn: position.column - 1,
                    endLineNumber: position.lineNumber,
                    endColumn: position.column
                },
                text: `''`
            }
        ];
    }
});

[DevidCIC]

@rcjsuen I feel like too that it is not the perfect solution, but it works. Do you maybe now how can I also put the cursor between the two single quotes ?

[alexdima]

You could also use the unofficial onDidType.

i.e. editor.onDidType(function(text) { console.log('user typed ' + text); });

[DevidCIC]

@alexandrudima onDidType(listener: (text: string) => void): IDisposable; is a bit more work, as I have now to get the value and then replace it. But good to know that there is such a method.

Do you also happen to know how I can set the cursor position ? What is the method called which modifies the cursor position ?

[alexdima]

It is not nice to touch the editor position from a formatting provider, as that should be the business of the UI side which applies the formatting edits.

If you were to go down the path of onDidType (and you have access to an editor instance), you can apply the edits you want (i.e. replace the previously typed in things) and you could call editor.setSelections to your desired end selections.

[rcjsuen]

Hi @DevidCIC, you can try this code that incorporates what Alexandru suggested.

monaco.languages.register({
    id: "replaceLang"
})

let model = monaco.editor.createModel(
    "Hello Monaco world",
    "replaceLang"
);

let editor = monaco.editor.create(document.getElementById("container"), {
    model
});

editor.onDidType(function(text) {
    if (text === '"') {
        let selection = editor.getSelection();
        model.pushEditOperations([], [
            {
                range: {
                    startLineNumber: selection.startLineNumber,
                    startColumn: selection.startColumn - 1,
                    endLineNumber: selection.startLineNumber,
                    endColumn: selection.startColumn
                },
                text: "''"
            }
        ]);
        editor.setSelection(selection);
    }
});

[DevidCIC]

@rcjsuen thanks very much. In my program I can't create the model as you do. What I did is editor.getModel().pushEditOperations. Everything works perfectly.

[alexdima]

I will close the issue then.