@centreon/ui 24.5.12 → 24.5.13

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

@@ -1,77 +1,38 @@
 import { useState, useCallback, useEffect, useMemo } from 'react';
 
-import { makeStyles } from 'tss-react/mui';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import {
   $getSelection,
   $isRangeSelection,
-  EditorState,
   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 {
-  getEditorState?: (editorState: EditorState) => void;
+  disabled: boolean;
 }
 
-const FormatButtons = ({ getEditorState }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
+const FormatButtons = ({ disabled }: Props): JSX.Element => {
+  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();
 
@@ -84,33 +45,10 @@ const FormatButtons = ({ getEditorState }: 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.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-
-        getEditorState?.(editorState);
-      }),
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         () => {
@@ -152,33 +90,34 @@ const FormatButtons = ({ getEditorState }: 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)}
-          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

@@ -0,0 +1,75 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { createCommand, LexicalCommand } from 'lexical';
+
+import MacrosIcon from '@mui/icons-material/TerminalOutlined';
+
+import { Menu } from '../../../components';
+
+import { useStyles } from './ToolbarPlugin.styles';
+
+const LowPriority = 1;
+
+interface Props {
+  disabled: boolean;
+}
+
+export const standardMacros = [
+  '{{SHORTDATETIME}}',
+  '{{LONGDATETIME}}',
+  '{{ALIAS}}',
+  '{{ID}}',
+  '{{NAME}}',
+  '{{OUTPUT}}',
+  '{{STATE}}'
+];
+
+const MacrosButton = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const [editor] = useLexicalComposerContext();
+
+  const INSERT_MACROS_COMMAND: LexicalCommand<string> = createCommand();
+
+  const onClick = (macro): void => {
+    editor.dispatchCommand(INSERT_MACROS_COMMAND, macro);
+  };
+
+  editor.registerCommand(
+    INSERT_MACROS_COMMAND,
+    (payload: string) => {
+      if (!editor) {
+        return false;
+      }
+
+      document.execCommand('insertText', false, payload);
+
+      return true;
+    },
+    LowPriority
+  );
+
+  return (
+    <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>
+  );
+};
+
+export default MacrosButton;

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

@@ -0,0 +1,32 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { alpha } from '@mui/system';
+
+export const useStyles = makeStyles()((theme) => ({
+  button: {
+    color: theme.palette.text.primary
+  },
+  buttonSelected: {
+    backgroundColor: alpha(
+      theme.palette.primary.main,
+      theme.palette.action.activatedOpacity
+    )
+  },
+  menu: {
+    display: 'flex',
+    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,9 +16,17 @@ import RedoIcon from '@mui/icons-material/Redo';
 import { IconButton } from '../../..';
 import { labelRedo, labelUndo } from '../../translatedLabels';
 
+import { useStyles } from './ToolbarPlugin.styles';
+
 const LowPriority = 1;
 
-const UndoRedoButtons = (): JSX.Element => {
+interface Props {
+  disabled: boolean;
+}
+
+const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
   const { t } = useTranslation();
 
   const [canUndo, setCanUndo] = useState(false);
@@ -64,7 +72,8 @@ const UndoRedoButtons = (): JSX.Element => {
     <>
       <IconButton
         ariaLabel={translatedUndo}
-        disabled={!canUndo}
+        className={classes.button}
+        disabled={!canUndo || disabled}
         title={translatedUndo}
         tooltipPlacement="top"
         onClick={undo}
@@ -73,7 +82,8 @@ const UndoRedoButtons = (): JSX.Element => {
       </IconButton>
       <IconButton
         ariaLabel={translatedRedo}
-        disabled={!canRedo}
+        className={classes.button}
+        disabled={!canRedo || disabled}
         title={translatedRedo}
         tooltipPlacement="top"
         onClick={redo}

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

@@ -1,18 +1,26 @@
-import { EditorState } from 'lexical';
 import { makeStyles } from 'tss-react/mui';
 
 import { Divider } from '@mui/material';
 
 import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
+import MacrosButton from './MacrosButton';
+import AlignPicker from './AlignPicker';
+import ListButton from './ListButton';
+import LinkButton from './LinkButton';
+import BlockButtons from './BlockButtons';
 
 interface Props {
+  className?: string;
+  disabled: boolean;
+  displayBlockButtons: boolean;
+  displayMacrosButton?: boolean;
   editable: boolean;
-  getEditorState?: (editorState: EditorState) => void;
 }
 
-const useStyles = makeStyles()((theme) => ({
+export const useStyles = makeStyles()((theme) => ({
   container: {
+    alignItems: 'center',
     columnGap: theme.spacing(1),
     display: 'flex',
     marginBottom: theme.spacing(1)
@@ -20,16 +28,33 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const ToolbarPlugin = ({
-  getEditorState,
-  editable
+  editable,
+  displayMacrosButton,
+  disabled,
+  displayBlockButtons,
+  className
 }: Props): JSX.Element | null => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   return editable ? (
-    <div className={classes.container}>
-      <UndoRedoButtons />
-      <Divider flexItem orientation="vertical" />
-      <FormatButtons getEditorState={getEditorState} />
+    <div className={cx(classes.container, className)}>
+      <UndoRedoButtons disabled={disabled} />
+      {displayBlockButtons && (
+        <>
+          <Divider flexItem orientation="vertical" />
+          <BlockButtons disabled={disabled} />
+        </>
+      )}
+      <FormatButtons disabled={disabled} />
+      <AlignPicker disabled={disabled} />
+      <ListButton disabled={disabled} />
+      <LinkButton disabled={disabled} />
+      {displayMacrosButton && (
+        <>
+          <Divider flexItem orientation="vertical" />
+          <MacrosButton disabled={disabled} />
+        </>
+      )}
     </div>
   ) : null;
 };

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';