add resizing to editor input

eclipse-theia · May 27, 2021 · 6afb8f3 · 6afb8f3
1 parent eafb18e
commit 6afb8f3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/packages/debug/src/browser/editor/debug-breakpoint-widget.tsx b/packages/debug/src/browser/editor/debug-breakpoint-widget.tsx
@@ -25,6 +25,7 @@ import { MonacoEditorZoneWidget } from '@theia/monaco/lib/browser/monaco-editor-
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import { DebugEditor } from './debug-editor';
 import { DebugSourceBreakpoint } from '../model/debug-source-breakpoint';
+import { Dimension } from '@theia/editor/lib/browser';
 
 export type ShowDebugBreakpointOptions = DebugSourceBreakpoint | {
     position: monaco.Position,
@@ -49,6 +50,13 @@ export class DebugBreakpointWidget implements Disposable {
 
     protected readonly toDispose = new DisposableCollection();
 
+    protected expressionInput: MonacoEditor;
+    set expressionInputSize(dimension: Dimension | undefined) {
+        if (this.expressionInput && dimension) {
+            this.expressionInput.setSize(dimension);
+        }
+    }
+
     protected context: DebugBreakpointWidget.Context = 'condition';
     protected _values: {
         [context in DebugBreakpointWidget.Context]?: string
@@ -82,18 +90,17 @@ export class DebugBreakpointWidget implements Disposable {
         const inputNode = document.createElement('div');
         inputNode.classList.add('theia-debug-breakpoint-input');
         this.zone.containerNode.appendChild(inputNode);
-
-        const input = this._input = await this.createInput(inputNode);
+        this.expressionInput = this._input = await this.createInput(inputNode);
         if (this.toDispose.disposed) {
-            input.dispose();
+            this.expressionInput.dispose();
             return;
         }
-        this.toDispose.push(input);
-        this.toDispose.push(monaco.modes.CompletionProviderRegistry.register({ scheme: input.uri.scheme }, {
+        this.toDispose.push(this.expressionInput);
+        this.toDispose.push(monaco.modes.CompletionProviderRegistry.register({ scheme: this.expressionInput.uri.scheme }, {
             provideCompletionItems: async (model, position, context, token) => {
                 const suggestions = [];
                 if ((this.context === 'condition' || this.context === 'logMessage')
-                    && input.uri.toString() === model.uri.toString()) {
+                    && this.expressionInput.uri.toString() === model.uri.toString()) {
                     const editor = this.editor.getControl();
                     const items = await monaco.suggest.provideSuggestionItems(
                         editor.getModel()!,
@@ -120,8 +127,8 @@ export class DebugBreakpointWidget implements Disposable {
             }
         }));
         this.toDispose.push(this.zone.onDidLayoutChange(dimension => this.layout(dimension)));
-        this.toDispose.push(input.getControl().onDidChangeModelContent(() => {
-            const heightInLines = input.getControl().getModel()!.getLineCount() + 1;
+        this.toDispose.push(this.expressionInput.getControl().onDidChangeModelContent(() => {
+            const heightInLines = this.expressionInput.getControl().getModel()!.getLineCount() + 1;
             this.zone.layout(heightInLines);
             this.updatePlaceholder();
         }));

diff --git a/packages/debug/src/browser/editor/debug-editor-model.ts b/packages/debug/src/browser/editor/debug-editor-model.ts
@@ -105,6 +105,7 @@ export class DebugEditorModel implements Disposable {
             this.editor.getControl().onKeyDown(() => this.hover.hide({ immediate: false })),
             this.editor.getControl().onDidChangeModelContent(() => this.update()),
             this.editor.getControl().getModel()!.onDidChangeDecorations(() => this.updateBreakpoints()),
+            this.editor.onResized(e => this.breakpointWidget.expressionInputSize = e),
             this.sessions.onDidChange(() => this.update()),
             this.toDisposeOnUpdate
         ]);

diff --git a/packages/monaco/src/browser/monaco-editor.ts b/packages/monaco/src/browser/monaco-editor.ts
@@ -84,6 +84,8 @@ export class MonacoEditor extends MonacoEditorServices implements TextEditor {
     readonly onLanguageChanged = this.onLanguageChangedEmitter.event;
     protected readonly onScrollChangedEmitter = new Emitter<void>();
     readonly onEncodingChanged = this.document.onDidChangeEncoding;
+    protected readonly onResizeEmitter = new Emitter<Dimension | undefined>();
+    readonly onResized = this.onResizeEmitter.event;
 
     readonly documents = new Set<MonacoEditorModel>();
 
@@ -344,6 +346,7 @@ export class MonacoEditor extends MonacoEditorServices implements TextEditor {
 
     setSize(dimension: Dimension): void {
         this.resize(dimension);
+        this.onResizeEmitter.fire(dimension);
     }
 
     protected autoresize(): void {
@@ -357,6 +360,7 @@ export class MonacoEditor extends MonacoEditorServices implements TextEditor {
         if (this.node) {
             const layoutSize = this.computeLayoutSize(this.node, dimension);
             this.editor.layout(layoutSize);
+            this.onResizeEmitter.fire(undefined);
         }
     }