@codingame/monaco-vscode-api 6.0.3 → 7.0.0

package/vscode/src/vs/editor/browser/observableCodeEditor.js

@@ -0,0 +1,230 @@
+import { equalsIfDefined, itemsEquals } from '../../base/common/equals.js';
+import { Disposable, toDisposable, DisposableStore } from '../../base/common/lifecycle.js';
+import { TransactionImpl, observableValue } from '../../base/common/observableInternal/base.js';
+import { derivedOpts, derivedWithSetter, derived } from '../../base/common/observableInternal/derived.js';
+import { autorunOpts, autorun, autorunWithStoreHandleChanges } from '../../base/common/observableInternal/autorun.js';
+import { observableFromEvent, observableSignal } from '../../base/common/observableInternal/utils.js';
+import '../../base/common/cancellation.js';
+import { observableValueOpts } from '../../base/common/observableInternal/api.js';
+import { EditorOption } from '../common/config/editorOptions.js';
+import { Position } from '../common/core/position.js';
+import { Selection } from '../common/core/selection.js';
+function observableCodeEditor(editor) {
+    return ObservableCodeEditor.get(editor);
+}
+class ObservableCodeEditor extends Disposable {
+    static { this._map = ( new Map()); }
+    static get(editor) {
+        let result = ObservableCodeEditor._map.get(editor);
+        if (!result) {
+            result = ( new ObservableCodeEditor(editor));
+            ObservableCodeEditor._map.set(editor, result);
+            const d = editor.onDidDispose(() => {
+                const item = ObservableCodeEditor._map.get(editor);
+                if (item) {
+                    ObservableCodeEditor._map.delete(editor);
+                    item.dispose();
+                    d.dispose();
+                }
+            });
+        }
+        return result;
+    }
+    _beginUpdate() {
+        this._updateCounter++;
+        if (this._updateCounter === 1) {
+            this._currentTransaction = ( new TransactionImpl(() => {
+            }));
+        }
+    }
+    _endUpdate() {
+        this._updateCounter--;
+        if (this._updateCounter === 0) {
+            const t = this._currentTransaction;
+            this._currentTransaction = undefined;
+            t.finish();
+        }
+    }
+    constructor(editor) {
+        super();
+        this.editor = editor;
+        this._updateCounter = 0;
+        this._currentTransaction = undefined;
+        this._model = observableValue(this, this.editor.getModel());
+        this.model = this._model;
+        this.isReadonly = observableFromEvent(this, this.editor.onDidChangeConfiguration, () => this.editor.getOption(EditorOption.readOnly));
+        this._versionId = observableValueOpts({ owner: this, lazy: true }, this.editor.getModel()?.getVersionId() ?? null);
+        this.versionId = this._versionId;
+        this._selections = observableValueOpts({ owner: this, equalsFn: equalsIfDefined(itemsEquals(Selection.selectionsEqual)), lazy: true }, this.editor.getSelections() ?? null);
+        this.selections = this._selections;
+        this.positions = derivedOpts({ owner: this, equalsFn: equalsIfDefined(itemsEquals(Position.equals)) }, reader => this.selections.read(reader)?.map(s => s.getStartPosition()) ?? null);
+        this.isFocused = observableFromEvent(this, e => {
+            const d1 = this.editor.onDidFocusEditorWidget(e);
+            const d2 = this.editor.onDidBlurEditorWidget(e);
+            return {
+                dispose() {
+                    d1.dispose();
+                    d2.dispose();
+                }
+            };
+        }, () => this.editor.hasWidgetFocus());
+        this.value = derivedWithSetter(this, reader => { this.versionId.read(reader); return this.model.read(reader)?.getValue() ?? ''; }, (value, tx) => {
+            const model = this.model.get();
+            if (model !== null) {
+                if (value !== model.getValue()) {
+                    model.setValue(value);
+                }
+            }
+        });
+        this.valueIsEmpty = derived(this, reader => { this.versionId.read(reader); return this.editor.getModel()?.getValueLength() === 0; });
+        this.cursorSelection = derivedOpts({ owner: this, equalsFn: equalsIfDefined(Selection.selectionsEqual) }, reader => this.selections.read(reader)?.[0] ?? null);
+        this.cursorPosition = derivedOpts({ owner: this, equalsFn: Position.equals }, reader => this.selections.read(reader)?.[0]?.getPosition() ?? null);
+        this.onDidType = observableSignal(this);
+        this.scrollTop = observableFromEvent(this.editor.onDidScrollChange, () => this.editor.getScrollTop());
+        this.scrollLeft = observableFromEvent(this.editor.onDidScrollChange, () => this.editor.getScrollLeft());
+        this.layoutInfo = observableFromEvent(this.editor.onDidLayoutChange, () => this.editor.getLayoutInfo());
+        this.contentWidth = observableFromEvent(this.editor.onDidContentSizeChange, () => this.editor.getContentWidth());
+        this._overlayWidgetCounter = 0;
+        this._register(this.editor.onBeginUpdate(() => this._beginUpdate()));
+        this._register(this.editor.onEndUpdate(() => this._endUpdate()));
+        this._register(this.editor.onDidChangeModel(() => {
+            this._beginUpdate();
+            try {
+                this._model.set(this.editor.getModel(), this._currentTransaction);
+                this._forceUpdate();
+            }
+            finally {
+                this._endUpdate();
+            }
+        }));
+        this._register(this.editor.onDidType((e) => {
+            this._beginUpdate();
+            try {
+                this._forceUpdate();
+                this.onDidType.trigger(this._currentTransaction, e);
+            }
+            finally {
+                this._endUpdate();
+            }
+        }));
+        this._register(this.editor.onDidChangeModelContent(e => {
+            this._beginUpdate();
+            try {
+                this._versionId.set(this.editor.getModel()?.getVersionId() ?? null, this._currentTransaction, e);
+                this._forceUpdate();
+            }
+            finally {
+                this._endUpdate();
+            }
+        }));
+        this._register(this.editor.onDidChangeCursorSelection(e => {
+            this._beginUpdate();
+            try {
+                this._selections.set(this.editor.getSelections(), this._currentTransaction, e);
+                this._forceUpdate();
+            }
+            finally {
+                this._endUpdate();
+            }
+        }));
+    }
+    forceUpdate(cb) {
+        this._beginUpdate();
+        try {
+            this._forceUpdate();
+            if (!cb) {
+                return undefined;
+            }
+            return cb(this._currentTransaction);
+        }
+        finally {
+            this._endUpdate();
+        }
+    }
+    _forceUpdate() {
+        this._beginUpdate();
+        try {
+            this._model.set(this.editor.getModel(), this._currentTransaction);
+            this._versionId.set(this.editor.getModel()?.getVersionId() ?? null, this._currentTransaction, undefined);
+            this._selections.set(this.editor.getSelections(), this._currentTransaction, undefined);
+        }
+        finally {
+            this._endUpdate();
+        }
+    }
+    getOption(id) {
+        return observableFromEvent(this, cb => this.editor.onDidChangeConfiguration(e => {
+            if (e.hasChanged(id)) {
+                cb(undefined);
+            }
+        }), () => this.editor.getOption(id));
+    }
+    setDecorations(decorations) {
+        const d = ( new DisposableStore());
+        const decorationsCollection = this.editor.createDecorationsCollection();
+        d.add(autorunOpts({ owner: this, debugName: () => `Apply decorations from ${decorations.debugName}` }, reader => {
+            const d = decorations.read(reader);
+            decorationsCollection.set(d);
+        }));
+        d.add({
+            dispose: () => {
+                decorationsCollection.clear();
+            }
+        });
+        return d;
+    }
+    createOverlayWidget(widget) {
+        const overlayWidgetId = 'observableOverlayWidget' + (this._overlayWidgetCounter++);
+        const w = {
+            getDomNode: () => widget.domNode,
+            getPosition: () => widget.position.get(),
+            getId: () => overlayWidgetId,
+            allowEditorOverflow: widget.allowEditorOverflow,
+            getMinContentWidthInPx: () => widget.minContentWidthInPx.get(),
+        };
+        this.editor.addOverlayWidget(w);
+        const d = autorun(reader => {
+            widget.position.read(reader);
+            widget.minContentWidthInPx.read(reader);
+            this.editor.layoutOverlayWidget(w);
+        });
+        return toDisposable(() => {
+            d.dispose();
+            this.editor.removeOverlayWidget(w);
+        });
+    }
+}
+function reactToChange(observable, cb) {
+    return autorunWithStoreHandleChanges({
+        createEmptyChangeSummary: () => ({ deltas: [], didChange: false }),
+        handleChange: (context, changeSummary) => {
+            if (context.didChange(observable)) {
+                const e = context.change;
+                if (e !== undefined) {
+                    changeSummary.deltas.push(e);
+                }
+                changeSummary.didChange = true;
+            }
+            return true;
+        },
+    }, (reader, changeSummary) => {
+        const value = observable.read(reader);
+        if (changeSummary.didChange) {
+            cb(value, changeSummary.deltas);
+        }
+    });
+}
+function reactToChangeWithStore(observable, cb) {
+    const store = ( new DisposableStore());
+    const disposable = reactToChange(observable, (value, deltas) => {
+        store.clear();
+        cb(value, deltas, store);
+    });
+    return {
+        dispose() {
+            disposable.dispose();
+            store.dispose();
+        }
+    };
+}
+export { ObservableCodeEditor, observableCodeEditor, reactToChange, reactToChangeWithStore };

