Class SfBlockEditor

Inheritance

SfBlockEditor

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.BlockEditor

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfBlockEditor : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

SfBlockEditor()

Declaration

public SfBlockEditor()

Properties

BlockChanged

Raised when the blocks collection in the SfBlockEditor has been modified.

Declaration

[Parameter]
public EventCallback<BlockChangedEventArgs> BlockChanged { get; set; }

Property Value

Type	Description
EventCallback<BlockChangedEventArgs>	An EventCallback<TValue> with BlockChangedEventArgs providing details about the operations performed.

Remarks

This event is triggered after insertions, deletions, moves, or updates of blocks. Use the Changes collection to inspect what has been changed and update your application state accordingly.

The event can batch multiple operations; iterate through all items in Changes to process each change.

Examples

Subscribes to the event and processes each change.

@page "/editor"
@using Syncfusion.Blazor.BlockEditor

<SfBlockEditor BlockChanged="OnBlockChanged" />

@code {
    private Task BlockChanged(BlockChangedEventArgs args)
    {
        foreach (var change in args.Changes)
        {
            switch (change.Action)
            {
                case BlockAction.Insertion:
                    Console.WriteLine($"Inserted: {change.Data?.Block?.ID}");
                    break;
                case BlockAction.Deletion:
                    Console.WriteLine($"Deleted: {change.Data?.Block?.ID}");
                    break;
                case BlockAction.Moved:
                    Console.WriteLine($"Moved: {change.Data?.Block?.ID} to new parent: {change.Data?.CurrentParent?.ID}");
                    break;
                case BlockAction.Update:
                    Console.WriteLine($"Updated: {change.Data?.Block?.ID}");
                    break;
            }
        }
        return Task.CompletedTask;
    }
}

Blocks

Gets or sets the collection of blocks rendered by the editor with two-way binding support.

Declaration

[Parameter]
public List<BlockModel> Blocks { get; set; }

Property Value

Type	Description
List<BlockModel>	A List<T> of type List<T> containing the editor blocks. The default value is an empty collection.

Remarks

Use this property with two-way binding to keep the application model synchronized with the editor state.

For very large collections, consider incremental loading to reduce initial render time and memory usage.

Examples

Two-way binding with change handler.

<SfBlockEditor @bind-Blocks="Blocks"/>

@code {
    public List<BlockModel> Blocks { get; set; } = new();
}

BlocksChanged

Event callback for when the Blocks collection changes.

Declaration

[Parameter]
public EventCallback<List<BlockModel>> BlocksChanged { get; set; }

Property Value

Type	Description
EventCallback<List<BlockModel>>	An EventCallback<TValue> where `TValue` is List<T> of BlockModel invoked when the Blocks collection is modified.

Remarks

This event allows two-way binding to propagate changes (e.g., new blocks, updated Properties) back to the parent component.

Blur

Occurs when the SfBlockEditor loses focus.

Declaration

[Parameter]
public EventCallback<BlurEventArgs> Blur { get; set; }

Property Value

Type	Description
EventCallback<BlurEventArgs>	An EventCallback<TValue> that provides details about the blur event.

Remarks

This event is triggered when the editor component loses input focus.

The event arguments contain information such as the ID of previously focused block.

This event can be used to hide contextual UI elements, save content, or update application state.

Examples

<SfBlockEditor Blur="@OnEditorBlur">
</SfBlockEditor>

@code {
    private async Task OnEditorBlur(BlurEventArgs args)
    {
        Your action to be performed
   }
}

Created

Event raised when the rendering of the SfBlockEditor component is completed.

Declaration

[Parameter]
public EventCallback<object> Created { get; set; }

Property Value

Type	Description
EventCallback<object>	An event callback that is raised when the SfBlockEditor component is fully rendered.

Remarks

Use this event to perform additional setup or logic after the Block editor has been initialized and rendered.

CssClass

Gets or sets a custom CSS class for the editor.

Declaration

[Parameter]
public string CssClass { get; set; }

Property Value

Type	Description
string	A string used to apply additional styling. The default value is `string.Empty`.

Remarks

This class will be appended to the root element of the editor for custom styling.

Multiple classes can be specified by separating them with spaces.

Custom CSS classes allow for theme customization without modifying the component's internal styles.

EnableHtmlEncode

Gets or sets a value indicating whether HTML encoding is enabled.

Declaration

[Parameter]
public bool EnableHtmlEncode { get; set; }

Property Value

Type	Description
bool	A bool indicating whether HTML content should be encoded. Default is `false`.

Remarks

