From 2c5810bc49d0d8b4c53ebc9b6d25fc4ba8663d72 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Thu, 20 Aug 2026 11:27:01 +0530 Subject: [PATCH 1/2] Expand RichTextEditor docs and demos, update nav IDs Expanded RichTextEditorDocumentation.razor with four practical scenarios and step-by-step guides. Added three new demo components for article drafting, publishing, and event handling. Rewrote and clarified rich-text-editor.mdx documentation, including toolbar customization and demo walkthrough. Updated navigation menu IDs in layout files. Removed obsolete code and comments. --- .../Layout/DemosMainLayout.razor.cs | 2 +- .../Components/Layout/DocsMainLayout.razor.cs | 2 +- .../Components/Layout/MainLayout.razor.cs | 2 +- .../RichTextEditorDocumentation.razor | 67 +++++++++++++++++-- .../RichTextEditor_Demo_22_ArticleDraft.razor | 22 ++++++ ...RichTextEditor_Demo_24_PublishUpdate.razor | 18 +++++ .../RichTextEditor_Demo_25_Events.razor | 50 ++++++++++++++ docs/docs/04-forms/rich-text-editor.mdx | 44 +++++++++--- 8 files changed, 189 insertions(+), 18 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_22_ArticleDraft.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_24_PublishUpdate.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_25_Events.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/DemosMainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/DemosMainLayout.razor.cs index 7da552f8e..fee9c9793 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/DemosMainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/DemosMainLayout.razor.cs @@ -34,7 +34,7 @@ internal override IEnumerable 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" }, diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/DocsMainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/DocsMainLayout.razor.cs index 74991703c..1a704d39f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/DocsMainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/DocsMainLayout.razor.cs @@ -33,7 +33,7 @@ internal override IEnumerable 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" }, diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index 21f266da8..603f63583 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -33,7 +33,7 @@ internal override IEnumerable 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" }, diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor index 1b799977b..e0a68f423 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor @@ -5,15 +5,70 @@ -
+
+
+ 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. +

+ How to use: +
+
    +
  1. Add RichTextEditor to the page and provide an initial Value.
    2. +
  2. Omit ToolbarItems to render every supported toolbar control.
    3. +
  3. Edit the sample content and use multiple toolbar groups to build a complete document.
    4. +
+
+
+
+
+ Use a focused authoring toolbar to turn a rough release-note draft into structured, scannable content with headings, emphasis, color, alignment, lists, and quotations. +

+ How to use: +
+
    +
  1. Choose the commands that match the authoring workflow in ToolbarItems.
    2. +
  2. Place the caret in a paragraph or select text in the draft.
    3. +
  3. Apply a heading, emphasis, list, alignment, or quotation as the document takes shape.
    4. +
+
+
+ +
+ +
+
+ Give a publishing workflow only the insertion commands it needs to add a link, image, separator, or table to an already-authored announcement. +

+ How to use: +
+
    +
  1. Configure the insertion-focused commands in ToolbarItems.
    2. +
  2. Place the caret where the new content belongs in the announcement.
    3. +
  3. Use the link, image, horizontal-rule, or table control and complete its dialog when prompted.
    4. +
+
+
+ +
+ +
+
+ Use ValueChanged to react to committed content and StatusChanged to surface transient editor activity or validation feedback in the surrounding UI. +

+ How to use: +
+
    +
  1. Handle ValueChanged to receive sanitized HTML, plain text, and count metrics after an edit is committed.
    2. +
  2. Handle StatusChanged when the application needs to display transient editor messages.
    3. +
  3. Edit the text below and observe the callback results beneath the editor.
    4. +
