canvasManagement/Management.Web/Shared/Components/Quiz/Markdown/MarkdownQuizForm.razor

@using Management.Web.Shared.Components

@inject QuizEditorContext quizContext

@code {
  private Modal? modal { get; set; }

  private LocalQuiz testQuiz;

  private string? error { get; set; } = null;
  private bool showHelp = false;
  private string _quizMarkdownInput { get; set; } = "";
  private string quizMarkdownInput
  {
    get => _quizMarkdownInput;
    set
    {
      _quizMarkdownInput = value;

      try
      {
        var newQuiz = LocalQuiz.ParseMarkdown(_quizMarkdownInput);
        error = null;
        testQuiz = newQuiz;
        quizContext.SaveQuiz(newQuiz);
      }
      catch (QuizMarkdownParseException e)
      {
        error = e.Message;
        StateHasChanged();
      }
    }
  }

  protected override void OnInitialized()
  {
    reload();
    quizContext.StateHasChanged += reload;
  }
  private void reload()
  {
    if (quizContext.Quiz != null)
    {
      if (quizMarkdownInput == "")
      {
        quizMarkdownInput = quizContext.Quiz.ToMarkdown();
      }
      this.InvokeAsync(this.StateHasChanged);
    }
  }
  public void Dispose()
  {
    quizContext.StateHasChanged -= reload;
  }

  private readonly static string exampleMarkdownQuestion = @"QUESTION REFERENCE
---
Points: 2
this is a question?
*a) correct
b) not correct
---
points: 1
question goes here
[*] correct
[ ] not correct
[] not correct
---
the points default to 1?
*a) true
b) false
---
Markdown is supported

- like
- this
- list

[*] true
[ ] false
---
This is a one point essay question
essay
---
points: 4
this is a short answer question
short_answer";

}

<div class="d-flex flex-column h-100">

  <div class="d-flex flex-row flex-grow-1">
    @if(showHelp)
    {
      <pre class="bg-dark-subtle me-3 pe-5 ps-3 rounded rounded-3">
        @exampleMarkdownQuestion
      </pre>
    }
    <div class="row flex-grow-1">
      <div class="col-6">
        <textarea 
          class="form-control h-100" 
          @bind="quizMarkdownInput" 
          @bind:event="oninput" 
        />
      </div>
      <div class="col-6">
        @if (error != null)
        {
          <p class="text-danger text-truncate">Error: @error</p>
        }
        <QuizPreview Quiz="testQuiz" />
      </div>
    </div>
  </div>

  <div>
    <button 
      class="btn btn-outline-secondary mt-3"
      @onclick="@(() => showHelp = !showHelp)"
    >
      toggle help
    </button>
  </div>
</div>