From d8edc6c28bb5199688be7f0e73beff54b78dd5db Mon Sep 17 00:00:00 2001
From: jackfiled <xcrenchangjun@outlook.com>
Date: Sat, 14 Oct 2023 22:12:19 +0800
Subject: [PATCH] =?UTF-8?q?add:=20Monaco=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/Frontend.csproj        |  1 +
 Frontend/Pages/Editor.razor     | 19 +++++++++++++++++++
 Frontend/Pages/Editor.razor.css |  3 +++
 Frontend/Pages/_Host.cshtml     |  5 ++++-
 Frontend/_Imports.razor         |  3 +++
 Frontend/wwwroot/css/site.css   |  4 ++++
 6 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 Frontend/Pages/Editor.razor
 create mode 100644 Frontend/Pages/Editor.razor.css

diff --git a/Frontend/Frontend.csproj b/Frontend/Frontend.csproj
index f15c136..f42ff40 100644
--- a/Frontend/Frontend.csproj
+++ b/Frontend/Frontend.csproj
@@ -8,6 +8,7 @@
 
     <ItemGroup>
       <PackageReference Include="AntDesign" Version="0.15.5" />
+      <PackageReference Include="BlazorMonaco" Version="3.1.0" />
     </ItemGroup>
 
     <ItemGroup>
diff --git a/Frontend/Pages/Editor.razor b/Frontend/Pages/Editor.razor
new file mode 100644
index 0000000..18d233f
--- /dev/null
+++ b/Frontend/Pages/Editor.razor
@@ -0,0 +1,19 @@
+@page "/editor"
+
+<Layout>
+    <Content>
+        <div class="editor-zone">
+            <StandaloneCodeEditor ConstructionOptions="GetEditorConstructionOptions" Id="my-editor-instance"/>
+        </div>
+    </Content>
+</Layout>
+
+@code {
+    private StandaloneEditorConstructionOptions GetEditorConstructionOptions(StandaloneCodeEditor editor)
+    {
+        return new StandaloneEditorConstructionOptions
+        {
+            Language = "yaml"
+        };
+    }
+}
\ No newline at end of file
diff --git a/Frontend/Pages/Editor.razor.css b/Frontend/Pages/Editor.razor.css
new file mode 100644
index 0000000..9c7bb11
--- /dev/null
+++ b/Frontend/Pages/Editor.razor.css
@@ -0,0 +1,3 @@
+.editor-zone {
+    min-height: calc(100vh - 64px);
+}
\ No newline at end of file
diff --git a/Frontend/Pages/_Host.cshtml b/Frontend/Pages/_Host.cshtml
index a20c4bf..9130ff0 100644
--- a/Frontend/Pages/_Host.cshtml
+++ b/Frontend/Pages/_Host.cshtml
@@ -27,7 +27,10 @@
     <a class="dismiss">🗙</a>
 </div>
 
-<script src="_framework/blazor.server.js"></script>
 <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
+<script src="_content/BlazorMonaco/jsInterop.js"></script>
+<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
+<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
+<script src="_framework/blazor.server.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Frontend/_Imports.razor b/Frontend/_Imports.razor
index ce2123f..628d9c2 100644
--- a/Frontend/_Imports.razor
+++ b/Frontend/_Imports.razor
@@ -2,5 +2,8 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Microsoft.JSInterop
 @using AntDesign
+@using BlazorMonaco
+@using BlazorMonaco.Editor
+@using BlazorMonaco.Languages
 @using Frontend
 @using Frontend.Shared
\ No newline at end of file
diff --git a/Frontend/wwwroot/css/site.css b/Frontend/wwwroot/css/site.css
index 742c9c9..53dbdcb 100644
--- a/Frontend/wwwroot/css/site.css
+++ b/Frontend/wwwroot/css/site.css
@@ -30,3 +30,7 @@
 body {
     overflow: hidden;
 }
+
+.monaco-editor-container {
+    min-height: 100%;
+}