Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-21 17:19:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve markdown preview scroll sync (#58852)

Browse Source 
* improve markdown preview scroll sync
This commit is contained in:
SteVen Batten
2018-09-18 15:08:37 -07:00
committed by GitHub
parent 0f4893299a
commit f8f4d3af30
7 changed files with 112 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
extensions/markdown-language-features/src/features/preview.ts
View File

@@ -33,6 +33,7 @@ export class MarkdownPreview {
private forceUpdate = false;
private isScrolling = false;
private _disposed: boolean = false;
private imageInfo: { id: string, width: number, height: number }[] = [];
public static async revive(
webview: vscode.WebviewPanel,
@@ -123,6 +124,10 @@ export class MarkdownPreview {
}
switch (e.type) {
case 'cacheImageSizes':
this.onCacheImageSizes(e.body);
break;
case 'command':
vscode.commands.executeCommand(e.body.command, ...e.body.args);
break;
@@ -181,7 +186,8 @@ export class MarkdownPreview {
return {
resource: this.resource.toString(),
locked: this._locked,
line: this.line
line: this.line,
imageInfo: this.imageInfo
};
}
@@ -400,6 +406,10 @@ export class MarkdownPreview {
vscode.workspace.openTextDocument(this._resource).then(vscode.window.showTextDocument);
}
private async onCacheImageSizes(imageInfo: { id: string, width: number, height: number }[]) {
this.imageInfo = imageInfo;
}
}
export interface PreviewSettings {

22
extensions/markdown-language-features/src/features/previewContentProvider.ts
View File

@@ -79,7 +79,7 @@ export class MarkdownContentProvider {
data-strings="${JSON.stringify(previewStrings).replace(/"/g, '"')}"
data-state="${JSON.stringify(state || {}).replace(/"/g, '"')}">
<script src="${this.extensionResourcePath('pre.js')}" nonce="${nonce}"></script>
${this.getStyles(sourceUri, nonce, config)}
${this.getStyles(sourceUri, nonce, config, state)}
<base href="${markdownDocument.uri.with({ scheme: 'vscode-resource' }).toString(true)}">
</head>
<body class="vscode-body ${config.scrollBeyondLastLine ? 'scrollBeyondLastLine' : ''} ${config.wordWrap ? 'wordWrap' : ''} ${config.markEditorSelection ? 'showEditorSelection' : ''}">
@@ -147,14 +147,30 @@ export class MarkdownContentProvider {
</style>`;
}
private getStyles(resource: vscode.Uri, nonce: string, config: MarkdownPreviewConfiguration): string {
private getImageStabilizerStyles(state?: any) {
let ret = '<style>\n';
if (state && state.imageInfo) {
state.imageInfo.forEach((imgInfo: any) => {
ret += `#${imgInfo.id}.loading {
height: ${imgInfo.height}px;
width: ${imgInfo.width}px;
}\n`;
});
}
ret += '</style>\n';
return ret;
}
private getStyles(resource: vscode.Uri, nonce: string, config: MarkdownPreviewConfiguration, state?: any): string {
const baseStyles = this.contributions.previewStyles
.map(resource => `<link rel="stylesheet" type="text/css" href="${resource.toString()}">`)
.join('\n');
return `${baseStyles}
${this.getSettingsOverrideStyles(nonce, config)}
${this.computeCustomStyleSheetIncludes(resource, config)}`;
${this.computeCustomStyleSheetIncludes(resource, config)}
${this.getImageStabilizerStyles(state)}`;
}
private getScripts(nonce: string): string {