@codingame/monaco-vscode-api 1.85.0 → 1.85.2

package/vscode/src/vs/workbench/contrib/inlineChat/browser/inlineChatLivePreviewWidget.js

@@ -0,0 +1,431 @@
+import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
+import { h, Dimension, runAtThisOrScheduleAtNextAnimationFrame, getWindow } from 'monaco-editor/esm/vs/base/browser/dom.js';
+import { MutableDisposable, DisposableStore } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import { assertType } from 'monaco-editor/esm/vs/base/common/types.js';
+import { EmbeddedCodeEditorWidget, EmbeddedDiffEditorWidget } from 'monaco-editor/esm/vs/editor/browser/widget/embeddedCodeEditorWidget.js';
+import { ZoneWidget } from 'monaco-editor/esm/vs/editor/contrib/zoneWidget/browser/zoneWidget.js';
+import { IInstantiationService } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation.js';
+import * as colorRegistry from 'monaco-editor/esm/vs/platform/theme/common/colorRegistry.js';
+import * as editorColorRegistry from 'monaco-editor/esm/vs/editor/common/core/editorColorRegistry.js';
+import { IThemeService } from 'monaco-editor/esm/vs/platform/theme/common/themeService.js';
+import { INLINE_CHAT_ID, inlineChatRegionHighlight, inlineChatDiffInserted, inlineChatDiffRemoved } from '../common/inlineChat.js';
+import { LineRange } from 'monaco-editor/esm/vs/editor/common/core/lineRange.js';
+import { Position } from 'monaco-editor/esm/vs/editor/common/core/position.js';
+import { EditorExtensionsRegistry } from 'monaco-editor/esm/vs/editor/browser/editorExtensions.js';
+import { ILogService } from 'monaco-editor/esm/vs/platform/log/common/log.js';
+import { lineRangeAsRange, invertLineRange } from './utils.js';
+import { ResourceLabel } from '../../../browser/labels.js';
+import { FileKind } from 'monaco-editor/esm/vs/platform/files/common/files.js';
+import { FoldingController } from 'monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js';
+import { IAccessibilityService } from 'monaco-editor/esm/vs/platform/accessibility/common/accessibility.js';
+import { generateUuid } from 'monaco-editor/esm/vs/base/common/uuid.js';
+import { ITextModelService } from 'monaco-editor/esm/vs/editor/common/services/resolverService.js';
+import { ButtonBar } from 'monaco-editor/esm/vs/base/browser/ui/button/button.js';
+import { defaultButtonStyles } from 'monaco-editor/esm/vs/platform/theme/browser/defaultStyles.js';
+import { SideBySideEditor } from '../../../common/editor.js';
+import { IEditorService } from '../../../services/editor/common/editorService.js';
+import { IContextMenuService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextView.js';
+import { toAction } from 'monaco-editor/esm/vs/base/common/actions.js';
+import { renderIcon } from 'monaco-editor/esm/vs/base/browser/ui/iconLabel/iconLabels.js';
+import { Codicon } from 'monaco-editor/esm/vs/base/common/codicons.js';
+import { TAB_ACTIVE_MODIFIED_BORDER } from '../../../common/theme.js';
+import { localizeWithPath } from 'monaco-editor/esm/vs/nls.js';
+import { Event } from 'monaco-editor/esm/vs/base/common/event.js';
+var InlineChatFileCreatePreviewWidget_1;
+let InlineChatLivePreviewWidget = class InlineChatLivePreviewWidget extends ZoneWidget {
+    constructor(editor, _session, options, onDidChangeDiff, instantiationService, themeService, _logService, accessibilityService) {
+        super(editor, { showArrow: false, showFrame: false, isResizeable: false, isAccessible: true, allowUnlimitedHeight: true, showInHiddenAreas: true, keepEditorSelection: true, ordinal: 10000 + 1 });
+        this._session = _session;
+        this._logService = _logService;
+        this.accessibilityService = accessibilityService;
+        this._hideId = `overlayDiff:${generateUuid()}`;
+        this._elements = h('div.inline-chat-diff-widget@domNode');
+        this._isVisible = false;
+        super.create();
+        assertType(editor.hasModel());
+        this._decorationCollection = editor.createDecorationsCollection();
+        const diffContributions = EditorExtensionsRegistry
+            .getEditorContributions()
+            .filter(c => c.id !== INLINE_CHAT_ID && c.id !== FoldingController.ID);
+        this._diffEditor = instantiationService.createInstance(EmbeddedDiffEditorWidget, this._elements.domNode, {
+            scrollbar: { useShadows: false, alwaysConsumeMouseWheel: false, ignoreHorizontalScrollbarInContentHeight: true, },
+            scrollBeyondLastLine: false,
+            renderMarginRevertIcon: true,
+            renderOverviewRuler: false,
+            rulers: undefined,
+            overviewRulerBorder: undefined,
+            overviewRulerLanes: 0,
+            diffAlgorithm: 'advanced',
+            splitViewDefaultRatio: 0.35,
+            padding: { top: 0, bottom: 0 },
+            folding: false,
+            diffCodeLens: false,
+            stickyScroll: { enabled: false },
+            minimap: { enabled: false },
+            isInEmbeddedEditor: true,
+            useInlineViewWhenSpaceIsLimited: false,
+            overflowWidgetsDomNode: editor.getOverflowWidgetsDomNode(),
+            onlyShowAccessibleDiffViewer: this.accessibilityService.isScreenReaderOptimized(),
+            ...options
+        }, {
+            originalEditor: { contributions: diffContributions },
+            modifiedEditor: { contributions: diffContributions }
+        }, editor);
+        this._disposables.add(this._diffEditor);
+        this._diffEditor.setModel({ original: this._session.textModel0, modified: editor.getModel() });
+        this._diffEditor.updateOptions({
+            lineDecorationsWidth: editor.getLayoutInfo().decorationsWidth
+        });
+        if (onDidChangeDiff) {
+            this._disposables.add(this._diffEditor.onDidUpdateDiff(() => { onDidChangeDiff(); }));
+            const render = this._disposables.add(( new MutableDisposable()));
+            this._disposables.add(this._diffEditor.onDidContentSizeChange(e => {
+                if (!this._isVisible || !e.contentHeightChanged) {
+                    return;
+                }
+                render.value = runAtThisOrScheduleAtNextAnimationFrame(getWindow(this._diffEditor.getContainerDomNode()), () => {
+                    const lineHeight = this.editor.getOption(66 );
+                    const heightInLines = e.contentHeight / lineHeight;
+                    this._logService.debug(`[IE] relaying with ${heightInLines} lines height`);
+                    this._relayout(heightInLines);
+                });
+            }));
+        }
+        const doStyle = () => {
+            const theme = themeService.getColorTheme();
+            const overrides = [
+                [colorRegistry.editorBackground, inlineChatRegionHighlight],
+                [editorColorRegistry.editorGutter, inlineChatRegionHighlight],
+                [colorRegistry.diffInsertedLine, inlineChatDiffInserted],
+                [colorRegistry.diffInserted, inlineChatDiffInserted],
+                [colorRegistry.diffRemovedLine, inlineChatDiffRemoved],
+                [colorRegistry.diffRemoved, inlineChatDiffRemoved],
+            ];
+            for (const [target, source] of overrides) {
+                const value = theme.getColor(source);
+                if (value) {
+                    this._elements.domNode.style.setProperty(colorRegistry.asCssVariableName(target), String(value));
+                }
+            }
+        };
+        doStyle();
+        this._disposables.add(themeService.onDidColorThemeChange(doStyle));
+    }
+    _fillContainer(container) {
+        container.appendChild(this._elements.domNode);
+    }
+    get isVisible() {
+        return this._isVisible;
+    }
+    hide() {
+        this._decorationCollection.clear();
+        this._cleanupFullDiff();
+        super.hide();
+        this._isVisible = false;
+    }
+    show() {
+        throw new Error('use showForChanges');
+    }
+    showForChanges(changes) {
+        const hasFocus = this._diffEditor.hasTextFocus();
+        this._isVisible = true;
+        const onlyInserts = changes.every(change => change.original.isEmpty);
+        if (onlyInserts || changes.length === 0 || this._session.textModel0.getValueLength() === 0) {
+            this._logService.debug('[IE] livePreview-mode: no diff');
+            this._cleanupFullDiff();
+            this._renderInsertWithHighlight(changes);
+        }
+        else {
+            this._logService.debug('[IE] livePreview-mode: full diff');
+            this._decorationCollection.clear();
+            this._renderChangesWithFullDiff(changes);
+        }
+        if (hasFocus) {
+            this._diffEditor.focus();
+        }
+    }
+    _renderInsertWithHighlight(changes) {
+        assertType(this.editor.hasModel());
+        const options = {
+            description: 'inline-chat-insert',
+            showIfCollapsed: false,
+            isWholeLine: true,
+            className: 'inline-chat-lines-inserted-range',
+        };
+        this._decorationCollection.set(( changes.map(change => {
+            return {
+                range: lineRangeAsRange(change.modified),
+                options,
+            };
+        })));
+    }
+    _renderChangesWithFullDiff(changes) {
+        assertType(this.editor.hasModel());
+        const modified = this.editor.getModel();
+        const ranges = this._computeHiddenRanges(modified, changes);
+        this._hideEditorRanges(this.editor, [ranges.modifiedHidden]);
+        this._hideEditorRanges(this._diffEditor.getOriginalEditor(), ranges.originalDiffHidden);
+        this._hideEditorRanges(this._diffEditor.getModifiedEditor(), ranges.modifiedDiffHidden);
+        const lineCountModified = ranges.modifiedHidden.length;
+        const lineCountOriginal = ranges.originalHidden.length;
+        const heightInLines = Math.max(lineCountModified, lineCountOriginal);
+        super.show(ranges.anchor, heightInLines);
+        this._logService.debug(`[IE] diff SHOWING at ${ranges.anchor} with ${heightInLines} (approx) lines height`);
+    }
+    _cleanupFullDiff() {
+        this.editor.setHiddenAreas([], this._hideId);
+        this._diffEditor.getOriginalEditor().setHiddenAreas([], this._hideId);
+        this._diffEditor.getModifiedEditor().setHiddenAreas([], this._hideId);
+        super.hide();
+        this._isVisible = false;
+    }
+    _computeHiddenRanges(model, changes) {
+        let originalLineRange = changes[0].original;
+        let modifiedLineRange = changes[0].modified;
+        for (let i = 1; i < changes.length; i++) {
+            originalLineRange = originalLineRange.join(changes[i].original);
+            modifiedLineRange = modifiedLineRange.join(changes[i].modified);
+        }
+        if (originalLineRange.isEmpty) {
+            originalLineRange = ( new LineRange(
+                originalLineRange.startLineNumber,
+                originalLineRange.endLineNumberExclusive + 1
+            ));
+        }
+        const originalDiffHidden = invertLineRange(originalLineRange, this._session.textModel0);
+        const modifiedDiffHidden = invertLineRange(modifiedLineRange, model);
+        return {
+            originalHidden: originalLineRange,
+            originalDiffHidden,
+            modifiedHidden: modifiedLineRange,
+            modifiedDiffHidden,
+            anchor: ( new Position(modifiedLineRange.startLineNumber - 1, 1))
+        };
+    }
+    _hideEditorRanges(editor, lineRanges) {
+        assertType(editor.hasModel());
+        lineRanges = lineRanges.filter(range => !range.isEmpty);
+        if (lineRanges.length === 0) {
+            this._logService.debug(`[IE] diff NOTHING to hide for ${editor.getId()} with ${String(editor.getModel()?.uri)}`);
+            return;
+        }
+        let hiddenRanges;
+        const hiddenLinesCount = lineRanges.reduce((p, c) => p + c.length, 0);
+        if (hiddenLinesCount >= editor.getModel().getLineCount()) {
+            hiddenRanges = [editor.getModel().getFullModelRange().delta(1)];
+        }
+        else {
+            hiddenRanges = ( lineRanges.map(lineRangeAsRange));
+        }
+        editor.setHiddenAreas(hiddenRanges, this._hideId);
+        this._logService.debug(`[IE] diff HIDING ${hiddenRanges} for ${editor.getId()} with ${String(editor.getModel()?.uri)}`);
+    }
+    revealRange(range, isLastLine) {
+    }
+    _onWidth(widthInPixel) {
+        if (this._dim) {
+            this._doLayout(this._dim.height, widthInPixel);
+        }
+    }
+    _doLayout(heightInPixel, widthInPixel) {
+        const newDim = ( new Dimension(widthInPixel, heightInPixel));
+        if (!Dimension.equals(this._dim, newDim)) {
+            this._dim = newDim;
+            this._diffEditor.layout(this._dim.with(undefined, this._dim.height));
+            this._logService.debug('[IE] diff LAYOUT', this._dim);
+        }
+    }
+};
+InlineChatLivePreviewWidget = ( __decorate([
+    ( __param(4, IInstantiationService)),
+    ( __param(5, IThemeService)),
+    ( __param(6, ILogService)),
+    ( __param(7, IAccessibilityService))
+], InlineChatLivePreviewWidget));
+let InlineChatFileCreatePreviewWidget = class InlineChatFileCreatePreviewWidget extends ZoneWidget {
+    static { InlineChatFileCreatePreviewWidget_1 = this; }
+    static { this.TitleHeight = 35; }
+    constructor(parentEditor, instaService, themeService, _textModelResolverService, _editorService) {
+        super(parentEditor, {
+            showArrow: false,
+            showFrame: true,
+            frameColor: colorRegistry.asCssVariable(TAB_ACTIVE_MODIFIED_BORDER),
+            frameWidth: 1,
+            isResizeable: true,
+            isAccessible: true,
+            showInHiddenAreas: true,
+            ordinal: 10000 + 2
+        });
+        this._textModelResolverService = _textModelResolverService;
+        this._editorService = _editorService;
+        this._elements = h('div.inline-chat-newfile-widget@domNode', [
+            h('div.title@title', [
+                h('span.name.show-file-icons@name'),
+                h('span.detail@detail'),
+            ]),
+            h('div.editor@editor'),
+        ]);
+        this._previewStore = ( new MutableDisposable());
+        super.create();
+        this._name = instaService.createInstance(ResourceLabel, this._elements.name, { supportIcons: true });
+        this._elements.detail.appendChild(renderIcon(Codicon.circleFilled));
+        const contributions = EditorExtensionsRegistry
+            .getEditorContributions()
+            .filter(c => c.id !== INLINE_CHAT_ID);
+        this._previewEditor = instaService.createInstance(EmbeddedCodeEditorWidget, this._elements.editor, {
+            scrollBeyondLastLine: false,
+            stickyScroll: { enabled: false },
+            minimap: { enabled: false },
+            scrollbar: { alwaysConsumeMouseWheel: false, useShadows: true, ignoreHorizontalScrollbarInContentHeight: true, },
+        }, { isSimpleWidget: true, contributions }, parentEditor);
+        const doStyle = () => {
+            const theme = themeService.getColorTheme();
+            const overrides = [
+                [colorRegistry.editorBackground, inlineChatRegionHighlight],
+                [editorColorRegistry.editorGutter, inlineChatRegionHighlight],
+            ];
+            for (const [target, source] of overrides) {
+                const value = theme.getColor(source);
+                if (value) {
+                    this._elements.domNode.style.setProperty(colorRegistry.asCssVariableName(target), String(value));
+                }
+            }
+        };
+        doStyle();
+        this._disposables.add(themeService.onDidColorThemeChange(doStyle));
+        this._buttonBar = instaService.createInstance(ButtonBarWidget);
+        this._elements.title.appendChild(this._buttonBar.domNode);
+    }
+    dispose() {
+        this._name.dispose();
+        this._buttonBar.dispose();
+        this._previewEditor.dispose();
+        this._previewStore.dispose();
+        super.dispose();
+    }
+    _fillContainer(container) {
+        container.appendChild(this._elements.domNode);
+    }
+    show() {
+        throw new Error('Use showFileCreation');
+    }
+    async showCreation(where, untitledTextModel) {
+        const store = ( new DisposableStore());
+        this._previewStore.value = store;
+        this._name.element.setFile(untitledTextModel.resource, {
+            fileKind: FileKind.FILE,
+            fileDecorations: { badges: true, colors: true }
+        });
+        const actionSave = toAction({
+            id: '1',
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/inlineChat/browser/inlineChatLivePreviewWidget',
+                'save',
+                "Create"
+            )),
+            run: () => untitledTextModel.save({ reason: 1  })
+        });
+        const actionSaveAs = toAction({
+            id: '2',
+            label: ( localizeWithPath(
+                'vs/workbench/contrib/inlineChat/browser/inlineChatLivePreviewWidget',
+                'saveAs',
+                "Create As"
+            )),
+            run: async () => {
+                const ids = this._editorService.findEditors(untitledTextModel.resource, { supportSideBySide: SideBySideEditor.ANY });
+                await this._editorService.save(ids.slice(), { saveAs: true, reason: 1  });
+            }
+        });
+        this._buttonBar.update([
+            [actionSave, actionSaveAs],
+            [(toAction({ id: '3', label: ( localizeWithPath(
+                'vs/workbench/contrib/inlineChat/browser/inlineChatLivePreviewWidget',
+                'discard',
+                "Discard"
+            )), run: () => untitledTextModel.revert() }))]
+        ]);
+        store.add(Event.any(untitledTextModel.onDidRevert, untitledTextModel.onDidSave, untitledTextModel.onDidChangeDirty, untitledTextModel.onWillDispose)(() => this.hide()));
+        await untitledTextModel.resolve();
+        const ref = await this._textModelResolverService.createModelReference(untitledTextModel.resource);
+        store.add(ref);
+        const model = ref.object.textEditorModel;
+        this._previewEditor.setModel(model);
+        const lineHeight = this.editor.getOption(66 );
+        this._elements.title.style.height = `${InlineChatFileCreatePreviewWidget_1.TitleHeight}px`;
+        const titleHightInLines = InlineChatFileCreatePreviewWidget_1.TitleHeight / lineHeight;
+        const maxLines = Math.max(4, Math.floor((this.editor.getLayoutInfo().height / lineHeight) * .33));
+        const lines = Math.min(maxLines, model.getLineCount());
+        super.show(where, titleHightInLines + lines);
+    }
+    hide() {
+        this._previewStore.clear();
+        super.hide();
+    }
+    revealRange(range, isLastLine) {
+    }
+    _onWidth(widthInPixel) {
+        if (this._dim) {
+            this._doLayout(this._dim.height, widthInPixel);
+        }
+    }
+    _doLayout(heightInPixel, widthInPixel) {
+        const { lineNumbersLeft } = this.editor.getLayoutInfo();
+        this._elements.title.style.marginLeft = `${lineNumbersLeft}px`;
+        const newDim = ( new Dimension(widthInPixel, heightInPixel));
+        if (!Dimension.equals(this._dim, newDim)) {
+            this._dim = newDim;
+            this._previewEditor.layout(this._dim.with(undefined, this._dim.height - InlineChatFileCreatePreviewWidget_1.TitleHeight));
+        }
+    }
+};
+InlineChatFileCreatePreviewWidget = InlineChatFileCreatePreviewWidget_1 = ( __decorate([
+    ( __param(1, IInstantiationService)),
+    ( __param(2, IThemeService)),
+    ( __param(3, ITextModelService)),
+    ( __param(4, IEditorService))
+], InlineChatFileCreatePreviewWidget));
+let ButtonBarWidget = class ButtonBarWidget {
+    constructor(_contextMenuService) {
+        this._contextMenuService = _contextMenuService;
+        this._domNode = h('div.buttonbar-widget');
+        this._store = ( new DisposableStore());
+        this._buttonBar = ( new ButtonBar(this.domNode));
+    }
+    update(allActions) {
+        this._buttonBar.clear();
+        let secondary = false;
+        for (const actions of allActions) {
+            let btn;
+            const [first, ...rest] = actions;
+            if (!first) {
+                continue;
+            }
+            else if (rest.length === 0) {
+                btn = this._buttonBar.addButton({ ...defaultButtonStyles, secondary });
+            }
+            else {
+                btn = this._buttonBar.addButtonWithDropdown({
+                    ...defaultButtonStyles,
+                    addPrimaryActionToDropdown: false,
+                    actions: rest,
+                    contextMenuProvider: this._contextMenuService
+                });
+            }
+            btn.label = first.label;
+            this._store.add(btn.onDidClick(() => first.run()));
+            secondary = true;
+        }
+    }
+    dispose() {
+        this._buttonBar.dispose();
+        this._store.dispose();
+    }
+    get domNode() {
+        return this._domNode.root;
+    }
+};
+ButtonBarWidget = ( __decorate([
+    ( __param(0, IContextMenuService))
+], ButtonBarWidget));
+export { InlineChatFileCreatePreviewWidget, InlineChatLivePreviewWidget };