canvasManagement/Management.Web/Pages/QuizForm/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 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;
  }
}

<div class="d-flex flex-column h-100">
  <div class="d-flex flex-row h-100 p-2">
    <div class="row flex-grow-1">
      <div class="col-6">
        <MonacoTextArea
          Value="@quizMarkdownInput"
          OnChange="@((v) => quizMarkdownInput = v)"
        />

      </div>
      <div class="col-6 h-100 overflow-y-auto">
        @if (error != null)
        {
          <p class="text-danger text-truncate">Error: @error</p>
        }
        @if(testQuiz != null)
        {
          <QuizPreview Quiz="testQuiz" />
        }
      </div>
    </div>
  </div>

</div>