Class BlockModel

Represents a block model in the SfBlockEditor component.

Inheritance

object

BlockModel

Inherited Members

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

Namespace: Syncfusion.Blazor.BlockEditor

Assembly: Syncfusion.Blazor.dll

Syntax

public class BlockModel

Remarks

This model defines the structure and properties of a block within the editor.

Blocks can contain content, children blocks, and type-specific settings.

Constructors

BlockModel()

Declaration

public BlockModel()

Properties

BlockType

Gets or sets the type of the block in SfBlockEditor.

Declaration

[JsonConverter(typeof(JsonStringEnumConverter))]
public BlockType BlockType { get; set; }

Property Value

Type	Description
BlockType	A BlockType value representing the content type of the block. The default value is Paragraph.

Remarks

The block type determines how the content is rendered and interacted with. Available options include:

Examples

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

@code {
    private List<BlockModel> BlogContent = new()
    {
        // Heading block with level settings
        new BlockModel
        {
            BlockType = BlockType.Heading,
            Properties = new HeadingBlockSettings { Level = 1 },
            Content = new List<ContentModel>
            {
                new ContentModel { ContentType = ContentType.Text, Content = "Welcome to the Block Editor Demo!" }
            }
        }
    };
}

Content

Gets or sets the type-specific settings for the block.

Declaration

[JsonInclude]
public List<ContentModel> Content { get; set; }

Property Value

Type	Description
List<ContentModel>	A BlockSettings base instance that contains settings specific to the current BlockModel type. The default value is null.

Remarks

When Properties is null, it may be initialized based on the value of the BlockType property. During serialization and deserialization, the Syncfusion.Blazor.BlockEditor.Internal.BlockPropsJsonConverter will materialize an appropriate concrete implementation of BlockSettings that corresponds to the BlockType.

Type Alignment: Ensure the assigned implementation of BlockSettings aligns with the current BlockType. For example, use HeadingBlockSettings for Heading, and ChecklistBlockSettings for Checklist. If the block type changes, update Properties accordingly to prevent configuration mismatches.

Performance Consideration: Polymorphic serialization via custom converters can add overhead. Reuse settings objects when possible and avoid frequent allocations in performance-critical paths. This property is not thread-safe; synchronize access if read or modified from multiple threads.

Examples

The following example demonstrates how to assign block settings that correspond to the selected BlockType:

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

@code {
    private List<BlockModel> BlogContent = new()
    {
        // Heading block with level settings
        new BlockModel
        {
            BlockType = BlockType.Heading,
            Properties = new HeadingBlockSettings { Level = 1 },
            Content = new List<ContentModel>
            {
                new ContentModel { ContentType = ContentType.Text, Content = "Welcome to the Block Editor Demo!" }
            }
        },

        // Checklist block indicating a checked state
        new BlockModel
        {
            BlockType = BlockType.Checklist,
            Properties = new ChecklistBlockSettings { IsChecked = true },
            Content = new List<ContentModel>
            {
                new ContentModel { ContentType = ContentType.Text, Content = "Review all features" }
            }
        },

        // Divider block without additional settings
        new BlockModel
        {
            BlockType = BlockType.Divider
            Properties = new ChecklistBlockSettings { IsChecked = true },
        }
    };
}

CssClass

Gets or sets one or more CSS classes to apply custom styles to the block.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
string	A string containing space-separated class names for styling. The default value is `""` (empty string).

Remarks

This allows developers to apply contextual or custom UI styling to specific blocks.

Multiple CSS classes can be specified by separating them with spaces.

The CSS classes should be defined in your application's stylesheet for the styles to take effect.

ID

Gets or sets the unique identifier for the block.

Declaration

public string ID { get; set; }

Property Value

Type	Description
string	A string representing a unique identifier of 10 characters used to identify the block. This value is automatically generated.

Remarks

This value is automatically generated by the component to distinguish each block in the system.

The identifier remains consistent throughout the lifecycle of the block and should not be modified manually after creation.

This identifier can be used for referencing or targeting specific blocks in operations like selection, modification, or deletion.

Indent

Gets or sets the indentation level of the block.

Declaration

public int Indent { get; set; }

Property Value

Type	Description
int	An int representing the nesting level of the block in hierarchical structures. The default value is `0`.

Remarks

Use indentation to create hierarchical block structures such as toggle lists, nested comments, or threaded discussions.

Higher values indicate deeper nesting in the hierarchy. A value of 0 represents a top-level block.

The visual representation of indentation depends on the applied theme and CSS styling.

ParentID

Gets or sets the unique identifier of the parent block.

Declaration

[JsonPropertyName("parentId")]
public string ParentID { get; set; }

Property Value

Type	Description
string	A string representing the unique identifier of the parent block. The default value is `""` (empty string).

Remarks

This property is used to establish a hierarchical relationship between parent and child blocks in the component structure.

When set, the block is treated as a child of the specified parent block, inheriting certain characteristics and behaviors according to the hierarchical structure.

Leave this property empty if the block should be treated as a top-level (root) block with no parent.

Properties

Gets or sets the type-specific settings for the block.

Declaration

[JsonInclude]
[JsonConverter(typeof(BlockPropsJsonConverter))]
public BlockSettings Properties { get; set; }

Property Value

Type	Description
BlockSettings	An BlockSettings base instance that contains settings specific to the current BlockModel type. The default value is null.

Remarks

Ensure the assigned implementation of BlockSettings aligns with the current BlockType. For example, use HeadingBlockSettings for Heading, and ChecklistBlockSettings for Checklist. If the block type changes, update Properties accordingly to prevent configuration mismatches.

Performance note: Polymorphic serialization via a custom converter can add overhead. Reuse settings objects when possible and avoid frequent allocations in performance-critical paths. This property is not thread-safe; synchronize access if it can be read or modified from multiple threads.

Examples

Demonstrates assigning block settings that correspond to the selected BlockType, matching the sample data used in the block editor overview.

// Heading block with level settings
var headingBlock = new BlockModel
{
    ID = "heading-block",
    BlockType = BlockType.Heading,
    Properties = new HeadingBlockSettings { Level = 1 },
    Content = { new ContentModel { ID = "heading-content", ContentType = ContentType.Text, Content = "Welcome to the Block Editor Demo!" } }
};

// Checklist block indicating a checked state
var checklistBlock = new BlockModel
{
    ID = "check-list",
    BlockType = BlockType.Checklist,
    Properties = new ChecklistBlockSettings { IsChecked = true },
    Content = { new ContentModel { ID = "check-list-content", ContentType = ContentType.Text, Content = "Special blocks: Divider." } }
};

// Divider block without additional settings (Properties remains null)
var dividerBlock = new BlockModel
{
    ID = "divider-block",
    BlockType = BlockType.Divider
    Properties = new ChecklistBlockSettings { IsChecked = false },
};