RichTextEditor component

BlazorBootstrap.Demo.RCL/Components/Layout/DemosMainLayout.razor.cs

@@ -1,4 +1,4 @@
-namespace BlazorBootstrap.Demo.RCL;
+namespace BlazorBootstrap.Demo.RCL;
 
 public partial class DemosMainLayout : MainLayoutBase
 {
@@ -34,6 +34,7 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "411", Text = "Text Input", Href = DemoRouteConstants.Demos_URL_TextInput, IconName = IconName.InputCursorText, ParentId = "4" },
             new (){ Id = "412", Text = "Text Area Input", Href = DemoRouteConstants.Demos_URL_TextAreaInput, IconName = IconName.InputCursorText, ParentId = "4" },
             new (){ Id = "413", Text = "Time Input", Href = DemoRouteConstants.Demos_URL_TimeInput, IconName = IconName.ClockFill, ParentId = "4" },
+            new (){ Id = "414", Text = "RichTextEditor", Href = DemoRouteConstants.Demos_URL_RichTextEditor, IconName = IconName.Type, ParentId = "4" },
 
             new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger },
             new (){ Id = "500", Text = "Accordion", Href = DemoRouteConstants.Demos_URL_Accordion, IconName = IconName.ChevronBarExpand, ParentId = "5" },

BlazorBootstrap.Demo.RCL/Components/Layout/DocsMainLayout.razor.cs

@@ -1,4 +1,4 @@
-namespace BlazorBootstrap.Demo.RCL;
+namespace BlazorBootstrap.Demo.RCL;
 
 public partial class DocsMainLayout : MainLayoutBase
 {
@@ -33,6 +33,7 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "411", Text = "Text Input", Href = DemoRouteConstants.Docs_URL_TextInput, IconName = IconName.InputCursorText, ParentId = "4" },
             new (){ Id = "412", Text = "Text Area Input", Href = DemoRouteConstants.Docs_URL_TextAreaInput, IconName = IconName.InputCursorText, ParentId = "4" },
             new (){ Id = "413", Text = "Time Input", Href = DemoRouteConstants.Docs_URL_TimeInput, IconName = IconName.ClockFill, ParentId = "4" },
+            new (){ Id = "414", Text = "RichTextEditor", Href = DemoRouteConstants.Docs_URL_RichTextEditor, IconName = IconName.Type, ParentId = "4" },
 
             new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger },
             new (){ Id = "500", Text = "Accordion", Href = DemoRouteConstants.Docs_URL_Accordion, IconName = IconName.ChevronBarExpand, ParentId = "5" },

BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs

@@ -1,4 +1,4 @@
-namespace BlazorBootstrap.Demo.RCL;
+namespace BlazorBootstrap.Demo.RCL;
 
 public partial class MainLayout : MainLayoutBase
 {
@@ -33,6 +33,7 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "410", Text = "Text Input", Href = DemoRouteConstants.Demos_URL_TextInput, IconName = IconName.InputCursorText, ParentId = "4" },
             new (){ Id = "411", Text = "Text Area Input", Href = DemoRouteConstants.Demos_URL_TextAreaInput, IconName = IconName.InputCursorText, ParentId = "4" },
             new (){ Id = "412", Text = "Time Input", Href = DemoRouteConstants.Demos_URL_TimeInput, IconName = IconName.ClockFill, ParentId = "4" },
+            new (){ Id = "413", Text = "RichTextEditor", Href = DemoRouteConstants.Demos_URL_RichTextEditor, IconName = IconName.Type, ParentId = "4" },
 
             new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger },
             new (){ Id = "500", Text = "Accordion", Href = DemoRouteConstants.Demos_URL_Accordion, IconName = IconName.ChevronBarExpand, ParentId = "5" },

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor

