Markdown Static Preview Scrolling Fixes

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

@@ -12,7 +12,7 @@ import { MarkdownContributionProvider } from '../markdownExtensions';
 import { Disposable } from '../util/dispose';
 import { isMarkdownFile } from '../util/file';
 import { normalizeResource, WebviewResourceProvider } from '../util/resources';
-import { getVisibleLine, TopmostLineMonitor } from '../util/topmostLineMonitor';
+import { getVisibleLine, scrollEditorToLine, LastScrollLocation, TopmostLineMonitor } from '../util/topmostLineMonitor';
 import { MarkdownPreviewConfigurationManager } from './previewConfig';
 import { MarkdownContentProvider, MarkdownContentProviderOutput } from './previewContentProvider';
 import { MarkdownEngine } from '../markdownEngine';
@@ -120,6 +120,8 @@ class MarkdownPreview extends Disposable implements WebviewResourceProvider {
 	private imageInfo: { readonly id: string, readonly width: number, readonly height: number; }[] = [];
 
 	private readonly _fileWatchersBySrc = new Map</* src: */ string, vscode.FileSystemWatcher>();
+	private readonly _onScrollEmitter = this._register(new vscode.EventEmitter<LastScrollLocation>());
+	public readonly onScroll = this._onScrollEmitter.event;
 
 	constructor(
 		webview: vscode.WebviewPanel,
@@ -324,7 +326,7 @@ class MarkdownPreview extends Disposable implements WebviewResourceProvider {
 
 	private onDidScrollPreview(line: number) {
 		this.line = line;
-
+		this._onScrollEmitter.fire({ line: this.line, uri: this._resource });
 		const config = this._previewConfigurations.loadAndCacheConfiguration(this._resource);
 		if (!config.scrollEditorWithPreview) {
 			return;
@@ -336,13 +338,7 @@ class MarkdownPreview extends Disposable implements WebviewResourceProvider {
 			}
 
 			this.isScrolling = true;
-			const sourceLine = Math.floor(line);
-			const fraction = line - sourceLine;
-			const text = editor.document.lineAt(sourceLine).text;
-			const start = Math.floor(fraction * text.length);
-			editor.revealRange(
-				new vscode.Range(sourceLine, start, sourceLine + 1, 0),
-				vscode.TextEditorRevealType.AtTop);
+			scrollEditorToLine(line, editor);
 		}
 	}
 
@@ -497,11 +493,13 @@ export class StaticMarkdownPreview extends Disposable implements ManagedMarkdown
 		webview: vscode.WebviewPanel,
 		contentProvider: MarkdownContentProvider,
 		previewConfigurations: MarkdownPreviewConfigurationManager,
+		topmostLineMonitor: TopmostLineMonitor,
 		logger: Logger,
 		contributionProvider: MarkdownContributionProvider,
 		engine: MarkdownEngine,
+		scrollLine?: number,
 	): StaticMarkdownPreview {
-		return new StaticMarkdownPreview(webview, resource, contentProvider, previewConfigurations, logger, contributionProvider, engine);
+		return new StaticMarkdownPreview(webview, resource, contentProvider, previewConfigurations, topmostLineMonitor, logger, contributionProvider, engine, scrollLine);
 	}
 
 	private readonly preview: MarkdownPreview;
@@ -511,13 +509,15 @@ export class StaticMarkdownPreview extends Disposable implements ManagedMarkdown
 		resource: vscode.Uri,
 		contentProvider: MarkdownContentProvider,
 		private readonly _previewConfigurations: MarkdownPreviewConfigurationManager,
+		topmostLineMonitor: TopmostLineMonitor,
 		logger: Logger,
 		contributionProvider: MarkdownContributionProvider,
 		engine: MarkdownEngine,
+		scrollLine?: number,
 	) {
 		super();
-
-		this.preview = this._register(new MarkdownPreview(this._webviewPanel, resource, undefined, {
+		const topScrollLocation = scrollLine ? new StartingScrollLine(scrollLine) : undefined;
+		this.preview = this._register(new MarkdownPreview(this._webviewPanel, resource, topScrollLocation, {
 			getAdditionalState: () => { return {}; },
 			openPreviewLinkToMarkdownFile: () => { /* todo */ }
 		}, engine, contentProvider, _previewConfigurations, logger, contributionProvider));
@@ -529,6 +529,18 @@ export class StaticMarkdownPreview extends Disposable implements ManagedMarkdown
 		this._register(this._webviewPanel.onDidChangeViewState(e => {
 			this._onDidChangeViewState.fire(e);
 		}));
+		this._register(this.preview.onScroll((scrollInfo) => {
+			this._onScrollEmitter.fire(scrollInfo);
+		}));
+
+		this._register(topmostLineMonitor.onDidChanged(event => {
+			if (this.preview.isPreviewOf(event.resource)) {
+				this.preview.scrollTo(event.line);
+			}
+		}));
+
+		const currentLine = this.preview.state.line ? this.preview.state.line : 0;
+		this._onScrollEmitter.fire({ line: currentLine, uri: this.preview.resource });
 	}
 
 	private readonly _onDispose = this._register(new vscode.EventEmitter<void>());
@@ -537,6 +549,9 @@ export class StaticMarkdownPreview extends Disposable implements ManagedMarkdown
 	private readonly _onDidChangeViewState = this._register(new vscode.EventEmitter<vscode.WebviewPanelOnDidChangeViewStateEvent>());
 	public readonly onDidChangeViewState = this._onDidChangeViewState.event;
 
+	private readonly _onScrollEmitter = this._register(new vscode.EventEmitter<LastScrollLocation>());
+	public readonly onScroll = this._onScrollEmitter.event;
+
 	override dispose() {
 		this._onDispose.fire();
 		super.dispose();

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

@@ -160,14 +160,18 @@ export class MarkdownPreviewManager extends Disposable implements vscode.Webview
 		document: vscode.TextDocument,
 		webview: vscode.WebviewPanel
 	): Promise<void> {
+		const lineNumber = this._topmostLineMonitor.previousMDTextEditor?.document.uri.toString() === document.uri.toString() ? this._topmostLineMonitor.previousMDTextEditor?.visibleRanges[0].start.line : undefined;
 		const preview = StaticMarkdownPreview.revive(
 			document.uri,
 			webview,
 			this._contentProvider,
 			this._previewConfigurations,
+			this._topmostLineMonitor,
 			this._logger,
 			this._contributions,
-			this._engine);
+			this._engine,
+			lineNumber
+		);
 		this.registerStaticPreview(preview);
 	}
 
@@ -220,6 +224,11 @@ export class MarkdownPreviewManager extends Disposable implements vscode.Webview
 			this._staticPreviews.delete(preview);
 		});
 
+		// Continuously update the scroll info in case user changes the editor.
+		preview.onScroll((scrollInfo) => {
+			this._topmostLineMonitor.previousStaticEditorInfo = scrollInfo;
+		});
+
 		this.trackActive(preview);
 		return preview;
 	}

