syncfusion-react-blockeditor

Install @syncfusion/ej2-react-blockeditor, import BlockEditorComponent and a theme CSS file such as styles/material.css, then pass an array of BlockModel objects to the blocks prop. Each block defines an id, blockType, and content array.

Use the commandMenuSettings prop with a CommandMenuSettingsModel containing custom commands, popup dimensions, and filtering or itemSelect event handlers. The filtering event provides args.text for the query and args.commands for the filtered list.

Yes, drag-and-drop reordering is enabled by default through the enableDragAndDrop prop. The component fires blockDragStart, blockDragging, and blockDropped events so you can track or customize the reordering behavior.

Call getDataAsJson on the component ref to export the current content as JSON. The editor also supports HTML export and parsing HTML back into blocks for import workflows.

The BlockEditor API has no toolbarSettings prop; that is a common mistake. Use inlineToolbarSettings for the text-selection toolbar, and configure commandMenuSettings, contextMenuSettings, or blockActionMenuSettings for other menus.

Yes, the BlockEditor targets WCAG 2.1 compliance with keyboard navigation, ARIA attributes, focus management, and screen reader support for tools like NVDA, JAWS, and VoiceOver. You can add aria-label and aria-describedby attributes for additional context.