@centreon/ui 23.10.52 → 23.10.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.52",
+  "version": "23.10.53",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -102,7 +102,9 @@
   },
   "dependencies": {
     "@lexical/link": "0.11.3",
+    "@lexical/list": "^0.11.3",
     "@lexical/react": "0.11.3",
+    "@lexical/rich-text": "^0.11.3",
     "@lexical/selection": "0.11.3",
     "@lexical/utils": "0.11.3",
     "@visx/curve": "^2.1.0",

package/src/RichTextEditor/ContentEditable.tsx

@@ -47,6 +47,7 @@ const useStyles = makeStyles<StyleProps>()(
 
 interface Props {
   className?: string;
+  disabled: boolean;
   editable: boolean;
   editorState?: string;
   error?: string;
@@ -72,13 +73,13 @@ const ContentEditable = ({
   initialEditorState,
   error,
   onBlur,
-  className
+  className,
+  disabled
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ editable, error, minInputHeight });
   const { t } = useTranslation();
 
   const [editor] = useLexicalComposerContext();
-  const [isEditable, setEditable] = useState(false);
   const [isFocused, setFocused] = useState(false);
   const [root, setRoot] = useState('');
 
@@ -90,17 +91,11 @@ const ContentEditable = ({
   );
 
   useLayoutEffect(() => {
-    setEditable(editor.isEditable());
-
     if (editorState && !editable) {
       const newEditorState = editor.parseEditorState(editorState);
 
       editor.setEditorState(newEditorState);
     }
-
-    return editor.registerEditableListener((currentIsEditable) => {
-      setEditable(currentIsEditable);
-    });
   }, [editor, editorState]);
 
   useEffect(() => {
@@ -128,13 +123,21 @@ const ContentEditable = ({
     editor.setEditorState(newEditorState);
   }, [editorState]);
 
-  const isTextEmpty = isEmpty(root);
+  const isTextEmpty =
+    isEmpty(root) &&
+    !editor.getEditorState().toJSON().root.children?.[0]?.children?.length;
 
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
     setFocused(false);
     onBlur?.(event);
   };
 
+  const isEditable = editor.isEditable();
+
+  useEffect(() => {
+    editor.setEditable(!disabled);
+  }, [disabled]);
+
   return (
     <div
       className={cx(

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -144,9 +144,37 @@ describe('Rich Text Editor', () => {
           cy.wrap(element).should('not.have.attr', 'target');
         });
     });
+
+    it('does not allow to open links in a new tab', () => {
+      cy.mount({
+        Component: <RichTextEditor editable openLinkInNewTab={false} />
+      });
+
+      cy.get('[data-testid="RichTextEditor"]').type('cypress');
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.get('#link').click();
+
+      cy.findByLabelText('Saved link').should('have.text', 'https://');
+
+      cy.findByLabelText('Edit link').click();
+      cy.get('#InputLinkField').type('www.centreon.com').type('{enter}');
+
+      cy.findByText('cypress').parent().should('not.have.attr', 'target');
+
+      cy.get('[data-testid="RichTextEditor"]').focus().clear();
+
+      cy.get('[data-testid="RichTextEditor"]')
+        .focus()
+        .type('https://centreon.com');
+
+      cy.findByText('https://centreon.com')
+        .parent()
+        .should('not.have.attr', 'target');
+    });
   });
 
-  describe('Disabled Rich Text Editor', () => {
+  describe('Rich Text Editor not editable', () => {
     beforeEach(() => {
       cy.mount({
         Component: (
@@ -172,6 +200,33 @@ describe('Rich Text Editor', () => {
     });
   });
 
+  describe('Rich Text Editor is disabled', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            disabled
+            editable
+            initialEditorState={mockInititalStateToEditor}
+          />
+        )
+      });
+    });
+
+    it('displays editor when editable props is false and an initialState exist', () => {
+      cy.get('[data-testid="RichTextEditor"]')
+        .invoke('attr', 'contenteditable')
+        .should('eq', 'true');
+      cy.findByLabelText('Undo').should('be.disabled');
+      cy.findByLabelText('Redo').should('be.disabled');
+      cy.findByLabelText('bold').should('be.disabled');
+      cy.findByLabelText('italic').should('be.disabled');
+      cy.findByLabelText('underline').should('be.disabled');
+      cy.findByLabelText('strikethrough').should('be.disabled');
+      cy.findByLabelText('link').should('be.disabled');
+    });
+  });
+
   describe('Custom style editable rich text editor ', () => {
     beforeEach(() => {
       cy.mount({
@@ -230,4 +285,57 @@ describe('Rich Text Editor', () => {
       });
     });
   });
+
+  describe('Block type', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: <RichTextEditor editable />
+      });
+    });
+
+    const testCases = [
+      {
+        blockType: 'Heading 1',
+        tag: 'h1'
+      },
+      {
+        blockType: 'Heading 2',
+        tag: 'h2'
+      },
+      {
+        blockType: 'Heading 3',
+        tag: 'h3'
+      },
+      {
+        blockType: 'Heading 4',
+        tag: 'h4'
+      },
+      {
+        blockType: 'Heading 5',
+        tag: 'h5'
+      },
+      {
+        blockType: 'Heading 6',
+        tag: 'h6'
+      },
+      {
+        blockType: 'Bullet List',
+        tag: 'ul'
+      },
+      {
+        blockType: 'Number List',
+        tag: 'ol'
+      }
+    ];
+
+    testCases.forEach(({ blockType, tag }) => {
+      it(`displays ${blockType} when the corresponding block type button is selected`, () => {
+        cy.get('[data-testid="RichTextEditor"]').type('Example');
+        cy.findByTestId('Block type').click();
+        cy.findByText(blockType).click();
+
+        cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
+      });
+    });
+  });
 });