+
+
+ +
+ @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 } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_22_ArticleDraft.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_22_ArticleDraft.razor new file mode 100644 index 000000000..0a7c2972b --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_22_ArticleDraft.razor @@ -0,0 +1,22 @@ +
+ +
+ +@code { + private string content = "

June release notes

This draft needs a clear structure before it is published.

Highlight the most important update, then organize the remaining details for readers.

  • Improved editor workflow
  • Updated content guidance
"; + + private readonly RichTextEditorToolbarItem[] toolbarItems = + { + RichTextEditorToolbarItem.Heading2, + RichTextEditorToolbarItem.Bold, + RichTextEditorToolbarItem.Italic, + RichTextEditorToolbarItem.TextColor, + RichTextEditorToolbarItem.AlignLeft, + RichTextEditorToolbarItem.AlignCenter, + RichTextEditorToolbarItem.OrderedList, + RichTextEditorToolbarItem.UnorderedList, + RichTextEditorToolbarItem.Blockquote + }; +} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_24_PublishUpdate.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_24_PublishUpdate.razor new file mode 100644 index 000000000..aebd36f88 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_24_PublishUpdate.razor @@ -0,0 +1,18 @@ +
+ +
+ +@code { + private string content = "

Service update

We have published the latest service update. Add the supporting link, image, or availability table before sharing it.

"; + + private readonly RichTextEditorToolbarItem[] toolbarItems = + { + RichTextEditorToolbarItem.Link, + RichTextEditorToolbarItem.Image, + RichTextEditorToolbarItem.HorizontalRule, + RichTextEditorToolbarItem.Table, + RichTextEditorToolbarItem.Fullscreen + }; +} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_25_Events.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_25_Events.razor new file mode 100644 index 000000000..5458f6f51 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_25_Events.razor @@ -0,0 +1,50 @@ +
+ +
+ +
+
+
+ Last committed change +

@lastChange

+
+
+
+
+ Editor status +

@lastStatus

+
+
+
+ +@code { + private string content = "

Change this project update and pause briefly to commit the editor value.

"; + 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; + } +} \ No newline at end of file diff --git a/docs/docs/04-forms/rich-text-editor.mdx b/docs/docs/04-forms/rich-text-editor.mdx index 285cf1e24..a805e0a36 100644 --- a/docs/docs/04-forms/rich-text-editor.mdx +++ b/docs/docs/04-forms/rich-text-editor.mdx @@ -7,22 +7,52 @@ sidebar_position: 13 # Blazor RichTextEditor -`RichTextEditor` provides document, style, color, alignment, list, link, image, table, block, fullscreen, and print controls without a third-party editor dependency. +`RichTextEditor` is a dependency-free editor for HTML content. Its default toolbar includes document styles, font settings, text emphasis, colors, alignment, lists, links, images, tables, block content, fullscreen, printing, and history controls. + +## Get started + +Add the component to a page, provide its initial HTML, and handle `ValueChanged` when the application needs the sanitized editor result. ```cshtml @code { private string content = "

Draft

"; + private void OnContentChanged(RichTextEditorChange change) => content = change.Html; - private void OnEditorStatus(string status) { } } ``` -`ValueChanged` receives `RichTextEditorChange`, containing sanitized HTML, plain text, character count, and word count. `StatusChanged` is reserved for transient activity and error feedback. +Omit `ToolbarItems` to show the complete default toolbar. `ValueChanged` receives `RichTextEditorChange`, which contains sanitized HTML, plain text, character count, and word count. + +## Choose toolbar controls + +Supply `ToolbarItems` when an editor should expose only the controls needed for its workflow. + +```cshtml + + +@code { + private string content = "

Short update

"; + + private readonly RichTextEditorToolbarItem[] toolbarItems = + { + RichTextEditorToolbarItem.Bold, + RichTextEditorToolbarItem.Italic, + RichTextEditorToolbarItem.Link, + RichTextEditorToolbarItem.OrderedList, + RichTextEditorToolbarItem.UnorderedList + }; +} +``` + +## Demo walkthrough + +The [RichTextEditor demo](https://demos.blazorbootstrap.com/rich-text-editor) starts with the complete toolbar, then shows practical workflows for drafting an article, publishing rich content, and responding to `ValueChanged` and `StatusChanged` events. Each scenario includes a short explanation and ordered `How to use` steps before its runnable source. ## Text and count rules @@ -39,8 +69,4 @@ These browser-side rules provide consistent UI feedback. Continue to validate up The browser module removes unsafe elements, event handlers, unsupported attributes, and unsafe URL schemes before content renders or is emitted. HTTPS image URLs are required. Browser filtering is defense in depth: validate uploads and sanitize HTML again on the server before persistence or markup rendering. -The demo stores a draft under `advanced-rich-text-editor-document` in `sessionStorage`; it does not use local storage. - -## Toolbar and API coverage - -See [the demo](https://demos.blazorbootstrap.com/rich-text-editor) for selection, history, formatting, links, tables, images, fullscreen, print, callbacks, and session-only draft behavior. \ No newline at end of file +The demo stores a draft under `advanced-rich-text-editor-document` in `sessionStorage`; it does not use local storage. \ No newline at end of file From 1fbe162d15b8a98866dc825c859defaaf46992c0 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Thu, 20 Aug 2026 15:21:29 +0530 Subject: [PATCH 2/2] Refactor RichTextEditor docs and demos for clarity Refactored RichTextEditorDocumentation.razor to use new, clearly named demo components and updated section titles/links for consistency. Removed redundant individual demo files to streamline and reorganize the demo structure, improving documentation clarity and navigation. --- .../RichTextEditorDocumentation.razor | 20 +++++++++---------- ...RichTextEditor_Demo_01_Full_Toolbar.razor} | 0 ...ichTextEditor_Demo_02_Article_Draft.razor} | 0 .../RichTextEditor_Demo_02_Redo.razor | 10 ---------- .../RichTextEditor_Demo_03_Paragraph.razor | 10 ---------- ...tEditor_Demo_03_Publish_Rich_Update.razor} | 0 ...or => RichTextEditor_Demo_04_Events.razor} | 0 .../RichTextEditor_Demo_04_Heading1.razor | 10 ---------- .../RichTextEditor_Demo_05_Heading2.razor | 10 ---------- .../RichTextEditor_Demo_06_Heading3.razor | 10 ---------- .../RichTextEditor_Demo_07_Bold.razor | 10 ---------- .../RichTextEditor_Demo_08_Italic.razor | 10 ---------- .../RichTextEditor_Demo_09_Underline.razor | 10 ---------- ...RichTextEditor_Demo_10_Strikethrough.razor | 10 ---------- ...chTextEditor_Demo_11_ClearFormatting.razor | 10 ---------- .../RichTextEditor_Demo_12_AlignStart.razor | 10 ---------- .../RichTextEditor_Demo_13_AlignCenter.razor | 10 ---------- .../RichTextEditor_Demo_14_AlignEnd.razor | 10 ---------- .../RichTextEditor_Demo_15_OrderedList.razor | 10 ---------- ...RichTextEditor_Demo_16_UnorderedList.razor | 10 ---------- .../RichTextEditor_Demo_17_Blockquote.razor | 10 ---------- .../RichTextEditor_Demo_18_CodeBlock.razor | 10 ---------- .../RichTextEditor_Demo_19_TextColor.razor | 10 ---------- .../RichTextEditor_Demo_20_Link.razor | 10 ---------- .../RichTextEditor_Demo_21_Image.razor | 10 ---------- .../RichTextEditor_Demo_23_Table.razor | 9 --------- 26 files changed, 10 insertions(+), 219 deletions(-) rename BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/{RichTextEditor_Demo_01_Undo.razor => RichTextEditor_Demo_01_Full_Toolbar.razor} (100%) rename BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/{RichTextEditor_Demo_22_ArticleDraft.razor => RichTextEditor_Demo_02_Article_Draft.razor} (100%) delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Redo.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Paragraph.razor rename BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/{RichTextEditor_Demo_24_PublishUpdate.razor => RichTextEditor_Demo_03_Publish_Rich_Update.razor} (100%) rename BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/{RichTextEditor_Demo_25_Events.razor => RichTextEditor_Demo_04_Events.razor} (100%) delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Heading1.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_05_Heading2.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_06_Heading3.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_07_Bold.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_08_Italic.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_09_Underline.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_10_Strikethrough.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_11_ClearFormatting.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_12_AlignStart.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_13_AlignCenter.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_14_AlignEnd.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_15_OrderedList.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_16_UnorderedList.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_17_Blockquote.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_18_CodeBlock.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_19_TextColor.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_20_Link.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_21_Image.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_23_Table.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor index e0a68f423..60d1481bd 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor @@ -1,11 +1,11 @@ -@page "/rich-text-editor" +@page "/rich-text-editor" @attribute [Route(DemoRouteConstants.Demos_URL_RichTextEditor)] @layout DemosMainLayout -
+
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.

@@ -18,10 +18,10 @@
- +
-
+
Use a focused authoring toolbar to turn a rough release-note draft into structured, scannable content with headings, emphasis, color, alignment, lists, and quotations.

@@ -34,10 +34,10 @@
- +
-
+
Give a publishing workflow only the insertion commands it needs to add a link, image, separator, or table to an already-authored announcement.

@@ -50,10 +50,10 @@
- +
-
+
Use ValueChanged to react to committed content and StatusChanged to surface transient editor activity or validation feedback in the surrounding UI.

@@ -66,9 +66,9 @@
- +
@code { private const string pageUrl = DemoRouteConstants.Demos_URL_RichTextEditor; -} \ No newline at end of file +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_01_Undo.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_01_Full_Toolbar.razor similarity index 100% rename from BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_01_Undo.razor rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_01_Full_Toolbar.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_22_ArticleDraft.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Article_Draft.razor similarity index 100% rename from BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_22_ArticleDraft.razor rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Article_Draft.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Redo.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Redo.razor deleted file mode 100644 index 95174cb63..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Redo.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Redo }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Paragraph.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Paragraph.razor deleted file mode 100644 index 4a0cf4d57..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Paragraph.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Paragraph }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_24_PublishUpdate.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Publish_Rich_Update.razor similarity index 100% rename from BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_24_PublishUpdate.razor rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Publish_Rich_Update.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_25_Events.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Events.razor similarity index 100% rename from BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_25_Events.razor rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Events.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Heading1.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Heading1.razor deleted file mode 100644 index 966725321..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Heading1.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Heading1 }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_05_Heading2.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_05_Heading2.razor deleted file mode 100644 index 032d96485..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_05_Heading2.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Heading2 }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_06_Heading3.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_06_Heading3.razor deleted file mode 100644 index 8cb68c24b..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_06_Heading3.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Heading3 }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_07_Bold.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_07_Bold.razor deleted file mode 100644 index 846b6814d..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_07_Bold.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Bold }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_08_Italic.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_08_Italic.razor deleted file mode 100644 index e00dc22fe..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_08_Italic.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Italic }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_09_Underline.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_09_Underline.razor deleted file mode 100644 index ced8461b4..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_09_Underline.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Underline }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_10_Strikethrough.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_10_Strikethrough.razor deleted file mode 100644 index 4523e3986..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_10_Strikethrough.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Strikethrough }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_11_ClearFormatting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_11_ClearFormatting.razor deleted file mode 100644 index e7e55f370..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_11_ClearFormatting.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.ClearFormatting }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_12_AlignStart.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_12_AlignStart.razor deleted file mode 100644 index 9c2b28003..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_12_AlignStart.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.AlignLeft }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_13_AlignCenter.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_13_AlignCenter.razor deleted file mode 100644 index 51c315b8e..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_13_AlignCenter.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.AlignCenter }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_14_AlignEnd.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_14_AlignEnd.razor deleted file mode 100644 index c3bb752a6..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_14_AlignEnd.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.AlignRight }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_15_OrderedList.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_15_OrderedList.razor deleted file mode 100644 index a3f7eb187..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_15_OrderedList.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.OrderedList }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_16_UnorderedList.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_16_UnorderedList.razor deleted file mode 100644 index 9f812aaf2..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_16_UnorderedList.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.UnorderedList }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_17_Blockquote.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_17_Blockquote.razor deleted file mode 100644 index 2cd39fa88..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_17_Blockquote.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Blockquote }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_18_CodeBlock.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_18_CodeBlock.razor deleted file mode 100644 index bad0f546d..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_18_CodeBlock.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.CodeBlock }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_19_TextColor.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_19_TextColor.razor deleted file mode 100644 index feea2bbb3..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_19_TextColor.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.TextColor }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_20_Link.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_20_Link.razor deleted file mode 100644 index f5518cec1..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_20_Link.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Link }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_21_Image.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_21_Image.razor deleted file mode 100644 index 28f0ed3fb..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_21_Image.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
@content
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Image }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_23_Table.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_23_Table.razor deleted file mode 100644 index 42fb14d50..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_23_Table.razor +++ /dev/null @@ -1,9 +0,0 @@ -
- -
- -@code { - private string content = "

Sample rich text content

"; - - private readonly RichTextEditorToolbarItem[] toolbarItems = { RichTextEditorToolbarItem.Table }; -} \ No newline at end of file