split output and markup decoration (#244076)

Co-authored-by: amunger <>
This commit is contained in:
Aaron Munger
2025-03-19 21:28:29 -07:00
committed by GitHub
parent 8dd2ad65d4
commit cc72ba2132
7 changed files with 37 additions and 13 deletions
@@ -929,9 +929,9 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
deltaCellOutputContainerClassNames(diffSide: DiffSide, cellId: string, added: string[], removed: string[]) {
if (diffSide === DiffSide.Original) {
this._originalWebview?.deltaCellContainerClassNames(cellId, added, removed);
this._originalWebview?.deltaCellOutputContainerClassNames(cellId, added, removed);
} else {
this._modifiedWebview?.deltaCellContainerClassNames(cellId, added, removed);
this._modifiedWebview?.deltaCellOutputContainerClassNames(cellId, added, removed);
}
}
@@ -807,7 +807,7 @@ export interface INotebookEditorDelegate extends INotebookEditor {
* Hide the inset in the webview layer without removing it
*/
hideInset(output: IDisplayOutputViewModel): void;
deltaCellContainerClassNames(cellId: string, added: string[], removed: string[]): void;
deltaCellContainerClassNames(cellId: string, added: string[], removed: string[], cellKind: CellKind): void;
}
export interface IActiveNotebookEditorDelegate extends INotebookEditorDelegate {
@@ -1617,21 +1617,21 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
store.add(cell.onCellDecorationsChanged(e => {
e.added.forEach(options => {
if (options.className) {
this.deltaCellContainerClassNames(cell.id, [options.className], []);
this.deltaCellContainerClassNames(cell.id, [options.className], [], cell.cellKind);
}
if (options.outputClassName) {
this.deltaCellContainerClassNames(cell.id, [options.outputClassName], []);
this.deltaCellContainerClassNames(cell.id, [options.outputClassName], [], cell.cellKind);
}
});
e.removed.forEach(options => {
if (options.className) {
this.deltaCellContainerClassNames(cell.id, [], [options.className]);
this.deltaCellContainerClassNames(cell.id, [], [options.className], cell.cellKind);
}
if (options.outputClassName) {
this.deltaCellContainerClassNames(cell.id, [], [options.outputClassName]);
this.deltaCellContainerClassNames(cell.id, [], [options.outputClassName], cell.cellKind);
}
});
}));
@@ -2285,8 +2285,12 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
return ret;
}
deltaCellContainerClassNames(cellId: string, added: string[], removed: string[]) {
this._webview?.deltaCellContainerClassNames(cellId, added, removed);
deltaCellContainerClassNames(cellId: string, added: string[], removed: string[], cellkind: CellKind): void {
if (cellkind === CellKind.Markup) {
this._webview?.deltaMarkupPreviewClassNames(cellId, added, removed);
} else {
this._webview?.deltaCellOutputContainerClassNames(cellId, added, removed);
}
}
changeModelDecorations<T>(callback: (changeAccessor: IModelDecorationsChangeAccessor) => T): T | null {
@@ -72,11 +72,11 @@ export class CellDecorations extends CellContentPart {
this.currentCell.getCellDecorations().forEach(options => {
if (options.className && this.currentCell) {
this.rootContainer.classList.add(options.className);
this.notebookEditor.deltaCellContainerClassNames(this.currentCell.id, [options.className], []);
this.notebookEditor.deltaCellContainerClassNames(this.currentCell.id, [options.className], [], this.currentCell.cellKind);
}
if (options.outputClassName && this.currentCell) {
this.notebookEditor.deltaCellContainerClassNames(this.currentCell.id, [options.outputClassName], []);
this.notebookEditor.deltaCellContainerClassNames(this.currentCell.id, [options.outputClassName], [], this.currentCell.cellKind);
}
});
}
@@ -1855,14 +1855,24 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Themable {
}
deltaCellContainerClassNames(cellId: string, added: string[], removed: string[]) {
deltaCellOutputContainerClassNames(cellId: string, added: string[], removed: string[]) {
this._sendMessageToWebview({
type: 'decorations',
cellId,
addedClassNames: added,
removedClassNames: removed
});
}
deltaMarkupPreviewClassNames(cellId: string, added: string[], removed: string[]) {
if (this.markupPreviewMapping.get(cellId)) {
this._sendMessageToWebview({
type: 'markupDecorations',
cellId,
addedClassNames: added,
removedClassNames: removed
});
}
}
updateOutputRenderers() {
@@ -305,7 +305,7 @@ export interface IUpdateRenderersMessage {
}
export interface IUpdateDecorationsMessage {
readonly type: 'decorations';
readonly type: 'decorations' | 'markupDecorations';
readonly cellId: string;
readonly addedClassNames: readonly string[];
readonly removedClassNames: readonly string[];
@@ -1780,6 +1780,16 @@ async function webviewPreloads(ctx: PreloadContext) {
outputContainer?.classList.remove(...event.data.removedClassNames);
break;
}
case 'markupDecorations': {
const markupCell = window.document.getElementById(event.data.cellId);
// The cell may not have been added yet if it is out of view.
// Decorations will be added when the cell is shown.
if (markupCell) {
markupCell?.classList.add(...event.data.addedClassNames);
markupCell?.classList.remove(...event.data.removedClassNames);
}
break;
}
case 'customKernelMessage':
onDidReceiveKernelMessage.fire(event.data.message);
break;