fix(todo): colour TODO comments in the TODO tool window's preview (#1143)

The preview is an editor view over the real document but doesn't get the editor contributions, so TODO comments showed in plain comment colour there. It now adds the same TODO colouring; the live item scan stays with the editor contribution.

src/features/todo/PreviewEditor.test.tsx

@@ -51,6 +51,18 @@ describe("PreviewEditor", () => {
     expect(document.querySelector(".cm-content")?.textContent).toContain("TODO: fix");
   });
 
+  it("colours TODO comments like the editor tabs", async () => {
+    const docs = new Map([["/p/c.js", { text: "// TODO: fix\nconst x = 1;\n" }]]);
+    stubAttacher(docs);
+    render(<PreviewEditor path="/p/c.js" line={0} col={3} fallbackLoad={previewText} />);
+    const todo = await waitFor(() => {
+      const el = document.querySelector(".cm-openidea-todo");
+      expect(el).toBeTruthy();
+      return el!;
+    });
+    expect(todo.textContent).toBe("TODO: fix");
+  });
+
   it("moves the caret to another item of the same file without a new view", async () => {
     const docs = new Map([["/p/two.ts", { text: "// TODO: one\nconst x = 1;\n// TODO: two\n" }]]);
     stubAttacher(docs);

src/features/todo/PreviewEditor.tsx

@@ -21,6 +21,7 @@ import { openideaHighlightStyle } from "@/editor/core/cm/highlight";
 import { findLanguageDescription, loadSupport } from "@/editor/core/cm/languages";
 import { attachDocument, embeddedEditorExtensions, type DocumentAttachment } from "@/editor/api";
 import { SourcePreview, T, type SourceHighlight } from "@/ui";
+import { todoHighlightExtension } from "./highlight";
 import styles from "./TodoView.module.css";
 
 /** Dirty attachments kept alive after their view unmounted (see header note). */
@@ -95,6 +96,7 @@ export function PreviewEditor({
               keymap.of([...historyKeymap, ...searchKeymap, ...defaultKeymap]),
               att.extension,
               embeddedEditorExtensions(path),
+              todoHighlightExtension(),
               language.of([]),
             ],
           }),

src/features/todo/highlight.ts

@@ -90,6 +90,16 @@ const theme = EditorView.baseTheme({
 });
 
 export function todoEditorExtension(ctx: EditorDocContext): Extension {
+  return todoPlugin(ctx);
+}
+
+/** The colouring alone, for views outside the editor tabs (the TODO tool window's preview). */
+export function todoHighlightExtension(): Extension {
+  return todoPlugin(null);
+}
+
+/** `ctx` given: also reports the document's live TODO items to the tool window. */
+function todoPlugin(ctx: EditorDocContext | null): Extension {
   const plugin = ViewPlugin.fromClass(
     class {
       decorations: DecorationSet;
@@ -112,7 +122,7 @@ export function todoEditorExtension(ctx: EditorDocContext): Extension {
         if (u.docChanged) this.scheduleLive(400);
       }
       scheduleLive(delay: number) {
-        if (!ctx.path || ctx.virtual) return;
+        if (!ctx?.path || ctx.virtual) return;
         if (this.timer) clearTimeout(this.timer);
         this.timer = setTimeout(() => {
           this.timer = null;