Breadcrumb
diff --git a/blazor/blockeditor/appearance.md b/blazor/blockeditor/appearance.md
new file mode 100644
index 0000000000..4ec4dee8f6
--- /dev/null
+++ b/blazor/blockeditor/appearance.md
@@ -0,0 +1,284 @@
+---
+layout: post
+title: Appearance in Blazor Block Editor Component | Syncfusion
+description: Checkout and learn here all about Appearance with Syncfusion Blazor Block Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: BlockEditor
+documentation: ug
+---
+
+# Appearance in Blazor Block Editor component
+
+The Block Editor component provides several properties to customize its visual appearance, allowing you to control its dimensions, styling, and behavior.
+
+## Setting width and height
+
+You can specify the width and height for the Block Editor component using the `Width` and `Height` properties.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+// Or with specific pixel values
+
+
+```
+
+## Setting readonly mode
+
+You can utilize the `ReadOnly` property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+```
+
+## Customization using CSS Class
+
+You can use the `CssClass` property to customize the appearance of the Block Editor component.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+```
+
+The following example demonstrates the usage of `Readonly` and `CssClass` properties of the Block Editor.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
Appearance Configuration Demo
+
+ Toggle Readonly Mode
+ Apply Custom Theme
+
+
+
+ Current Status: @StatusMessage
+
+
+
+
@OutputMessage
+
+
+@code {
+ private SfBlockEditor? BlockEditorRef;
+
+ private bool IsReadonly { get; set; } = false;
+ private string CurrentTheme { get; set; } = "default";
+ private string StatusMessage { get; set; } = "Editable, Default Theme";
+ private string OutputMessage { get; set; } = "";
+ private string CssClasses => $"{CurrentTheme} {(IsReadonly ? "readonly-mode" : "")}".Trim();
+ private List Blocks => new List
+ {
+ new BlockModel
+ {
+ BlockType = BlockType.Heading,
+ Properties = new HeadingBlockSettings { Level = 1 },
+ Content = new List
+ {
+ new ContentModel { ContentType = ContentType.Text, Content = "Appearance Configuration Demo" }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = new List
+ {
+ new ContentModel { ContentType = ContentType.Text, Content = "This demo showcases different appearance configurations including readonly mode and a custom CSS theme." }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Heading,
+ Properties = new HeadingBlockSettings { Level = 2 },
+ Content = new List
+ {
+ new ContentModel { ContentType = ContentType.Text, Content = "Configured Custom Theme" }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.BulletList,
+ Content = new List
+ {
+ new ContentModel { ContentType = ContentType.Text, Content = "Gradient background with modern styling" }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = new List
+ {
+ new ContentModel
+ {
+ ContentType = ContentType.Text,
+ Content = "Use the readonly toggle to switch between editable and read-only modes. In readonly mode, you can view content but cannot make changes."
+ }
+ }
+ }
+ };
+
+ private void ToggleReadonly()
+ {
+ IsReadonly = !IsReadonly;
+
+ UpdateStatus();
+ DisplayOutput($"Readonly mode {(IsReadonly ? "enabled" : "disabled")}. {(IsReadonly ? "Content is now view-only." : "Content is now editable.")}");
+ }
+
+ private void ApplyCustomTheme()
+ {
+ CurrentTheme = "custom-theme";
+ UpdateStatus();
+ DisplayOutput("Custom theme applied. The editor now features a gradient background with modern styling and hover effects.");
+ }
+
+ private void OnEditorFocus()
+ {
+ DisplayOutput("Editor focused. You can now type or edit content.");
+ }
+
+ private void OnEditorBlur()
+ {
+ DisplayOutput("Editor lost focus.");
+ }
+
+ protected override void OnInitialized()
+ {
+ UpdateStatus();
+ }
+
+ private void UpdateStatus()
+ {
+ string mode = IsReadonly ? "Readonly" : "Editable";
+ string theme = CurrentTheme == "default" ? "Default" : "Custom";
+ StatusMessage = $"{mode}, {theme} Theme";
+ }
+
+ private void DisplayOutput(string msg)
+ {
+ OutputMessage = msg;
+ StateHasChanged();
+ }
+}
+
+
+
+```
+
+
+
diff --git a/blazor/blockeditor/built-in-blocks/built-in-blocks.md b/blazor/blockeditor/built-in-blocks/built-in-blocks.md
new file mode 100644
index 0000000000..b90612d3a1
--- /dev/null
+++ b/blazor/blockeditor/built-in-blocks/built-in-blocks.md
@@ -0,0 +1,192 @@
+---
+layout: post
+title: Blocks in Blazor Block Editor Component | Syncfusion
+description: Checkout and learn about Blocks with Syncfusion Blazor Block Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: BlockEditor
+documentation: ug
+---
+
+# Blocks in Blazor Block Editor component
+
+The Syncfusion Block Editor uses **Blocks** as the fundamental units for creating and managing content. The entire editor content is structured as a collection of these blocks, which are configured and managed through the `Blocks` property.
+
+## Blocks
+
+Blocks are the core building elements of the editor, where each block represents a distinct content unit, such as a `Paragraph`, `Heading`, `List`, or specialized content like a `Callout` or `Image`. This block-based architecture makes it easy for users to rearrange, format, and manage discrete pieces of content independently.
+
+You can configure blocks with various properties such as `ID`, `BlockType`, `Content` to create a rich, structured editor.
+
+## Block types
+
+The Block Editor supports multiple block types, each offering different formatting options and functionality:
+
+| Built-in Block Types | Description |
+|-----------------------------------------|-----------------------------------------------------------------------------|
+| Paragraph | Default block type for regular text content. |
+| Heading1 to Heading4 | Different levels of headings for document structure. |
+| Table | Block for displaying data in a tabular format with rows and columns. |
+| Checklist | Interactive to-do lists with checkable items. |
+| BulletList | Unordered lists with bullet points. |
+| NumberedList | Ordered lists with sequential numbering. |
+| Quote | Styled block for quotations. |
+| Callout | Highlighted block for important information. |
+| Divider | Horizontal separator line. |
+| CollapsibleParagraph and CollapsibleHeading1-4 | Content blocks that can be expanded or collapsed to show or hide their children. |
+| Image | Block for displaying images. |
+
+## Configure indent
+
+You can specify the indentation level of a block using the `Indent` property. This property accepts a numeric value that determines how deeply a block is nested from the left margin.
+
+By default, the `Indent` property is set to `0`.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor
+
+
+
+
+@code {
+ private List BlockData = new List
+ {
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a paragraph with no indentation (indent: 0)"}},
+ Indent = 0
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This paragraph has one level of indentation (indent: 1)"}},
+ Indent = 1
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This paragraph has two levels of indentation (indent: 2)"}},
+ Indent = 2
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "Back to no indentation"}},
+ Indent = 0
+ }
+ };
+}
+
+```
+
+
+
+## Configure CSS Class
+
+You can apply custom styling to individual blocks using the `CssClass` property. This property accepts a string containing one or more CSS class names.
+
+Custom CSS classes allow you to define specialized styling for specific blocks in your editor.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor
+
+
+
+
+
+@code {
+ private List BlockData = new List
+ {
+ new BlockModel
+ {
+ BlockType = BlockType.Heading,
+ Properties = new HeadingBlockSettings { Level = 1 },
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "Custom CSS Classes in Block Editor"}}
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "Default paragraph block"}}
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is an info block"}},
+ CssClass = "info-block"
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a warning block"}},
+ CssClass = "warning-block"
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a success block"}},
+ CssClass = "success-block"
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a error block"}},
+ CssClass = "error-block"
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a custom font block"}},
+ CssClass = "custom-font"
+ }
+ };
+}
+
+
+
+```
+
+## Disable Keep format
+
+By default, the editor retains the formatting of pasted content (e.g., bold, italics, links). You can disable this by setting the `KeepFormat` property to `false`. When disabled, the editor primarily pastes content as plain text, regardless of the `AllowedStyles` configuration.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+
+
+
+
+```
+
+## Allowing plain text
+
+To paste content as plain text, stripping all HTML tags and inline styles, set the `PlainText` property to `true` in `BlockEditorPasteCleanup` tag directive. This ensures that only raw text is inserted, which is ideal for maintaining strict content consistency. By default, this property is `false`.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+
+
+
+
+```
+
+Below example demonstrates the usage of paste settings that disables the keep format and allows plain text.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor
+
+
+
+
+
+
+
+
Test Content to Copy and Paste:
+
+
+
Formatted Heading
+
+ This is a bold paragraph with
+ italic text and
+ underlined content.
+
+
+ Heavy text and
+ colored text
+
+
+
+
@output
+
+
+
+@code {
+ private SfBlockEditor blockEditor;
+ private string output = "";
+
+ private List blockData = new List()
+ {
+ new BlockModel { BlockType = BlockType.Paragraph }
+ };
+
+ private void HandleAfterPaste(PasteCleanupCompletedEventArgs args)
+ {
+ output = $"After Paste Event: Processed content length: {args.Content.Length} characters";
+ }
+
+ protected override void OnInitialized()
+ {
+ output = @"Paste Cleanup Settings Active:
+ - Keep Format: false
+ - Plain Text: true
+
+ Copy content from the test area above and paste it into the editor to see the cleanup in action.";
+ }
+}
+
+
+
+```
+
+### Events
+
+The Block Editor provides events to monitor and interact with the paste action.
+
+|Name|Args|Description|
+|---|---|---|
+|`PasteCleanupStarting`|PasteCleanupStartingEventArgs|Triggers before the content is pasted into the editor.|
+|`PasteCleanupCompleted`|PasteCleanupCompletedEventArgs|Triggers after the content is pasted into the editor.|
+
+Below example demonstrates how to configure above events in the editor.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+
+
+
+@code {
+ private void HandleAfterPaste(PasteCleanupCompletedEventArgs args)
+ {
+ // Your actions here
+ }
+
+ private void HandleBeforePaste(PasteCleanupStartingEventArgs args)
+ {
+ // Your actions here
+ }
+}
+
+```
\ No newline at end of file
diff --git a/blazor/blockeditor/undo-redo.md b/blazor/blockeditor/undo-redo.md
new file mode 100644
index 0000000000..1f485936b4
--- /dev/null
+++ b/blazor/blockeditor/undo-redo.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: Undo redo in Blazor Block Editor Component | Syncfusion
+description: Checkout and learn about Undo redo with Syncfusion Blazor Block Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: BlockEditor
+documentation: ug
+---
+
+# Undo redo in Blazor Block Editor component
+
+The undo/redo feature in Block Editor enables users to revert or reapply changes made to the content, offering a safety net for edits and enhancing the overall editing experience.
+
+## Keyboard shortcuts
+
+| Action | Windows | Mac | Description |
+|------------|--------------|---------|-----------------|
+| Undo | Ctrl + Z | ⌘ + Z | Reverts the last action. |
+| Redo | Ctrl + Y | ⌘ + Y | Reapplies the last undone action. |
+
+## Configuring Undo/Redo stack
+
+The Block Editor stores a history of actions, allowing users to perform undo and redo operations. By default, it saves up to `30` actions. You can customize this limit using the `UndoRedoStack` property to control the maximum number of steps that can be undone or redone.
+
+The example below sets the undo/redo history limit to `20` actions.
+
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+
+@code {
+ private List BlocksData = new List
+ {
+ new BlockModel
+ {
+ BlockType = BlockType.Heading,
+ Properties = new HeadingBlockSettings { Level = 1 },
+ Content = new List
+ {
+ new ContentModel
+ {
+ ContentType = ContentType.Text,
+ Content = "Undo/Redo Demo"
+ }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = new List
+ {
+ new ContentModel
+ {
+ ContentType = ContentType.Text,
+ Content = "Try adding new blocks or modifying content below:"
+ }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = new List
+ {
+ new ContentModel
+ {
+ ContentType = ContentType.Text,
+ Content = "1. Undo stack set to maximum 40 actions\n2. Press Ctrl+Z to undo\n3. Press Ctrl+Y to redo\n4. Actions include text edits, block moves, additions, deletions"
+ }
+ }
+ }
+ };
+}
+
+
+```
+
+
diff --git a/blazor/blockeditor/validation-security/cross-site-script.md b/blazor/blockeditor/validation-security/cross-site-script.md
new file mode 100644
index 0000000000..6c525b1638
--- /dev/null
+++ b/blazor/blockeditor/validation-security/cross-site-script.md
@@ -0,0 +1,44 @@
+---
+layout: post
+title: Cross-Site scripting in Blazor Block Editor Component | Syncfusion
+description: Checkout and learn here all about Cross-Site scripting with Syncfusion Blazor Block Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: BlockEditor
+documentation: ug
+---
+
+# Cross-Site scripting (XSS) prevention in Blazor Block Editor component
+
+The Block Editor allows users to edit the content with security by preventing cross-site scripting (XSS). By default, it provides built-in support to remove elements from editor content that cause XSS attacks. The editor removes the elements based on the attributes if it is possible to execute a script.
+
+## Enabling XSS prevention
+
+The `EnableHtmlSanitizer`, enabled by default, activates XSS prevention. When active, the editor automatically removes elements like `"
+ }
+ }
+ }
+ };
+}
+
+```
diff --git a/blazor/blockeditor/validation-security/read-only-mode.md b/blazor/blockeditor/validation-security/read-only-mode.md
new file mode 100644
index 0000000000..ddc6fc558f
--- /dev/null
+++ b/blazor/blockeditor/validation-security/read-only-mode.md
@@ -0,0 +1,47 @@
+---
+layout: post
+title: Controlling Editor Access | Blazor Block Editor Component | Syncfusion
+description: Checkout and learn here all about Controlling Editor Access with Syncfusion Blazor Block Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: BlockEditor
+documentation: ug
+---
+
+# Controlling Editor Access in Blazor Block Editor component
+
+The Syncfusion Blazor Block Editor provides read-only modes to control user interaction with the editor. This allows users to view formatted content without editing. This features are useful for displaying content without modifications or temporarily restricting input.
+
+## Read-only mode
+
+Read-only mode prevents users from editing the content in the Block Editor while preserving the ability to view formatted text. This feature is particularly useful when you want to display formatted content without permitting modifications.
+
+To enable the read-only mode, set the `ReadOnly` property to `true`. The content remains viewable with its formatting intact, but editing is restricted.
+
+The following example demonstrates how to enable read-only mode in the Block Editor:
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+
+@code {
+ private List BlocksData = new List
+ {
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = new List
+ {
+ new ContentModel
+ {
+ ContentType = ContentType.Text,
+ Content = "The Block Editor supports various content types. When the readOnly property is set to true, it prevents users from editing the content, making the editor display-only."
+ }
+ }
+ }
+ };
+}
+
+```