side-by-side

Mohsen Azimi · Mohsen Azimi · commit a818acafd422 · 2017-07-16T19:33:21.000-07:00
diff --git a/docs/editor.tsx b/docs/editor.tsx
@@ -3,38 +3,65 @@ import { render } from 'react-dom';
 import MonacoEditor from 'react-monaco-editor';
 
 interface AppState {
-  code: string;
+    input: string;
+    output: string;
+    windowSize: { width: number; height: number; };
 }
 
 class App extends React.Component<{}, AppState> {
-  state = { code: '// hello ' }
-  editorDidMount = (editor: monaco.editor.ICodeEditor, m: typeof monaco) => {
-    console.log('editorDidMount', editor);
-    editor.focus();
-  }
-  onChange = (newValue: string, e: monaco.editor.IModelContentChangedEvent2) => {
-    console.log('onChange', newValue, e);
-  }
-  render() {
-    const code = this.state.code;
-    const options = {
-      selectOnLineNumbers: true
-    };
-    return (
-      <MonacoEditor
-        width="800"
-        height="600"
-        language="javascript"
-        value={code}
-        options={options}
-        onChange={this.onChange}
-        editorDidMount={this.editorDidMount}
-      />
-    );
-  }
+    static toolbarHeight = 50;
+    state = { input: '// hello ', output: '// hello', windowSize: { width: 0, height: 0 } }
+    setWindowSize = () => {
+        this.setState({
+            windowSize: { width: window.innerWidth, height: innerHeight }
+        });
+    }
+    componentWillMount() {
+        this.setWindowSize()
+        window.addEventListener('resize', this.setWindowSize);
+    }
+    editorDidMount = (editor: monaco.editor.ICodeEditor, m: typeof monaco) => {
+        console.log('editorDidMount', editor);
+        editor.focus();
+    }
+    onChange = (newValue: string, e: monaco.editor.IModelContentChangedEvent2) => {
+        console.log('onChange', newValue, e);
+    }
+    render() {
+        const { input, output, windowSize } = this.state;
+        return (
+            <div>
+                <Toolbar height={App.toolbarHeight} />
+                <div style={{ display: 'flex' }}>
+                    <MonacoEditor
+                        width={windowSize.width / 2}
+                        height={windowSize.height - App.toolbarHeight}
+                        language='javascript'
+                        value={input}
+                        options={{}}
+                        onChange={this.onChange}
+                        editorDidMount={this.editorDidMount}
+                    />
+                    <MonacoEditor
+                        width={windowSize.width / 2}
+                        height={windowSize.height - App.toolbarHeight}
+                        language='typescript'
+                        value={output}
+                        options={{ readOnly: true }}
+                    />
+                </div>
+            </div>
+        );
+    }
 }
 
+const Toolbar = ({height}: {height: number}) => (
+    <div style={{height: `${height}px`}}>
+        Convert React code to TypeScript
+    </div>
+)
+
 render(
-  <App />,
-  document.getElementById('root')
+    <App />,
+    document.getElementById('root')
 );
diff --git a/docs/index.html b/docs/index.html
@@ -3,9 +3,14 @@
 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+    <style>
+        html, body, #root {
+            margin: 0;
+            height: 100%;
+        }
+    </style>
 </head>
 <body>
     <div id="root"></div>
-    <script src="dist/editor.js"></script>
 </body>
 </html>
diff --git a/docs/webpack.config.ts b/docs/webpack.config.ts
@@ -20,7 +20,8 @@ const config: webpack.Configuration = {
     },
     plugins: [
         new HTMLWebpackPlugin({
-            template: './index.html'
+            template: './index.html',
+            inject: 'body'
         }),
         new CopyWebpackPlugin([
             {
