added monaco editor to assignment page

Management.Web/Shared/Components/AssignmentForm/AssignmentDescriptionEditor.razor

@@ -42,9 +42,8 @@
     .AssignmentTemplates
     .FirstOrDefault(t => t.Id == TemplateId);
 
-  private void handleNewDescription(ChangeEventArgs e)
+  private void handleNewDescription(string newDescription)
   {
-    var newDescription = e.Value?.ToString();
     if (newDescription != string.Empty)
     {
       descriptionForPreview = newDescription;
@@ -65,25 +64,17 @@
 
 @if(assignmentContext.Assignment != null && planner.LocalCourse != null)
 {
-  <div class="row">
-    <div class="col">
-      <label for="description" class="form-label">
-        Description
-      </label>
-    </div>
-    <div class="col">
-      HTML Preview
-    </div>
-  </div>
-  <div class="row">
+  <div class="row h-100">
     <div class="col-6">
-      <textarea 
+      @* <textarea 
         id="description" 
         class="form-control h-100" 
         rows=12
         @bind="description"
         @oninput="handleNewDescription"
-      />
+      /> *@
+
+      <MonacoTextArea Value="@description" OnChange="@handleNewDescription" />
     </div>
     <div class="col-6" @key="descriptionForPreview">
       @(preview)

Management.Web/Shared/Components/AssignmentForm/AssignmentForm.razor

@@ -159,7 +159,7 @@
     planner.CanvasAssignments?.FirstOrDefault(a => a.Name == assignmentContext.Assignment?.Name);
 
   private string canvasAssignmentUrl =>
-  $"https://snow.instructure.com/courses/{planner.LocalCourse?.Settings.CanvasId}/assignments/{assignmentInCanvas?.Id}";
+    $"https://snow.instructure.com/courses/{planner.LocalCourse?.Settings.CanvasId}/assignments/{assignmentInCanvas?.Id}";
 
   private async Task deleteFromCanvas()
   {
@@ -173,103 +173,105 @@
     await canvas.Assignments.Delete(
       (ulong)planner.LocalCourse.Settings.CanvasId, 
       assignmentInCanvas.Id,
-      assignmentContext.Assignment.Name);
+      assignmentContext.Assignment.Name
+    );
     await planner.LoadCanvasData();
     deletingAssignmentFromCanvas = false;
     StateHasChanged();
   }
 }
 
-@assignmentContext.Assignment?.Name
 
-@if (assignmentContext.Assignment != null)
-{
-  <div class="m-1">
-  <label class="form-label">
-    Name
-  </label>
-  <input class="form-control" @bind="name" @oninput="handleNameChange" />
-</div>
-  <ButtonSelect 
-    Label="Assignment Group" 
-    Options="planner.LocalCourse?.Settings.AssignmentGroups" 
-    GetName="(g) => g?.Name"
-    OnSelect="(g) => setAssignmentGroup(g)" 
-    SelectedOption="selectedAssignmentGroup" 
-  />
-  <div class="m-1">
-    <AssignmentDescriptionEditor />
+
+<div class="d-flex flex-column h-100">
+  <div>
+    @assignmentContext.Assignment?.Name
+  </div>
+  <div class="flex-grow-1 d-flex flex-column">
+    @if (assignmentContext.Assignment != null)
+    {
+      <div class="m-1">
+        <label class="form-label">
+          Name
+        </label>
+        <input class="form-control" @bind="name" @oninput="handleNameChange" />
+      </div>
+
+        <ButtonSelect  
+          Label="Assignment Group" 
+          Options="planner.LocalCourse?.Settings.AssignmentGroups" 
+          GetName="(g) => g?.Name"
+          OnSelect="(g) => setAssignmentGroup(g)" 
+          SelectedOption="selectedAssignmentGroup" 
+        />
+      <div class="m-1 flex-grow-1">
+        <AssignmentDescriptionEditor />
+      </div>
+
+      <div class="form-check m-1">
+        <input class="form-check-input" id="lockAtDueDate" type="checkbox" @bind="lockAtDueDate"
+        @oninput="handleLockAtDueDateChange" />
+        <label class="form-check-label" for="lockAtDueDate">
+          Lock At Due Date
+        </label>
+      </div>
+      <div class="container">
+        <RubricMarkdownEditor />
+        <hr>
+        <div class="mx-5 px-5">
+          <SubmissionTypeSelector />
+        </div>
+      </div>
+    }
   </div>
 
-  <div class="form-check m-1">
-    <input class="form-check-input" id="lockAtDueDate" type="checkbox" @bind="lockAtDueDate"
-    @oninput="handleLockAtDueDateChange" />
-    <label class="form-check-label" for="lockAtDueDate">
-      Lock At Due Date
-    </label>
-  </div>
-  <div class="container">
-    <RubricMarkdownEditor />
-    <hr>
-    <div class="mx-5 px-5">
-      <SubmissionTypeSelector />
-    </div>
-  </div>
-}
+  <div class="d-flex justify-content-end  p-3">
 
-<div class="d-flex justify-content-end m-3">
+    <ConfirmationModal Label="Delete" Class="btn btn-danger" OnConfirmAsync="HandleDelete" />
 
-  <ConfirmationModal Label="Delete" Class="btn btn-danger" OnConfirmAsync="HandleDelete" />
-
-  <button 
-    class="btn btn-outline-secondary mx-3" 
-    disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
-    @onclick="addToCanvas"
-  >
-    Add To Canvas
-  </button>
-  @if (assignmentInCanvas != null)
-  {
-    <a 
-      class="btn btn-outline-secondary me-1" 
-      href="@canvasAssignmentUrl" 
-      target="_blank"
-      disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
-    >
-      View in Canvas
-    </a>
     <button 
       class="btn btn-outline-secondary mx-3" 
       disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
-      @onclick="updateInCanvas"
+      @onclick="addToCanvas"
     >
-      Update In Canvas
+      Add To Canvas
     </button>
-    <ConfirmationModal 
-      Disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
-      Label="Delete from Canvas" 
-      Class="btn btn-outline-danger mx-3" 
-      OnConfirmAsync="deleteFromCanvas" 
-    />
-  }
-  <button class="btn btn-primary mx-2" @onclick="@(() => {
-      assignmentContext.Assignment = null;
-      Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name);
-    })">
-    Done
-  </button>
-</div>
+    @if (assignmentInCanvas != null)
+    {
+      <a 
+        class="btn btn-outline-secondary me-1" 
+        href="@canvasAssignmentUrl" 
+        target="_blank"
+        disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
+      >
+        View in Canvas
+      </a>
+      <button 
+        class="btn btn-outline-secondary mx-3" 
+        disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
+        @onclick="updateInCanvas"
+      >
+        Update In Canvas
+      </button>
+      <ConfirmationModal 
+        Disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
+        Label="Delete from Canvas" 
+        Class="btn btn-outline-danger mx-3" 
+        OnConfirmAsync="deleteFromCanvas" 
+      />
+    }
+    <button class="btn btn-primary mx-2" @onclick="@(() => {
+        assignmentContext.Assignment = null;
+        Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name);
+      })">
+      Done
+    </button>
+  </div>
 
