@codingame/monaco-vscode-api 8.0.4 → 9.0.2

package/vscode/src/vs/workbench/contrib/notebook/browser/diff/diffComponents.js

@@ -0,0 +1,1515 @@
+import { __decorate, __param } from '../../../../../../../../external/tslib/tslib.es6.js';
+import { addDisposableListener, append, $, scheduleAtNextAnimationFrame, getWindow, reset, h } from '../../../../../base/browser/dom.js';
+import { Disposable, DisposableStore } from '../../../../../base/common/lifecycle.js';
+import { Schemas } from '../../../../../base/common/network.js';
+import { IInstantiationService } from '../../../../../platform/instantiation/common/instantiation.js';
+import { OutputComparison, outputEqual, OUTPUT_EDITOR_HEIGHT_MAGIC, PropertyFoldingState, SideBySideDiffElementViewModel, getFormattedMetadataJSON, getFormattedOutputJSON } from './diffElementViewModel.js';
+import { DiffSide, NOTEBOOK_DIFF_CELL_INPUT, NOTEBOOK_DIFF_CELL_IGNORE_WHITESPACE, NOTEBOOK_DIFF_CELL_PROPERTY, NOTEBOOK_DIFF_CELL_PROPERTY_EXPANDED, DIFF_CELL_MARGIN } from './notebookDiffEditorBrowser.js';
+import { CodeEditorWidget } from '../../../../../editor/browser/widget/codeEditor/codeEditorWidget.js';
+import { IModelService } from '../../../../../editor/common/services/model.js';
+import { ILanguageService } from '../../../../../editor/common/languages/language.js';
+import { CellEditType, CellUri } from '../../common/notebookCommon.js';
+import { IContextMenuService } from '../../../../../platform/contextview/browser/contextView.service.js';
+import { MenuId, MenuItemAction } from '../../../../../platform/actions/common/actions.js';
+import { IMenuService } from '../../../../../platform/actions/common/actions.service.js';
+import { IKeybindingService } from '../../../../../platform/keybinding/common/keybinding.service.js';
+import { INotificationService } from '../../../../../platform/notification/common/notification.service.js';
+import { createAndFillInActionBarActions } from '../../../../../platform/actions/browser/menuEntryActionViewItem.js';
+import { IContextKeyService } from '../../../../../platform/contextkey/common/contextkey.service.js';
+import { CodiconActionViewItem } from '../view/cellParts/cellActionView.js';
+import { collapsedIcon, expandedIcon } from '../notebookIcons.js';
+import { OutputContainer } from './diffElementOutputs.js';
+import { EditorExtensionsRegistry } from '../../../../../editor/browser/editorExtensions.js';
+import { ContextMenuController } from '../../../../../editor/contrib/contextmenu/browser/contextmenu.js';
+import { SnippetController2 } from '../../../../../editor/contrib/snippet/browser/snippetController2.js';
+import { SuggestController } from '../../../../../editor/contrib/suggest/browser/suggestController.js';
+import { MenuPreventer } from '../../../codeEditor/browser/menuPreventer.js';
+import { SelectionClipboardContributionID } from '../../../codeEditor/browser/selectionClipboard.js';
+import { TabCompletionController } from '../../../snippets/browser/tabCompletion.js';
+import { renderIcon, renderLabelWithIcons } from '../../../../../base/browser/ui/iconLabel/iconLabels.js';
+import { ITextModelService } from '../../../../../editor/common/services/resolverService.js';
+import { IConfigurationService } from '../../../../../platform/configuration/common/configuration.service.js';
+import { IThemeService } from '../../../../../platform/theme/common/themeService.service.js';
+import { WorkbenchToolBar } from '../../../../../platform/actions/browser/toolbar.js';
+import { ITelemetryService } from '../../../../../platform/telemetry/common/telemetry.service.js';
+import { fixedDiffEditorOptions, fixedEditorOptions, fixedEditorPaddingSingleLineCells, fixedEditorPadding } from './diffCellEditorOptions.js';
+import { AccessibilityVerbositySettingId } from '../../../accessibility/browser/accessibilityConfiguration.js';
+import { IAccessibilityService } from '../../../../../platform/accessibility/common/accessibility.service.js';
+import { DiffEditorWidget } from '../../../../../editor/browser/widget/diffEditor/diffEditorWidget.js';
+import { ICommandService } from '../../../../../platform/commands/common/commands.service.js';
+import { localize } from '../../../../../nls.js';
+import { Emitter } from '../../../../../base/common/event.js';
+import { ITextResourceConfigurationService } from '../../../../../editor/common/services/textResourceConfiguration.js';
+function getOptimizedNestedCodeEditorWidgetOptions() {
+    return {
+        isSimpleWidget: false,
+        contributions: EditorExtensionsRegistry.getSomeEditorContributions([
+            MenuPreventer.ID,
+            SelectionClipboardContributionID,
+            ContextMenuController.ID,
+            SuggestController.ID,
+            SnippetController2.ID,
+            TabCompletionController.ID,
+        ])
+    };
+}
+class CellDiffPlaceholderElement extends Disposable {
+    constructor(placeholder, templateData) {
+        super();
+        templateData.body.classList.remove('left', 'right', 'full');
+        const text = (placeholder.hiddenCells.length === 1) ?
+            ( localize(11473, '{0} hidden cell', placeholder.hiddenCells.length)) :
+            ( localize(11474, '{0} hidden cells', placeholder.hiddenCells.length));
+        templateData.placeholder.innerText = text;
+        this._register(addDisposableListener(templateData.placeholder, 'dblclick', (e) => {
+            if (e.button !== 0) {
+                return;
+            }
+            e.preventDefault();
+            placeholder.showHiddenCells();
+        }));
+        this._register(templateData.marginOverlay.onAction(() => placeholder.showHiddenCells()));
+        templateData.marginOverlay.show();
+    }
+}
+let PropertyHeader = class PropertyHeader extends Disposable {
+    constructor(cell, propertyHeaderContainer, notebookEditor, accessor, contextMenuService, keybindingService, commandService, notificationService, menuService, contextKeyService, themeService, telemetryService, accessibilityService) {
+        super();
+        this.cell = cell;
+        this.propertyHeaderContainer = propertyHeaderContainer;
+        this.notebookEditor = notebookEditor;
+        this.accessor = accessor;
+        this.contextMenuService = contextMenuService;
+        this.keybindingService = keybindingService;
+        this.commandService = commandService;
+        this.notificationService = notificationService;
+        this.menuService = menuService;
+        this.contextKeyService = contextKeyService;
+        this.themeService = themeService;
+        this.telemetryService = telemetryService;
+        this.accessibilityService = accessibilityService;
+    }
+    buildHeader() {
+        const metadataChanged = this.accessor.checkIfModified(this.cell);
+        this._foldingIndicator = append(this.propertyHeaderContainer, $('.property-folding-indicator'));
+        this._foldingIndicator.classList.add(this.accessor.prefix);
+        this._updateFoldingIcon();
+        const metadataStatus = append(this.propertyHeaderContainer, $('div.property-status'));
+        this._statusSpan = append(metadataStatus, $('span'));
+        this._description = append(metadataStatus, $('span.property-description'));
+        if (metadataChanged) {
+            this._statusSpan.textContent = this.accessor.changedLabel;
+            this._statusSpan.style.fontWeight = 'bold';
+            if (metadataChanged.reason) {
+                this._description.textContent = metadataChanged.reason;
+            }
+            this.propertyHeaderContainer.classList.add('modified');
+        }
+        else {
+            this._statusSpan.textContent = this.accessor.unChangedLabel;
+            this._description.textContent = '';
+            this.propertyHeaderContainer.classList.remove('modified');
+        }
+        const cellToolbarContainer = append(this.propertyHeaderContainer, $('div.property-toolbar'));
+        this._toolbar = ( (new WorkbenchToolBar(cellToolbarContainer, {
+            actionViewItemProvider: (action, options) => {
+                if (action instanceof MenuItemAction) {
+                    const item = ( (new CodiconActionViewItem(
+                        action,
+                        { hoverDelegate: options.hoverDelegate },
+                        this.keybindingService,
+                        this.notificationService,
+                        this.contextKeyService,
+                        this.themeService,
+                        this.contextMenuService,
+                        this.accessibilityService
+                    )));
+                    return item;
+                }
+                return undefined;
+            }
+        }, this.menuService, this.contextKeyService, this.contextMenuService, this.keybindingService, this.commandService, this.telemetryService)));
+        this._register(this._toolbar);
+        this._toolbar.context = {
+            cell: this.cell
+        };
+        const scopedContextKeyService = this.contextKeyService.createScoped(cellToolbarContainer);
+        this._register(scopedContextKeyService);
+        const propertyChanged = NOTEBOOK_DIFF_CELL_PROPERTY.bindTo(scopedContextKeyService);
+        propertyChanged.set(!!metadataChanged);
+        this._propertyExpanded = NOTEBOOK_DIFF_CELL_PROPERTY_EXPANDED.bindTo(scopedContextKeyService);
+        this._menu = this.menuService.createMenu(this.accessor.menuId, scopedContextKeyService);
+        this._register(this._menu);
+        const actions = [];
+        createAndFillInActionBarActions(this._menu, { shouldForwardArgs: true }, actions);
+        this._toolbar.setActions(actions);
+        this._register(this._menu.onDidChange(() => {
+            const actions = [];
+            createAndFillInActionBarActions(this._menu, { shouldForwardArgs: true }, actions);
+            this._toolbar.setActions(actions);
+        }));
+        this._register(this.notebookEditor.onMouseUp(e => {
+            if (!e.event.target) {
+                return;
+            }
+            const target = e.event.target;
+            if (target === this.propertyHeaderContainer ||
+                target === this._foldingIndicator || this._foldingIndicator.contains(target) ||
+                target === metadataStatus || metadataStatus.contains(target)) {
+                const cellViewModel = e.target;
+                if (cellViewModel === this.cell) {
+                    const oldFoldingState = this.accessor.getFoldingState(this.cell);
+                    this.accessor.updateFoldingState(this.cell, oldFoldingState === PropertyFoldingState.Expanded ? PropertyFoldingState.Collapsed : PropertyFoldingState.Expanded);
+                    this._updateFoldingIcon();
+                    this.accessor.updateInfoRendering(this.cell.renderOutput);
+                }
+            }
+            return;
+        }));
+        this._updateFoldingIcon();
+        this.accessor.updateInfoRendering(this.cell.renderOutput);
+    }
+    refresh() {
+        const metadataChanged = this.accessor.checkIfModified(this.cell);
+        if (metadataChanged) {
+            this._statusSpan.textContent = this.accessor.changedLabel;
+            this._statusSpan.style.fontWeight = 'bold';
+            if (metadataChanged.reason) {
+                this._description.textContent = metadataChanged.reason;
+            }
+            this.propertyHeaderContainer.classList.add('modified');
+            const actions = [];
+            createAndFillInActionBarActions(this._menu, undefined, actions);
+            this._toolbar.setActions(actions);
+        }
+        else {
+            this._statusSpan.textContent = this.accessor.unChangedLabel;
+            this._statusSpan.style.fontWeight = 'normal';
+            this._description.textContent = '';
+            this.propertyHeaderContainer.classList.remove('modified');
+            this._toolbar.setActions([]);
+        }
+    }
+    _updateFoldingIcon() {
+        if (this.accessor.getFoldingState(this.cell) === PropertyFoldingState.Collapsed) {
+            reset(this._foldingIndicator, renderIcon(collapsedIcon));
+            this._propertyExpanded?.set(false);
+        }
+        else {
+            reset(this._foldingIndicator, renderIcon(expandedIcon));
+            this._propertyExpanded?.set(true);
+        }
+    }
+};
+PropertyHeader = ( (__decorate([
+    ( (__param(4, IContextMenuService))),
+    ( (__param(5, IKeybindingService))),
+    ( (__param(6, ICommandService))),
+    ( (__param(7, INotificationService))),
+    ( (__param(8, IMenuService))),
+    ( (__param(9, IContextKeyService))),
+    ( (__param(10, IThemeService))),
+    ( (__param(11, ITelemetryService))),
+    ( (__param(12, IAccessibilityService)))
+], PropertyHeader)));
+class AbstractElementRenderer extends Disposable {
+    constructor(notebookEditor, cell, templateData, style, instantiationService, languageService, modelService, textModelService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService) {
+        super();
+        this.notebookEditor = notebookEditor;
+        this.cell = cell;
+        this.templateData = templateData;
+        this.style = style;
+        this.instantiationService = instantiationService;
+        this.languageService = languageService;
+        this.modelService = modelService;
+        this.textModelService = textModelService;
+        this.contextMenuService = contextMenuService;
+        this.keybindingService = keybindingService;
+        this.notificationService = notificationService;
+        this.menuService = menuService;
+        this.contextKeyService = contextKeyService;
+        this.configurationService = configurationService;
+        this.textConfigurationService = textConfigurationService;
+        this._metadataLocalDisposable = this._register(( (new DisposableStore())));
+        this._outputLocalDisposable = this._register(( (new DisposableStore())));
+        this._ignoreMetadata = false;
+        this._ignoreOutputs = false;
+        this._isDisposed = false;
+        this._metadataEditorDisposeStore = this._register(( (new DisposableStore())));
+        this._outputEditorDisposeStore = this._register(( (new DisposableStore())));
+        this._register(cell.onDidLayoutChange(e => {
+            this.layout(e);
+        }));
+        this._register(cell.onDidLayoutChange(e => this.updateBorders()));
+        this.init();
+        this.buildBody();
+        this._register(cell.onDidStateChange(() => {
+            this.updateOutputRendering(this.cell.renderOutput);
+        }));
+    }
+    buildBody() {
+        const body = this.templateData.body;
+        this._diffEditorContainer = this.templateData.diffEditorContainer;
+        body.classList.remove('left', 'right', 'full');
+        switch (this.style) {
+            case 'left':
+                body.classList.add('left');
+                break;
+            case 'right':
+                body.classList.add('right');
+                break;
+            default:
+                body.classList.add('full');
+                break;
+        }
+        this.styleContainer(this._diffEditorContainer);
+        this.updateSourceEditor();
+        if (this.cell.modified) {
+            this._register(this.cell.modified.textModel.onDidChangeContent(() => this._cellHeader.refresh()));
+        }
+        this._ignoreMetadata = this.configurationService.getValue('notebook.diff.ignoreMetadata');
+        if (this._ignoreMetadata) {
+            this._disposeMetadata();
+        }
+        else {
+            this._buildMetadata();
+        }
+        this._ignoreOutputs = this.configurationService.getValue('notebook.diff.ignoreOutputs') || !!(this.notebookEditor.textModel?.transientOptions.transientOutputs);
+        if (this._ignoreOutputs) {
+            this._disposeOutput();
+        }
+        else {
+            this._buildOutput();
+        }
+        this._register(this.configurationService.onDidChangeConfiguration(e => {
+            let metadataLayoutChange = false;
+            let outputLayoutChange = false;
+            if (e.affectsConfiguration('notebook.diff.ignoreMetadata')) {
+                const newValue = this.configurationService.getValue('notebook.diff.ignoreMetadata');
+                if (newValue !== undefined && this._ignoreMetadata !== newValue) {
+                    this._ignoreMetadata = newValue;
+                    this._metadataLocalDisposable.clear();
+                    if (this.configurationService.getValue('notebook.diff.ignoreMetadata')) {
+                        this._disposeMetadata();
+                    }
+                    else {
+                        this.cell.metadataStatusHeight = 25;
+                        this._buildMetadata();
+                        this.updateMetadataRendering();
+                        metadataLayoutChange = true;
+                    }
+                }
+            }
+            if (e.affectsConfiguration('notebook.diff.ignoreOutputs')) {
+                const newValue = this.configurationService.getValue('notebook.diff.ignoreOutputs');
+                if (newValue !== undefined && this._ignoreOutputs !== (newValue || this.notebookEditor.textModel?.transientOptions.transientOutputs)) {
+                    this._ignoreOutputs = newValue || !!(this.notebookEditor.textModel?.transientOptions.transientOutputs);
+                    this._outputLocalDisposable.clear();
+                    if (this._ignoreOutputs) {
+                        this._disposeOutput();
+                    }
+                    else {
+                        this.cell.outputStatusHeight = 25;
+                        this._buildOutput();
+                        outputLayoutChange = true;
+                    }
+                }
+            }
+            if (metadataLayoutChange || outputLayoutChange) {
+                this.layout({ metadataHeight: metadataLayoutChange, outputTotalHeight: outputLayoutChange });
+            }
+        }));
+    }
+    updateMetadataRendering() {
+        if (this.cell.metadataFoldingState === PropertyFoldingState.Expanded) {
+            this._metadataInfoContainer.style.display = 'block';
+            if (!this._metadataEditorContainer || !this._metadataEditor) {
+                this._metadataEditorContainer = append(this._metadataInfoContainer, $('.metadata-editor-container'));
+                this._buildMetadataEditor();
+            }
+            else {
+                this.cell.metadataHeight = this._metadataEditor.getContentHeight();
+            }
+        }
+        else {
+            this._metadataInfoContainer.style.display = 'none';
+            this.cell.metadataHeight = 0;
+        }
+    }
+    updateOutputRendering(renderRichOutput) {
+        if (this.cell.outputFoldingState === PropertyFoldingState.Expanded) {
+            this._outputInfoContainer.style.display = 'block';
+            if (renderRichOutput) {
+                this._hideOutputsRaw();
+                this._buildOutputRendererContainer();
+                this._showOutputsRenderer();
+                this._showOutputsEmptyView();
+            }
+            else {
+                this._hideOutputsRenderer();
+                this._buildOutputRawContainer();
+                this._showOutputsRaw();
+            }
+        }
+        else {
+            this._outputInfoContainer.style.display = 'none';
+            this._hideOutputsRaw();
+            this._hideOutputsRenderer();
+            this._hideOutputsEmptyView();
+        }
+    }
+    _buildOutputRawContainer() {
+        if (!this._outputEditorContainer) {
+            this._outputEditorContainer = append(this._outputInfoContainer, $('.output-editor-container'));
+            this._buildOutputEditor();
+        }
+    }
+    _showOutputsRaw() {
+        if (this._outputEditorContainer) {
+            this._outputEditorContainer.style.display = 'block';
+            this.cell.rawOutputHeight = this._outputEditor.getContentHeight();
+        }
+    }
+    _showOutputsEmptyView() {
+        this.cell.layoutChange();
+    }
+    _hideOutputsRaw() {
+        if (this._outputEditorContainer) {
+            this._outputEditorContainer.style.display = 'none';
+            this.cell.rawOutputHeight = 0;
+        }
+    }
+    _hideOutputsEmptyView() {
+        this.cell.layoutChange();
+    }
+    _applySanitizedMetadataChanges(currentMetadata, newMetadata) {
+        const result = {};
+        try {
+            const newMetadataObj = JSON.parse(newMetadata);
+            const keys = ( (new Set([...( (Object.keys(newMetadataObj)))])));
+            for (const key of keys) {
+                switch (key) {
+                    case 'inputCollapsed':
+                    case 'outputCollapsed':
+                        if (typeof newMetadataObj[key] === 'boolean') {
+                            result[key] = newMetadataObj[key];
+                        }
+                        else {
+                            result[key] = currentMetadata[key];
+                        }
+                        break;
+                    default:
+                        result[key] = newMetadataObj[key];
+                        break;
+                }
+            }
+            const index = this.notebookEditor.textModel.cells.indexOf(this.cell.modified.textModel);
+            if (index < 0) {
+                return;
+            }
+            this.notebookEditor.textModel.applyEdits([
+                { editType: CellEditType.Metadata, index, metadata: result }
+            ], true, undefined, () => undefined, undefined, true);
+        }
+        catch {
+        }
+    }
+    async _buildMetadataEditor() {
+        this._metadataEditorDisposeStore.clear();
+        if (this.cell instanceof SideBySideDiffElementViewModel) {
+            this._metadataEditor = this.instantiationService.createInstance(DiffEditorWidget, this._metadataEditorContainer, {
+                ...fixedDiffEditorOptions,
+                overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode(),
+                readOnly: false,
+                originalEditable: false,
+                ignoreTrimWhitespace: false,
+                automaticLayout: false,
+                dimension: {
+                    height: this.cell.layoutInfo.metadataHeight,
+                    width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), true, true)
+                }
+            }, {
+                originalEditor: getOptimizedNestedCodeEditorWidgetOptions(),
+                modifiedEditor: getOptimizedNestedCodeEditorWidgetOptions()
+            });
+            this.layout({ metadataHeight: true });
+            this._metadataEditorDisposeStore.add(this._metadataEditor);
+            this._metadataEditorContainer?.classList.add('diff');
+            const originalMetadataModel = await this.textModelService.createModelReference(CellUri.generateCellPropertyUri(this.cell.originalDocument.uri, this.cell.original.handle, Schemas.vscodeNotebookCellMetadata));
+            const modifiedMetadataModel = await this.textModelService.createModelReference(CellUri.generateCellPropertyUri(this.cell.modifiedDocument.uri, this.cell.modified.handle, Schemas.vscodeNotebookCellMetadata));
+            this._metadataEditor.setModel({
+                original: originalMetadataModel.object.textEditorModel,
+                modified: modifiedMetadataModel.object.textEditorModel
+            });
+            this._metadataEditorDisposeStore.add(originalMetadataModel);
+            this._metadataEditorDisposeStore.add(modifiedMetadataModel);
+            this.cell.metadataHeight = this._metadataEditor.getContentHeight();
+            this._metadataEditorDisposeStore.add(this._metadataEditor.onDidContentSizeChange((e) => {
+                if (e.contentHeightChanged && this.cell.metadataFoldingState === PropertyFoldingState.Expanded) {
+                    this.cell.metadataHeight = e.contentHeight;
+                }
+            }));
+            let respondingToContentChange = false;
+            this._metadataEditorDisposeStore.add(modifiedMetadataModel.object.textEditorModel.onDidChangeContent(() => {
+                respondingToContentChange = true;
+                const value = modifiedMetadataModel.object.textEditorModel.getValue();
+                this._applySanitizedMetadataChanges(this.cell.modified.metadata, value);
+                this._metadataHeader.refresh();
+                respondingToContentChange = false;
+            }));
+            this._metadataEditorDisposeStore.add(this.cell.modified.textModel.onDidChangeMetadata(() => {
+                if (respondingToContentChange) {
+                    return;
+                }
+                const modifiedMetadataSource = getFormattedMetadataJSON(this.notebookEditor.textModel, this.cell.modified?.metadata || {}, this.cell.modified?.language);
+                modifiedMetadataModel.object.textEditorModel.setValue(modifiedMetadataSource);
+            }));
+            return;
+        }
+        else {
+            this._metadataEditor = this.instantiationService.createInstance(CodeEditorWidget, this._metadataEditorContainer, {
+                ...fixedEditorOptions,
+                dimension: {
+                    width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true),
+                    height: this.cell.layoutInfo.metadataHeight
+                },
+                overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode(),
+                readOnly: false
+            }, {});
+            this.layout({ metadataHeight: true });
+            this._metadataEditorDisposeStore.add(this._metadataEditor);
+            const mode = this.languageService.createById('jsonc');
+            const originalMetadataSource = getFormattedMetadataJSON(this.notebookEditor.textModel, this.cell.type === 'insert'
+                ? this.cell.modified.metadata || {}
+                : this.cell.original.metadata || {});
+            const uri = this.cell.type === 'insert'
+                ? this.cell.modified.uri
+                : this.cell.original.uri;
+            const handle = this.cell.type === 'insert'
+                ? this.cell.modified.handle
+                : this.cell.original.handle;
+            const modelUri = CellUri.generateCellPropertyUri(uri, handle, Schemas.vscodeNotebookCellMetadata);
+            const metadataModel = this.modelService.createModel(originalMetadataSource, mode, modelUri, false);
+            this._metadataEditor.setModel(metadataModel);
+            this._metadataEditorDisposeStore.add(metadataModel);
+            this.cell.metadataHeight = this._metadataEditor.getContentHeight();
+            this._metadataEditorDisposeStore.add(this._metadataEditor.onDidContentSizeChange((e) => {
+                if (e.contentHeightChanged && this.cell.metadataFoldingState === PropertyFoldingState.Expanded) {
+                    this.cell.metadataHeight = e.contentHeight;
+                }
+            }));
+        }
+    }
+    _buildOutputEditor() {
+        this._outputEditorDisposeStore.clear();
+        if ((this.cell.type === 'modified' || this.cell.type === 'unchanged') && !this.notebookEditor.textModel.transientOptions.transientOutputs) {
+            const originalOutputsSource = getFormattedOutputJSON(this.cell.original?.outputs || []);
+            const modifiedOutputsSource = getFormattedOutputJSON(this.cell.modified?.outputs || []);
+            if (originalOutputsSource !== modifiedOutputsSource) {
+                const mode = this.languageService.createById('json');
+                const originalModel = this.modelService.createModel(originalOutputsSource, mode, undefined, true);
+                const modifiedModel = this.modelService.createModel(modifiedOutputsSource, mode, undefined, true);
+                this._outputEditorDisposeStore.add(originalModel);
+                this._outputEditorDisposeStore.add(modifiedModel);
+                const lineHeight = this.notebookEditor.getLayoutInfo().fontInfo.lineHeight || 17;
+                const lineCount = Math.max(originalModel.getLineCount(), modifiedModel.getLineCount());
+                this._outputEditor = this.instantiationService.createInstance(DiffEditorWidget, this._outputEditorContainer, {
+                    ...fixedDiffEditorOptions,
+                    overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode(),
+                    readOnly: true,
+                    ignoreTrimWhitespace: false,
+                    automaticLayout: false,
+                    dimension: {
+                        height: Math.min(OUTPUT_EDITOR_HEIGHT_MAGIC, this.cell.layoutInfo.rawOutputHeight || lineHeight * lineCount),
+                        width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true)
+                    },
+                    accessibilityVerbose: this.configurationService.getValue(AccessibilityVerbositySettingId.DiffEditor) ?? false
+                }, {
+                    originalEditor: getOptimizedNestedCodeEditorWidgetOptions(),
+                    modifiedEditor: getOptimizedNestedCodeEditorWidgetOptions()
+                });
+                this._outputEditorDisposeStore.add(this._outputEditor);
+                this._outputEditorContainer?.classList.add('diff');
+                this._outputEditor.setModel({
+                    original: originalModel,
+                    modified: modifiedModel
+                });
+                this._outputEditor.restoreViewState(this.cell.getOutputEditorViewState());
+                this.cell.rawOutputHeight = this._outputEditor.getContentHeight();
+                this._outputEditorDisposeStore.add(this._outputEditor.onDidContentSizeChange((e) => {
+                    if (e.contentHeightChanged && this.cell.outputFoldingState === PropertyFoldingState.Expanded) {
+                        this.cell.rawOutputHeight = e.contentHeight;
+                    }
+                }));
+                this._outputEditorDisposeStore.add(this.cell.modified.textModel.onDidChangeOutputs(() => {
+                    const modifiedOutputsSource = getFormattedOutputJSON(this.cell.modified?.outputs || []);
+                    modifiedModel.setValue(modifiedOutputsSource);
+                    this._outputHeader.refresh();
+                }));
+                return;
+            }
+        }
+        this._outputEditor = this.instantiationService.createInstance(CodeEditorWidget, this._outputEditorContainer, {
+            ...fixedEditorOptions,
+            dimension: {
+                width: Math.min(OUTPUT_EDITOR_HEIGHT_MAGIC, this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, this.cell.type === 'unchanged' || this.cell.type === 'modified') - 32),
+                height: this.cell.layoutInfo.rawOutputHeight
+            },
+            overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
+        }, {});
+        this._outputEditorDisposeStore.add(this._outputEditor);
+        const mode = this.languageService.createById('json');
+        const originaloutputSource = getFormattedOutputJSON(this.notebookEditor.textModel.transientOptions.transientOutputs
+            ? []
+            : this.cell.type === 'insert'
+                ? this.cell.modified.outputs || []
+                : this.cell.original.outputs || []);
+        const outputModel = this.modelService.createModel(originaloutputSource, mode, undefined, true);
+        this._outputEditorDisposeStore.add(outputModel);
+        this._outputEditor.setModel(outputModel);
+        this._outputEditor.restoreViewState(this.cell.getOutputEditorViewState());
+        this.cell.rawOutputHeight = this._outputEditor.getContentHeight();
+        this._outputEditorDisposeStore.add(this._outputEditor.onDidContentSizeChange((e) => {
+            if (e.contentHeightChanged && this.cell.outputFoldingState === PropertyFoldingState.Expanded) {
+                this.cell.rawOutputHeight = e.contentHeight;
+            }
+        }));
+    }
+    layoutNotebookCell() {
+        this.notebookEditor.layoutNotebookCell(this.cell, this.cell.layoutInfo.totalHeight);
+    }
+    updateBorders() {
+        this.templateData.leftBorder.style.height = `${this.cell.layoutInfo.totalHeight - 32}px`;
+        this.templateData.rightBorder.style.height = `${this.cell.layoutInfo.totalHeight - 32}px`;
+        this.templateData.bottomBorder.style.top = `${this.cell.layoutInfo.totalHeight - 32}px`;
+    }
+    dispose() {
+        if (this._outputEditor) {
+            this.cell.saveOutputEditorViewState(this._outputEditor.saveViewState());
+        }
+        if (this._metadataEditor) {
+            this.cell.saveMetadataEditorViewState(this._metadataEditor.saveViewState());
+        }
+        this._metadataEditorDisposeStore.dispose();
+        this._outputEditorDisposeStore.dispose();
+        this._isDisposed = true;
+        super.dispose();
+    }
+}
+class SingleSideDiffElement extends AbstractElementRenderer {
+    constructor(notebookEditor, cell, templateData, style, instantiationService, languageService, modelService, textModelService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService) {
+        super(notebookEditor, cell, templateData, style, instantiationService, languageService, modelService, textModelService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService);
+        this.cell = cell;
+        this.templateData = templateData;
+        this.updateBorders();
+    }
+    init() {
+        this._diagonalFill = this.templateData.diagonalFill;
+    }
+    buildBody() {
+        const body = this.templateData.body;
+        this._diffEditorContainer = this.templateData.diffEditorContainer;
+        body.classList.remove('left', 'right', 'full');
+        switch (this.style) {
+            case 'left':
+                body.classList.add('left');
+                break;
+            case 'right':
+                body.classList.add('right');
+                break;
+            default:
+                body.classList.add('full');
+                break;
+        }
+        this.styleContainer(this._diffEditorContainer);
+        this.updateSourceEditor();
+        if (this.configurationService.getValue('notebook.diff.ignoreMetadata')) {
+            this._disposeMetadata();
+        }
+        else {
+            this._buildMetadata();
+        }
+        if (this.configurationService.getValue('notebook.diff.ignoreOutputs') || this.notebookEditor.textModel?.transientOptions.transientOutputs) {
+            this._disposeOutput();
+        }
+        else {
+            this._buildOutput();
+        }
+        this._register(this.configurationService.onDidChangeConfiguration(e => {
+            let metadataLayoutChange = false;
+            let outputLayoutChange = false;
+            if (e.affectsConfiguration('notebook.diff.ignoreMetadata')) {
+                this._metadataLocalDisposable.clear();
+                if (this.configurationService.getValue('notebook.diff.ignoreMetadata')) {
+                    this._disposeMetadata();
+                }
+                else {
+                    this.cell.metadataStatusHeight = 25;
+                    this._buildMetadata();
+                    this.updateMetadataRendering();
+                    metadataLayoutChange = true;
+                }
+            }
+            if (e.affectsConfiguration('notebook.diff.ignoreOutputs')) {
+                this._outputLocalDisposable.clear();
+                if (this.configurationService.getValue('notebook.diff.ignoreOutputs') || this.notebookEditor.textModel?.transientOptions.transientOutputs) {
+                    this._disposeOutput();
+                }
+                else {
+                    this.cell.outputStatusHeight = 25;
+                    this._buildOutput();
+                    outputLayoutChange = true;
+                }
+            }
+            if (metadataLayoutChange || outputLayoutChange) {
+                this.layout({ metadataHeight: metadataLayoutChange, outputTotalHeight: outputLayoutChange });
+            }
+        }));
+    }
+    updateSourceEditor() {
+        this._cellHeaderContainer = this.templateData.cellHeaderContainer;
+        this._cellHeaderContainer.style.display = 'flex';
+        this._cellHeaderContainer.innerText = '';
+        this._editorContainer = this.templateData.editorContainer;
+        this._editorContainer.classList.add('diff');
+        const renderSourceEditor = () => {
+            if (this.cell.cellFoldingState === PropertyFoldingState.Collapsed) {
+                this._editorContainer.style.display = 'none';
+                this.cell.editorHeight = 0;
+                return;
+            }
+            const lineCount = this.nestedCellViewModel.textModel.textBuffer.getLineCount();
+            const lineHeight = this.notebookEditor.getLayoutInfo().fontInfo.lineHeight || 17;
+            const editorHeight = lineCount * lineHeight + fixedEditorPadding.top + fixedEditorPadding.bottom;
+            this._editorContainer.style.height = `${editorHeight}px`;
+            this._editorContainer.style.display = 'block';
+            if (this._editor) {
+                const contentHeight = this._editor.getContentHeight();
+                if (contentHeight >= 0) {
+                    this.cell.editorHeight = contentHeight;
+                }
+                return;
+            }
+            this._editor = this.templateData.sourceEditor;
+            this._editor.layout({
+                width: (this.notebookEditor.getLayoutInfo().width - 2 * DIFF_CELL_MARGIN) / 2 - 18,
+                height: editorHeight
+            });
+            this._editor.updateOptions({ readOnly: this.readonly });
+            this.cell.editorHeight = editorHeight;
+            this._register(this._editor.onDidContentSizeChange((e) => {
+                if (this.cell.cellFoldingState === PropertyFoldingState.Expanded && e.contentHeightChanged && this.cell.layoutInfo.editorHeight !== e.contentHeight) {
+                    this.cell.editorHeight = e.contentHeight;
+                }
+            }));
+            this._initializeSourceDiffEditor(this.nestedCellViewModel);
+        };
+        this._cellHeader = this._register(this.instantiationService.createInstance(PropertyHeader, this.cell, this._cellHeaderContainer, this.notebookEditor, {
+            updateInfoRendering: () => renderSourceEditor(),
+            checkIfModified: (_) => ({ reason: undefined }),
+            getFoldingState: (cell) => cell.cellFoldingState,
+            updateFoldingState: (cell, state) => cell.cellFoldingState = state,
+            unChangedLabel: 'Input',
+            changedLabel: 'Input',
+            prefix: 'input',
+            menuId: MenuId.NotebookDiffCellInputTitle
+        }));
+        this._cellHeader.buildHeader();
+        renderSourceEditor();
+        this._initializeSourceDiffEditor(this.nestedCellViewModel);
+    }
+    calculateDiagonalFillHeight() {
+        return this.cell.layoutInfo.cellStatusHeight + this.cell.layoutInfo.editorHeight + this.cell.layoutInfo.editorMargin + this.cell.layoutInfo.metadataStatusHeight + this.cell.layoutInfo.metadataHeight + this.cell.layoutInfo.outputTotalHeight + this.cell.layoutInfo.outputStatusHeight;
+    }
+    async _initializeSourceDiffEditor(modifiedCell) {
+        const modifiedRef = await this.textModelService.createModelReference(modifiedCell.uri);
+        if (this._isDisposed) {
+            return;
+        }
+        const modifiedTextModel = modifiedRef.object.textEditorModel;
+        this._register(modifiedRef);
+        this._editor.setModel(modifiedTextModel);
+        const editorViewState = this.cell.getSourceEditorViewState();
+        if (editorViewState) {
+            this._editor.restoreViewState(editorViewState);
+        }
+        const contentHeight = this._editor.getContentHeight();
+        this.cell.editorHeight = contentHeight;
+        const height = `${this.calculateDiagonalFillHeight()}px`;
+        if (this._diagonalFill.style.height !== height) {
+            this._diagonalFill.style.height = height;
+        }
+    }
+    _disposeMetadata() {
+        this.cell.metadataStatusHeight = 0;
+        this.cell.metadataHeight = 0;
+        this.templateData.cellHeaderContainer.style.display = 'none';
+        this.templateData.metadataHeaderContainer.style.display = 'none';
+        this.templateData.metadataInfoContainer.style.display = 'none';
+        this._metadataEditor = undefined;
+    }
+    _buildMetadata() {
+        this._metadataHeaderContainer = this.templateData.metadataHeaderContainer;
+        this._metadataInfoContainer = this.templateData.metadataInfoContainer;
+        this._metadataHeaderContainer.style.display = 'flex';
+        this._metadataInfoContainer.style.display = 'block';
+        this._metadataHeaderContainer.innerText = '';
+        this._metadataInfoContainer.innerText = '';
+        this._metadataHeader = this.instantiationService.createInstance(PropertyHeader, this.cell, this._metadataHeaderContainer, this.notebookEditor, {
+            updateInfoRendering: this.updateMetadataRendering.bind(this),
+            checkIfModified: (cell) => {
+                return cell.checkMetadataIfModified();
+            },
+            getFoldingState: (cell) => {
+                return cell.metadataFoldingState;
+            },
+            updateFoldingState: (cell, state) => {
+                cell.metadataFoldingState = state;
+            },
+            unChangedLabel: 'Metadata',
+            changedLabel: 'Metadata changed',
+            prefix: 'metadata',
+            menuId: MenuId.NotebookDiffCellMetadataTitle
+        });
+        this._metadataLocalDisposable.add(this._metadataHeader);
+        this._metadataHeader.buildHeader();
+    }
+    _buildOutput() {
+        this.templateData.outputHeaderContainer.style.display = 'flex';
+        this.templateData.outputInfoContainer.style.display = 'block';
+        this._outputHeaderContainer = this.templateData.outputHeaderContainer;
+        this._outputInfoContainer = this.templateData.outputInfoContainer;
+        this._outputHeaderContainer.innerText = '';
+        this._outputInfoContainer.innerText = '';
+        this._outputHeader = this.instantiationService.createInstance(PropertyHeader, this.cell, this._outputHeaderContainer, this.notebookEditor, {
+            updateInfoRendering: this.updateOutputRendering.bind(this),
+            checkIfModified: (cell) => {
+                return cell.checkIfOutputsModified();
+            },
+            getFoldingState: (cell) => {
+                return cell.outputFoldingState;
+            },
+            updateFoldingState: (cell, state) => {
+                cell.outputFoldingState = state;
+            },
+            unChangedLabel: 'Outputs',
+            changedLabel: 'Outputs changed',
+            prefix: 'output',
+            menuId: MenuId.NotebookDiffCellOutputsTitle
+        });
+        this._outputLocalDisposable.add(this._outputHeader);
+        this._outputHeader.buildHeader();
+    }
+    _disposeOutput() {
+        this._hideOutputsRaw();
+        this._hideOutputsRenderer();
+        this._hideOutputsEmptyView();
+        this.cell.rawOutputHeight = 0;
+        this.cell.outputStatusHeight = 0;
+        this.templateData.outputHeaderContainer.style.display = 'none';
+        this.templateData.outputInfoContainer.style.display = 'none';
+        this._outputViewContainer = undefined;
+    }
+}
+let DeletedElement = class DeletedElement extends SingleSideDiffElement {
+    constructor(notebookEditor, cell, templateData, languageService, modelService, textModelService, instantiationService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService) {
+        super(notebookEditor, cell, templateData, 'left', instantiationService, languageService, modelService, textModelService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService);
+    }
+    get nestedCellViewModel() {
+        return this.cell.original;
+    }
+    get readonly() {
+        return true;
+    }
+    styleContainer(container) {
+        container.classList.remove('inserted');
+        container.classList.add('removed');
+    }
+    layout(state) {
+        scheduleAtNextAnimationFrame(getWindow(this._diffEditorContainer), () => {
+            if ((state.editorHeight || state.outerWidth) && this._editor) {
+                this._editorContainer.style.height = `${this.cell.layoutInfo.editorHeight}px`;
+                this._editor.layout({
+                    width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, false),
+                    height: this.cell.layoutInfo.editorHeight
+                });
+            }
+            if (state.outerWidth && this._editor) {
+                this._editorContainer.style.height = `${this.cell.layoutInfo.editorHeight}px`;
+                this._editor.layout();
+            }
+            if (state.metadataHeight || state.outerWidth) {
+                this._metadataEditor?.layout({
+                    width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, false),
+                    height: this.cell.layoutInfo.metadataHeight
+                });
+            }
+            if (state.outputTotalHeight || state.outerWidth) {
+                this._outputEditor?.layout({
+                    width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, false),
+                    height: this.cell.layoutInfo.outputTotalHeight
+                });
+            }
+            if (this._diagonalFill) {
+                this._diagonalFill.style.height = `${this.calculateDiagonalFillHeight()}px`;
+            }
+            this.layoutNotebookCell();
+        });
+    }
+    _buildOutputRendererContainer() {
+        if (!this._outputViewContainer) {
+            this._outputViewContainer = append(this._outputInfoContainer, $('.output-view-container'));
+            this._outputEmptyElement = append(this._outputViewContainer, $('.output-empty-view'));
+            const span = append(this._outputEmptyElement, $('span'));
+            span.innerText = 'No outputs to render';
+            if (this.cell.original.outputs.length === 0) {
+                this._outputEmptyElement.style.display = 'block';
+            }
+            else {
+                this._outputEmptyElement.style.display = 'none';
+            }
+            this.cell.layoutChange();
+            this._outputLeftView = this.instantiationService.createInstance(OutputContainer, this.notebookEditor, this.notebookEditor.textModel, this.cell, this.cell.original, DiffSide.Original, this._outputViewContainer);
+            this._register(this._outputLeftView);
+            this._outputLeftView.render();
+            const removedOutputRenderListener = this.notebookEditor.onDidDynamicOutputRendered(e => {
+                if (( (e.cell.uri.toString())) === ( (this.cell.original.uri.toString()))) {
+                    this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Original, this.cell.original.id, ['nb-cellDeleted'], []);
+                    removedOutputRenderListener.dispose();
+                }
+            });
+            this._register(removedOutputRenderListener);
+        }
+        this._outputViewContainer.style.display = 'block';
+    }
+    _decorate() {
+        this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Original, this.cell.original.id, ['nb-cellDeleted'], []);
+    }
+    _showOutputsRenderer() {
+        if (this._outputViewContainer) {
+            this._outputViewContainer.style.display = 'block';
+            this._outputLeftView?.showOutputs();
+            this._decorate();
+        }
+    }
+    _hideOutputsRenderer() {
+        if (this._outputViewContainer) {
+            this._outputViewContainer.style.display = 'none';
+            this._outputLeftView?.hideOutputs();
+        }
+    }
+    dispose() {
+        if (this._editor) {
+            this.cell.saveSpirceEditorViewState(this._editor.saveViewState());
+        }
+        super.dispose();
+    }
+};
+DeletedElement = ( (__decorate([
+    ( (__param(3, ILanguageService))),
+    ( (__param(4, IModelService))),
+    ( (__param(5, ITextModelService))),
+    ( (__param(6, IInstantiationService))),
+    ( (__param(7, IContextMenuService))),
+    ( (__param(8, IKeybindingService))),
+    ( (__param(9, INotificationService))),
+    ( (__param(10, IMenuService))),
+    ( (__param(11, IContextKeyService))),
+    ( (__param(12, IConfigurationService))),
+    ( (__param(13, ITextResourceConfigurationService)))
+], DeletedElement)));
+let InsertElement = class InsertElement extends SingleSideDiffElement {
+    constructor(notebookEditor, cell, templateData, instantiationService, languageService, modelService, textModelService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService) {
+        super(notebookEditor, cell, templateData, 'right', instantiationService, languageService, modelService, textModelService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService);
+    }
+    get nestedCellViewModel() {
+        return this.cell.modified;
+    }
+    get readonly() {
+        return false;
+    }
+    styleContainer(container) {
+        container.classList.remove('removed');
+        container.classList.add('inserted');
+    }
+    _buildOutputRendererContainer() {
+        if (!this._outputViewContainer) {
+            this._outputViewContainer = append(this._outputInfoContainer, $('.output-view-container'));
+            this._outputEmptyElement = append(this._outputViewContainer, $('.output-empty-view'));
+            this._outputEmptyElement.innerText = 'No outputs to render';
+            if (this.cell.modified.outputs.length === 0) {
+                this._outputEmptyElement.style.display = 'block';
+            }
+            else {
+                this._outputEmptyElement.style.display = 'none';
+            }
+            this.cell.layoutChange();
+            this._outputRightView = this.instantiationService.createInstance(OutputContainer, this.notebookEditor, this.notebookEditor.textModel, this.cell, this.cell.modified, DiffSide.Modified, this._outputViewContainer);
+            this._register(this._outputRightView);
+            this._outputRightView.render();
+            const insertOutputRenderListener = this.notebookEditor.onDidDynamicOutputRendered(e => {
+                if (( (e.cell.uri.toString())) === ( (this.cell.modified.uri.toString()))) {
+                    this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Modified, this.cell.modified.id, ['nb-cellAdded'], []);
+                    insertOutputRenderListener.dispose();
+                }
+            });
+            this._register(insertOutputRenderListener);
+        }
+        this._outputViewContainer.style.display = 'block';
+    }
+    _decorate() {
+        this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Modified, this.cell.modified.id, ['nb-cellAdded'], []);
+    }
+    _showOutputsRenderer() {
+        if (this._outputViewContainer) {
+            this._outputViewContainer.style.display = 'block';
+            this._outputRightView?.showOutputs();
+            this._decorate();
+        }
+    }
+    _hideOutputsRenderer() {
+        if (this._outputViewContainer) {
+            this._outputViewContainer.style.display = 'none';
+            this._outputRightView?.hideOutputs();
+        }
+    }
+    layout(state) {
+        scheduleAtNextAnimationFrame(getWindow(this._diffEditorContainer), () => {
+            if ((state.editorHeight || state.outerWidth) && this._editor) {
+                this._editorContainer.style.height = `${this.cell.layoutInfo.editorHeight}px`;
+                this._editor.layout({
+                    width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, false),
+                    height: this.cell.layoutInfo.editorHeight
+                });
+            }
+            if (state.outerWidth && this._editor) {
+                this._editorContainer.style.height = `${this.cell.layoutInfo.editorHeight}px`;
+                this._editor.layout();
+            }
+            if (state.metadataHeight || state.outerWidth) {
+                this._metadataEditor?.layout({
+                    width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true),
+                    height: this.cell.layoutInfo.metadataHeight
+                });
+            }
+            if (state.outputTotalHeight || state.outerWidth) {
+                this._outputEditor?.layout({
+                    width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, false),
+                    height: this.cell.layoutInfo.outputTotalHeight
+                });
+            }
+            this.layoutNotebookCell();
+            if (this._diagonalFill) {
+                this._diagonalFill.style.height = `${this.calculateDiagonalFillHeight()}px`;
+            }
+        });
+    }
+    dispose() {
+        if (this._editor) {
+            this.cell.saveSpirceEditorViewState(this._editor.saveViewState());
+        }
+        super.dispose();
+    }
+};
+InsertElement = ( (__decorate([
+    ( (__param(3, IInstantiationService))),
+    ( (__param(4, ILanguageService))),
+    ( (__param(5, IModelService))),
+    ( (__param(6, ITextModelService))),
+    ( (__param(7, IContextMenuService))),
+    ( (__param(8, IKeybindingService))),
+    ( (__param(9, INotificationService))),
+    ( (__param(10, IMenuService))),
+    ( (__param(11, IContextKeyService))),
+    ( (__param(12, IConfigurationService))),
+    ( (__param(13, ITextResourceConfigurationService)))
+], InsertElement)));
+let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
+    constructor(notebookEditor, cell, templateData, instantiationService, languageService, modelService, textModelService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService) {
+        super(notebookEditor, cell, templateData, 'full', instantiationService, languageService, modelService, textModelService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService);
+        this.cell = cell;
+        this.templateData = templateData;
+        this._editorViewStateChanged = false;
+        this.updateBorders();
+    }
+    init() { }
+    styleContainer(container) {
+        container.classList.remove('inserted', 'removed');
+    }
+    buildBody() {
+        super.buildBody();
+        if (this.cell.displayIconToHideUnmodifiedCells) {
+            this._register(this.templateData.marginOverlay.onAction(() => this.cell.hideUnchangedCells()));
+            this.templateData.marginOverlay.show();
+        }
+        else {
+            this.templateData.marginOverlay.hide();
+        }
+    }
+    _disposeMetadata() {
+        this.cell.metadataStatusHeight = 0;
+        this.cell.metadataHeight = 0;
+        this.templateData.metadataHeaderContainer.style.display = 'none';
+        this.templateData.metadataInfoContainer.style.display = 'none';
+        this._metadataEditor = undefined;
+    }
+    _buildMetadata() {
+        this._metadataHeaderContainer = this.templateData.metadataHeaderContainer;
+        this._metadataInfoContainer = this.templateData.metadataInfoContainer;
+        this._metadataHeaderContainer.style.display = 'flex';
+        this._metadataInfoContainer.style.display = 'block';
+        this._metadataHeaderContainer.innerText = '';
+        this._metadataInfoContainer.innerText = '';
+        this._metadataHeader = this.instantiationService.createInstance(PropertyHeader, this.cell, this._metadataHeaderContainer, this.notebookEditor, {
+            updateInfoRendering: this.updateMetadataRendering.bind(this),
+            checkIfModified: (cell) => {
+                return cell.checkMetadataIfModified();
+            },
+            getFoldingState: (cell) => {
+                return cell.metadataFoldingState;
+            },
+            updateFoldingState: (cell, state) => {
+                cell.metadataFoldingState = state;
+            },
+            unChangedLabel: 'Metadata',
+            changedLabel: 'Metadata changed',
+            prefix: 'metadata',
+            menuId: MenuId.NotebookDiffCellMetadataTitle
+        });
+        this._metadataLocalDisposable.add(this._metadataHeader);
+        this._metadataHeader.buildHeader();
+    }
+    _disposeOutput() {
+        this._hideOutputsRaw();
+        this._hideOutputsRenderer();
+        this._hideOutputsEmptyView();
+        this.cell.rawOutputHeight = 0;
+        this.cell.outputStatusHeight = 0;
+        this.templateData.outputHeaderContainer.style.display = 'none';
+        this.templateData.outputInfoContainer.style.display = 'none';
+        this._outputViewContainer = undefined;
+    }
+    _buildOutput() {
+        this.templateData.outputHeaderContainer.style.display = 'flex';
+        this.templateData.outputInfoContainer.style.display = 'block';
+        this._outputHeaderContainer = this.templateData.outputHeaderContainer;
+        this._outputInfoContainer = this.templateData.outputInfoContainer;
+        this._outputHeaderContainer.innerText = '';
+        this._outputInfoContainer.innerText = '';
+        if (this.cell.checkIfOutputsModified()) {
+            this._outputInfoContainer.classList.add('modified');
+        }
+        else {
+            this._outputInfoContainer.classList.remove('modified');
+        }
+        this._outputHeader = this.instantiationService.createInstance(PropertyHeader, this.cell, this._outputHeaderContainer, this.notebookEditor, {
+            updateInfoRendering: this.updateOutputRendering.bind(this),
+            checkIfModified: (cell) => {
+                return cell.checkIfOutputsModified();
+            },
+            getFoldingState: (cell) => {
+                return cell.outputFoldingState;
+            },
+            updateFoldingState: (cell, state) => {
+                cell.outputFoldingState = state;
+            },
+            unChangedLabel: 'Outputs',
+            changedLabel: 'Outputs changed',
+            prefix: 'output',
+            menuId: MenuId.NotebookDiffCellOutputsTitle
+        });
+        this._outputLocalDisposable.add(this._outputHeader);
+        this._outputHeader.buildHeader();
+    }
+    _buildOutputRendererContainer() {
+        if (!this._outputViewContainer) {
+            this._outputViewContainer = append(this._outputInfoContainer, $('.output-view-container'));
+            this._outputEmptyElement = append(this._outputViewContainer, $('.output-empty-view'));
+            this._outputEmptyElement.innerText = 'No outputs to render';
+            if (!this.cell.checkIfOutputsModified() && this.cell.modified.outputs.length === 0) {
+                this._outputEmptyElement.style.display = 'block';
+            }
+            else {
+                this._outputEmptyElement.style.display = 'none';
+            }
+            this.cell.layoutChange();
+            this._register(this.cell.modified.textModel.onDidChangeOutputs(() => {
+                if (!this.cell.checkIfOutputsModified() && this.cell.modified.outputs.length === 0) {
+                    this._outputEmptyElement.style.display = 'block';
+                }
+                else {
+                    this._outputEmptyElement.style.display = 'none';
+                }
+                this._decorate();
+            }));
+            this._outputLeftContainer = append(this._outputViewContainer, $('.output-view-container-left'));
+            this._outputRightContainer = append(this._outputViewContainer, $('.output-view-container-right'));
+            this._outputMetadataContainer = append(this._outputViewContainer, $('.output-view-container-metadata'));
+            const outputModified = this.cell.checkIfOutputsModified();
+            const outputMetadataChangeOnly = outputModified
+                && outputModified.kind === OutputComparison.Metadata
+                && this.cell.original.outputs.length === 1
+                && this.cell.modified.outputs.length === 1
+                && outputEqual(this.cell.original.outputs[0], this.cell.modified.outputs[0]) === OutputComparison.Metadata;
+            if (outputModified && !outputMetadataChangeOnly) {
+                const originalOutputRenderListener = this.notebookEditor.onDidDynamicOutputRendered(e => {
+                    if (( (e.cell.uri.toString())) === ( (this.cell.original.uri.toString())) && this.cell.checkIfOutputsModified()) {
+                        this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Original, this.cell.original.id, ['nb-cellDeleted'], []);
+                        originalOutputRenderListener.dispose();
+                    }
+                });
+                const modifiedOutputRenderListener = this.notebookEditor.onDidDynamicOutputRendered(e => {
+                    if (( (e.cell.uri.toString())) === ( (this.cell.modified.uri.toString())) && this.cell.checkIfOutputsModified()) {
+                        this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Modified, this.cell.modified.id, ['nb-cellAdded'], []);
+                        modifiedOutputRenderListener.dispose();
+                    }
+                });
+                this._register(originalOutputRenderListener);
+                this._register(modifiedOutputRenderListener);
+            }
+            this._outputLeftView = this.instantiationService.createInstance(OutputContainer, this.notebookEditor, this.notebookEditor.textModel, this.cell, this.cell.original, DiffSide.Original, this._outputLeftContainer);
+            this._outputLeftView.render();
+            this._register(this._outputLeftView);
+            this._outputRightView = this.instantiationService.createInstance(OutputContainer, this.notebookEditor, this.notebookEditor.textModel, this.cell, this.cell.modified, DiffSide.Modified, this._outputRightContainer);
+            this._outputRightView.render();
+            this._register(this._outputRightView);
+            if (outputModified && !outputMetadataChangeOnly) {
+                this._decorate();
+            }
+            if (outputMetadataChangeOnly) {
+                this._outputMetadataContainer.style.top = `${this.cell.layoutInfo.rawOutputHeight}px`;
+                this._outputMetadataEditor = this.instantiationService.createInstance(DiffEditorWidget, this._outputMetadataContainer, {
+                    ...fixedDiffEditorOptions,
+                    overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode(),
+                    readOnly: true,
+                    ignoreTrimWhitespace: false,
+                    automaticLayout: false,
+                    dimension: {
+                        height: OUTPUT_EDITOR_HEIGHT_MAGIC,
+                        width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true)
+                    }
+                }, {
+                    originalEditor: getOptimizedNestedCodeEditorWidgetOptions(),
+                    modifiedEditor: getOptimizedNestedCodeEditorWidgetOptions()
+                });
+                this._register(this._outputMetadataEditor);
+                const originalOutputMetadataSource = JSON.stringify(this.cell.original.outputs[0].metadata ?? {}, undefined, '\t');
+                const modifiedOutputMetadataSource = JSON.stringify(this.cell.modified.outputs[0].metadata ?? {}, undefined, '\t');
+                const mode = this.languageService.createById('json');
+                const originalModel = this.modelService.createModel(originalOutputMetadataSource, mode, undefined, true);
+                const modifiedModel = this.modelService.createModel(modifiedOutputMetadataSource, mode, undefined, true);
+                this._outputMetadataEditor.setModel({
+                    original: originalModel,
+                    modified: modifiedModel
+                });
+                this.cell.outputMetadataHeight = this._outputMetadataEditor.getContentHeight();
+                this._register(this._outputMetadataEditor.onDidContentSizeChange((e) => {
+                    this.cell.outputMetadataHeight = e.contentHeight;
+                }));
+            }
+        }
+        this._outputViewContainer.style.display = 'block';
+    }
+    _decorate() {
+        if (this.cell.checkIfOutputsModified()) {
+            this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Original, this.cell.original.id, ['nb-cellDeleted'], []);
+            this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Modified, this.cell.modified.id, ['nb-cellAdded'], []);
+        }
+        else {
+            this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Original, this.cell.original.id, [], ['nb-cellDeleted']);
+            this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Modified, this.cell.modified.id, [], ['nb-cellAdded']);
+        }
+    }
+    _showOutputsRenderer() {
+        if (this._outputViewContainer) {
+            this._outputViewContainer.style.display = 'block';
+            this._outputLeftView?.showOutputs();
+            this._outputRightView?.showOutputs();
+            this._outputMetadataEditor?.layout({
+                width: this._editor?.getViewWidth() || this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true),
+                height: this.cell.layoutInfo.outputMetadataHeight
+            });
+            this._decorate();
+        }
+    }
+    _hideOutputsRenderer() {
+        if (this._outputViewContainer) {
+            this._outputViewContainer.style.display = 'none';
+            this._outputLeftView?.hideOutputs();
+            this._outputRightView?.hideOutputs();
+        }
+    }
+    updateSourceEditor() {
+        this._cellHeaderContainer = this.templateData.cellHeaderContainer;
+        this._cellHeaderContainer.style.display = 'flex';
+        this._cellHeaderContainer.innerText = '';
+        const modifiedCell = this.cell.modified;
+        this._editorContainer = this.templateData.editorContainer;
+        this._editorContainer.classList.add('diff');
+        const renderSourceEditor = () => {
+            if (this.cell.cellFoldingState === PropertyFoldingState.Collapsed) {
+                this._editorContainer.style.display = 'none';
+                this.cell.editorHeight = 0;
+                return;
+            }
+            const lineCount = modifiedCell.textModel.textBuffer.getLineCount();
+            const lineHeight = this.notebookEditor.getLayoutInfo().fontInfo.lineHeight || 17;
+            const editorHeight = this.cell.layoutInfo.editorHeight !== 0 ? this.cell.layoutInfo.editorHeight : (lineCount * lineHeight) + fixedEditorPadding.top + fixedEditorPadding.bottom;
+            this._editorContainer.style.height = `${editorHeight}px`;
+            this._editorContainer.style.display = 'block';
+            if (this._editor) {
+                const contentHeight = this._editor.getContentHeight();
+                if (contentHeight >= 0) {
+                    this.cell.editorHeight = contentHeight;
+                }
+                return;
+            }
+            this._editor = this.templateData.sourceEditor;
+            if (lineCount === 1) {
+                this._editor.updateOptions({
+                    padding: fixedEditorPaddingSingleLineCells
+                });
+            }
+            this._editor.layout({
+                width: this.notebookEditor.getLayoutInfo().width - 2 * DIFF_CELL_MARGIN,
+                height: editorHeight
+            });
+            this._register(this._editor.onDidContentSizeChange((e) => {
+                if (this.cell.cellFoldingState === PropertyFoldingState.Expanded && e.contentHeightChanged && this.cell.layoutInfo.editorHeight !== e.contentHeight) {
+                    this.cell.editorHeight = e.contentHeight;
+                }
+            }));
+            this._initializeSourceDiffEditor();
+        };
+        this._cellHeader = this._register(this.instantiationService.createInstance(PropertyHeader, this.cell, this._cellHeaderContainer, this.notebookEditor, {
+            updateInfoRendering: () => renderSourceEditor(),
+            checkIfModified: (cell) => {
+                return cell.modified?.textModel.getTextBufferHash() !== cell.original?.textModel.getTextBufferHash() ? { reason: undefined } : false;
+            },
+            getFoldingState: (cell) => cell.cellFoldingState,
+            updateFoldingState: (cell, state) => cell.cellFoldingState = state,
+            unChangedLabel: 'Input',
+            changedLabel: 'Input changed',
+            prefix: 'input',
+            menuId: MenuId.NotebookDiffCellInputTitle
+        }));
+        this._cellHeader.buildHeader();
+        renderSourceEditor();
+        const scopedContextKeyService = this.contextKeyService.createScoped(this.templateData.inputToolbarContainer);
+        this._register(scopedContextKeyService);
+        const inputChanged = NOTEBOOK_DIFF_CELL_INPUT.bindTo(scopedContextKeyService);
+        inputChanged.set(this.cell.modified.textModel.getTextBufferHash() !== this.cell.original.textModel.getTextBufferHash());
+        const ignoreWhitespace = NOTEBOOK_DIFF_CELL_IGNORE_WHITESPACE.bindTo(scopedContextKeyService);
+        const ignore = this.textConfigurationService.getValue(this.cell.modified.uri, 'diffEditor.ignoreTrimWhitespace');
+        ignoreWhitespace.set(ignore);
+        this._toolbar = this.templateData.toolbar;
+        this._toolbar.context = {
+            cell: this.cell
+        };
+        const refreshToolbar = () => {
+            const ignore = this.textConfigurationService.getValue(this.cell.modified.uri, 'diffEditor.ignoreTrimWhitespace');
+            ignoreWhitespace.set(ignore);
+            const hasChanges = this.cell.modified.textModel.getTextBufferHash() !== this.cell.original.textModel.getTextBufferHash();
+            inputChanged.set(hasChanges);
+            if (hasChanges) {
+                const actions = [];
+                const menu = this.menuService.getMenuActions(MenuId.NotebookDiffCellInputTitle, scopedContextKeyService, { shouldForwardArgs: true });
+                createAndFillInActionBarActions(menu, actions);
+                this._toolbar.setActions(actions);
+            }
+            else {
+                this._toolbar.setActions([]);
+            }
+        };
+        this._register(this.cell.modified.textModel.onDidChangeContent(() => refreshToolbar()));
+        this._register(this.textConfigurationService.onDidChangeConfiguration(e => {
+            if (e.affectsConfiguration(this.cell.modified.uri, 'diffEditor') &&
+                ( (e.affectedKeys.has('diffEditor.ignoreTrimWhitespace')))) {
+                refreshToolbar();
+            }
+        }));
+        refreshToolbar();
+    }
+    async _initializeSourceDiffEditor() {
+        const originalCell = this.cell.original;
+        const modifiedCell = this.cell.modified;
+        const originalRef = await this.textModelService.createModelReference(originalCell.uri);
+        const modifiedRef = await this.textModelService.createModelReference(modifiedCell.uri);
+        if (this._isDisposed) {
+            return;
+        }
+        const textModel = originalRef.object.textEditorModel;
+        const modifiedTextModel = modifiedRef.object.textEditorModel;
+        this._register(originalRef);
+        this._register(modifiedRef);
+        this._editor.setModel({
+            original: textModel,
+            modified: modifiedTextModel,
+        });
+        const handleViewStateChange = () => {
+            this._editorViewStateChanged = true;
+        };
+        const handleScrollChange = (e) => {
+            if (e.scrollTopChanged || e.scrollLeftChanged) {
+                this._editorViewStateChanged = true;
+            }
+        };
+        this.updateEditorOptionsForWhitespace();
+        this._register(this._editor.getOriginalEditor().onDidChangeCursorSelection(handleViewStateChange));
+        this._register(this._editor.getOriginalEditor().onDidScrollChange(handleScrollChange));
+        this._register(this._editor.getModifiedEditor().onDidChangeCursorSelection(handleViewStateChange));
+        this._register(this._editor.getModifiedEditor().onDidScrollChange(handleScrollChange));
+        const editorViewState = this.cell.getSourceEditorViewState();
+        if (editorViewState) {
+            this._editor.restoreViewState(editorViewState);
+        }
+        const contentHeight = this._editor.getContentHeight();
+        this.cell.editorHeight = contentHeight;
+    }
+    updateEditorOptionsForWhitespace() {
+        const editor = this._editor;
+        if (!editor) {
+            return;
+        }
+        const uri = editor.getModel()?.modified.uri || editor.getModel()?.original.uri;
+        if (!uri) {
+            return;
+        }
+        const ignoreTrimWhitespace = this.textConfigurationService.getValue(uri, 'diffEditor.ignoreTrimWhitespace');
+        editor.updateOptions({ ignoreTrimWhitespace });
+        this._register(this.textConfigurationService.onDidChangeConfiguration(e => {
+            if (e.affectsConfiguration(uri, 'diffEditor') &&
+                ( (e.affectedKeys.has('diffEditor.ignoreTrimWhitespace')))) {
+                const ignoreTrimWhitespace = this.textConfigurationService.getValue(uri, 'diffEditor.ignoreTrimWhitespace');
+                editor.updateOptions({ ignoreTrimWhitespace });
+            }
+        }));
+    }
+    layout(state) {
+        scheduleAtNextAnimationFrame(getWindow(this._diffEditorContainer), () => {
+            if (state.editorHeight && this._editor) {
+                this._editorContainer.style.height = `${this.cell.layoutInfo.editorHeight}px`;
+                this._editor.layout({
+                    width: this._editor.getViewWidth(),
+                    height: this.cell.layoutInfo.editorHeight
+                });
+            }
+            if (state.outerWidth && this._editor) {
+                this._editorContainer.style.height = `${this.cell.layoutInfo.editorHeight}px`;
+                this._editor.layout();
+            }
+            if (state.metadataHeight || state.outerWidth) {
+                if (this._metadataEditorContainer) {
+                    this._metadataEditorContainer.style.height = `${this.cell.layoutInfo.metadataHeight}px`;
+                    this._metadataEditor?.layout({
+                        width: this._editor?.getViewWidth() || this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true),
+                        height: this.cell.layoutInfo.metadataHeight
+                    });
+                }
+            }
+            if (state.outputTotalHeight || state.outerWidth) {
+                if (this._outputEditorContainer) {
+                    this._outputEditorContainer.style.height = `${this.cell.layoutInfo.outputTotalHeight}px`;
+                    this._outputEditor?.layout({
+                        width: this._editor?.getViewWidth() || this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true),
+                        height: this.cell.layoutInfo.outputTotalHeight
+                    });
+                }
+                if (this._outputMetadataContainer) {
+                    this._outputMetadataContainer.style.height = `${this.cell.layoutInfo.outputMetadataHeight}px`;
+                    this._outputMetadataContainer.style.top = `${this.cell.layoutInfo.outputTotalHeight - this.cell.layoutInfo.outputMetadataHeight}px`;
+                    this._outputMetadataEditor?.layout({
+                        width: this._editor?.getViewWidth() || this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true),
+                        height: this.cell.layoutInfo.outputMetadataHeight
+                    });
+                }
+            }
+            this.layoutNotebookCell();
+        });
+    }
+    dispose() {
+        if (this._editor) {
+            this._editor.setModel(null);
+        }
+        if (this._editor && this._editorViewStateChanged) {
+            this.cell.saveSpirceEditorViewState(this._editor.saveViewState());
+        }
+        super.dispose();
+    }
+};
+ModifiedElement = ( (__decorate([
+    ( (__param(3, IInstantiationService))),
+    ( (__param(4, ILanguageService))),
+    ( (__param(5, IModelService))),
+    ( (__param(6, ITextModelService))),
+    ( (__param(7, IContextMenuService))),
+    ( (__param(8, IKeybindingService))),
+    ( (__param(9, INotificationService))),
+    ( (__param(10, IMenuService))),
+    ( (__param(11, IContextKeyService))),
+    ( (__param(12, IConfigurationService))),
+    ( (__param(13, ITextResourceConfigurationService)))
+], ModifiedElement)));
+class CollapsedCellOverlayWidget extends Disposable {
+    constructor(container) {
+        super();
+        this.container = container;
+        this._nodes = h('div.diff-hidden-cells', [
+            h('div.center@content', { style: { display: 'flex' } }, [
+                $('a', {
+                    title: ( localize(11475, 'Show Unchanged Cells')),
+                    role: 'button',
+                    onclick: () => { this._action.fire(); }
+                }, ...renderLabelWithIcons('$(unfold)'))
+            ]),
+        ]);
+        this._action = this._register(( (new Emitter())));
+        this.onAction = this._action.event;
+        this._nodes.root.style.display = 'none';
+        container.appendChild(this._nodes.root);
+    }
+    show() {
+        this._nodes.root.style.display = 'block';
+    }
+    hide() {
+        this._nodes.root.style.display = 'none';
+    }
+    dispose() {
+        this.hide();
+        this.container.removeChild(this._nodes.root);
+        reset(this._nodes.root);
+        super.dispose();
+    }
+}
+class UnchangedCellOverlayWidget extends Disposable {
+    constructor(container) {
+        super();
+        this.container = container;
+        this._nodes = h('div.diff-hidden-cells', [
+            h('div.center@content', { style: { display: 'flex' } }, [
+                $('a', {
+                    title: ( localize(11476, 'Hide Unchanged Cells')),
+                    role: 'button',
+                    onclick: () => { this._action.fire(); }
+                }, ...renderLabelWithIcons('$(fold)')),
+            ]),
+        ]);
+        this._action = this._register(( (new Emitter())));
+        this.onAction = this._action.event;
+        this._nodes.root.style.display = 'none';
+        container.appendChild(this._nodes.root);
+    }
+    show() {
+        this._nodes.root.style.display = 'block';
+    }
+    hide() {
+        this._nodes.root.style.display = 'none';
+    }
+    dispose() {
+        this.hide();
+        this.container.removeChild(this._nodes.root);
+        reset(this._nodes.root);
+        super.dispose();
+    }
+}
+export { CellDiffPlaceholderElement, CollapsedCellOverlayWidget, DeletedElement, InsertElement, ModifiedElement, UnchangedCellOverlayWidget, getOptimizedNestedCodeEditorWidgetOptions };