styling update and link handling for show more outputs

This commit is contained in:
rebornix
2022-02-08 14:52:11 -08:00
parent 86a9cf439d
commit a785b7bae8
6 changed files with 76 additions and 23 deletions

View File

@@ -11,6 +11,8 @@ interface IDisposable {
dispose(): void;
}
function renderImage(outputInfo: OutputItem, element: HTMLElement): IDisposable {
const blob = new Blob([outputInfo.data()], { type: outputInfo.mime });
const src = URL.createObjectURL(blob);
@@ -125,7 +127,7 @@ function renderStream(outputInfo: OutputItem, container: HTMLElement, error: boo
const text = outputInfo.text();
const element = document.createElement('span');
truncatedArrayOfString([text], 30, element);
truncatedArrayOfString(outputInfo.id, [text], 30, element);
outputElement.appendChild(element);
return;
}
@@ -135,7 +137,7 @@ function renderStream(outputInfo: OutputItem, container: HTMLElement, error: boo
element.classList.add('output-stream');
const text = outputInfo.text();
truncatedArrayOfString([text], ctx.settings.lineLimit, element);
truncatedArrayOfString(outputInfo.id, [text], ctx.settings.lineLimit, element);
container.appendChild(element);
container.setAttribute('output-mime-type', outputInfo.mime);
if (error) {
@@ -147,7 +149,7 @@ function renderText(outputInfo: OutputItem, container: HTMLElement, ctx: Rendere
const contentNode = document.createElement('div');
contentNode.classList.add('.output-plaintext');
const text = outputInfo.text();
truncatedArrayOfString([text], ctx.settings.lineLimit, contentNode);
truncatedArrayOfString(outputInfo.id, [text], ctx.settings.lineLimit, contentNode);
container.appendChild(contentNode);
}
@@ -156,6 +158,22 @@ export const activate: ActivationFunction<void> = (ctx) => {
const disposables = new Map<string, IDisposable>();
const latestContext = ctx as (RendererContext<void> & { readonly settings: { readonly lineLimit: number } });
const style = document.createElement('style');
style.textContent = `
.output-stream {
line-height: 22px;
font-family: var(--notebook-cell-output-font-family);
white-space: pre-wrap;
word-wrap: break-word;
font-size: var(--notebook-cell-output-font-size);
user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
cursor: auto;
}
`;
document.body.appendChild(style);
return {
renderOutputItem: (outputInfo, element) => {
switch (outputInfo.mime) {

View File

@@ -5,13 +5,26 @@
import { handleANSIOutput } from './ansi';
// const SIZE_LIMIT = 65535;
export function truncatedArrayOfString(outputs: string[], linesLimit: number, container: HTMLElement) {
// const fullLen = outputs.reduce((p, c) => {
// return p + c.length;
// }, 0);
function generateViewMoreElement(outputId: string) {
const container = document.createElement('span');
const first = document.createElement('span');
first.textContent = 'Output exceeds the ';
const second = document.createElement('a');
second.textContent = 'size limit';
second.href = `command:workbench.action.openSettings?["notebook.output.textLineLimit"]`;
const third = document.createElement('span');
third.textContent = '. Open the full output data';
const forth = document.createElement('a');
forth.textContent = ' in a text editor';
forth.href = `command:workbench.action.openLargeOutput?${outputId}`;
container.appendChild(first);
container.appendChild(second);
container.appendChild(third);
container.appendChild(forth);
return container;
}
export function truncatedArrayOfString(id: string, outputs: string[], linesLimit: number, container: HTMLElement) {
let buffer = outputs.join('\n').split(/\r|\n|\r\n/g);
let lineCount = buffer.length;
@@ -21,7 +34,7 @@ export function truncatedArrayOfString(outputs: string[], linesLimit: number, co
return;
}
// container.appendChild(generateViewMoreElement(notebookUri, cellViewModel, outputId, disposables, openerService));
container.appendChild(generateViewMoreElement(id));
const div = document.createElement('div');
container.appendChild(div);
@@ -34,5 +47,5 @@ export function truncatedArrayOfString(outputs: string[], linesLimit: number, co
const div2 = document.createElement('div');
container.appendChild(div2);
div2.appendChild(handleANSIOutput(buffer.slice(linesLimit - 5).join('\n')));
div2.appendChild(handleANSIOutput(buffer.slice(lineCount - 5).join('\n')));
}