syncfusion-react-blockeditor

Syncfusion React Block Editor in React Component Overview The Syncfusion React BlockEditorComponent is a powerful block-based rich text editor that allows users to create, edit, and format content using a modern block architecture. Each piece of content (paragraphs, headings, lists, tables, code snippets) is a discrete, manageable block. Key Capabilities The BlockEditorComponent provides: - Block-based architecture - Content structured as discrete, reorderable blocks - Built-in block types - Paragraphs, headings, lists, tables, code, callouts, quotes, collapsible sections - Intuitive menus -…

,\n items: [\n { id: 'label1', text: 'Important', labelColor: '#e53935' },\n { id: 'label2', text: 'Review', labelColor: '#1e88e5' },\n { id: 'label3', text: 'Approved', labelColor: '#43a047', iconCss: 'e-icons e-check' },\n { id: 'label4', text: 'Bug', labelColor: '#fb8c00', groupBy: 'Issues' },\n { id: 'label5', text: 'Feature', labelColor: '#8e24aa', groupBy: 'Issues' }\n ]\n }}\n />\n );\n}\n\nexport default App;\n```\n\n### `LabelSettingsModel` Interface\n\n| Property | Type | Default | Description |\n|---|---|---|---|\n| `items` | `LabelItemModel[]` | — | Array of label items available for selection. |\n| `triggerChar` | `string` | `'

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

