dotnet · colombod · Apr 19, 2024 · Apr 19, 2024 · Apr 19, 2024 · Apr 19, 2024
diff --git a/src/microsoft-trydotnet-editor/src/EditorAdapter.ts b/src/microsoft-trydotnet-editor/src/EditorAdapter.ts
@@ -34,6 +34,8 @@ export abstract class EditorAdapter {
     abstract setPosition(position: { line: number, column: number }): void;
     abstract updateOptions(options: any): void;
     abstract focus(): void;
+    abstract layout(size: { width: number, height: number }): void;
+
 
     private _diagnostics: polyglotNotebooks.Diagnostic[] = [];
     abstract setMarkers(markers: IMarkerData[]);

diff --git a/src/microsoft-trydotnet-editor/src/monacoAdapterImpl.ts b/src/microsoft-trydotnet-editor/src/monacoAdapterImpl.ts
@@ -37,6 +37,10 @@ export class MonacoEditorAdapter extends editorAdapter.EditorAdapter {
         this._editor.focus();
     }
 
+    layout(size: { width: number, height: number }): void {
+        this._editor.layout(size);
+    }
+
     private _onDidChangeModelContentEvents: rxjs.Subject<monaco.editor.IModelContentChangedEvent> = new rxjs.Subject<monaco.editor.IModelContentChangedEvent>();
 
     constructor(private _editor: monaco.editor.IStandaloneCodeEditor) {

diff --git a/src/microsoft-trydotnet-editor/src/newContract.ts b/src/microsoft-trydotnet-editor/src/newContract.ts
@@ -3,6 +3,7 @@
 import * as polyglotNotebooks from '@microsoft/polyglot-notebooks';
 export const EditorContentChangedType = "EditorContentChanged";
 export const ConfigureMonacoEditorType = "ConfigureMonacoEditor";
+export const SetMonacoEditorSizeType = "SetMonacoEditorSize";
 export const DefineMonacoEditorThemesType = "DefineMonacoEditorThemes";
 export const SetEditorContentType = "SetEditorContent";
 export const EnableLoggingType = "EnableLogging";
@@ -50,6 +51,14 @@ export interface OpenDocument {
     requestId: string;
 }
 
+export interface SetMonacoEditorSize {
+    type: typeof SetMonacoEditorSizeType;
+    size: {
+        width: number,
+        height: number
+    }
+}
+
 export interface CongureMonacoEditor {
     type: typeof ConfigureMonacoEditorType;
     editorOptions?: any,

diff --git a/src/microsoft-trydotnet-editor/src/tryDotNetEditor.ts b/src/microsoft-trydotnet-editor/src/tryDotNetEditor.ts
@@ -126,6 +126,10 @@ export class TryDotNetEditor {
       case newContract.EnableLoggingType:
         configureLogging({ enableLogging: apiMessage.enableLogging });
         break;
+      case newContract.SetMonacoEditorSizeType:
+        let size = (<newContract.SetMonacoEditorSize>apiMessage).size;
+        this.getEditor().layout(size);
+        break;
       case newContract.ConfigureMonacoEditorType:
         let options = {};
         if (apiMessage.editorOptions) {

diff --git a/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts b/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts
@@ -4,6 +4,7 @@
 import * as editorAdapter from "../src/EditorAdapter";
 
 export class MonacoEditorSimulator extends editorAdapter.EditorAdapter {
+
     private _language: string;
     private _themes: { [x: string]: any; } = {};
     private _position: {
@@ -13,9 +14,14 @@ export class MonacoEditorSimulator extends editorAdapter.EditorAdapter {
 
     private _options = {};
     private _code: string;
+    private _size?: { width: number; height: number; }
 
     private _markers: editorAdapter.IMarkerData[];
 
+    layout(size: { width: number; height: number; } | undefined): void {
+        this._size = size;
+    }
+
     setMarkers(markers: editorAdapter.IMarkerData[]) {
         this._markers = markers;
     }

diff --git a/src/microsoft-trydotnet/src/editor.ts b/src/microsoft-trydotnet/src/editor.ts
@@ -38,4 +38,5 @@ export interface IMonacoEditor extends ITextEditor {
     setTheme(theme: Theme): void;
     setOptions(options: MonacoEditorOptions): void;
     configure(configuration: MonacoEditorConfiguration): void;
+    setSize(size: { width: number, height: number }): void;
 }
diff --git a/src/microsoft-trydotnet/src/internals/monacoTextEditor.ts b/src/microsoft-trydotnet/src/internals/monacoTextEditor.ts
@@ -104,6 +104,15 @@ export class MonacoTextEditor implements ITrydotnetMonacoTextEditor {
         this.editorApimessageBus.post(request);
     }
 
+    public setSize(size: { width: number, height: number }): void {
+        const request: newContract.SetMonacoEditorSize = {
+            type: newContract.SetMonacoEditorSizeType,
+            size: size
+        };
+
+        this.editorApimessageBus.post(request);
+    }
+
     public configure(configuration: MonacoEditorConfiguration): void {
         this.setOptions(configuration.options);
         this.setTheme(configuration.theme);

diff --git a/src/microsoft-trydotnet/src/newContract.ts b/src/microsoft-trydotnet/src/newContract.ts
@@ -3,6 +3,7 @@
 import * as polyglotNotebooks from '@microsoft/polyglot-notebooks';
 export const EditorContentChangedType = "EditorContentChanged";
 export const ConfigureMonacoEditorType = "ConfigureMonacoEditor";
+export const SetMonacoEditorSizeType = "SetMonacoEditorSize";
 export const DefineMonacoEditorThemesType = "DefineMonacoEditorThemes";
 export const SetEditorContentType = "SetEditorContent";
 export const EnableLoggingType = "EnableLogging";
@@ -50,6 +51,14 @@ export interface OpenDocument {
     requestId: string;
 }
 
+export interface SetMonacoEditorSize {
+    type: typeof SetMonacoEditorSizeType;
+    size: {
+        width: number,
+        height: number
+    }
+}
+
 export interface CongureMonacoEditor {
     type: typeof ConfigureMonacoEditorType;
     editorOptions?: any,

diff --git a/src/microsoft-trydotnet/src/sessionFactory.ts b/src/microsoft-trydotnet/src/sessionFactory.ts
@@ -9,6 +9,7 @@ import { configureEmbeddableEditorIFrame, configureEmbeddableEditorIFrameWithPac
 import { Project } from "./project";
 import { Logger } from "@microsoft/polyglot-notebooks";
 import { configureLogging } from "./log";
+import { IMonacoEditor } from "./editor";
 
 async function _createSession(configuration: Configuration, editorIFrame: HTMLIFrameElement, window: Window, initialState: InitialSessionState, configureEmbeddableEditorIFrameCallBack: (editorIFrame: HTMLIFrameElement, configuration: Configuration) => void): Promise<ISession> {
 
@@ -18,6 +19,25 @@ async function _createSession(configuration: Configuration, editorIFrame: HTMLIF
   let messageBus = new IFrameMessageBus(editorIFrame, window);
   let session = new Session(messageBus);
 
+  // listen for size and visibility changes
+  try {
+    const resizeObserver = new ResizeObserver((entries, _observer) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        let editor = <IMonacoEditor>(session.getTextEditor());
+        editor.setSize({ width, height });
+      }
+    });
+
+    resizeObserver.observe(editorIFrame);
+  } catch (e) {
+    Logger.default.error("Error creating ResizeObserver");
+  }
+
+  editorIFrame.addEventListener("load", () => {
+    configureEmbeddableEditorIFrameCallBack(editorIFrame, configuration);
+  });
+
   let src = editorIFrame.getAttribute("src");
   if (!src) {
     configureEmbeddableEditorIFrameCallBack(messageBus.targetIframe(), configuration);

diff --git a/src/microsoft-trydotnet/test/fakes/fakeMonacoTextEditor.ts b/src/microsoft-trydotnet/test/fakes/fakeMonacoTextEditor.ts
@@ -18,6 +18,9 @@ export class FakeMonacoTextEditor implements ITrydotnetMonacoTextEditor {
             this.editorId = "0";
         }
     }
+    setSize(size: { width: number; height: number; }): void {
+
+    }
 
     public id(): string {
         return this.editorId;