Neighbourhood.omg.lol/Components/Pages/EditProfile.razor

@page "/editProfile"
@inject NavigationManager Nav
@inject RestService api
@inject State State
@inject IJSRuntime JS


<div class="max markdown-editor">
  <MarkdownEditor @ref="Editor"
                  @bind-Value="@markdownValue"
                  Theme="material-darker"
                  MaxHeight="100%"
                  CustomButtonClicked="@OnCustomButtonClicked">
    <Toolbar>
      <MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa-solid fa-bold" Title="Bold" />
      <MarkdownToolbarButton Action="MarkdownAction.Italic" Icon="fa-solid fa-italic" Title="Italic" />
      <MarkdownToolbarButton Action="MarkdownAction.Heading" Icon="fa-solid fa-heading" Title="Heading" />
      <MarkdownToolbarButton Action="MarkdownAction.Code" Icon="fa-solid fa-code" Title="Code" Separator="true" />
      <MarkdownToolbarButton Action="MarkdownAction.Quote" Icon="fa-solid fa-quote-left" Title="Quote" />
      <MarkdownToolbarButton Action="MarkdownAction.UnorderedList" Icon="fa-solid fa-list-ul" Title="Unordered List" />
      <MarkdownToolbarButton Action="MarkdownAction.OrderedList" Icon="fa-solid fa-list-ol" Title="Ordered List" />
      <MarkdownToolbarButton Action="MarkdownAction.Link" Icon="fa-solid fa-link" Title="Link" Separator="true" />
      <MarkdownToolbarButton Action="MarkdownAction.Image" Icon="fa-solid fa-image" Title="Image" />
      <MarkdownToolbarButton Action="MarkdownAction.HorizontalRule" Icon="fa-solid fa-horizontal-rule" Title="Horizontal Rule" />
      <MarkdownToolbarButton Action="MarkdownAction.Guide" Icon="fa-solid fa-circle-question" Title="Guide" Separator="true" />
      <MarkdownToolbarButton Name="Help" Action="MarkdownAction.Custom"
                               Icon="omg-icon omg-prami" 
                               Title="Editor Information" />
    </Toolbar>
  </MarkdownEditor>
</div>

<details id="advanced">
  <summary> Advanced </summary>
  <small>Style you include here will be places in a &lt;style&gt; element in your page’s &lt;head&gt;.</small>
  <div class="field textarea label border max">
    <InputTextArea @bind-Value="css"></InputTextArea>
    <label>Custom CSS</label>
  </div>
  <small>Anything you put here will be included in your page’s &lt;head&gt; element.</small>
  <div class="field textarea label border max">
    <InputTextArea @bind-Value="head"></InputTextArea>
    <label>Additional &lt;head&gt; Content</label>
  </div>
</details>

<nav>
  <div class="max"></div>
  <button class="transparent link" onclick="history.back();" disabled="@loading">Cancel</button>
  <button @onclick="Save" disabled="@loading">
    @if (loading) {
      <span>Saving...</span>
    }
    else {
      <i class="fa-solid fa-floppy-disk"></i> <span>Save & Publish</span>
    }
  </button>
</nav>

@code {
  private MarkdownEditor? Editor;
  private string? markdownValue;
  private string? css;
  private string? head;

  private bool loading = false;

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    ProfileResponseData? data = await api.GetProfile(State.SelectedAddressName!);
    if (data != null) {
      markdownValue = data.Content;
      css = data.Css;
      head = data.Head;

      await Editor!.SetValueAsync(markdownValue);
    }
    await InvokeAsync(StateHasChanged);
  }

  Task OnMarkdownValueChanged(string value) {
    return Task.CompletedTask;
  }

  public async Task Save() {
    loading = true;
    await InvokeAsync(StateHasChanged);
    var result = await api.PostProfile(State.SelectedAddressName!, 
      new PostProfile() {
        Content = markdownValue ?? string.Empty,
        Css = string.IsNullOrEmpty(css) ? null : css,
        Head = string.IsNullOrEmpty(head) ? null : head
      });
    if (result != null) {
      await State.RefreshNow();
      await InvokeAsync(StateHasChanged);
      Nav.NavigateTo($"/person/{State.SelectedAddressName}#profile");
    }

    loading = false;
  }

  public async Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs) {
    if (eventArgs.Name == "Help") {
      await JS.InvokeVoidAsync("open", "https://home.omg.lol/info/editor", "_blank");
    }
  }
}