put word wrap styling on parent container (#211982)

* put word wrap styling on parent container

* update tests
This commit is contained in:
Aaron Munger 2024-05-03 15:27:36 -07:00 committed by GitHub
parent f69aa4b539
commit c6563ccae8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 12 deletions

View File

@ -199,9 +199,9 @@ function renderError(
const content = createOutputContent(outputInfo.id, formattedStack, outputOptions);
const stackTraceElement = document.createElement('div');
stackTraceElement.appendChild(content);
stackTraceElement.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
outputElement.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
disposableStore.push(ctx.onDidChangeSettings(e => {
stackTraceElement.classList.toggle('word-wrap', e.outputWordWrap);
outputElement.classList.toggle('word-wrap', e.outputWordWrap);
}));
if (minimalError) {
@ -384,9 +384,9 @@ function renderStream(outputInfo: OutputWithAppend, outputElement: HTMLElement,
}
contentParent.classList.toggle('scrollable', outputScrolling);
contentParent.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
outputElement.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
disposableStore.push(ctx.onDidChangeSettings(e => {
contentParent!.classList.toggle('word-wrap', e.outputWordWrap);
outputElement.classList.toggle('word-wrap', e.outputWordWrap);
}));
initializeScroll(contentParent, disposableStore, scrollTop);
@ -404,9 +404,10 @@ function renderText(outputInfo: OutputItem, outputElement: HTMLElement, ctx: IRi
const outputOptions = { linesLimit: ctx.settings.lineLimit, scrollable: outputScrolling, trustHtml: false, linkifyFilePaths: ctx.settings.linkifyFilePaths };
const content = createOutputContent(outputInfo.id, text, outputOptions);
content.classList.add('output-plaintext');
if (ctx.settings.outputWordWrap) {
content.classList.add('word-wrap');
}
outputElement.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
disposableStore.push(ctx.onDidChangeSettings(e => {
outputElement.classList.toggle('word-wrap', e.outputWordWrap);
}));
content.classList.toggle('scrollable', outputScrolling);
outputElement.appendChild(content);
@ -445,7 +446,7 @@ export const activate: ActivationFunction<void> = (ctx) => {
white-space: pre;
}
/* When wordwrap turned on, force it to pre-wrap */
#container div.output_container .word-wrap span {
#container div.output_container .word-wrap {
white-space: pre-wrap;
}
#container div.output>div {

View File

@ -152,7 +152,7 @@ suite('Notebook builtin output renderer', () => {
const inserted = outputElement.firstChild as HTMLElement;
assert.ok(inserted, `nothing appended to output element: ${outputElement.innerHTML}`);
assert.ok(outputElement.classList.contains('remove-padding'), `Padding should be removed for scrollable outputs ${outputElement.classList}`);
assert.ok(inserted.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
assert.ok(outputElement.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
`output content classList should contain word-wrap and scrollable ${inserted.classList}`);
assert.ok(inserted.innerHTML.indexOf('>content</') > -1, `Content was not added to output element: ${outputElement.innerHTML}`);
});
@ -169,7 +169,7 @@ suite('Notebook builtin output renderer', () => {
const inserted = outputElement.firstChild as HTMLElement;
assert.ok(inserted, `nothing appended to output element: ${outputElement.innerHTML}`);
assert.ok(outputElement.classList.contains('remove-padding'), `Padding should be removed for non-scrollable outputs: ${outputElement.classList}`);
assert.ok(!inserted.classList.contains('word-wrap') && !inserted.classList.contains('scrollable'),
assert.ok(!outputElement.classList.contains('word-wrap') && !inserted.classList.contains('scrollable'),
`output content classList should not contain word-wrap and scrollable ${inserted.classList}`);
assert.ok(inserted.innerHTML.indexOf('>content</') > -1, `Content was not added to output element: ${outputElement.innerHTML}`);
});
@ -316,7 +316,7 @@ suite('Notebook builtin output renderer', () => {
const inserted = outputElement.firstChild as HTMLElement;
assert.ok(inserted, `nothing appended to output element: ${outputElement.innerHTML}`);
assert.ok(outputElement.classList.contains('remove-padding'), 'Padding should be removed for scrollable outputs');
assert.ok(inserted.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
assert.ok(outputElement.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
`output content classList should contain word-wrap and scrollable ${inserted.classList}`);
assert.ok(inserted.innerHTML.indexOf('>Expected type `str`, but received type') > -1, `Content was not added to output element:\n ${outputElement.innerHTML}`);
assert.ok(inserted.textContent!.indexOf('Expected type `str`, but received type `<class \'int\'>`') > -1, `Content was not added to output element:\n ${outputElement.textContent}`);
@ -465,7 +465,7 @@ suite('Notebook builtin output renderer', () => {
fireSettingsChange({ outputWordWrap: true, outputScrolling: true });
const inserted = outputElement.firstChild as HTMLElement;
assert.ok(inserted.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
assert.ok(outputElement.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
`output content classList should contain word-wrap and scrollable ${inserted.classList}`);
});