Merge branch '979389-block-editor' of https://github.com/syncfusion-content/blazor-docs into development

Author: premanandh2205

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/images/blazor-richtexteditor-clipboard-cleanup-custom.png

@@ -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" }
+    };
+}