cell renderer tweak wrt to tt policy

jrieken · jrieken · commit f5ccc129ccc6 · 2020-10-08T11:34:31.000+02:00
diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts
@@ -22,13 +22,6 @@ export function clearNode(node: HTMLElement): void {
 	}
 }
 
-export function trustedInnerHTML(node: Element, value: TrustedHTML): void {
-	// this is a workaround for innerHTML not allowing for "asymetric" accessors
-	// see https://github.com/microsoft/vscode/issues/106396#issuecomment-692625393
-	// and https://github.com/microsoft/TypeScript/issues/30024
-	node.innerHTML = value as unknown as string;
-}
-
 export function isInDOM(node: Node | null): boolean {
 	while (node) {
 		if (node === document.body) {
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
@@ -553,11 +553,11 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
 
 class EditorTextRenderer {
 
-	private _ttPolicy = window.trustedTypes!.createPolicy('cellRendererEditorText', {
+	private _ttPolicy = window.trustedTypes?.createPolicy('cellRendererEditorText', {
 		createHTML(input) { return input; }
 	});
 
-	getRichText(editor: ICodeEditor, modelRange: Range): TrustedHTML | null {
+	getRichText(editor: ICodeEditor, modelRange: Range): HTMLElement | null {
 		const model = editor.getModel();
 		if (!model) {
 			return null;
@@ -567,22 +567,24 @@ class EditorTextRenderer {
 		const fontInfo = editor.getOptions().get(EditorOption.fontInfo);
 		const fontFamily = fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily ? fontInfo.fontFamily : `'${fontInfo.fontFamily}', ${EDITOR_FONT_DEFAULTS.fontFamily}`;
 
-		const value = `<div style="`
+
+		const style = ``
 			+ `color: ${colorMap[modes.ColorId.DefaultForeground]};`
 			+ `background-color: ${colorMap[modes.ColorId.DefaultBackground]};`
 			+ `font-family: ${fontFamily};`
 			+ `font-weight: ${fontInfo.fontWeight};`
 			+ `font-size: ${fontInfo.fontSize}px;`
 			+ `line-height: ${fontInfo.lineHeight}px;`
-			+ `white-space: pre;`
-			+ `">`
-			+ this.getRichTextLines(model, modelRange, colorMap)
-			+ '</div>';
+			+ `white-space: pre;`;
+
+		const element = DOM.$('div', { style });
 
-		return this._ttPolicy.createHTML(value);
+		const linesHtml = this.getRichTextLinesAsHtml(model, modelRange, colorMap);
+		element.innerHTML = linesHtml as unknown as string;
+		return element;
 	}
 
-	private getRichTextLines(model: ITextModel, modelRange: Range, colorMap: string[]): string {
+	private getRichTextLinesAsHtml(model: ITextModel, modelRange: Range, colorMap: string[]): string | TrustedHTML {
 		const startLineNumber = modelRange.startLineNumber;
 		const startColumn = modelRange.startColumn;
 		const endLineNumber = modelRange.endLineNumber;
@@ -605,7 +607,9 @@ class EditorTextRenderer {
 			}
 		}
 
-		return result;
+		return this._ttPolicy
+			? this._ttPolicy.createHTML(result)
+			: result;
 	}
 
 	private getDefaultColorMap(): string[] {
@@ -637,7 +641,7 @@ class CodeCellDragImageRenderer {
 		dragImageContainer.classList.forEach(c => dragImageContainer.classList.remove(c));
 		dragImageContainer.classList.add('cell-drag-image', 'monaco-list-row', 'focused', `${type}-cell-row`);
 
-		const editorContainer = dragImageContainer.querySelector('.cell-editor-container');
+		const editorContainer: HTMLElement | null = dragImageContainer.querySelector('.cell-editor-container');
 		if (!editorContainer) {
 			return null;
 		}
@@ -646,8 +650,7 @@ class CodeCellDragImageRenderer {
 		if (!richEditorText) {
 			return null;
 		}
-
-		DOM.trustedInnerHTML(editorContainer, richEditorText);
+		DOM.reset(editorContainer, richEditorText);
 
 		return dragImageContainer;
 	}

Original file line number	Diff line number	Diff line change
`@@ -22,13 +22,6 @@ export function clearNode(node: HTMLElement): void {`
`22`	`22`	`}`
`23`	`23`	`}`
`24`	`24`
`25`		`-export function trustedInnerHTML(node: Element, value: TrustedHTML): void {`
`26`		`- // this is a workaround for innerHTML not allowing for "asymetric" accessors`
`27`		`- // see https://github.com/microsoft/vscode/issues/106396#issuecomment-692625393`
`28`		`- // and https://github.com/microsoft/TypeScript/issues/30024`
`29`		`- node.innerHTML = value as unknown as string;`
`30`		`-}`
`31`		`-`
`32`	`25`	`export function isInDOM(node: Node \| null): boolean {`
`33`	`26`	`while (node) {`
`34`	`27`	`if (node === document.body) {`