death.au/Neighbourhood.omg.lol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Customizing the markdown editor toolbar

Browse source
This commit is contained in:
Gordon Pedersen 2024-07-05 17:18:46 +10:00
parent 25f362bfc5
commit 0fcda98b9f
2 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
Components/Pages/EditProfile.razor
View file

@ -2,13 +2,32 @@
@inject NavigationManager Nav @inject NavigationManager Nav
@inject RestService api @inject RestService api
@inject State State @inject State State
@inject IJSRuntime JS
<div class="max markdown-editor"> <div class="max markdown-editor">
<MarkdownEditor @ref="Editor" <MarkdownEditor @ref="Editor"
@bind-Value="@markdownValue" @bind-Value="@markdownValue"
Theme="material-darker" 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> </div>
<details id="advanced"> <details id="advanced">
@ -80,4 +99,10 @@
loading = false; loading = false;
} }
public async Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs) {
if (eventArgs.Name == "Help") {
await JS.InvokeVoidAsync("open", "https://home.omg.lol/info/editor", "_blank");
}
}
} }

1
Components/_Imports.razor
View file

@ -14,3 +14,4 @@
@using Markdig @using Markdig
@using PSC.Blazor.Components.MarkdownEditor @using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs @using PSC.Blazor.Components.MarkdownEditor.EventsArgs
@using PSC.Blazor.Components.MarkdownEditor.Enums