Enables encoding of special characters to prevent HTML injection and formatting issues.

EnableHtmlSanitizer

Gets or sets a value indicating whether HTML sanitization is enabled.

Declaration

[Parameter]
public bool EnableHtmlSanitizer { get; set; }

Property Value

Type	Description
bool	A bool indicating whether unsafe HTML tags and attributes are removed. Default is `true`.

Remarks

Helps protect the editor from harmful or untrusted HTML content by sanitizing it.

Focus

Occurs when the SfBlockEditor receives focus.

Declaration

[Parameter]
public EventCallback<FocusEventArgs> Focus { get; set; }

Property Value

Type	Description
EventCallback<FocusEventArgs>	An EventCallback<TValue> that provides details about the focus event.

Remarks

This event is triggered when the editor component receives input focus.

The event arguments contain information such as ID of the Block which was focused.

This event can be used to show contextual UI elements, update application state, or track user interaction with the editor.

Examples

<SfBlockEditor Focus="@OnEditorFocused">
</SfBlockEditor>

@code {
    private void OnEditorFocused(FocusEventArgs args)
    {
        Your action to be performed
    }
}

Height

Gets or sets the height of the editor.

Declaration

[Parameter]
public string Height { get; set; }

Property Value

Type	Description
string	A string or int specifying the editor height. The default value is `"auto"`.

Remarks

Accepts values in pixels, percentage, or other valid CSS height formats.

Integer values are automatically converted to pixel measurements (e.g., 500 becomes "500px").

When set to "100%", the editor will fill the height of its parent container.

ID

Gets or sets the unique ID for the SfBlockEditor.

Declaration

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
string	The ID of the SfBlockEditor. The default value is `String.Empty`.

Remarks

This property specifies a unique identifier for the SfBlockEditor component. The ID is used to uniquely identify the BlockEditor within the HTML document, which can be useful for styling, scripting, and accessing the component programmatically.

KeyConfig

Gets or sets the custom keyboard shortcuts for editor actions.

Declaration

[Parameter]
public Dictionary<string, string> KeyConfig { get; set; }

Property Value

Type	Description
Dictionary<string, string>	A dictionary representing shortcut key combinations. The default value is `null`.

Remarks

Format each shortcut as a string using '+' to combine keys, such as "Ctrl+B" for bold formatting.

These shortcuts override default keyboard behavior within the editor and enable custom interactions.

Common modifier keys include: Ctrl, Alt, Shift, and Meta (Command key on macOS).

PasteCleanupCompleted

Occurs after content has been cleaned up in the SfBlockEditor.

Declaration

[Parameter]
public EventCallback<PasteCleanupCompletedEventArgs> PasteCleanupCompleted { get; set; }

Property Value

Type	Description
EventCallback<PasteCleanupCompletedEventArgs>	An EventCallback<TValue> that provides details about the content that was cleaned.

Remarks

This event is triggered after a paste cleanup has completed and the content has been ready to insert into the editor.

The event arguments contain information about the cleaned content, where are about to be inserted

This event can be used for post-processing of cleaned up content, analytics tracking, or applying additional formatting after cleaning.

Examples

<SfBlockEditor PasteCleanupCompleted="@OnPasteCleaned">
</SfBlockEditor>

@code {
    private async Task OnPasteCleaned(PasteCleanupCompletedEventArgs args)
    {
       Your action to be performed.
    }
}

PasteCleanupStarting

Occurs before content gets cleaned up in the SfBlockEditor.

Declaration

[Parameter]
public EventCallback<PasteCleanupStartingEventArgs> PasteCleanupStarting { get; set; }

Property Value

Type	Description
EventCallback<PasteCleanupStartingEventArgs>	An EventCallback<TValue> that provides access to the raw content being cleaned up.

Remarks

This event is triggered when a paste operation is initiated but before the content is cleaned up in the editor.

The event arguments allow inspection and modification of the content before it is cleaned up

This event is useful for implementing content sanitization, format conversion, or paste filtering based on application requirements.

Examples

<SfBlockEditor PasteCleanupStartin="@OnPasteCleanup">
</SfBlockEditor>

@code {
    private void OnPasteCleanup(PasteCleanupStartingEventArgs args)
    {
        Your action to be performed
   }
}

ReadOnly

Gets or sets a value indicating whether the editor is in read-only mode.

Declaration

[Parameter]
public bool ReadOnly { get; set; }

Property Value

Type	Description
bool	A bool that prevents content editing when set to true. The default value is false.

Remarks

Users cannot modify content in read-only mode.

This property is useful for displaying content that should not be edited, such as archived documents or reference materials.

Setting this property to true will disable all editing controls but maintain the visual appearance of the editor.

SelectionChanged

Occurs when the selection in the SfBlockEditor changes.

Declaration

[Parameter]
public EventCallback<SelectionChangedEventArgs> SelectionChanged { get; set; }

Property Value

Type	Description
EventCallback<SelectionChangedEventArgs>	An EventCallback<TValue> that provides details about the selection change.

Remarks

This event is triggered when the user changes their text selection or cursor position within the editor.

The event arguments contain information about the new selection, including the selected block.

This event can be used to update formatting toolbars, display contextual information, or synchronize selections with other components.

Examples

<SfBlockEditor SelectionChanged="@OnChanged">
</SfBlockEditor>

@code {
    private void OnChanged(SelectionChangedEventArgs args)
    {
        Your action to be performed
}

UndoRedoStack

Gets or sets the maximum number of undo and redo actions supported in the editor.

Declaration

[Parameter]
public int UndoRedoStack { get; set; }

Property Value

Type	Description
int	An int representing the limit of the undo/redo history. Default is `30`.

Remarks

This determines how many previous actions can be reverted or reapplied by the user.

Users

Gets or sets the list of users available for mention.

Declaration

[Parameter]
public List<UserModel> Users { get; set; }

Property Value

Type	Description
List<UserModel>	A List<T> containing mentionable users. The default value is an empty list.

Remarks

This property provides the data source for the mention popup triggered by '@' in the editor.

Examples

<SfBlockEditor Users="@MentionableUsers" />

@code {
    public List<UserModel> MentionableUsers { get; set; } = new();
}

Width

Gets or sets the width of the editor.

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Type	Description
string	A string or int specifying the editor width. The default value is `"100%"`.

Remarks

Accepts values in pixels, percentage, or other valid CSS width formats.

Integer values are automatically converted to pixel measurements (e.g., 800 becomes "800px").

When set to "100%", the editor will fill the width of its parent container.

Methods

AddBlockAsync(BlockModel, string, bool)

Asynchronously inserts a new block into the SfBlockEditor component.

Declaration

public Task AddBlockAsync(BlockModel BlockModel, string TargetID = null, bool IsAfter = false)

Parameters

Type	Name	Description
BlockModel	BlockModel	The block model containing the content and configuration of the block to be inserted.
string	TargetID	The ID of the target block that determines the insertion point.
bool	IsAfter	When true, the new block is inserted after the target block; when false, it's inserted before. The default is false.

Returns

Type	Description
Task	A Task representing the asynchronous operation.

Remarks

This method allows programmatic insertion of blocks at specific positions within the editor's content.

The TargetID parameter specifies the reference block. If it's null or empty, the new block will be added at the beginning or end of the document based on IsAfter.

After insertion, the editor's state is updated and the BlockChanged event is triggered.

Examples

@code {
    private SfBlockEditor editor;

  Insert a block at the beginning of the document
    private async Task InsertBlockAtBeginning()
    {
        var introBlock = new BlockModel
        {
            BlockType = BlockType.Callout,
            Content = "Document introduction callout"
        };

        await editor.AddBlockAsync(introBlock, null, false);
    }
}

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

DisableToolbarItemsAsync(List<int>)

Asynchronously disables one or more toolbar items in the SfBlockEditor component.

Declaration

public Task DisableToolbarItemsAsync(List<int> Items)

Parameters

Type	Name	Description
List<int>	Items	A list of toolbar item index to be disabled.

Returns

Type	Description
Task	A Task representing the asynchronous operation.

Remarks

This method allows programmatically disabling specific toolbar items to restrict certain editing actions.

EnableToolbarItemsAsync(List<int>)

Asynchronously enable one or more toolbar items in the SfBlockEditor component.

Declaration

public Task EnableToolbarItemsAsync(List<int> Items)

Parameters

Type	Name	Description
List<int>	Items	A list of toolbar item index to be enabled.

Returns

Type	Description
Task	A Task representing the asynchronous operation.

Remarks

This method allows programmatically enabling specific toolbar items that were previously disabled.

ExecuteCommandAsync(CommandName, string)

Executes a predefined toolbar action in the SfBlockEditor component.

Declaration

public Task ExecuteCommandAsync(CommandName CommandName, string Option = null)

Parameters

Type	Name	Description
CommandName	CommandName	The built-in toolbar action to execute.
string	Option	Optional parameters for the toolbar action. Default is `null`.

Returns

Type	Description
Task	A Task representing the asynchronous operation.

FocusInAsync()

Asynchronously sets focus to the SfBlockEditor component.

Declaration

public Task FocusInAsync()

Returns

Type	Description
Task	A Task representing the asynchronous operation.

Remarks

This method programmatically focuses the editor, making it the active element for user input.

When the editor receives focus, the Focus event is triggered.

If a block was previously selected, that selection is maintained when focus is set.

FocusOutAsync()

Asynchronously removes focus from the SfBlockEditor component.

Declaration

public Task FocusOutAsync()

Returns

Type	Description
Task	A Task representing the asynchronous operation.

Remarks

This method programmatically removes focus from the editor, similar to when a user clicks elsewhere.

When the editor loses focus, the Blur event is triggered.

This can be useful for implementing keyboard navigation between different components or saving content when leaving the editor.

GetBlockAsync(string)

Retrieves a specific block from the SfBlockEditor component.

Declaration

public Task<BlockModel> GetBlockAsync(string BlockID)

Parameters

Type	Name	Description
string	BlockID	The reference ID of the block to retrieve.

Returns

Type	Description
Task<BlockModel>	A BlockModel representing the retrieved block.

GetBlockCountAsync()

Gets the total number of blocks present in the SfBlockEditor component.

Declaration

public Task<int> GetBlockCountAsync()

Returns

Type	Description
Task<int>	A Task<TResult> that returns the block count as an int.

GetDataAsHtml(string)

Gets the HTML content of the blocks data from the editor.

Declaration

public Task<string> GetDataAsHtml(string BlockID)

Parameters

Type	Name	Description
string	BlockID	Optional ID of the block to retrieve.

Returns

Type	Description
Task<string>	A Task<TResult> that returns the block count as an string.

GetSelectedBlocksAsync()

Asynchronously retrieves the currently selected blocks from the SfBlockEditor component.

Declaration

public Task<List<BlockModel>> GetSelectedBlocksAsync()

Returns

Type	Description
Task<List<BlockModel>>	A Task<TResult> that represents the asynchronous operation. The task result contains an array of BlockModel representing the selected blocks.

Remarks

This method returns all blocks that are currently selected in the editor.

If multiple blocks are selected, the returned array will contain all blocks in the selection order.

If no blocks are selected, an empty array is returned.

MoveBlockAsync(string, string)

Moves a block from one index to another in the SfBlockEditor component.

Declaration

public Task MoveBlockAsync(string FromBlockID, string ToBlockID)

Parameters

Type	Name	Description
string	FromBlockID	The current id of the block to be moved.
string	ToBlockID	The id of the target block where the block should be moved.

Returns

Type	Description
Task	A Task representing the asynchronous operation.

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
Task

Overrides

ComponentBase.OnParametersSetAsync()

PrintAsync()

Asynchronously prints the content of the SfBlockEditor component.

Declaration

public Task PrintAsync()

Returns

Type	Description
Task	A Task representing the asynchronous operation.

Remarks

This method opens the browser's print dialog with the formatted content of the editor.

The printed output includes all visible content with appropriate styling for print media.

Any editor UI elements such as toolbars and selection highlights are excluded from the printed output.

RemoveBlockAsync(string)

Removes a block from the SfBlockEditor component.

Declaration

public Task RemoveBlockAsync(string BlockID)

Parameters

Type	Name	Description
string	BlockID	The reference, ID, or index of the block to be removed.

Returns

Type	Description
Task	A Task representing the asynchronous operation.

SelectAllBlocksAsync()

Asynchronously selects all blocks in the SfBlockEditor component.

Declaration

public Task SelectAllBlocksAsync()

Returns

Type	Description
Task	A Task representing the asynchronous operation.

Remarks

This method programmatically selects all blocks in the editor, similar to using the Ctrl+A keyboard shortcut.

After selection is complete, the SelectionChanged event is triggered.

The selection includes all visible and editable blocks in the document.

ShouldRender()

Declaration

protected override bool ShouldRender()

Returns

Type
bool

Overrides

ComponentBase.ShouldRender()

UpdateBlockAsync(string, BlockModel)

Updates the content or properties of an existing block in the SfBlockEditor component.

Declaration

public Task UpdateBlockAsync(string BlockID, BlockModel BlockModel)

Parameters

Type	Name	Description
string	BlockID	The reference, ID, or index of the block to update.
BlockModel	BlockModel	The updated block data represented as a BlockModel.

Returns

Type	Description
Task	A Task representing the asynchronous operation.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable