microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
40.21k stars 3.58k forks source link

monaco diffeditor can support invalid blank in a line highlight? #2574

Closed qcscofield closed 3 years ago

qcscofield commented 3 years ago
hediet commented 3 years ago

Can you please provide more information?

qcscofield commented 3 years ago

image like this. there is 4 invalid blank in the code. Can monaco diffeditor find out it and highlight ?

hediet commented 3 years ago

Sorry, I still don't understand the issue.

Can you provide an example in the monaco playground?

qcscofield commented 3 years ago

Hi According to the code specification, invalid spaces in a line are not allowed. Is there any way for Monaco to automatically identify invalid spaces and highlight them

hediet commented 3 years ago

Can you clarify what you mean with invalid spaces?

code specification

Which code specification?

qcscofield commented 3 years ago

For example, if there is a line in a. C file that has nothing but four spaces, it is considered to be nonstandard. I want to identify it through Monaco

rcjsuen commented 3 years ago

For example, if there is a line in a. C file that has nothing but four spaces, it is considered to be nonstandard. I want to identify it through Monaco

@qcscofield Sounds like you want the red squiggly lines like for flagging syntax errors?

image

qcscofield commented 3 years ago

@rcjsuen almost,can it identify invalid spaces or useless indentation? how to do it ?

rcjsuen commented 3 years ago

@rcjsuen almost,can it identify invalid spaces or useless indentation? how to do it ?

@qcscofield That's on you to implement it. The Monaco Editor will not arbitrarily flag whitespace as being "unnecessary" with red squiggly lines.

This playground example may help you.

monaco.languages.register({ id: 'demoLanguage' });
const uri = monaco.Uri.parse("inmemory://test");
const model = monaco.editor.createModel("", "demoLanguage", uri);

function getMarkers() {
    const lines = model.getLinesContent();
    const markers = [];
    for (let i = 0; i < lines.length; i++) {
        if (lines[i] === "abc") {
            markers.push({
                message: "Sample error message",
                severity: monaco.MarkerSeverity.Error,
                startLineNumber: i + 1,
                startColumn: 1,
                endLineNumber: i + 1,
                endColumn: 1,
            })
        }
    }
    return markers;
}

model.onDidChangeContent(e => {
    monaco.editor.setModelMarkers(model, "owner", getMarkers());
});
model.setValue("abc\ndef\nghi\nabc\ndef")

monaco.editor.create(document.getElementById("container"), {model: model});
qcscofield commented 3 years ago

@rcjsuen Thanks, but he doesn't seem to work in diffeditor

rcjsuen commented 3 years ago

@qcscofield I've never seen red squiggly lines in the diff editor.

@hediet Do you know if this is possible?

qcscofield commented 3 years ago

@rcjsuen I implemented diffeditor to work, but it has to be in "readOnly:false" case to work. if readOnly:true it can't work.

var originalModel = monaco.editor.createModel("This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text", "text/plain");
var modifiedModel = monaco.editor.createModel("just some text\nabc\nzzzzefgh\nSome more text.\nThis line is removed on the left.", "text/plain");
monaco.editor.setModelMarkers(modifiedModel, "owner", getMarkers());
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), {
    readOnly:false
});

function getMarkers() {
    const lines = modifiedModel.getLinesContent();
    const markers = [];
    for (let i = 0; i < lines.length; i++) {
        if (lines[i] === "abc") {
            markers.push({
                message: "Sample error message",
                severity: monaco.MarkerSeverity.Error,
                startLineNumber: i + 1,
                startColumn: 1,
                endLineNumber: i + 1,
                endColumn: 1,
            })
        }
    }
    return markers;
}

diffEditor.setModel({
    original: originalModel,
    modified: modifiedModel
});
hediet commented 3 years ago

Afaik there is a setting to render diagnostics in readonly editors.

spahnke commented 3 years ago

@qcscofield renderValidationDecorations: "on" should do the trick. Then the editor can be readonly.

qcscofield commented 3 years ago

Thanks spahnke. It work for me. :) Thanks hediet and rcjsuen. Grateful everyone. You are very nice.