@codingame/monaco-vscode-api 14.0.6 → 15.0.0

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/{insertionView.js → inlineEditsViews/inlineEditsInsertionView.js}

@@ -1,37 +1,42 @@
 
-import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
-import { $ } from '../../../../../../base/browser/dom.js';
-import { Disposable } from '../../../../../../base/common/lifecycle.js';
-import { observableValue } from '../../../../../../base/common/observableInternal/base.js';
-import '../../../../../../base/common/arrays.js';
-import '../../../../../../base/common/event.js';
-import '../../../../../../base/common/observableInternal/autorun.js';
-import { derived, derivedWithStore } from '../../../../../../base/common/observableInternal/derived.js';
-import '../../../../../../base/common/cancellation.js';
-import { constObservable } from '../../../../../../base/common/observableInternal/utils.js';
-import { IInstantiationService } from '../../../../../../platform/instantiation/common/instantiation.js';
-import { observableCodeEditor } from '../../../../../browser/observableCodeEditor.js';
-import { Point } from '../../../../../browser/point.js';
-import { RenderOptions, renderLines, LineSource } from '../../../../../browser/widget/diffEditor/components/diffEditorViewZones/renderLines.js';
-import { EditorOption } from '../../../../../common/config/editorOptions.js';
-import { LineRange } from '../../../../../common/core/lineRange.js';
-import { Position } from '../../../../../common/core/position.js';
-import { Range } from '../../../../../common/core/range.js';
-import { ILanguageService } from '../../../../../common/languages/language.js';
-import { LineTokens } from '../../../../../common/tokens/lineTokens.js';
-import { TokenArray } from '../../../../../common/tokens/tokenArray.js';
-import { GhostText, GhostTextPart } from '../../model/ghostText.js';
-import { GhostTextView } from '../ghostText/ghostTextView.js';
-import { n, mapOutFalsy, createRectangle } from './utils.js';
+import { __decorate, __param } from '../../../../../../../../../../external/tslib/tslib.es6.js';
+import { $ } from '../../../../../../../base/browser/dom.js';
+import { Emitter } from '../../../../../../../base/common/event.js';
+import { Disposable } from '../../../../../../../base/common/lifecycle.js';
+import '../../../../../../../base/common/observableInternal/index.js';
+import { IInstantiationService } from '../../../../../../../platform/instantiation/common/instantiation.js';
+import { asCssVariable } from '../../../../../../../platform/theme/common/colorUtils.js';
+import { observableCodeEditor } from '../../../../../../browser/observableCodeEditor.js';
+import { Rect } from '../../../../../../browser/rect.js';
+import { RenderOptions, renderLines, LineSource } from '../../../../../../browser/widget/diffEditor/components/diffEditorViewZones/renderLines.js';
+import { EditorOption } from '../../../../../../common/config/editorOptions.js';
+import { LineRange } from '../../../../../../common/core/lineRange.js';
+import { Position } from '../../../../../../common/core/position.js';
+import { Range } from '../../../../../../common/core/range.js';
+import { ILanguageService } from '../../../../../../common/languages/language.service.js';
+import { LineTokens } from '../../../../../../common/tokens/lineTokens.js';
+import { TokenArray } from '../../../../../../common/tokens/tokenArray.js';
+import { InlineDecoration, InlineDecorationType } from '../../../../../../common/viewModel.js';
+import { GhostText, GhostTextPart } from '../../../model/ghostText.js';
+import { GhostTextView } from '../../ghostText/ghostTextView.js';
+import { getModifiedBorderColor, modifiedChangedLineBackgroundColor } from '../theme.js';
+import { getPrefixTrim, mapOutFalsy, createRectangle } from '../utils/utils.js';
+import { derived, derivedWithStore } from '../../../../../../../base/common/observableInternal/derived.js';
+import { constObservable } from '../../../../../../../base/common/observableInternal/utils.js';
+import { observableValue } from '../../../../../../../base/common/observableInternal/base.js';
+import { n } from '../../../../../../../base/browser/domImpl/n.js';
 
 let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable {
-    constructor(_editor, _input, _instantiationService, _languageService) {
+    constructor(_editor, _input, _host, _instantiationService, _languageService) {
         super();
         this._editor = _editor;
         this._input = _input;
+        this._host = _host;
         this._instantiationService = _instantiationService;
         this._languageService = _languageService;
         this._editorObs = observableCodeEditor(this._editor);
+        this._onDidClick = this._register(( new Emitter()));
+        this.onDidClick = this._onDidClick.event;
         this._state = derived(this, reader => {
             const state = this._input.read(reader);
             if (!state) {
@@ -45,18 +50,42 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             }
             return { lineNumber: state.lineNumber, column: state.startColumn, text: state.text };
         });
+        this._maxPrefixTrim = derived(reader => {
+            const state = this._state.read(reader);
+            if (!state) {
+                return { prefixLeftOffset: 0, prefixTrim: 0 };
+            }
+            const textModel = this._editor.getModel();
+            const eol = textModel.getEOL();
+            const startsWithEol = state.text.startsWith(eol);
+            const originalRange = ( new LineRange(state.lineNumber, state.lineNumber + (startsWithEol ? 0 : 1)));
+            let modifiedLines = state.text.split(eol);
+            if (startsWithEol) {
+                modifiedLines = modifiedLines.splice(1);
+            }
+            else {
+                modifiedLines[0] = textModel.getLineContent(state.lineNumber) + modifiedLines[0];
+            }
+            return getPrefixTrim([], originalRange, modifiedLines, this._editor);
+        });
         this._ghostText = derived(reader => {
             const state = this._state.read(reader);
+            const prefixTrim = this._maxPrefixTrim.read(reader);
             if (!state) {
                 return undefined;
             }
-            return ( new GhostText(state.lineNumber, [( new GhostTextPart(state.column, state.text, false))]));
+            const textModel = this._editor.getModel();
+            const eol = textModel.getEOL();
+            const modifiedLines = state.text.split(eol);
+            const inlineDecorations = ( modifiedLines.map((line, i) => ( new InlineDecoration(( new Range(i + 1, i === 0 ? 1 : prefixTrim.prefixTrim + 1, i + 1, line.length + 1)), 'modified-background', InlineDecorationType.Regular))));
+            return ( new GhostText(state.lineNumber, [( new GhostTextPart(state.column, state.text, false, inlineDecorations))]));
         });
         this._ghostTextView = this._register(this._instantiationService.createInstance(GhostTextView, this._editor, {
             ghostText: this._ghostText,
             minReservedLineCount: constObservable(0),
             targetTextModel: ( this._editorObs.model.map(model => model ?? undefined)),
-        }, observableValue(this, { syntaxHighlightingEnabled: true, extraClasses: ['inline-edit'] }), true));
+            warning: constObservable(undefined),
+        }, observableValue(this, { syntaxHighlightingEnabled: true, extraClasses: ['inline-edit'] }), true, true));
         this._display = derived(this, reader => !!this._state.read(reader) ? 'block' : 'none');
         this._editorMaxContentWidthInRange = derived(this, reader => {
             const state = this._state.read(reader);
@@ -108,7 +137,11 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             return { top: topTrim, bottom: bottomTrim };
         });
         this.startLineOffset = ( this._trimVertically.map(v => v.top));
-        this.originalLines = ( this._state.map(s => s ? ( new LineRange(s.lineNumber, s.lineNumber + 2)) : undefined));
+        this.originalLines = ( this._state.map(s => s ?
+            ( new LineRange(
+                s.lineNumber,
+                Math.min(s.lineNumber + 2, this._editor.getModel().getLineCount() + 1)
+            )) : undefined));
         this._overlayLayout = derivedWithStore(this, (reader, store) => {
             this._ghostText.read(reader);
             const state = this._state.read(reader);
@@ -118,9 +151,11 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             this._editorObs.observePosition(observableValue(this, ( new Position(state.lineNumber, state.column))), store).read(reader);
             const editorLayout = this._editorObs.layoutInfo.read(reader);
             const horizontalScrollOffset = this._editorObs.scrollLeft.read(reader);
-            const left = editorLayout.contentLeft + this._editorMaxContentWidthInRange.read(reader) - horizontalScrollOffset;
-            const codeLeft = editorLayout.contentLeft;
-            if (left <= codeLeft) {
+            const verticalScrollbarWidth = this._editorObs.layoutInfoVerticalScrollbarWidth.read(reader);
+            const right = editorLayout.contentLeft + this._editorMaxContentWidthInRange.read(reader) - horizontalScrollOffset;
+            const prefixLeftOffset = this._maxPrefixTrim.read(reader).prefixLeftOffset ?? 0 ;
+            const left = editorLayout.contentLeft + prefixLeftOffset - horizontalScrollOffset;
+            if (right <= left) {
                 return null;
             }
             const { top: topTrim, bottom: bottomTrim } = this._trimVertically.read(reader);
@@ -128,18 +163,13 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
             const height = this._ghostTextView.height.read(reader) - topTrim - bottomTrim;
             const top = this._editor.getTopForLineNumber(state.lineNumber) - scrollTop + topTrim;
             const bottom = top + height;
-            const code1 = ( new Point(left, top));
-            const codeStart1 = ( new Point(codeLeft, top));
-            const code2 = ( new Point(left, bottom));
-            const codeStart2 = ( new Point(codeLeft, bottom));
+            const overlay = ( new Rect(left, top, right, bottom));
             return {
-                code1,
-                codeStart1,
-                code2,
-                codeStart2,
-                horizontalScrollOffset,
-                padding: 3,
+                overlay,
+                contentLeft: editorLayout.contentLeft,
+                minContentWidthRequired: prefixLeftOffset + overlay.width + verticalScrollbarWidth,
                 borderRadius: 4,
+                padding: 3
             };
         }).recomputeInitiallyAndOnChange(this._store);
         this._foregroundSvg = n.svg({
@@ -151,18 +181,26 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
                 return undefined;
             }
             const layoutInfo = overlayLayoutObs.read(reader);
+            const overlay = layoutInfo.overlay;
+            const croppedOverlay = ( new Rect(
+                Math.max(overlay.left, layoutInfo.contentLeft),
+                overlay.top,
+                overlay.right,
+                overlay.bottom
+            ));
             const rectangleOverlay = createRectangle({
-                topLeft: layoutInfo.codeStart1,
-                width: layoutInfo.code1.x - layoutInfo.codeStart1.x + 1,
-                height: layoutInfo.code2.y - layoutInfo.code1.y + 1,
-            }, layoutInfo.padding, layoutInfo.borderRadius, { hideLeft: layoutInfo.horizontalScrollOffset !== 0 });
+                topLeft: croppedOverlay.getLeftTop(),
+                width: croppedOverlay.width + 1,
+                height: croppedOverlay.height + 1,
+            }, layoutInfo.padding, layoutInfo.borderRadius, { hideLeft: croppedOverlay.left !== overlay.left });
+            const modifiedBorderColor = getModifiedBorderColor(this._host.tabAction).read(reader);
             return [
                 n.svgElem('path', {
                     class: 'originalOverlay',
                     d: rectangleOverlay,
                     style: {
-                        fill: 'var(--vscode-inlineEdit-modifiedChangedLineBackground, transparent)',
-                        stroke: 'var(--vscode-inlineEdit-modifiedBorder)',
+                        fill: asCssVariable(modifiedChangedLineBackgroundColor),
+                        stroke: modifiedBorderColor,
                         strokeWidth: '1px',
                     }
                 }),
@@ -181,7 +219,10 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
         }, [
             [this._foregroundSvg],
         ]).keepUpdated(this._store);
-        this.isHovered = constObservable(false);
+        this.isHovered = this._ghostTextView.isHovered;
+        this._register(this._ghostTextView.onDidClick((e) => {
+            this._onDidClick.fire(e);
+        }));
         this._register(this._editorObs.createOverlayWidget({
             domNode: this._nonOverflowView.element,
             position: constObservable(null),
@@ -191,14 +232,14 @@ let InlineEditsInsertionView = class InlineEditsInsertionView extends Disposable
                 if (info === null) {
                     return 0;
                 }
-                return info.code1.x - info.codeStart1.x;
+                return info.minContentWidthRequired;
             }),
         }));
     }
 };
 InlineEditsInsertionView = ( __decorate([
-    ( __param(2, IInstantiationService)),
-    ( __param(3, ILanguageService))
+    ( __param(3, IInstantiationService)),
+    ( __param(4, ILanguageService))
 ], InlineEditsInsertionView));
 
 export { InlineEditsInsertionView };

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.d.ts

@@ -0,0 +1,34 @@
+import { IMouseEvent } from "../../../../../../../base/browser/mouseEvent.js";
+import { Disposable } from "../../../../../../../base/common/lifecycle.js";
+import { IObservable } from "../../../../../../../base/common/observable.js";
+import { ObservableCodeEditor } from "../../../../../../browser/observableCodeEditor.js";
+import { LineRange } from "../../../../../../common/core/lineRange.js";
+import { ILanguageService } from "../../../../../../common/languages/language.service.js";
+import { IInlineEditsView, IInlineEditsViewHost } from "../inlineEditsViewInterface.js";
+import { Replacement } from "./inlineEditsWordReplacementView.js";
+export declare class InlineEditsLineReplacementView extends Disposable implements IInlineEditsView {
+    private readonly _editor;
+    private readonly _edit;
+    private readonly _host;
+    private readonly _languageService;
+    private readonly _onDidClick;
+    readonly onDidClick: import("../../../../../../../base/common/event.js").Event<IMouseEvent>;
+    private readonly _originalBubblesDecorationCollection;
+    private readonly _originalBubblesDecorationOptions;
+    private readonly _maxPrefixTrim;
+    private readonly _modifiedLineElements;
+    private readonly _layout;
+    private readonly _viewZoneInfo;
+    private readonly _div;
+    readonly isHovered: IObservable<boolean>;
+    constructor(_editor: ObservableCodeEditor, _edit: IObservable<{
+        originalRange: LineRange;
+        modifiedRange: LineRange;
+        modifiedLines: string[];
+        replacements: Replacement[];
+    } | undefined>, _host: IInlineEditsViewHost, _languageService: ILanguageService);
+    private _isMouseOverWidget;
+    private _previousViewZoneInfo;
+    private removePreviousViewZone;
+    private addViewZone;
+}

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.js

@@ -0,0 +1,326 @@
+
+import { __decorate, __param } from '../../../../../../../../../../external/tslib/tslib.es6.js';
+import { getWindow, $ } from '../../../../../../../base/browser/dom.js';
+import { StandardMouseEvent } from '../../../../../../../base/browser/mouseEvent.js';
+import { Emitter } from '../../../../../../../base/common/event.js';
+import { Disposable, toDisposable } from '../../../../../../../base/common/lifecycle.js';
+import '../../../../../../../base/common/observableInternal/index.js';
+import { asCssVariable } from '../../../../../../../platform/theme/common/colorUtils.js';
+import '../../../../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../../../../platform/theme/common/colors/chartsColors.js';
+import { editorBackground } from '../../../../../../../platform/theme/common/colors/editorColors.js';
+import '../../../../../../../platform/theme/common/colors/inputColors.js';
+import '../../../../../../../platform/theme/common/colors/listColors.js';
+import '../../../../../../../platform/theme/common/colors/menuColors.js';
+import '../../../../../../../platform/theme/common/colors/minimapColors.js';
+import { scrollbarShadow } from '../../../../../../../platform/theme/common/colors/miscColors.js';
+import '../../../../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../../../../platform/theme/common/colors/searchColors.js';
+import { EditorMouseEvent } from '../../../../../../browser/editorDom.js';
+import { Point } from '../../../../../../browser/point.js';
+import { Rect } from '../../../../../../browser/rect.js';
+import { renderLines, LineSource, RenderOptions } from '../../../../../../browser/widget/diffEditor/components/diffEditorViewZones/renderLines.js';
+import { EditorOption } from '../../../../../../common/config/editorOptions.js';
+import { OffsetRange } from '../../../../../../common/core/offsetRange.js';
+import { Range } from '../../../../../../common/core/range.js';
+import { ILanguageService } from '../../../../../../common/languages/language.service.js';
+import { TrackedRangeStickiness } from '../../../../../../common/model.js';
+import { LineTokens } from '../../../../../../common/tokens/lineTokens.js';
+import { TokenArray } from '../../../../../../common/tokens/tokenArray.js';
+import { InlineDecoration, InlineDecorationType } from '../../../../../../common/viewModel.js';
+import { getModifiedBorderColor, modifiedChangedLineBackgroundColor } from '../theme.js';
+import { getPrefixTrim, mapOutFalsy, rectToProps } from '../utils/utils.js';
+import { rangesToBubbleRanges } from './inlineEditsWordReplacementView.js';
+import { autorunDelta, autorun } from '../../../../../../../base/common/observableInternal/autorun.js';
+import { derived } from '../../../../../../../base/common/observableInternal/derived.js';
+import { n } from '../../../../../../../base/browser/domImpl/n.js';
+import { constObservable } from '../../../../../../../base/common/observableInternal/utils.js';
+
+let InlineEditsLineReplacementView = class InlineEditsLineReplacementView extends Disposable {
+    constructor(_editor, _edit, _host, _languageService) {
+        super();
+        this._editor = _editor;
+        this._edit = _edit;
+        this._host = _host;
+        this._languageService = _languageService;
+        this._onDidClick = this._register(( new Emitter()));
+        this.onDidClick = this._onDidClick.event;
+        this._originalBubblesDecorationCollection = this._editor.editor.createDecorationsCollection();
+        this._originalBubblesDecorationOptions = {
+            description: 'inlineCompletions-original-bubble',
+            className: 'inlineCompletions-original-bubble',
+            stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
+        };
+        this._maxPrefixTrim = ( this._edit.map(
+            e => e ? getPrefixTrim(e.replacements.flatMap(r => [r.originalRange, r.modifiedRange]), e.originalRange, e.modifiedLines, this._editor.editor) : undefined
+        ));
+        this._modifiedLineElements = derived(reader => {
+            const lines = [];
+            let requiredWidth = 0;
+            const prefixTrim = this._maxPrefixTrim.read(reader);
+            const edit = this._edit.read(reader);
+            if (!edit || !prefixTrim) {
+                return undefined;
+            }
+            const maxPrefixTrim = prefixTrim.prefixTrim;
+            const modifiedBubbles = ( rangesToBubbleRanges(( edit.replacements.map(r => r.modifiedRange))).map(r => ( new Range(
+                r.startLineNumber,
+                r.startColumn - maxPrefixTrim,
+                r.endLineNumber,
+                r.endColumn - maxPrefixTrim
+            ))));
+            const textModel = this._editor.model.get();
+            const startLineNumber = edit.modifiedRange.startLineNumber;
+            for (let i = 0; i < edit.modifiedRange.length; i++) {
+                const line = document.createElement('div');
+                const lineNumber = startLineNumber + i;
+                const modLine = edit.modifiedLines[i].slice(maxPrefixTrim);
+                const t = textModel.tokenization.tokenizeLinesAt(lineNumber, [modLine])?.[0];
+                let tokens;
+                if (t) {
+                    tokens = TokenArray.fromLineTokens(t).toLineTokens(modLine, this._languageService.languageIdCodec);
+                }
+                else {
+                    tokens = LineTokens.createEmpty(modLine, this._languageService.languageIdCodec);
+                }
+                const decorations = [];
+                for (const modified of modifiedBubbles.filter(b => b.startLineNumber === lineNumber)) {
+                    const validatedEndColumn = Math.min(modified.endColumn, modLine.length + 1);
+                    decorations.push(( new InlineDecoration(( new Range(1, modified.startColumn, 1, validatedEndColumn)), 'inlineCompletions-modified-bubble', InlineDecorationType.Regular)));
+                    decorations.push(( new InlineDecoration(( new Range(1, modified.startColumn, 1, modified.startColumn + 1)), 'start', InlineDecorationType.Regular)));
+                    decorations.push(( new InlineDecoration(( new Range(1, validatedEndColumn - 1, 1, validatedEndColumn)), 'end', InlineDecorationType.Regular)));
+                }
+                const result = renderLines(( new LineSource([tokens])), RenderOptions.fromEditor(this._editor.editor).withSetWidth(false), decorations, line, true);
+                this._editor.getOption(EditorOption.fontInfo).read(reader);
+                requiredWidth = Math.max(requiredWidth, result.minWidthInPx);
+                lines.push(line);
+            }
+            return { lines, requiredWidth: requiredWidth - 10 };
+        });
+        this._layout = derived(this, reader => {
+            const modifiedLines = this._modifiedLineElements.read(reader);
+            const maxPrefixTrim = this._maxPrefixTrim.read(reader);
+            const edit = this._edit.read(reader);
+            if (!modifiedLines || !maxPrefixTrim || !edit) {
+                return undefined;
+            }
+            const { prefixLeftOffset } = maxPrefixTrim;
+            const { requiredWidth } = modifiedLines;
+            const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
+            const contentLeft = this._editor.layoutInfoContentLeft.read(reader);
+            const verticalScrollbarWidth = this._editor.layoutInfoVerticalScrollbarWidth.read(reader);
+            const scrollLeft = this._editor.scrollLeft.read(reader);
+            const scrollTop = this._editor.scrollTop.read(reader);
+            const editorLeftOffset = contentLeft - scrollLeft;
+            const PADDING = 4;
+            const textModel = this._editor.editor.getModel();
+            const originalLineWidths = edit.originalRange.mapToLineArray(line => this._editor.editor.getOffsetForColumn(line, textModel.getLineMaxColumn(line)) - prefixLeftOffset);
+            const maxLineWidth = Math.max(...originalLineWidths, requiredWidth);
+            const startLineNumber = edit.originalRange.startLineNumber;
+            const endLineNumber = edit.originalRange.endLineNumberExclusive - 1;
+            const topOfOriginalLines = this._editor.editor.getTopForLineNumber(startLineNumber) - scrollTop;
+            const bottomOfOriginalLines = this._editor.editor.getBottomForLineNumber(endLineNumber) - scrollTop;
+            const originalLinesOverlay = Rect.fromLeftTopWidthHeight(editorLeftOffset + prefixLeftOffset, topOfOriginalLines, maxLineWidth, bottomOfOriginalLines - topOfOriginalLines + PADDING);
+            const modifiedLinesOverlay = Rect.fromLeftTopWidthHeight(originalLinesOverlay.left, originalLinesOverlay.bottom + PADDING, originalLinesOverlay.width, edit.modifiedRange.length * lineHeight);
+            const background = Rect.hull([originalLinesOverlay, modifiedLinesOverlay]).withMargin(PADDING);
+            const lowerBackground = background.intersectVertical(( new OffsetRange(originalLinesOverlay.bottom, Number.MAX_SAFE_INTEGER)));
+            const lowerText = ( new Rect(
+                lowerBackground.left + PADDING,
+                lowerBackground.top + PADDING,
+                lowerBackground.right,
+                lowerBackground.bottom
+            ));
+            return {
+                originalLinesOverlay,
+                modifiedLinesOverlay,
+                background,
+                lowerBackground,
+                lowerText,
+                padding: PADDING,
+                minContentWidthRequired: prefixLeftOffset + maxLineWidth + PADDING * 2 + verticalScrollbarWidth,
+            };
+        });
+        this._viewZoneInfo = derived(reader => {
+            const shouldShowViewZone = ( this._editor.getOption(EditorOption.inlineSuggest).map(o => o.edits.codeShifting)).read(reader);
+            if (!shouldShowViewZone) {
+                return undefined;
+            }
+            const layout = this._layout.read(reader);
+            const edit = this._edit.read(reader);
+            if (!layout || !edit) {
+                return undefined;
+            }
+            const viewZoneHeight = layout.lowerBackground.height + 2 * layout.padding;
+            const viewZoneLineNumber = edit.originalRange.endLineNumberExclusive;
+            return { height: viewZoneHeight, lineNumber: viewZoneLineNumber };
+        });
+        this._div = n.div({
+            class: 'line-replacement',
+        }, [
+            derived(reader => {
+                const layout = mapOutFalsy(this._layout).read(reader);
+                const modifiedLineElements = this._modifiedLineElements.read(reader);
+                if (!layout || !modifiedLineElements) {
+                    return [];
+                }
+                const layoutProps = layout.read(reader);
+                const scrollLeft = this._editor.scrollLeft.read(reader);
+                let contentLeft = this._editor.layoutInfoContentLeft.read(reader);
+                let contentWidth = this._editor.contentWidth.read(reader);
+                const contentHeight = this._editor.editor.getContentHeight();
+                if (scrollLeft === 0) {
+                    contentLeft -= layoutProps.padding;
+                    contentWidth += layoutProps.padding;
+                }
+                const lineHeight = this._editor.getOption(EditorOption.lineHeight).read(reader);
+                modifiedLineElements.lines.forEach(l => {
+                    l.style.width = `${layout.read(reader).lowerText.width}px`;
+                    l.style.height = `${lineHeight}px`;
+                    l.style.position = 'relative';
+                });
+                const modifiedBorderColor = getModifiedBorderColor(this._host.tabAction).read(reader);
+                return [
+                    n.div({
+                        style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: contentLeft,
+                            width: contentWidth,
+                            height: contentHeight,
+                            overflow: 'hidden',
+                            pointerEvents: 'none',
+                        }
+                    }, [
+                        n.div({
+                            style: {
+                                position: 'absolute',
+                                top: layoutProps.lowerBackground.top - layoutProps.padding,
+                                left: layoutProps.lowerBackground.left - contentLeft,
+                                width: layoutProps.lowerBackground.width,
+                                height: layoutProps.padding * 2,
+                                background: asCssVariable(editorBackground),
+                            },
+                        }),
+                        n.div({
+                            style: {
+                                position: 'absolute',
+                                ...rectToProps(reader => layout.read(reader).lowerBackground.translateX(-contentLeft)),
+                                borderRadius: '4px',
+                                background: asCssVariable(editorBackground),
+                                boxShadow: `${asCssVariable(scrollbarShadow)} 0 6px 6px -6px`,
+                                borderTop: `1px solid ${modifiedBorderColor}`,
+                                overflow: 'hidden',
+                                cursor: 'pointer',
+                                pointerEvents: 'auto',
+                            },
+                            onmousedown: e => {
+                                e.preventDefault();
+                            },
+                            onclick: (e) => this._onDidClick.fire(( new StandardMouseEvent(getWindow(e), e))),
+                        }, [
+                            n.div({
+                                style: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    width: '100%',
+                                    height: '100%',
+                                    background: asCssVariable(modifiedChangedLineBackgroundColor),
+                                },
+                            })
+                        ]),
+                        n.div({
+                            style: {
+                                position: 'absolute',
+                                padding: '0px',
+                                boxSizing: 'border-box',
+                                ...rectToProps(reader => layout.read(reader).lowerText.translateX(-contentLeft)),
+                                fontFamily: this._editor.getOption(EditorOption.fontFamily),
+                                fontSize: this._editor.getOption(EditorOption.fontSize),
+                                fontWeight: this._editor.getOption(EditorOption.fontWeight),
+                                pointerEvents: 'none',
+                            }
+                        }, [...modifiedLineElements.lines]),
+                        n.div({
+                            style: {
+                                position: 'absolute',
+                                ...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft)),
+                                borderRadius: '4px',
+                                border: `1px solid ${modifiedBorderColor}`,
+                                pointerEvents: 'none',
+                                boxSizing: 'border-box',
+                            }
+                        }, []),
+                    ])
+                ];
+            })
+        ]).keepUpdated(this._store);
+        this.isHovered = this._editor.isTargetHovered((e) => this._isMouseOverWidget(e), this._store);
+        this._previousViewZoneInfo = undefined;
+        this._register(toDisposable(() => this._originalBubblesDecorationCollection.clear()));
+        this._register(toDisposable(() => this._editor.editor.changeViewZones(accessor => this.removePreviousViewZone(accessor))));
+        this._register(autorunDelta(this._viewZoneInfo, ({ lastValue, newValue }) => {
+            if (lastValue === newValue || (lastValue?.height === newValue?.height && lastValue?.lineNumber === newValue?.lineNumber)) {
+                return;
+            }
+            this._editor.editor.changeViewZones((changeAccessor) => {
+                this.removePreviousViewZone(changeAccessor);
+                if (!newValue) {
+                    return;
+                }
+                this.addViewZone(newValue, changeAccessor);
+            });
+        }));
+        this._register(autorun(reader => {
+            const edit = this._edit.read(reader);
+            const originalBubbles = [];
+            if (edit) {
+                originalBubbles.push(...rangesToBubbleRanges(( edit.replacements.map(r => r.originalRange))));
+            }
+            this._originalBubblesDecorationCollection.set(( originalBubbles.map(r => ({ range: r, options: this._originalBubblesDecorationOptions }))));
+        }));
+        this._register(this._editor.createOverlayWidget({
+            domNode: this._div.element,
+            minContentWidthInPx: derived(reader => {
+                return this._layout.read(reader)?.minContentWidthRequired ?? 0;
+            }),
+            position: constObservable({ preference: { top: 0, left: 0 } }),
+            allowEditorOverflow: false,
+        }));
+    }
+    _isMouseOverWidget(e) {
+        const layout = this._layout.get();
+        if (!layout || !(e.event instanceof EditorMouseEvent)) {
+            return false;
+        }
+        return layout.lowerBackground.containsPoint(( new Point(e.event.relativePos.x, e.event.relativePos.y)));
+    }
+    removePreviousViewZone(changeAccessor) {
+        if (!this._previousViewZoneInfo) {
+            return;
+        }
+        changeAccessor.removeZone(this._previousViewZoneInfo.id);
+        const cursorLineNumber = this._editor.cursorLineNumber.get();
+        if (cursorLineNumber !== null && cursorLineNumber >= this._previousViewZoneInfo.lineNumber) {
+            this._editor.editor.setScrollTop(this._editor.scrollTop.get() - this._previousViewZoneInfo.height);
+        }
+        this._previousViewZoneInfo = undefined;
+    }
+    addViewZone(viewZoneInfo, changeAccessor) {
+        const activeViewZone = changeAccessor.addZone({
+            afterLineNumber: viewZoneInfo.lineNumber - 1,
+            heightInPx: viewZoneInfo.height,
+            domNode: $('div'),
+        });
+        this._previousViewZoneInfo = { height: viewZoneInfo.height, lineNumber: viewZoneInfo.lineNumber, id: activeViewZone };
+        const cursorLineNumber = this._editor.cursorLineNumber.get();
+        if (cursorLineNumber !== null && cursorLineNumber >= viewZoneInfo.lineNumber) {
+            this._editor.editor.setScrollTop(this._editor.scrollTop.get() + viewZoneInfo.height);
+        }
+    }
+};
+InlineEditsLineReplacementView = ( __decorate([
+    ( __param(3, ILanguageService))
+], InlineEditsLineReplacementView));
+
+export { InlineEditsLineReplacementView };