extensions/markdown-language-features/src/util/topmostLineMonitor.ts

@@ -7,13 +7,21 @@ import * as vscode from 'vscode';
 import { Disposable } from '../util/dispose';
 import { isMarkdownFile } from './file';
 
+export interface LastScrollLocation {
+	readonly line: number;
+	readonly uri: vscode.Uri | undefined;
+}
+
 export class TopmostLineMonitor extends Disposable {
 
 	private readonly pendingUpdates = new Map<string, number>();
 	private readonly throttle = 50;
+	public previousMDTextEditor: vscode.TextEditor | undefined;
+	public previousStaticEditorInfo: LastScrollLocation = { line: 0, uri: undefined };
 
 	constructor() {
 		super();
+		this.previousMDTextEditor = vscode.window.activeTextEditor;
 		this._register(vscode.window.onDidChangeTextEditorVisibleRanges(event => {
 			if (isMarkdownFile(event.textEditor.document)) {
 				const line = getVisibleLine(event.textEditor);
@@ -22,6 +30,21 @@ export class TopmostLineMonitor extends Disposable {
 				}
 			}
 		}));
+
+		this._register(vscode.window.onDidChangeActiveTextEditor(textEditor => {
+
+			// When at a markdown file, apply existing scroll settings from static preview if applicable.
+			// Also save reference to text editor for line number reference later
+			if (textEditor && isMarkdownFile(textEditor.document!)) {
+
+				if (this.previousStaticEditorInfo.uri?.toString() === textEditor.document.uri.toString()) {
+					const line = this.previousStaticEditorInfo.line ? this.previousStaticEditorInfo.line : 0;
+					scrollEditorToLine(line, textEditor);
+				}
+
+				this.previousMDTextEditor = textEditor;
+			}
+		}));
 	}
 
 	private readonly _onChanged = this._register(new vscode.EventEmitter<{ readonly resource: vscode.Uri, readonly line: number }>());
@@ -68,3 +91,18 @@ export function getVisibleLine(
 	const progress = firstVisiblePosition.character / (line.text.length + 2);
 	return lineNumber + progress;
 }
+/**
+ * Change the top-most visible line of `editor` to be at `line`
+ */
+export function scrollEditorToLine(
+	line: number,
+	editor: vscode.TextEditor
+) {
+	const sourceLine = Math.floor(line);
+	const fraction = line - sourceLine;
+	const text = editor.document.lineAt(sourceLine).text;
+	const start = Math.floor(fraction * text.length);
+	editor.revealRange(
+		new vscode.Range(sourceLine, start, sourceLine + 1, 0),
+		vscode.TextEditorRevealType.AtTop);
+}