Monaco-editor: Append (not Insert/Replace) text

Created on 21 Sep 2017  路  4Comments  路  Source: microsoft/monaco-editor

Hello
I'm trying to add some content programmatically. The executeEdits replaces the Text at the given Ranges. How can I add/append the text and not replace the existing content?

Thanks

Most helpful comment

Thanks for the help, it pointed me to the right direction. I could solve this like this: I find the Line number and then edit only that specific line. Here is the code:

       var position = editor.getPosition(); // Get current mouse position
        var text = editor.getValue(position); 
        var splitedText=text.split("\n"); 
        var lineContent = splitedText[position.lineNumber-1]; // Get selected line content
        var textToInsert = "<div>"; // text to be inserted
        splitedText[position.lineNumber-1] = [lineContent.slice(0, position.column-1), textToInsert , lineContent.slice(position.column-1)].join(''); // Append the text exactly at the selected position (position.column -1)
        editor.setValue(splitedText.join("\n")); // Save the value back to the Editor
        editor.setPosition(position);

All 4 comments

I don't really know the answer to your question, but I would assume that one way to handle it would be to call executeEdits with yourCurrentValue + valueToApend.

I've been digging through the docs to solve my own problem, and I found this for you:

So, you could do something like so:

const lineCount = editor.getModel().getLineCount();
const lastLineLength = editor.getModel().getLineMaxColumn(lineCount);

const range = new monaco.Range(
    lineCount,
    lastLineLength,
    lineCount,
    lastLineLength
);

editor.executeEdits('', [
    { range: range, text: 'your content to add' }
])

Hello

Thanks a lot for your reply. This will add text to the end of the Content and it works perfectly. I need to add the text to a specific line and not to the end of the Content. Your expample braught me to the idea to first move the entire content starting the line number I want to insert text, and the insert the text there. I will report about this as soon as I have a solution.

Thanks for the help, it pointed me to the right direction. I could solve this like this: I find the Line number and then edit only that specific line. Here is the code:

       var position = editor.getPosition(); // Get current mouse position
        var text = editor.getValue(position); 
        var splitedText=text.split("\n"); 
        var lineContent = splitedText[position.lineNumber-1]; // Get selected line content
        var textToInsert = "<div>"; // text to be inserted
        splitedText[position.lineNumber-1] = [lineContent.slice(0, position.column-1), textToInsert , lineContent.slice(position.column-1)].join(''); // Append the text exactly at the selected position (position.column -1)
        editor.setValue(splitedText.join("\n")); // Save the value back to the Editor
        editor.setPosition(position);
Was this page helpful?
0 / 5 - 0 ratings