package/vscode/src/vs/editor/browser/services/abstractCodeEditorService.js

@@ -263,7 +263,7 @@ class RefCountedStyleSheet {
     unref() {
         this._refCount--;
         if (this._refCount === 0) {
-            this._styleSheet.parentNode?.removeChild(this._styleSheet);
+            this._styleSheet.remove();
             this._parent._removeEditorStyleSheets(this._editorId);
         }
     }

package/vscode/src/vs/editor/browser/services/hoverService/hoverService.js

@@ -25,7 +25,7 @@ import { IAccessibilityService } from '../../../../platform/accessibility/common
 import { ILayoutService } from '../../../../platform/layout/browser/layoutService.service.js';
 import { mainWindow } from '../../../../base/browser/window.js';
 import { ContextViewHandler } from '../../../../platform/contextview/browser/contextViewService.js';
-import { UpdatableHoverWidget } from './updatableHoverWidget.js';
+import { ManagedHoverWidget } from './updatableHoverWidget.js';
 import { TimeoutTimer } from '../../../../base/common/async.js';
 let HoverService = class HoverService extends Disposable {
     constructor(_instantiationService, contextMenuService, _keybindingService, _layoutService, _accessibilityService) {
@@ -34,7 +34,7 @@ let HoverService = class HoverService extends Disposable {
         this._keybindingService = _keybindingService;
         this._layoutService = _layoutService;
         this._accessibilityService = _accessibilityService;
-        this._existingHovers = ( new Map());
+        this._managedHovers = ( new Map());
         contextMenuService.onDidShowContextMenu(() => this.hideHover());
         this._contextViewHandler = this._register(( new ContextViewHandler(this._layoutService)));
     }
@@ -161,12 +161,12 @@ let HoverService = class HoverService extends Disposable {
             }
         }
     }
-    setupUpdatableHover(hoverDelegate, htmlElement, content, options) {
-        htmlElement.setAttribute('custom-hover', 'true');
-        if (htmlElement.title !== '') {
+    setupManagedHover(hoverDelegate, targetElement, content, options) {
+        targetElement.setAttribute('custom-hover', 'true');
+        if (targetElement.title !== '') {
             console.warn('HTML element already has a title attribute, which will conflict with the custom hover. Please remove the title attribute.');
-            console.trace('Stack trace:', htmlElement.title);
-            htmlElement.title = '';
+            console.trace('Stack trace:', targetElement.title);
+            targetElement.title = '';
         }
         let hoverPreparation;
         let hoverWidget;
@@ -188,22 +188,22 @@ let HoverService = class HoverService extends Disposable {
         const triggerShowHover = (delay, focus, target, trapFocus) => {
             return ( new TimeoutTimer(async () => {
                 if (!hoverWidget || hoverWidget.isDisposed) {
-                    hoverWidget = ( new UpdatableHoverWidget(hoverDelegate, target || htmlElement, delay > 0));
+                    hoverWidget = ( new ManagedHoverWidget(hoverDelegate, target || targetElement, delay > 0));
                     await hoverWidget.update(typeof content === 'function' ? content() : content, focus, { ...options, trapFocus });
                 }
             }, delay));
         };
         let isMouseDown = false;
-        const mouseDownEmitter = addDisposableListener(htmlElement, EventType.MOUSE_DOWN, () => {
+        const mouseDownEmitter = addDisposableListener(targetElement, EventType.MOUSE_DOWN, () => {
             isMouseDown = true;
             hideHover(true, true);
         }, true);
-        const mouseUpEmitter = addDisposableListener(htmlElement, EventType.MOUSE_UP, () => {
+        const mouseUpEmitter = addDisposableListener(targetElement, EventType.MOUSE_UP, () => {
             isMouseDown = false;
         }, true);
-        const mouseLeaveEmitter = addDisposableListener(htmlElement, EventType.MOUSE_LEAVE, (e) => {
+        const mouseLeaveEmitter = addDisposableListener(targetElement, EventType.MOUSE_LEAVE, (e) => {
             isMouseDown = false;
-            hideHover(false, e.fromElement === htmlElement);
+            hideHover(false, e.fromElement === targetElement);
         }, true);
         const onMouseOver = (e) => {
             if (hoverPreparation) {
@@ -211,43 +211,43 @@ let HoverService = class HoverService extends Disposable {
             }
             const toDispose = ( new DisposableStore());
             const target = {
-                targetElements: [htmlElement],
+                targetElements: [targetElement],
                 dispose: () => { }
             };
             if (hoverDelegate.placement === undefined || hoverDelegate.placement === 'mouse') {
                 const onMouseMove = (e) => {
                     target.x = e.x + 10;
-                    if ((isHTMLElement(e.target)) && getHoverTargetElement(e.target, htmlElement) !== htmlElement) {
+                    if ((isHTMLElement(e.target)) && getHoverTargetElement(e.target, targetElement) !== targetElement) {
                         hideHover(true, true);
                     }
                 };
-                toDispose.add(addDisposableListener(htmlElement, EventType.MOUSE_MOVE, onMouseMove, true));
+                toDispose.add(addDisposableListener(targetElement, EventType.MOUSE_MOVE, onMouseMove, true));
             }
             hoverPreparation = toDispose;
-            if ((isHTMLElement(e.target)) && getHoverTargetElement(e.target, htmlElement) !== htmlElement) {
+            if ((isHTMLElement(e.target)) && getHoverTargetElement(e.target, targetElement) !== targetElement) {
                 return;
             }
             toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
         };
-        const mouseOverDomEmitter = addDisposableListener(htmlElement, EventType.MOUSE_OVER, onMouseOver, true);
+        const mouseOverDomEmitter = addDisposableListener(targetElement, EventType.MOUSE_OVER, onMouseOver, true);
         const onFocus = () => {
             if (isMouseDown || hoverPreparation) {
                 return;
             }
             const target = {
-                targetElements: [htmlElement],
+                targetElements: [targetElement],
                 dispose: () => { }
             };
             const toDispose = ( new DisposableStore());
             const onBlur = () => hideHover(true, true);
-            toDispose.add(addDisposableListener(htmlElement, EventType.BLUR, onBlur, true));
+            toDispose.add(addDisposableListener(targetElement, EventType.BLUR, onBlur, true));
             toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
             hoverPreparation = toDispose;
         };
         let focusDomEmitter;
-        const tagName = htmlElement.tagName.toLowerCase();
+        const tagName = targetElement.tagName.toLowerCase();
         if (tagName !== 'input' && tagName !== 'textarea') {
-            focusDomEmitter = addDisposableListener(htmlElement, EventType.FOCUS, onFocus, true);
+            focusDomEmitter = addDisposableListener(targetElement, EventType.FOCUS, onFocus, true);
         }
         const hover = {
             show: focus => {
@@ -261,7 +261,7 @@ let HoverService = class HoverService extends Disposable {
                 await hoverWidget?.update(content, undefined, hoverOptions);
             },
             dispose: () => {
-                this._existingHovers.delete(htmlElement);
+                this._managedHovers.delete(targetElement);
                 mouseOverDomEmitter.dispose();
                 mouseLeaveEmitter.dispose();
                 mouseDownEmitter.dispose();
@@ -270,17 +270,17 @@ let HoverService = class HoverService extends Disposable {
                 hideHover(true, true);
             }
         };
-        this._existingHovers.set(htmlElement, hover);
+        this._managedHovers.set(targetElement, hover);
         return hover;
     }
-    triggerUpdatableHover(target) {
-        const hover = this._existingHovers.get(target);
+    showManagedHover(target) {
+        const hover = this._managedHovers.get(target);
         if (hover) {
             hover.show(true);
         }
     }
     dispose() {
-        this._existingHovers.forEach(hover => hover.dispose());
+        this._managedHovers.forEach(hover => hover.dispose());
         super.dispose();
     }
 };

package/vscode/src/vs/editor/browser/services/hoverService/updatableHoverWidget.js

@@ -5,7 +5,7 @@ import { isMarkdownString } from '../../../../base/common/htmlContent.js';
 import { isString, isFunction } from '../../../../base/common/types.js';
 import { localizeWithPath } from '../../../../nls.js';
 const _moduleId = "vs/editor/browser/services/hoverService/updatableHoverWidget";
-class UpdatableHoverWidget {
+class ManagedHoverWidget {
     constructor(hoverDelegate, target, fadeInAnimation) {
         this.hoverDelegate = hoverDelegate;
         this.target = target;
@@ -79,4 +79,4 @@ class UpdatableHoverWidget {
         this._cancellationTokenSource = undefined;
     }
 }
-export { UpdatableHoverWidget };
+export { ManagedHoverWidget };

package/vscode/src/vs/editor/browser/view/domLineBreaksComputer.js

@@ -151,7 +151,7 @@ function createLineBreaks(targetWindow, requests, fontInfo, tabSize, firstLineBr
             wrappedTextIndentLength
         ));
     }
-    targetWindow.document.body.removeChild(containerDomNode);
+    containerDomNode.remove();
     return result;
 }
 var Constants;

package/vscode/src/vs/editor/browser/view/viewLayer.js

@@ -178,9 +178,7 @@ class VisibleLinesCollection {
         if (deleted) {
             for (let i = 0, len = deleted.length; i < len; i++) {
                 const lineDomNode = deleted[i].getDomNode();
-                if (lineDomNode) {
-                    this.domNode.domNode.removeChild(lineDomNode);
-                }
+                lineDomNode?.remove();
             }
         }
         return true;
@@ -190,9 +188,7 @@ class VisibleLinesCollection {
         if (deleted) {
             for (let i = 0, len = deleted.length; i < len; i++) {
                 const lineDomNode = deleted[i].getDomNode();
-                if (lineDomNode) {
-                    this.domNode.domNode.removeChild(lineDomNode);
-                }
+                lineDomNode?.remove();
             }
         }
         return true;
@@ -306,9 +302,7 @@ class ViewLayerRenderer {
     _removeLinesBefore(ctx, removeCount) {
         for (let i = 0; i < removeCount; i++) {
             const lineDomNode = ctx.lines[i].getDomNode();
-            if (lineDomNode) {
-                this.domNode.removeChild(lineDomNode);
-            }
+            lineDomNode?.remove();
         }
         ctx.lines.splice(0, removeCount);
     }
@@ -324,9 +318,7 @@ class ViewLayerRenderer {
         const removeIndex = ctx.linesLength - removeCount;
         for (let i = 0; i < removeCount; i++) {
             const lineDomNode = ctx.lines[removeIndex + i].getDomNode();
-            if (lineDomNode) {
-                this.domNode.removeChild(lineDomNode);
-            }
+            lineDomNode?.remove();
         }
         ctx.lines.splice(removeIndex, removeCount);
     }

package/vscode/src/vs/editor/browser/viewParts/contentWidgets/contentWidgets.js

@@ -85,7 +85,7 @@ class ViewContentWidgets extends ViewPart {
             const myWidget = this._widgets[widgetId];
             delete this._widgets[widgetId];
             const domNode = myWidget.domNode.domNode;
-            domNode.parentNode.removeChild(domNode);
+            domNode.remove();
             domNode.removeAttribute('monaco-visible-content-widget');
             this.setShouldRender();
         }

package/vscode/src/vs/editor/browser/viewParts/glyphMargin/glyphMargin.js

@@ -167,7 +167,7 @@ class GlyphMarginWidgets extends ViewPart {
             const widgetData = this._widgets[widgetId];
             const domNode = widgetData.domNode.domNode;
             delete this._widgets[widgetId];
-            domNode.parentNode?.removeChild(domNode);
+            domNode.remove();
             this.setShouldRender();
         }
     }

package/vscode/src/vs/editor/browser/viewParts/viewZones/viewZones.js

@@ -192,11 +192,11 @@ class ViewZones extends ViewPart {
             whitespaceAccessor.removeWhitespace(zone.whitespaceId);
             zone.domNode.removeAttribute('monaco-visible-view-zone');
             zone.domNode.removeAttribute('monaco-view-zone');
-            zone.domNode.domNode.parentNode.removeChild(zone.domNode.domNode);
+            zone.domNode.domNode.remove();
             if (zone.marginDomNode) {
                 zone.marginDomNode.removeAttribute('monaco-visible-view-zone');
                 zone.marginDomNode.removeAttribute('monaco-view-zone');
-                zone.marginDomNode.domNode.parentNode.removeChild(zone.marginDomNode.domNode);
+                zone.marginDomNode.domNode.remove();
             }
             this.setShouldRender();
             return true;

package/vscode/src/vs/editor/browser/widget/codeEditor/codeEditorWidget.js

@@ -1238,7 +1238,7 @@ let CodeEditorWidget = class CodeEditorWidget extends Disposable {
     }
     setBanner(domNode, domNodeHeight) {
         if (this._bannerDomNode && this._domElement.contains(this._bannerDomNode)) {
-            this._domElement.removeChild(this._bannerDomNode);
+            this._bannerDomNode.remove();
         }
         this._bannerDomNode = domNode;
         this._configuration.setReservedHeight(domNode ? domNodeHeight : 0);
@@ -1265,7 +1265,18 @@ let CodeEditorWidget = class CodeEditorWidget extends Disposable {
             (callback) => scheduleAtNextAnimationFrame(getWindow(this._domElement), callback),
             this.languageConfigurationService,
             this._themeService,
-            attachedView
+            attachedView,
+            {
+                batchChanges: (cb) => {
+                    try {
+                        this._beginUpdate();
+                        return cb();
+                    }
+                    finally {
+                        this._endUpdate();
+                    }
+                },
+            }
         )));
         listenersToRemove.push(model.onWillDispose(() => this.setModel(null)));
         listenersToRemove.push(viewModel.onEvent((e) => {
@@ -1474,10 +1485,10 @@ let CodeEditorWidget = class CodeEditorWidget extends Disposable {
         this._modelData = null;
         this._domElement.removeAttribute('data-mode-id');
         if (removeDomNode && this._domElement.contains(removeDomNode)) {
-            this._domElement.removeChild(removeDomNode);
+            removeDomNode.remove();
         }
         if (this._bannerDomNode && this._domElement.contains(this._bannerDomNode)) {
-            this._domElement.removeChild(this._bannerDomNode);
+            this._bannerDomNode.remove();
         }
         return model;
     }

package/vscode/src/vs/editor/browser/widget/diffEditor/components/diffEditorEditors.js

@@ -6,7 +6,7 @@ import { derivedOpts, derived } from '../../../../../base/common/observableInter
 import { autorunHandleChanges } from '../../../../../base/common/observableInternal/autorun.js';
 import { observableFromEvent } from '../../../../../base/common/observableInternal/utils.js';
 import '../../../../../base/common/cancellation.js';
-import { obsCodeEditor } from '../../../observableUtilities.js';
+import { observableCodeEditor } from '../../../observableCodeEditor.js';
 import { OverviewRulerFeature } from '../features/overviewRulerFeature.js';
 import { EditorOptions } from '../../../../common/config/editorOptions.js';
 import { Position } from '../../../../common/core/position.js';
@@ -28,14 +28,14 @@ let DiffEditorEditors = class DiffEditorEditors extends Disposable {
         this.original = this._register(this._createLeftHandSideEditor(this._options.editorOptions.get(), this._argCodeEditorWidgetOptions.originalEditor || {}));
         this.modified = this._register(this._createRightHandSideEditor(this._options.editorOptions.get(), this._argCodeEditorWidgetOptions.modifiedEditor || {}));
         this._onDidContentSizeChange = this._register(( (new Emitter())));
-        this.modifiedScrollTop = observableFromEvent(this.modified.onDidScrollChange, () =>  this.modified.getScrollTop());
-        this.modifiedScrollHeight = observableFromEvent(this.modified.onDidScrollChange, () =>  this.modified.getScrollHeight());
-        this.modifiedModel = obsCodeEditor(this.modified).model;
-        this.modifiedSelections = observableFromEvent(this.modified.onDidChangeCursorSelection, () => this.modified.getSelections() ?? []);
+        this.modifiedScrollTop = observableFromEvent(this, this.modified.onDidScrollChange, () =>  this.modified.getScrollTop());
+        this.modifiedScrollHeight = observableFromEvent(this, this.modified.onDidScrollChange, () =>  this.modified.getScrollHeight());
+        this.modifiedModel = observableCodeEditor(this.modified).model;
+        this.modifiedSelections = observableFromEvent(this, this.modified.onDidChangeCursorSelection, () => this.modified.getSelections() ?? []);
         this.modifiedCursor = derivedOpts({ owner: this, equalsFn: Position.equals }, reader => this.modifiedSelections.read(reader)[0]?.getPosition() ?? ( (new Position(1, 1))));
-        this.originalCursor = observableFromEvent(this.original.onDidChangeCursorPosition, () => this.original.getPosition() ?? ( (new Position(1, 1))));
-        this.isOriginalFocused = obsCodeEditor(this.original).isFocused;
-        this.isModifiedFocused = obsCodeEditor(this.modified).isFocused;
+        this.originalCursor = observableFromEvent(this, this.original.onDidChangeCursorPosition, () => this.original.getPosition() ?? ( (new Position(1, 1))));
+        this.isOriginalFocused = observableCodeEditor(this.original).isFocused;
+        this.isModifiedFocused = observableCodeEditor(this.modified).isFocused;
         this.isFocused = derived(this, reader => this.isOriginalFocused.read(reader) || this.isModifiedFocused.read(reader));
         this._argCodeEditorWidgetOptions = null;
         this._register(autorunHandleChanges({

package/vscode/src/vs/editor/browser/widget/diffEditor/components/diffEditorViewZones/diffEditorViewZones.js

@@ -65,7 +65,7 @@ let DiffEditorViewZones = class DiffEditorViewZones extends Disposable {
             }
         }));
         const originalModelTokenizationCompleted = ( ( this._diffModel.map(
-            m => m ? observableFromEvent(m.model.original.onDidChangeTokens, () => m.model.original.tokenization.backgroundTokenizationState === BackgroundTokenizationState.Completed) : undefined
+            m => m ? observableFromEvent(this, m.model.original.onDidChangeTokens, () => m.model.original.tokenization.backgroundTokenizationState === BackgroundTokenizationState.Completed) : undefined
         )).map((m, reader) => m?.read(reader)));
         const alignments = derived((reader) => {
             const diffModel = this._diffModel.read(reader);
@@ -416,14 +416,14 @@ function computeRangeAlignment(originalEditor, modifiedEditor, diffs, originalEd
         let first = true;
         let lastModLineNumber = c.modified.startLineNumber;
         let lastOrigLineNumber = c.original.startLineNumber;
-        function emitAlignment(origLineNumberExclusive, modLineNumberExclusive) {
+        function emitAlignment(origLineNumberExclusive, modLineNumberExclusive, forceAlignment = false) {
             if (origLineNumberExclusive < lastOrigLineNumber || modLineNumberExclusive < lastModLineNumber) {
                 return;
             }
             if (first) {
                 first = false;
             }
-            else if (origLineNumberExclusive === lastOrigLineNumber || modLineNumberExclusive === lastModLineNumber) {
+            else if (!forceAlignment && (origLineNumberExclusive === lastOrigLineNumber || modLineNumberExclusive === lastModLineNumber)) {
                 return;
             }
             const originalRange = ( new LineRange(lastOrigLineNumber, origLineNumberExclusive));
@@ -459,7 +459,7 @@ function computeRangeAlignment(originalEditor, modifiedEditor, diffs, originalEd
                 }
             }
         }
-        emitAlignment(c.original.endLineNumberExclusive, c.modified.endLineNumberExclusive);
+        emitAlignment(c.original.endLineNumberExclusive, c.modified.endLineNumberExclusive, true);
         lastOriginalLineNumber = c.original.endLineNumberExclusive;
         lastModifiedLineNumber = c.modified.endLineNumberExclusive;
     }

package/vscode/src/vs/editor/browser/widget/diffEditor/diffEditorOptions.js

@@ -14,7 +14,7 @@ let DiffEditorOptions = class DiffEditorOptions {
     constructor(options, _accessibilityService) {
         this._accessibilityService = _accessibilityService;
         this._diffEditorWidth = observableValue(this, 0);
-        this._screenReaderMode = observableFromEvent(this._accessibilityService.onDidChangeScreenReaderOptimized, () => this._accessibilityService.isScreenReaderOptimized());
+        this._screenReaderMode = observableFromEvent(this, this._accessibilityService.onDidChangeScreenReaderOptimized, () => this._accessibilityService.isScreenReaderOptimized());
         this.couldShowInlineViewBecauseOfSize = derived(this, reader => this._options.read(reader).renderSideBySide && this._diffEditorWidth.read(reader) <= this._options.read(reader).renderSideBySideInlineBreakpoint);
         this.renderOverviewRuler = derived(this, reader => this._options.read(reader).renderOverviewRuler);
         this.renderSideBySide = derived(this, reader => this._options.read(reader).renderSideBySide

package/vscode/src/vs/editor/browser/widget/diffEditor/diffEditorViewModel.js

@@ -7,6 +7,7 @@ import { derived } from '../../../../base/common/observableInternal/derived.js';
 import { autorun, autorunWithStore } from '../../../../base/common/observableInternal/autorun.js';
 import { observableSignalFromEvent, observableSignal } from '../../../../base/common/observableInternal/utils.js';
 import { waitForState } from '../../../../base/common/observableInternal/promise.js';
+import { groupAdjacentBy } from '../../../../base/common/arrays.js';
 import { IDiffProviderFactoryService } from './diffProviderFactoryService.js';
 import { readHotReloadableExport, filterWithPrevious } from './utils.js';
 import { LineRange, LineRangeSet } from '../../../common/core/lineRange.js';
@@ -16,7 +17,6 @@ import { TextEditInfo } from '../../../common/model/bracketPairsTextModelPart/br
 import { combineTextEditInfos } from '../../../common/model/bracketPairsTextModelPart/bracketPairsTree/combineTextEditInfos.js';
 import { optimizeSequenceDiffs } from '../../../common/diff/defaultLinesDiffComputer/heuristicSequenceOptimizations.js';
 import { isDefined } from '../../../../base/common/types.js';
-import { groupAdjacentBy } from '../../../../base/common/arrays.js';
 import { softAssert } from '../../../../base/common/assert.js';
 let DiffEditorViewModel = class DiffEditorViewModel extends Disposable {
     setActiveMovedText(movedText) {