From 21b995f4b7bfbef1a29b60a44c09d8d50c0e2a28 Mon Sep 17 00:00:00 2001
From: kirjs <kirts@google.com>
Date: Wed, 19 Nov 2025 13:59:59 -0500
Subject: [PATCH] feat(docs-infra): allow navigating to editor error locations

This shows up in a little pop-up, and is clickable now, and leads to exact line
---
 .../code-editor/code-editor.component.html    | 11 +++++++++-
 .../code-editor/code-editor.component.ts      | 19 ++++++++++++++++
 .../code-editor/code-mirror-editor.service.ts | 22 +++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/adev/src/app/editor/code-editor/code-editor.component.html b/adev/src/app/editor/code-editor/code-editor.component.html
index 57beae713fb..46168c72368 100644
--- a/adev/src/app/editor/code-editor/code-editor.component.html
+++ b/adev/src/app/editor/code-editor/code-editor.component.html
@@ -128,7 +128,16 @@
     </button>
     <ul>
       @for (error of errors(); track error) {
-        <li>(line: {{ error.lineNumber }}:{{ error.characterPosition }}) {{ error.message }}</li>
+        <li>
+          <a
+            class="adev-error-location-link"
+            href="#"
+            (click)="$event.preventDefault(); openFileAtLocation(error)"
+          >
+            (line: {{ error.lineNumber }}:{{ error.characterPosition }})
+          </a>
+          {{ error.message }}
+        </li>
       }
     </ul>
   </div>
diff --git a/adev/src/app/editor/code-editor/code-editor.component.ts b/adev/src/app/editor/code-editor/code-editor.component.ts
index a67f9774e2a..133c9580417 100644
--- a/adev/src/app/editor/code-editor/code-editor.component.ts
+++ b/adev/src/app/editor/code-editor/code-editor.component.ts
@@ -150,6 +150,25 @@ export class CodeEditor {
     this.displayErrorsBox.set(false);
   }
 
+  protected openFileAtLocation(error: DiagnosticWithLocation): void {
+    // Scroll the editor to the error location
+    // The error is always in the current file since diagnostics are file-specific
+    const lineNumber = error.lineNumber;
+    const characterPosition = error.characterPosition;
+
+    // Calculate the position in the document
+    // CodeMirror uses 0-based line numbers, but our error uses 1-based
+    const line = Math.max(0, lineNumber - 1);
+
+    // Request the editor to scroll to this line
+    // We'll need to add a method to CodeMirrorEditor service to handle this
+    this.codeMirrorEditor.scrollToLine(line, characterPosition);
+  }
+
+  protected closeRenameFile(): void {
+    this.isRenamingFile.set(false);
+  }
+
   protected canRenameFile = (filename: string) => this.canDeleteFile(filename);
 
   protected canDeleteFile(filename: string) {
diff --git a/adev/src/app/editor/code-editor/code-mirror-editor.service.ts b/adev/src/app/editor/code-editor/code-mirror-editor.service.ts
index 9b4edb66323..4931f461608 100644
--- a/adev/src/app/editor/code-editor/code-mirror-editor.service.ts
+++ b/adev/src/app/editor/code-editor/code-mirror-editor.service.ts
@@ -183,6 +183,28 @@ export class CodeMirrorEditor {
     this._editorView.setState(editorState);
   }
 
+  scrollToLine(line: number, character: number = 0): void {
+    if (!this._editorView) return;
+
+    const state = this._editorView.state;
+    const doc = state.doc;
+
+    if (line < 0 || line >= doc.lines) {
+      console.warn(`Line ${line} is out of bounds (0-${doc.lines - 1})`);
+      return;
+    }
+
+    const lineObj = doc.line(line + 1);
+    const pos = lineObj.from + Math.min(character, lineObj.length);
+
+    this._editorView.dispatch({
+      selection: {anchor: pos, head: pos},
+      scrollIntoView: true,
+    });
+
+    this._editorView.focus();
+  }
+
   private initTypescriptVfsWorker(): void {
     if (this.tsVfsWorker || !this.tsVfsWorkerFactory) {
       return;