From f5ccc129ccc6e07e576da1f6ba34a07b9e488c8f Mon Sep 17 00:00:00 2001
From: Johannes Rieken <johannes.rieken@gmail.com>
Date: Thu, 8 Oct 2020 11:33:29 +0200
Subject: [PATCH] cell renderer tweak wrt to tt policy

---
 src/vs/base/browser/dom.ts                    |  7 -----
 .../browser/view/renderers/cellRenderer.ts    | 29 ++++++++++---------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts
index 50bef5f7feb..07ffc464e3f 100644
--- 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
index b48bf5a7568..d11ec996443 100644
--- 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;`;
 
-		return this._ttPolicy.createHTML(value);
+		const element = DOM.$('div', { style });
+
+		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;
 	}