927482: Prepared getting started UG documentation for Blazor Markdown Editor inside the Rich Text Editor component

blazor-toc.html

@@ -4152,6 +4152,35 @@
 			</li>
 		</ul>
 	</li>
+	<li>Markdown Editor
+		<ul>
+			<li>Getting Started
+				<ul>
+					<li> <a href="/blazor/markdown-editor/getting-started-webapp">Blazor Web App</a></li>
+					<li> <a href="/blazor/markdown-editor/getting-started">Blazor Server and WASM App</a></li>
+				</ul>
+			</li>
+			<li> <a href="/blazor/markdown-editor/accessibility">Accessibility</a></li>
+			<li> <a href="/blazor/markdown-editor/commands">Commands</a></li>
+			<li> <a href="/blazor/markdown-editor/form-validation">Form Validation</a></li>
+			<li> <a href="/blazor/markdown-editor/globalization">Globalization</a></li>
+			<li> <a href="/blazor/markdown-editor/keyboard-support">Keyboard Support</a></li>
+			<li> <a href="/blazor/markdown-editor/resizable-editor">Resizable Editor</a></li>
+			<li> <a href="/blazor/markdown-editor/mention-integration">Mention Integration</a></li>
+			<li> <a href="/blazor/markdown-editor/toolbar">Toolbar</a></li>
+			<li> <a href="/blazor/markdown-editor/undo-redo-manager">Undo Redo Manager</a></li>
+			<li> <a href="/blazor/markdown-editor/value-binding">Value Binding</a></li>
+			<li>Tools
+				<ul>
+					<li><a href="/blazor/markdown-editor/tools/built-in-tools">Built-in Tools</a></li>
+					<li><a href="/blazor/markdown-editor/tools/custom-tool">Custom Tool</a></li>
+					<li><a href="/blazor/markdown-editor/tools/insert-image">Insert Image</a></li>
+					<li><a href="/blazor/markdown-editor/tools/link-manipulation">Link Manipulation</a></li>
+					<li><a href="/blazor/markdown-editor/tools/table-manipulation">Table Manipulation</a></li>
+				</ul>
+			</li>
+		</ul>
+	</li>
 	<li>Sankey
 		<ul>
 			<li>Getting Started

blazor/markdown-editor/accessibility.md

@@ -0,0 +1,159 @@
+---
+layout: post
+title: Accessibility in Blazor Markdown Editor | Syncfusion
+description: Checkout and learn here all about accessibility in Syncfusion Blazor RichTextEditor component with MarkdownEditor and more.
+platform: Blazor
+control: Markdown Editor
+documentation: ug
+---
+
+# Accessibility in Blazor Markdown Editor Component
+
+The Blazor Markdown Editor inside [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component has been designed, keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications, and applies the WAI-ARIA roles, states, and properties. This component is characterized by complete ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
+
+The Blazor Markdown Editor inside Rich Text Editor component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+
+The accessibility compliance for the Blazor Rich Text Editor component is outlined below.
+
+| Accessibility Criteria | Compatibility |
+| -- | -- |
+| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Section 508 Support](../common/accessibility#section-508) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
+| Mobile Device Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Keyboard Navigation](../common/accessibility#keyboard-navigation) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+
+<style>
+    .post .post-content img {
+        display: inline-block;
+        margin: 0.5em 0;
+    }
+</style>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+
+## WAI-ARIA attributes
+
+* The toolbar of Blazor Markdown Editor inside the Rich Text Editor, assigned the role of `Toolbar` and has the following list of [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) attribute.
+
+| **Property** | **Functionalities** |
+| --- | --- |
+| role="toolbar" | This attribute added to the ToolBar element describes the actual role of the element. |
+| aria-orientation     | Indicates the ToolBar orientation. Default value is `horizontal`. |
+| aria-haspopup       | Indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled,  attribute value has to be changed to `true`. | |
+| aria-disabled       | Indicates the disabled state of the ToolBar. |
+| aria-owns | Identifies an element to define a visual, functional, or contextual parent/child relationship between DOM elements when the DOM hierarchy cannot represent the relationship. In the Rich Text Editor, the attribute contains the ID of the Rich Text Editor to indicate the popup as a child element. |
+
+For further details of Toolbar ARIA attributes, refer the  [`accessibility of Toolbar`](../../toolbar/accessibility) documentation.
+
+The Blazor Markdown Editor inside Rich Text Editor element is assigned the role of `application`.
+
+| **Property** | **Functionalities** |
+| --- | --- |
+| role="application" | This attribute added to the Rich Text Editor element describes the actual role of the element. |
+| aria-disabled       | Indicates the disabled state of the ToolBar. |
+
+## Keyboard interaction
+
+The Blazor Markdown Editor inside Rich Text Editor component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. 
+
+You can use the following key shortcuts when the Blazor Rich Text Editor renders with Markdown edit mode.
+
+| Actions | Keyboard shortcuts |
+|----------------|---------|
+| Toolbar focus| <kbd>Alt</kbd> + <kbd>f10</kbd> |
+| Insert link| <kbd>Ctrl</kbd> + <kbd>k</kbd> |
+| Insert image| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>i</kbd> |
+| Insert table| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>e</kbd> |
+| Undo| <kbd>Ctrl</kbd> + <kbd>z</kbd> |
+| Redo| <kbd>Ctrl</kbd> + <kbd>y</kbd> |
+| Copy| <kbd>Ctrl</kbd> + <kbd>c</kbd> |
+| Cut| <kbd>Ctrl</kbd> + <kbd>x</kbd> |
+| Paste| <kbd>Ctrl</kbd> + <kbd>v</kbd> |
+| Bold| <kbd>Ctrl</kbd> + <kbd>b</kbd> |
+| Italic| <kbd>Ctrl</kbd> + <kbd>i</kbd> |
+| Strikethrough| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>s</kbd> |
+| Uppercase| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>u</kbd> |
+| Lowercase| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>l</kbd> |
+| Superscript| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>=</kbd> |
+| Subscript| <kbd>Ctrl</kbd> + <kbd>=</kbd> |
+| Full screen| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>f</kbd> |
+| Ordered list| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>o</kbd> |
+| Unordered list| <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>o</kbd> |
+
+{% tabs %}
+{% highlight cshtml %}
+
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor EditorMode="EditorMode.Markdown">
+
+The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.
+
+**Key features:**
+
+- Capable of handling markdown editing.
+- Contains a modular library to load the necessary functionality on demand.
+- Supports third-party library integration.
+- Allows preview of modified content before saving it.
+
+</SfRichTextEditor>
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor Markdown Editor with accessibility](images/blazor-markdown-editor-accessibility.png)
+
+## Ensuring accessibility
+
+The Blazor Markdown Editor inside Rich Text Editor component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+
+The accessibility compliance of Markdown Editor inside the Rich Text Editor component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rich-text-editor) in a new window to evaluate the accessibility of Markdown Editor inside the Rich Text Editor component with accessibility tools.
+
+### Custom key configuration
+
+Customize the key configuration for the keyboard interaction of the Rich Text Editor using the [KeyConfigure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_KeyConfigure) property.
+
+In the following code block, customize the bold and italic, toolbar actions with **ctrl+1**, **ctrl+2** respectively.
+
+{% tabs %}
+{% highlight cshtml %}
+
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor EditorMode="EditorMode.Markdown" KeyConfigure="@KeyConfig">
+
+The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.
+
+**Key features:**
+
+- Capable of handling markdown editing.
+- Contains a modular library to load the necessary functionality on demand.
+- Supports third-party library integration.
+- Allows preview of modified content before saving it.
+
+</SfRichTextEditor>
+
+@code {
+    private ShortcutKeys KeyConfig = new ShortcutKeys()
+    {
+        Bold = "ctrl+1",
+        Italic = "ctrl+2"
+    };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+<!-- 
+N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap4) example to knows how to render and configure the rich text editor tools. -->
+
+## See also
+
+* [Accessibility in Syncfusion Blazor components](../common/accessibility)

