Fix Markdown Preview Updating on Zoom / Unrelated Config Changes (#24809)

Fixes #24808

**bug**
Markdown preview updates when you zoom. The root cause is that previews are updated whenever the config is changed.

**Fix**
Extract preview config to its own well defined object. Only update the preview when the keys we care about in the config change

extensions/markdown/src/extension.ts

@@ -176,12 +176,7 @@ export function activate(context: vscode.ExtensionContext) {
 	}));
 
 	context.subscriptions.push(vscode.workspace.onDidChangeConfiguration(() => {
-		vscode.workspace.textDocuments.forEach(document => {
-			if (document.uri.scheme === 'markdown') {
-				// update all generated md documents
-				contentProvider.update(document.uri);
-			}
-		});
+		contentProvider.updateConfiguration();
 	}));
 
 	context.subscriptions.push(vscode.window.onDidChangeTextEditorSelection(event => {

extensions/markdown/src/previewContentProvider.ts

@@ -35,9 +35,74 @@ export function getMarkdownUri(uri: vscode.Uri) {
 	return uri.with({ scheme: 'markdown', path: uri.fsPath + '.rendered', query: uri.toString() });
 }
 
+class MarkdownPreviewConfig {
+	public static getCurrentConfig() {
+		return new MarkdownPreviewConfig();
+	}
+
+	public readonly scrollBeyondLastLine: boolean;
+	public readonly wordWrap: boolean;
+	public readonly previewFrontMatter: string;
+	public readonly doubleClickToSwitchToEditor: boolean;
+	public readonly scrollEditorWithPreview: boolean;
+	public readonly scrollPreviewWithEditorSelection: boolean;
+	public readonly markEditorSelection: boolean;
+
+	public readonly lineHeight: number;
+	public readonly fontSize: number;
+	public readonly fontFamily: string | undefined;
+	public readonly styles: string[];
+
+	private constructor() {
+		const editorConfig = vscode.workspace.getConfiguration('editor');
+		const markdownConfig = vscode.workspace.getConfiguration('markdown');
+
+		this.scrollBeyondLastLine = editorConfig.get<boolean>('scrollBeyondLastLine', false);
+		this.wordWrap = editorConfig.get<boolean>('wordWrap', false);
+
+		this.previewFrontMatter = markdownConfig.get<string>('previewFrontMatter', 'hide');
+		this.scrollPreviewWithEditorSelection = !!markdownConfig.get<boolean>('preview.scrollPreviewWithEditorSelection', true);
+		this.scrollEditorWithPreview = !!markdownConfig.get<boolean>('preview.scrollEditorWithPreview', true);
+		this.doubleClickToSwitchToEditor = !!markdownConfig.get<boolean>('preview.doubleClickToSwitchToEditor', true);
+
+		this.fontFamily = markdownConfig.get<string | undefined>('preview.fontFamily', undefined);
+		this.fontSize = +markdownConfig.get<number>('preview.fontSize', NaN);
+		this.lineHeight = +markdownConfig.get<number>('preview.lineHeight', NaN);
+
+		this.styles = markdownConfig.get<string[]>('styles', []);
+	}
+
+	public isEqualTo(otherConfig: MarkdownPreviewConfig) {
+		for (let key in this) {
+			if (this.hasOwnProperty(key) && key !== 'styles') {
+				if (this[key] !== otherConfig[key]) {
+					return false;
+				}
+			}
+		}
+
+		// Check styles
+		if (this.styles.length !== otherConfig.styles.length) {
+			return false;
+		}
+		for (let i = 0; i < this.styles.length; ++i) {
+			if (this.styles[i] !== otherConfig.styles[i]) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	[key: string]: any;
+}
+
 export class MDDocumentContentProvider implements vscode.TextDocumentContentProvider {
 	private _onDidChange = new vscode.EventEmitter<vscode.Uri>();
 	private _waiting: boolean = false;
+
+	private config: MarkdownPreviewConfig;
+
 	private extraStyles: Array<vscode.Uri> = [];
 	private extraScripts: Array<vscode.Uri> = [];
 
@@ -45,7 +110,9 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 		private engine: MarkdownEngine,
 		private context: vscode.ExtensionContext,
 		private cspArbiter: ContentSecurityPolicyArbiter
-	) { }
+	) {
+		this.config = MarkdownPreviewConfig.getCurrentConfig();
+	}
 
 	public addScript(resource: vscode.Uri): void {
 		this.extraScripts.push(resource);
@@ -86,9 +153,8 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 	}
 
 	private computeCustomStyleSheetIncludes(uri: vscode.Uri): string {
-		const styles: string[] = vscode.workspace.getConfiguration('markdown')['styles'];
-		if (styles && Array.isArray(styles) && styles.length > 0) {
-			return styles.map((style) => {
+		if (this.config.styles && Array.isArray(this.config.styles)) {
+			return this.config.styles.map((style) => {
 				return `<link rel="stylesheet" href="${this.fixHref(uri, style)}" type="text/css" media="screen">`;
 			}).join('\n');
 		}
@@ -96,16 +162,11 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 	}
 
 	private getSettingsOverrideStyles(nonce: string): string {
-		const previewSettings = vscode.workspace.getConfiguration('markdown')['preview'];
-		if (!previewSettings) {
-			return '';
-		}
-		const { fontFamily, fontSize, lineHeight } = previewSettings;
 		return `<style nonce="${nonce}">
 			body {
-				${fontFamily ? `font-family: ${fontFamily};` : ''}
-				${+fontSize > 0 ? `font-size: ${fontSize}px;` : ''}
-				${+lineHeight > 0 ? `line-height: ${lineHeight};` : ''}
+				${this.config.fontFamily ? `font-family: ${this.config.fontFamily};` : ''}
+				${this.config.fontSize > 0 ? `font-size: ${this.config.fontSize}px;` : ''}
+				${this.config.lineHeight > 0 ? `line-height: ${this.config.lineHeight};` : ''}
 			}
 		</style>`;
 	}
@@ -131,11 +192,7 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 	public provideTextDocumentContent(uri: vscode.Uri): Thenable<string> {
 		const sourceUri = vscode.Uri.parse(uri.query);
 		return vscode.workspace.openTextDocument(sourceUri).then(document => {
-			const scrollBeyondLastLine = vscode.workspace.getConfiguration('editor').get('scrollBeyondLastLine', false);
-			const wordWrap = vscode.workspace.getConfiguration('editor').get('wordWrap', false);
-
-			const markdownConfig = vscode.workspace.getConfiguration('markdown');
-			const previewFrontMatter = markdownConfig.get('previewFrontMatter', 'hide');
+			this.config = MarkdownPreviewConfig.getCurrentConfig();
 
 			let initialLine = 0;
 			const editor = vscode.window.activeTextEditor;
@@ -147,9 +204,9 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 				previewUri: uri.toString(),
 				source: sourceUri.toString(),
 				line: initialLine,
-				scrollPreviewWithEditorSelection: !!markdownConfig.get('preview.scrollPreviewWithEditorSelection', true),
-				scrollEditorWithPreview: !!markdownConfig.get('preview.scrollEditorWithPreview', true),
-				doubleClickToSwitchToEditor: !!markdownConfig.get('preview.doubleClickToSwitchToEditor', true),
+				scrollPreviewWithEditorSelection: this.config.scrollPreviewWithEditorSelection,
+				scrollEditorWithPreview: this.config.scrollEditorWithPreview,
+				doubleClickToSwitchToEditor: this.config.doubleClickToSwitchToEditor
 			};
 
 			// Content Security Policy
@@ -159,7 +216,7 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 				csp = '';
 			}
 
-			const body = this.engine.render(sourceUri, previewFrontMatter === 'hide', document.getText());
+			const body = this.engine.render(sourceUri, this.config.previewFrontMatter === 'hide', document.getText());
 			return `<!DOCTYPE html>
 				<html>
 				<head>
@@ -170,7 +227,7 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 					${this.getStyles(uri, nonce)}
 					<base href="${document.uri.toString(true)}">
 				</head>
-				<body class="vscode-body ${scrollBeyondLastLine ? 'scrollBeyondLastLine' : ''} ${wordWrap ? 'wordWrap' : ''} ${!!markdownConfig.get('preview.markEditorSelection') ? 'showEditorSelection' : ''}">
+				<body class="vscode-body ${this.config.scrollBeyondLastLine ? 'scrollBeyondLastLine' : ''} ${this.config.wordWrap ? 'wordWrap' : ''} ${this.config.markEditorSelection ? 'showEditorSelection' : ''}">
 					${body}
 					<div class="code-line" data-line="${document.lineCount}"></div>
 					${this.getScripts(nonce)}
@@ -179,6 +236,19 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 		});
 	}
 
+	public updateConfiguration() {
+		const newConfig = MarkdownPreviewConfig.getCurrentConfig();
+		if (!this.config.isEqualTo(newConfig)) {
+			this.config = newConfig;
+			// update all generated md documents
+			vscode.workspace.textDocuments.forEach(document => {
+				if (document.uri.scheme === 'markdown') {
+					this.update(document.uri);
+				}
+			});
+		}
+	}
+
 	get onDidChange(): vscode.Event<vscode.Uri> {
 		return this._onDidChange.event;
 	}