development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-28 05:19:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

cell renderer tweak wrt to tt policy

Browse source
This commit is contained in:
Johannes Rieken 2020-10-08 11:33:29 +02:00
parent feca52798c
commit f5ccc129cc
2 changed files with 16 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/vs/base/browser/dom.ts
View file

@ -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) {

29
src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
View file

@ -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;
}