Syncfusion React Block Editor in React

Component Overview

Key Capabilities

• Block-based architecture - Content structured as discrete, reorderable blocks
• Built-in block types - Paragraphs, headings, lists, tables, code, callouts, quotes, collapsible sections
• Intuitive menus - Slash commands, context menus, inline toolbars
• Drag-and-drop - Reorder blocks easily with visual handles
• Content export - Export as JSON, HTML, or plain text
• Accessibility - WCAG 2.1 compliant with keyboard navigation and screen reader support
• Customization - Custom styling, themes, RTL support, globalization

Documentation Navigation Guide

Getting Started

• Installation and npm package setup
• Basic component implementation
• CSS imports and theme configuration
• Creating your first block editor
• Setting initial content with blocks

Built-in Block Types

• Block type reference (Paragraph, Heading, List, Table, Code, Quote, Callout)
• Nested block types (CollapsibleHeading, CollapsibleParagraph)
• Block indentation and CSS class styling
• Content configuration and properties

Menus and Commands

• Slash command menu customization
• Context menu configuration
• Inline toolbar setup
• Menu events and filtering
• Block actions and shortcuts

Drag-Drop and Content Management

• Drag-and-drop block reordering (

  enableDragAndDrop

  )
• Content insertion and nesting
• Drag events (

  blockDragStart

  ,

  blockDragging

  ,

  blockDropped

  )
• Programmatic block movement

Mentions and Labels

• users

  prop and

  UserModel

  interface for

  @mention

  feature

• labelSettings

  prop and

  LabelItemModel

  interface for label feature

• ContentType.Mention

  /

  ContentType.Label

  inline content

• IMentionContentSettings

  /

  ILabelContentSettings

Methods and API

• Block management methods (add, remove, update, move)
• Selection and cursor control
• Data export/import (JSON, HTML)
• Content formatting and rendering

Styling and Appearance

• CSS theming and imports
• Block styling with custom CSS classes
• Typography and formatting options
• Dark mode and responsive design

Advanced Features

• Paste cleanup and content sanitization
• Undo/redo functionality
• Keyboard shortcut customization
• Read-only mode configuration
• XSS protection and HTML sanitization
• RTL support and internationalization

Accessibility

• WCAG 2.1 compliance
• Keyboard navigation patterns
• Screen reader support and ARIA attributes
• Focus management
• Color contrast and visual indicators

Quick Start Example

import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
import { BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';
import '@syncfusion/ej2-react-blockeditor/styles/material.css';

function App() {
  // Define initial blocks
  const blocksData: BlockModel[] = [
    {
      id: 'block-1',
      blockType: 'Heading',
      properties: { level: 1 },
      content: [
        {
          contentType: ContentType.Text,
          content: 'Welcome to Block Editor'
        }
      ]
    },
    {
      id: 'block-2',
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is your first paragraph. Click the "+" button to add more blocks.'
        }
      ]
    }
  ];

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

export default App;

Common Patterns

1. Add a Block Programmatically

const editorRef = React.useRef<BlockEditorComponent>(null);

const addNewBlock = () => {
  const newBlock: BlockModel = {
    blockType: 'Paragraph',
    content: [
      {
        contentType: ContentType.Text,
        content: 'New paragraph block'
      }
    ]
  };
  
  editorRef.current?.addBlock(newBlock);
};

2. Handle Menu Item Selection

const commandMenuSettings = {
  itemSelect: (args) => {
    console.log('Selected command:', args.command.label, args.command.id);
    // Handle custom actions based on selected command
  }
};

3. Export Content as JSON

const exportContent = () => {
  const jsonContent = editorRef.current?.getDataAsJson();
  console.log('Exported content:', jsonContent);
};

4. Enable Read-Only Mode

<BlockEditorComponent
  id="block-editor"
  blocks={blocksData}
  readOnly={true}
/>

Key Props

⚠️ Props

toolbarSettings

,

containerCssClass

, and

showBlockHandle

do not exist in the BlockEditor API and must not be used.

id

string

blocks

BlockModel[]

readOnly

boolean

false

width

string | number

'100%'

height

string | number

commandMenuSettings

CommandMenuSettingsModel

contextMenuSettings

ContextMenuSettingsModel

inlineToolbarSettings

InlineToolbarSettingsModel

blockActionMenuSettings

BlockActionMenuSettingsModel

transformSettings

TransformSettingsModel

imageBlockSettings

ImageBlockSettingsModel

codeBlockSettings

CodeBlockSettingsModel

pasteCleanupSettings

PasteCleanupSettingsModel

users

UserModel[]

@mention

labelSettings

LabelSettingsModel

enableDragAndDrop

boolean

true

undoRedoStack

number

keyConfig

{ [key: string]: string }

locale

string

'en-US'

blockChanged

EmitType<BlockChangedEventArgs>

Common Use Cases