Editor Menus in React Block Editor component
15 Dec 202524 minutes to read
The Block Editor component includes several intuitive, context-aware menus that streamline content creation and editing. These menus provide quick access to formatting options and commands, improving user productivity.
Slash command menu
The Slash Command menu allows users to quickly insert or transform blocks by typing / followed by a command. This provides an efficient, keyboard-driven way to interact with the editor.
Built-in items
The Slash Command menu comes with a set of pre-defined commands for all block types:
- Headings (Level 1 to 4): Inserts a heading block of the corresponding level.
- Lists (Bullet, Numbered, Checklist): Creates a block for the specified list type.
- Paragraph: Inserts a standard text block.
- Image: Inserts a media block for images.
- Table: Inserts a table block.
- Toggle: Creates a collapsible content block.
- Callout: Inserts a block for highlighting important information.
- Utility (Divider, Quote, Code): Inserts a utility block like a divider, quote, or code block.
Customize Slash command menu
You can use the commandMenuSettings property to modify the Slash Command menu. This allows you to add custom commands, remove default items, or change the behavior of existing commands to fit your application’s requirements.
Events
The following events are available for the Slash Command menu:
| Name | Args | Description |
|---|---|---|
| filtering | CommandFilteringEventArgs | Triggers when the user types to filter the command menu items. |
| itemSelect | CommandItemSelectEventArgs | Triggers when the user clicks on a command menu item. |
The following example demonstrates how to customize the Slash Command menu.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
function App() {
// Slash Command Menu Configuration
const commandMenuSettings = {
popupWidth: '350px',
popupHeight: '400px',
// Custom command items
commands: [
{
id: 'line-cmd',
type: 'Divider',
groupBy: 'Utility',
label: 'Insert a Line',
iconCss: 'e-icons e-divider',
},
{
id: 'timestamp-cmd',
groupBy: 'Actions',
label: 'Insert Timestamp',
iconCss: 'e-icons e-schedule',
}
],
itemSelect: (args) => {
// Handle custom command actions
},
filtering: (args) => {
// Your actions here
}
}
const blocksData = [
{
blockType: 'Paragraph',
content: [
{
contentType: 'Text',
content: 'Type "/" anywhere in this editor to open the custom slash command menu.'
}
]
}
];
return (
<div>
<div id="controls">
<h3>Slash Command Menu Configuration Demo</h3>
<div className="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>
Click in the editor below and type "/" to open the slash command
menu
</li>
<li>Notice the custom popup size, commands and disabled tooltips</li>
</ol>
</div>
</div>
<BlockEditorComponent
id="blockeditor"
blocks={blocksData}
commandMenuSettings={commandMenuSettings}
></BlockEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType, CommandFilteringEventArgs, CommandItemSelectEventArgs, CommandMenuSettingsModel } from '@syncfusion/ej2-react-blockeditor';
function App() {
// Slash Command Menu Configuration
const commandMenuSettings: CommandMenuSettingsModel = {
popupWidth: '350px',
popupHeight: '400px',
// Custom command items
commands: [
{
id: 'line-cmd',
type: 'Divider',
groupBy: 'Utility',
label: 'Insert a Line',
iconCss: 'e-icons e-divider',
},
{
id: 'timestamp-cmd',
groupBy: 'Actions',
label: 'Insert Timestamp',
iconCss: 'e-icons e-schedule',
}
],
itemSelect: (args: CommandItemSelectEventArgs) => {
// Handle custom command actions
},
filtering: (args: CommandFilteringEventArgs) => {
// Your actions here
}
}
const blocksData: BlockModel[] = [
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Type "/" anywhere in this editor to open the custom slash command menu.'
}
]
}
];
return (
<div>
<div id="controls">
<h3>Slash Command Menu Configuration Demo</h3>
<div className="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>
Click in the editor below and type "/" to open the slash command
menu
</li>
<li>Notice the custom popup size, commands and disabled tooltips</li>
</ol>
</div>
</div>
<BlockEditorComponent
id="blockeditor"
blocks={blocksData}
created={() => console.log('BlockEditor initialized')} // Debug initialization
commandMenuSettings={commandMenuSettings}
style= // Temporary styling to confirm rendering
></BlockEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));Context menu
The Context menu appears when a user right-clicks within a specific block. It provides context-aware actions relevant to the clicked block or content.
Built-in items
The Context menu offers the following built-in options:
- Undo/Redo: Reverses or re-applies the last action.
- Cut/Copy/Paste: Standard clipboard actions for selected content.
- Indent: Increases or decreases the indent level of the selected block.
- Link: Adds or edits a hyperlink for the selected text.
Customize Context menu
You can use the contextMenuSettings property to customize the Context menu. This allows you to add specific actions or modify existing items based on your application needs.
Events
The following events are available for the Context menu:
| Name | Args | Description |
|---|---|---|
| opening | ContextMenuOpeningEventArgs | Triggers before the context menu opens. |
| closing | ContextMenuClosingEventArgs | Triggers before the context menu closes. |
| itemSelect | ContextMenuItemSelectEventArgs | Triggers when a context menu item is clicked. |
The following example demonstrates how to customize the Context menu.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, ContentType } from '@syncfusion/ej2-react-blockeditor';
function App() {
const customContextMenuItems = [
{
id: 'format-menu',
text: 'Format',
iconCss: 'e-icons e-format-painter',
items: [
{
id: 'bold-item',
text: 'Bold',
iconCss: 'e-icons e-bold',
},
{
id: 'italic-item',
text: 'Italic',
iconCss: 'e-icons e-italic',
},
{
id: 'underline-item',
text: 'Underline',
iconCss: 'e-icons e-underline',
}
]
},
{ separator: true },
{
id: 'statistics-item',
text: 'Block Statistics',
iconCss: 'e-icons e-chart'
},
{
id: 'export-item',
text: 'Export Options',
iconCss: 'e-icons e-export',
items: [
{
id: 'export-json',
text: 'Export as JSON',
iconCss: 'e-icons e-file-json'
},
{
id: 'export-html',
text: 'Export as HTML',
iconCss: 'e-icons e-file-html'
},
{
id: 'export-pdf',
text: 'Export as PDF',
iconCss: 'e-icons e-file-pdf'
}
]
}
];
const contextMenuSettings = {
enable: true,
showItemOnClick: true,
items: customContextMenuItems,
opening: (args) => {
// Your actions here
},
closing: (args) => {
// Your actions here
},
itemSelect: (args) => {
// Handle custom actions here
}
}
const blocksData = [
{
blockType: 'Heading',
properties: { level: 1 },
content: [
{
contentType: ContentType.Text,
content: 'Context Menu Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Right-click anywhere in this editor to open the custom context menu. Try different areas and blocks.'
}
]
}
];
return (
<div>
<div id="controls">
<h3>Context Menu Configuration Demo</h3>
<div className="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Right-click anywhere in the editor to open the context menu</li>
<li>Notice the custom popup size, menu items and disabled tooltips</li>
<li>Try clicking on items with submenus (they appear on click, not hover)</li>
</ol>
</div>
</div>
<BlockEditorComponent
id="blockeditor"
blocks={blocksData}
contextMenuSettings={contextMenuSettings}
></BlockEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType, ContextMenuOpeningEventArgs, ContextMenuClosingEventArgs, ContextMenuItemSelectEventArgs, ContextMenuItemModel } from '@syncfusion/ej2-react-blockeditor';
function App() {
const customContextMenuItems: ContextMenuItemModel[] = [
{
id: 'format-menu',
text: 'Format',
iconCss: 'e-icons e-format-painter',
items: [
{
id: 'bold-item',
text: 'Bold',
iconCss: 'e-icons e-bold',
},
{
id: 'italic-item',
text: 'Italic',
iconCss: 'e-icons e-italic',
},
{
id: 'underline-item',
text: 'Underline',
iconCss: 'e-icons e-underline',
}
]
},
{ separator: true },
{
id: 'statistics-item',
text: 'Block Statistics',
iconCss: 'e-icons e-chart'
},
{
id: 'export-item',
text: 'Export Options',
iconCss: 'e-icons e-export',
items: [
{
id: 'export-json',
text: 'Export as JSON',
iconCss: 'e-icons e-file-json'
},
{
id: 'export-html',
text: 'Export as HTML',
iconCss: 'e-icons e-file-html'
},
{
id: 'export-pdf',
text: 'Export as PDF',
iconCss: 'e-icons e-file-pdf'
}
]
}
];
const contextMenuSettings = {
enable: true,
showItemOnClick: true,
items: customContextMenuItems,
opening: (args: ContextMenuOpeningEventArgs) => {
// Your actions here
},
closing: (args: ContextMenuClosingEventArgs) => {
// Your actions here
},
itemSelect: (args: ContextMenuItemSelectEventArgs) => {
// Handle custom actions here
}
}
const blocksData: BlockModel[] = [
{
blockType: 'Heading',
properties: { level: 1 },
content: [
{
contentType: ContentType.Text,
content: 'Context Menu Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Right-click anywhere in this editor to open the custom context menu. Try different areas and blocks.'
}
]
}
];
return (
<div>
<div id="controls">
<h3>Context Menu Configuration Demo</h3>
<div className="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Right-click anywhere in the editor to open the context menu</li>
<li>Notice the custom popup size, menu items and disabled tooltips</li>
<li>Try clicking on items with submenus (they appear on click, not hover)</li>
</ol>
</div>
</div>
<BlockEditorComponent
id="blockeditor"
blocks={blocksData}
contextMenuSettings={contextMenuSettings}
></BlockEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));Block action menu
The Block Action menu appears next to a block when you hover over it and click the drag handle icon, offering quick actions specific to that block.
Built-in items
The Block Action menu provides convenient actions for managing individual blocks:
- Duplicate: Creates an exact copy of the current block.
- Delete: Removes the block from the editor.
- Move Up: Moves the block one position higher.
- Move Down: Moves the block one position lower.
Customize Block action menu
You can use the blockActionMenuSettings property to customize the Block action menu. This enables you to add block-specific commands that are relevant to your application, allowing for a highly tailored user experience.
Below example demonstrates how to customize the Block action menu.
Show or hide tooltip
By default, a tooltip is displayed when the user hovers over an action item. You can show or hide the tooltip using the enableTooltip property in the block action menu settings.
Events
The following events are available for the Block action menu:
| Name | Args | Description |
|---|---|---|
| opening | BlockActionMenuOpeningEventArgs | Triggers when the block action menu is opened. |
| closing | BlockActionMenuClosingEventArgs | Triggers when the block action menu is closed. |
| itemSelect | BlockActionItemSelectEventArgs | Triggers when a block action menu item is clicked. |
The following example demonstrates how to customize the Block action menu.
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: 'Block Action Menu Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Hover over any block and click the drag handle icon to see custom actions.'
}
]
}
];
// Block Action Menu Configuration
const blockActionMenuSettings = {
enable: true,
popupWidth: '180px',
popupHeight: '110px',
enableTooltip: false,
// Custom action items
items: [
{
id: 'highlight-action',
label: 'Highlight Block',
iconCss: 'e-icons e-highlight',
tooltip: 'Highlight this block'
},
{
id: 'copy-content-action',
label: 'Copy Content',
iconCss: 'e-icons e-copy',
tooltip: 'Copy block content to clipboard'
},
{
id: 'block-info-action',
label: 'Block Info',
tooltip: 'Show block information'
}
],
opening: (args) => {
// Your actions here
},
closing: (args) => {
// Your actions here
},
itemSelect: (args) => {
// Handle custom block actions
}
}
return (
<div>
<div id="controls">
<h3>Block Action Menu Configuration Demo</h3>
<div className="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Hover over any block in the editor to see the block action menu</li>
<li>Click on the action menu icon (⋮) next to any block</li>
<li>Notice the custom popup size, action items and disabled tooltips</li>
</ol>
</div>
</div>
<BlockEditorComponent
id="blockeditor"
blocks={blocksData}
blockActionMenuSettings={blockActionMenuSettings}
/>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType, BlockActionMenuOpeningEventArgs, BlockActionMenuClosingEventArgs, BlockActionItemSelectEventArgs} from '@syncfusion/ej2-react-blockeditor';
function App() {
const blocksData: BlockModel[] = [
{
blockType: 'Heading',
properties: { level: 1 },
content: [
{
contentType: ContentType.Text,
content: 'Block Action Menu Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Hover over any block and click the drag handle icon to see custom actions.'
}
]
}
];
// Block Action Menu Configuration
const blockActionMenuSettings = {
enable: true,
popupWidth: '180px',
popupHeight: '110px',
enableTooltip: false,
// Custom action items
items: [
{
id: 'highlight-action',
label: 'Highlight Block',
iconCss: 'e-icons e-highlight',
tooltip: 'Highlight this block'
},
{
id: 'copy-content-action',
label: 'Copy Content',
iconCss: 'e-icons e-copy',
tooltip: 'Copy block content to clipboard'
},
{
id: 'block-info-action',
label: 'Block Info',
tooltip: 'Show block information'
}
],
opening: (args: BlockActionMenuOpeningEventArgs) => {
// Your actions here
},
closing: (args: BlockActionMenuClosingEventArgs) => {
// Your actions here
},
itemSelect: (args: BlockActionItemSelectEventArgs) => {
// Handle custom block actions
}
}
return (
<div>
<div id="controls">
<h3>Block Action Menu Configuration Demo</h3>
<div className="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Hover over any block in the editor to see the block action menu</li>
<li>Click on the action menu icon (⋮) next to any block</li>
<li>Notice the custom popup size, action items and disabled tooltips</li>
</ol>
</div>
</div>
<BlockEditorComponent
id="blockeditor"
blocks={blocksData}
blockActionMenuSettings={blockActionMenuSettings}
/>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));Inline Toolbar
The Inline Toolbar appears when a text is selected in the editor, providing quick access to common text formatting actions that apply to inline content.
Built-in items
The Inline Toolbar includes the following built-in formatting options:
- Text Styles: Bold, Italic, Underline, and Strikethrough.
- Superscript/Subscript: For mathematical or scientific notations.
- Case Conversion: Change text to uppercase or lowercase.
- Text Color: Change the color of the selected text.
- Background Color: Change the background color of the selected text.
Customize Inline Toolbar
You can use the inlineToolbarSettings property to customize the Inline Toolbar by adding or removing formatting options based on your application’s needs.
Events
The following events are available for the Inline Toolbar:
| Name | Args | Description |
|---|---|---|
| itemClick | ToolbarItemClickEventArgs | Triggers when the user clicks on an inline toolbar item. |
The following example demonstrates how to customize the Inline Toolbar.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, ContentType } from '@syncfusion/ej2-react-blockeditor';
function App() {
const customToolbarItems = [ 'Bold', 'Italic' ];
const blocksData = [
{
blockType: 'Heading',
properties: { level: 1 },
content: [
{
contentType: ContentType.Text,
content: 'Inline Toolbar Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Select any text in the editor to open the Inline Toolbar'
}
]
}
];
const inlineToolbarSettings = {
popupWidth: '100px',
enable: true,
items: customToolbarItems,
itemClick: (args) => {
// Handle custom actions here
}
}
return (
<div>
<div id="controls">
<h3>Inline Toolbar Configuration Demo</h3>
<div className="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Select any text in the editor to open the Inline Toolbar</li>
<li>Notice the custom popup size, toolbar items and enabled tooltips</li>
</ol>
</div>
</div>
<BlockEditorComponent
id="blockeditor"
blocks={blocksData}
inlineToolbarSettings={inlineToolbarSettings}
></BlockEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType, ToolbarItemClickEventArgs } from '@syncfusion/ej2-react-blockeditor';
function App() {
const customToolbarItems = [ 'Bold', 'Italic' ];
const blocksData: BlockModel[] = [
{
blockType: 'Heading',
properties: { level: 1 },
content: [
{
contentType: ContentType.Text,
content: 'Inline Toolbar Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Select any text in the editor to open the Inline Toolbar'
}
]
}
];
const inlineToolbarSettings = {
popupWidth: '100px',
enable: true,
items: customToolbarItems,
itemClick: (args: ToolbarItemClickEventArgs) => {
// Handle custom actions here
}
}
return (
<div>
<div id="controls">
<h3>Inline Toolbar Configuration Demo</h3>
<div className="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Select any text in the editor to open the Inline Toolbar</li>
<li>Notice the custom popup size, toolbar items and enabled tooltips</li>
</ol>
</div>
</div>
<BlockEditorComponent
id="blockeditor"
blocks={blocksData}
inlineToolbarSettings={inlineToolbarSettings}
></BlockEditorComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));