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;
+	});
+}

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

@@ -89,6 +89,7 @@ export class MarkdownPreview extends Disposable {
 	private isScrolling = false;
 	private _disposed: boolean = false;
 	private imageInfo: { id: string, width: number, height: number }[] = [];
+	private scrollToFragment: string | undefined;
 
 	public static async revive(
 		webview: vscode.WebviewPanel,
@@ -264,7 +265,8 @@ export class MarkdownPreview extends Disposable {
 			locked: this._locked,
 			line: this.line,
 			resourceColumn: this.resourceColumn,
-			imageInfo: this.imageInfo
+			imageInfo: this.imageInfo,
+			fragment: this.scrollToFragment
 		};
 	}
 
@@ -284,8 +286,12 @@ export class MarkdownPreview extends Disposable {
 
 	public update(resource: vscode.Uri) {
 		const editor = vscode.window.activeTextEditor;
+		// Reposition scroll preview, position scroll to the top if active text editor
+		// doesn't corresponds with preview
 		if (editor && editor.document.uri.fsPath === resource.fsPath) {
 			this.line = getVisibleLine(editor);
+		} else {
+			this.line = 0;
 		}
 
 		// If we have changed resources, cancel any pending updates
@@ -520,11 +526,15 @@ export class MarkdownPreview extends Disposable {
 	}
 
 	private async onDidClickPreviewLink(path: string, fragment: string | undefined) {
+		this.scrollToFragment = undefined;
 		const config = vscode.workspace.getConfiguration('markdown', this.resource);
 		const openLinks = config.get<string>('preview.openMarkdownLinks', 'inPreview');
 		if (openLinks === 'inPreview') {
 			const markdownLink = await resolveLinkToMarkdownFile(path);
 			if (markdownLink) {
+				if (fragment) {
+					this.scrollToFragment = fragment;
+				}
 				this.update(markdownLink);
 				return;
 			}