Syncfusion AI Assistant

How can I help you?

Nested blocks in EJ2 TypeScript Block Editor control

18 Mar 202624 minutes to read

Configure children

The Block Editor supports hierarchical content structures through the children property. This can be achieved by using the properties property that allows you to create nested blocks, which is applicable only for Quote, Callout and Collapsible blocks.

Child blocks can be configured with all the same properties as top-level blocks.

Configure parent id

To establish a clear parent-child relationship, the parentId of each child block must match the id of its parent block.

This structure is essential for maintaining nested relationships within the editor.

Configure collapsible blocks

You can render Collapsible blocks by setting the blockType property as CollapsibleParagraph or CollapsibleHeading. Collapsible blocks allow users to expand or collapse sections, providing a way to hide or show content as needed.

Configure levels

You can configure the CollapsibleHeading using the property level inside the properties property . The levels can be varied from level: 1 to level: 4.

Configure expanded state

You can control whether a block is expanded or collapsed using the isExpanded property. By default, this property is set to false, meaning the block will be collapsed initially. This setting is only applicable to Collapsible blocks.

Block type & properties

// Configuring CollapsibleHeading block
{
    blockType: 'CollapsibleHeading',
    properties:{
        level: 1, //level varies from 1 to 4
        isExpanded: true,
        children: [
            {
                //your content to be here..
            }
        ]
    }
}
// Configuring CollapsibleParagraph block
{
    blockType: 'CollapsibleParagraph',
    properties:{
        children: [
            {
               //your content to be here..
            }
        ]
    }
}

This example shows how to configure CollapsibleHeading and CollapsibleParagraph blocks.

import { BlockEditor, BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";

const blocksData: BlockModel[] = [
    {
        blockType: 'CollapsibleHeading',
        content: [
            {
                contentType: ContentType.Text,
                content: 'Collapsible Section'
            }
        ],
        properties:{
        level: 1,
        isExpanded: true,
        children: [
            {
                blockType: 'Paragraph',
                content: [
                    {
                        contentType: ContentType.Text,
                        content: 'This content is inside a toggle section and can be collapsed.'
                    }
                ]
            }
        ]
    }
    },
    {
        blockType: 'CollapsibleParagraph',
        content: [
            {
                contentType: ContentType.Text,
                content: 'Toggle paragraph section'
            }
        ],
        properties:{
        isExpanded: false,
        children: [
            {
                blockType: 'Paragraph',
                content: [
                    {
                        contentType: ContentType.Text,
                        content: 'This content is initially hidden because isExpanded is set to false.'
                    }
                ]
            }
        ]
    }
    }
];

const blockEditor = new BlockEditor({
    blocks: blocksData
});
blockEditor.appendTo('#blockEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - BlockEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-blockeditor/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id="container">
        <div id="blockEditor"></div>
    </div>
</body>
<style>
    #container {
        visibility: hidden;
        margin: 50px;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

</html>

Configure placeholder

You can configure placeholder text for block using the placeholder property. This text appears when the block is empty. The default placeholder for collapsible heading and collapsible paragraph is Collapsible Heading{level} and Collapsible Paragraph respectively.

// Adding placeholder value to collapsible heading
{
    blockType: 'CollapsibleHeading',
    properties: {
        level: 2,
        placeholder: 'Heading block'
    }
}
//Adding placeholder value for collapsible paragraph
{
    blockType: 'CollapsibleParagraph',
    properties: { placeholder: 'Collapsible Paragraph'}
}

Configure quote block

Quote blocks are styled for displaying quotations or excerpts. Render a Quote block by setting the blockType to Quote. Editing is now more natural with multi‑line support—pressing Enter creates a new line inside the block, and pressing Enter again on an empty line exits the quote.

Block type & properties

// Adding quote block
{
    blockType: 'Quote',
    properties:{
        children:[{
            blockType: 'Paragraph',
            content: [
                contentType: 'Text',
                content: ''
            ]
        }]
    }
}

The following sample demonstrates how to configure quote block.

import { BlockEditor, BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";

const blocksData: BlockModel[] = [
    {
        id: 'security-quote',
        blockType: 'Quote',
        properties:{
        children: [
                { 
                    parentId: 'security-quote',
                    blockType: 'Heading',
                    properties: { level: 3},
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Security Notice'
                    }]
                },
                { 
                    parentId: 'security-quote',
                    blockType: 'Paragraph',
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Always validate user input before processing to prevent security vulnerabilities.'
                    }]
                },
                { 
                    parentId: 'security-quote',
                    blockType: 'Paragraph',
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Use HTTPS for all data transmission'
                    }],
                },
                { 
                    parentId: 'security-quote',
                    blockType: 'Paragraph',
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Implement proper authentication mechanisms'
                    }],
                },
                { 
                    parentId: 'security-quote',
                    blockType: 'Paragraph',
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Regularly update dependencies and libraries'
                    }],
                }
            ]
        }
    }
];

const blockEditor = new BlockEditor({
    blocks: blocksData
});
blockEditor.appendTo('#blockEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - BlockEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-blockeditor/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id="container">
        <div id="blockEditor"></div>
    </div>
</body>
<style>
    #container {
        visibility: hidden;
        margin: 50px;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

</html>

Configure callout block

Callout blocks highlight important information such as notes, warnings, or tips. Render one by setting the blockType to Callout.

Block type & properties

// Adding callout block
  {
    blockType: 'Callout',
    properties:{
        children: [{ 
            blockType: 'Paragraph',
            content: [{
                contentType: 'Text',
                content: 'Important information: This is a callout block used to highlight important content.'
            }]
        }]
    }
 }

The following sample demonstrates how to configure callout block.

import { BlockEditor, BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";

const blocksData: BlockModel[] = [
    {
        id: 'security-callout',
        blockType: 'Callout',
        properties:{
        children: [
                { 
                    parentId: 'security-callout',
                    blockType: 'Heading',
                    properties: { level: 3},
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Security Notice'
                    }]
                },
                { 
                    parentId: 'security-callout',
                    blockType: 'Paragraph',
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Always validate user input before processing to prevent security vulnerabilities.'
                    }]
                },
                { 
                    parentId: 'security-callout',
                    blockType: 'Paragraph',
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Use HTTPS for all data transmission'
                    }],
                    indent: 1
                },
                { 
                    parentId: 'security-callout',
                    blockType: 'Paragraph',
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Implement proper authentication mechanisms'
                    }],
                    indent: 1
                },
                { 
                    parentId: 'security-callout',
                    blockType: 'Paragraph',
                    content: [{
                        contentType: ContentType.Text,
                        content: 'Regularly update dependencies and libraries'
                    }],
                    indent: 1
                }
            ]
        }
    }
];

const blockEditor = new BlockEditor({
    blocks: blocksData
});
blockEditor.appendTo('#blockEditor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - BlockEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-blockeditor/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id="container">
        <div id="blockEditor"></div>
    </div>
</body>
<style>
    #container {
        visibility: hidden;
        margin: 50px;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

</html>