@codingame/monaco-vscode-api 9.0.3 → 10.0.1

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

@@ -1,14 +1,14 @@
 import { __decorate, __param } from '../../../../../../../../external/tslib/tslib.es6.js';
-import { addDisposableListener, append, $, scheduleAtNextAnimationFrame, getWindow, reset, h } from '../../../../../base/browser/dom.js';
+import { addDisposableListener, scheduleAtNextAnimationFrame, getWindow, append, $, 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 { NotebookDocumentMetadataViewModel, PropertyFoldingState, outputEqual, OUTPUT_EDITOR_HEIGHT_MAGIC, SideBySideDiffElementViewModel, getFormattedOutputJSON } from './diffElementViewModel.js';
+import { NOTEBOOK_DIFF_METADATA, DiffSide, NOTEBOOK_DIFF_CELL_PROPERTY, NOTEBOOK_DIFF_CELL_PROPERTY_EXPANDED, DIFF_CELL_MARGIN, NOTEBOOK_DIFF_CELL_INPUT, NOTEBOOK_DIFF_CELL_IGNORE_WHITESPACE } 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 { 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';
@@ -32,14 +32,15 @@ import { IConfigurationService } from '../../../../../platform/configuration/com
 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 { fixedDiffEditorOptions, getEditorPadding, fixedEditorOptions } from './diffCellEditorOptions.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';
+import { getFormattedMetadataJSON } from '../../common/model/notebookCellTextModel.js';
+import { getUnchangedRegionSettings } from './unchangedEditorRegions.js';
 function getOptimizedNestedCodeEditorWidgetOptions() {
     return {
         isSimpleWidget: false,
@@ -58,8 +59,8 @@ class CellDiffPlaceholderElement extends Disposable {
         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));
+            ( localize(11616, '{0} hidden cell', placeholder.hiddenCells.length)) :
+            ( localize(11617, '{0} hidden cells', placeholder.hiddenCells.length));
         templateData.placeholder.innerText = text;
         this._register(addDisposableListener(templateData.placeholder, 'dblclick', (e) => {
             if (e.button !== 0) {
@@ -90,28 +91,13 @@ let PropertyHeader = class PropertyHeader extends Disposable {
         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, {
+        this._toolbar = this._register(( (new WorkbenchToolBar(cellToolbarContainer, {
             actionViewItemProvider: (action, options) => {
                 if (action instanceof MenuItemAction) {
                     const item = ( (new CodiconActionViewItem(
@@ -128,49 +114,38 @@ let PropertyHeader = class PropertyHeader extends Disposable {
                 }
                 return undefined;
             }
-        }, this.menuService, this.contextKeyService, this.contextMenuService, this.keybindingService, this.commandService, this.telemetryService)));
-        this._register(this._toolbar);
-        this._toolbar.context = {
-            cell: this.cell
-        };
+        }, this.menuService, this.contextKeyService, this.contextMenuService, this.keybindingService, this.commandService, this.telemetryService))));
+        this._toolbar.context = this.cell;
         const scopedContextKeyService = this.contextKeyService.createScoped(cellToolbarContainer);
         this._register(scopedContextKeyService);
-        const propertyChanged = NOTEBOOK_DIFF_CELL_PROPERTY.bindTo(scopedContextKeyService);
-        propertyChanged.set(!!metadataChanged);
+        this._propertyChanged = NOTEBOOK_DIFF_CELL_PROPERTY.bindTo(scopedContextKeyService);
         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._menu = this._register(this.menuService.createMenu(this.accessor.menuId, scopedContextKeyService));
+        this._register(this._menu.onDidChange(() => this.updateMenu()));
         this._register(this.notebookEditor.onMouseUp(e => {
-            if (!e.event.target) {
+            if (!e.event.target || e.target !== this.cell) {
                 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);
-                }
+                const oldFoldingState = this.accessor.getFoldingState();
+                this.accessor.updateFoldingState(oldFoldingState === PropertyFoldingState.Expanded ? PropertyFoldingState.Collapsed : PropertyFoldingState.Expanded);
+                this._updateFoldingIcon();
+                this.accessor.updateInfoRendering(this.cell.renderOutput);
             }
-            return;
         }));
-        this._updateFoldingIcon();
+        this.refresh();
         this.accessor.updateInfoRendering(this.cell.renderOutput);
     }
     refresh() {
-        const metadataChanged = this.accessor.checkIfModified(this.cell);
+        this.updateMenu();
+        this._updateFoldingIcon();
+        const metadataChanged = this.accessor.checkIfModified();
+        if (this._propertyChanged) {
+            this._propertyChanged.set(!!metadataChanged);
+        }
         if (metadataChanged) {
             this._statusSpan.textContent = this.accessor.changedLabel;
             this._statusSpan.style.fontWeight = 'bold';
@@ -178,20 +153,27 @@ let PropertyHeader = class PropertyHeader extends Disposable {
                 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');
+        }
+    }
+    updateMenu() {
+        const metadataChanged = this.accessor.checkIfModified();
+        if (metadataChanged) {
+            const actions = [];
+            createAndFillInActionBarActions(this._menu, { shouldForwardArgs: true }, actions);
+            this._toolbar.setActions(actions);
+        }
+        else {
             this._toolbar.setActions([]);
         }
     }
     _updateFoldingIcon() {
-        if (this.accessor.getFoldingState(this.cell) === PropertyFoldingState.Collapsed) {
+        if (this.accessor.getFoldingState() === PropertyFoldingState.Collapsed) {
             reset(this._foldingIndicator, renderIcon(collapsedIcon));
             this._propertyExpanded?.set(false);
         }
@@ -212,6 +194,222 @@ PropertyHeader = ( (__decorate([
     ( (__param(11, ITelemetryService))),
     ( (__param(12, IAccessibilityService)))
 ], PropertyHeader)));
+let NotebookDocumentMetadataElement = class NotebookDocumentMetadataElement extends Disposable {
+    constructor(notebookEditor, viewModel, templateData, instantiationService, textModelService, menuService, contextKeyService, textConfigurationService, configurationService) {
+        super();
+        this.notebookEditor = notebookEditor;
+        this.viewModel = viewModel;
+        this.templateData = templateData;
+        this.instantiationService = instantiationService;
+        this.textModelService = textModelService;
+        this.menuService = menuService;
+        this.contextKeyService = contextKeyService;
+        this.textConfigurationService = textConfigurationService;
+        this.configurationService = configurationService;
+        this._editor = templateData.sourceEditor;
+        this._cellHeaderContainer = this.templateData.cellHeaderContainer;
+        this._editorContainer = this.templateData.editorContainer;
+        this._diffEditorContainer = this.templateData.diffEditorContainer;
+        this._editorViewStateChanged = false;
+        this._register(viewModel.onDidLayoutChange(e => {
+            this.layout(e);
+            this.updateBorders();
+        }));
+        this.buildBody();
+        this.updateBorders();
+    }
+    buildBody() {
+        const body = this.templateData.body;
+        body.classList.remove('full');
+        body.classList.add('full');
+        this.updateSourceEditor();
+        if (this.viewModel instanceof NotebookDocumentMetadataViewModel) {
+            this._register(this.viewModel.modifiedMetadata.onDidChange(e => {
+                this._cellHeader.refresh();
+            }));
+        }
+    }
+    layoutNotebookCell() {
+        this.notebookEditor.layoutNotebookCell(this.viewModel, this.viewModel.layoutInfo.totalHeight);
+    }
+    updateBorders() {
+        this.templateData.leftBorder.style.height = `${this.viewModel.layoutInfo.totalHeight - 32}px`;
+        this.templateData.rightBorder.style.height = `${this.viewModel.layoutInfo.totalHeight - 32}px`;
+        this.templateData.bottomBorder.style.top = `${this.viewModel.layoutInfo.totalHeight - 32}px`;
+    }
+    updateSourceEditor() {
+        this._cellHeaderContainer.style.display = 'flex';
+        this._cellHeaderContainer.innerText = '';
+        this._editorContainer.classList.add('diff');
+        const updateSourceEditor = () => {
+            if (this.viewModel.cellFoldingState === PropertyFoldingState.Collapsed) {
+                this._editorContainer.style.display = 'none';
+                this.viewModel.editorHeight = 0;
+                return;
+            }
+            const lineHeight = this.notebookEditor.getLayoutInfo().fontInfo.lineHeight || 17;
+            const editorHeight = this.viewModel.layoutInfo.editorHeight !== 0 ? this.viewModel.layoutInfo.editorHeight : this.viewModel.computeInputEditorHeight(lineHeight);
+            this._editorContainer.style.height = `${editorHeight}px`;
+            this._editorContainer.style.display = 'block';
+            const contentHeight = this._editor.getContentHeight();
+            if (contentHeight >= 0) {
+                this.viewModel.editorHeight = contentHeight;
+            }
+            return editorHeight;
+        };
+        const renderSourceEditor = () => {
+            const editorHeight = updateSourceEditor();
+            if (!editorHeight) {
+                return;
+            }
+            const lineCount = this.viewModel.modifiedMetadata.textBuffer.getLineCount();
+            const options = {
+                padding: getEditorPadding(lineCount)
+            };
+            const unchangedRegions = this._register(getUnchangedRegionSettings(this.configurationService));
+            if (unchangedRegions.options.enabled) {
+                options.hideUnchangedRegions = unchangedRegions.options;
+            }
+            this._editor.updateOptions(options);
+            this._register(unchangedRegions.onDidChangeEnablement(() => {
+                options.hideUnchangedRegions = unchangedRegions.options;
+                this._editor.updateOptions(options);
+            }));
+            this._editor.layout({
+                width: this.notebookEditor.getLayoutInfo().width - 2 * DIFF_CELL_MARGIN,
+                height: editorHeight
+            });
+            this._register(this._editor.onDidContentSizeChange((e) => {
+                if (this.viewModel.cellFoldingState === PropertyFoldingState.Expanded && e.contentHeightChanged && this.viewModel.layoutInfo.editorHeight !== e.contentHeight) {
+                    this.viewModel.editorHeight = e.contentHeight;
+                }
+            }));
+            this._initializeSourceDiffEditor();
+        };
+        this._cellHeader = this._register(this.instantiationService.createInstance(PropertyHeader, this.viewModel, this._cellHeaderContainer, this.notebookEditor, {
+            updateInfoRendering: () => renderSourceEditor(),
+            checkIfModified: () => {
+                return this.viewModel.originalMetadata.getHash() !== this.viewModel.modifiedMetadata.getHash() ? { reason: undefined } : false;
+            },
+            getFoldingState: () => this.viewModel.cellFoldingState,
+            updateFoldingState: (state) => this.viewModel.cellFoldingState = state,
+            unChangedLabel: 'Notebook Metadata',
+            changedLabel: 'Notebook Metadata changed',
+            prefix: 'metadata',
+            menuId: MenuId.NotebookDiffDocumentMetadata
+        }));
+        this._cellHeader.buildHeader();
+        renderSourceEditor();
+        const scopedContextKeyService = this.contextKeyService.createScoped(this.templateData.inputToolbarContainer);
+        this._register(scopedContextKeyService);
+        const inputChanged = NOTEBOOK_DIFF_METADATA.bindTo(scopedContextKeyService);
+        inputChanged.set(this.viewModel.originalMetadata.getHash() !== this.viewModel.modifiedMetadata.getHash());
+        this._toolbar = this.templateData.toolbar;
+        this._toolbar.context = this.viewModel;
+        const refreshToolbar = () => {
+            const hasChanges = this.viewModel.originalMetadata.getHash() !== this.viewModel.modifiedMetadata.getHash();
+            inputChanged.set(hasChanges);
+            if (hasChanges) {
+                const actions = [];
+                const menu = this.menuService.getMenuActions(MenuId.NotebookDiffDocumentMetadata, scopedContextKeyService, { shouldForwardArgs: true });
+                createAndFillInActionBarActions(menu, actions);
+                this._toolbar.setActions(actions);
+            }
+            else {
+                this._toolbar.setActions([]);
+            }
+        };
+        this._register(this.viewModel.modifiedMetadata.onDidChange(() => {
+            refreshToolbar();
+        }));
+        refreshToolbar();
+    }
+    async _initializeSourceDiffEditor() {
+        const [originalRef, modifiedRef] = await Promise.all([
+            this.textModelService.createModelReference(this.viewModel.originalMetadata.uri),
+            this.textModelService.createModelReference(this.viewModel.modifiedMetadata.uri)
+        ]);
+        if (this._store.isDisposed) {
+            originalRef.dispose();
+            modifiedRef.dispose();
+            return;
+        }
+        this._register(originalRef);
+        this._register(modifiedRef);
+        const vm = this._register(this._editor.createViewModel({
+            original: originalRef.object.textEditorModel,
+            modified: modifiedRef.object.textEditorModel,
+        }));
+        await vm.waitForDiff();
+        this._editor.setModel(vm);
+        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.viewModel.getSourceEditorViewState();
+        if (editorViewState) {
+            this._editor.restoreViewState(editorViewState);
+        }
+        const contentHeight = this._editor.getContentHeight();
+        this.viewModel.editorHeight = contentHeight;
+    }
+    updateEditorOptionsForWhitespace() {
+        const editor = this._editor;
+        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._editorContainer.style.height = `${this.viewModel.layoutInfo.editorHeight}px`;
+                this._editor.layout({
+                    width: this._editor.getViewWidth(),
+                    height: this.viewModel.layoutInfo.editorHeight
+                });
+            }
+            if (state.outerWidth) {
+                this._editorContainer.style.height = `${this.viewModel.layoutInfo.editorHeight}px`;
+                this._editor.layout();
+            }
+            this.layoutNotebookCell();
+        });
+    }
+    dispose() {
+        this._editor.setModel(null);
+        if (this._editorViewStateChanged) {
+            this.viewModel.saveSpirceEditorViewState(this._editor.saveViewState());
+        }
+        super.dispose();
+    }
+};
+NotebookDocumentMetadataElement = ( (__decorate([
+    ( (__param(3, IInstantiationService))),
+    ( (__param(4, ITextModelService))),
+    ( (__param(5, IMenuService))),
+    ( (__param(6, IContextKeyService))),
+    ( (__param(7, ITextResourceConfigurationService))),
+    ( (__param(8, IConfigurationService)))
+], NotebookDocumentMetadataElement)));
 class AbstractElementRenderer extends Disposable {
     constructor(notebookEditor, cell, templateData, style, instantiationService, languageService, modelService, textModelService, contextMenuService, keybindingService, notificationService, menuService, contextKeyService, configurationService, textConfigurationService) {
         super();
@@ -307,6 +505,7 @@ class AbstractElementRenderer extends Disposable {
                     this._outputLocalDisposable.clear();
                     if (this._ignoreOutputs) {
                         this._disposeOutput();
+                        this.cell.layoutChange();
                     }
                     else {
                         this.cell.outputStatusHeight = 25;
@@ -408,7 +607,7 @@ class AbstractElementRenderer extends Disposable {
                 return;
             }
             this.notebookEditor.textModel.applyEdits([
-                { editType: CellEditType.Metadata, index, metadata: result }
+                { editType: 3 , index, metadata: result }
             ], true, undefined, () => undefined, undefined, true);
         }
         catch {
@@ -432,17 +631,30 @@ class AbstractElementRenderer extends Disposable {
                 originalEditor: getOptimizedNestedCodeEditorWidgetOptions(),
                 modifiedEditor: getOptimizedNestedCodeEditorWidgetOptions()
             });
+            const unchangedRegions = this._register(getUnchangedRegionSettings(this.configurationService));
+            if (unchangedRegions.options.enabled) {
+                this._metadataEditor.updateOptions({ hideUnchangedRegions: unchangedRegions.options });
+            }
+            this._metadataEditorDisposeStore.add(unchangedRegions.onDidChangeEnablement(() => {
+                if (this._metadataEditor) {
+                    this._metadataEditor.updateOptions({ hideUnchangedRegions: unchangedRegions.options });
+                }
+            }));
             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({
+            const [originalMetadataModel, modifiedMetadataModel] = await Promise.all([
+                this.textModelService.createModelReference(CellUri.generateCellPropertyUri(this.cell.originalDocument.uri, this.cell.original.handle, Schemas.vscodeNotebookCellMetadata)),
+                this.textModelService.createModelReference(CellUri.generateCellPropertyUri(this.cell.modifiedDocument.uri, this.cell.modified.handle, Schemas.vscodeNotebookCellMetadata))
+            ]);
+            this._metadataEditorDisposeStore.add(originalMetadataModel);
+            this._metadataEditorDisposeStore.add(modifiedMetadataModel);
+            const vm = this._metadataEditor.createViewModel({
                 original: originalMetadataModel.object.textEditorModel,
                 modified: modifiedMetadataModel.object.textEditorModel
             });
-            this._metadataEditorDisposeStore.add(originalMetadataModel);
-            this._metadataEditorDisposeStore.add(modifiedMetadataModel);
+            await vm.waitForDiff();
+            this._metadataEditor.setModel(vm);
             this.cell.metadataHeight = this._metadataEditor.getContentHeight();
             this._metadataEditorDisposeStore.add(this._metadataEditor.onDidContentSizeChange((e) => {
                 if (e.contentHeightChanged && this.cell.metadataFoldingState === PropertyFoldingState.Expanded) {
@@ -461,7 +673,7 @@ class AbstractElementRenderer extends Disposable {
                 if (respondingToContentChange) {
                     return;
                 }
-                const modifiedMetadataSource = getFormattedMetadataJSON(this.notebookEditor.textModel, this.cell.modified?.metadata || {}, this.cell.modified?.language);
+                const modifiedMetadataSource = getFormattedMetadataJSON(this.notebookEditor.textModel?.transientOptions.transientCellMetadata, this.cell.modified?.metadata || {}, this.cell.modified?.language);
                 modifiedMetadataModel.object.textEditorModel.setValue(modifiedMetadataSource);
             }));
             return;
@@ -479,7 +691,7 @@ class AbstractElementRenderer extends Disposable {
             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'
+            const originalMetadataSource = getFormattedMetadataJSON(this.notebookEditor.textModel?.transientOptions.transientCellMetadata, this.cell.type === 'insert'
                 ? this.cell.modified.metadata || {}
                 : this.cell.original.metadata || {});
             const uri = this.cell.type === 'insert'
@@ -523,7 +735,7 @@ class AbstractElementRenderer extends Disposable {
                         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
+                    accessibilityVerbose: this.configurationService.getValue("accessibility.verbosity.diffEditor" ) ?? false
                 }, {
                     originalEditor: getOptimizedNestedCodeEditorWidgetOptions(),
                     modifiedEditor: getOptimizedNestedCodeEditorWidgetOptions()
@@ -562,8 +774,8 @@ class AbstractElementRenderer extends Disposable {
         const originaloutputSource = getFormattedOutputJSON(this.notebookEditor.textModel.transientOptions.transientOutputs
             ? []
             : this.cell.type === 'insert'
-                ? this.cell.modified.outputs || []
-                : this.cell.original.outputs || []);
+                ? 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);
@@ -678,9 +890,8 @@ class SingleSideDiffElement extends AbstractElementRenderer {
                 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;
+            const editorHeight = this.cell.computeInputEditorHeight(lineHeight);
             this._editorContainer.style.height = `${editorHeight}px`;
             this._editorContainer.style.display = 'block';
             if (this._editor) {
@@ -706,9 +917,9 @@ class SingleSideDiffElement extends AbstractElementRenderer {
         };
         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,
+            checkIfModified: () => ({ reason: undefined }),
+            getFoldingState: () => this.cell.cellFoldingState,
+            updateFoldingState: (state) => this.cell.cellFoldingState = state,
             unChangedLabel: 'Input',
             changedLabel: 'Input',
             prefix: 'input',
@@ -757,14 +968,14 @@ class SingleSideDiffElement extends AbstractElementRenderer {
         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();
+            checkIfModified: () => {
+                return this.cell.checkMetadataIfModified();
             },
-            getFoldingState: (cell) => {
-                return cell.metadataFoldingState;
+            getFoldingState: () => {
+                return this.cell.metadataFoldingState;
             },
-            updateFoldingState: (cell, state) => {
-                cell.metadataFoldingState = state;
+            updateFoldingState: (state) => {
+                this.cell.metadataFoldingState = state;
             },
             unChangedLabel: 'Metadata',
             changedLabel: 'Metadata changed',
@@ -783,14 +994,14 @@ class SingleSideDiffElement extends AbstractElementRenderer {
         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();
+            checkIfModified: () => {
+                return this.cell.checkIfOutputsModified();
             },
-            getFoldingState: (cell) => {
-                return cell.outputFoldingState;
+            getFoldingState: () => {
+                return this.cell.outputFoldingState;
             },
-            updateFoldingState: (cell, state) => {
-                cell.outputFoldingState = state;
+            updateFoldingState: (state) => {
+                this.cell.outputFoldingState = state;
             },
             unChangedLabel: 'Outputs',
             changedLabel: 'Outputs changed',
@@ -805,6 +1016,7 @@ class SingleSideDiffElement extends AbstractElementRenderer {
         this._hideOutputsRenderer();
         this._hideOutputsEmptyView();
         this.cell.rawOutputHeight = 0;
+        this.cell.outputMetadataHeight = 0;
         this.cell.outputStatusHeight = 0;
         this.templateData.outputHeaderContainer.style.display = 'none';
         this.templateData.outputInfoContainer.style.display = 'none';
@@ -862,7 +1074,7 @@ let DeletedElement = class DeletedElement extends SingleSideDiffElement {
             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) {
+            if (!this.cell.original?.outputs.length) {
                 this._outputEmptyElement.style.display = 'block';
             }
             else {
@@ -937,7 +1149,7 @@ let InsertElement = class InsertElement extends SingleSideDiffElement {
             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) {
+            if (!this.cell.modified?.outputs.length) {
                 this._outputEmptyElement.style.display = 'block';
             }
             else {
@@ -1062,14 +1274,14 @@ let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
         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();
+            checkIfModified: () => {
+                return this.cell.checkMetadataIfModified();
             },
-            getFoldingState: (cell) => {
-                return cell.metadataFoldingState;
+            getFoldingState: () => {
+                return this.cell.metadataFoldingState;
             },
-            updateFoldingState: (cell, state) => {
-                cell.metadataFoldingState = state;
+            updateFoldingState: (state) => {
+                this.cell.metadataFoldingState = state;
             },
             unChangedLabel: 'Metadata',
             changedLabel: 'Metadata changed',
@@ -1084,6 +1296,7 @@ let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
         this._hideOutputsRenderer();
         this._hideOutputsEmptyView();
         this.cell.rawOutputHeight = 0;
+        this.cell.outputMetadataHeight = 0;
         this.cell.outputStatusHeight = 0;
         this.templateData.outputHeaderContainer.style.display = 'none';
         this.templateData.outputInfoContainer.style.display = 'none';
@@ -1104,14 +1317,14 @@ let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
         }
         this._outputHeader = this.instantiationService.createInstance(PropertyHeader, this.cell, this._outputHeaderContainer, this.notebookEditor, {
             updateInfoRendering: this.updateOutputRendering.bind(this),
-            checkIfModified: (cell) => {
-                return cell.checkIfOutputsModified();
+            checkIfModified: () => {
+                return this.cell.checkIfOutputsModified();
             },
-            getFoldingState: (cell) => {
-                return cell.outputFoldingState;
+            getFoldingState: () => {
+                return this.cell.outputFoldingState;
             },
-            updateFoldingState: (cell, state) => {
-                cell.outputFoldingState = state;
+            updateFoldingState: (state) => {
+                this.cell.outputFoldingState = state;
             },
             unChangedLabel: 'Outputs',
             changedLabel: 'Outputs changed',
@@ -1147,10 +1360,10 @@ let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
             this._outputMetadataContainer = append(this._outputViewContainer, $('.output-view-container-metadata'));
             const outputModified = this.cell.checkIfOutputsModified();
             const outputMetadataChangeOnly = outputModified
-                && outputModified.kind === OutputComparison.Metadata
+                && outputModified.kind === 1
                 && 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;
+                && outputEqual(this.cell.original.outputs[0], this.cell.modified.outputs[0]) === 1 ;
             if (outputModified && !outputMetadataChangeOnly) {
                 const originalOutputRenderListener = this.notebookEditor.onDidDynamicOutputRendered(e => {
                     if (( (e.cell.uri.toString())) === ( (this.cell.original.uri.toString())) && this.cell.checkIfOutputsModified()) {
@@ -1254,7 +1467,7 @@ let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
             }
             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;
+            const editorHeight = this.cell.layoutInfo.editorHeight !== 0 ? this.cell.layoutInfo.editorHeight : this.cell.computeInputEditorHeight(lineHeight);
             this._editorContainer.style.height = `${editorHeight}px`;
             this._editorContainer.style.display = 'block';
             if (this._editor) {
@@ -1265,11 +1478,18 @@ let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
                 return;
             }
             this._editor = this.templateData.sourceEditor;
-            if (lineCount === 1) {
-                this._editor.updateOptions({
-                    padding: fixedEditorPaddingSingleLineCells
-                });
+            const options = {
+                padding: getEditorPadding(lineCount)
+            };
+            const unchangedRegions = this._register(getUnchangedRegionSettings(this.configurationService));
+            if (unchangedRegions.options.enabled) {
+                options.hideUnchangedRegions = unchangedRegions.options;
             }
+            this._editor.updateOptions(options);
+            this._register(unchangedRegions.onDidChangeEnablement(() => {
+                options.hideUnchangedRegions = unchangedRegions.options;
+                this._editor?.updateOptions(options);
+            }));
             this._editor.layout({
                 width: this.notebookEditor.getLayoutInfo().width - 2 * DIFF_CELL_MARGIN,
                 height: editorHeight
@@ -1283,11 +1503,11 @@ let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
         };
         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;
+            checkIfModified: () => {
+                return this.cell.modified?.textModel.getTextBufferHash() !== this.cell.original?.textModel.getTextBufferHash() ? { reason: undefined } : false;
             },
-            getFoldingState: (cell) => cell.cellFoldingState,
-            updateFoldingState: (cell, state) => cell.cellFoldingState = state,
+            getFoldingState: () => this.cell.cellFoldingState,
+            updateFoldingState: (state) => this.cell.cellFoldingState = state,
             unChangedLabel: 'Input',
             changedLabel: 'Input changed',
             prefix: 'input',
@@ -1303,9 +1523,7 @@ let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
         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
-        };
+        this._toolbar.context = this.cell;
         const refreshToolbar = () => {
             const ignore = this.textConfigurationService.getValue(this.cell.modified.uri, 'diffEditor.ignoreTrimWhitespace');
             ignoreWhitespace.set(ignore);
@@ -1331,21 +1549,23 @@ let ModifiedElement = class ModifiedElement extends AbstractElementRenderer {
         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);
+        const [originalRef, modifiedRef] = await Promise.all([
+            this.textModelService.createModelReference(this.cell.original.uri),
+            this.textModelService.createModelReference(this.cell.modified.uri)
+        ]);
+        this._register(originalRef);
+        this._register(modifiedRef);
         if (this._isDisposed) {
+            originalRef.dispose();
+            modifiedRef.dispose();
             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 vm = this._register(this._editor.createViewModel({
+            original: originalRef.object.textEditorModel,
+            modified: modifiedRef.object.textEditorModel,
+        }));
+        await vm.waitForDiff();
+        this._editor.setModel(vm);
         const handleViewStateChange = () => {
             this._editorViewStateChanged = true;
         };
@@ -1457,7 +1677,7 @@ class CollapsedCellOverlayWidget extends Disposable {
         this._nodes = h('div.diff-hidden-cells', [
             h('div.center@content', { style: { display: 'flex' } }, [
                 $('a', {
-                    title: ( localize(11475, 'Show Unchanged Cells')),
+                    title: ( localize(11618, 'Show Unchanged Cells')),
                     role: 'button',
                     onclick: () => { this._action.fire(); }
                 }, ...renderLabelWithIcons('$(unfold)'))
@@ -1488,7 +1708,7 @@ class UnchangedCellOverlayWidget extends Disposable {
         this._nodes = h('div.diff-hidden-cells', [
             h('div.center@content', { style: { display: 'flex' } }, [
                 $('a', {
-                    title: ( localize(11476, 'Hide Unchanged Cells')),
+                    title: ( localize(11619, 'Hide Unchanged Cells')),
                     role: 'button',
                     onclick: () => { this._action.fire(); }
                 }, ...renderLabelWithIcons('$(fold)')),
@@ -1512,4 +1732,4 @@ class UnchangedCellOverlayWidget extends Disposable {
         super.dispose();
     }
 }
-export { CellDiffPlaceholderElement, CollapsedCellOverlayWidget, DeletedElement, InsertElement, ModifiedElement, UnchangedCellOverlayWidget, getOptimizedNestedCodeEditorWidgetOptions };
+export { CellDiffPlaceholderElement, CollapsedCellOverlayWidget, DeletedElement, InsertElement, ModifiedElement, NotebookDocumentMetadataElement, UnchangedCellOverlayWidget, getOptimizedNestedCodeEditorWidgetOptions };