Clean up markdown preview messaging (#176458)

- Add properties directly to message
- Add `ImageInfo` type
- Don't use state to pass around imageInfo
This commit is contained in:
Matt Bierner
2023-03-07 17:28:13 -08:00
committed by GitHub
parent 2fffa58906
commit 3ca5284e44
5 changed files with 33 additions and 35 deletions

View File

@@ -33,6 +33,11 @@ export interface MarkdownContentProviderOutput {
containingImages: Set<string>;
}
export interface ImageInfo {
readonly id: string;
readonly width: number;
readonly height: number;
}
export class MdDocumentRenderer {
constructor(
@@ -57,6 +62,7 @@ export class MdDocumentRenderer {
initialLine: number | undefined,
selectedLine: number | undefined,
state: any | undefined,
imageInfo: readonly ImageInfo[],
token: vscode.CancellationToken
): Promise<MarkdownContentProviderOutput> {
const sourceUri = markdownDocument.uri;
@@ -94,7 +100,7 @@ export class MdDocumentRenderer {
data-strings="${escapeAttribute(JSON.stringify(previewStrings))}"
data-state="${escapeAttribute(JSON.stringify(state || {}))}">
<script src="${this._extensionResourcePath(resourceProvider, 'pre.js')}" nonce="${nonce}"></script>
${this._getStyles(resourceProvider, sourceUri, config, state)}
${this._getStyles(resourceProvider, sourceUri, config, imageInfo)}
<base href="${resourceProvider.asWebviewUri(markdownDocument.uri)}">
</head>
<body class="vscode-body ${config.scrollBeyondLastLine ? 'scrollBeyondLastLine' : ''} ${config.wordWrap ? 'wordWrap' : ''} ${config.markEditorSelection ? 'showEditorSelection' : ''}">
@@ -180,22 +186,24 @@ export class MdDocumentRenderer {
].join(' ');
}
private _getImageStabilizerStyles(state?: any) {
private _getImageStabilizerStyles(imageInfo: readonly ImageInfo[]): string {
if (!imageInfo.length) {
return '';
}
let ret = '<style>\n';
if (state && state.imageInfo) {
state.imageInfo.forEach((imgInfo: any) => {
ret += `#${imgInfo.id}.loading {
for (const imgInfo of imageInfo) {
ret += `#${imgInfo.id}.loading {
height: ${imgInfo.height}px;
width: ${imgInfo.width}px;
}\n`;
});
}
ret += '</style>\n';
return ret;
}
private _getStyles(resourceProvider: WebviewResourceProvider, resource: vscode.Uri, config: MarkdownPreviewConfiguration, state?: any): string {
private _getStyles(resourceProvider: WebviewResourceProvider, resource: vscode.Uri, config: MarkdownPreviewConfiguration, imageInfo: readonly ImageInfo[]): string {
const baseStyles: string[] = [];
for (const resource of this._contributionProvider.contributions.previewStyles) {
baseStyles.push(`<link rel="stylesheet" type="text/css" href="${escapeAttribute(resourceProvider.asWebviewUri(resource))}">`);
@@ -203,7 +211,7 @@ export class MdDocumentRenderer {
return `${baseStyles.join('\n')}
${this._computeCustomStyleSheetIncludes(resourceProvider, resource, config)}
${this._getImageStabilizerStyles(state)}`;
${this._getImageStabilizerStyles(imageInfo)}`;
}
private _getScripts(resourceProvider: WebviewResourceProvider, nonce: string): string {