From 0fcda98b9fcab457f9eaa23003f30d21e1df66bd Mon Sep 17 00:00:00 2001
From: Gordon Pedersen <death.au@death.id.au>
Date: Fri, 5 Jul 2024 17:18:46 +1000
Subject: [PATCH] Customizing the markdown editor toolbar

---
 Components/Pages/EditProfile.razor | 27 ++++++++++++++++++++++++++-
 Components/_Imports.razor          |  1 +
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/Components/Pages/EditProfile.razor b/Components/Pages/EditProfile.razor
index 43612e5..8a0970c 100644
--- a/Components/Pages/EditProfile.razor
+++ b/Components/Pages/EditProfile.razor
@@ -2,13 +2,32 @@
 @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%" />
+                  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">
@@ -80,4 +99,10 @@
 
     loading = false;
   }
+
+  public async Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs) {
+    if (eventArgs.Name == "Help") {
+      await JS.InvokeVoidAsync("open", "https://home.omg.lol/info/editor", "_blank");
+    }
+  }
 }
diff --git a/Components/_Imports.razor b/Components/_Imports.razor
index db49f5b..b6f0f60 100644
--- a/Components/_Imports.razor
+++ b/Components/_Imports.razor
@@ -14,3 +14,4 @@
 @using Markdig
 @using PSC.Blazor.Components.MarkdownEditor
 @using PSC.Blazor.Components.MarkdownEditor.EventsArgs
+@using PSC.Blazor.Components.MarkdownEditor.Enums