monaco-editor
monaco-editor copied to clipboard
microsoft
[Bug] DiffEditor Trailing Line Is Marked As Difference When A Difference Text Is At The End Of Line
Reproducible in vscode.dev or in VS Code Desktop?
- [X] Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- [ ] Not reproducible in the monaco editor playground
Monaco Editor Playground Link
https://microsoft.github.io/monaco-editor/playground.html?source=v0.45.0#XQAAAAIbBQAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscw7sLNaAEiAJM8XEuX7Os378jBGtVLkr6ryuhqvky-XZ9Sy0vyFSI1m9lYQpwqOsaKmhydYWIo-9hGbv_4wlPHIol1gXlyE-FggjI3kNdcw19f9yHegkUkzNwDjXwHZr6aoSbdnyyEWAclBcWUhIMq11JrllrOakARMz_8-jq2sUjuJNNWAd-_XZfk544MznS5AaO045wJFm8f22iZ3lNJCsd38LMLmJf2uFLz_coY-zpDLSih0ffXYB71VXzwfCgeHHm1SD3CkxJZkysWQZ7XFOMG4bUM83m28Axl3lop1_p_rjaoGdFeX2i-p9Q3rEZqFQYUgyT1p0W-CzLdZ1O_4X0tSC88c3u0SelVHI0ZivDrm8HDgvM6jXJxmGk7_H7NgFQq2jNy05IX0IfEsvbCSCBsvMItogAoggInl5zHWgBOpuyv7ajBHkOKt2iX7QA8G2VZfmctQ5ITNzCMI9feDc6JJQ2T5FBTBt-Us-_vq883aVKluVLYVxP0jEnXxsm8haEkxHXEM2VGLErnMvhSoEqHqzSbTHGpIABs7eDj2fWlKe3KsZ_1EOQd921Bz2xZntTDmKv8X232
Monaco Editor Playground Code
const originalModel = monaco.editor.createModel(
/* set from `originalModel`: */ `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Difference.Website</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/diff.css" />
</head>`,
"text/plain"
);
const modifiedModel = monaco.editor.createModel(
/* set from `modifiedModel`: */ `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Difference.Website</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/main.min.css" />
<link rel="stylesheet" href="~/css/site.min.css" />
</head>`,
"text/plain"
);
const diffEditor = monaco.editor.createDiffEditor(
document.getElementById("container"),
{
originalEditable: true,
automaticLayout: true,
}
);
diffEditor.setModel({
original: originalModel,
modified: modifiedModel,
});
Reproduction Steps
Paste the below code in the first diff editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Difference.Website</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/diff.css" />
</head>
Paste the below code in the second diff editor:
Actual (Problematic) Behavior
When a difference is present at the end of the line, the whole line till the end get colored.
I even tried the option "ignoreTrimWhitespace" but it gives the same result.
This error started to happen after v0.43.0. Please check the attached image. In image "Error" which uses v.0.45.0 the whole trailing line is colored whereas in image "Correct" which uses v0.43.0 only the difference text is colored.
Expected Behavior
When a difference text is present at the end of the line, only the different text should be colored.
Additional Context
No response
Stumbled on the same issue. And this actually IS reproducible in the newest version of VS Code.