@@ -0,0 +1,19 @@
+@page "/rich-text-editor"
+
+@attribute [Route(DemoRouteConstants.Demos_URL_RichTextEditor)]
+@layout DemosMainLayout
+
+<DemosPageHeadSection PageUrl="@DemoRouteConstants.Demos_URL_RichTextEditor" PageTitle="Blazor RichTextEditor" PageDescription="A dependency-free rich text editor with a grouped Bootstrap toolbar." MetaTitle="Blazor RichTextEditor Component" MetaDescription="Rich text editing with safe HTML output." />
+
+<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
+    <Demo Type="typeof(RichTextEditor_Demo_23_Table)" Tabs="true" />
+</Section>
+
+@code {
+    private const string pageUrl = DemoRouteConstants.Demos_URL_RichTextEditor;
+    private const string pageTitle = "Blazor RichTextEditor";
+    private const string pageDescription = "Rich text editing component with a grouped Bootstrap toolbar. It is dependency-free and outputs safe HTML.";
+    private const string metaTitle = "Blazor RichTextEditor Component";
+    private const string metaDescription = "Rich text editing with safe HTML output.";
+    private const string imageUrl = "https://i.imgur.com/N2VUHIn.png"; // TODO: Update the image URL to a relevant image for RichTextEditor
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_01_Undo.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Undo };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Redo.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Redo };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Paragraph.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Paragraph };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Heading1.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Heading1 };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_05_Heading2.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Heading2 };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_06_Heading3.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Heading3 };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_07_Bold.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Bold };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_08_Italic.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Italic };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_09_Underline.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Underline };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_10_Strikethrough.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Strikethrough };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_11_ClearFormatting.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.ClearFormatting };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_12_AlignStart.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.AlignLeft };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_13_AlignCenter.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.AlignCenter };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_14_AlignEnd.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.AlignRight };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_15_OrderedList.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.OrderedList };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_16_UnorderedList.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.UnorderedList };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_17_Blockquote.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Blockquote };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_18_CodeBlock.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.CodeBlock };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_19_TextColor.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.TextColor };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_20_Link.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Link };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_21_Image.razor

@@ -0,0 +1,10 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+<div class="mb-3">@content</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Image };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_23_Table.razor

@@ -0,0 +1,9 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content" ToolbarItems="@toolbarItems" Placeholder="Select text, then use the toolbar command." />
+</div>
+
+@code {
+    private string content = "<p>Sample rich text content</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Table };
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Form/RichTextEditor/RichTextEditor_Doc_01_Documentation.razor

@@ -0,0 +1,29 @@
+@attribute [Route(DemoRouteConstants.Docs_URL_RichTextEditor)]
+@layout DocsMainLayout
+
+<DocsPageHeadSection PageUrl="@DemoRouteConstants.Docs_URL_RichTextEditor"
+                     PageTitle="@componentName"
+                     PageDescription="@pageDescription"
+                     MetaTitle="@metaTitle"
+                     MetaDescription="@metaDescription" />
+
+<DemoLink Href="@DemoRouteConstants.Demos_URL_RichTextEditor" />
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Parameters" PageUrl="@DemoRouteConstants.Docs_URL_RichTextEditor" Link="parameters">
+    <DocxTable TItem="RichTextEditor" DocType="DocType.Parameters" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Methods" PageUrl="@DemoRouteConstants.Docs_URL_RichTextEditor" Link="methods">
+    <DocxTable TItem="RichTextEditor" DocType="DocType.Methods" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Events" PageUrl="@DemoRouteConstants.Docs_URL_RichTextEditor" Link="events">
+    <DocxTable TItem="RichTextEditor" DocType="DocType.Events" />
+</Section>
+
+@code {
+    private const string componentName = nameof(RichTextEditor);
+    private const string pageDescription = $"This documentation provides a comprehensive reference for the <code>{componentName}</code> component, guiding you through its configuration options.";
+    private const string metaTitle = $"Blazor {componentName} Component";
+    private const string metaDescription = $"This documentation provides a comprehensive reference for the {componentName} component, guiding you through its configuration options.";
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Home/Index.razor

@@ -1,4 +1,4 @@
-@page "/"
+@page "/"
 @layout EmptyLayout
 
 <PageTitle>Blazor Bootstrap Components Examples & Demos | Blazor Bootstrap</PageTitle>
@@ -214,6 +214,10 @@
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@DemoRouteConstants.Demos_URL_RangeInput">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Sliders" class="me-2" /> Range Input</h4>
             </a>
+        </div>        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@DemoRouteConstants.Demos_URL_RichTextEditor">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Type" class="me-2" /> RichTextEditor <Badge Color="BadgeColor.Danger">New</Badge></h4>
+            </a>
         </div>
         <div class="col-sm-4 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@DemoRouteConstants.Demos_URL_Ribbon">
@@ -363,6 +367,10 @@
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@DemoRouteConstants.Demos_URL_RangeInput">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Sliders" class="me-2" /> Range Input</h4>
             </a>
+        </div>        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@DemoRouteConstants.Demos_URL_RichTextEditor">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Type" class="me-2" /> RichTextEditor <Badge Color="BadgeColor.Danger">New</Badge></h4>
+            </a>
         </div>
         @* <div class="col-sm-4 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@DemoRouteConstants.Demos_URL_SelectInput">