` | Character that triggers the label picker popup. |\n\n### `LabelItemModel` Interface\n\n| Property | Type | Description |\n|---|---|---|\n| `id` | `string` | Unique identifier for the label. Used in `ILabelContentSettings.labelId`. |\n| `text` | `string` | Display text for the label. |\n| `labelColor` | `string` | Color of the label for visual distinction (e.g., `'#ff0000'`). |\n| `iconCss` | `string` | CSS class for the label's icon. |\n| `groupBy` | `string` | Group header for categorizing labels in the picker popup. |\n\n---\n\n## Content Models for Mention and Label\n\nWhen a mention or label is inserted into a block's `content` array, each item uses the `ContentModel` structure with a typed `properties` object.\n\n### `IMentionContentSettings`\n\nUsed with `contentType: ContentType.Mention`.\n\n| Property | Type | Description |\n|---|---|---|\n| `userId` | `string` | The ID of the user being mentioned. Must match a `UserModel.id` from the `users` prop. |\n\n### `ILabelContentSettings`\n\nUsed with `contentType: ContentType.Label`.\n\n| Property | Type | Description |\n|---|---|---|\n| `labelId` | `string` | The ID of the label item being referenced. Must match a `LabelItemModel.id` from `labelSettings.items`. |\n\n### Inline Content Array Examples\n\n```tsx\nimport { BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';\n\n// Block with a mention embedded in text\nconst blockWithMention: BlockModel = {\n id: 'block-1',\n blockType: 'Paragraph',\n content: [\n { contentType: ContentType.Text, content: 'Hello ' },\n {\n contentType: ContentType.Mention,\n content: '@Alice Johnson', // display text\n properties: { userId: 'user1' } // IMentionContentSettings\n },\n { contentType: ContentType.Text, content: ', please review this.' }\n ]\n};\n\n// Block with a label embedded in text\nconst blockWithLabel: BlockModel = {\n id: 'block-2',\n blockType: 'Paragraph',\n content: [\n { contentType: ContentType.Text, content: 'Status: ' },\n {\n contentType: ContentType.Label,\n content: 'Important', // display text\n properties: { labelId: 'label1' } // ILabelContentSettings\n }\n ]\n};\n```\n\n> ⚠️ `ContentType.Mention` and `ContentType.Label` are valid enum values. Do **not** use `ContentType.Code`, `ContentType.Image`, or `ContentType.Embed` — these do not exist in the API.\n\n---\n\n## Complete Example\n\n```tsx\nimport {\n BlockEditorComponent,\n BlockModel,\n ContentType,\n UserModel,\n LabelSettingsModel\n} from '@syncfusion/ej2-react-blockeditor';\nimport * as React from 'react';\n\nfunction App() {\n const users: UserModel[] = [\n { id: 'user1', user: 'Alice Johnson', avatarUrl: 'https://example.com/alice.png', avatarBgColor: '#4caf50' },\n { id: 'user2', user: 'Bob Smith', avatarBgColor: '#2196f3' },\n { id: 'user3', user: 'Carol White', avatarBgColor: '#ff9800' }\n ];\n\n const labelSettings: LabelSettingsModel = {\n triggerChar: '

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

,\n items: [\n { id: 'label1', text: 'Important', labelColor: '#e53935' },\n { id: 'label2', text: 'Review', labelColor: '#1e88e5' },\n { id: 'label3', text: 'Approved', labelColor: '#43a047' }\n ]\n };\n\n const initialBlocks: BlockModel[] = [\n {\n id: 'block-1',\n blockType: 'Heading',\n properties: { level: 1 },\n content: [{ contentType: ContentType.Text, content: 'Project Notes' }]\n },\n {\n id: 'block-2',\n blockType: 'Paragraph',\n content: [\n { contentType: ContentType.Text, content: 'Assigned to ' },\n {\n contentType: ContentType.Mention,\n content: '@Alice Johnson',\n properties: { userId: 'user1' }\n },\n { contentType: ContentType.Text, content: ' — status: ' },\n {\n contentType: ContentType.Label,\n content: 'Review',\n properties: { labelId: 'label2' }\n }\n ]\n },\n {\n id: 'block-3',\n blockType: 'Paragraph',\n content: [\n { contentType: ContentType.Text, content: 'Type @ to mention a user, or $ to add a label.' }\n ]\n }\n ];\n\n return (\n \u003cBlockEditorComponent\n id=\"block-editor\"\n blocks={initialBlocks}\n users={users}\n labelSettings={labelSettings}\n />\n );\n}\n\nexport default App;\n```\n\n### Summary\n\n| Task | How |\n|---|---|\n| Enable mentions | Pass `users={UserModel[]}` to the component |\n| Enable labels | Pass `labelSettings={{ triggerChar, items }}` |\n| Trigger mention popup | Type `@` in the editor |\n| Trigger label popup | Type the `triggerChar` (default ` syncfusion-react-blockeditor — Skillopedia ) |\n| Reference a mention in block data | `contentType: ContentType.Mention`, `properties: { userId }` |\n| Reference a label in block data | `contentType: ContentType.Label`, `properties: { labelId }` |\n````\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":8715,"content_sha256":"4459751d501d262c06c0031907d0857b89560581560dd7edc8806c64c6e90138"},{"filename":"references/methods-and-api.md","content":"# Methods and API Reference\n\n## Table of Contents\n- [Block Management Methods](#block-management-methods)\n- [Selection and Cursor Methods](#selection-and-cursor-methods)\n- [Focus Management](#focus-management)\n- [Formatting Methods](#formatting-methods)\n- [Data Export and Import Methods](#data-export-and-import-methods)\n- [Practical Examples](#practical-examples)\n- [Common Patterns](#common-patterns)\n\n## Block Management Methods\n\n### addBlock()\n\nAdd a new block to the editor at a specified position.\n\n**Signature:**\n```tsx\naddBlock(block: BlockModel, targetBlockId?: string, insertAfter?: boolean): void\n```\n\n**Parameters:**\n- `block` - The block to add (BlockModel object)\n- `targetBlockId` - ID of reference block (optional)\n- `insertAfter` - true = after target, false = before target (default: true)\n\n**Example:**\n```tsx\nconst editorRef = React.useRef\u003cBlockEditorComponent>(null);\n\nconst addNewParagraph = () => {\n const newBlock: BlockModel = {\n blockType: 'Paragraph',\n content: [\n {\n contentType: ContentType.Text,\n content: 'This is a newly added paragraph'\n }\n ]\n };\n \n // Add at end\n editorRef.current?.addBlock(newBlock);\n \n // Add after specific block\n editorRef.current?.addBlock(newBlock, 'block-2', true);\n \n // Add before specific block\n editorRef.current?.addBlock(newBlock, 'block-2', false);\n};\n```\n\n### removeBlock()\n\nRemove a block from the editor by its ID.\n\n**Signature:**\n```tsx\nremoveBlock(blockId: string): void\n```\n\n**Example:**\n```tsx\nconst removeSelectedBlock = () => {\n editorRef.current?.removeBlock('block-to-delete-id');\n console.log('Block removed');\n};\n```\n\n### moveBlock()\n\nMove a block from one position to another.\n\n**Signature:**\n```tsx\nmoveBlock(sourceBlockId: string, targetBlockId: string, insertAfter?: boolean): void\n```\n\n**Parameters:**\n- `sourceBlockId` - ID of block to move\n- `targetBlockId` - ID of reference block\n- `insertAfter` - true = after target, false = before target (default: true)\n\n**Example:**\n```tsx\nconst reorderBlocks = () => {\n // Move block-1 after block-3\n editorRef.current?.moveBlock('block-1', 'block-3', true);\n \n // Move block-2 before block-1\n editorRef.current?.moveBlock('block-2', 'block-1', false);\n};\n```\n\n### updateBlock()\n\nUpdate properties of an existing block.\n\n**Signature:**\n```tsx\nupdateBlock(blockId: string, updates: Partial\u003cBlockModel>): boolean\n```\n\n**Returns:** true if successful, false otherwise\n\n**Example:**\n```tsx\nconst updateBlockContent = () => {\n const success = editorRef.current?.updateBlock('block-1', {\n content: [\n {\n contentType: ContentType.Text,\n content: 'Updated content'\n }\n ],\n indent: 2,\n cssClass: 'highlight'\n });\n \n if (success) {\n console.log('Block updated');\n }\n};\n```\n\n### getBlock()\n\nRetrieve a block model by its ID.\n\n**Signature:**\n```tsx\ngetBlock(blockId: string): BlockModel | null\n```\n\n**Returns:** Block object or null if not found\n\n**Example:**\n```tsx\nconst getBlockInfo = () => {\n const block = editorRef.current?.getBlock('block-1');\n \n if (block) {\n console.log('Block type:', block.blockType);\n console.log('Content:', block.content);\n console.log('ID:', block.id);\n } else {\n console.log('Block not found');\n }\n};\n```\n\n### getBlockCount()\n\nGet the total number of blocks in the editor.\n\n**Signature:**\n```tsx\ngetBlockCount(): number\n```\n\n**Example:**\n```tsx\nconst displayBlockCount = () => {\n const count = editorRef.current?.getBlockCount() ?? 0;\n console.log(`Total blocks: ${count}`);\n \n if (count === 0) {\n console.log('Editor is empty');\n }\n};\n```\n\n## Selection and Cursor Methods\n\n### setSelection()\n\nSet text selection within a block.\n\n**Signature:**\n```tsx\nsetSelection(startBlockId: string, startOffset: number, endBlockId: string, endOffset: number): void\n```\n\n**Example:**\n```tsx\nconst selectTextRange = () => {\n // Select from position 0-10 in block-1\n editorRef.current?.setSelection('block-1', 0, 'block-1', 10);\n};\n```\n\n### setCursorPosition()\n\nSet the cursor position in a specific block.\n\n**Signature:**\n```tsx\nsetCursorPosition(blockId: string, offset: number): void\n```\n\n**Example:**\n```tsx\nconst moveToStartOfBlock = () => {\n // Move cursor to position 0 (start)\n editorRef.current?.setCursorPosition('block-1', 0);\n};\n\nconst moveToEndOfBlock = () => {\n const block = editorRef.current?.getBlock('block-1');\n if (block && block.content) {\n const textLength = block.content[0].content?.length ?? 0;\n editorRef.current?.setCursorPosition('block-1', textLength);\n }\n};\n```\n\n### getSelectedBlocks()\n\nGet all currently selected blocks.\n\n**Signature:**\n```tsx\ngetSelectedBlocks(): BlockModel[]\n```\n\n**Example:**\n```tsx\nconst getSelection = () => {\n const selected = editorRef.current?.getSelectedBlocks() ?? [];\n console.log(`${selected.length} blocks selected`);\n \n selected.forEach(block => {\n console.log('Selected block:', block.id);\n });\n};\n```\n\n### getRange()\n\nGet the current text selection range.\n\n**Signature:**\n```tsx\ngetRange(): Range | null\n```\n\n**Example:**\n```tsx\nconst getCurrentSelection = () => {\n const range = editorRef.current?.getRange();\n \n if (range) {\n console.log('Selection start:', range.startOffset);\n console.log('Selection end:', range.endOffset);\n console.log('Selected text:', range.toString());\n }\n};\n```\n\n### selectRange()\n\nSelect a range of text.\n\n**Signature:**\n```tsx\nselectRange(range: Range): void\n```\n\n**Example:**\n```tsx\nconst selectFromRange = () => {\n const range = document.createRange();\n // Configure range...\n editorRef.current?.selectRange(range);\n};\n```\n\n### selectBlock()\n\nSelect an entire block.\n\n**Signature:**\n```tsx\nselectBlock(blockId: string): void\n```\n\n**Example:**\n```tsx\nconst selectEntireBlock = () => {\n editorRef.current?.selectBlock('block-1');\n console.log('Block selected');\n};\n```\n\n### selectAllBlocks()\n\nSelect all blocks in the editor.\n\n**Signature:**\n```tsx\nselectAllBlocks(): void\n```\n\n**Example:**\n```tsx\nconst selectAll = () => {\n editorRef.current?.selectAllBlocks();\n console.log('All blocks selected');\n};\n```\n\n## Focus Management\n\n### focusIn()\n\nSet focus to the editor.\n\n**Signature:**\n```tsx\nfocusIn(): void\n```\n\n**Example:**\n```tsx\nconst setFocus = () => {\n editorRef.current?.focusIn();\n console.log('Editor focused');\n};\n```\n\n### focusOut()\n\nRemove focus from the editor.\n\n**Signature:**\n```tsx\nfocusOut(): void\n```\n\n**Example:**\n```tsx\nconst removeFocus = () => {\n editorRef.current?.focusOut();\n console.log('Editor focus removed');\n};\n```\n\n## Formatting Methods\n\n### executeToolbarAction()\n\nExecute a toolbar formatting action.\n\n**Signature:**\n```tsx\nexecuteToolbarAction(action: string): void\n```\n\n**Example:**\n```tsx\nconst applyFormatting = () => {\n // Apply bold formatting\n editorRef.current?.executeToolbarAction('Bold');\n \n // Apply italic\n editorRef.current?.executeToolbarAction('Italic');\n \n // Apply underline\n editorRef.current?.executeToolbarAction('Underline');\n};\n```\n\n### enableToolbarItems()\n\nEnable specific toolbar items.\n\n**Signature:**\n```tsx\nenableToolbarItems(items: string[]): void\n```\n\n**Example:**\n```tsx\nconst enableFormatting = () => {\n editorRef.current?.enableToolbarItems(['Bold', 'Italic', 'Link']);\n};\n```\n\n### disableToolbarItems()\n\nDisable specific toolbar items.\n\n**Signature:**\n```tsx\ndisableToolbarItems(items: string[]): void\n```\n\n**Example:**\n```tsx\nconst disableEditing = () => {\n editorRef.current?.disableToolbarItems(['Bold', 'Italic', 'Underline', 'Link']);\n};\n```\n\n## Data Export and Import Methods\n\n### getDataAsJson()\n\nExport editor content as JSON.\n\n**Signature:**\n```tsx\ngetDataAsJson(): string\n```\n\n**Example:**\n```tsx\nconst exportAsJson = () => {\n const jsonContent = editorRef.current?.getDataAsJson();\n console.log('Exported JSON:', jsonContent);\n \n // Save to file or send to server\n const blob = new Blob([jsonContent], { type: 'application/json' });\n downloadFile(blob, 'content.json');\n};\n```\n\n### getDataAsHtml()\n\nExport editor content as HTML.\n\n**Signature:**\n```tsx\ngetDataAsHtml(): string\n```\n\n**Example:**\n```tsx\nconst exportAsHtml = () => {\n const htmlContent = editorRef.current?.getDataAsHtml();\n console.log('Exported HTML:', htmlContent);\n \n // Display preview\n document.getElementById('preview').innerHTML = htmlContent;\n};\n```\n\n### renderBlocksFromJson()\n\nImport and render blocks from JSON.\n\n**Signature:**\n```tsx\nrenderBlocksFromJson(jsonContent: string): void\n```\n\n**Example:**\n```tsx\nconst importFromJson = (jsonString: string) => {\n try {\n editorRef.current?.renderBlocksFromJson(jsonString);\n console.log('Content imported from JSON');\n } catch (error) {\n console.error('Failed to import:', error);\n }\n};\n```\n\n### parseHtmlToBlocks()\n\nParse HTML and convert to block structure.\n\n**Signature:**\n```tsx\nparseHtmlToBlocks(htmlContent: string): BlockModel[]\n```\n\n**Example:**\n```tsx\nconst importFromHtml = (htmlString: string) => {\n const blocks = editorRef.current?.parseHtmlToBlocks(htmlString) ?? [];\n console.log(`Parsed ${blocks.length} blocks from HTML`);\n \n // Can use blocks array or render directly\n editorRef.current?.renderBlocksFromJson(JSON.stringify(blocks));\n};\n```\n\n### print()\n\nPrint the editor content.\n\n**Signature:**\n```tsx\nprint(): void\n```\n\n**Example:**\n```tsx\nconst printContent = () => {\n editorRef.current?.print();\n};\n```\n\n## Practical Examples\n\n### Example 1: Create and Manage Dynamic Content\n\n```tsx\nfunction DynamicContentManager() {\n const editorRef = React.useRef\u003cBlockEditorComponent>(null);\n\n const addParagraph = () => {\n const newBlock: BlockModel = {\n blockType: 'Paragraph',\n content: [{\n contentType: ContentType.Text,\n content: `Paragraph added at ${new Date().toLocaleTimeString()}`\n }]\n };\n editorRef.current?.addBlock(newBlock);\n };\n\n const addHeading = () => {\n const newBlock: BlockModel = {\n blockType: 'Heading',\n properties: { level: 2 },\n content: [{\n contentType: ContentType.Text,\n content: 'New Section'\n }]\n };\n editorRef.current?.addBlock(newBlock);\n };\n\n const displayStats = () => {\n const count = editorRef.current?.getBlockCount() ?? 0;\n alert(`Total blocks: ${count}`);\n };\n\n return (\n \u003cdiv>\n \u003cdiv style={{ marginBottom: '10px' }}>\n \u003cbutton onClick={addParagraph}>Add Paragraph\u003c/button>\n \u003cbutton onClick={addHeading}>Add Heading\u003c/button>\n \u003cbutton onClick={displayStats}>Show Stats\u003c/button>\n \u003c/div>\n \u003cBlockEditorComponent id=\"editor\" ref={editorRef} />\n \u003c/div>\n );\n}\n```\n\n### Example 2: Export and Share Content\n\n```tsx\nfunction ExportManager() {\n const editorRef = React.useRef\u003cBlockEditorComponent>(null);\n\n const exportAndDownload = () => {\n const jsonContent = editorRef.current?.getDataAsJson();\n if (jsonContent) {\n const blob = new Blob([jsonContent], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'content.json';\n a.click();\n }\n };\n\n const exportAsHTML = () => {\n const htmlContent = editorRef.current?.getDataAsHtml();\n if (htmlContent) {\n const blob = new Blob([htmlContent], { type: 'text/html' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'content.html';\n a.click();\n }\n };\n\n return (\n \u003cdiv>\n \u003cbutton onClick={exportAndDownload}>Export as JSON\u003c/button>\n \u003cbutton onClick={exportAsHTML}>Export as HTML\u003c/button>\n \u003cBlockEditorComponent id=\"editor\" ref={editorRef} />\n \u003c/div>\n );\n}\n```\n\n### Example 3: Content Search and Selection\n\n```tsx\nfunction ContentSearch() {\n const editorRef = React.useRef\u003cBlockEditorComponent>(null);\n const [searchTerm, setSearchTerm] = React.useState('');\n const [matches, setMatches] = React.useState\u003cBlockModel[]>([]);\n\n const searchContent = () => {\n const blocks: BlockModel[] = [];\n let count = 0;\n \n while (count \u003c (editorRef.current?.getBlockCount() ?? 0)) {\n const block = editorRef.current?.getBlock(`block-${count}`);\n if (block && block.content[0]?.content?.includes(searchTerm)) {\n blocks.push(block);\n }\n count++;\n }\n \n setMatches(blocks);\n console.log(`Found ${blocks.length} matches`);\n };\n\n const selectFirstMatch = () => {\n if (matches.length > 0) {\n editorRef.current?.selectBlock(matches[0].id!);\n editorRef.current?.focusIn();\n }\n };\n\n return (\n \u003cdiv>\n \u003cinput\n type=\"text\"\n placeholder=\"Search...\"\n value={searchTerm}\n onChange={(e) => setSearchTerm(e.target.value)}\n />\n \u003cbutton onClick={searchContent}>Search\u003c/button>\n \u003cbutton onClick={selectFirstMatch} disabled={matches.length === 0}>\n Go to First Match\n \u003c/button>\n \u003cBlockEditorComponent id=\"editor\" ref={editorRef} />\n \u003c/div>\n );\n}\n```\n\n## Common Patterns\n\n### Pattern 1: Batch Operations\n\n```tsx\nconst batchAddBlocks = () => {\n const newBlocks: BlockModel[] = [\n {\n blockType: 'Heading',\n properties: { level: 1 },\n content: [{ contentType: ContentType.Text, content: 'Title' }]\n },\n {\n blockType: 'Paragraph',\n content: [{ contentType: ContentType.Text, content: 'Introduction' }]\n },\n {\n blockType: 'BulletList',\n content: [{ contentType: ContentType.Text, content: 'Point 1' }]\n }\n ];\n \n newBlocks.forEach((block, index) => {\n editorRef.current?.addBlock(block);\n });\n};\n```\n\n### Pattern 2: Conditional Formatting\n\n```tsx\nconst applyConditionalFormatting = (blockId: string) => {\n const block = editorRef.current?.getBlock(blockId);\n if (block?.blockType === 'Paragraph') {\n const textLength = block.content[0].content?.length ?? 0;\n if (textLength > 100) {\n editorRef.current?.updateBlock(blockId, {\n cssClass: 'long-paragraph'\n });\n }\n }\n};\n```\n\n### Pattern 3: Content Validation\n\n```tsx\nconst validateContent = (): boolean => {\n const count = editorRef.current?.getBlockCount() ?? 0;\n if (count === 0) {\n alert('Add at least one block');\n return false;\n }\n return true;\n};\n```\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":15168,"content_sha256":"aad3744ce04f9887ed7049be6f6a24fc28978c8bf17b076fc4dc23f7f795fd48"},{"filename":"references/styling-and-appearance.md","content":"# Styling and Appearance\n\n## Table of Contents\n- [CSS Theming](#css-theming)\n- [Available Themes](#available-themes)\n- [Block Styling](#block-styling)\n- [Typography Options](#typography-options)\n- [Indentation and Nesting](#indentation-and-nesting)\n- [Placeholder Customization](#placeholder-customization)\n- [Dark Mode Support](#dark-mode-support)\n- [Custom Styling Examples](#custom-styling-examples)\n\n## CSS Theming\n\nThe BlockEditor uses Syncfusion's centralized theme system. Import theme CSS files to style the component.\n\n### Basic Theme Import\n\n```css\n/* Material theme */\n@import \"../node_modules/@syncfusion/ej2-base/styles/material.css\";\n@import \"../node_modules/@syncfusion/ej2-inputs/styles/material.css\";\n@import \"../node_modules/@syncfusion/ej2-popups/styles/material.css\";\n@import \"../node_modules/@syncfusion/ej2-buttons/styles/material.css\";\n@import \"../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css\";\n@import \"../node_modules/@syncfusion/ej2-navigations/styles/material.css\";\n@import \"../node_modules/@syncfusion/ej2-dropdowns/styles/material.css\";\n@import \"../node_modules/@syncfusion/ej2-react-blockeditor/styles/material.css\";\n```\n\n### Theme Import in React Component\n\n```tsx\nimport '@syncfusion/ej2-base/styles/material.css';\nimport '@syncfusion/ej2-inputs/styles/material.css';\nimport '@syncfusion/ej2-popups/styles/material.css';\nimport '@syncfusion/ej2-buttons/styles/material.css';\nimport '@syncfusion/ej2-splitbuttons/styles/material.css';\nimport '@syncfusion/ej2-navigations/styles/material.css';\nimport '@syncfusion/ej2-dropdowns/styles/material.css';\nimport '@syncfusion/ej2-react-blockeditor/styles/material.css';\n\nimport { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';\n\nfunction App() {\n return \u003cBlockEditorComponent id=\"editor\" />;\n}\n```\n\n## Available Themes\n\nSyncfusion provides multiple built-in themes. Replace the theme name in imports:\n\n### Theme Options\n\n| Theme | Import Path | Best For |\n|-------|-------------|----------|\n| Material | `material.css` | Google Material Design |\n| Bootstrap 5 | `bootstrap5.css` | Bootstrap ecosystem |\n| Fluent | `fluent.css` | Microsoft Fluent Design |\n| Tailwind | `tailwind3.css` | Tailwind CSS projects |\n| Material Dark | `material-dark.css` | Dark mode Material |\n| Bootstrap Dark | `bootstrap5-dark.css` | Dark mode Bootstrap |\n| Tailwind Dark | `tailwind3-dark.css` | Dark mode Tailwind |\n\n### Switching Themes\n\n```tsx\n// Theme selector component\nfunction ThemeSwitcher() {\n const [theme, setTheme] = React.useState('material');\n\n const handleThemeChange = (newTheme: string) => {\n setTheme(newTheme);\n // Dynamically update theme imports\n document.documentElement.dataset.theme = newTheme;\n };\n\n return (\n \u003cdiv>\n \u003cselect onChange={(e) => handleThemeChange(e.target.value)}>\n \u003coption value=\"material\">Material\u003c/option>\n \u003coption value=\"bootstrap5\">Bootstrap 5\u003c/option>\n \u003coption value=\"fluent\">Fluent\u003c/option>\n \u003coption value=\"tailwind3\">Tailwind\u003c/option>\n \u003c/select>\n \u003c/div>\n );\n}\n```\n\n## Block Styling\n\n### CSS Class Property\n\nApply custom CSS classes to blocks using the `cssClass` property:\n\n```tsx\nimport { BlockEditorComponent, BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';\nimport * as React from 'react';\n\nfunction App() {\n const blocks: BlockModel[] = [\n {\n id: 'block-1',\n blockType: 'Paragraph',\n cssClass: 'default-block',\n content: [{\n contentType: ContentType.Text,\n content: 'Default styling'\n }]\n },\n {\n id: 'block-2',\n blockType: 'Paragraph',\n cssClass: 'highlight-block important',\n content: [{\n contentType: ContentType.Text,\n content: 'Highlighted and important'\n }]\n },\n {\n id: 'block-3',\n blockType: 'Paragraph',\n cssClass: 'warning-block',\n content: [{\n contentType: ContentType.Text,\n content: 'Warning message'\n }]\n }\n ];\n\n return (\n \u003cdiv>\n \u003cstyle>{`\n .highlight-block {\n background-color: #fff3cd;\n border-left: 4px solid #ffc107;\n padding: 10px 15px;\n }\n \n .important {\n font-weight: bold;\n color: #cc0000;\n }\n \n .warning-block {\n background-color: #f8d7da;\n border-left: 4px solid #f5c6cb;\n color: #721c24;\n padding: 10px 15px;\n }\n \n .default-block {\n padding: 8px 0;\n }\n `}\u003c/style>\n \u003cBlockEditorComponent id=\"editor\" blocks={blocks} />\n \u003c/div>\n );\n}\n\nexport default App;\n```\n\n### Block Type-Specific Styling\n\n```css\n/* Style all paragraph blocks */\n.e-block[data-block-type=\"Paragraph\"] {\n line-height: 1.6;\n color: #333;\n}\n\n/* Style heading blocks */\n.e-block[data-block-type=\"Heading\"] {\n margin-top: 20px;\n margin-bottom: 10px;\n color: #1a1a1a;\n}\n\n/* Style list items */\n.e-block[data-block-type=\"BulletList\"],\n.e-block[data-block-type=\"NumberedList\"] {\n margin-left: 20px;\n}\n\n/* Style code blocks */\n.e-block[data-block-type=\"Code\"] {\n background-color: #f5f5f5;\n border-radius: 4px;\n font-family: 'Courier New', monospace;\n padding: 10px;\n}\n\n/* Style table blocks */\n.e-block[data-block-type=\"Table\"] {\n margin: 10px 0;\n}\n```\n\n## Typography Options\n\n### Text Formatting\n\nThe BlockEditor supports inline formatting through the toolbar:\n\n```tsx\nimport { BlockEditorComponent, BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';\nimport * as React from 'react';\n\nfunction App() {\n const blocks: BlockModel[] = [\n {\n id: 'block-1',\n blockType: 'Paragraph',\n content: [{\n contentType: ContentType.Text,\n content: 'Select text and use the toolbar to: Bold, Italic, Underline'\n }]\n }\n ];\n\n return \u003cBlockEditorComponent id=\"editor\" blocks={blocks} />;\n}\n```\n\n### Custom Font Styling\n\n```css\n/* Apply custom fonts */\n.e-block-editor {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n font-size: 16px;\n line-height: 1.5;\n}\n\n/* Heading styles */\n.e-block[data-block-type=\"Heading\"] h1 {\n font-size: 2.5rem;\n font-weight: 700;\n}\n\n.e-block[data-block-type=\"Heading\"] h2 {\n font-size: 2rem;\n font-weight: 700;\n}\n\n.e-block[data-block-type=\"Heading\"] h3 {\n font-size: 1.5rem;\n font-weight: 600;\n}\n\n.e-block[data-block-type=\"Heading\"] h4 {\n font-size: 1.25rem;\n font-weight: 600;\n}\n\n/* Quote styling */\n.e-block[data-block-type=\"Quote\"] {\n border-left: 4px solid #ccc;\n padding-left: 15px;\n color: #666;\n font-style: italic;\n margin-left: 0;\n}\n\n/* Code block styling */\n.e-block[data-block-type=\"Code\"] code {\n font-family: 'Courier New', Courier, monospace;\n font-size: 14px;\n line-height: 1.4;\n}\n```\n\n## Indentation and Nesting\n\n### Indentation Styling\n\n```tsx\nconst indentedBlocks: BlockModel[] = [\n {\n id: 'level-0',\n blockType: 'BulletList',\n indent: 0,\n content: [{\n contentType: ContentType.Text,\n content: 'Level 0 - Main item'\n }]\n },\n {\n id: 'level-1',\n blockType: 'BulletList',\n indent: 1,\n content: [{\n contentType: ContentType.Text,\n content: 'Level 1 - Nested item'\n }]\n },\n {\n id: 'level-2',\n blockType: 'BulletList',\n indent: 2,\n content: [{\n contentType: ContentType.Text,\n content: 'Level 2 - Deeper nesting'\n }]\n }\n];\n```\n\n### Nested Block Styling\n\n```css\n/* Indent based on nesting level */\n.e-block {\n margin-left: 0;\n}\n\n.e-block[data-indent=\"1\"] {\n margin-left: 20px;\n}\n\n.e-block[data-indent=\"2\"] {\n margin-left: 40px;\n}\n\n.e-block[data-indent=\"3\"] {\n margin-left: 60px;\n}\n\n/* Nested content styling */\n.e-block-children {\n margin-top: 5px;\n margin-bottom: 5px;\n}\n```\n\n## Placeholder Customization\n\n### Empty Block Placeholders\n\n```tsx\nimport { BlockEditorComponent, BlockModel } from '@syncfusion/ej2-react-blockeditor';\nimport * as React from 'react';\n\nfunction App() {\n const blocks: BlockModel[] = [\n {\n id: 'block-1',\n blockType: 'Paragraph',\n properties: {\n placeholder: 'Start typing your content here...'\n },\n content: []\n }\n ];\n\n return \u003cBlockEditorComponent id=\"editor\" blocks={blocks} />;\n}\n```\n\n### Placeholder Styling\n\n```css\n/* Global placeholder styling */\n.e-block-editor [data-placeholder]::before {\n content: attr(data-placeholder);\n color: #999;\n font-style: italic;\n pointer-events: none;\n}\n\n/* Heading placeholder */\n.e-block[data-block-type=\"Heading\"][data-placeholder]::before {\n color: #ccc;\n font-size: 1.5rem;\n}\n\n/* Code block placeholder */\n.e-block[data-block-type=\"Code\"][data-placeholder]::before {\n color: #bbb;\n font-family: 'Courier New', monospace;\n}\n```\n\n## Dark Mode Support\n\n### Dark Theme Import\n\n```tsx\nimport '@syncfusion/ej2-base/styles/material-dark.css';\nimport '@syncfusion/ej2-inputs/styles/material-dark.css';\nimport '@syncfusion/ej2-popups/styles/material-dark.css';\nimport '@syncfusion/ej2-buttons/styles/material-dark.css';\nimport '@syncfusion/ej2-splitbuttons/styles/material-dark.css';\nimport '@syncfusion/ej2-navigations/styles/material-dark.css';\nimport '@syncfusion/ej2-dropdowns/styles/material-dark.css';\nimport '@syncfusion/ej2-react-blockeditor/styles/material-dark.css';\n\nimport { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';\n\nfunction App() {\n return \u003cBlockEditorComponent id=\"editor\" />;\n}\n```\n\n### System Dark Mode Support\n\n```tsx\nfunction AppWithDarkMode() {\n const [isDark, setIsDark] = React.useState(false);\n\n React.useEffect(() => {\n // Detect system dark mode preference\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n setIsDark(prefersDark);\n \n // Update document class\n if (prefersDark) {\n document.documentElement.classList.add('dark-mode');\n }\n }, []);\n\n const toggleDarkMode = () => {\n setIsDark(!isDark);\n document.documentElement.classList.toggle('dark-mode');\n };\n\n return (\n \u003cdiv>\n \u003cbutton onClick={toggleDarkMode}>\n {isDark ? 'Light Mode' : 'Dark Mode'}\n \u003c/button>\n \u003cBlockEditorComponent id=\"editor\" />\n \u003c/div>\n );\n}\n```\n\n### Custom Dark Mode Styles\n\n```css\n:root {\n --bg-primary: #ffffff;\n --text-primary: #000000;\n --border-color: #cccccc;\n}\n\n.dark-mode {\n --bg-primary: #1e1e1e;\n --text-primary: #e0e0e0;\n --border-color: #444444;\n}\n\n.e-block-editor {\n background-color: var(--bg-primary);\n color: var(--text-primary);\n}\n\n.e-block {\n border-color: var(--border-color);\n}\n\n.dark-mode .e-block[data-block-type=\"Code\"] {\n background-color: #2d2d2d;\n color: #e0e0e0;\n}\n```\n\n## Custom Styling Examples\n\n### Example 1: Info/Warning/Success Blocks\n\n```tsx\nfunction StyledBlocksExample() {\n const blocks: BlockModel[] = [\n {\n id: 'info',\n blockType: 'Paragraph',\n cssClass: 'block-info',\n content: [{\n contentType: ContentType.Text,\n content: 'ℹ️ This is an informational message.'\n }]\n },\n {\n id: 'warning',\n blockType: 'Paragraph',\n cssClass: 'block-warning',\n content: [{\n contentType: ContentType.Text,\n content: '⚠️ This is a warning message.'\n }]\n },\n {\n id: 'success',\n blockType: 'Paragraph',\n cssClass: 'block-success',\n content: [{\n contentType: ContentType.Text,\n content: '✓ Operation completed successfully.'\n }]\n }\n ];\n\n return (\n \u003cdiv>\n \u003cstyle>{`\n .block-info {\n background-color: #e3f2fd;\n border-left: 4px solid #2196f3;\n color: #1976d2;\n padding: 12px 15px;\n border-radius: 2px;\n }\n \n .block-warning {\n background-color: #fff3e0;\n border-left: 4px solid #ff9800;\n color: #e65100;\n padding: 12px 15px;\n border-radius: 2px;\n }\n \n .block-success {\n background-color: #e8f5e9;\n border-left: 4px solid #4caf50;\n color: #2e7d32;\n padding: 12px 15px;\n border-radius: 2px;\n }\n `}\u003c/style>\n \u003cBlockEditorComponent id=\"editor\" blocks={blocks} />\n \u003c/div>\n );\n}\n```\n\n### Example 2: Responsive Styling\n\n```css\n/* Default (desktop) */\n.e-block-editor {\n font-size: 16px;\n line-height: 1.6;\n}\n\n/* Tablet */\n@media (max-width: 768px) {\n .e-block-editor {\n font-size: 14px;\n padding: 10px;\n }\n \n .e-block {\n margin-left: 0 !important;\n }\n}\n\n/* Mobile */\n@media (max-width: 480px) {\n .e-block-editor {\n font-size: 13px;\n }\n \n .e-block-header {\n display: none;\n }\n}\n```\n\n### Example 3: High Contrast Accessibility\n\n```css\n/* High contrast mode */\n@media (prefers-contrast: more) {\n .e-block-editor {\n border: 2px solid #000;\n }\n \n .e-block {\n border: 1px solid #000;\n padding: 8px;\n }\n \n .block-info {\n background-color: #ffffff;\n border: 2px solid #0066cc;\n font-weight: bold;\n }\n}\n```\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":14270,"content_sha256":"cde0d0de8263e810b2b886534d8045993be2ab90d56757583c07a26eaf063e70"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Syncfusion React Block Editor in React","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"The Syncfusion React BlockEditorComponent is a powerful block-based rich text editor that allows users to create, edit, and format content using a modern block architecture. Each piece of content (paragraphs, headings, lists, tables, code snippets) is a discrete, manageable block.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Key Capabilities","type":"text"}]},{"type":"paragraph","content":[{"text":"The BlockEditorComponent provides:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Block-based architecture","type":"text","marks":[{"type":"strong"}]},{"text":" - Content structured as discrete, reorderable blocks","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Built-in block types","type":"text","marks":[{"type":"strong"}]},{"text":" - Paragraphs, headings, lists, tables, code, callouts, quotes, collapsible sections","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Intuitive menus","type":"text","marks":[{"type":"strong"}]},{"text":" - Slash commands, context menus, inline toolbars","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Drag-and-drop","type":"text","marks":[{"type":"strong"}]},{"text":" - Reorder blocks easily with visual handles","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Content export","type":"text","marks":[{"type":"strong"}]},{"text":" - Export as JSON, HTML, or plain text","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessibility","type":"text","marks":[{"type":"strong"}]},{"text":" - WCAG 2.1 compliant with keyboard navigation and screen reader support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Customization","type":"text","marks":[{"type":"strong"}]},{"text":" - Custom styling, themes, RTL support, globalization","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Documentation Navigation Guide","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Getting Started","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/getting-started.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/getting-started.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Installation and npm package setup","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Basic component implementation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"CSS imports and theme configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Creating your first block editor","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Setting initial content with blocks","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Built-in Block Types","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/built-in-blocks.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/built-in-blocks.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Block type reference (Paragraph, Heading, List, Table, Code, Quote, Callout)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Nested block types (CollapsibleHeading, CollapsibleParagraph)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Block indentation and CSS class styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Content configuration and properties","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Menus and Commands","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/block-editor-menus.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/block-editor-menus.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Slash command menu customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Context menu configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Inline toolbar setup","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Menu events and filtering","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Block actions and shortcuts","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Drag-Drop and Content Management","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/drag-drop-and-content.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/drag-drop-and-content.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Drag-and-drop block reordering (","type":"text"},{"text":"enableDragAndDrop","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Content insertion and nesting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Drag events (","type":"text"},{"text":"blockDragStart","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"blockDragging","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"blockDropped","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Programmatic block movement","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Mentions and Labels","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/mentions-and-labels.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/mentions-and-labels.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"users","type":"text","marks":[{"type":"code_inline"}]},{"text":" prop and ","type":"text"},{"text":"UserModel","type":"text","marks":[{"type":"code_inline"}]},{"text":" interface for ","type":"text"},{"text":"@mention","type":"text","marks":[{"type":"code_inline"}]},{"text":" feature","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"labelSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":" prop and ","type":"text"},{"text":"LabelItemModel","type":"text","marks":[{"type":"code_inline"}]},{"text":" interface for label feature","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ContentType.Mention","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"ContentType.Label","type":"text","marks":[{"type":"code_inline"}]},{"text":" inline content","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"IMentionContentSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"ILabelContentSettings","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Methods and API","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/methods-and-api.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/methods-and-api.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Block management methods (add, remove, update, move)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Selection and cursor control","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Data export/import (JSON, HTML)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Content formatting and rendering","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Styling and Appearance","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/styling-and-appearance.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/styling-and-appearance.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"CSS theming and imports","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Block styling with custom CSS classes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Typography and formatting options","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Dark mode and responsive design","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Advanced Features","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/advanced-features.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/advanced-features.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Paste cleanup and content sanitization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Undo/redo functionality","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Keyboard shortcut customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Read-only mode configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"XSS protection and HTML sanitization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"RTL support and internationalization","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Accessibility","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/accessibility.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/accessibility.md","title":null}}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"WCAG 2.1 compliance","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Keyboard navigation patterns","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Screen reader support and ARIA attributes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Focus management","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Color contrast and visual indicators","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start Example","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';\nimport { BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';\nimport '@syncfusion/ej2-react-blockeditor/styles/material.css';\n\nfunction App() {\n // Define initial blocks\n const blocksData: BlockModel[] = [\n {\n id: 'block-1',\n blockType: 'Heading',\n properties: { level: 1 },\n content: [\n {\n contentType: ContentType.Text,\n content: 'Welcome to Block Editor'\n }\n ]\n },\n {\n id: 'block-2',\n blockType: 'Paragraph',\n content: [\n {\n contentType: ContentType.Text,\n content: 'This is your first paragraph. Click the \"+\" button to add more blocks.'\n }\n ]\n }\n ];\n\n return (\n \u003cBlockEditorComponent\n id=\"block-editor\"\n blocks={blocksData}\n />\n );\n}\n\nexport default App;","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Patterns","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"1. Add a Block Programmatically","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"const editorRef = React.useRef\u003cBlockEditorComponent>(null);\n\nconst addNewBlock = () => {\n const newBlock: BlockModel = {\n blockType: 'Paragraph',\n content: [\n {\n contentType: ContentType.Text,\n content: 'New paragraph block'\n }\n ]\n };\n \n editorRef.current?.addBlock(newBlock);\n};","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"2. Handle Menu Item Selection","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"const commandMenuSettings = {\n itemSelect: (args) => {\n console.log('Selected command:', args.command.label, args.command.id);\n // Handle custom actions based on selected command\n }\n};","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"3. Export Content as JSON","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"const exportContent = () => {\n const jsonContent = editorRef.current?.getDataAsJson();\n console.log('Exported content:', jsonContent);\n};","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"4. Enable Read-Only Mode","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cBlockEditorComponent\n id=\"block-editor\"\n blocks={blocksData}\n readOnly={true}\n/>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Key Props","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"⚠️ Props ","type":"text"},{"text":"toolbarSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"containerCssClass","type":"text","marks":[{"type":"code_inline"}]},{"text":", and ","type":"text"},{"text":"showBlockHandle","type":"text","marks":[{"type":"code_inline"}]},{"text":" do ","type":"text"},{"text":"not","type":"text","marks":[{"type":"strong"}]},{"text":" exist in the BlockEditor API and must not be used.","type":"text"}]}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Prop","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"id","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Unique identifier for the component","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"blocks","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"BlockModel[]","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array of block objects defining content","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"readOnly","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Enable read-only mode (default: ","type":"text"},{"text":"false","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"width","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string | number","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Width of the editor container (default: ","type":"text"},{"text":"'100%'","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"height","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string | number","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Height of the editor container","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"commandMenuSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"CommandMenuSettingsModel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Customize slash command (/) menu","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"contextMenuSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"ContextMenuSettingsModel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Configure right-click context menu","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"inlineToolbarSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"InlineToolbarSettingsModel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Configure inline text selection toolbar","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"blockActionMenuSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"BlockActionMenuSettingsModel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Configure block action (⋮) menu","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"transformSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"TransformSettingsModel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Configure block type transform menu","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"imageBlockSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"ImageBlockSettingsModel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Configure image upload and rendering","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"codeBlockSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"CodeBlockSettingsModel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Configure code block languages","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"pasteCleanupSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"PasteCleanupSettingsModel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Control paste sanitization behavior","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"users","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"UserModel[]","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"User list for ","type":"text"},{"text":"@mention","type":"text","marks":[{"type":"code_inline"}]},{"text":" feature","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"labelSettings","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"LabelSettingsModel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Label items and trigger char for label feature","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"enableDragAndDrop","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"boolean","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Enable/disable drag-and-drop reordering (default: ","type":"text"},{"text":"true","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"undoRedoStack","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"number","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Max number of undo/redo history steps","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"keyConfig","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"{ [key: string]: string }","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Custom keyboard shortcut mappings","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"locale","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"string","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Localization language code (default: ","type":"text"},{"text":"'en-US'","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"blockChanged","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"EmitType\u003cBlockChangedEventArgs>","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Fires when block content changes","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Use Cases","type":"text"}]},{"type":"paragraph","content":[{"text":"Content Management System","type":"text","marks":[{"type":"strong"}]},{"text":" - Build a CMS with block-based editing, custom block types, and content export","type":"text"}]},{"type":"paragraph","content":[{"text":"Document Editor","type":"text","marks":[{"type":"strong"}]},{"text":" - Create a collaborative document editor with formatting, templates, and version control","type":"text"}]},{"type":"paragraph","content":[{"text":"Note-Taking App","type":"text","marks":[{"type":"strong"}]},{"text":" - Implement a personal notes app with nesting, tagging, and search capabilities","type":"text"}]},{"type":"paragraph","content":[{"text":"Blog Editor","type":"text","marks":[{"type":"strong"}]},{"text":" - Enable blog authors to write with rich formatting, media embeds, and preview","type":"text"}]},{"type":"paragraph","content":[{"text":"Knowledge Base","type":"text","marks":[{"type":"strong"}]},{"text":" - Build internal documentation with organized blocks, search, and linked references","type":"text"}]},{"type":"paragraph","content":[{"text":"Survey/Form Builder","type":"text","marks":[{"type":"strong"}]},{"text":" - Create dynamic surveys with conditional blocks and response capture","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"hr","attrs":{"markup":"---"}}]},"metadata":{"date":"2026-06-05","name":"syncfusion-react-blockeditor","author":"@skillopedia","source":{"stars":3,"repo_name":"react-ui-components-skills","origin_url":"https://github.com/syncfusion/react-ui-components-skills/blob/HEAD/skills/syncfusion-react-blockeditor/SKILL.md","repo_owner":"syncfusion","body_sha256":"6c4b675b58f84082312e1c16a6a6522118b9a97e5139521e3f41a6ba4869f054","cluster_key":"3b8297e02ec99828b2743a11c91c61a76e5bf91f63a6e808ac936c4a60e4a111","clean_bundle":{"format":"clean-skill-bundle-v1","source":"syncfusion/react-ui-components-skills/skills/syncfusion-react-blockeditor/SKILL.md","attachments":[{"id":"d06a07cb-781e-5997-ad17-5b2e85b3d3f5","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/d06a07cb-781e-5997-ad17-5b2e85b3d3f5/attachment.md","path":"references/accessibility.md","size":15529,"sha256":"2802cadeafb9272448685667f38964286a4bd34107ee649df4239da3ddf42af0","contentType":"text/markdown; charset=utf-8"},{"id":"716ebfac-5217-52b4-901d-b7677bb56507","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/716ebfac-5217-52b4-901d-b7677bb56507/attachment.md","path":"references/advanced-features.md","size":24274,"sha256":"d02f8f90e3ee8b63a1944184cdc2a9a01885acc4080e15f2b1d8d13c0d9824b3","contentType":"text/markdown; charset=utf-8"},{"id":"c0ea76c9-dcbc-5213-848f-e20cd0c3d351","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/c0ea76c9-dcbc-5213-848f-e20cd0c3d351/attachment.md","path":"references/block-editor-menus.md","size":23482,"sha256":"aa7d2550567e61d10c72460c527a5a927f4f2fdb73482e6c96040d67fafb211a","contentType":"text/markdown; charset=utf-8"},{"id":"d9c58894-4271-5f51-a19c-a9ba0d5ac62a","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/d9c58894-4271-5f51-a19c-a9ba0d5ac62a/attachment.md","path":"references/built-in-blocks.md","size":21133,"sha256":"76510b09ae55f78a9ac7a0dade197dacbd2d2994babe3dafe9e214bf5a251902","contentType":"text/markdown; charset=utf-8"},{"id":"19c94205-6115-5c0d-b1af-7eeb2469cb84","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/19c94205-6115-5c0d-b1af-7eeb2469cb84/attachment.md","path":"references/drag-drop-and-content.md","size":14857,"sha256":"c005f2616b0fae6d26a4585213b05d4048d3732915f4bd5b262466b3cf5389bd","contentType":"text/markdown; charset=utf-8"},{"id":"cb5bf478-7cf4-5178-b455-12116e3a3fdd","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/cb5bf478-7cf4-5178-b455-12116e3a3fdd/attachment.md","path":"references/getting-started.md","size":8762,"sha256":"2c8146c9631352005543dd8e0ca853062340be49d718d8fa2ede1b03bd72e021","contentType":"text/markdown; charset=utf-8"},{"id":"63cb6686-7a77-595e-add1-d5f360daade3","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/63cb6686-7a77-595e-add1-d5f360daade3/attachment.md","path":"references/mentions-and-labels.md","size":8715,"sha256":"4459751d501d262c06c0031907d0857b89560581560dd7edc8806c64c6e90138","contentType":"text/markdown; charset=utf-8"},{"id":"b4456a23-754b-59c1-a99f-4b57ca615582","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/b4456a23-754b-59c1-a99f-4b57ca615582/attachment.md","path":"references/methods-and-api.md","size":15168,"sha256":"aad3744ce04f9887ed7049be6f6a24fc28978c8bf17b076fc4dc23f7f795fd48","contentType":"text/markdown; charset=utf-8"},{"id":"1725e142-33e3-5416-88fa-83a104ca99cc","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/1725e142-33e3-5416-88fa-83a104ca99cc/attachment.md","path":"references/styling-and-appearance.md","size":14270,"sha256":"cde0d0de8263e810b2b886534d8045993be2ab90d56757583c07a26eaf063e70","contentType":"text/markdown; charset=utf-8"}],"bundle_sha256":"59ffa8b934f02335899b3d5de9817af3e0ab0662f3b6b1ff82e54a848ecf92ba","attachment_count":9,"text_attachments":9,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":1,"skill_md_path":"skills/syncfusion-react-blockeditor/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"web-development","category_label":"Web"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"web-development","metadata":{"author":"Syncfusion Inc","version":"33.1.44"},"import_tag":"clean-skills-v1","description":"Implement the Syncfusion React BlockEditor component. Use this skill for block-based rich content editing, document creation, CMS interfaces, markdown alternatives, editor setup, block configuration, toolbar or menu customization, drag-and-drop behavior, formatting options, APIs, and accessibility in React."}},"renderedAt":1782979709811}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.