Merge branch 'development' into BLAZ-983104-Rangeslider

Author: Ashwini-SF5049

blazor/rich-text-editor/images/checklist.png

@@ -459,6 +459,43 @@ This feature allows users to change the appearance of the numbered and bulleted
 
 <!-- {% previewsample "https://blazorplayground.syncfusion.com/embed/hZrgDQihUWLCLrIB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -->
 
+### Checklist
+
+The `Checklist` feature lets you create interactive task lists with clickable checkboxes. You can configure checkbox behavior, customize the visual appearance, manage item states, and enable keyboard interactions. This makes it perfect for project management, note-taking, and task tracking within your content. You can easily toggle between checked and unchecked states, giving you an intuitive way to manage the completion status of your list items—making it a simple and effective to-do list solution.
+
+#### Inserting a checklist
+You can embed interactive task lists directly within the Rich Text Editor. Here’s how you can insert a checklist:
+- **Using the toolbar**: Click the checklist button in the editor toolbar, usually represented by a checkbox icon.
+- **Using the shortcut**: Press `Ctrl+Shift+9` (or `Cmd+Shift+9` on macOS) to insert a checklist at your cursor’s position.
+- **Converting existing lists**: Select an existing bullet or numbered list and click the checklist button to convert it into an interactive checklist.
+- **Toggling checklist items**: You can toggle the state of checklist items between checked and unchecked by clicking the checkbox. If you prefer using the keyboard, press `Ctrl+Enter` (or `Cmd+Enter` on macOS) to toggle the check marks based on your selection or cursor position in the editor.
+
+#### Configuring checklist
+To enable the checklist feature in your editor, add the `Checklist` toolbar item to the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.Items) property. This feature supports customizable behavior and can be easily integrated into your Rich Text Editor toolbar for quick access.
+
+Here’s an example of how you can configure the checklist in your Rich Text Editor:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor>
+  <RichTextEditorToolbarSettings Items="@Items" />
+  <p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>
+</SfRichTextEditor>
+@code {
+    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.Checklist }
+    };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor RichTextEditor Checklist](../images/checklist.png)
+
 ## Formatting code blocks
 
 Configure code block formatting as a separate toolbar button by adding the `InsertCode` Command within the  [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. The `InsertCode` button has a toggle state to apply code block formatting to the editor and remove code block formatting from the editor.

blazor/rich-text-editor/tools/styling-tools.md

@@ -9,15 +9,15 @@ documentation: ug
 
 # Scheduler Dimensions in Blazor Scheduler Component
 
-The Scheduler dimensions refers to both height and width of the entire layout and it accepts 3 types of values.
+The dimensions of the Syncfusion Blazor Scheduler component, encompassing both height and width of its entire layout, can be defined using three types of values:
 
 * auto
 * pixel
 * percentage
 
 ## Auto Height and Width
 
-When height and width of the Scheduler are set to `auto`, it will try hard to keep an element the same width as its parent container. In other words, for the parent container that holds Scheduler, it's width or height will be the sum of its children. By default, Scheduler is assigned with `auto` values for both height and width properties.
+When the height and width of the Scheduler are set to `auto`, the component attempts to match the width of its parent container. In this configuration, the parent container's width or height will be the cumulative size of its children. By default, the Scheduler component is assigned `auto` values for both its `Height` and `Width` properties.
 
 ```cshtml
 @using Syncfusion.Blazor.Schedule
@@ -47,10 +47,11 @@ When height and width of the Scheduler are set to `auto`, it will try hard to ke
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBesjtcsURMTcIB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Height and Width in pixel
+## Height and Width in Pixel
 
-The Scheduler height and width will be rendered exactly as per the given pixel values. It accepts both string and number values.
+The Scheduler's height and width render precisely according to the specified pixel values. Both string and number values are accepted for these properties.
 
 ```cshtml
 @using Syncfusion.Blazor.Schedule
@@ -80,10 +81,13 @@ The Scheduler height and width will be rendered exactly as per the given pixel v
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZByiNjQWKmhecik?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Height and Width in percentage
+![Height and width in pixel in Blazor Scheduler](images/height-width-inpixel.png)
 
-When height and width of the Scheduler are given as percentage, it will make the Scheduler as wide as the parent container.
+## Height and Width in Percentage
+
+When the height and width of the Scheduler are provided as percentage values, the component will expand to occupy the specified percentage of its parent container's dimensions.
 
 ```cshtml
 @using Syncfusion.Blazor.Schedule
@@ -113,10 +117,11 @@ When height and width of the Scheduler are given as percentage, it will make the
     }
 }
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLSstjwCqYbFnCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## How to set the full height of the view port
+## How to set the full height of the viewport
 
-When the height of the Scheduler is set in the CSS unit of Viewport Height(vh), it will make the Scheduler to occupy the full height within the viewport.
+Setting the Scheduler's height using the CSS unit of Viewport Height (vh) allows the component to occupy the full height within the viewport.
 
 In the following example, the application header height (4.6rem) is reduced from the total viewport.
 
@@ -148,5 +153,4 @@ In the following example, the application header height (4.6rem) is reduced from
     }
 }
 ```
-
 ![Blazor Scheduler with View Port Height](images/blazor-scheduler-view-port-height.png)