Blocks in React Block Editor component

19 Dec 202522 minutes to read

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 Code Snippet 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 and 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.
Code Formatted code blocks with syntax highlighting.
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.
Template Renders custom content using predefined templates, allowing for user-defined block structures.

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData = [
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a paragraph with no indentation (indent: 0)'
        }
      ],
      indent: 0
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This paragraph has one level of indentation (indent: 1)'
        }
      ],
      indent: 1
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This paragraph has two levels of indentation (indent: 2)'
        }
      ],
      indent: 2
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'Back to no indentation'
        }
      ],
      indent: 0
    }
  ];

  return (
    <BlockEditorComponent id="blockEditor" blocks={blocksData} />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
    const blocksData: BlockModel[] = [
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a paragraph with no indentation (indent: 0)'
        }
      ],
      indent: 0
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This paragraph has one level of indentation (indent: 1)'
        }
      ],
      indent: 1
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This paragraph has two levels of indentation (indent: 2)'
        }
      ],
      indent: 2
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'Back to no indentation'
        }
      ],
      indent: 0
    }
  ];

  return (
    <BlockEditorComponent id="blockEditor" blocks={blocksData} />
  );
}

export default App;

ReactDOM.render(<App />, document.getElementById('container'));

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData = [
    {
      blockType: 'Heading',
      properties: { level: 1},
      content: [
        {
          contentType: ContentType.Text,
          content: 'Custom CSS Classes in Block Editor'
        }
      ]
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'Default paragraph block'
        }
      ]
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is an info block'
        }
      ],
      cssClass: 'info-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a warning block'
        }
      ],
      cssClass: 'warning-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a success block'
        }
      ],
      cssClass: 'success-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is an error block'
        }
      ],
      cssClass: 'error-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a custom font block'
        }
      ],
      cssClass: 'custom-font'
    }
  ];

  return (
    <BlockEditorComponent id="blockEditor" blocks={blocksData} />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData: BlockModel[] = [
    {
      blockType: 'Heading',
      properties: { level: 1},
      content: [
        {
          contentType: ContentType.Text,
          content: 'Custom CSS Classes in Block Editor'
        }
      ]
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'Default paragraph block'
        }
      ]
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is an info block'
        }
      ],
      cssClass: 'info-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a warning block'
        }
      ],
      cssClass: 'warning-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a success block'
        }
      ],
      cssClass: 'success-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is an error block'
        }
      ],
      cssClass: 'error-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a custom font block'
        }
      ],
      cssClass: 'custom-font'
    }
  ];

  return (
    <BlockEditorComponent id="blockEditor" blocks={blocksData} />
  );
}

export default App;

ReactDOM.render(<App />, document.getElementById('container'));
#container {
  margin: 50px;
}

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

/* Custom CSS for blocks  */
.e-block.info-block, .e-block.warning-block, .e-block.success-block, .e-block.error-block {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px;
    margin-bottom: 5px;
    border-left: 4px solid;
}

.e-block.info-block {
    background-color: #e6f3ff;
    border-left-color: #007bff;
    color: #004085;
}

.e-block.warning-block {
    background-color: #fff8e1;
    border-left-color: #ffc107;
    color: #856404;
}

.e-block.success-block {
    background-color: #e8f5e9;
    border-left-color: #28a745;
    color: #155724;
}

.e-block.error-block {
    background-color: #fdecea;
    border-left-color: #dc3545;
    color: #721c24;
}

.e-block.custom-font {
    font-family: 'Georgia', serif;
    font-size: 18px;
    color: #4a4a4a;
    border-bottom: 2px dotted #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
}

Configure templates

The Block Editor allows you to use custom templates for specialized content using the template property. Templates can be defined as strings, functions, or HTML elements.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData = [
    {
        blockType: 'Template',
        template: `<div class="notification-card">
            <div class="notification-header">
                <span class="notification-icon">📢</span>
                <h3 class="notification-title">Important Announcement</h3>
            </div>
            <div class="notification-content">
                <p>The system will be undergoing maintenance on Saturday from 2:00 AM to 4:00 AM.</p>
                <p>Please save your work before this time to prevent any data loss.</p>
            </div>
        </div>`
    }
];
  return <BlockEditorComponent id="block-editor" blocks={blocksData}></BlockEditorComponent>;
}

export default App;
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel } from '@syncfusion/ej2-react-blockeditor';

function App() {
    const blocksData: BlockModel[] = [
     {
        blockType: 'Template',
        template: `<div class="notification-card">
            <div class="notification-header">
                <span class="notification-icon">📢</span>
                <h3 class="notification-title">Important Announcement</h3>
            </div>
            <div class="notification-content">
                <p>The system will be undergoing maintenance on Saturday from 2:00 AM to 4:00 AM.</p>
                <p>Please save your work before this time to prevent any data loss.</p>
            </div>
        </div>`
    }
];

  return <BlockEditorComponent id="block-editor" blocks={blocksData}></BlockEditorComponent>;
}

export default App;
ReactDOM.render(<App />, document.getElementById('container'));
#container {
  margin: 50px;
}

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