From 4bd30a97c8b0fb296dadc613faaf6b1e24cad04c Mon Sep 17 00:00:00 2001
From: Kyle Drake <kyle@kyledrake.net>
Date: Wed, 2 Oct 2024 11:31:54 -0500
Subject: [PATCH] fix tutorial

---
 views/tutorial/layout.erb | 100 ++++++++++++++++++++++++++------------
 1 file changed, 68 insertions(+), 32 deletions(-)

diff --git a/views/tutorial/layout.erb b/views/tutorial/layout.erb
index 492d20a1..02ca4811 100644
--- a/views/tutorial/layout.erb
+++ b/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>
-
-        <script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
-
+      <div id="editor" class="editor" style="height: 300px"><%== encoding_fix default_tutorial_html %></div>
+        <script src="/monaco/min/vs/loader.js"></script>
         <script>
-          $(document).ready(function() {
-            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
-            })
+          window.MonacoEnvironment = {
+            getWorkerUrl: function(workerId, label) {
+              return `/monaco/min/vs/base/worker/workerMain.js`;
+            }
+          };
+          require.config({ paths: { 'vs': '/monaco/min/vs' } });
 
-            // Disable autocomplete
-            editor.setBehavioursEnabled(false)
+          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")
+              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()
   }