working with quiz editor

Management.Web/Shared/Components/MonacoEditorDemo.razor

@@ -0,0 +1,84 @@
+
+@using BlazorMonaco
+@using BlazorMonaco.Editor
+
+<h3>Code Editor</h3>
+
+<div>
+    <div style="margin:10px 0;">
+        New Value: <input type="text" @bind="_valueToSet" style="width: 400px;" /> <button @onclick="SetValue">Set Value</button>
+    </div>
+    <div style="margin:10px 0;">
+        <button @onclick="GetValue">Get Value</button>
+    </div>
+    <div style="margin:10px 0;">
+        See the console for results.
+    </div>
+</div>
+
+<div 
+  style="height: 300px"
+>
+<StandaloneCodeEditor 
+  @ref="_editor" 
+  Id="sample-code-editor-123" 
+  ConstructionOptions="EditorConstructionOptions" 
+  OnDidInit="EditorOnDidInit"
+/>
+</div>
+
+@code {
+    private StandaloneCodeEditor _editor = null!;
+    private string _valueToSet = "";
+
+    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
+    {
+        return new StandaloneEditorConstructionOptions
+        {
+            Language = "markdown",
+            Theme = "vs-dark",
+            TabSize = 2,
+            Value = "this is the default \n value",
+            Minimap = new EditorMinimapOptions { Enabled = false }
+        };
+    }
+
+    private async Task EditorOnDidInit()
+    {
+        await _editor.AddCommand((int)KeyMod.CtrlCmd | (int)KeyCode.KeyH, (args) =>
+        {
+            Console.WriteLine("Ctrl+H : Initial editor command is triggered.");
+        });
+
+        var newDecorations = new ModelDeltaDecoration[]
+        {
+            new ModelDeltaDecoration
+            {
+                Range = new BlazorMonaco.Range(3,1,3,1),
+                Options = new ModelDecorationOptions
+                {
+                    IsWholeLine = true,
+                    ClassName = "decorationContentClass",
+                    GlyphMarginClassName = "decorationGlyphMarginClass"
+                }
+            }
+        };
+
+        decorationIds = await _editor.DeltaDecorations(null, newDecorations);
+        // You can now use 'decorationIds' to change or remove the decorations
+    }
+
+    private string[] decorationIds = new string[0];
+
+    private async Task SetValue()
+    {
+        Console.WriteLine($"setting value to: {_valueToSet}");
+        await _editor.SetValue(_valueToSet);
+    }
+
+    private async Task GetValue()
+    {
+        var val = await _editor.GetValue();
+        Console.WriteLine($"value is: {val}");
+    }
+}