Class BlockEditorCommandMenu

Provides configuration for the command menu used by the SfBlockEditor component.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
BlockEditorCommandMenu
Implements
Inherited Members
Namespace: Syncfusion.Blazor.BlockEditor
Assembly: Syncfusion.Blazor.dll
Syntax
public class BlockEditorCommandMenu : SfOwningComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Remarks

The following table summarizes the core aspects of the command menu settings.

MemberTypeDescriptionDefault
CommandsList<T> of CommandItemModelThe list of commands available in the editor’s command menu.null

Each item in Commands represents an action such as inserting a block or transforming an existing one.

Typical fields of CommandItemModel include:

PropertyTypeDescription
IDstringUnique identifier of the command.
LabelstringText displayed in the command menu.
TypeBlockTypeThe block type to insert or transform to (e.g., Paragraph, Heading).
IconCssstringCSS class for the command icon.
GroupBystringOptional grouping label to organize commands in the menu.
Examples

Defines a curated command menu with text, list, and media groups using supported BlockType values.

var settings = new BlockEditorCommandMenu
{
    Commands = new List<CommandItemModel>
    {
        // Text group
        new CommandItemModel
        {
            ID = "paragraph",
            Label = "Paragraph",
            Type = BlockType.Paragraph,
            IconCss = "e-icons e-paragraph-icon",
            GroupBy = "Text"
        },
        new CommandItemModel
        {
            ID = "heading",
            Label = "Heading",
            Type = BlockType.Heading,
            IconCss = "e-icons e-heading-icon",
            GroupBy = "Text"
        },

        // Lists group
        new CommandItemModel
        {
            ID = "bullet-list",
            Label = "Bullet List",
            Type = BlockType.BulletList,
            IconCss = "e-icons e-bullet-list-icon",
            GroupBy = "Lists"
        },
        new CommandItemModel
        {
            ID = "numbered-list",
            Label = "Numbered List",
            Type = BlockType.NumberedList,
            IconCss = "e-icons e-numbered-list-icon",
            GroupBy = "Lists"
        },
        new CommandItemModel
        {
            ID = "check-list",
            Label = "Checklist",
            Type = BlockType.Checklist,
            IconCss = "e-icons e-check-list-icon",
            GroupBy = "Lists"
        },

        // Media group
        new CommandItemModel
        {
            ID = "image",
            Label = "Image",
            Type = BlockType.Image,
            IconCss = "e-icons e-image-icon",
            GroupBy = "Media"
        }
    }
};

Constructors

BlockEditorCommandMenu()

Declaration
public BlockEditorCommandMenu()

Properties

Commands

Gets or sets the collection of command items that appear in the editor’s command menu.

Declaration
[Parameter]
public List<CommandItemModel> Commands { get; set; }
Property Value
Type Description
List<CommandItemModel>

A List<T> of CommandItemModel entries defining the available commands. The default value is null.
Remarks

The table below describes how the command list is interpreted by the editor.

AspectBehavior
Null or emptyDefaults to the built-in command set provided by the editor.
GroupingCommands with the same GroupBy are shown under a common heading.
Block insertionWhen a command’s Type is selected, a new block with that BlockType is inserted.
TransformationImplementers can map a command to transform the currently selected block to the specified BlockType.
Examples

Populates the command menu with a minimal set of commonly used commands.

var commands = new List<CommandItemModel>
{
    new CommandItemModel { ID = "paragraph", Label = "Paragraph", Type = BlockType.Paragraph, GroupBy = "Text" },
    new CommandItemModel { ID = "heading1", Label = "Heading 1", Type = BlockType.Heading, GroupBy = "Text" },
    new CommandItemModel { ID = "bulleted", Label = "Bullet List", Type = BlockType.BulletList, GroupBy = "Lists" },
    new CommandItemModel { ID = "numbered", Label = "Numbered List", Type = BlockType.NumberedList, GroupBy = "Lists" },
    new CommandItemModel { ID = "image", Label = "Image", Type = BlockType.Image, GroupBy = "Media" }
};

var menuSettings = new BlockEditorCommandMenu { Commands = commands };

Filtering

Triggers when filtering is applied to the command items based on query input.

Declaration
[Parameter]
public EventCallback<CommandFilteringEventArgs> Filtering { get; set; }
Property Value
Type Description
EventCallback<CommandFilteringEventArgs>

An event callback that provides the CommandFilteringEventArgs.
Remarks

This event is useful for implementing custom filtering logic based on user-typed input in the command menu.

Examples
private void OnQueryFiltering(CommandMeFilteringEventArgs args)
{
    args.FilteredItems = args.Items.Where(item => item.Text.Contains(args.Query, StringComparison.OrdinalIgnoreCase)).ToList();
}

ItemSelect

Triggers when a command item is selected in the command menu.

Declaration
[Parameter]
public EventCallback<CommandItemSelectEventArgs> ItemSelect { get; set; }
Property Value
Type Description
EventCallback<CommandItemSelectEventArgs>

An event callback that provides the CommandItemSelectEventArgs.
Remarks

This event can be used to perform specific actions based on the selected command item.

Examples
private void OnItemSelected(CommandItemSelectEventArgs args)
{
    Console.WriteLine($""Command selected: {args.Item.Text}"");
}

PopupHeight

Specifies the height of the command menu popup.

Declaration
[Parameter]
public string PopupHeight { get; set; }
Property Value
Type Description
string

A string value representing the popup height. Accepts values in pixels ("px"), percentage ("%"), or "auto".
Remarks

Controls the vertical dimension of the command menu popup. The default is "300px".

PopupWidth

Specifies the width of the command menu popup.

Declaration
[Parameter]
public string PopupWidth { get; set; }
Property Value
Type Description
string

A string value representing the popup width. Accepts values in pixels ("px"), percentage ("%"), or "auto".
Remarks

Controls the horizontal dimension of the command menu popup. The default is "280px".

Methods

Dispose(bool)

Declaration
protected override void Dispose(bool disposing)
Parameters
Type Name Description
bool disposing
Overrides

OnInitializedAsync()

Declaration
protected override Task OnInitializedAsync()
Returns
Type
Task
Overrides

Implements