diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts index 25199afd549..0cd1a693f0c 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts @@ -1145,8 +1145,7 @@ async function webviewPreloads(ctx: PreloadContext) { } case 'tokenizedCodeBlock': { const { codeBlockId, html } = event.data; - MarkupCell.highlightCodeBlock(codeBlockId, html); - OutputElement.highlightCodeBlock(codeBlockId, html); + MarkdownCodeBlock.highlightCodeBlock(codeBlockId, html); break; } case 'tokenizedStylesChanged': { @@ -1563,12 +1562,11 @@ async function webviewPreloads(ctx: PreloadContext) { } }(); - class MarkupCell { - + class MarkdownCodeBlock { private static pendingCodeBlocksToHighlight = new Map(); public static highlightCodeBlock(id: string, html: string) { - const el = MarkupCell.pendingCodeBlocksToHighlight.get(id); + const el = MarkdownCodeBlock.pendingCodeBlocksToHighlight.get(id); if (!el) { return; } @@ -1579,6 +1577,24 @@ async function webviewPreloads(ctx: PreloadContext) { } } + public static requestHighlightCodeBlock(root: HTMLElement | ShadowRoot) { + const codeBlocks: Array<{ value: string; lang: string; id: string }> = []; + let i = 0; + for (const el of root.querySelectorAll('.vscode-code-block')) { + const lang = el.getAttribute('data-vscode-code-block-lang'); + if (el.textContent && lang) { + const id = `${Date.now()}-${i++}`; + codeBlocks.push({ value: el.textContent, lang: lang, id }); + MarkdownCodeBlock.pendingCodeBlocksToHighlight.set(id, el as HTMLElement); + } + } + + return codeBlocks; + } + } + + class MarkupCell { + public readonly ready: Promise; public readonly id: string; @@ -1713,16 +1729,7 @@ async function webviewPreloads(ctx: PreloadContext) { } } - const codeBlocks: Array<{ value: string; lang: string; id: string }> = []; - let i = 0; - for (const el of root.querySelectorAll('.vscode-code-block')) { - const lang = el.getAttribute('data-vscode-code-block-lang'); - if (el.textContent && lang) { - const id = `${Date.now()}-${i++}`; - codeBlocks.push({ value: el.textContent, lang: lang, id }); - MarkupCell.pendingCodeBlocksToHighlight.set(id, el as HTMLElement); - } - } + const codeBlocks: Array<{ value: string; lang: string; id: string }> = MarkdownCodeBlock.requestHighlightCodeBlock(root); postNotebookMessage('renderedMarkup', { cellId: this.id, @@ -1926,20 +1933,6 @@ async function webviewPreloads(ctx: PreloadContext) { } class OutputElement { - private static pendingCodeBlocksToHighlight = new Map(); - - public static highlightCodeBlock(id: string, html: string) { - const el = OutputElement.pendingCodeBlocksToHighlight.get(id); - if (!el) { - return; - } - const trustedHtml = ttPolicy?.createHTML(html) ?? html; - el.innerHTML = trustedHtml as string; - if (tokenizationStyleElement) { - el.insertAdjacentElement('beforebegin', tokenizationStyleElement.cloneNode(true) as HTMLElement); - } - } - public readonly element: HTMLElement; private _content?: { content: webviewMessages.ICreationContent; preloadsAndErrors: unknown[] }; @@ -2002,17 +1995,8 @@ async function webviewPreloads(ctx: PreloadContext) { }); } - const codeBlocks: Array<{ value: string; lang: string; id: string }> = []; - let i = 0; const root = this.element.shadowRoot ?? this.element; - for (const el of root.querySelectorAll('.vscode-code-block')) { - const lang = el.getAttribute('data-vscode-code-block-lang'); - if (el.textContent && lang) { - const id = `${Date.now()}-${i++}`; - codeBlocks.push({ value: el.textContent, lang: lang, id }); - OutputElement.pendingCodeBlocksToHighlight.set(id, el as HTMLElement); - } - } + const codeBlocks: Array<{ value: string; lang: string; id: string }> = MarkdownCodeBlock.requestHighlightCodeBlock(root); if (codeBlocks.length > 0) { postNotebookMessage('renderedCellOutput', {