From cbbfcdcf5ed3fd02a585703c620e42814f7a42ce Mon Sep 17 00:00:00 2001
From: Pat Hartl <pat@pathar.tl>
Date: Mon, 16 Jan 2023 02:44:09 -0600
Subject: [PATCH] Switched script editor to Monaco

---
 LANCommander/Views/Keys/Edit.cshtml | 44 ++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/LANCommander/Views/Keys/Edit.cshtml b/LANCommander/Views/Keys/Edit.cshtml
index 3ce9abc..1387711 100644
--- a/LANCommander/Views/Keys/Edit.cshtml
+++ b/LANCommander/Views/Keys/Edit.cshtml
@@ -23,22 +23,12 @@
         <div class="row row-cards">
             <div class="col-12">
                 <form asp-action="Edit" class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-12">
-                                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
+                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 
-                                <div class="mb-3 textarea-grow-wrap">
-                                    <textarea asp-for="Keys" class="form-control" data-bs-toggle="autosize">
-                                        @Model.Keys
-                                    </textarea>
-                                    <span asp-validation-for="Keys" class="text-danger"></span>
-                                </div>
+                    <input type="hidden" asp-for="Keys" />
+                    <input type="hidden" asp-for="Game.Id" />
 
-                                <input type="hidden" asp-for="Game.Id" />
-                            </div>
-                        </div>
-                    </div>
+                    <div id="KeyEditor" style="height: 100%; min-height: 600px;"></div>
 
                     <div class="card-footer">
                         <div class="d-flex">
@@ -54,4 +44,30 @@
 
 @section Scripts {
     @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
+
+    <script src="~/lib/monaco-editor/min/vs/loader.js"></script>
+
+    <script>
+        require.config({ paths: { vs: '/lib/monaco-editor/min/vs' } });
+        require(['vs/editor/editor.main'], function () {
+            var editor = monaco.editor.create(document.getElementById('KeyEditor'), {
+                value: $('#Keys').val(),
+                readOnly: false,
+                theme: 'vs-dark',
+                automaticLayout: true
+            });
+
+            editor.onDidChangeModelContent(function (e) {
+                $('#Keys').val(editor.getModel().getValue());
+            });
+        });
+
+        document.addEventListener('keydown', e => {
+            if (e.ctrlKey && e.key === 's') {
+                e.preventDefault();
+            
+                $('form').submit();
+            }
+        });
+    </script>
 }