blazor/markdown-editor/code-snippet/custom-placement-validation-message.razor

@@ -0,0 +1,25 @@
+@using Syncfusion.Blazor.RichTextEditor
+@using System.ComponentModel.DataAnnotations;
+
+<EditForm Model="@MyForm">
+        <ValidationMessage For="@(() => MyForm.Description)"></ValidationMessage>
+    <DataAnnotationsValidator />
+
+    <label for="description">Enter Text</label>
+    <SfRichTextEditor ShowCharCount="true" EditorMode="EditorMode.Markdown" MaxLength="200" Placeholder="Type something" @bind-Value="@MyForm.Description">
+    </SfRichTextEditor>
+
+    <button class="e-btn" type="submit">Submit</button>
+</EditForm>
+
+@code{
+    public class Form
+    {
+        [Required(ErrorMessage = "RTE: value is required")]
+        [MinLength(15, ErrorMessage = "RTE: Need atleast 15 character length")]
+        [MaxLength(100, ErrorMessage = "RTE: Maximum 200 characters only")]
+        public string Description { get; set; } = "Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.";
+    }
+
+    private Form MyForm = new Form();
+}

blazor/markdown-editor/code-snippet/disable-undo-redo.razor

@@ -0,0 +1,11 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor UndoRedoSteps="0" EditorMode="EditorMode.Markdown">
+
+The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.
+
+**Key features:**
+
+- Provides **IFRAME** and **DIV** modes
+- Capable of handling markdown editing.
+</SfRichTextEditor>

blazor/markdown-editor/code-snippet/edit-form.razor

@@ -0,0 +1,29 @@
+@using Syncfusion.Blazor.RichTextEditor
+@using System.ComponentModel.DataAnnotations;
+
+<div class="control-section">
+    <div class="content-container">
+        <div id="content" class="box-form" style="margin: 0 auto; max-width:750px; padding:25px">
+            <EditForm Model="@Model">
+                <DataAnnotationsValidator />
+                <SfRichTextEditor ShowCharCount="true" EditorMode="EditorMode.Markdown" MaxLength="100" Placeholder="Type something..." @bind-Value="@Model.Description" />
+                <ValidationMessage For="@(() => Model.Description)" />
+                <div class="btn-grp">
+                    <button class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
+                    <button class="samplebtn e-control e-btn" type="submit" data-ripple="true">Submit</button>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+</div>
+
+@code{
+    private class FormModel
+    {
+        [Required]
+        [MinLength(20, ErrorMessage = "Please enter at least 20 characters.")]
+        public string Description { get; set; }
+    }
+
+    private FormModel Model = new FormModel();
+}

blazor/markdown-editor/code-snippet/markdown-editor-mention-integration.razor

