canvasManagement/Management.Web/Pages/AssignmentForm/AssignmentMarkdownEditor.razor

@using Markdig
@using Management.Web.Shared.Components

@inject CoursePlanner planner
@inject AssignmentEditorContext assignmentContext

@code
{
  [Parameter, EditorRequired]
  public bool ShowHelp { get; set; } = false;
  protected override void OnInitialized()
  {
    assignmentContext.StateHasChanged += reload;
    reload();
  }
  private void reload()
  {
    if (assignmentContext.Assignment != null)
    {
      if(rawText == string.Empty)
      {
        rawText = assignmentContext.Assignment.ToMarkdown();
        this.InvokeAsync(this.StateHasChanged);
      }
    }
  }
  public void Dispose()
  {
    assignmentContext.StateHasChanged -= reload;
  }

  private string rawText { get; set; } = string.Empty;
  private string? error = null;

  private void handleChange(string newRawAssignment)
  {
    rawText = newRawAssignment;
    if (newRawAssignment != string.Empty)
    {
      try
      {
        var parsed = LocalAssignment.ParseMarkdown(newRawAssignment);
        error = null;
        assignmentContext.SaveAssignment(parsed);
      }
      catch(AssignmentMarkdownParseException e)
      {
        error = e.Message;
      }
      catch(RubricMarkdownParseException e)
      {
        error = e.Message;
      }
      finally
      {
        StateHasChanged();
      }
    }
    StateHasChanged();
  }

  private MarkupString preview { get => (MarkupString)Markdown.ToHtml(assignmentContext?.Assignment?.Description ?? ""); }
  private string HelpText()
  {
    var groupNames = string.Join("\n- " , planner.LocalCourse?.Settings.AssignmentGroups.Select(g => g.Name) ?? []);
    return $@"
SubmissionTypes:
- {AssignmentSubmissionType.ONLINE_TEXT_ENTRY}
- {AssignmentSubmissionType.ONLINE_UPLOAD}
- {AssignmentSubmissionType.DISCUSSION_TOPIC}

Assignment Group Names:
- {groupNames}
";
  }
}

<div class="d-flex w-100 h-100 flex-row">
  @if(ShowHelp)
  {
    <div class=" rounded rounded-3 bg-black" >
      <pre class=" me-3 pe-5 ps-3 rounded rounded-3">
        @HelpText()
      </pre>
    </div>
  }

  @if(assignmentContext.Assignment != null && planner.LocalCourse != null)
  {
    <div class="row h-100  w-100">
      <div class="col-6">

        <MonacoTextArea Value=@rawText OnChange=@handleChange />
      </div>
      <div class="col-6 overflow-y-auto h-100" >
        @if (error != null)
        {
          <p class="text-danger text-truncate">Error: @error</p>
        }


        <div>Due At: @assignmentContext.Assignment.DueAt</div>
        <div>Lock At: @assignmentContext.Assignment.LockAt</div>
        <div>Assignment Group Name @assignmentContext.Assignment.LocalAssignmentGroupName</div>
        <div>Submission Types</div>
        <ul>
          @foreach(var t in assignmentContext.Assignment.SubmissionTypes)
          {
            <li>@t</li>
          }
        </ul>
        <hr>
        <div>
          @(preview)
        </div>
        <hr>
        <RubricDisplay />
      </div>
    </div>
  }
</div>