-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add ability to customize toolbar options (#12)
* add ability to customize toolbar options
- Loading branch information
1 parent
9f8dce9
commit 913162f
Showing
7 changed files
with
313 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,4 +9,4 @@ | |
| <p role="alert">Sorry, there's nothing at this address.</p> | ||
| </LayoutView> | ||
| </NotFound> | ||
| </Router> | ||
| </Router> | ||
10 changes: 10 additions & 0 deletions
10
src/Tizzani.MudBlazor.HtmlEditor/CascadingMudHtmlToolbarOptions.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @inherits MudHtmlToolbarOptions | ||
|
|
||
| <CascadingValue Value="this"> | ||
| @ChildContent | ||
| </CascadingValue> | ||
|
|
||
| @code { | ||
| [Parameter] | ||
| public RenderFragment? ChildContent { get; set; } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
117 changes: 117 additions & 0 deletions
117
src/Tizzani.MudBlazor.HtmlEditor/MudHtmlToolbarOptions.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| @if (Show(TypographyPicker)) | ||
| { | ||
| <span class="ql-formats"> | ||
| <select class="ql-header"> | ||
| <option value="1">Heading 1</option> | ||
| <option value="2">Heading 2</option> | ||
| <option value="3">Heading 3</option> | ||
| <option value="4">Heading 4</option> | ||
| <option value="5">Heading 5</option> | ||
| <option value="6">Heading 6</option> | ||
| <option value="" selected>Paragraph</option> | ||
| </select> | ||
| </span> | ||
| } | ||
|
|
||
| @if (Show(Bold, Italic, Underline, Strike)) | ||
| { | ||
| <span class="ql-formats"> | ||
| @if (Show(Bold)) | ||
| { | ||
| <button class="ql-bold" type="button"></button> | ||
| } | ||
| @if (Show(Italic)) | ||
| { | ||
| <button class="ql-italic" type="button"></button> | ||
| } | ||
| @if (Show(Underline)) | ||
| { | ||
| <button class="ql-underline" type="button"></button> | ||
| } | ||
| @if (Show(Strike)) | ||
| { | ||
| <button class="ql-strike" type="button"></button> | ||
| } | ||
| </span> | ||
| } | ||
|
|
||
| @if (Show(ForegroundColorPicker, BackgroundColorPicker)) | ||
| { | ||
| <span class="ql-formats"> | ||
| @if (Show(ForegroundColorPicker)) | ||
| { | ||
| <select class="ql-color"></select> | ||
| } | ||
| @if (Show(BackgroundColorPicker)) | ||
| { | ||
| <select class="ql-background"></select> | ||
| } | ||
| </span> | ||
| } | ||
|
|
||
| @if (Show(SubSuperScript)) | ||
| { | ||
| <span class="ql-formats"> | ||
| <button class="ql-script" value="sub" type="button"></button> | ||
| <button class="ql-script" value="super" type="button"></button> | ||
| </span> | ||
| } | ||
|
|
||
| @if (Show(Align)) | ||
| { | ||
| <span class="ql-formats"> | ||
| <button class="ql-align" type="button" value=""></button> | ||
| <button class="ql-align" type="button" value="center"></button> | ||
| <button class="ql-align" type="button" value="right"></button> | ||
| <button class="ql-align" type="button" value="justify"></button> | ||
| </span> | ||
| } | ||
|
|
||
| @if (Show(OrderedList, UnorderedList, Indent)) | ||
| { | ||
| <span class="ql-formats"> | ||
| @if (Show(OrderedList)) | ||
| { | ||
| <button class="ql-list" type="button" value="ordered"></button> | ||
| } | ||
| @if (Show(UnorderedList)) | ||
| { | ||
| <button class="ql-list" type="button" value="bullet"></button> | ||
| } | ||
| @if (Show(Indent)) | ||
| { | ||
| <button class="ql-indent" type="button" value="+1"></button> | ||
| <button class="ql-indent" type="button" value="-1"></button> | ||
| } | ||
| </span> | ||
| } | ||
|
|
||
| @if (Show(InsertLink, InsertImage, Blockquote, CodeBlock, HorizontalRule)) | ||
| { | ||
| <span class="ql-formats"> | ||
| @if (Show(InsertLink)) | ||
| { | ||
| <button class="ql-link" type="button"></button> | ||
| } | ||
| @if (Show(InsertImage)) | ||
| { | ||
| <button class="ql-image" type="button"></button> | ||
| } | ||
| @if (Show(Blockquote)) | ||
| { | ||
| <button class="ql-blockquote" type="button"></button> | ||
| } | ||
| @if (Show(CodeBlock)) | ||
| { | ||
| <button class="ql-code-block" type="button"></button> | ||
| } | ||
| @if (Show(HorizontalRule)) | ||
| { | ||
| <button class="ql-hr" title="Horizontal Line"> | ||
| <svg viewBox="0 0 24 24"> | ||
| <path d="M4 19h16c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm0-8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z" class="ql-fill"></path> | ||
| </svg> | ||
| </button> | ||
| } | ||
| </span> | ||
| } |
140 changes: 140 additions & 0 deletions
140
src/Tizzani.MudBlazor.HtmlEditor/MudHtmlToolbarOptions.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace Tizzani.MudBlazor.HtmlEditor; | ||
|
|
||
| /// <summary> | ||
| /// Defines the toolbar options that are available in the HtmlEditor. | ||
| /// </summary> | ||
| public partial class MudHtmlToolbarOptions | ||
| { | ||
| [CascadingParameter] | ||
| private MudHtmlToolbarOptions? DefaultOptions { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option to select different headings and paragraph styles. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? TypographyPicker { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option to bold text. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? Bold { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option to italicize text. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? Italic { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option to underline text. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? Underline { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option to strike through text. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? Strike { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, a color picker for the foreground color will be available in the toolbar. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? ForegroundColorPicker { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, a color picker for the background color will be available in the toolbar. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? BackgroundColorPicker { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option to insert subscripts and superscripts. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? SubSuperScript { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option to align text (e.g., left, center, right, justify). | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? Align { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option to insert an unordered (numbered) list. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? OrderedList { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option to insert an unordered (bulleted) list. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? UnorderedList { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option of increasing/decreasing the indent size. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? Indent { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option of inserting a hyperlink. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? InsertLink { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option of inserting an image. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? InsertImage { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option of inserting a blockquote. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? Blockquote { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option of inserting a code block. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? CodeBlock { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// If <see langword="true"/>, the toolbar will include the option of inserting a horizontal rule. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? HorizontalRule { get; set; } | ||
|
|
||
| private static bool Show(params bool?[] options) => options.Any(o => o is not false); | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| if (DefaultOptions != null) | ||
| { | ||
| TypographyPicker ??= DefaultOptions.TypographyPicker; | ||
| Bold ??= DefaultOptions.Bold; | ||
| Italic ??= DefaultOptions.Italic; | ||
| Underline ??= DefaultOptions.Underline; | ||
| Strike ??= DefaultOptions.Strike; | ||
| ForegroundColorPicker ??= DefaultOptions.ForegroundColorPicker; | ||
| BackgroundColorPicker ??= DefaultOptions.BackgroundColorPicker; | ||
| SubSuperScript ??= DefaultOptions.SubSuperScript; | ||
| Align ??= DefaultOptions.Align; | ||
| OrderedList ??= DefaultOptions.OrderedList; | ||
| UnorderedList ??= DefaultOptions.UnorderedList; | ||
| Indent ??= DefaultOptions.Indent; | ||
| InsertLink ??= DefaultOptions.InsertLink; | ||
| InsertImage ??= DefaultOptions.InsertImage; | ||
| Blockquote ??= DefaultOptions.Blockquote; | ||
| CodeBlock ??= DefaultOptions.CodeBlock; | ||
| HorizontalRule ??= DefaultOptions.HorizontalRule; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters