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

@using Markdig

@inject CoursePlanner planner
@inject AssignmentEditorContext assignmentContext

@code
{
  protected override void OnInitialized()
  {
    assignmentContext.StateHasChanged += reload;
    reload();
  }
  private void reload()
  {
    if (assignmentContext.Assignment != null)
    {
      if(description == string.Empty)
      {
        description = assignmentContext.Assignment.Description;
        descriptionForPreview = description;
        this.InvokeAsync(this.StateHasChanged);
      }
    }
  }
  public void Dispose()
  {
    assignmentContext.StateHasChanged -= reload;
  }

  private string description { get; set; } = string.Empty;
  private string descriptionForPreview { get; set; } = string.Empty;
  public bool? UseTemplate { get; set; } = null;

  public string? TemplateId { get; set; }

  public Dictionary<string, string> VariableValues { get; set; } = new Dictionary<string, string>();

  private AssignmentTemplate? selectedTemplate =>
    planner
    .LocalCourse?
    .Settings
    .AssignmentTemplates
    .FirstOrDefault(t => t.Id == TemplateId);

  private void handleNewDescription(ChangeEventArgs e)
  {
    var newDescription = e.Value?.ToString();
    if (newDescription != string.Empty)
    {
      descriptionForPreview = newDescription;
      if (assignmentContext.Assignment != null)
      {
        var newAssignment = assignmentContext.Assignment with
        {
          Description = newDescription
        };
        assignmentContext.SaveAssignment(newAssignment);
      }
    }
  }

  private MarkupString preview { get => (MarkupString)Markdown.ToHtml(descriptionForPreview); }

}

@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="col-6">
      <textarea 
        id="description" 
        class="form-control h-100" 
        rows=12
        @bind="description"
        @oninput="handleNewDescription"
      />
    </div>
    <div class="col-6" @key="descriptionForPreview">
      @(preview)
    </div>
  </div>
}