feat(ui): syntax-highlight the read-only source previews (#1284)

The read-only previews beside Problems, Show Usages and TODO results are syntax-coloured from one whole-file parse (capped for very large files), so a line inside a block comment or a multi-line string is coloured as such; the pane renders plain first and recolours when the parse lands. SourcePreview takes the colouring as a colorize prop (the editor's previewColors), keeping src/ui free of editor imports, and the tok-* colours live once in global.css instead of a copy per view, with the theme's comment style.

Co-authored-by: qtvbwfn <[email protected]>

src/features/agents/Session.module.css

@@ -307,44 +307,6 @@
   text-decoration: underline;
 }
 
-/* Lezer classHighlighter tokens in fenced code (same colours as the Markdown preview). */
-.markdown :global(.tok-keyword),
-.markdown :global(.tok-modifier),
-.markdown :global(.tok-controlKeyword),
-.markdown :global(.tok-operatorKeyword) {
-  color: var(--syn-keyword);
-}
-.markdown :global(.tok-string),
-.markdown :global(.tok-string2) {
-  color: var(--syn-string);
-}
-.markdown :global(.tok-number),
-.markdown :global(.tok-bool),
-.markdown :global(.tok-atom) {
-  color: var(--syn-number);
-}
-.markdown :global(.tok-typeName),
-.markdown :global(.tok-className),
-.markdown :global(.tok-namespace) {
-  color: var(--syn-type);
-}
-.markdown :global(.tok-comment) {
-  color: var(--syn-comment);
-}
-.markdown :global(.tok-meta),
-.markdown :global(.tok-macroName) {
-  color: var(--syn-annotation);
-}
-.markdown :global(.tok-propertyName) {
-  color: var(--syn-property);
-}
-.markdown :global(.tok-variableName.tok-definition) {
-  color: var(--syn-function);
-}
-.markdown :global(.tok-punctuation),
-.markdown :global(.tok-operator) {
-  color: var(--syn-punct);
-}
 .markdown :global(ul),
 .markdown :global(ol) {
   margin: 0 0 8px;

src/features/code-insight/ProblemsView.tsx

@@ -4,6 +4,7 @@ import { create } from "zustand";
 import clsx from "clsx";
 import type { Diagnostic, Severity } from "@/bindings";
 import { useEditorRegistry } from "@/editor/api";
+import { previewColors } from "@/editor/lineTokens";
 import { executeAction } from "@/platform/actions";
 import { formatBinding, hasPrimaryModifier, hostBinding, shortcutLabel } from "@/platform/keymap";
 import { basename, relativeDir, useProject } from "@/platform/project";
@@ -409,6 +410,7 @@ export function ProblemsView() {
                 line={selected?.d.range.start.line ?? 0}
                 highlights={selected ? [diagHighlight(selected.d)] : []}
                 load={previewText}
+                colorize={previewColors}
               />
             </SplitPanel>
           </SplitGroup>

src/features/code-insight/UsagesView.module.css

@@ -95,40 +95,6 @@
   color: var(--fg-search-match, inherit);
   border-radius: 2px;
 }
-/* Lezer classHighlighter tokens of usage lines (same colours as Find in Files results). */
-.preview :global(.tok-keyword),
-.preview :global(.tok-modifier),
-.preview :global(.tok-controlKeyword),
-.preview :global(.tok-operatorKeyword) {
-  color: var(--syn-keyword);
-}
-.preview :global(.tok-string),
-.preview :global(.tok-string2) {
-  color: var(--syn-string);
-}
-.preview :global(.tok-number),
-.preview :global(.tok-bool),
-.preview :global(.tok-atom) {
-  color: var(--syn-number);
-}
-.preview :global(.tok-typeName),
-.preview :global(.tok-className),
-.preview :global(.tok-namespace) {
-  color: var(--syn-type);
-}
-.preview :global(.tok-comment) {
-  color: var(--syn-comment);
-}
-.preview :global(.tok-meta),
-.preview :global(.tok-macroName) {
-  color: var(--syn-annotation);
-}
-.preview :global(.tok-propertyName) {
-  color: var(--syn-property);
-}
-.preview :global(.tok-variableName.tok-definition) {
-  color: var(--syn-function);
-}
 
 .note {
   min-width: 0;

src/features/code-insight/UsagesView.tsx

@@ -5,7 +5,7 @@
 import { useCallback, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
 import clsx from "clsx";
 import { create } from "zustand";
-import { tokenSpans, useLineTokens } from "@/editor/lineTokens";
+import { previewColors, tokenSpans, useLineTokens } from "@/editor/lineTokens";
 import { formatMessage, useTx } from "@/platform/i18n";
 import { shortcutLabel } from "@/platform/keymap";
 import { basename, relativeDir, useProject } from "@/platform/project";
@@ -399,6 +399,12 @@ function UsagesPreview({ node }: { node: Node | null }) {
     return (group?.usages ?? []).map((u) => ({ line: u.line, ranges: [[u.col, u.endCol] as const] }));
   }, [usage, search?.groups]);
   return (
-    <SourcePreview path={usage?.path ?? null} line={usage?.line ?? 0} highlights={highlights} load={previewText} />
+    <SourcePreview
+      path={usage?.path ?? null}
+      line={usage?.line ?? 0}
+      highlights={highlights}
+      load={previewText}
+      colorize={previewColors}
+    />
   );
 }

src/features/database/Database.module.css

@@ -672,6 +672,11 @@
   font-size: var(--fs-small);
   color: var(--fg-secondary);
 }
+/* SQL types (INT, VARCHAR) read as keywords, as in the SQL editor. */
+.sqlPreview :global(.tok-typeName),
+.codeText :global(.tok-typeName) {
+  color: var(--syn-keyword);
+}
 .sqlPreview {
   margin: 0;
   padding: 8px 10px;
@@ -690,41 +695,6 @@
   -webkit-user-select: text;
   user-select: text;
 }
-.sqlPreview :global(.tok-keyword),
-.codeText :global(.tok-keyword),
-.sqlPreview :global(.tok-operatorKeyword),
-.codeText :global(.tok-operatorKeyword) {
-  color: var(--syn-keyword);
-}
-.sqlPreview :global(.tok-string),
-.codeText :global(.tok-string),
-.sqlPreview :global(.tok-string2),
-.codeText :global(.tok-string2) {
-  color: var(--syn-string);
-}
-.sqlPreview :global(.tok-number),
-.codeText :global(.tok-number),
-.sqlPreview :global(.tok-bool),
-.codeText :global(.tok-bool),
-.sqlPreview :global(.tok-atom),
-.codeText :global(.tok-atom) {
-  color: var(--syn-number);
-}
-.sqlPreview :global(.tok-typeName),
-.codeText :global(.tok-typeName) {
-  color: var(--syn-keyword);
-}
-.sqlPreview :global(.tok-comment),
-.codeText :global(.tok-comment) {
-  color: var(--syn-comment);
-  font-style: italic;
-}
-.sqlPreview :global(.tok-punctuation),
-.codeText :global(.tok-punctuation),
-.sqlPreview :global(.tok-operator),
-.codeText :global(.tok-operator) {
-  color: var(--syn-punct);
-}
 .modifyBody {
   display: flex;
   flex-direction: column;

src/features/search/everywhere/SearchEverywhere.module.css

@@ -175,40 +175,6 @@
   color: var(--fg);
   tab-size: 2;
 }
-/* Lezer classHighlighter tokens of text hits (same colours as the Markdown preview). */
-.code :global(.tok-keyword),
-.code :global(.tok-modifier),
-.code :global(.tok-controlKeyword),
-.code :global(.tok-operatorKeyword) {
-  color: var(--syn-keyword);
-}
-.code :global(.tok-string),
-.code :global(.tok-string2) {
-  color: var(--syn-string);
-}
-.code :global(.tok-number),
-.code :global(.tok-bool),
-.code :global(.tok-atom) {
-  color: var(--syn-number);
-}
-.code :global(.tok-typeName),
-.code :global(.tok-className),
-.code :global(.tok-namespace) {
-  color: var(--syn-type);
-}
-.code :global(.tok-comment) {
-  color: var(--syn-comment);
-}
-.code :global(.tok-meta),
-.code :global(.tok-macroName) {
-  color: var(--syn-annotation);
-}
-.code :global(.tok-propertyName) {
-  color: var(--syn-property);
-}
-.code :global(.tok-variableName.tok-definition) {
-  color: var(--syn-function);
-}
 .repeat {
   color: var(--fg-faint);
 }

src/features/search/find/parts.module.css

@@ -1,40 +1,6 @@
 .text {
   white-space: pre;
 }
-/* Lezer classHighlighter tokens of result lines (same colours as Search Everywhere's text hits). */
-.code :global(.tok-keyword),
-.code :global(.tok-modifier),
-.code :global(.tok-controlKeyword),
-.code :global(.tok-operatorKeyword) {
-  color: var(--syn-keyword);
-}
-.code :global(.tok-string),
-.code :global(.tok-string2) {
-  color: var(--syn-string);
-}
-.code :global(.tok-number),
-.code :global(.tok-bool),
-.code :global(.tok-atom) {
-  color: var(--syn-number);
-}
-.code :global(.tok-typeName),
-.code :global(.tok-className),
-.code :global(.tok-namespace) {
-  color: var(--syn-type);
-}
-.code :global(.tok-comment) {
-  color: var(--syn-comment);
-}
-.code :global(.tok-meta),
-.code :global(.tok-macroName) {
-  color: var(--syn-annotation);
-}
-.code :global(.tok-propertyName) {
-  color: var(--syn-property);
-}
-.code :global(.tok-variableName.tok-definition) {
-  color: var(--syn-function);
-}
 .match {
   background: var(--accent-soft);
   color: var(--fg-strong);

src/features/search/recent/RecentPopups.module.css

@@ -233,38 +233,3 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-/* Lezer classHighlighter tokens (same colours as Search Everywhere's text hits). */
-.code :global(.tok-keyword),
-.code :global(.tok-modifier),
-.code :global(.tok-controlKeyword),
-.code :global(.tok-operatorKeyword) {
-  color: var(--syn-keyword);
-}
-.code :global(.tok-string),
-.code :global(.tok-string2) {
-  color: var(--syn-string);
-}
-.code :global(.tok-number),
-.code :global(.tok-bool),
-.code :global(.tok-atom) {
-  color: var(--syn-number);
-}
-.code :global(.tok-typeName),
-.code :global(.tok-className),
-.code :global(.tok-namespace) {
-  color: var(--syn-type);
-}
-.code :global(.tok-comment) {
-  color: var(--syn-comment);
-  font-style: italic;
-}
-.code :global(.tok-meta),
-.code :global(.tok-macroName) {
-  color: var(--syn-annotation);
-}
-.code :global(.tok-propertyName) {
-  color: var(--syn-property);
-}
-.code :global(.tok-variableName.tok-definition) {
-  color: var(--syn-function);
-}

src/features/todo/PreviewEditor.tsx

@@ -20,6 +20,7 @@ import { openideaTheme } from "@/editor/core/cm/theme";
 import { openideaHighlightStyle } from "@/editor/core/cm/highlight";
 import { findLanguageDescription, loadSupport } from "@/editor/core/cm/languages";
 import { attachDocument, embeddedEditorExtensions, type DocumentAttachment } from "@/editor/api";
+import { previewColors } from "@/editor/lineTokens";
 import { SourcePreview, T, type SourceHighlight } from "@/ui";
 import { todoHighlightExtension } from "./highlight";
 import styles from "./TodoView.module.css";
@@ -148,7 +149,10 @@ export function PreviewEditor({
     view.dispatch({ selection: { anchor: pos }, effects: EditorView.scrollIntoView(pos, { y: "center" }) });
   }, [line, col]);
 
-  if (!path || readOnly) return <SourcePreview path={path} line={line} highlights={highlights} load={fallbackLoad} />;
+  if (!path || readOnly)
+    return (
+      <SourcePreview path={path} line={line} highlights={highlights} load={fallbackLoad} colorize={previewColors} />
+    );
   if (error)
     return (
       <div className={styles.previewError}>

src/features/viewers/markdown/Markdown.module.css

@@ -143,46 +143,6 @@
   outline: 1px dashed var(--border-strong);
 }
 
-/* Lezer classHighlighter tokens in fenced code (same colours as documentation popups). */
-.preview :global(.tok-keyword),
-.preview :global(.tok-modifier),
-.preview :global(.tok-controlKeyword),
-.preview :global(.tok-operatorKeyword) {
-  color: var(--syn-keyword);
-}
-.preview :global(.tok-string),
-.preview :global(.tok-string2) {
-  color: var(--syn-string);
-}
-.preview :global(.tok-number),
-.preview :global(.tok-bool),
-.preview :global(.tok-atom) {
-  color: var(--syn-number);
-}
-.preview :global(.tok-typeName),
-.preview :global(.tok-className),
-.preview :global(.tok-namespace) {
-  color: var(--syn-type);
-}
-.preview :global(.tok-comment) {
-  color: var(--syn-comment);
-  font-style: italic;
-}
-.preview :global(.tok-meta),
-.preview :global(.tok-macroName) {
-  color: var(--syn-annotation);
-}
-.preview :global(.tok-propertyName) {
-  color: var(--syn-property);
-}
-.preview :global(.tok-variableName.tok-definition) {
-  color: var(--syn-function);
-}
-.preview :global(.tok-punctuation),
-.preview :global(.tok-operator) {
-  color: var(--syn-punct);
-}
-
 /* Mermaid diagrams: the source stays until the diagram is drawn, and next to an error. */
 .preview :global([data-mermaid]) {
   margin: 0 0 1em;