Fix: Prevent diff2html anchor links from resetting view
When clicking anchor links in the diff view, the page was resetting to conversation view.
Added event handling to intercept clicks on these links to prevent default browser behavior
and instead perform smooth scrolling to the target element without changing the URL.
Co-Authored-By: sketch
diff --git a/webui/src/web-components/sketch-diff-view.ts b/webui/src/web-components/sketch-diff-view.ts
index 47c14f3..ee7a12d 100644
--- a/webui/src/web-components/sketch-diff-view.ts
+++ b/webui/src/web-components/sketch-diff-view.ts
@@ -275,6 +275,9 @@
}
});
+ // Intercept clicks on anchor links within the diff to prevent browser navigation
+ this.interceptAnchorClicks(diff2htmlContent);
+
// Add click event handlers to each code line for commenting
this.setupDiffLineComments();
} catch (error) {
@@ -573,6 +576,34 @@
this.loadDiffContent();
}
+ /**
+ * Intercept clicks on anchor links within the diff to prevent default browser navigation
+ * and instead scroll to the target element without changing URL
+ *
+ * @param container The container element containing diff content
+ */
+ private interceptAnchorClicks(container: HTMLElement): void {
+ const anchors = container.querySelectorAll('a[href^="#"]');
+
+ anchors.forEach((anchor) => {
+ anchor.addEventListener("click", (event) => {
+ event.preventDefault();
+
+ // Extract the target ID from the href
+ const href = (anchor as HTMLAnchorElement).getAttribute("href");
+ if (!href || !href.startsWith("#")) return;
+
+ const targetId = href.substring(1);
+ const targetElement = container.querySelector(`[id="${targetId}"]`);
+
+ if (targetElement) {
+ // Scroll the target element into view
+ targetElement.scrollIntoView({ behavior: "smooth" });
+ }
+ });
+ });
+ }
+
render() {
return html`
<div class="diff-view">