@centreon/ui 23.10.121 → 23.10.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.121",
+  "version": "23.10.122",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

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

@@ -1,5 +1,6 @@
 import RichTextEditor from './RichTextEditor';
 import { standardMacros } from './plugins/ToolbarPlugin/MacrosButton';
+import { labelAlignPicker } from './translatedLabels';
 
 interface CheckElementStyleOnRichTextEditorProps {
   check: boolean;
@@ -47,16 +48,30 @@ describe('Rich Text Editor', () => {
     it('displays all elements when RichTextEditor is called with required props', () => {
       cy.findByLabelText('Undo').should('be.visible');
       cy.findByLabelText('Redo').should('be.visible');
-      cy.findByLabelText('bold').should('be.visible');
-      cy.findByLabelText('italic').should('be.visible');
-      cy.findByLabelText('underline').should('be.visible');
-      cy.findByLabelText('strikethrough').should('be.visible');
+      cy.findByLabelText('align picker').should('be.visible');
+      cy.findByLabelText('block').should('be.visible');
+      cy.findByLabelText('format').should('be.visible');
       cy.findByLabelText('link').should('be.visible');
+      cy.findByLabelText('list').should('be.visible');
+
       cy.findByLabelText('RichTextEditor')
         .should('be.visible')
         .and('have.value', '');
 
       cy.findByLabelText('RichTextEditor').parent().contains('Type here...');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays all format actions when the format button is clicked', () => {
+      cy.findByLabelText('format').click();
+
+      cy.findByLabelText('bold').should('be.visible');
+      cy.findByLabelText('italic').should('be.visible');
+      cy.findByLabelText('underline').should('be.visible');
+      cy.findByLabelText('strikethrough').should('be.visible');
+
+      cy.makeSnapshot();
     });
 
     it('displays changes with undo redo buttons', () => {
@@ -80,21 +95,36 @@ describe('Rich Text Editor', () => {
 
     it('displays changes with bold, italic, underline and strikethrough buttons', () => {
       cy.get('[data-testid="RichTextEditor"]').type('cypress test');
+
       cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
 
-      cy.get('#bold').click();
-      cy.get('#italic').click();
-      cy.get('#underline').click();
-      cy.get('#strikethrough').click();
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('bold').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('italic').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('underline').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('strikethrough').click();
 
       cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
         checkElementStyleOnRichTextEditor({ check: true, element });
       });
 
-      cy.get('#bold').click();
-      cy.get('#italic').click();
-      cy.get('#underline').click();
-      cy.get('#strikethrough').click();
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('bold').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('italic').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('underline').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('strikethrough').click();
 
       cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
         checkElementStyleOnRichTextEditor({ check: false, element });
@@ -105,7 +135,7 @@ describe('Rich Text Editor', () => {
       cy.get('[data-testid="RichTextEditor"]').type('cypress');
       cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
 
-      cy.get('#link').click();
+      cy.findByLabelText('link').click();
 
       cy.findByLabelText('Saved link').should('have.text', 'https://');
 
@@ -130,7 +160,7 @@ describe('Rich Text Editor', () => {
 
       cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
 
-      cy.get('#link').click({ force: true });
+      cy.findByLabelText('link').click();
 
       cy.findByText('cypress')
         .parent()
@@ -153,7 +183,7 @@ describe('Rich Text Editor', () => {
       cy.get('[data-testid="RichTextEditor"]').type('cypress');
       cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
 
-      cy.get('#link').click();
+      cy.findByLabelText('link').click();
 
       cy.findByLabelText('Saved link').should('have.text', 'https://');
 
@@ -189,11 +219,11 @@ describe('Rich Text Editor', () => {
     it('displays editor when editable props is false and an initialState exist', () => {
       cy.findByLabelText('Undo').should('not.exist');
       cy.findByLabelText('Redo').should('not.exist');
-      cy.findByLabelText('bold').should('not.exist');
-      cy.findByLabelText('italic').should('not.exist');
-      cy.findByLabelText('underline').should('not.exist');
-      cy.findByLabelText('strikethrough').should('not.exist');
+      cy.findByLabelText(labelAlignPicker).should('not.exist');
+      cy.findByLabelText('block').should('not.exist');
+      cy.findByLabelText('format').should('not.exist');
       cy.findByLabelText('link').should('not.exist');
+      cy.findByLabelText('list').should('not.exist');
     });
   });
 
@@ -213,11 +243,11 @@ describe('Rich Text Editor', () => {
     it('displays editor when editable props is false and an initialState exist', () => {
       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(labelAlignPicker).should('be.disabled');
+      cy.findByLabelText('block').should('be.disabled');
+      cy.findByLabelText('format').should('be.disabled');
       cy.findByLabelText('link').should('be.disabled');
+      cy.findByLabelText('list').should('be.disabled');
     });
   });
 
@@ -262,7 +292,6 @@ describe('Rich Text Editor', () => {
     });
 
     it('displays the Macros button when the "displayMacrosButton" prop is set to true', () => {
-      cy.findByLabelText('Macros').should('be.visible');
       cy.findByLabelText('Macros').click();
 
       standardMacros.forEach((macro) => {
@@ -273,10 +302,10 @@ describe('Rich Text Editor', () => {
     it('ensures that the selected macro is inserted into the RichTextEditor', () => {
       cy.get('[data-testid="RichTextEditor"]').type('macro : ');
 
-      cy.findByLabelText('Macros').click({});
-
       standardMacros.forEach((macro) => {
-        cy.findByText(macro).should('be.visible').click({ force: true });
+        cy.findByLabelText('Macros').click();
+        cy.findByText(macro).click();
+
         cy.get('[data-testid="RichTextEditor"]').should('contain', macro);
       });
     });
@@ -291,44 +320,59 @@ describe('Rich Text Editor', () => {
 
     const testCases = [
       {
-        blockType: 'Heading 1',
-        tag: 'h1'
-      },
-      {
-        blockType: 'Heading 2',
-        tag: 'h2'
-      },
-      {
-        blockType: 'Heading 3',
+        blockType: 'Huge',
         tag: 'h3'
       },
       {
-        blockType: 'Heading 4',
-        tag: 'h4'
+        blockType: 'Large',
+        tag: 'h5'
       },
       {
-        blockType: 'Heading 5',
-        tag: 'h5'
+        blockType: 'Normal',
+        tag: 'p'
       },
       {
-        blockType: 'Heading 6',
+        blockType: 'Small',
         tag: 'h6'
-      },
+      }
+    ];
+
+    testCases.forEach(({ blockType, tag }) => {
+      it(`displays ${blockType} when the corresponding block type button is selected`, () => {
+        cy.get('[data-testid="RichTextEditor"]').type('Example');
+        cy.findByLabelText('block').click();
+        cy.findByText(blockType).click();
+
+        cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
+
+        cy.makeSnapshot();
+      });
+    });
+  });
+
+  describe('List type', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: <RichTextEditor editable />
+      });
+    });
+
+    const testCases = [
       {
-        blockType: 'Bullet List',
+        listType: 'Unordered List',
         tag: 'ul'
       },
       {
-        blockType: 'Number List',
+        listType: 'Ordered List',
         tag: 'ol'
       }
     ];
 
-    testCases.forEach(({ blockType, tag }) => {
-      it(`displays ${blockType} when the corresponding block type button is selected`, () => {
+    testCases.forEach(({ listType, tag }) => {
+      it(`displays ${listType} when the corresponding list type button is selected`, () => {
         cy.get('[data-testid="RichTextEditor"]').type('Example');
-        cy.findByTestId('Block type').click();
-        cy.findByText(blockType).click();
+        cy.findByLabelText('list').click();
+        cy.findByLabelText(listType).click();
 
         cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
 
@@ -344,14 +388,18 @@ describe('Rich Text Editor', () => {
       });
     });
 
-    const testCases = ['Center', 'Right'];
+    const testCases = ['Center', 'Right', 'Left'];
 
     testCases.forEach((label) => {
-      it(`aligns the text to the ${label} when the corresponding button is clicked`, () => {
+      it(`aligns the text to the ${label} when the corresponding button was clicked`, () => {
         cy.get('[data-testid="RichTextEditor"]').type('Example');
 
-        cy.findByLabelText('left').click();
-        cy.contains(label).click();
+        cy.findByLabelText(labelAlignPicker).click();
+        cy.findByLabelText(label).click();
+
+        cy.findByText('Example')
+          .parent()
+          .should('have.css', 'text-align', label.toLowerCase());
 
         cy.makeSnapshot();
       });

package/src/RichTextEditor/RichTextEditor.tsx

@@ -92,9 +92,9 @@ const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
       lineHeight: theme.typography.h5.lineHeight
     },
     h6: {
-      fontSize: theme.typography.h6.fontSize,
-      fontWeight: theme.typography.h6.fontWeight,
-      lineHeight: theme.typography.h6.lineHeight
+      fontSize: theme.typography.body2.fontSize,
+      fontWeight: theme.typography.body2.fontWeight,
+      lineHeight: theme.typography.body2.lineHeight
     },
     italic: {
       fontStyle: 'italic'
@@ -102,6 +102,11 @@ const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
     link: {
       color: theme.palette.primary.main
     },
+    paragraph: {
+      fontSize: theme.typography.body1.fontSize,
+      fontWeight: theme.typography.body1.fontWeight,
+      lineHeight: theme.typography.body1.lineHeight
+    },
     strikethrough: {
       textDecoration: 'line-through'
     },
@@ -162,6 +167,7 @@ const RichTextEditor = ({
         h6: classes.h6
       },
       link: classes.link,
+      paragraph: classes.paragraph,
       text: {
         bold: classes.bold,
         italic: classes.italic,

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

@@ -18,8 +18,9 @@ import { SvgIconTypeMap } from '@mui/material';
 
 import { Menu } from '../../../components';
 import { getSelectedNode } from '../../utils/getSelectedNode';
+import { labelAlignPicker } from '../../translatedLabels';
 
-import { useAlignPickerStyles } from './ToolbarPlugin.styles';
+import { useStyles } from './ToolbarPlugin.styles';
 
 const formatOptions: Array<{
   Icon: OverridableComponent<SvgIconTypeMap<object, 'svg'>>;
@@ -48,7 +49,7 @@ interface Props {
 }
 
 const AlignPicker = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useAlignPickerStyles();
+  const { classes } = useStyles();
 
   const [elementFormat, setElementFormat] = useState<ElementFormatType>('left');
 
@@ -88,25 +89,25 @@ const AlignPicker = ({ disabled }: Props): JSX.Element => {
 
   return (
     <Menu>
-      <Menu.Button ariaLabel={elementFormat} disabled={disabled}>
-        {selectedFormat && (
-          <div className={classes.button}>
-            <selectedFormat.Icon /> {selectedFormat.label}
-          </div>
-        )}
+      <Menu.Button
+        ariaLabel={labelAlignPicker}
+        className={classes.button}
+        disabled={disabled}
+      >
+        {selectedFormat && <selectedFormat.Icon />}
       </Menu.Button>
-      <Menu.Items>
-        {formatOptions.map(({ Icon, label, value }) => (
-          <Menu.Item
-            isActive={equals(value, elementFormat)}
-            key={value}
-            onClick={dispatchAlignment(value)}
-          >
-            <div className={classes.option}>
-              <Icon /> {label}
-            </div>
-          </Menu.Item>
-        ))}
+      <Menu.Items className={classes.menuItems}>
+        <div className={classes.menu}>
+          {formatOptions.map(({ Icon, value, label }) => (
+            <Menu.Item
+              isActive={equals(value, elementFormat)}
+              key={value}
+              onClick={dispatchAlignment(value)}
+            >
+              <Icon aria-label={label} />
+            </Menu.Item>
+          ))}
+        </div>
       </Menu.Items>
     </Menu>
   );

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

@@ -1,13 +1,6 @@
 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,
@@ -23,43 +16,27 @@ import {
 } 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 { $findMatchingParent, mergeRegister } from '@lexical/utils';
+import { useTranslation } from 'react-i18next';
 
-import { SingleAutocompleteField } from '../../..';
+import TextSizeIcon from '@mui/icons-material/TextFields';
 
-import { useBlockButtonsStyles } from './ToolbarPlugin.styles';
+import { Menu } from '../../../components';
+
+import { useStyles } 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',
+  h3: 'Huge',
+  h5: 'Large',
+  h6: 'Small',
   paragraph: 'Normal'
 };
 
-const blockTypes = [
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'bullet',
-  'number',
-  'paragraph'
-];
+const blockTypes = ['h3', 'h5', 'paragraph', 'h6'];
 
 const blockTypeOptions = blockTypes.map((blockType) => ({
   id: blockType,
@@ -67,7 +44,8 @@ const blockTypeOptions = blockTypes.map((blockType) => ({
 }));
 
 const BlockButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useBlockButtonsStyles();
+  const { classes } = useStyles();
+  const { t } = useTranslation();
 
   const [blockType, setBlockType] =
     useState<keyof typeof blockTypeToBlockName>('paragraph');
@@ -81,22 +59,6 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
     });
   };
 
-  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(() => {
@@ -108,18 +70,13 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
     }
   };
 
-  const changeBlockType = (_, newBlockType): void => {
+  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 || '');
+    ])(newBlockType || '');
 
     formatFunction();
   };
@@ -142,23 +99,13 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
       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,
@@ -182,15 +129,26 @@ const BlockButtons = ({ disabled }: Props): JSX.Element => {
   }, [editor, updateToolbar]);
 
   return (
-    <SingleAutocompleteField
-      className={classes.autocomplete}
-      dataTestId="Block type"
-      disabled={disabled}
-      label=""
-      options={blockTypeOptions}
-      value={value}
-      onChange={changeBlockType}
-    />
+    <Menu>
+      <Menu.Button
+        ariaLabel="block"
+        className={classes.button}
+        disabled={disabled}
+      >
+        <TextSizeIcon />
+      </Menu.Button>
+      <Menu.Items className={classes.menuItems}>
+        {blockTypeOptions.map(({ id, name }) => (
+          <Menu.Item
+            isActive={equals(id, blockType)}
+            key={name}
+            onClick={() => changeBlockType(id)}
+          >
+            {t(name)}
+          </Menu.Item>
+        ))}
+      </Menu.Items>
+    </Menu>
   );
 };
 

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

@@ -1,76 +1,38 @@
 import { useState, useCallback, useEffect, useMemo } from 'react';
 
-import { makeStyles } from 'tss-react/mui';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import {
   $getSelection,
   $isRangeSelection,
   FORMAT_TEXT_COMMAND,
-  RangeSelection,
   SELECTION_CHANGE_COMMAND,
-  TextFormatType,
-  ElementNode,
-  TextNode
+  TextFormatType
 } from 'lexical';
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
-import { $isAtNodeEnd } from '@lexical/selection';
 import { mergeRegister } from '@lexical/utils';
-import { useAtom } from 'jotai';
 
+import FormatTextIcon from '@mui/icons-material/FormatColorText';
 import FormatBoldIcon from '@mui/icons-material/FormatBold';
 import FormatItalicIcon from '@mui/icons-material/FormatItalic';
 import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
 import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
-import LinkIcon from '@mui/icons-material/Link';
-import { alpha } from '@mui/material';
 
-import { IconButton } from '../../..';
-import { isInsertingLinkAtom } from '../../atoms';
+import { Menu } from '../../../components';
 
-const LowPriority = 1;
+import { useStyles } from './ToolbarPlugin.styles';
 
-const useStyles = makeStyles()((theme) => ({
-  buttonSelected: {
-    backgroundColor: alpha(
-      theme.palette.primary.main,
-      theme.palette.action.activatedOpacity
-    )
-  },
-  container: {
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    marginBottom: theme.spacing(1)
-  }
-}));
-
-const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
-  const { anchor } = selection;
-  const { focus } = selection;
-  const anchorNode = selection.anchor.getNode();
-  const focusNode = selection.focus.getNode();
-  if (anchorNode === focusNode) {
-    return anchorNode;
-  }
-  const isBackward = selection.isBackward();
-  if (isBackward) {
-    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
-  }
-
-  return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
-};
+const LowPriority = 1;
 
 interface Props {
   disabled: boolean;
 }
 
 const FormatButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
 
   const [isBold, setIsBold] = useState(false);
   const [isItalic, setIsItalic] = useState(false);
   const [isUnderline, setIsUnderline] = useState(false);
   const [isStrikeThrough, setIsStrikeThrough] = useState(false);
-  const [isLink, setIsLink] = useAtom(isInsertingLinkAtom);
 
   const [editor] = useLexicalComposerContext();
 
@@ -83,24 +45,8 @@ const FormatButtons = ({ disabled }: Props): JSX.Element => {
     setIsItalic(selection.hasFormat('italic'));
     setIsUnderline(selection.hasFormat('underline'));
     setIsStrikeThrough(selection.hasFormat('strikethrough'));
-
-    const node = getSelectedNode(selection);
-    const parent = node.getParent();
-    if ($isLinkNode(parent) || $isLinkNode(node)) {
-      setIsLink(true);
-    } else {
-      setIsLink(false);
-    }
   }, [editor]);
 
-  const insertLink = useCallback(() => {
-    if (!isLink) {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
-    } else {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-    }
-  }, [editor, isLink]);
-
   useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
@@ -144,34 +90,34 @@ const FormatButtons = ({ disabled }: Props): JSX.Element => {
         isSelected: isStrikeThrough,
         onClickFunction: toggleTextFormat('strikethrough'),
         type: 'strikethrough'
-      },
-      {
-        Icon: LinkIcon,
-        isSelected: isLink,
-        onClickFunction: insertLink,
-        type: 'link'
       }
     ],
-    [isBold, isItalic, isUnderline, isStrikeThrough, isLink]
+    [isBold, isItalic, isUnderline, isStrikeThrough]
   );
 
   return (
-    <>
-      {formatButtons.map(({ Icon, onClickFunction, isSelected, type }) => (
-        <IconButton
-          ariaLabel={type}
-          className={cx(isSelected && classes.buttonSelected)}
-          disabled={disabled}
-          key={type}
-          size="medium"
-          title={type}
-          tooltipPlacement="top"
-          onClick={onClickFunction}
-        >
-          <Icon />
-        </IconButton>
-      ))}
-    </>
+    <Menu>
+      <Menu.Button
+        ariaLabel="format"
+        className={classes.button}
+        disabled={disabled}
+      >
+        <FormatTextIcon />
+      </Menu.Button>
+      <Menu.Items className={classes.menuItems}>
+        <div className={classes.menu}>
+          {formatButtons.map(({ Icon, onClickFunction, isSelected, type }) => (
+            <Menu.Item
+              isActive={isSelected}
+              key={type}
+              onClick={onClickFunction}
+            >
+              <Icon aria-label={type} />
+            </Menu.Item>
+          ))}
+        </div>
+      </Menu.Items>
+    </Menu>
   );
 };
 

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

@@ -0,0 +1,106 @@
+import { useCallback, useEffect } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $getSelection,
+  $isRangeSelection,
+  RangeSelection,
+  SELECTION_CHANGE_COMMAND,
+  ElementNode,
+  TextNode
+} from 'lexical';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $isAtNodeEnd } from '@lexical/selection';
+import { mergeRegister } from '@lexical/utils';
+import { useAtom } from 'jotai';
+
+import LinkIcon from '@mui/icons-material/Link';
+
+import { IconButton } from '../../..';
+import { isInsertingLinkAtom } from '../../atoms';
+
+import { useStyles } from './ToolbarPlugin.styles';
+
+const LowPriority = 1;
+
+const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
+  const { anchor } = selection;
+  const { focus } = selection;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  }
+
+  return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+};
+
+interface Props {
+  disabled: boolean;
+}
+
+const LinkButton = ({ disabled }: Props): JSX.Element => {
+  const { classes, cx } = useStyles();
+
+  const [isLink, setIsLink] = useAtom(isInsertingLinkAtom);
+
+  const [editor] = useLexicalComposerContext();
+
+  const updateToolbar = useCallback((): void => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+
+    const node = getSelectedNode(selection);
+    const parent = node.getParent();
+    if ($isLinkNode(parent) || $isLinkNode(node)) {
+      setIsLink(true);
+    } else {
+      setIsLink(false);
+    }
+  }, [editor]);
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateToolbar();
+
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  return (
+    <IconButton
+      ariaLabel="link"
+      className={cx(classes.button, { [classes.buttonSelected]: isLink })}
+      disabled={disabled}
+      key="link"
+      size="medium"
+      title="link"
+      tooltipPlacement="top"
+      onClick={insertLink}
+    >
+      <LinkIcon />
+    </IconButton>
+  );
+};
+
+export default LinkButton;

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

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import {
+  $isListNode,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  ListNode,
+  REMOVE_LIST_COMMAND
+} from '@lexical/list';
+import { $getSelection, $isRootOrShadowRoot } from 'lexical';
+import {
+  $findMatchingParent,
+  $getNearestNodeOfType,
+  mergeRegister
+} from '@lexical/utils';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { equals, isNil } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import UnorderedListIcon from '@mui/icons-material/FormatListBulleted';
+import OrderedListIcon from '@mui/icons-material/FormatListNumbered';
+
+import { Menu } from '../../../components';
+import { labelOrderedList, labelUnorderedList } from '../../translatedLabels';
+
+import { useStyles } from './ToolbarPlugin.styles';
+
+const options = [
+  {
+    Icon: UnorderedListIcon,
+    label: labelUnorderedList,
+    value: 'bullet'
+  },
+  {
+    Icon: OrderedListIcon,
+    label: labelOrderedList,
+    value: 'number'
+  }
+];
+
+interface Props {
+  disabled?: boolean;
+}
+
+const ListButton = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  const [editor] = useLexicalComposerContext();
+
+  const [elementList, setElementList] = useState(null);
+
+  const formatBulletList = (): void => {
+    if (elementList !== 'bullet') {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatNumberedList = (): void => {
+    if (elementList !== 'number') {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatList = (type): void => {
+    if (equals(type, elementList)) {
+      setElementList(null);
+    }
+
+    if (equals(type, 'bullet')) {
+      formatBulletList();
+
+      return;
+    }
+    formatNumberedList();
+  };
+
+  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();
+      setElementList(type);
+    }
+  }, [editor]);
+
+  const selectedList = options.find(({ value }) => equals(value, elementList));
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        updateToolbar();
+      });
+    });
+  }, [editor, updateToolbar]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      })
+    );
+  }, [editor, updateToolbar]);
+
+  return (
+    <Menu>
+      <Menu.Button
+        ariaLabel="list"
+        className={classes.button}
+        disabled={disabled}
+      >
+        {selectedList ? <selectedList.Icon /> : <UnorderedListIcon />}
+      </Menu.Button>
+      <Menu.Items className={classes.menuItems}>
+        <div className={classes.menu}>
+          {options.map(({ Icon, value, label }) => (
+            <Menu.Item
+              isActive={equals(value, elementList)}
+              key={value}
+              onClick={() => formatList(value)}
+            >
+              <Icon aria-label={t(label)} />
+            </Menu.Item>
+          ))}
+        </div>
+      </Menu.Items>
+    </Menu>
+  );
+};
+
+export default ListButton;

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

@@ -1,13 +1,11 @@
-import { useState } from 'react';
-
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { createCommand, LexicalCommand } from 'lexical';
 
 import MacrosIcon from '@mui/icons-material/TerminalOutlined';
 
-import { ActionsList, IconButton, PopoverMenu } from '../../..';
+import { Menu } from '../../../components';
 
-import { useStyles } from '.';
+import { useStyles } from './ToolbarPlugin.styles';
 
 const LowPriority = 1;
 
@@ -27,15 +25,12 @@ export const standardMacros = [
 
 const MacrosButton = ({ disabled }: Props): JSX.Element => {
   const { classes } = useStyles();
-  const [arMacrosDiplayed, setAreMacrosDiplayed] = useState(false);
 
   const [editor] = useLexicalComposerContext();
 
   const INSERT_MACROS_COMMAND: LexicalCommand<string> = createCommand();
 
-  const onClick = (e): void => {
-    const macro = e.target.id || e.target.textContent.trim();
-
+  const onClick = (macro): void => {
     editor.dispatchCommand(INSERT_MACROS_COMMAND, macro);
   };
 
@@ -53,38 +48,27 @@ const MacrosButton = ({ disabled }: Props): JSX.Element => {
     LowPriority
   );
 
-  const displayMacros = (): void => {
-    setAreMacrosDiplayed(true);
-  };
-
-  const actions = standardMacros.map((macro) => ({
-    label: macro,
-    onClick
-  }));
-
   return (
-    <PopoverMenu
-      icon={
-        <IconButton
-          ariaLabel="Macros"
-          className={classes.macrosButton}
-          disabled={disabled}
-          title="Macros"
-          tooltipPlacement="top"
-          onClick={displayMacros}
-        >
-          <MacrosIcon />
-        </IconButton>
-      }
-    >
-      {(): JSX.Element => (
-        <div>
-          {arMacrosDiplayed && (
-            <ActionsList actions={actions} listItemClassName={classes.macros} />
-          )}
-        </div>
-      )}
-    </PopoverMenu>
+    <Menu>
+      <Menu.Button
+        ariaLabel="Macros"
+        className={classes.button}
+        disabled={disabled}
+      >
+        <MacrosIcon />
+      </Menu.Button>
+      <Menu.Items className={classes.menuItems}>
+        {standardMacros.map((name) => (
+          <Menu.Item
+            className={classes.menuItem}
+            key={name}
+            onClick={(): void => onClick(name)}
+          >
+            {name}
+          </Menu.Item>
+        ))}
+      </Menu.Items>
+    </Menu>
   );
 };
 

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

@@ -1,22 +1,32 @@
 import { makeStyles } from 'tss-react/mui';
 
-export const useBlockButtonsStyles = makeStyles()((theme) => ({
-  autocomplete: {
-    width: theme.spacing(17)
-  }
-}));
+import { alpha } from '@mui/system';
 
-export const useAlignPickerStyles = makeStyles()((theme) => ({
+export const useStyles = makeStyles()((theme) => ({
   button: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1)
+    color: theme.palette.text.primary
   },
-  option: {
-    alignItems: 'center',
+  buttonSelected: {
+    backgroundColor: alpha(
+      theme.palette.primary.main,
+      theme.palette.action.activatedOpacity
+    )
+  },
+  menu: {
     display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(2)
+    flexDirection: 'row'
+  },
+  menuItem: {
+    '&, &.MuiMenuItem-root': {
+      fontSize: theme.typography.body2.fontSize
+    }
+  },
+  menuItems: {
+    '& > .MuiPaper-root.MuiMenu-paper': {
+      minWidth: 0
+    },
+    '& ul, & ul.MuiMenu-list': {
+      padding: 0
+    }
   }
 }));

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

@@ -16,6 +16,8 @@ import RedoIcon from '@mui/icons-material/Redo';
 import { IconButton } from '../../..';
 import { labelRedo, labelUndo } from '../../translatedLabels';
 
+import { useStyles } from './ToolbarPlugin.styles';
+
 const LowPriority = 1;
 
 interface Props {
@@ -23,6 +25,8 @@ interface Props {
 }
 
 const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
   const { t } = useTranslation();
 
   const [canUndo, setCanUndo] = useState(false);
@@ -68,6 +72,7 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
     <>
       <IconButton
         ariaLabel={translatedUndo}
+        className={classes.button}
         disabled={!canUndo || disabled}
         title={translatedUndo}
         tooltipPlacement="top"
@@ -77,6 +82,7 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
       </IconButton>
       <IconButton
         ariaLabel={translatedRedo}
+        className={classes.button}
         disabled={!canRedo || disabled}
         title={translatedRedo}
         tooltipPlacement="top"

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

@@ -5,8 +5,10 @@ import { Divider } from '@mui/material';
 import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
 import MacrosButton from './MacrosButton';
-import BlockButtons from './BlockButtons';
 import AlignPicker from './AlignPicker';
+import ListButton from './ListButton';
+import LinkButton from './LinkButton';
+import BlockButtons from './BlockButtons';
 
 interface Props {
   className?: string;
@@ -22,14 +24,6 @@ export const useStyles = makeStyles()((theme) => ({
     columnGap: theme.spacing(1),
     display: 'flex',
     marginBottom: theme.spacing(1)
-  },
-  macros: {
-    '& span': {
-      fontSize: theme.typography.caption.fontSize
-    }
-  },
-  macrosButton: {
-    marginBottom: theme.spacing(0.5)
   }
 }));
 
@@ -51,9 +45,10 @@ const ToolbarPlugin = ({
           <BlockButtons disabled={disabled} />
         </>
       )}
-      <Divider flexItem orientation="vertical" />
       <FormatButtons disabled={disabled} />
       <AlignPicker disabled={disabled} />
+      <ListButton disabled={disabled} />
+      <LinkButton disabled={disabled} />
       {displayMacrosButton && (
         <>
           <Divider flexItem orientation="vertical" />

package/src/RichTextEditor/translatedLabels.ts

@@ -3,3 +3,6 @@ export const labelRedo = 'Redo';
 export const labelInputLink = 'Insert link';
 export const labelSavedLink = 'Saved link';
 export const labelEditLink = 'Edit link';
+export const labelAlignPicker = 'align picker';
+export const labelUnorderedList = 'Unordered List';
+export const labelOrderedList = 'Ordered List';

package/src/components/Menu/Button/MenuButton.tsx

@@ -15,6 +15,7 @@ import { useStyles } from './MenuButton.styles';
 type MenuButtonProps = {
   ariaLabel?: string;
   children?: ReactNode;
+  className?: string;
   hasArrow?: boolean;
   isOpen?: boolean;
   onClick?: (args: { isOpen: boolean }) => void;
@@ -29,9 +30,10 @@ const MenuButton = ({
   size = 'small',
   variant = 'ghost',
   ariaLabel,
+  className,
   ...attr
 }: MenuButtonProps): ReactElement => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
@@ -50,7 +52,7 @@ const MenuButton = ({
     <Button
       {...attr}
       aria-label={ariaLabel}
-      className={classes.menuButton}
+      className={cx(classes.menuButton, className)}
       data-is-active={isMenuOpen}
       size={size}
       variant={variant}

package/src/components/Menu/MenuItem.tsx

@@ -6,6 +6,7 @@ import { useStyles } from './Menu.styles';
 
 type MenuItemProps = {
   children?: ReactNode;
+  className?: string;
   isActive?: boolean;
   isDisabled?: boolean;
   onClick?: () => void;
@@ -15,13 +16,14 @@ const MenuItem = ({
   children,
   onClick,
   isActive = false,
-  isDisabled = false
+  isDisabled = false,
+  className
 }: MenuItemProps): ReactElement => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   return (
     <MuiMenuItem
-      className={classes.menuItem}
+      className={cx(classes.menuItem, className)}
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}

package/src/components/Menu/MenuItems.tsx

@@ -7,9 +7,10 @@ import { useMenu } from './useMenu';
 
 type MenuItemsProps = {
   children?: ReactNode | Array<ReactNode>;
+  className?: string;
 };
-const MenuItems = ({ children }: MenuItemsProps): ReactElement => {
-  const { classes } = useStyles();
+const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
+  const { cx, classes } = useStyles();
 
   const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
 
@@ -21,7 +22,7 @@ const MenuItems = ({ children }: MenuItemsProps): ReactElement => {
   return (
     <MuiMenu
       anchorEl={anchorEl}
-      className={classes.menuItems}
+      className={cx(classes.menuItems, className)}
       open={isMenuOpen}
       variant="menu"
       onClick={onCloseMenu}