added monaco editor to assignment page

2026-03-25 23:28:33 -06:00 · 2023-11-15 11:23:36 -07:00
parent a0931f5003
commit 8d83e0ecd4
13 changed files with 201 additions and 128 deletions
--- a/Management.Web/Shared/Components/AssignmentForm/AssignmentDescriptionEditor.razor
+++ b/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)
--- a/Management.Web/Shared/Components/AssignmentForm/AssignmentForm.razor
+++ b/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>
--- a/Management.Web/Shared/Components/AssignmentForm/RubricMarkdownEditor.razor
+++ b/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>
--- a/Management.Web/Shared/Components/Forms/ButtonSelect.razor
+++ b/Management.Web/Shared/Components/Forms/ButtonSelect.razor
@@ -13,7 +13,7 @@
  public Action<T?> OnSelect { get; set; } = default!;

  [Parameter]
-  public T? SelectedOption { get; set; }
+  public T? SelectedOption { get; set; }  

  private string htmlLabel => Label.Replace("-", "");

@@ -30,10 +30,10 @@
  }
 }

-<div>
+<div key="@GetName(SelectedOption)">
  @foreach(var option in Options)
  {
-    <button 
+    <button
      class="@getButtonClass(option)" 
      @onclick="() => onSelect(option)"
    >
--- a/Management.Web/Shared/Components/MonacoTextArea.razor
+++ b/Management.Web/Shared/Components/MonacoTextArea.razor
@@ -9,6 +9,8 @@
  [Parameter, EditorRequired]
  public Action<string> OnChange { get; set; }

+  private string randomId = "monaco-editor-" + BitConverter.ToString(new byte[16].Select(b => (byte)new Random().Next(256)).ToArray()).Replace("-", "");
+

  private StandaloneCodeEditor _editor = null!;
  
@@ -25,8 +27,11 @@
      LineDecorationsWidth = 0,
      WordWrap = "on",
      AutomaticLayout = true,
-      FontFamily = "DM Mono, monospace",
+      FontFamily = "Roboto-mono",
      FontSize = 16,
+      Padding = new EditorPaddingOptions() {
+        Top = 10
+      }
    };
  }

@@ -38,8 +43,8 @@
 }

 <StandaloneCodeEditor 
-  @ref="_editor" 
-  Id="sample-code-editor-123" 
+  @ref="_editor"
+  Id="@randomId"
  ConstructionOptions="EditorConstructionOptions" 
  OnDidChangeModelContent="OnDidChangeModelContent"
 />