Typography Blocks in React Block Editor component

18 Nov 201818 minutes to read

Typography blocks are essential for organizing and presenting text-based content. The Block Editor component supports various structural blocks—such as Paragraph, Heading, Collapsible (CollapsibleParagraph and CollapsibleHeading), Divider, Quote, and Callout—to help you format and structure content effectively.

Configure paragraph block

Paragraph blocks are the most common type, used for standard text content. They serve as the default block type and provide basic text formatting options. To render a Paragraph block, set the blockType property to Paragraph.

BlockType

// Adding a paragraph block
{
    blockType: 'Paragraph',
    content: [
        {
            contentType: 'Text',
            content: 'This is a paragraph block example.'
        }
    ]
}

The following sample demonstrates the configuration of a paragraph block in the Block 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: 'Paragraph',
        content: [
            {
                contentType: ContentType.Text,
                content: 'This is a paragraph block example.'
            }
        ]
    }
];
  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, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
    const blocksData: BlockModel[] = [
     {
        blockType: 'Paragraph',
        content: [
            {
                contentType: ContentType.Text,
                content: 'This is a paragraph block example.'
            }
        ]
    }
];

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

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

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 the paragraph block is Write something or ‘/’ for commands..

Block type & properties

// Adding placeholder
 {
    blockType: 'Paragraph',
    properties: {placeholder: 'Start typing ...'}
}

The below sample demonstrates the configuration of placeholder in the Block Editor for the paragraph block.

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 sample paragraph block.'
            }
        ]
    },
    {
        blockType: 'Paragraph',
        properties: { placeholder: 'Start typing your notes or press "/" for commands...'},
        content: [ { contentType: ContentType.Text, content: '' } ]
    }
];
    return (
        <BlockEditorComponent
            id="blockeditor_sample"
            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, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
    const blocksData: BlockModel[] = [
    {
        blockType: 'Paragraph',
        content: [
            {
                contentType: ContentType.Text,
                content: 'This is a sample paragraph block.'
            }
        ]
    },
    {
        blockType: 'Paragraph',
        properties: { placeholder: 'Start typing your notes or press "/" for commands...'},
        content: [ { contentType: ContentType.Text, content: '' } ]
    }
];
    return (
        <BlockEditorComponent
            id="blockeditor_sample"
            blocks={blocksData}
        ></BlockEditorComponent>
    );
}

export default App;

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

Configure heading block

Heading blocks create document titles and section headers. These blocks help structure content hierarchically, making it easier to read and navigate. Render a Heading block by setting the blockType property to Heading.

Configuring levels

By using the properties, you can set the heading level using the level property, with 1 being the highest level (title) and 4 being the lowest (subsection).

Block type & properties

// Adding heading block
{
    blockType: 'Heading',
    properties: { level: 1 },
    // levels range from 1 to 4
    content: [
        {
            contentType: 'Text',
            content: 'This is a heading block example.'
        }
    ]
}

The following sample demonstrates the configuration of a heading block in the Block 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: 'Main Document Title'
        }
      ]
    },
    {
      blockType: 'Heading',
      properties: { level: 2},
      content: [
        {
          contentType: ContentType.Text,
          content: 'Chapter Overview'
        }
      ]
    },
    {
      blockType: 'Heading',
      properties: { level: 3},
      content: [
        {
          contentType: ContentType.Text,
          content: 'Section Introduction'
        }
      ]
    },
    {
      blockType: 'Heading',
      properties: { level: 4},
      content: [
        {
          contentType: ContentType.Text,
          content: 'Sub-section Details'
        }
      ]
    }
  ];

  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, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
    const blocksData: BlockModel[] = [
    {
      blockType: 'Heading',
      properties: { level: 1 },
      content: [
        {
          contentType: ContentType.Text,
          content: 'Main Document Title'
        }
      ]
    },
    {
      blockType: 'Heading',
      properties: { level: 2 },
      content: [
        {
          contentType: ContentType.Text,
          content: 'Chapter Overview'
        }
      ]
    },
    {
      blockType: 'Heading',
      properties: { level: 3 },
      content: [
        {
          contentType: ContentType.Text,
          content: 'Section Introduction'
        }
      ]
    },
    {
      blockType: 'Heading',
      properties: { level: 4 },
      content: [
        {
          contentType: ContentType.Text,
          content: 'Sub-section Details'
        }
      ]
    }
  ];

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

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

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 heading block is Heading{level}.

// Adding placeholder value to blocktype
{
    blockType: 'Heading',
    properties: { 
        level: 1,
        placeholder: 'Heading1'
    }
}

Configure divider block

A Divider block inserts a horizontal line to separate content. Render it by setting the blockType to Divider.

Block type & properties

// Adding divider block
{
    {
        blockType: 'Paragraph',
        content: [
            contentType: 'Text',
            content: 'This is a paragraph 1.'
        ]
    },
    {
        blockType: 'Divider' 
    },
    {
        blockType: 'Paragraph',
        content: [
            contentType: 'Text',
            content: 'This is a paragraph 1.'
        ]
    }
}

This sample shows how to place a divider between two blocks.

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 section discusses the features of the Block Editor.'
        }
      ]
    },
    {
      blockType: 'Divider'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This section covers implementation details and usage examples.'
        }
      ]
    }
  ];

  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, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData: BlockModel[] = [
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This section discusses the features of the Block Editor.'
        }
      ]
    },
    {
      blockType: 'Divider'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This section covers implementation details and usage examples.'
        }
      ]
    }
  ];

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

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