change query schema editor to monaco-editor (#12458)

OrchardCMS · Sep 22, 2022 · 5c3ceaf · 5c3ceaf
1 parent b70de62
commit 5c3ceaf
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 4 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.Queries/Views/Admin/Create.cshtml b/src/OrchardCore.Modules/OrchardCore.Queries/Views/Admin/Create.cshtml
@@ -9,7 +9,7 @@
         @await DisplayAsync(Model.Editor.Content)
     }
 
-    @if (Model.Editor.Content != null)
+    @if (Model.Editor.Actions != null)
     {
         <div class="mb-3">
             @await DisplayAsync(Model.Editor.Actions)

diff --git a/src/OrchardCore.Modules/OrchardCore.Queries/Views/Admin/Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Queries/Views/Admin/Edit.cshtml
@@ -10,7 +10,7 @@
         @await DisplayAsync(Model.Editor.Content)
     }
 
-    @if (Model.Editor.Content != null)
+    @if (Model.Editor.Actions != null)
     {
         <div class="mb-3">
             @await DisplayAsync(Model.Editor.Actions)

diff --git a/src/OrchardCore.Modules/OrchardCore.Queries/Views/Admin/Query.cshtml b/src/OrchardCore.Modules/OrchardCore.Queries/Views/Admin/Query.cshtml
@@ -10,7 +10,6 @@
 <script asp-name="codemirror" depends-on="admin" at="Foot"></script>
 <script asp-name="codemirror-mode-javascript" at="Foot"></script>
 <script asp-name="codemirror-mode-sql" at="Foot"></script>
-<script asp-name="monaco" depends-on="admin" at="Foot"></script>
 
 <zone Name="Title"><h1>@RenderTitleSegments(T["SQL Query"])</h1></zone>
 

diff --git a/src/OrchardCore.Modules/OrchardCore.Queries/Views/Query.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Queries/Views/Query.Fields.Edit.cshtml
@@ -10,6 +10,42 @@
 
 <div class="mb-3">
     <label asp-for="Schema">@T["Schema"]</label>
-    <textarea asp-for="Schema" rows="12" class="form-control" style="text-align:left"></textarea>
+    <textarea asp-for="Schema" hidden></textarea>
+    <div id="@Html.IdFor(x => x.Schema)_editor" style="min-height: 300px;" class="form-control"></div>
     <span class="hint">@T["The schema the GraphQL API will use to return results."] <a class="seedoc" href="@(OrchardCore.Admin.Constants.DocsUrl)reference/modules/Queries/#graphql" target="_blank">@T["See documentation"]</a></span>
 </div>
+<script asp-name="monaco" depends-on="admin" at="Foot"></script>
+
+<script at="Foot" depends-on="monaco">
+    $(document).ready(function () {
+        require(['vs/editor/editor.main'], function () {
+
+            var html = document.getElementsByTagName("html")[0];
+            const mutationObserver = new MutationObserver(setTheme);
+            mutationObserver.observe(html, { attributes: true });
+
+            function setTheme() {
+                var theme = html.dataset.theme;
+                if (theme === "darkmode") {
+                    monaco.editor.setTheme('vs-dark')
+                } else {
+                    monaco.editor.setTheme('vs')
+                }
+            }
+            setTheme();         
+
+            var editor = monaco.editor.create(document.getElementById('@Html.IdFor(m => m.Schema)_editor'), {
+                automaticLayout: true,
+                language: "json",
+                lineNumbers: false,
+                minimap: { enabled: false }
+            });
+
+            var textArea = document.getElementById('@Html.IdFor(m => m.Schema)');
+            editor.getModel().setValue(textArea.value);
+            window.addEventListener("submit", function () {
+                textArea.value = editor.getValue();
+            });
+        });
+    });
+</script>