Tweak editor resizing

Author: Ives van Hoorne

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -149,7 +149,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     this.typingsFetcherWorker = null;
     this.sizeProbeInterval = null;
 
-    this.resizeEditor = debounce(this.resizeEditor, 500);
+    this.resizeEditor = debounce(this.resizeEditor, 150);
     this.commitLibChanges = debounce(this.commitLibChanges, 300);
     this.onSelectionChangedDebounced = debounce(
       this.onSelectionChangedDebounced,
@@ -167,6 +167,15 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       this.resizeEditorInstantly();
     }
 
+    if (
+      this.props.absoluteWidth &&
+      this.props.absoluteHeight &&
+      (this.props.absoluteWidth !== nextProps.absoluteWidth ||
+        this.props.absoluteHeight !== nextProps.absoluteHeight)
+    ) {
+      this.resizeEditor();
+    }
+
     if (this.props.readOnly !== nextProps.readOnly && this.editor) {
       this.editor.updateOptions({ readOnly: !!nextProps.readOnly });
     }
@@ -256,10 +265,13 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     // this.addKeyCommands();
 
     window.addEventListener('resize', this.resizeEditor);
-    this.sizeProbeInterval = setInterval(
-      this.resizeEditorInstantly.bind(this),
-      3000
-    );
+    this.sizeProbeInterval = setInterval(() => {
+      if (this.props.absoluteWidth && this.props.absoluteHeight) {
+        return;
+      }
+
+      this.resizeEditorInstantly();
+    }, 3000);
 
     const { dependencies } = this;
     if (dependencies != null) {

packages/app/src/app/components/CodeEditor/types.js

@@ -59,6 +59,8 @@ export interface Editor {
   setReceivingCode?: (receivingCode: boolean) => void;
   applyOperations?: (operations: { [moduleShortid: string]: any }) => void;
   updateUserSelections?: (selections: any) => void;
+  absoluteWidth?: number;
+  absoluteHeight?: number;
 }
 
 export type Props = {

packages/app/src/app/pages/Sandbox/Editor/Content/index.js

@@ -437,6 +437,8 @@ class EditorPreview extends React.Component<Props, State> {
               )}
               width={editorWidth}
               height={editorHeight}
+              absoluteWidth={this.state.width}
+              absoluteHeight={this.state.height}
               settings={settings(store)}
               sendTransforms={this.sendTransforms}
               readOnly={store.live.isLive && !store.live.isCurrentEditor}