From 18b583b0d35617a009ff064d18f3044db1d1274b Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Mon, 6 Oct 2025 17:33:16 +0530 Subject: [PATCH 1/6] 983303: Updated markdown-editor documentation --- blazor/markdown-editor/accessibility.md | 24 +++++++++---------- blazor/markdown-editor/custom-format.md | 11 +++++---- .../markdown-editor/getting-started-webapp.md | 16 ++++++------- blazor/markdown-editor/insert-image.md | 12 +++++----- blazor/markdown-editor/insert-table.md | 20 +++++++++++----- blazor/markdown-editor/keyboard-support.md | 6 ++++- blazor/markdown-editor/markdown-preview.md | 7 ++++-- blazor/markdown-editor/mention-support.md | 6 ++--- blazor/markdown-editor/supported-markdown.md | 4 ++-- blazor/markdown-editor/toolbar.md | 12 ++++++---- 10 files changed, 69 insertions(+), 49 deletions(-) diff --git a/blazor/markdown-editor/accessibility.md b/blazor/markdown-editor/accessibility.md index d8f52de474..4cfd34e695 100644 --- a/blazor/markdown-editor/accessibility.md +++ b/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. +ccessibility 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. diff --git a/blazor/markdown-editor/custom-format.md b/blazor/markdown-editor/custom-format.md index e3fac8ad1b..67b07a29a4 100644 --- a/blazor/markdown-editor/custom-format.md +++ b/blazor/markdown-editor/custom-format.md @@ -1,7 +1,7 @@ --- 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 and more. platform: Blazor control: MarkdownEditor documentation: ug @@ -9,11 +9,14 @@ 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**`. diff --git a/blazor/markdown-editor/getting-started-webapp.md b/blazor/markdown-editor/getting-started-webapp.md index aa3f886029..1ad976d3d3 100644 --- a/blazor/markdown-editor/getting-started-webapp.md +++ b/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® 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® 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® 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® 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® Blazor component NuGet packages in the client project. * Press Ctrl+` 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 Marked 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 Marked 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 Marked 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 Marked is used in this sample to convert markdown into HTML content."; private List Tools = new List() { @@ -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 Marked 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 Marked 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 Marked 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 Marked is used in this sample to convert markdown into HTML content."; private async Task GetCharCount() { double charCount = await this.RteObj.GetCharCountAsync(); diff --git a/blazor/markdown-editor/insert-image.md b/blazor/markdown-editor/insert-image.md index b589aaa0e9..552d3914ce 100644 --- a/blazor/markdown-editor/insert-image.md +++ b/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® 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® 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® 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) \ No newline at end of file +![Image insertion using Blazor Markdown Editor toolbar](./images/blazor-markdowneditor-markdown-image.png) \ No newline at end of file diff --git a/blazor/markdown-editor/insert-table.md b/blazor/markdown-editor/insert-table.md index 8664fe60e0..69f066f0ff 100644 --- a/blazor/markdown-editor/insert-table.md +++ b/blazor/markdown-editor/insert-table.md @@ -7,20 +7,28 @@ control: MarkdownEditor documentation: ug --- -# Insert Table in Blazor Markdown Editor Component +# How to Insert Tables in Blazor Markdown Editor Component The Syncfusion® Blazor Markdown Editor provides built-in support for inserting tables, allowing users to create and customize tables effortlessly within the editor. -## Enable Table Insertion in Blazor Markdown Editor +## Steps to Enable Table Insertion -To enable the table insertion feature, add the `CreateTable` option to the toolbar items. Once added, users can click the [Table](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorTableSettings.html#properties) icon in the toolbar to insert a table into the editor. +To enable the table insertion feature: -By default, when a table is inserted, it consists of: +1. Add the `CreateTable` option to the toolbar items. +2. Click the [Table](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorTableSettings.html#properties) icon in the toolbar. +3. Select the desired table configuration and insert it into the editor. + +### Default Table Structure + +When a table is inserted, it includes: * 2 rows and 2 columns * A table header row -This ensures that users can start formatting and adding content immediately. +This default layout allows users to begin formatting and adding content immediately. + +The following example demonstrates how to enable table insertion in the Syncfusion Blazor Markdown Editor. {% tabs %} {% highlight cshtml %} @@ -30,4 +38,4 @@ This ensures that users can start formatting and adding content immediately. {% endhighlight %} {% endtabs %} -![Blazor Markdown Editor markdown table](./images/blazor-richtexteditor-markdown-table.png) \ No newline at end of file +![Table insertion using Blazor Markdown Editor toolbar](./images/blazor-richtexteditor-markdown-table.png) \ No newline at end of file diff --git a/blazor/markdown-editor/keyboard-support.md b/blazor/markdown-editor/keyboard-support.md index 83395c15b3..cbf07b360b 100644 --- a/blazor/markdown-editor/keyboard-support.md +++ b/blazor/markdown-editor/keyboard-support.md @@ -1,6 +1,6 @@ --- layout: post -title: Keyboard support in Blazor Markdown Editor Component | Syncfusion +title: Keyboard support in Markdown Editor Component | Syncfusion description: Checkout and learn here all about Keyboard support in Syncfusion Blazor Markdown Editor component and more. platform: Blazor control: MarkdownEditor @@ -11,6 +11,10 @@ documentation: ug You can use the following keyboard shortcuts when the Rich Text Editor is set to [EditorMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EditorMode) as `Markdown`. +## Overview + +The Syncfusion Blazor Markdown Editor supports a wide range of keyboard shortcuts to enhance productivity and streamline text editing. These shortcuts cover toolbar access, content formatting, insertion of elements, clipboard operations, and more. This guide provides a comprehensive list of available shortcuts for both Windows and Mac platforms. + ## Toolbar These shortcuts provide quick access to toolbar functions for managing menus and dialogs. diff --git a/blazor/markdown-editor/markdown-preview.md b/blazor/markdown-editor/markdown-preview.md index 0428aaa14e..ccee1260a1 100644 --- a/blazor/markdown-editor/markdown-preview.md +++ b/blazor/markdown-editor/markdown-preview.md @@ -7,10 +7,13 @@ control: MarkdownEditor documentation: ug --- -# Markdown to HTML preview in Blazor Markdown Editor Component +# Live Markdown Preview in Blazor Markdown Editor The Syncfusion® Blazor Markdown Editor provides an instant Markdown to HTML preview, allowing users to visualize formatted content in real time as they type or edit Markdown text. This feature enhances the editing experience by making formatting changes immediately visible. +## Overview +The Syncfusion Blazor Markdown Editor includes a live preview feature that instantly converts Markdown text into HTML. This allows users to see the formatted output in real time, improving the editing experience and reducing formatting errors. + ## Enable Markdown Preview in Blazor Markdown Editor To enable the Markdown preview feature, the `Markdig` package is used to convert Markdown content into HTML. The following example demonstrates how to enable Markdown-to-HTML preview in the Syncfusion® Blazor Markdown Editor. @@ -23,7 +26,7 @@ To enable the Markdown preview feature, the `Markdig` package is used to convert {% endhighlight %} {% endtabs %} -![Blazor Markdown Preview](./images/blazor-markdowneditor-markdown-preview.gif) +![Live Markdown Preview in Blazor Editor](./images/blazor-markdowneditor-markdown-preview.gif) ## See also diff --git a/blazor/markdown-editor/mention-support.md b/blazor/markdown-editor/mention-support.md index 66709955a6..161d538f57 100644 --- a/blazor/markdown-editor/mention-support.md +++ b/blazor/markdown-editor/mention-support.md @@ -11,7 +11,7 @@ documentation: ug By integrating the [Mention](https://blazor.syncfusion.com/documentation/mention/getting-started) component with the Markdown Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving both efficiency and accuracy. -## Enabling Mention in Blazor Markdown Editor +## How to Enable Mention in Blazor Markdown Editor To enable the Mention functionality within the Markdown Editor, set the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target) property of the Mention component to the ID of the textarea element inside the editor. When specifying the target, ensure that you append the suffix `_editable-content` to the ID. This configuration allows users to mention or tag others from the suggested list while editing text. @@ -25,7 +25,7 @@ The Syncfusion® Mention component provides * [SuggestionCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_SuggestionCount) - The maximum number of items that will be displayed in the suggestion list. * [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) - Used to display the customized appearance in suggestion list. -## Example: Implementing Mention in Markdown Editor +## Example: How to Implement Mention Support in Markdown Editor The following example demonstrates how to enable Mention support in the Blazor Markdown Editor. @@ -37,4 +37,4 @@ The following example demonstrates how to enable Mention support in the Blazor M {% endhighlight %} {% endtabs %} -![Blazor Markdown Mention support](./images/blazor-markdowneditor-markdown-mention.png) \ No newline at end of file +![Blazor Markdown Editor with Mention Support](./images/blazor-markdowneditor-markdown-mention.png) \ No newline at end of file diff --git a/blazor/markdown-editor/supported-markdown.md b/blazor/markdown-editor/supported-markdown.md index efd0f5a6e6..19decabfc5 100644 --- a/blazor/markdown-editor/supported-markdown.md +++ b/blazor/markdown-editor/supported-markdown.md @@ -9,7 +9,7 @@ documentation: ug # Supported Markdown Syntax in Blazor Markdown Editor Component -The Syncfusion® [Blazor Markdown editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor/wysiwyg-markdown-editor) supports various Markdown syntax commands for text formatting, lists, links, tables, and more. This guide provides an overview of all supported commands along with their syntax and usage. +The Syncfusion® [Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor/wysiwyg-markdown-editor) supports a wide range of Markdown syntax for formatting text, creating lists, inserting links and images, and more. This guide provides a comprehensive reference to all supported Markdown commands, their syntax, and usage. ## Markdown Syntax Guide for Blazor Markdown Editor @@ -44,4 +44,4 @@ The following table lists the Markdown commands supported by the SyncfusionExample:
`\**`Bold text`**`| | HTML Entities | Copyright: © - `©`
Trade mark: ™ - `™`
Registered: ® - `®`
Ampersand: & - `&`
Less than: < - `<`
Greater than: > - `>` | For HTML entities, add & and ; to the front and back of the respective entities. | -N> The above listed commands alone are supported in Syncfusion® markdown editor. For other unsupported commands, you can achieve using the HTML tags in markdown editor. The foot notes, definitions, math, and check list markdown syntax are also not supported. \ No newline at end of file +N> Only the listed commands are supported in the Syncfusion® Markdown Editor. For unsupported features such as footnotes, definitions, math, and checklists, consider using HTML tags directly within the editor. \ No newline at end of file diff --git a/blazor/markdown-editor/toolbar.md b/blazor/markdown-editor/toolbar.md index 3d82f35b5f..5a4642f9ee 100644 --- a/blazor/markdown-editor/toolbar.md +++ b/blazor/markdown-editor/toolbar.md @@ -9,6 +9,8 @@ documentation: ug # Toolbar configuration in Markdown Editor Component +The Syncfusion® Blazor Markdown Editor provides a flexible toolbar that enhances the editing experience. Users can choose from multiple toolbar layouts, enable sticky behavior, and add custom tools to suit their application needs. This guide explains the available toolbar types, configuration options, and customization techniques. + ## Default toolbar items By default, the Markdown Editor displays the following toolbar items: @@ -27,7 +29,7 @@ The available toolbar types are: 2. MultiRow 3. Scrollable -### Expanding the Toolbar +### Expand Toolbar Configuration The expand toolbar allows to hide the overflowing items in the next line by using the [ToolbarType.Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Expand) property. By clicking the expand arrow, you can view the overflowing toolbar items. The default mode of toolbar is `Expand`. @@ -41,7 +43,7 @@ The expand toolbar allows to hide the overflowing items in the next line by usin ![Blazor Markdown Editor expand toolbar](./images/blazor-markdowneditor-expand-toolbar.png) -### Configuring a Multi-row Toolbar +### Multi-row Toolbar Setup You can display the toolbar items in a row-wise format by using the [ToolbarType.MultiRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_MultiRow) property. All toolbar items are visible always. @@ -55,7 +57,7 @@ You can display the toolbar items in a row-wise format by using the [ToolbarType ![Blazor Markdown Editor multirow toolbar](./images/blazor-markdowneditor-multirow-toolbar.png) -### Implementing a Scrollable Toolbar +### Scrollable Toolbar Implementation You can display the toolbar items in a single line with horizontal scrolling by using the [ToolbarType.Scrollable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Scrollable) property. @@ -69,7 +71,7 @@ You can display the toolbar items in a single line with horizontal scrolling by ![Blazor Markdown Editor multirow toolbar](./images/blazor-markdowneditor-scrollable-toolbar.png) -### Creating a Sticky Toolbar +### Sticky Toolbar Behavior By default, toolbar is float at the top of the Rich Text Editor on scrolling. It can be customized by specifying the offset of the floating toolbar from documents top position using [FloatingToolbarOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_FloatingToolbarOffset). @@ -85,7 +87,7 @@ You can enable or disable the floating toolbar using [RichTextEditorToolbarSetti ![Blazor Markdown Editor Sticky toolbar](./images/blazor-markdowneditor-sticky-toolbar.png) -## Custom Toolbar Items +## Adding Custom Toolbar Items The Rich Text Editor allows you to configure your own tools to its toolbar using the [RichTextEditorCustomToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorCustomToolbarItems.html) tag directive within a [RichTextEditorToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html). The tools can be plain text, icon, or HTML template. Also, define the order and group where the tool should be included. From d4b737bf6bef9dca102640140a680c3aad8ac797 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Mon, 6 Oct 2025 17:34:19 +0530 Subject: [PATCH 2/6] Update accessibility.md --- blazor/markdown-editor/accessibility.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/markdown-editor/accessibility.md b/blazor/markdown-editor/accessibility.md index 4cfd34e695..4965b23ad9 100644 --- a/blazor/markdown-editor/accessibility.md +++ b/blazor/markdown-editor/accessibility.md @@ -78,7 +78,7 @@ For more details on keyboard navigation, refer to the [Keyboard support](https:/ ## Ensuring accessibility -ccessibility levels are validated using the[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® Blazor components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® Blazor components](../common/accessibility) From 30d2acbffb4390ca9de66b571bc705d98862619e Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Tue, 7 Oct 2025 12:22:55 +0530 Subject: [PATCH 3/6] Update custom-format.md --- blazor/markdown-editor/custom-format.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/markdown-editor/custom-format.md b/blazor/markdown-editor/custom-format.md index 67b07a29a4..241c84a67f 100644 --- a/blazor/markdown-editor/custom-format.md +++ b/blazor/markdown-editor/custom-format.md @@ -1,7 +1,7 @@ --- layout: post title: Customize Markdown Syntax in Blazor Markdown Editor | Syncfusion -description: Learn how to customize Markdown syntax in the 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 @@ -36,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) \ No newline at end of file +![Blazor RichTextEditor markdown custom selection](./images/blazor-richtexteditor-markdown-custom-bold.png) From 17cd084399ca877575245b425ff3e85dc9ca4e92 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Tue, 7 Oct 2025 12:23:40 +0530 Subject: [PATCH 4/6] Update supported-markdown.md --- blazor/markdown-editor/supported-markdown.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/markdown-editor/supported-markdown.md b/blazor/markdown-editor/supported-markdown.md index 19decabfc5..40fce1bbdc 100644 --- a/blazor/markdown-editor/supported-markdown.md +++ b/blazor/markdown-editor/supported-markdown.md @@ -1,6 +1,6 @@ --- layout: post -title: Supported Markdown Syntax in Blazor Markdown Editor Component | Syncfusion +title: Markdown Syntax Supported in Blazor Editor description: Checkout and learn here all about Supported Markdown Syntax in Syncfusion Blazor Markdown Editor component and more. platform: Blazor control: MarkdownEditor @@ -44,4 +44,4 @@ The following table lists the Markdown commands supported by the SyncfusionExample:
`\**`Bold text`**`| | HTML Entities | Copyright: © - `©`
Trade mark: ™ - `™`
Registered: ® - `®`
Ampersand: & - `&`
Less than: < - `<`
Greater than: > - `>` | For HTML entities, add & and ; to the front and back of the respective entities. | -N> Only the listed commands are supported in the Syncfusion® Markdown Editor. For unsupported features such as footnotes, definitions, math, and checklists, consider using HTML tags directly within the editor. \ No newline at end of file +N> Only the listed commands are supported in the Syncfusion® Markdown Editor. For unsupported features such as footnotes, definitions, math, and checklists, consider using HTML tags directly within the editor. From 5d235783f20b29d95862a19521ccc7586bc6bdf1 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Tue, 7 Oct 2025 12:26:19 +0530 Subject: [PATCH 5/6] Update keyboard-support.md --- blazor/markdown-editor/keyboard-support.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/markdown-editor/keyboard-support.md b/blazor/markdown-editor/keyboard-support.md index cbf07b360b..28248eb1b4 100644 --- a/blazor/markdown-editor/keyboard-support.md +++ b/blazor/markdown-editor/keyboard-support.md @@ -102,9 +102,9 @@ These shortcuts provide additional functionalities like fullscreen mode. @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 Marked is used in this sample to convert markdown into HTML content."; + 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](https://blazor.syncfusion.com/demos/markdown-editor/overview?theme=fluent)). The third-party library Marked is used in this sample to convert markdown into HTML content."; } ``` -![Blazor RichTextEditor with Key Configuration](./images/blazor-richtexteditor-key-configuration.png) \ No newline at end of file +![Blazor RichTextEditor with Key Configuration](./images/blazor-richtexteditor-key-configuration.png) From 23260cb0041b5acf1399270302498eba9ad7e06a Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Tue, 7 Oct 2025 12:55:03 +0530 Subject: [PATCH 6/6] Update supported-markdown.md --- blazor/markdown-editor/supported-markdown.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/markdown-editor/supported-markdown.md b/blazor/markdown-editor/supported-markdown.md index 40fce1bbdc..43705d7b2b 100644 --- a/blazor/markdown-editor/supported-markdown.md +++ b/blazor/markdown-editor/supported-markdown.md @@ -1,6 +1,6 @@ --- layout: post -title: Markdown Syntax Supported in Blazor Editor +title: Markdown Syntax Supported in Blazor Editor Component | Syncfusion description: Checkout and learn here all about Supported Markdown Syntax in Syncfusion Blazor Markdown Editor component and more. platform: Blazor control: MarkdownEditor