@page "/annoyed"
@using Syncfusion.Blazor.RichTextEditor
@using Syncfusion.Blazor.Buttons
@if (ShowTextBox)
{
    <SfRichTextEditor @bind-Value="@Text">
        <RichTextEditorToolbarSettings Items="@_tools">
            <RichTextEditorCustomToolbarItems>
                <RichTextEditorCustomToolbarItem Name="Delete Paragraph">
                    <Template>
                        <SfButton @onclick="() => { ShowTextBox = false; }">Delete</SfButton>
                    </Template>
                </RichTextEditorCustomToolbarItem>
            </RichTextEditorCustomToolbarItems>
        </RichTextEditorToolbarSettings>
    </SfRichTextEditor>
}

@code {
    private string Text { get; set; }
    private bool ShowTextBox { get; set; } = true;
    private readonly List<ToolbarItemModel> _tools =
    [
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.Underline },
        new() { Command = ToolbarCommand.FontColor },
        new() { Command = ToolbarCommand.BackgroundColor },
        new() { Command = ToolbarCommand.HorizontalSeparator },
        new() { Command = ToolbarCommand.Alignments },
        new() { Command = ToolbarCommand.Formats },
        new() { Command = ToolbarCommand.NumberFormatList },
        new() { Command = ToolbarCommand.BulletFormatList },
        new() { Name = "Delete Paragraph", TooltipText = "Delete Paragraph" }
    ];
}