microsoft / microsoft/monaco-editor
[Bug] DiffEditor Trailing Line Is Marked As Difference When A Difference Text Is At The End Of Line
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 46.8k
- Forks
- 4.1k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 1
Description
Reproducible in vscode.dev or in VS Code Desktop?
- 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
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:
<title>@ViewData["Title"] - Difference.Website</title> @**@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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Monaco Editor Playground link and the DiffEditor setup in the reported TypeScript example, comparing behavior between v0.43.0 and v0.45.0. Reproduce the trailing-line case and verify that only the differing text is colored, including when ignoreTrimWhitespace is enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100