@@ -0,0 +1,100 @@
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor ID="mentionIntegration1" EditorMode="EditorMode.Markdown">
+    Hello [@@Maria](mailto:[email protected])
+
+    Welcome to the mention integration with rich text editor demo. Type `@@` character and tag user from the suggestion list.
+</SfRichTextEditor>
+
+<div id="mention_integration">
+    <SfMention TItem="PersonData" Target="#mentionIntegration_rte-editable" DataSource="@EmailData" SuggestionCount=8 AllowSpaces="true" PopupHeight="200px" PopupWidth="250px">
+        <ItemTemplate>
+            <table>
+                <tr>
+                    <td><div id="mention-TemplateList"><img class="mentionEmpImage" src="/images/@((context as PersonData).EmployeeImage)" alt="employee" />
+                        <span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom @((context as PersonData).Status)"></span></div></td>
+                    <td><span class="person">@((context as PersonData).Name)</span><span class="email">@((context as PersonData).EmailId)</span></td>
+                </tr>
+            </table>
+        </ItemTemplate>
+        <DisplayTemplate>
+            <a href="mailto:@((context as PersonData).EmailId)" title="@((context as PersonData).EmailId)">@@@((context as PersonData).Name)</a>
+        </DisplayTemplate>
+        <ChildContent>
+        <MentionFieldSettings Text="Name"></MentionFieldSettings>
+        </ChildContent>
+    </SfMention>
+</div>
+<style>
+    #mention-TemplateList {
+        position: relative;
+        display: inline-block;
+        padding: 2px;
+    }
+    .person, .email {
+        display: block;
+        line-height: 20px;
+        text-indent: 5px;
+    }
+    .person {
+        font-size: 16px;
+    }
+    .mentionEmpImage {
+        display: inline-block;
+        width: 46px;
+        height: 46px;
+        padding: 3px;
+        border-radius: 25px;
+    }
+    #mention-TemplateList .e-badge-success {
+        left: 76%;
+        bottom: 4px;
+        top: auto;
+    }
+    #mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {
+        line-height: 8px;
+    }
+    #mention-TemplateList .e-badge-success {
+        background-color: #4d841d;
+		color: #fff;
+    }
+    #mention-TemplateList .e-badge-success.away {
+        background-color: #fedd2d;
+		color: #fff;
+    }
+	#mention-TemplateList .e-badge-success.busy {
+        background-color: #de1a1a;
+		color: #fff;
+    }
+    #mention-TemplateList .e-badge.e-badge-dot {
+        height: 10px;
+        width: 10px;
+    }
+    #mention_integration .e-mention-chip{
+        cursor: pointer;
+    }
+</style>
+@code {
+  public class PersonData
+  {  
+    public string Name { get; set; }
+    public string EmailId { get; set; }
+    public string EmployeeImage { get; set;}
+    public string Status { get; set;}
+  }
+  List<PersonData> EmailData = new List<PersonData> {
+    new PersonData() { Name="Selma Rose",  Status = "active", EmployeeImage="2.png", EmailId="[email protected]" },
+    new PersonData() { Name="Russo Kay",  Status = "away", EmployeeImage="8.png", EmailId="[email protected]" },
+    new PersonData() { Name="Camden Kate", Status = "busy", EmployeeImage="9.png", EmailId="[email protected]" },
+    new PersonData() { Name="Garth", Status = "active",  EmployeeImage="7.png", EmailId="[email protected]" },
+    new PersonData() { Name="Ursula Ann", Status = "busy", EmployeeImage="3.png", EmailId="[email protected]" },
+    new PersonData() { Name="Margaret", Status = "active", EmployeeImage="10.png", EmailId="[email protected]" },
+    new PersonData() { Name="Laura Grace", Status = "away", EmployeeImage="1.png", EmailId="[email protected]" },
+    new PersonData() { Name="Robert", Status = "busy", EmployeeImage="dp.png", EmailId="[email protected]" },
+    new PersonData() { Name="Albert", Status = "away", EmployeeImage="8.png", EmailId="[email protected]" },
+    new PersonData() { Name="Michale", Status = "active", EmployeeImage="4.png", EmailId="[email protected]" },
+    new PersonData() { Name="Andrew James", Status = "active", EmployeeImage="db.png", EmailId="[email protected]" },
+    new PersonData() { Name="William", Status = "active", EmployeeImage="10.png", EmailId="[email protected]" }
+  };
+}

blazor/markdown-editor/code-snippet/resize-editor.razor

@@ -0,0 +1,5 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor EnableResize="true" EditorMode="EditorMode.Markdown">
+    The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.
+</SfRichTextEditor>

blazor/markdown-editor/code-snippet/undo-redo.razor

@@ -0,0 +1,11 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor UndoRedoSteps="50" UndoRedoTimer="400" EditorMode="EditorMode.Markdown">
+
+The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.
+
+**Key features:**
+
+- Provides **IFRAME** and **DIV** modes
+- Capable of handling markdown editing.
+</SfRichTextEditor>