Customize tool bar in React Document editor component

How to customize existing toolbar in DocumentEditorContainer

Document Editor Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.

• Add - New items can defined by CustomToolbarItemModel and with existing items in toolbarItems property. Newly added item click action can be defined in toolbarClick.

• Show, Hide - Existing items can be shown or hidden using the toolbarItems property. Pre-defined toolbar items are available with ToolbarItem.

• Enable, Disable - Toolbar items can be enabled or disable using enableItems

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  CustomToolbarItemModel,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
let container = DocumentEditorContainerComponent;
function App() {
  //Custom toolbar item.
  let toolItem = {
    prefixIcon: 'e-de-ctnr-lock',
    tooltipText: 'Disable Image',
    text: onWrapText('Disable Image'),
    id: 'Custom',
  };
  let items = [
    toolItem,
    'Undo',
    'Redo',
    'Separator',
    'Image',
    'Table',
    'Hyperlink',
    'Bookmark',
    'TableOfContents',
    'Separator',
    'Header',
    'Footer',
    'PageSetup',
    'PageNumber',
    'Break',
    'InsertFootnote',
    'InsertEndnote',
    'Separator',
    'Find',
    'Separator',
    'Comments',
    'TrackChanges',
    'Separator',
    'LocalClipboard',
    'RestrictEditing',
    'Separator',
    'FormFields',
    'UpdateFields',
    'ContentControl',
  ];
  function onToolbarClick(args) {
    switch (args.item.id) {
      case 'save':
        //Save the document(Download the document)
        container.documentEditor.save('sample', 'Docx');
        break;
      default:
        break;
    }
  }

  function onToolbarClick(args) {
    switch (args.item.id) {
      case 'Custom':
        //Disable image toolbar item.
        container.toolbar.enableItems(4, false);
        break;
      default:
        break;
    }
  }
  function onWrapText(text) {
    let content = '';
    const index = text.lastIndexOf(' ');
    if (index !== -1) {
      content =
        text.slice(0, index) +
        "<div class='e-de-text-wrap'>" +
        text.slice(index + 1) +
        '</div>';
    } else {
      content = text;
    }
    return content;
  }
  return (
    <div>
      <DocumentEditorContainerComponent
        id="container"
        ref={(scope) => {
          container = scope;
        }}
        height={'590px'}
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        toolbarItems={items}
        toolbarClick={onToolbarClick.bind(this)}
        enableToolbar={true}
      />
    </div>
  );
}
export default App;
createRoot(document.getElementById('sample')).render(<App />);

Note: Default value of toolbarItems is ['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'].