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/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,33 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": ".NET Core Launch (web)",
+      "type": "coreclr",
+      "request": "launch",
+      "preLaunchTask": "build",
+      "program": "${workspaceFolder}/Management.Web/bin/Debug/net8.0/Management.Web.dll",
+      "args": [],
+      "cwd": "${workspaceFolder}/Management.Web",
+      "stopAtEntry": false,
+      "serverReadyAction": {
+        "action": "openExternally",
+        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+      },
+      "env": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "sourceFileMap": {
+        "/Views": "${workspaceFolder}/Views"
+      }
+    },
+    {
+      "name": ".NET Core Attach",
+      "type": "coreclr",
+      "request": "attach"
+    }
+  ]
+}
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -0,0 +1,41 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "build",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "build",
+        "${workspaceFolder}/Management.Web/Management.Web.csproj",
+        "/property:GenerateFullPaths=true",
+        "/consoleloggerparameters:NoSummary;ForceNoAlign"
+      ],
+      "problemMatcher": "$msCompile"
+    },
+    {
+      "label": "publish",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "publish",
+        "${workspaceFolder}/Management.Web/Management.Web.csproj",
+        "/property:GenerateFullPaths=true",
+        "/consoleloggerparameters:NoSummary;ForceNoAlign"
+      ],
+      "problemMatcher": "$msCompile"
+    },
+    {
+      "label": "watch",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "watch",
+        "run",
+        "--project",
+        "${workspaceFolder}/Management.Web/Management.Web.csproj"
+      ],
+      "problemMatcher": "$msCompile"
+    }
+  ]
+}
--- a/Management.Web/Pages/AssignmentFormPage.razor
+++ b/Management.Web/Pages/AssignmentFormPage.razor
@@ -56,7 +56,7 @@
  }

 }
-
+<div style="height: 100vh;" class="m-0 p-1">
@if (loading)
 {
  <Spinner />
@@ -66,3 +66,4 @@
 {
  <AssignmentForm />
 }
+</div>
--- a/Management.Web/Pages/_Host.cshtml
+++ b/Management.Web/Pages/_Host.cshtml
@@ -18,15 +18,17 @@
    <link href="css/site.css" rel="stylesheet" />
    <link href="Management.Web.styles.css" rel="stylesheet" />

-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+
    <link
        href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Kanit&family=Mukta&family=Roboto&family=Sofia+Sans+Condensed:wght@400;500&display=swap"
        rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,600&display=swap" rel="stylesheet">
-    <link rel="icon" type="image/png" href="favicon.png" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

+
+    <link rel="icon" type="image/png" href="favicon.png" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>

--- 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
@@ -173,23 +173,30 @@
    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="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>
+      </div>
+
        <ButtonSelect  
          Label="Assignment Group" 
          Options="planner.LocalCourse?.Settings.AssignmentGroups" 
@@ -197,7 +204,7 @@
          OnSelect="(g) => setAssignmentGroup(g)" 
          SelectedOption="selectedAssignmentGroup" 
        />
-  <div class="m-1">
+      <div class="m-1 flex-grow-1">
        <AssignmentDescriptionEditor />
      </div>

@@ -215,9 +222,10 @@
          <SubmissionTypeSelector />
        </div>
      </div>
-}
+    }
+  </div>

-<div class="d-flex justify-content-end m-3">
+  <div class="d-flex justify-content-end  p-3">

    <ConfirmationModal Label="Delete" Class="btn btn-danger" OnConfirmAsync="HandleDelete" />

@@ -258,18 +266,12 @@
      })">
      Done
    </button>
-</div>
+  </div>

-@if (addingAssignmentToCanvas || deletingAssignmentFromCanvas)
-{
+  @if (addingAssignmentToCanvas || deletingAssignmentFromCanvas)
+  {
+    <div>
      <Spinner />
-}
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
+    </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
  {
@@ -49,7 +49,7 @@
  {
    if (assignmentContext.Assignment != null)
    {
-      if(rubricText == string.Empty)
+      if (rubricText == string.Empty)
      {
        rubricText = assignmentContext.Assignment.RubricToMarkdown();
      }
@@ -73,13 +73,8 @@

 <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)
@@ -92,7 +87,7 @@
      <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
@@ -30,7 +30,7 @@
  }
 }

-<div>
+<div key="@GetName(SelectedOption)">
  @foreach(var option in Options)
  {
    <button
--- 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
+      }
    };
  }

@@ -39,7 +44,7 @@

 <StandaloneCodeEditor 
  @ref="_editor"
-  Id="sample-code-editor-123" 
+  Id="@randomId"
  ConstructionOptions="EditorConstructionOptions" 
  OnDidChangeModelContent="OnDidChangeModelContent"
 />
--- a/Management/Models/Local/LocalQuiz.cs
+++ b/Management/Models/Local/LocalQuiz.cs
@@ -26,6 +26,8 @@ public record LocalQuiz
      .FirstOrDefault(g => g.Name == LocalAssignmentGroupName)?
      .CanvasId;

+  public string GetDescriptionHtml() => Markdig.Markdown.ToHtml(Description);
+  
  public string ToYaml()
  {
    var serializer = new SerializerBuilder().DisableAliases().Build();
--- a/Management/Models/Local/LocalQuizQuestion.cs
+++ b/Management/Models/Local/LocalQuizQuestion.cs
@@ -26,6 +26,7 @@ public record LocalQuizQuestion
        : $"[{correctIndicator}] ";

      // var textWithSpecificNewline = answer.Text.Replace(Environment.NewLine, Environment.NewLine + "   ");
+
      var multilineMarkdownCompatibleText = answer.Text.StartsWith("```")
        ? Environment.NewLine + answer.Text 
        : answer.Text;
--- a/Management/Models/Local/LocalQuizQuestionAnswer.cs
+++ b/Management/Models/Local/LocalQuizQuestionAnswer.cs
@@ -19,7 +19,7 @@ public record LocalQuizQuestionAnswer
    return new LocalQuizQuestionAnswer()
    {
      Correct = isCorrect,
-      Text=text,
+      Text = text,
    };
  }
 }
--- a/Management/Services/Canvas/CanvasQuizService.cs
+++ b/Management/Services/Canvas/CanvasQuizService.cs
@@ -41,7 +41,7 @@ public class CanvasQuizService(
      quiz = new
      {
        title = localQuiz.Name,
-        description = localQuiz.Description,
+        description = localQuiz.GetDescriptionHtml(),
        // assignment_group_id = "quiz", // TODO: support specific assignment groups
        // time_limit = localQuiz.TimeLimit,
        shuffle_answers = localQuiz.ShuffleAnswers,