fix tutorial

views/tutorial/layout.erb

@@ -27,39 +27,79 @@
       <% end %>
       <h3 class="editor-heading">HTML</h3>
 
-      <div id="editor" class="editor"><%== encoding_fix default_tutorial_html %></div>
+      <div id="editor" class="editor" style="height: 300px"><%== encoding_fix default_tutorial_html %></div>
-
+        <script src="/monaco/min/vs/loader.js"></script>
-        <script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
-
         <script>
-          $(document).ready(function() {
+          window.MonacoEnvironment = {
-            editor = ace.edit("editor")
+            getWorkerUrl: function(workerId, label) {
-            editor.setTheme('ace/theme/tomorrow_night')
+              return `/monaco/min/vs/base/worker/workerMain.js`;
-            editor.getSession().setMode("ace/mode/html")
+            }
-            editor.getSession().setTabSize(2)
+          };
-            editor.getSession().setUseWrapMode(true)
+          require.config({ paths: { 'vs': '/monaco/min/vs' } });
-            editor.setFontSize(14)
-            editor.setShowPrintMargin(false)
-            editor.setOptions({
-              maxLines: Infinity,
-              autoScrollEditorIntoView: true
-            })
 
-            // Disable autocomplete
+          require(['vs/editor/editor.main'], function() {
-            editor.setBehavioursEnabled(false)
+            let code = $('#editor').text();
+            $('#editor').text('');
+
+            $(document).ready(function() {
+              editor = monaco.editor.create(document.getElementById('editor'), {
+                value: code,
+                language: 'html',
+                fontSize: 14,
+                automaticLayout: true,
+                scrollBeyondLastLine: false,
+                wordWrap: 'on',
+                wrappingIndent: 'same',
+                tabSize: 2,
+                  minimap: { enabled: false },
+                  padding: {
+                    bottom: 25
+                  },
+                fixedOverflowWidgets: true,
+                suggestOnTriggerCharacters: false,
+                quickSuggestions: false,
+                parameterHints: {
+                  enabled: false
+                },
+                theme: 'vs-dark'
+              });
+
+              window.editor.getModel().onDidChangeContent((event) => {
+                $('.error').css('display', 'none')
+                refreshIframe()
+              });
+              /*
+              editor = ace.edit("editor")
+              editor.setTheme('ace/theme/tomorrow_night')
+              editor.getSession().setMode("ace/mode/html")
+              editor.getSession().setTabSize(2)
+              editor.getSession().setUseWrapMode(true)
+              editor.setFontSize(14)
+              editor.setShowPrintMargin(false)
+              editor.setOptions({
+                maxLines: Infinity,
+                autoScrollEditorIntoView: true
+              })
+
+              // Disable autocomplete
+              editor.setBehavioursEnabled(false)
+
+              editor.on('change', function(obj) {
+                $('.error').css('display', 'none')
+                refreshIframe()
+              })
+
+              editor.commands.addCommand({
+                name: 'saveCommand',
+                bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
+                exec: function(editor) {
+                  $('#submit').click()
+                }
+              })
+              */
 
-            editor.on('change', function(obj) {
-              $('.error').css('display', 'none')
               refreshIframe()
             })
-
-            editor.commands.addCommand({
-              name: 'saveCommand',
-              bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
-              exec: function(editor) {
-                $('#submit').click()
-              }
-            })
           })
         </script>
 
@@ -133,10 +173,6 @@
       $('.tutorial iframe').contents().find('html').html(editor.getValue())
   }
 
-  $(function() {
-    refreshIframe()
-  })
-
   function preview() {
     return $('.tutorial iframe').contents()
   }