fix tutorial

views/tutorial/layout.erb

@@ -27,12 +27,48 @@
       <% 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>
+          window.MonacoEnvironment = {
+            getWorkerUrl: function(workerId, label) {
+              return `/monaco/min/vs/base/worker/workerMain.js`;
+            }
+          };
+          require.config({ paths: { 'vs': '/monaco/min/vs' } });
+
+          require(['vs/editor/editor.main'], function() {
+            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")
@@ -60,6 +96,10 @@
                   $('#submit').click()
                 }
               })
+              */
+
+              refreshIframe()
+            })
           })
         </script>
 
@@ -133,10 +173,6 @@
       $('.tutorial iframe').contents().find('html').html(editor.getValue())
   }
 
-  $(function() {
-    refreshIframe()
-  })
-
   function preview() {
     return $('.tutorial iframe').contents()
   }