Merge pull request #6815 from syncfusion-content/983303-markdown-d

983303: Updated markdown-editor documentation

Author: saravanangn

blazor/markdown-editor/accessibility.md

@@ -41,24 +41,24 @@ The accessibility compliance for the Blazor Markdown Editor component is outline
 
 ## WAI-ARIA attributes
 
-* The toolbar of Blazor Markdown Editor, assigned the role of `Toolbar` and has the following list of [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) attribute.
+The toolbar in the Blazor Markdown Editor is assigned the role of `toolbar` and includes the following [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 Markdown Editor, the attribute contains the ID of the Markdown Editor to indicate the popup as a child element. |
+| `role="toolbar"` | Describes the actual role of the toolbar element. |
+| `aria-orientation` | Indicates the toolbar orientation. Default is `horizontal`. |
+| `aria-haspopup` | Indicates whether the toolbar has a popup. Default is `false`. Set to `true` wwhen popup mode is enabled. |
+| `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 Markdown Editor, the attribute contains the ID of the Markdown Editor to indicate the popup as a child element. |
 
-For further details of Toolbar ARIA attributes, refer the  [`accessibility of Toolbar`](../../toolbar/accessibility) documentation.
+or more information about toolbar ARIA attributes, refer to the  [accessibility of Toolbar](https://blazor.syncfusion.com/documentation/toolbar/accessibility) documentation.
 
-The Blazor Markdown Editor element is assigned the role of `application`.
+The Blazor Markdown Editor element is assigned the role of `application`:
 
 | **Property** | **Functionalities** |
 | --- | --- |
-| role="application" | This attribute added to the Markdown Editor element describes the actual role of the element. |
-| aria-disabled       | Indicates the disabled state of the ToolBar. |
+| `role="application"`| Describes the actual role of the Markdown Editor element. |
+| `aria-disabled` | Indicates the disabled state of the toolbar. |
 
 {% tabs %}
 {% highlight cshtml %}
@@ -72,13 +72,13 @@ The Blazor Markdown Editor element is assigned the role of `application`.
 
 ## Keyboard interaction
 
-The Blazor Markdown 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. The following keyboard shortcuts are supported by the Markdown Editor component. 
+The Blazor Markdown Editor component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Markdown Editor component. 
 
 For more details on keyboard navigation, refer to the [Keyboard support](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support) documentation.
 
 ## Ensuring accessibility
 
-The Blazor Markdown Editor component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+Accessibility levels are validated using the[axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
 
 The accessibility compliance of the Markdown 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 the Markdown Editor component with accessibility tools.
 
@@ -101,4 +101,4 @@ N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/bla
 
 ## See also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](../common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](../common/accessibility)

blazor/markdown-editor/custom-format.md

@@ -1,19 +1,22 @@
 ---
 layout: post
 title: Customize Markdown Syntax in Blazor Markdown Editor | Syncfusion
-description: Checkout and learn here all about Customizing Markdown Syntax in Syncfusion Blazor Markdown Editor component and more.
+description: Learn how to customize Markdown syntax in the Syncfusion Blazor Markdown Editor component, including formatting options, toolbar customization, and more.
 platform: Blazor
 control: MarkdownEditor
 documentation: ug
 ---
 
 # Customizing Markdown Syntax in Blazor Markdown Editor Component
 
-The Rich Text Editor allows you to customize the markdown syntax by overriding its default syntax. Configure the customized markdown syntax using [RichTextEditorMarkdownOptions.ListSyntax](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMarkdownOptions_ListSyntax), [RichTextEditorMarkdownOptions.FormatSyntax](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMarkdownOptions_FormatSyntax), [RichTextEditorMarkdownOptions.SelectionSyntax](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMarkdownOptions_SelectionSyntax) properties.
+The Rich Text Editor allows you to customize the Markdown syntax by overriding its default behavior. You can configure custom Markdown syntax using the following properties:
+- [RichTextEditorMarkdownOptions.ListSyntax](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMarkdownOptions_ListSyntax)
+- [RichTextEditorMarkdownOptions.FormatSyntax](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMarkdownOptions_FormatSyntax)
+- [RichTextEditorMarkdownOptions.SelectionSyntax](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMarkdownOptions_SelectionSyntax)
 
-## Defining Custom Markdown Formatting  
+## Defining Custom Markdown Formatting
 
-You can define custom symbols for different Markdown formatting options:
+You can define custom symbols for various Markdown formatting options:
 
 * Use `+` for unordered lists instead of `-`.
 * Use `__text__` for bold text instead of `**text**`.
@@ -33,4 +36,4 @@ The following example demonstrates how to customize Markdown tags in the editor:
 
 ![Blazor RichTextEditor markdown custom format](./images/blazor-richtexteditor-markdown-custom-formats.png)
 
-![Blazor RichTextEditor markdown custom selection](./images/blazor-richtexteditor-markdown-custom-bold.png)
+![Blazor RichTextEditor markdown custom selection](./images/blazor-richtexteditor-markdown-custom-bold.png)

blazor/markdown-editor/getting-started-webapp.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Markdown Editor in Blazor Web App
 
-This section briefly explains about how to include [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section explains how to integrate [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -29,7 +29,7 @@ You need to configure the corresponding [Interactive render mode](https://learn.
 
 To add **Blazor Markdown Editor** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -74,7 +74,7 @@ N> For more information on creating a **Blazor Web App** with various interactiv
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -207,7 +207,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* Define the desired render mode here *@
 @rendermode InteractiveAuto
 
 {% endhighlight %}
@@ -220,7 +220,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 
 @code {
     private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
 
 }
 
@@ -245,7 +245,7 @@ Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items]
 @code {
 
     private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
@@ -305,7 +305,7 @@ To retrieve the contents of the Markdown editor, use the [Value](https://help.sy
     private bool Visibility = false;
     private string Header = "Markdown Editor Value";
     private string RteValue = @" In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+        the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
     private async Task GetValue()
     {
         this.Content = this.RteValue;
@@ -350,7 +350,7 @@ To retrieve the maximum number of characters in the Markdown Editor's content, u
     private bool Visibility = false;
     private string Header = "Rich Text Editor's Value";
     private string RteValue = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
     private async Task GetCharCount()
     {
         double charCount = await this.RteObj.GetCharCountAsync();

blazor/markdown-editor/insert-image.md

@@ -7,19 +7,19 @@ control: MarkdownEditor
 documentation: ug
 ---
 
-# Insert Images in Blazor Markdown Editor Component
+# How to Insert Images in Blazor Markdown Editor Component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor allows users to insert images using the toolbar. This feature enables embedding images from online sources into the editor content.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor allows users to insert images using the built-in toolbar. This feature supports embedding images from online sources directly into the editor content.
 
-## Steps to Insert an Image  
+## Steps to Insert an Image
 
-Follow these steps to add an image in the Markdown editor:
+To insert an image in the Markdown Editor:
 
 1. Click the [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html) icon in the toolbar.
 2. Enter the **URL** of the image from an online source.
 3. Click the **Insert** button in the image dialog.
 
-The image will be added to the editor content at the cursor position.
+The image will be added to the editor content at the current cursor position.
 
 The following example demonstrates how to enable image insertion in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor.
 
@@ -31,4 +31,4 @@ The following example demonstrates how to enable image insertion in the Syncfusi
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Markdown Editor markdown image](./images/blazor-markdowneditor-markdown-image.png)
+![Image insertion using Blazor Markdown Editor toolbar](./images/blazor-markdowneditor-markdown-image.png)