Fix: Markdown Preview scroll remains same after clicking on some other link #78465

Improves the behavior on how markdown preview behaves when clicking a link

extensions/markdown-language-features/preview-src/index.ts

@@ -6,7 +6,7 @@
 import { ActiveLineMarker } from './activeLineMarker';
 import { onceDocumentLoaded } from './events';
 import { createPosterForVsCode } from './messaging';
-import { getEditorLineNumberForPageOffset, scrollToRevealSourceLine } from './scroll-sync';
+import { getEditorLineNumberForPageOffset, scrollToRevealSourceLine, getLineElementForFragment } from './scroll-sync';
 import { getSettings, getData } from './settings';
 import throttle = require('lodash.throttle');
 
@@ -19,7 +19,7 @@ const settings = getSettings();
 const vscode = acquireVsCodeApi();
 
 // Set VS Code state
-let state = getData<{ line: number }>('data-state');
+let state = getData<{ line: number, fragment: string }>('data-state');
 vscode.setState(state);
 
 const messaging = createPosterForVsCode(vscode);
@@ -34,10 +34,19 @@ window.onload = () => {
 onceDocumentLoaded(() => {
 	if (settings.scrollPreviewWithEditor) {
 		setTimeout(() => {
-			const initialLine = +settings.line;
-			if (!isNaN(initialLine)) {
-				scrollDisabled = true;
-				scrollToRevealSourceLine(initialLine);
+			// Try to scroll to fragment if available
+			if (state.fragment) {
+				const element = getLineElementForFragment(state.fragment);
+				if (element) {
+					scrollDisabled = true;
+					scrollToRevealSourceLine(element.line);
+				}
+			} else {
+				const initialLine = +settings.line;
+				if (!isNaN(initialLine)) {
+					scrollDisabled = true;
+					scrollToRevealSourceLine(initialLine);
+				}
 			}
 		}, 0);
 	}
@@ -161,4 +170,4 @@ if (settings.scrollEditorWithPreview) {
 
 function escapeRegExp(text: string) {
 	return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-}
+}

extensions/markdown-language-features/preview-src/scroll-sync.ts

@@ -134,3 +134,12 @@ export function getEditorLineNumberForPageOffset(offset: number) {
 	}
 	return null;
 }
+
+/**
+ * Try to find the html element by using a fragment id
+ */
+export function getLineElementForFragment(fragment: string): CodeLineElement | undefined {
+	return getCodeLineElements().find((element) => {
+		return element.element.id === fragment;
+	});
+}