server-side include of example files and init editor from them

css/styles.css

@@ -200,11 +200,11 @@ button:hover {
 #editor {
   font-size: 90%;
   position: absolute;
-  top: 110px;
+  top: 120px;
   /*right: 500px;*/
   bottom: 0;
   left: 0;
-  width: 40%;
+  width: 100%;
   border-top: 1px solid #aaa;
   border-bottom: 1px solid #aaa;
 }

html/index.mustache.html

@@ -55,7 +55,7 @@
             {{/css}}
             </ul>
         </div>
-        <div id="editor">{{{mainHtml}}}</div>
+        <div id="editor"></div>
         <script type="text/html" id="editor-javascript"></script>
         <script type="text/html" id="editor-html"></script>
         <script type="text/html" id="editor-css"></script>
@@ -79,6 +79,10 @@
 <script src="/js/vendor/ace/ace.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/req-promise.js"></script>
 <script src="/js/editor-local-storage.js"></script>
+<script>
+window._webSandboxFiles = {{{files}}};
+console.log(window._webSandboxFiles);
+</script>
 <script src="/js/editor.js"></script>
 </body>
 </html>

js/editor.js

@@ -22,6 +22,7 @@ $(document).ready(function() {
   var activeMode     = 'html';
   var currentHash; 
   var editor;
+  var editorSession;
   var editorStorage = new LocalStorageDraft();
   var saveTimeout1;
   var saveTimeout2;
@@ -55,11 +56,19 @@ $(document).ready(function() {
   // $window.resize(onResize);
   // onResize();
 
+  function initEditor() {
+    editor = ace.edit("editor");
+    editorSession = editor.getSession();
+    editor.setTheme("ace/theme/eclipse");
+    editor.$blockScrolling = Infinity;
+    editorSession.setUseWrapMode(true);
+    if(_webSandboxFiles) {
+      editorSession.setMode("ace/mode/html");
+      editorSession.setValue(_webSandboxFiles.html[0].content);
+    }
+  }
+
 
-  // editor = ace.edit("editor");
-  // editor.setTheme("ace/theme/eclipse");
-  // editor.$blockScrolling = Infinity;
-  // editor.getSession().setUseWrapMode(true);
 
 
   // /**
@@ -291,4 +300,7 @@ $(document).ready(function() {
   // $revertEditor.click(revertEditor);
   // $.get('/menu', menu => $('#site-menu').html(menu), 'html');
   // loadExampleList();
+
+  initEditor();
+
 });

sandboxApp.js

@@ -132,7 +132,8 @@ app.get('/:repoSlug/:exampleSlug',
         html,
         js,
         css,
-        mainHtml: html[0].content
+        mainHtml: html[0].content,
+        files: JSON.stringify({ html, js, css })
       }));
     });
 });