package/src/RichTextEditor/RichTextEditor.tsx

@@ -3,11 +3,15 @@ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { HeadingNode } from '@lexical/rich-text';
+import { ListItemNode, ListNode } from '@lexical/list';
 import anylogger from 'anylogger';
 import { makeStyles } from 'tss-react/mui';
 import { EditorState } from 'lexical';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { equals } from 'ramda';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 
 import { Typography } from '@mui/material';
 
@@ -18,6 +22,7 @@ import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 
 export interface RichTextEditorProps {
   contentClassName?: string;
+  disabled?: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
   editorState?: string;
@@ -28,6 +33,7 @@ export interface RichTextEditorProps {
   minInputHeight?: number;
   namespace?: string;
   onBlur?: (e: string) => void;
+  openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
   toolbarPositions?: 'start' | 'end';
@@ -94,7 +100,9 @@ const RichTextEditor = ({
   error,
   onBlur,
   contentClassName,
-  displayMacrosButton = false
+  displayMacrosButton = false,
+  disabled = false,
+  openLinkInNewTab = true
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
 
@@ -106,7 +114,7 @@ const RichTextEditor = ({
     editable,
     editorState: initialEditorState,
     namespace,
-    nodes: [AutoLinkNode, LinkNode],
+    nodes: [AutoLinkNode, LinkNode, HeadingNode, ListNode, ListItemNode],
     onError,
     theme: {
       link: classes.link,
@@ -125,9 +133,9 @@ const RichTextEditor = ({
       <div className={classes.container}>
         <div className={classes.toolbar}>
           <ToolbarPlugin
+            disabled={disabled}
             displayMacrosButton={displayMacrosButton}
             editable={editable}
-            getEditorState={getEditorState}
           />
         </div>
         <div>
@@ -136,6 +144,7 @@ const RichTextEditor = ({
             contentEditable={
               <ContentEditable
                 className={contentClassName || ''}
+                disabled={disabled}
                 editable={editable}
                 editorState={editorState}
                 error={error}
@@ -155,8 +164,13 @@ const RichTextEditor = ({
           />
           <HistoryPlugin />
           <LinkPlugin />
-          <AutoCompleteLinkPlugin />
-          <FloatingLinkEditorPlugin editable={editable} />
+          <ListPlugin />
+          <OnChangePlugin onChange={getEditorState} />
+          <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
+          <FloatingLinkEditorPlugin
+            editable={editable}
+            openLinkInNewTab={openLinkInNewTab}
+          />
           {error && <Typography className={classes.error}>{error}</Typography>}
         </div>
       </div>

package/src/RichTextEditor/plugins/AutoLinkPlugin/index.tsx

@@ -1,4 +1,7 @@
-import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
+import {
+  AutoLinkPlugin,
+  LinkMatcher
+} from '@lexical/react/LexicalAutoLinkPlugin';
 
 interface LinkAttributes {
   rel?: null | string;
@@ -19,13 +22,15 @@ const URL_MATCHER =
 const EMAIL_MATCHER =
   /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
 
-const MATCHERS = [
+const getMatchers = (openLinkInNewTab: boolean): Array<LinkMatcher> => [
   (text: string): LinkMatcherResult | null => {
     const match = URL_MATCHER.exec(text);
 
     return (
       match && {
-        attributes: { rel: 'noreferrer', target: '_blank' },
+        attributes: openLinkInNewTab
+          ? { rel: 'noreferrer', target: '_blank' }
+          : undefined,
         index: match.index,
         length: match[0].length,
         text: match[0],
@@ -47,8 +52,12 @@ const MATCHERS = [
   }
 ];
 
-const AutoCompleteLinkPlugin = (): JSX.Element => {
-  return <AutoLinkPlugin matchers={MATCHERS} />;
+const AutoCompleteLinkPlugin = ({
+  openLinkInNewTab
+}: {
+  openLinkInNewTab: boolean;
+}): JSX.Element => {
+  return <AutoLinkPlugin matchers={getMatchers(openLinkInNewTab)} />;
 };
 
 export default AutoCompleteLinkPlugin;

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -28,6 +28,7 @@ import {
 
 interface FloatingLinkEditorPluginProps {
   editable: boolean;
+  openLinkInNewTab: boolean;
 }
 
 interface UseFloatingLinkEditorProps extends FloatingLinkEditorPluginProps {
@@ -36,6 +37,7 @@ interface UseFloatingLinkEditorProps extends FloatingLinkEditorPluginProps {
 
 interface FloatingLinkEditorProps {
   editor: LexicalEditor;
+  openLinkInNewTab: boolean;
 }
 
 interface TooltipPosition {
@@ -44,7 +46,8 @@ interface TooltipPosition {
 }
 
 const FloatingLinkEditor = ({
-  editor
+  editor,
+  openLinkInNewTab
 }: FloatingLinkEditorProps): JSX.Element | null => {
   const nativeSelection = window.getSelection();
   const rootElement = editor.getRootElement();
@@ -67,7 +70,7 @@ const FloatingLinkEditor = ({
 
         if (value !== '') {
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
-            target: '_blank',
+            target: openLinkInNewTab ? '_blank' : undefined,
             url: value
           });
         }
@@ -144,7 +147,7 @@ const FloatingLinkEditor = ({
               aria-label={labelSavedLink}
               href={linkUrl}
               rel="noreferrer noopener"
-              target="_blank"
+              target={openLinkInNewTab ? '_blank' : undefined}
               variant="button"
             >
               {linkUrl}
@@ -166,7 +169,8 @@ const FloatingLinkEditor = ({
 
 const useFloatingTextFormatToolbar = ({
   editor,
-  editable
+  editable,
+  openLinkInNewTab
 }: UseFloatingLinkEditorProps): JSX.Element | null => {
   const [isText, setIsText] = useState(false);
   const isInsertingLink = useAtomValue(isInsertingLinkAtom);
@@ -241,15 +245,18 @@ const useFloatingTextFormatToolbar = ({
     return null;
   }
 
-  return <FloatingLinkEditor editor={editor} />;
+  return (
+    <FloatingLinkEditor editor={editor} openLinkInNewTab={openLinkInNewTab} />
+  );
 };
 
 const FloatingActionsToolbarPlugin = ({
-  editable
+  editable,
+  openLinkInNewTab
 }: FloatingLinkEditorPluginProps): JSX.Element | null => {
   const [editor] = useLexicalComposerContext();
 
-  return useFloatingTextFormatToolbar({ editable, editor });
+  return useFloatingTextFormatToolbar({ editable, editor, openLinkInNewTab });
 };
 
 export default FloatingActionsToolbarPlugin;

package/src/RichTextEditor/plugins/ToolbarPlugin/BlockButtons.tsx

@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $isListNode,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  ListNode,
+  REMOVE_LIST_COMMAND
+} from '@lexical/list';
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  COMMAND_PRIORITY_CRITICAL,
+  SELECTION_CHANGE_COMMAND
+} from 'lexical';
+import {
+  $createHeadingNode,
+  $isHeadingNode,
+  HeadingTagType
+} from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { T, always, cond, equals, isNil } from 'ramda';
+import {
+  $findMatchingParent,
+  $getNearestNodeOfType,
+  mergeRegister
+} from '@lexical/utils';
+
+import { SingleAutocompleteField } from '../../..';
+
+import { useBlockButtonsStyles } from './ToolbarPlugin.styles';
+
+interface Props {
+  disabled: boolean;
+}
+
+const blockTypeToBlockName = {
+  bullet: 'Bullet List',
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  h4: 'Heading 4',
+  h5: 'Heading 5',
+  h6: 'Heading 6',
+  number: 'Number List',
+  paragraph: 'Normal'
+};
+
+const blockTypes = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'bullet',
+  'number',
+  'paragraph'
+];
+
+const blockTypeOptions = blockTypes.map((blockType) => ({
+  id: blockType,
+  name: blockTypeToBlockName[blockType]
+}));
+
+const BlockButtons = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useBlockButtonsStyles();
+
+  const [blockType, setBlockType] =
+    useState<keyof typeof blockTypeToBlockName>('paragraph');
+
+  const [editor] = useLexicalComposerContext();
+
+  const formatParagraph = (): void => {
+    editor.update(() => {
+      const selection = $getSelection();
+      $setBlocksType(selection, () => $createParagraphNode());
+    });
+  };
+
+  const formatBulletList = (): void => {
+    if (blockType !== 'bullet') {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatNumberedList = (): void => {
+    if (blockType !== 'number') {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatHeading = (headingSize: HeadingTagType): void => {
+    if (blockType !== headingSize) {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          $setBlocksType(selection, () => $createHeadingNode(headingSize));
+        }
+      });
+    }
+  };
+
+  const changeBlockType = (_, newBlockType): void => {
+    const formatFunction = cond<Array<string>, (value?) => void>([
+      [equals('bullet'), always(formatBulletList)],
+      [equals('number'), always(formatNumberedList)],
+      [equals('h1'), always(() => formatHeading('h1'))],
+      [equals('h2'), always(() => formatHeading('h2'))],
+      [equals('h3'), always(() => formatHeading('h3'))],
+      [equals('h4'), always(() => formatHeading('h4'))],
+      [equals('h5'), always(() => formatHeading('h5'))],
+      [equals('h6'), always(() => formatHeading('h6'))],
+      [T, always(formatParagraph)]
+    ])(newBlockType?.id || '');
+
+    formatFunction();
+  };
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    const anchorNode = selection?.anchor.getNode();
+    const element = equals(anchorNode?.getKey(), 'root')
+      ? anchorNode
+      : $findMatchingParent(anchorNode, (e) => {
+          const parent = e.getParent();
+
+          return parent !== null && $isRootOrShadowRoot(parent);
+        }) || anchorNode?.getTopLevelElementOrThrow();
+
+    const elementKey = element?.getKey();
+    const elementDOM = editor.getElementByKey(elementKey);
+
+    if (isNil(elementDOM)) {
+      return;
+    }
+
+    if ($isListNode(element)) {
+      const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+      const type = parentList
+        ? parentList.getListType()
+        : element.getListType();
+      setBlockType(type);
+
+      return;
+    }
+    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+    if (type in blockTypeToBlockName) {
+      setBlockType(type as keyof typeof blockTypeToBlockName);
+    }
+  }, [editor]);
+
+  const value = blockTypeOptions.find((option) => option.id === blockType);
+
+  useEffect(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      () => {
+        updateToolbar();
+
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor, updateToolbar]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      })
+    );
+  }, [editor, updateToolbar]);
+
+  return (
+    <SingleAutocompleteField
+      className={classes.autocomplete}
+      dataTestId="Block type"
+      disabled={disabled}
+      label=""
+      options={blockTypeOptions}
+      value={value}
+      onChange={changeBlockType}
+    />
+  );
+};
+
+export default BlockButtons;

package/src/RichTextEditor/plugins/ToolbarPlugin/FormatButtons.tsx

@@ -5,7 +5,6 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import {
   $getSelection,
   $isRangeSelection,
-  EditorState,
   FORMAT_TEXT_COMMAND,
   RangeSelection,
   SELECTION_CHANGE_COMMAND,
@@ -61,10 +60,10 @@ const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
 };
 
 interface Props {
-  getEditorState?: (editorState: EditorState) => void;
+  disabled: boolean;
 }
 
-const FormatButtons = ({ getEditorState }: Props): JSX.Element => {
+const FormatButtons = ({ disabled }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
   const [isBold, setIsBold] = useState(false);
@@ -104,13 +103,6 @@ const FormatButtons = ({ getEditorState }: Props): JSX.Element => {
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-
-        getEditorState?.(editorState);
-      }),
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         () => {
@@ -169,6 +161,7 @@ const FormatButtons = ({ getEditorState }: Props): JSX.Element => {
         <IconButton
           ariaLabel={type}
           className={cx(isSelected && classes.buttonSelected)}
+          disabled={disabled}
           key={type}
           size="medium"
           title={type}

package/src/RichTextEditor/plugins/ToolbarPlugin/MacrosButton.tsx

@@ -11,6 +11,10 @@ import { useStyles } from '.';
 
 const LowPriority = 1;
 
+interface Props {
+  disabled: boolean;
+}
+
 export const standardMacros = [
   '{{SHORTDATETIME}}',
   '{{LONGDATETIME}}',
@@ -22,7 +26,7 @@ export const standardMacros = [
   '{{STATETYPE}}'
 ];
 
-const MacrosButton = (): JSX.Element => {
+const MacrosButton = ({ disabled }: Props): JSX.Element => {
   const { classes } = useStyles();
   const [arMacrosDiplayed, setAreMacrosDiplayed] = useState(false);
 
@@ -65,6 +69,7 @@ const MacrosButton = (): JSX.Element => {
         <IconButton
           ariaLabel="Macros"
           className={classes.macrosButton}
+          disabled={disabled}
           title="Macros"
           tooltipPlacement="top"
           onClick={displayMacros}

package/src/RichTextEditor/plugins/ToolbarPlugin/ToolbarPlugin.styles.ts

@@ -0,0 +1,7 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useBlockButtonsStyles = makeStyles()((theme) => ({
+  autocomplete: {
+    width: theme.spacing(17)
+  }
+}));

package/src/RichTextEditor/plugins/ToolbarPlugin/UndoRedoButtons.tsx

@@ -18,7 +18,11 @@ import { labelRedo, labelUndo } from '../../translatedLabels';
 
 const LowPriority = 1;
 
-const UndoRedoButtons = (): JSX.Element => {
+interface Props {
+  disabled: boolean;
+}
+
+const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
   const { t } = useTranslation();
 
   const [canUndo, setCanUndo] = useState(false);
@@ -64,7 +68,7 @@ const UndoRedoButtons = (): JSX.Element => {
     <>
       <IconButton
         ariaLabel={translatedUndo}
-        disabled={!canUndo}
+        disabled={!canUndo || disabled}
         title={translatedUndo}
         tooltipPlacement="top"
         onClick={undo}
@@ -73,7 +77,7 @@ const UndoRedoButtons = (): JSX.Element => {
       </IconButton>
       <IconButton
         ariaLabel={translatedRedo}
-        disabled={!canRedo}
+        disabled={!canRedo || disabled}
         title={translatedRedo}
         tooltipPlacement="top"
         onClick={redo}

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -1,4 +1,3 @@
-import { EditorState } from 'lexical';
 import { makeStyles } from 'tss-react/mui';
 
 import { Divider } from '@mui/material';
@@ -6,11 +5,12 @@ import { Divider } from '@mui/material';
 import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
 import MacrosButton from './MacrosButton';
+import BlockButtons from './BlockButtons';
 
 interface Props {
+  disabled: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
-  getEditorState?: (editorState: EditorState) => void;
 }
 
 export const useStyles = makeStyles()((theme) => ({
@@ -31,21 +31,23 @@ export const useStyles = makeStyles()((theme) => ({
 }));
 
 const ToolbarPlugin = ({
-  getEditorState,
   editable,
-  displayMacrosButton
+  displayMacrosButton,
+  disabled
 }: Props): JSX.Element | null => {
   const { classes } = useStyles();
 
   return editable ? (
     <div className={classes.container}>
-      <UndoRedoButtons />
+      <UndoRedoButtons disabled={disabled} />
       <Divider flexItem orientation="vertical" />
-      <FormatButtons getEditorState={getEditorState} />
+      <BlockButtons disabled={disabled} />
+      <Divider flexItem orientation="vertical" />
+      <FormatButtons disabled={disabled} />
       {displayMacrosButton && (
         <>
           <Divider flexItem orientation="vertical" />
-          <MacrosButton />
+          <MacrosButton disabled={disabled} />
         </>
       )}
     </div>