RichTextEditor docs

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

@@ -34,7 +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 = "416", 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

@@ -33,7 +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 = "416", 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

@@ -33,7 +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 = "415", 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

@@ -1,19 +1,74 @@
-@page "/rich-text-editor"
+@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_01_Undo)" Tabs="true" />
+<Section Class="p-0" Size="HeadingSize.H3" Name="Full toolbar" PageUrl="@pageUrl" Link="full-toolbar">
+    <div class="mb-3">
+        Start with the complete toolbar when authors need the full RichTextEditor feature set in one place, from document styles and text formatting through media, tables, history, printing, and fullscreen mode.
+        <br /><br />
+        <strong>How to use:</strong>
+        <div class="content mb-2">
+            <ol>
+                <li>Add <code>RichTextEditor</code> to the page and provide an initial <code>Value</code>.</li>
+                <li>Omit <code>ToolbarItems</code> to render every supported toolbar control.</li>
+                <li>Edit the sample content and use multiple toolbar groups to build a complete document.</li>
+            </ol>
+        </div>
+    </div>
+    <Demo Type="typeof(RichTextEditor_Demo_01_Full_Toolbar)" Tabs="true" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Article draft" PageUrl="@pageUrl" Link="article-draft">
+    <div class="mb-3">
+        Use a focused authoring toolbar to turn a rough release-note draft into structured, scannable content with headings, emphasis, color, alignment, lists, and quotations.
+        <br /><br />
+        <strong>How to use:</strong>
+        <div class="content mb-2">
+            <ol>
+                <li>Choose the commands that match the authoring workflow in <code>ToolbarItems</code>.</li>
+                <li>Place the caret in a paragraph or select text in the draft.</li>
+                <li>Apply a heading, emphasis, list, alignment, or quotation as the document takes shape.</li>
+            </ol>
+        </div>
+    </div>
+    <Demo Type="typeof(RichTextEditor_Demo_02_Article_Draft)" Tabs="true" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Publish rich update" PageUrl="@pageUrl" Link="publish-rich-update">
+    <div class="mb-3">
+        Give a publishing workflow only the insertion commands it needs to add a link, image, separator, or table to an already-authored announcement.
+        <br /><br />
+        <strong>How to use:</strong>
+        <div class="content mb-2">
+            <ol>
+                <li>Configure the insertion-focused commands in <code>ToolbarItems</code>.</li>
+                <li>Place the caret where the new content belongs in the announcement.</li>
+                <li>Use the link, image, horizontal-rule, or table control and complete its dialog when prompted.</li>
+            </ol>
+        </div>
+    </div>
+    <Demo Type="typeof(RichTextEditor_Demo_03_Publish_Rich_Update)" Tabs="true" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Events" PageUrl="@pageUrl" Link="events">
+    <div class="mb-3">
+        Use <code>ValueChanged</code> to react to committed content and <code>StatusChanged</code> to surface transient editor activity or validation feedback in the surrounding UI.
+        <br /><br />
+        <strong>How to use:</strong>
+        <div class="content mb-2">
+            <ol>
+                <li>Handle <code>ValueChanged</code> to receive sanitized HTML, plain text, and count metrics after an edit is committed.</li>
+                <li>Handle <code>StatusChanged</code> when the application needs to display transient editor messages.</li>
+                <li>Edit the text below and observe the callback results beneath the editor.</li>
+            </ol>
+        </div>
+    </div>
+    <Demo Type="typeof(RichTextEditor_Demo_04_Events)" 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_02_Article_Draft.razor

@@ -0,0 +1,22 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content"
+                    ToolbarItems="@toolbarItems"
+                    Placeholder="Draft the release notes." />
+</div>
+
+@code {
+    private string content = "<h2>June release notes</h2><p>This draft needs a clear structure before it is published.</p><p>Highlight the most important update, then organize the remaining details for readers.</p><ul><li>Improved editor workflow</li><li>Updated content guidance</li></ul>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems =
+    {
+        RichTextEditorToolbarItem.Heading2,
+        RichTextEditorToolbarItem.Bold,
+        RichTextEditorToolbarItem.Italic,
+        RichTextEditorToolbarItem.TextColor,
+        RichTextEditorToolbarItem.AlignLeft,
+        RichTextEditorToolbarItem.AlignCenter,
+        RichTextEditorToolbarItem.OrderedList,
+        RichTextEditorToolbarItem.UnorderedList,
+        RichTextEditorToolbarItem.Blockquote
+    };
+}

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

@@ -0,0 +1,18 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content"
+                    ToolbarItems="@toolbarItems"
+                    Placeholder="Publish the announcement." />
+</div>
+
+@code {
+    private string content = "<h2>Service update</h2><p>We have published the latest service update. Add the supporting link, image, or availability table before sharing it.</p>";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems =
+    {
+        RichTextEditorToolbarItem.Link,
+        RichTextEditorToolbarItem.Image,
+        RichTextEditorToolbarItem.HorizontalRule,
+        RichTextEditorToolbarItem.Table,
+        RichTextEditorToolbarItem.Fullscreen
+    };
+}

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

@@ -0,0 +1,50 @@
+<div class="mb-3">
+    <RichTextEditor Value="@content"
+                    ToolbarItems="@toolbarItems"
+                    ValueChanged="OnValueChanged"
+                    StatusChanged="OnStatusChanged"
+                    Placeholder="Edit the draft to see callback results." />
+</div>
+
+<div class="row g-3">
+    <div class="col-md-6">
+        <div class="border rounded p-3 h-100">
+            <strong>Last committed change</strong>
+            <p class="mb-0">@lastChange</p>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <div class="border rounded p-3 h-100">
+            <strong>Editor status</strong>
+            <p class="mb-0">@lastStatus</p>
+        </div>
+    </div>
+</div>
+
+@code {
+    private string content = "<p>Change this project update and pause briefly to commit the editor value.</p>";
+    private string lastChange = "No committed change yet.";
+    private string lastStatus = "No editor status yet.";
+
+    private readonly RichTextEditorToolbarItem[] toolbarItems =
+    {
+        RichTextEditorToolbarItem.Bold,
+        RichTextEditorToolbarItem.Italic,
+        RichTextEditorToolbarItem.Link,
+        RichTextEditorToolbarItem.OrderedList,
+        RichTextEditorToolbarItem.UnorderedList
+    };
+
+    private Task OnValueChanged(RichTextEditorChange change)
+    {
+        content = change.Html;
+        lastChange = $"Committed {change.WordCount} words and {change.CharacterCount} characters.";
+        return Task.CompletedTask;
+    }
+
+    private Task OnStatusChanged(string status)
+    {
+        lastStatus = status;
+        return Task.CompletedTask;
+    }
+}