Unify code highlight

This commit is contained in:
rebornix 2022-02-16 18:03:10 -08:00
parent 07e840cb51
commit d5bb8cfca9
No known key found for this signature in database
GPG key ID: 181FC90D15393C20

View file

@ -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<string, HTMLElement>();
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<void>;
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<webviewMessages.IRenderedMarkupMessage>('renderedMarkup', {
cellId: this.id,
@ -1926,20 +1933,6 @@ async function webviewPreloads(ctx: PreloadContext) {
}
class OutputElement {
private static pendingCodeBlocksToHighlight = new Map<string, HTMLElement>();
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<webviewMessages.IRenderedCellOutputMessage>('renderedCellOutput', {