From b0b51c656e6d519e8e89169a0d90daad6cdf64e3 Mon Sep 17 00:00:00 2001
From: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
Date: Mon, 21 May 2018 21:49:01 +0900
Subject: [PATCH] Fix/monaco resizing (#82)

* Reworked the way that the editor and output are rendered when the browser window / panes are resized horizontally. Moved the ReflexContainer elements into the editors variable to get vertical resizing working. Also, removed the margin-bottom property from the .editor class in classic.css and set overflow to hidden in .react-monaco-editor-container. By doing this it prevents the browser scrollbars from appearing and removes the white space at the bottom of the editor / output panes when scrolling all the way down past the code.
---
 .../templates/Challenges/classic/Editor.js    |  7 +++
 .../src/templates/Challenges/classic/Show.js  | 15 +++---
 .../templates/Challenges/classic/classic.css  |  4 +-
 .../templates/Challenges/components/Output.js | 49 ++++++++++++++-----
 4 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/packages/learn/src/templates/Challenges/classic/Editor.js b/packages/learn/src/templates/Challenges/classic/Editor.js
index 13f4989f00..b72972d83d 100644
--- a/packages/learn/src/templates/Challenges/classic/Editor.js
+++ b/packages/learn/src/templates/Challenges/classic/Editor.js
@@ -8,6 +8,7 @@ import { executeChallenge, updateFile } from '../redux';
 
 const propTypes = {
   contents: PropTypes.string,
+  dimensions: PropTypes.object,
   executeChallenge: PropTypes.func.isRequired,
   ext: PropTypes.string,
   fileKey: PropTypes.string,
@@ -80,6 +81,12 @@ class Editor extends PureComponent {
     updateFile({ key: fileKey, editorValue });
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.dimensions !== prevProps.dimensions && this._editor) {
+      this._editor.layout();
+    }
+  }
+
   render() {
     const { contents, ext } = this.props;
     return (
diff --git a/packages/learn/src/templates/Challenges/classic/Show.js b/packages/learn/src/templates/Challenges/classic/Show.js
index 63e04a16b9..6a0ae113fd 100644
--- a/packages/learn/src/templates/Challenges/classic/Show.js
+++ b/packages/learn/src/templates/Challenges/classic/Show.js
@@ -142,14 +142,14 @@ class ShowClassic extends PureComponent {
     const editors = Object.keys(files)
       .map(key => files[key])
       .map((file, index) => (
-        <Fragment key={file.key + index}>
+        <ReflexContainer orientation='horizontal' key={file.key + index}>
           {index !== 0 && <ReflexSplitter />}
-          <ReflexElement flex={1}>
+          <ReflexElement flex={1} propagateDimensions={true} renderOnResize={true} renderOnResizeRate={20}>
             <Editor {...file} fileKey={file.key} />
           </ReflexElement>
-          {index + 1 === Object.keys(files).length && <ReflexSplitter />}
+          {index + 1 === Object.keys(files).length && <ReflexSplitter propagate={true} />}
           {index + 1 === Object.keys(files).length ? (
-            <ReflexElement flex={0.25}>
+            <ReflexElement flex={0.25} propagateDimensions={true} renderOnResize={true} renderOnResizeRate={20}>
               <Output
                 defaultOutput={`
 /**
@@ -162,9 +162,8 @@ class ShowClassic extends PureComponent {
               />
             </ReflexElement>
           ) : null}
-        </Fragment>
+        </ReflexContainer>
       ));
-
     const showPreview =
       challengeType === challengeTypes.html ||
       challengeType === challengeTypes.modern;
@@ -184,9 +183,7 @@ class ShowClassic extends PureComponent {
           </ReflexElement>
           <ReflexSplitter />
           <ReflexElement flex={1}>
-            <ReflexContainer orientation='horizontal'>
-              {editors}
-            </ReflexContainer>
+            {editors}
           </ReflexElement>
           <ReflexSplitter />
           <ReflexElement flex={0.5}>
diff --git a/packages/learn/src/templates/Challenges/classic/classic.css b/packages/learn/src/templates/Challenges/classic/classic.css
index af0e05bf46..b46f229576 100644
--- a/packages/learn/src/templates/Challenges/classic/classic.css
+++ b/packages/learn/src/templates/Challenges/classic/classic.css
@@ -1,6 +1,5 @@
-.editor{
+.editor {
   height: 100%;
-  margin-bottom: 1.45rem;
 }
 
 .instructions-panel {
@@ -12,6 +11,7 @@
   height: 100%;
   display: flex;
   align-items: end;
+  overflow: hidden;
 }
 
 .monaco-menu .action-label { 
diff --git a/packages/learn/src/templates/Challenges/components/Output.js b/packages/learn/src/templates/Challenges/components/Output.js
index cb5c9afd20..5f2dc4f866 100644
--- a/packages/learn/src/templates/Challenges/components/Output.js
+++ b/packages/learn/src/templates/Challenges/components/Output.js
@@ -1,9 +1,10 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import MonacoEditor from 'react-monaco-editor';
 
 const propTypes = {
   defaultOutput: PropTypes.string,
+  dimensions: PropTypes.object,
   height: PropTypes.number,
   output: PropTypes.string
 };
@@ -21,18 +22,40 @@ const options = {
   wordWrap: 'on'
 };
 
-function Output({ output, defaultOutput, height }) {
-  return (
-    <Fragment>
-      <base href='/' />
-      <MonacoEditor
-        className='challenge-output'
-        height={height}
-        options={options}
-        value={output ? output : defaultOutput}
-      />
-    </Fragment>
-  );
+class Output extends PureComponent {
+  constructor() {
+    super();
+
+    this._editor = null;
+  }
+
+  editorDidMount(editor) {
+    this._editor = editor;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.dimensions !== prevProps.dimensions && this._editor) {
+      this._editor.layout();
+    }
+  }
+
+  resizeOutput = () => this._editor.layout();
+
+  render() {
+    const { output, defaultOutput, height } = this.props;
+    return (
+      <Fragment>
+        <base href='/' />
+        <MonacoEditor
+          className='challenge-output'
+          height={height}
+          options={options}
+          value={output ? output : defaultOutput}
+          editorDidMount={::this.editorDidMount}
+        />
+      </Fragment>
+    );
+  }
 }
 
 Output.displayName = 'Output';