Add basic support to run console in preview context

See #5

App.css

@@ -23,9 +23,26 @@ body {
 }
 
 .preview-container {
-  display:inline-flex;
+  display: inline-flex;
   width: 100%;
-  height: 100vh;
+  /*height: 100vh;*/
+  height: 50vh;
+}
+
+.console-container {
+  border-top: 1px solid rgba(0,0,0,0.15);
+  /*display: inline-flex;*/
+  width: 100%;
+  height: 50vh;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.console-input {
+  width: 100%;
+  outline: none;
+  border: 0;
+  box-sizing: border-box;
 }
 
 .editor-container {

index.html

@@ -24,6 +24,10 @@
     </div>
     <div class="pane-preview">
       <webview class="preview-container" id="preview" src="./preview.html" nodeintegration></webview>
+      <div class="console-container">
+        <div class="console-lines"></div>
+        <input type="text" class="console-input" />
+      </div>
     </div>
   </body>
 

preview.html

@@ -10,16 +10,18 @@
   </script>
 
   <script>
-    require('electron').ipcRenderer.on('updater', (event, type, content) => {
+    const ipcRenderer = require('electron').ipcRenderer;
+
+    ipcRenderer.on('updater', (event, type, content) => {
       if (type === 'html') {
         document.body.innerHTML = content;
       }
       if (type === 'css') {
         document.head.querySelector('#css').textContent = content;
       }
       if (type === 'javascript') {
-        eval(content);
+        eval.call(null, content);
       }
-    })
+    });
   </script>
 </html>

renderer.js

@@ -109,6 +109,25 @@ preview.addEventListener('dom-ready', () => {
   updateContents('javascript', jsEditor.doc.getValue());
 });
 
+const consoleInput = document.querySelector('.console-input');
+const consoleLines = document.querySelector('.console-lines');
+consoleInput.addEventListener('keyup', (event) => {
+  if (event.key === 'Enter') {
+    const inputValue = event.target.value;
+
+    preview.executeJavaScript(inputValue, false, (result) => {
+      var line1 = document.createElement('div');
+      line1.innerHTML = inputValue;
+      consoleLines.appendChild(line1);
+      var line = document.createElement('div');
+      line.innerHTML = JSON.stringify(result);
+      consoleLines.appendChild(line);
+    });
+    event.target.value = '';
+    event.target.focus();
+  }
+});
+
 const {remote} = electron;
 const {Menu} = remote;