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.

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 (

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>
           </ReflexElement>
           <ReflexSplitter />
           <ReflexElement flex={0.5}>

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 { 

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,7 +22,27 @@ const options = {
   wordWrap: 'on'
 };
 
-function Output({ output, defaultOutput, height }) {
+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='/' />
@@ -30,9 +51,11 @@ function Output({ output, defaultOutput, height }) {
           height={height}
           options={options}
           value={output ? output : defaultOutput}
+          editorDidMount={::this.editorDidMount}
         />
       </Fragment>
     );
+  }
 }
 
 Output.displayName = 'Output';