990376: Added UG Documentation for LineHeight and Clipboard cleanup feature.

blazor-toc.html

@@ -4157,6 +4157,7 @@
 			<li><a href="/blazor/rich-text-editor/tools/table-manipulation">Table manipulation</a></li>
 			<li><a href="/blazor/rich-text-editor/tools/code-block">Code Block</a></li>
 			<li> <a href="/blazor/rich-text-editor/paste-cleanup">Paste Clean-up</a></li>
+			<li> <a href="/blazor/rich-text-editor/clipboard-cleanup">Clipboard Clean-up</a></li>
 			<li> <a href="/blazor/rich-text-editor/enter-key">Enter Key Configuration</a></li>
 			<li> <a href="/blazor/rich-text-editor/undo-redo-manager">Undo Redo Manager</a></li>
 			<li> <a href="/blazor/rich-text-editor/import-and-export">Import/Export</a></li>

blazor/rich-text-editor/clipboard-cleanup.md

@@ -0,0 +1,42 @@
+---
+layout: post
+title: Clipboard Clean-up in Blazor Rich Text Editor | Syncfusion
+description: Checkout and learn here all about Clipboard Clean-up in Syncfusion Blazor Rich Text Editor component and more.
+platform: Blazor
+control: RichTextEditor
+documentation: ug
+---
+
+# Clipboard Clean-up in Blazor Rich Text Editor
+
+The Rich Text Editor now provides automatic cleanup of clipboard content during copy (`Ctrl + C`) and cut (`Ctrl + X`) operations. When this feature is enabled, unwanted inline styles are removed while preserving important structural elements such as tables, lists, and images. This feature is enabled by default through [EnableClipboardCleanup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableClipboardCleanup) property.
+
+It can be verified by following the below steps:
+
+- Copy or cut content within the Rich Text Editor.
+- Paste the content back into the editor.
+- Observe that unnecessary inline styles are removed while essential elements such as tables, lists, and images remain intact.
+
+By default, `EnableClipboardCleanup` is set to `true`. Check with the below demonstration:
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/clipboard-cleanup-default.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor RichTextEditor with default clipboard cleanup](./images/blazor-richtexteditor-clipboard-cleanup-default.png)
+
+When set to `false`, the browser’s default copy and cut behavior applies. Check with the below demonstration:
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/clipboard-cleanup-custom.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor RichTextEditor with clipboard cleanup disabled](./images/blazor-richtexteditor-clipboard-cleanup-custom.png)

blazor/rich-text-editor/code-snippet/clipboard-cleanup-custom.razor

@@ -0,0 +1,11 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor EnableClipboardCleanup="false">
+    <h3>Clipboard Cleanup Disabled</h3>
+    <p>The Rich Text Editor uses the browser’s default copy and cut behavior when clipboard cleanup is disabled.</p>
+    <p><b>Key Points:</b></p>
+    <ul>
+        <li>No cleanup is applied; original styles remain intact.</li>
+        <li>Content is copied exactly as it appears in the editor.</li>
+    </ul>
+</SfRichTextEditor>

blazor/rich-text-editor/code-snippet/clipboard-cleanup-default.razor

@@ -0,0 +1,11 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor>
+    <h3>Clipboard Cleanup – Default Behavior</h3>
+    <p>The Rich Text Editor automatically cleans up clipboard content during copy and cut operations to ensure clean formatting.</p>
+    <p><b>Key Features:</b></p>
+    <ul>
+        <li>Removes unwanted inline styles from copied or cut content.</li>
+        <li>Preserves essential elements like tables, lists, and images.</li>
+    </ul>
+</SfRichTextEditor>

blazor/rich-text-editor/tools/code-snippet/line-height.razor

@@ -0,0 +1,30 @@
+@using Syncfusion.Blazor.RichTextEditor;
+<SfRichTextEditor>
+    <RichTextEditorToolbarSettings Items="@Items" />
+    <RichTextEditorLineHeight Items="@LineHeightItems" Default="Default"></RichTextEditorLineHeight>
+    <p>The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.</p>
+    <p><b> Key features:</b></p>   
+    <ul>
+        <li><p>Provides a <b>Line Height</b> dropdown in the toolbar for easy access.</p></li>
+        <li><p>Supports applying line-height to paragraphs, headings, lists, and table cells.</p></li>
+        <li><p>Applies line-height as inline styles for consistent and precise text rendering.</p></li>
+        <li><p>Ensures consistent appearance across devices and print layouts.</p></li>
+        <li><p>Improves text readability and overall document aesthetics.</p></li>
+    </ul>
+</SfRichTextEditor>
+@code {
+    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.LineHeight }, 
+    };
+    private List<DropDownItemModel> LineHeightItems = new()
+    {
+        new DropDownItemModel { Text = "Default", Value = "" },
+        new DropDownItemModel { Text = "1", Value = "1" },
+        new DropDownItemModel { Text = "1.15", Value = "1.15" },
+        new DropDownItemModel { Text = "1.5", Value = "1.5" },
+        new DropDownItemModel { Text = "2", Value = "2" },
+        new DropDownItemModel { Text = "2.5", Value = "2.5" },
+        new DropDownItemModel { Text = "3", Value = "3" }
+    };
+}

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

@@ -280,6 +280,40 @@ While the toolbar does not provide a direct method to apply blockquote formattin
 
 ![Blazor RichTextEditor with Custom Format](../images/blazor-richtexteditor-nested-quotation-formatting.png)
 
+## LineHeight
+
+The Rich Text Editor supports applying line-height to block elements such as paragraphs, list items, headings, and table cells. It can be configured through a dedicated `LineHeight` dropdown in the toolbar and is saved as inline style on the affected blocks.
+
+### Key behaviors:
+- Applies to full blocks. If a partial inline selection is made, the line height is applied to the parent block element.
+- Works with undo/redo. Each change is tracked as a single history step.
+- Saved HTML persists line-height via inline styles (for example, style="line-height: 1.5").
+- Mixed selection shows the first block’s value in the dropdown.
+
+### Configure LineHeight in the toolbar
+
+The `LineHeight` tool can be configured in the Rich Text Editor using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
+
+### Built-in LineHeight items
+
+The following table lists the default LineHeight items.
+
+| Default Key | Default Value |
+|-----|--------------------------------------|
+| [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorLineHeight.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorLineHeight_Items) | new List&lt;DropDownItemModel&gt;()<br>{<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Default", Value = "" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "1", Value = "1" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "1.15", Value = "1.15" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "1.5", Value = "1.5" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "2", Value = "2" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "2.5", Value = "2.5" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "3", Value = "3"}<br>}; |
+
+Example: Add the LineHeight tool and configure items
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/line-height.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor RichTextEditor with LineHeight](../images/blazor-richtexteditor-line-height.png)
+
 ## Horizontal line
 
 The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (<hr>) help visually separate sections of content, enhancing readability and structural clarity.