-@if (addingAssignmentToCanvas || deletingAssignmentFromCanvas)
-{
-  <Spinner />
-}
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
+  @if (addingAssignmentToCanvas || deletingAssignmentFromCanvas)
+  {
+    <div>
+      <Spinner />
+    </div>
+  }
+</div>

Management.Web/Shared/Components/AssignmentForm/RubricMarkdownEditor.razor

@@ -5,7 +5,7 @@
 
 @code
 {
-  private IEnumerable<RubricItem> displayRubric { get; set; } = new RubricItem[] {};
+  private IEnumerable<RubricItem> displayRubric { get; set; } = new RubricItem[] { };
   private string _rubricText = "";
   private string rubricText
   {
@@ -22,9 +22,9 @@
         if (assignmentContext.Assignment != null)
         {
           var newAssignment = assignmentContext.Assignment with
-          {
-            Rubric = parsedRubric,
-          };
+            {
+              Rubric = parsedRubric,
+            };
           assignmentContext.SaveAssignment(newAssignment);
         }
       }
@@ -49,7 +49,7 @@
   {
     if (assignmentContext.Assignment != null)
     {
-      if(rubricText == string.Empty)
+      if (rubricText == string.Empty)
       {
         rubricText = assignmentContext.Assignment.RubricToMarkdown();
       }
@@ -68,31 +68,26 @@
 
 <br>
 <div class="row">
-    <h4 class="text-center">Rubric</h4>
+  <h4 class="text-center">Rubric</h4>
 </div>
 
 <div class="row">
   <div class="col-6">
-    <textarea 
-      id="description" 
-      class="form-control h-100" 
-      rows=12
-      @bind="rubricText"
-      @bind:event="oninput" 
-    />
+    @* <textarea id="description" class="form-control h-100" rows=12 @bind="rubricText" @bind:event="oninput" /> *@
+    <MonacoTextArea Value="@rubricText" OnChange="@((t) => rubricText = t)" />
   </div>
   <div class="col-6">
     @if (error != null)
     {
       <p class="text-danger text-truncate">Error: @error</p>
     }
-    
+
     <div class="row border-bottom">
       <div class="col-6 text-end">Label</div>
       <div class="col-3 text-center">Points</div>
       <div class="col-3 text-center">Extra Credit</div>
     </div>
-    @foreach(var item in displayRubric)
+    @foreach (var item in displayRubric)
     {
       <div class="row border-bottom">
         <div class="col-6 text-end">@item.Label</div>