diff --git a/.chronus/changes/fix-playground-unused-using-dimming-2026-5-27.md b/.chronus/changes/fix-playground-unused-using-dimming-2026-5-27.md new file mode 100644 index 00000000000..3a3f776ab02 --- /dev/null +++ b/.chronus/changes/fix-playground-unused-using-dimming-2026-5-27.md @@ -0,0 +1,7 @@ +--- +changeKind: fix +packages: + - "@typespec/playground" +--- + +Fix unused `using` statements not being dimmed in the playground editor diff --git a/packages/playground/src/react/playground.tsx b/packages/playground/src/react/playground.tsx index 956c49e9a74..031be14b334 100644 --- a/packages/playground/src/react/playground.tsx +++ b/packages/playground/src/react/playground.tsx @@ -3,7 +3,7 @@ import { $ } from "@typespec/compiler/typekit"; import { Pane, SplitPane } from "@typespec/react-components"; import "@typespec/react-components/style.css"; import debounce from "debounce"; -import { KeyCode, KeyMod, MarkerSeverity, Uri, editor } from "monaco-editor"; +import { KeyCode, KeyMod, MarkerSeverity, MarkerTag, Uri, editor } from "monaco-editor"; import { useCallback, useEffect, @@ -13,7 +13,6 @@ import { type FunctionComponent, type ReactNode, } from "react"; -import { CompletionItemTag } from "vscode-languageserver"; import { resolveVirtualPath } from "../browser-host.js"; import { EditorCommandBar } from "../editor-command-bar/editor-command-bar.js"; import { getMonacoRange, updateDiagnosticsForCodeFixes } from "../services.js"; @@ -289,7 +288,7 @@ export const Playground: FunctionComponent = (props) => { ...getMonacoRange(typespecCompiler, diag.target), message: diag.message, severity: diag.severity === "error" ? MarkerSeverity.Error : MarkerSeverity.Warning, - tags: diag.code === "deprecated" ? [CompletionItemTag.Deprecated] : undefined, + tags: diag.code === "deprecated" ? [MarkerTag.Deprecated] : undefined, })); // Update code action provider with current diagnostics (for codefix support). diff --git a/packages/playground/src/services.ts b/packages/playground/src/services.ts index 6b83443d1e6..5bdba2a53c4 100644 --- a/packages/playground/src/services.ts +++ b/packages/playground/src/services.ts @@ -79,7 +79,27 @@ export async function registerMonacoLanguage(host: BrowserHost) { const model = monaco.editor.getModel(monaco.Uri.parse(url)); return model ? MonacoToLsp.textDocumentForModel(model) : undefined; }, - sendDiagnostics() {}, + sendDiagnostics({ uri, diagnostics }) { + const model = monaco.editor.getModel(monaco.Uri.parse(uri)); + if (!model) return; + + // Apply visual tag markers (e.g., dim unused code, strikethrough deprecated) from LSP diagnostics. + // Regular error/warning markers are managed by the playground's own compilation. + // The LSP DiagnosticTag values (Unnecessary=1, Deprecated=2) match Monaco's MarkerTag values. + const taggedMarkers: monaco.editor.IMarkerData[] = diagnostics + .filter((d) => d.tags !== undefined && d.tags.length > 0) + .map((d) => ({ + severity: monaco.MarkerSeverity.Hint, + message: d.message, + startLineNumber: d.range.start.line + 1, + startColumn: d.range.start.character + 1, + endLineNumber: d.range.end.line + 1, + endColumn: d.range.end.character + 1, + tags: d.tags?.map((t) => t as number as monaco.MarkerTag), + })); + + monaco.editor.setModelMarkers(model, "lsp-tags", taggedMarkers); + }, log: (log) => { switch (log.level) { case "error":