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
This commit is contained in:
parent
98467c3b7c
commit
34339f92c4
4 changed files with 60 additions and 13 deletions
File diff suppressed because one or more lines are too long
|
@ -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, '\\$&');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue