@codingame/monaco-vscode-api 10.1.4 → 11.0.1

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

@@ -1,46 +1,63 @@
 import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
-import { h } from '../../../../../../base/browser/dom.js';
-import { renderIcon } from '../../../../../../base/browser/ui/iconLabel/iconLabels.js';
+import { h, svgElem } from '../../../../../../base/browser/dom.js';
 import { numberComparator } from '../../../../../../base/common/arrays.js';
 import { findFirstMin } from '../../../../../../base/common/arraysFind.js';
-import { Codicon } from '../../../../../../base/common/codicons.js';
 import { createHotClass } from '../../../../../../base/common/hotReloadHelpers.js';
 import { Disposable } from '../../../../../../base/common/lifecycle.js';
+import { structuralEquals } from '../../../../../../base/common/equals.js';
 import '../../../../../../base/common/event.js';
 import { autorun } from '../../../../../../base/common/observableInternal/autorun.js';
-import { derivedDisposable, derived } from '../../../../../../base/common/observableInternal/derived.js';
+import { derivedDisposable, derived, derivedOpts } from '../../../../../../base/common/observableInternal/derived.js';
 import { ObservablePromise } from '../../../../../../base/common/observableInternal/promise.js';
 import { derivedWithCancellationToken } from '../../../../../../base/common/observableInternal/utilsCancellation.js';
 import { constObservable, observableFromEvent } from '../../../../../../base/common/observableInternal/utils.js';
 import { splitLines, getIndentationLength } from '../../../../../../base/common/strings.js';
-import { MenuWorkbenchToolBar } from '../../../../../../platform/actions/browser/toolbar.js';
 import { MenuId, MenuItemAction } from '../../../../../../platform/actions/common/actions.js';
 import { IInstantiationService } from '../../../../../../platform/instantiation/common/instantiation.js';
 import { observableCodeEditor } from '../../../../../browser/observableCodeEditor.js';
 import { EmbeddedCodeEditorWidget } from '../../../../../browser/widget/codeEditor/embeddedCodeEditorWidget.js';
 import { IDiffProviderFactoryService } from '../../../../../browser/widget/diffEditor/diffProviderFactoryService.js';
-import { diffWholeLineDeleteDecoration, diffWholeLineAddDecoration, diffDeleteDecorationEmpty, diffAddDecorationEmpty, diffAddDecoration } from '../../../../../browser/widget/diffEditor/registrations.contribution.js';
-import { applyStyle, appendRemoveOnDispose } from '../../../../../browser/widget/diffEditor/utils.js';
+import { appendRemoveOnDispose } from '../../../../../browser/widget/diffEditor/utils.js';
+import { SingleLineEdit } from '../../../../../common/core/lineEdit.js';
 import { LineRange } from '../../../../../common/core/lineRange.js';
 import { OffsetRange } from '../../../../../common/core/offsetRange.js';
 import { Position } from '../../../../../common/core/position.js';
 import { Range } from '../../../../../common/core/range.js';
-import { TextEdit, SingleTextEdit, ArrayText } from '../../../../../common/core/textEdit.js';
+import { SingleTextEdit, TextEdit, StringText } from '../../../../../common/core/textEdit.js';
 import { TextLength } from '../../../../../common/core/textLength.js';
 import { RangeMapping, lineRangeMappingFromRangeMappings } from '../../../../../common/diff/rangeMapping.js';
 import { TextModel } from '../../../../../common/model/textModel.js';
 import { TextModelText } from '../../../../../common/model/textModelText.js';
 import { IModelService } from '../../../../../common/services/model.js';
 import './inlineEditsView.css.js';
-import { UniqueUriGenerator, StatusBarViewItem, maxLeftInRange, applyEditToModifiedRangeMappings, Point } from './utils.js';
+import { OriginalEditorInlineDiffView } from './inlineDiffView.js';
+import { UniqueUriGenerator, applyEditToModifiedRangeMappings, StatusBarViewItem, maxLeftInRange, Point } from './utils.js';
+import { InlineEditsIndicator } from './inlineEditsIndicatorView.js';
+import { registerColor, transparent, darken, lighten } from '../../../../../../platform/theme/common/colorUtils.js';
+import '../../../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../../../platform/theme/common/colors/chartsColors.js';
+import { diffRemoved, diffInserted } 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 '../../../../../../platform/theme/common/colors/miscColors.js';
+import '../../../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../../../platform/theme/common/colors/searchColors.js';
+import { CustomizedMenuWorkbenchToolBar } from '../../hintsWidget/inlineCompletionsHintsWidget.js';
+import { ICommandService } from '../../../../../../platform/commands/common/commands.service.js';
+import { editorLineHighlightBorder } from '../../../../../common/core/editorColorRegistry.js';
+import { ActionViewItem } from '../../../../../../base/browser/ui/actionbar/actionViewItems.js';
+
 var InlineEditsViewAndDiffProducer_1;
 let InlineEditsViewAndDiffProducer = class InlineEditsViewAndDiffProducer extends Disposable {
     static { InlineEditsViewAndDiffProducer_1 = this; }
     static { this.hot = createHotClass(InlineEditsViewAndDiffProducer_1); }
-    constructor(_editor, _edit, _instantiationService, _diffProviderFactoryService, _modelService) {
+    constructor(_editor, _edit, _model, _instantiationService, _diffProviderFactoryService, _modelService) {
         super();
         this._editor = _editor;
         this._edit = _edit;
+        this._model = _model;
         this._instantiationService = _instantiationService;
         this._diffProviderFactoryService = _diffProviderFactoryService;
         this._modelService = _modelService;
@@ -48,27 +65,25 @@ let InlineEditsViewAndDiffProducer = class InlineEditsViewAndDiffProducer extend
         this._originalModel = derivedDisposable(() => this._modelService.createModel('', null, this._modelUriGenerator.getUniqueUri())).keepObserved(this._store);
         this._modifiedModel = derivedDisposable(() => this._modelService.createModel('', null, this._modelUriGenerator.getUniqueUri())).keepObserved(this._store);
         this._inlineEditPromise = derivedWithCancellationToken(this, (reader, token) => {
-            const edit = this._edit.read(reader);
-            if (!edit) {
-                return undefined;
-            }
-            const range = edit.range;
-            if (edit.text.trim() === '') {
+            const inlineEdit = this._edit.read(reader);
+            if (!inlineEdit) {
                 return undefined;
             }
-            this._originalModel.get().setValue(this._editor.getModel().getValueInRange(range));
+            const text = ( new TextModelText(this._editor.getModel()));
+            const edit = inlineEdit.edit.extendToFullLine(text);
+            this._originalModel.get().setValue(this._editor.getModel().getValueInRange(edit.range));
             this._modifiedModel.get().setValue(edit.text);
-            const d = this._diffProviderFactoryService.createDiffProvider({ diffAlgorithm: 'advanced' });
+            const diffAlgo = this._diffProviderFactoryService.createDiffProvider({ diffAlgorithm: 'advanced' });
             return ObservablePromise.fromFn(async () => {
-                const result = await d.computeDiff(this._originalModel.get(), this._modifiedModel.get(), {
+                const result = await diffAlgo.computeDiff(this._originalModel.get(), this._modifiedModel.get(), {
                     computeMoves: false,
                     ignoreTrimWhitespace: false,
                     maxComputationTimeMs: 1000,
                 }, token);
-                if (result.identical) {
+                if (token.isCancellationRequested || result.identical) {
                     return undefined;
                 }
-                const rangeStartPos = Range.lift(edit.range).getStartPosition();
+                const rangeStartPos = edit.range.getStartPosition();
                 const innerChanges = result.changes.flatMap(c => c.innerChanges);
                 function addRangeToPos(pos, range) {
                     const start = TextLength.fromPosition(range.getStartPosition());
@@ -78,31 +93,47 @@ let InlineEditsViewAndDiffProducer = class InlineEditsViewAndDiffProducer extend
                     addRangeToPos(rangeStartPos, c.originalRange),
                     this._modifiedModel.get().getValueInRange(c.modifiedRange)
                 ))));
-                return ( new InlineEditWithChanges(( new TextEdit(edits))));
+                const diffEdits = ( new TextEdit(edits));
+                return ( new InlineEditWithChanges(text, diffEdits, inlineEdit.isCollapsed, true, inlineEdit.commands));
             });
         });
         this._inlineEdit = ( this._inlineEditPromise.map((p, reader) => p?.promiseResult?.read(reader)?.data));
-        this._register(( new InlineEditsView(this._editor, this._inlineEdit, this._instantiationService)));
+        this._register(this._instantiationService.createInstance(InlineEditsView, this._editor, this._inlineEdit, this._model));
     }
 };
 InlineEditsViewAndDiffProducer = InlineEditsViewAndDiffProducer_1 = ( __decorate([
-    ( __param(2, IInstantiationService)),
-    ( __param(3, IDiffProviderFactoryService)),
-    ( __param(4, IModelService))
+    ( __param(3, IInstantiationService)),
+    ( __param(4, IDiffProviderFactoryService)),
+    ( __param(5, IModelService))
 ], InlineEditsViewAndDiffProducer));
 class InlineEditWithChanges {
-    constructor(diffedTextEdit) {
-        this.diffedTextEdit = diffedTextEdit;
-        this.originalLineRange = LineRange.fromRangeInclusive(RangeMapping.fromEditJoin(this.diffedTextEdit).originalRange);
-        this.modifiedLineRange = LineRange.fromRangeInclusive(RangeMapping.fromEditJoin(this.diffedTextEdit).modifiedRange);
+    constructor(originalText, edit, isCollapsed, showInlineIfPossible, commands) {
+        this.originalText = originalText;
+        this.edit = edit;
+        this.isCollapsed = isCollapsed;
+        this.showInlineIfPossible = showInlineIfPossible;
+        this.commands = commands;
+        this.lineEdit = SingleLineEdit.fromSingleTextEdit(this.edit.toSingle(this.originalText), this.originalText);
+        this.originalLineRange = this.lineEdit.lineRange;
+        this.modifiedLineRange = this.lineEdit.toLineEdit().getNewLineRanges()[0];
     }
 }
+registerColor('inlineEdit.originalBackground', ( transparent(diffRemoved, 0.4)), '', true);
+registerColor('inlineEdit.modifiedBackground', ( transparent(diffInserted, 0.4)), '', true);
+registerColor('inlineEdit.border', {
+    light: ( darken(editorLineHighlightBorder, 0.15)),
+    dark: ( lighten(editorLineHighlightBorder, 0.50)),
+    hcDark: editorLineHighlightBorder,
+    hcLight: editorLineHighlightBorder
+}, '');
 let InlineEditsView = class InlineEditsView extends Disposable {
-    constructor(_editor, _edit, _instantiationService) {
+    constructor(_editor, _edit, _model, _instantiationService, _commandService) {
         super();
         this._editor = _editor;
         this._edit = _edit;
+        this._model = _model;
         this._instantiationService = _instantiationService;
+        this._commandService = _commandService;
         this._editorObs = observableCodeEditor(this._editor);
         this._elements = h('div.inline-edits-view', {
             style: {
@@ -116,60 +147,37 @@ let InlineEditsView = class InlineEditsView extends Disposable {
                 h('div.preview@editor', { style: {} }),
                 h('div.toolbar@toolbar', { style: {} }),
             ]),
+            svgElem('svg@svg', { style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' }, }, []),
         ]);
-        this._indicator = h('div.inline-edits-view-indicator', {
-            style: {
-                position: 'absolute',
-                overflow: 'visible',
-            },
-        }, [
-            h('div.icon', {}, [
-                renderIcon(Codicon.arrowLeft),
-            ]),
-            h('div.label', {}, [
-                ' inline edit'
-            ])
-        ]);
-        this._previewEditorWidth = derived(this, reader => {
-            const edit = this._edit.read(reader);
-            if (!edit) {
-                return 0;
-            }
-            return maxLeftInRange(this._previewEditorObs, edit.modifiedLineRange, reader);
-        });
         this._uiState = derived(this, reader => {
             const edit = this._edit.read(reader);
             if (!edit) {
                 return undefined;
             }
-            let newText = edit.diffedTextEdit.apply(( new TextModelText(this._editor.getModel())));
-            let mappings = RangeMapping.fromEdit(edit.diffedTextEdit);
-            const newLines = splitLines(newText);
-            function offsetRangeToRange(offsetRange, startPos) {
-                return ( new Range(
-                    startPos.lineNumber,
-                    startPos.column + offsetRange.start,
-                    startPos.lineNumber,
-                    startPos.column + offsetRange.endExclusive
-                ));
-            }
-            const edits = [];
-            const minIndent = findFirstMin(edit.modifiedLineRange.mapToLineArray(l => getIndentationLength(newLines[l - 1])), numberComparator);
-            edit.modifiedLineRange.forEach(lineNumber => {
-                edits.push(( new SingleTextEdit(offsetRangeToRange(( new OffsetRange(0, minIndent)), ( new Position(lineNumber, 1))), '')));
-            });
-            const indentationAdjustmentEdit = ( new TextEdit(edits));
+            let newText = edit.edit.apply(edit.originalText);
+            const indentationAdjustmentEdit = createReindentEdit(newText, edit.modifiedLineRange);
             newText = indentationAdjustmentEdit.applyToString(newText);
+            let mappings = RangeMapping.fromEdit(edit.edit);
             mappings = applyEditToModifiedRangeMappings(mappings, indentationAdjustmentEdit);
-            const diff = lineRangeMappingFromRangeMappings(mappings, ( new TextModelText(this._editor.getModel())), ( new ArrayText(newLines)));
+            const diff = lineRangeMappingFromRangeMappings(mappings, edit.originalText, ( new StringText(newText)));
+            const originalDisplayRange = edit.originalText.lineRange.intersect(edit.originalLineRange.join(LineRange.ofLength(edit.originalLineRange.startLineNumber, edit.lineEdit.newLines.length)));
+            let state = 'sideBySide';
+            if (edit.isCollapsed) {
+                state = 'collapsed';
+            }
+            else if (edit.showInlineIfPossible && diff.every(m => OriginalEditorInlineDiffView.supportsInlineDiffRendering(m))) {
+                state = 'inline';
+            }
             return {
+                state,
                 diff,
                 edit,
                 newText,
                 newTextLineCount: edit.modifiedLineRange.length,
+                originalDisplayRange: originalDisplayRange,
             };
         });
-        this._toolbar = this._register(this._instantiationService.createInstance(MenuWorkbenchToolBar, this._elements.toolbar, MenuId.InlineEditsActions, {
+        this._toolbar = this._register(this._instantiationService.createInstance(CustomizedMenuWorkbenchToolBar, this._elements.toolbar, MenuId.InlineEditsActions, {
             menuOptions: { renderShortTitle: true },
             toolbarOptions: {
                 primaryGroup: g => g.startsWith('primary'),
@@ -178,8 +186,40 @@ let InlineEditsView = class InlineEditsView extends Disposable {
                 if (action instanceof MenuItemAction) {
                     return this._instantiationService.createInstance(StatusBarViewItem, action, undefined);
                 }
+                if (action.class === undefined) {
+                    return this._instantiationService.createInstance(ActionViewItem, {}, action, { icon: false });
+                }
                 return undefined;
             },
+            telemetrySource: 'inlineEditsToolbar'
+        }));
+        this._extraCommands = derivedOpts({ owner: this, equalsFn: structuralEquals }, reader => {
+            return this._uiState.read(reader)?.edit.commands ?? [];
+        });
+        this._updateToolbarAutorun = this._register(autorun(reader => {
+            const extraCommands = this._extraCommands.read(reader);
+            const primaryExtraActions = [];
+            const secondaryExtraActions = [];
+            for (const c of extraCommands) {
+                const action = {
+                    class: undefined,
+                    id: c.id,
+                    enabled: true,
+                    tooltip: c.tooltip || '',
+                    label: c.title,
+                    run: (event) => {
+                        return this._commandService.executeCommand(c.id, ...(c.arguments ?? []));
+                    },
+                };
+                if (c.title.toLowerCase().indexOf('feedback') !== -1) {
+                    primaryExtraActions.push(action);
+                }
+                else {
+                    secondaryExtraActions.push(action);
+                }
+            }
+            this._toolbar.setAdditionalPrimaryActions(primaryExtraActions);
+            this._toolbar.setAdditionalSecondaryActions(secondaryExtraActions);
         }));
         this._previewTextModel = this._register(this._instantiationService.createInstance(TextModel, '', this._editor.getModel().getLanguageId(), { ...TextModel.DEFAULT_CREATION_OPTIONS, bracketPairColorizationOptions: { enabled: true, independentColorPoolPerBracketType: false } }, null));
         this._previewEditor = this._register(this._instantiationService.createInstance(EmbeddedCodeEditorWidget, this._elements.editor, {
@@ -207,9 +247,15 @@ let InlineEditsView = class InlineEditsView extends Disposable {
                 horizontal: 'hidden',
             },
             readOnly: true,
+            wordWrap: 'off',
         }, { contributions: [], }, this._editor));
         this._previewEditorObs = observableCodeEditor(this._previewEditor);
-        this._ensureModelTextIsSet = derived(reader => {
+        this._previewEditorRootVisibility = derived(this, reader => this._uiState.read(reader)?.state === 'sideBySide' ? 'block' : 'none');
+        this._updatePreviewEditorRootVisibility = derived(reader => {
+            this._elements.root.style.display = this._previewEditorRootVisibility.read(reader);
+        });
+        this._updatePreviewEditor = derived(reader => {
+            this._updatePreviewEditorRootVisibility.read(reader);
             const uiState = this._uiState.read(reader);
             if (!uiState) {
                 return;
@@ -226,89 +272,82 @@ let InlineEditsView = class InlineEditsView extends Disposable {
                 )),
             ], undefined, true);
         }).recomputeInitiallyAndOnChange(this._store);
-        this._decorations = derived(this, (reader) => {
-            this._ensureModelTextIsSet.read(reader);
-            const s = this._uiState.read(reader);
-            if (!s) {
-                return undefined;
-            }
-            const diff = s.diff;
-            const originalDecorations = [];
-            const modifiedDecorations = [];
-            for (const m of diff) {
-                if (m.modified.isEmpty || m.original.isEmpty) {
-                    if (!m.original.isEmpty) {
-                        originalDecorations.push({ range: m.original.toInclusiveRange(), options: diffWholeLineDeleteDecoration });
-                    }
-                    if (!m.modified.isEmpty) {
-                        modifiedDecorations.push({ range: m.modified.toInclusiveRange(), options: diffWholeLineAddDecoration });
-                    }
-                }
-                else {
-                    for (const i of m.innerChanges || []) {
-                        if (m.original.contains(i.originalRange.startLineNumber)) {
-                            originalDecorations.push({
-                                range: i.originalRange, options: i.originalRange.isEmpty() ? diffDeleteDecorationEmpty : {
-                                    className: 'char-delete',
-                                    description: 'char-delete',
-                                    shouldFillLineOnLineBreak: false,
-                                }
-                            });
-                        }
-                        if (m.modified.contains(i.modifiedRange.startLineNumber)) {
-                            modifiedDecorations.push({ range: i.modifiedRange, options: i.modifiedRange.isEmpty() ? diffAddDecorationEmpty : diffAddDecoration });
-                        }
-                    }
-                }
+        this._previewEditorWidth = derived(this, reader => {
+            const edit = this._edit.read(reader);
+            if (!edit) {
+                return 0;
             }
-            return { originalDecorations, modifiedDecorations };
+            this._updatePreviewEditor.read(reader);
+            return maxLeftInRange(this._previewEditorObs, edit.modifiedLineRange, reader);
         });
-        this._layout1 = derived(this, reader => {
-            const inlineEdit = this._edit.read(reader);
-            if (!inlineEdit) {
+        this._previewEditorLeft = derived(this, reader => {
+            const state = this._uiState.read(reader);
+            if (!state) {
                 return null;
             }
-            const maxLeft = maxLeftInRange(this._editorObs, inlineEdit.originalLineRange, reader);
+            const maxLeft = maxLeftInRange(this._editorObs, state.originalDisplayRange, reader);
             const contentLeft = this._editorObs.layoutInfoContentLeft.read(reader);
             return { left: contentLeft + maxLeft };
         });
-        this._layout = derived(this, (reader) => {
+        this._previewEditorLayoutInfo = derived(this, (reader) => {
             const inlineEdit = this._edit.read(reader);
             if (!inlineEdit) {
                 return null;
             }
             const range = inlineEdit.originalLineRange;
             const scrollLeft = this._editorObs.scrollLeft.read(reader);
-            const left = this._layout1.read(reader).left + 20 - scrollLeft;
+            const left = this._previewEditorLeft.read(reader).left + 20 - scrollLeft;
             const selectionTop = this._editor.getTopForLineNumber(range.startLineNumber) - this._editorObs.scrollTop.read(reader);
             const selectionBottom = this._editor.getTopForLineNumber(range.endLineNumberExclusive) - this._editorObs.scrollTop.read(reader);
-            const topCode = ( new Point(left, selectionTop));
-            const bottomCode = ( new Point(left, selectionBottom));
+            const codeLeft = this._editorObs.layoutInfoContentLeft.read(reader);
+            const code1 = ( new Point(left, selectionTop));
+            const codeStart1 = ( new Point(codeLeft, selectionTop));
+            const code2 = ( new Point(left, selectionBottom));
+            const codeStart2 = ( new Point(codeLeft, selectionBottom));
             const codeHeight = selectionBottom - selectionTop;
-            const codeEditDist = 50;
-            const editHeight = this._editor.getOption(69 ) * inlineEdit.modifiedLineRange.length;
-            const topEdit = ( new Point(left + codeEditDist, selectionTop));
-            const bottomEdit = ( new Point(left + codeEditDist, selectionBottom));
+            const codeEditDist = 60;
+            const editHeight = this._editor.getOption(68 ) * inlineEdit.modifiedLineRange.length;
+            const edit1 = ( new Point(left + codeEditDist, selectionTop));
+            const edit2 = ( new Point(left + codeEditDist, selectionTop + editHeight));
             return {
-                topCode,
-                bottomCode,
+                code1,
+                codeStart1,
+                code2,
+                codeStart2,
                 codeHeight,
-                topEdit,
-                bottomEdit,
+                edit1,
+                edit2,
                 editHeight,
             };
         });
-        const visible = derived(this, reader => this._edit.read(reader) !== undefined);
-        this._register(applyStyle(this._elements.root, {
-            display: derived(this, reader => visible.read(reader) ? 'block' : 'none')
-        }));
+        this._inlineDiffViewState = derived(this, reader => {
+            const e = this._uiState.read(reader);
+            if (!e) {
+                return undefined;
+            }
+            return {
+                modifiedText: ( new StringText(e.newText)),
+                diff: e.diff,
+                showInline: e.edit.showInlineIfPossible,
+                modifiedCodeEditor: this._previewEditor,
+            };
+        });
+        this._inlineDiffView = this._register(( new OriginalEditorInlineDiffView(this._editor, this._inlineDiffViewState)));
+        this._indicator = this._register(( new InlineEditsIndicator(this._editorObs, derived(reader => {
+            const state = this._uiState.read(reader);
+            const edit1 = this._previewEditorLayoutInfo.read(reader)?.edit1;
+            if (!edit1 || !state) {
+                return undefined;
+            }
+            return { editTopLeft: edit1, showAlways: state.state === 'collapsed' || state.state === 'inline' };
+        }), this._model)));
         this._register(appendRemoveOnDispose(this._editor.getDomNode(), this._elements.root));
-        this._register(observableCodeEditor(_editor).createOverlayWidget({
+        this._register(this._editorObs.createOverlayWidget({
             domNode: this._elements.root,
             position: constObservable(null),
             allowEditorOverflow: false,
             minContentWidthInPx: derived(reader => {
-                const x = this._layout1.read(reader)?.left;
+                const x = this._previewEditorLeft.read(reader)?.left;
                 if (x === undefined) {
                     return 0;
                 }
@@ -316,34 +355,50 @@ let InlineEditsView = class InlineEditsView extends Disposable {
                 return x + width;
             }),
         }));
-        this._register(observableCodeEditor(_editor).createOverlayWidget({
-            domNode: this._indicator.root,
-            position: constObservable(null),
-            allowEditorOverflow: false,
-            minContentWidthInPx: constObservable(0),
-        }));
         this._previewEditor.setModel(this._previewTextModel);
-        this._register(this._previewEditorObs.setDecorations(( this._decorations.map(d => d?.modifiedDecorations ?? []))));
-        this._register(observableCodeEditor(_editor).setDecorations(( this._decorations.map(d => d?.originalDecorations ?? []))));
         this._register(autorun(reader => {
-            const layoutInfo = this._layout.read(reader);
+            const layoutInfo = this._previewEditorLayoutInfo.read(reader);
             if (!layoutInfo) {
-                this._indicator.root.style.visibility = 'hidden';
+                this._elements.svg.replaceChildren();
                 return;
             }
-            this._indicator.root.style.visibility = '';
-            const { topEdit, editHeight } = layoutInfo;
+            const topEdit = layoutInfo.edit1;
+            const editHeight = layoutInfo.editHeight;
+            const width = this._previewEditorWidth.read(reader) + 10;
+            const pathBuilder1 = ( new PathBuilder());
+            pathBuilder1.moveTo(layoutInfo.code2);
+            pathBuilder1.lineTo(layoutInfo.codeStart2);
+            pathBuilder1.lineTo(layoutInfo.codeStart1);
+            pathBuilder1.lineTo(layoutInfo.code1);
+            const pathBuilder2 = ( new PathBuilder());
+            pathBuilder2.moveTo(layoutInfo.code1);
+            pathBuilder2.lineTo(layoutInfo.edit1);
+            pathBuilder2.lineTo(layoutInfo.edit1.deltaX(width));
+            pathBuilder2.lineTo(layoutInfo.edit2.deltaX(width));
+            pathBuilder2.lineTo(layoutInfo.edit2);
+            pathBuilder2.curveTo2(layoutInfo.edit2.deltaX(-20), layoutInfo.code2.deltaX(20), layoutInfo.code2.deltaX(0));
+            pathBuilder2.lineTo(layoutInfo.code2);
+            const pathBuilder3 = ( new PathBuilder());
+            pathBuilder3.moveTo(layoutInfo.code1);
+            pathBuilder3.lineTo(layoutInfo.code2);
+            const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path1.setAttribute('d', pathBuilder1.build());
+            path1.style.fill = 'var(--vscode-inlineEdit-originalBackground, transparent)';
+            path1.style.stroke = 'var(--vscode-inlineEdit-border)';
+            path1.style.strokeWidth = '1px';
+            const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path2.setAttribute('d', pathBuilder2.build());
+            path2.style.fill = 'var(--vscode-inlineEdit-modifiedBackground, transparent)';
+            path2.style.stroke = 'var(--vscode-inlineEdit-border)';
+            path2.style.strokeWidth = '1px';
+            const path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path3.setAttribute('d', pathBuilder3.build());
+            path3.style.stroke = 'var(--vscode-inlineEdit-border)';
+            path3.style.strokeWidth = '1px';
+            this._elements.svg.replaceChildren(path1, path2, path3);
             this._elements.editorContainer.style.top = `${topEdit.y}px`;
             this._elements.editorContainer.style.left = `${topEdit.x}px`;
-            const width = this._previewEditorWidth.read(reader);
             this._previewEditor.layout({ height: editHeight, width });
-            const i = this._editorObs.layoutInfo.read(reader);
-            const range = ( new OffsetRange(0, i.height - 30));
-            this._indicator.root.classList.toggle('top', topEdit.y < range.start);
-            this._indicator.root.classList.toggle('bottom', topEdit.y > range.endExclusive);
-            this._indicator.root.classList.toggle('contained', range.contains(topEdit.y));
-            this._indicator.root.style.top = `${range.clip(topEdit.y)}px`;
-            this._indicator.root.style.right = `${i.minimap.minimapWidth + i.verticalScrollbarWidth}px`;
         }));
         const toolbarDropdownVisible = observableFromEvent(this, this._toolbar.onDidChangeDropdownVisibility, (e) => e ?? false);
         this._register(autorun(reader => {
@@ -352,6 +407,52 @@ let InlineEditsView = class InlineEditsView extends Disposable {
     }
 };
 InlineEditsView = ( __decorate([
-    ( __param(2, IInstantiationService))
+    ( __param(3, IInstantiationService)),
+    ( __param(4, ICommandService))
 ], InlineEditsView));
-export { InlineEditWithChanges, InlineEditsView, InlineEditsViewAndDiffProducer };
+function classNames(...classes) {
+    return classes.filter(c => typeof c === 'string').join(' ');
+}
+function offsetRangeToRange(columnOffsetRange, startPos) {
+    return ( new Range(
+        startPos.lineNumber,
+        startPos.column + columnOffsetRange.start,
+        startPos.lineNumber,
+        startPos.column + columnOffsetRange.endExclusive
+    ));
+}
+function createReindentEdit(text, range) {
+    const newLines = splitLines(text);
+    const edits = [];
+    const minIndent = findFirstMin(range.mapToLineArray(l => getIndentationLength(newLines[l - 1])), numberComparator);
+    range.forEach(lineNumber => {
+        edits.push(( new SingleTextEdit(offsetRangeToRange(( new OffsetRange(0, minIndent)), ( new Position(lineNumber, 1))), '')));
+    });
+    return ( new TextEdit(edits));
+}
+class PathBuilder {
+    constructor() {
+        this._data = '';
+    }
+    moveTo(point) {
+        this._data += `M ${point.x} ${point.y} `;
+        return this;
+    }
+    lineTo(point) {
+        this._data += `L ${point.x} ${point.y} `;
+        return this;
+    }
+    curveTo(cp, to) {
+        this._data += `Q ${cp.x} ${cp.y} ${to.x} ${to.y} `;
+        return this;
+    }
+    curveTo2(cp1, cp2, to) {
+        this._data += `C ${cp1.x} ${cp1.y} ${cp2.x} ${cp2.y} ${to.x} ${to.y} `;
+        return this;
+    }
+    build() {
+        return this._data;
+    }
+}
+
+export { InlineEditWithChanges, InlineEditsView, InlineEditsViewAndDiffProducer, classNames };

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

@@ -4,10 +4,11 @@ import { OS } from '../../../../../../base/common/platform.js';
 import { URI } from '../../../../../../base/common/uri.js';
 import { MenuEntryActionViewItem } from '../../../../../../platform/actions/browser/menuEntryActionViewItem.js';
 import { RangeMapping } from '../../../../../common/diff/rangeMapping.js';
+
 function maxLeftInRange(editor, range, reader) {
     editor.layoutInfo.read(reader);
     editor.value.read(reader);
-    const model = editor.model.get();
+    const model = editor.model.read(reader);
     if (!model) {
         return 0;
     }
@@ -18,6 +19,10 @@ function maxLeftInRange(editor, range, reader) {
         const left = editor.editor.getOffsetForColumn(i, column);
         maxLeft = Math.max(maxLeft, left);
     }
+    const lines = range.mapToLineArray(l => model.getLineContent(l));
+    if (maxLeft < 5 && ( lines.some(l => l.length > 0)) && model.uri.scheme !== 'file') {
+        console.error('unexpected width');
+    }
     return maxLeft;
 }
 class StatusBarViewItem extends MenuEntryActionViewItem {
@@ -67,4 +72,5 @@ function applyEditToModifiedRangeMappings(rangeMapping, edit) {
     }
     return updatedMappings;
 }
+
 export { Point, StatusBarViewItem, UniqueUriGenerator, applyEditToModifiedRangeMappings, maxLeftInRange };

package/vscode/src/vs/editor/contrib/inlineProgress/browser/inlineProgress.js

@@ -9,6 +9,7 @@ import './inlineProgressWidget.css.js';
 import { Range } from '../../../common/core/range.js';
 import { ModelDecorationOptions } from '../../../common/model/textModel.js';
 import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
+
 const inlineProgressDecoration = ModelDecorationOptions.register({
     description: 'inline-progress-widget',
     stickiness: 1 ,
@@ -41,13 +42,13 @@ class InlineProgressWidget extends Disposable {
         this.domNode.append(iconElement);
         iconElement.classList.add(...ThemeIcon.asClassNameArray(Codicon.loading), 'codicon-modifier-spin');
         const updateSize = () => {
-            const lineHeight = this.editor.getOption(69 );
+            const lineHeight = this.editor.getOption(68 );
             this.domNode.style.height = `${lineHeight}px`;
             this.domNode.style.width = `${Math.ceil(0.8 * lineHeight)}px`;
         };
         updateSize();
         this._register(this.editor.onDidChangeConfiguration(c => {
-            if (c.hasChanged(54 ) || c.hasChanged(69 )) {
+            if (c.hasChanged(54 ) || c.hasChanged(68 )) {
                 updateSize();
             }
         }));
@@ -121,4 +122,5 @@ let InlineProgressManager = class InlineProgressManager extends Disposable {
 InlineProgressManager = ( __decorate([
     ( __param(2, IInstantiationService))
 ], InlineProgressManager));
+
 export { InlineProgressManager };

package/vscode/src/vs/editor/contrib/inlineProgress/browser/inlineProgressWidget.css.js

@@ -1,4 +1,6 @@
 import n from '../../../../../../../external/rollup-plugin-styles/dist/runtime/inject-css.js';
+
 var css = ".inline-editor-progress-decoration{display:inline-block;height:1em;width:1em}.inline-progress-widget{align-items:center;display:flex!important;justify-content:center}.inline-progress-widget .icon{font-size:80%!important}.inline-progress-widget:hover .icon{animation:none;font-size:90%!important}.inline-progress-widget:hover .icon:before{content:var(--vscode-icon-x-content);font-family:var(--vscode-icon-x-font-family)}";
 n(css,{});
+
 export { css, css as default };