Skip to content

Fix playground diff highlights disappearing when navigating between output files#10480

Open
Copilot wants to merge 2 commits intomainfrom
copilot/fix-diff-highlight-issue
Open

Fix playground diff highlights disappearing when navigating between output files#10480
Copilot wants to merge 2 commits intomainfrom
copilot/fix-diff-highlight-issue

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 24, 2026

Diff highlights in the playground output viewer were only visible for the file open at the moment compilation finished. Navigating to any other changed file showed the new content but no highlights, until the next compile.

Root cause

In OutputEditor, the decoration useEffect only depended on [changedLineNumbers, editorInstance]. On file navigation, setFilename is sync but loadOutputFilesetContent is async, producing two renders:

  1. changedLineNumbers ref changes → decorations applied to the still‑stale model content.
  2. value updates with the file's real content. model.setValue(value) replaces all content (discarding decorations), but the decoration effect doesn't re‑run because changedLineNumbers ref is unchanged → highlights are lost.

The originally‑open file works only because its content load and the change‑set update land in the same batched render, so decorations are applied after the final setValue.

Changes

  • packages/playground/src/react/typespec-editor.tsx — Add filename and value to the decoration effect's dep array so decorations are re‑applied after the model is swapped or its content is replaced. Effects run in declaration order, and the existing setValue effect is declared first, so highlights are re‑applied last and survive. The editor is readOnly, so value only changes when the parent supplies new content — no churn on user input.
  • Changelogfix entry for @typespec/playground.
useEffect(() => {
  if (!editorInstance || !decorationCollectionRef.current) return;
  // ...apply or clear decorations...
}, [changedLineNumbers, editorInstance, filename, value]);
//                                       ^^^^^^^^^^^^^^^^ added

Copilot AI changed the title [WIP] Fix diff highlight visibility for affected files Fix playground diff highlights disappearing when navigating between output files Apr 24, 2026
Copilot AI requested a review from JoshLove-msft April 24, 2026 01:23
@JoshLove-msft JoshLove-msft marked this pull request as ready for review April 24, 2026 02:29
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 24, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@typespec/playground@10480

commit: ca44376

@azure-sdk
Copy link
Copy Markdown
Collaborator

You can try these changes here

🛝 Playground 🌐 Website 🛝 VSCode Extension

@@ -0,0 +1,7 @@
---
changeKind: fix
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
changeKind: fix
changeKind: internal

this was added in the same release so no need to document the change

decorationCollectionRef.current.clear();
}
}, [changedLineNumbers, editorInstance]);
}, [changedLineNumbers, editorInstance, filename, value]);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looking at the content of the effect not sure this is the right fix, worried this is just going to trigger at the wrong time causing more inconsitency on how things are recomputed. Neither filename or value are used in the effect which would be the reason for passing them in the trigger list

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Diff highlight only shows if affected file is currently open

4 participants