@centreon/ui 24.9.4 → 24.9.6

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

@@ -1,124 +1,185 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { mergeRegister } from '@lexical/utils';
-import {
-  $getSelection,
-  $isRangeSelection,
-  FORMAT_TEXT_COMMAND,
-  SELECTION_CHANGE_COMMAND,
-  TextFormatType
-} from 'lexical';
-
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-import FormatTextIcon from '@mui/icons-material/FormatColorText';
-import FormatItalicIcon from '@mui/icons-material/FormatItalic';
-import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
-import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
-
-import { Menu } from '../../../components';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-const LowPriority = 1;
-
-interface Props {
-  disabled: boolean;
-}
-
-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 [editor] = useLexicalComposerContext();
-
-  const updateToolbar = useCallback((): void => {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) {
-      return;
-    }
-    setIsBold(selection.hasFormat('bold'));
-    setIsItalic(selection.hasFormat('italic'));
-    setIsUnderline(selection.hasFormat('underline'));
-    setIsStrikeThrough(selection.hasFormat('strikethrough'));
-  }, [editor]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        () => {
-          updateToolbar();
-
-          return false;
-        },
-        LowPriority
-      )
-    );
-  }, [editor, updateToolbar]);
-
-  const toggleTextFormat = (textFormat: TextFormatType) => (): void => {
-    editor.dispatchCommand(FORMAT_TEXT_COMMAND, textFormat);
-  };
-
-  const formatButtons = useMemo(
-    () => [
-      {
-        Icon: FormatBoldIcon,
-        isSelected: isBold,
-        onClickFunction: toggleTextFormat('bold'),
-        type: 'bold'
-      },
-      {
-        Icon: FormatItalicIcon,
-        isSelected: isItalic,
-        onClickFunction: toggleTextFormat('italic'),
-        type: 'italic'
-      },
-      {
-        Icon: FormatUnderlinedIcon,
-        isSelected: isUnderline,
-        onClickFunction: toggleTextFormat('underline'),
-        type: 'underline'
-      },
-      {
-        Icon: StrikethroughSIcon,
-        isSelected: isStrikeThrough,
-        onClickFunction: toggleTextFormat('strikethrough'),
-        type: 'strikethrough'
-      }
-    ],
-    [isBold, isItalic, isUnderline, isStrikeThrough]
-  );
-
-  return (
-    <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>
-  );
-};
-
-export default FormatButtons;
+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
+} 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 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';
+
+const LowPriority = 1;
+
+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;
+};
+
+interface Props {
+  getEditorState?: (editorState: EditorState) => void;
+}
+
+const FormatButtons = ({ getEditorState }: Props): JSX.Element => {
+  const { classes, cx } = 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();
+
+  const updateToolbar = useCallback((): void => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+    setIsBold(selection.hasFormat('bold'));
+    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,
+        () => {
+          updateToolbar();
+
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  const toggleTextFormat = (textFormat: TextFormatType) => (): void => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, textFormat);
+  };
+
+  const formatButtons = useMemo(
+    () => [
+      {
+        Icon: FormatBoldIcon,
+        isSelected: isBold,
+        onClickFunction: toggleTextFormat('bold'),
+        type: 'bold'
+      },
+      {
+        Icon: FormatItalicIcon,
+        isSelected: isItalic,
+        onClickFunction: toggleTextFormat('italic'),
+        type: 'italic'
+      },
+      {
+        Icon: FormatUnderlinedIcon,
+        isSelected: isUnderline,
+        onClickFunction: toggleTextFormat('underline'),
+        type: 'underline'
+      },
+      {
+        Icon: StrikethroughSIcon,
+        isSelected: isStrikeThrough,
+        onClickFunction: toggleTextFormat('strikethrough'),
+        type: 'strikethrough'
+      },
+      {
+        Icon: LinkIcon,
+        isSelected: isLink,
+        onClickFunction: insertLink,
+        type: 'link'
+      }
+    ],
+    [isBold, isItalic, isUnderline, isStrikeThrough, isLink]
+  );
+
+  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>
+      ))}
+    </>
+  );
+};
+
+export default FormatButtons;

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

@@ -1,97 +1,87 @@
-import { useEffect, useState } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { mergeRegister } from '@lexical/utils';
-import {
-  CAN_REDO_COMMAND,
-  CAN_UNDO_COMMAND,
-  REDO_COMMAND,
-  UNDO_COMMAND
-} from 'lexical';
-import { useTranslation } from 'react-i18next';
-
-import RedoIcon from '@mui/icons-material/Redo';
-import UndoIcon from '@mui/icons-material/Undo';
-
-import { IconButton } from '../../..';
-import { labelRedo, labelUndo } from '../../translatedLabels';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-const LowPriority = 1;
-
-interface Props {
-  disabled: boolean;
-}
-
-const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const { t } = useTranslation();
-
-  const [canUndo, setCanUndo] = useState(false);
-  const [canRedo, setCanRedo] = useState(false);
-
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand(
-        CAN_UNDO_COMMAND,
-        (payload) => {
-          setCanUndo(payload);
-
-          return false;
-        },
-        LowPriority
-      ),
-      editor.registerCommand(
-        CAN_REDO_COMMAND,
-        (payload) => {
-          setCanRedo(payload);
-
-          return false;
-        },
-        LowPriority
-      )
-    );
-  }, []);
-
-  const undo = (): void => {
-    editor.dispatchCommand(UNDO_COMMAND, undefined);
-  };
-
-  const redo = (): void => {
-    editor.dispatchCommand(REDO_COMMAND, undefined);
-  };
-
-  const translatedUndo = t(labelUndo);
-  const translatedRedo = t(labelRedo);
-
-  return (
-    <>
-      <IconButton
-        ariaLabel={translatedUndo}
-        className={classes.button}
-        disabled={!canUndo || disabled}
-        title={translatedUndo}
-        tooltipPlacement="top"
-        onClick={undo}
-      >
-        <UndoIcon />
-      </IconButton>
-      <IconButton
-        ariaLabel={translatedRedo}
-        className={classes.button}
-        disabled={!canRedo || disabled}
-        title={translatedRedo}
-        tooltipPlacement="top"
-        onClick={redo}
-      >
-        <RedoIcon />
-      </IconButton>
-    </>
-  );
-};
-
-export default UndoRedoButtons;
+import { useEffect, useState } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  UNDO_COMMAND,
+  REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  CAN_REDO_COMMAND
+} from 'lexical';
+import { mergeRegister } from '@lexical/utils';
+import { useTranslation } from 'react-i18next';
+
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+
+import { IconButton } from '../../..';
+import { labelRedo, labelUndo } from '../../translatedLabels';
+
+const LowPriority = 1;
+
+const UndoRedoButtons = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        CAN_UNDO_COMMAND,
+        (payload) => {
+          setCanUndo(payload);
+
+          return false;
+        },
+        LowPriority
+      ),
+      editor.registerCommand(
+        CAN_REDO_COMMAND,
+        (payload) => {
+          setCanRedo(payload);
+
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, []);
+
+  const undo = (): void => {
+    editor.dispatchCommand(UNDO_COMMAND, undefined);
+  };
+
+  const redo = (): void => {
+    editor.dispatchCommand(REDO_COMMAND, undefined);
+  };
+
+  const translatedUndo = t(labelUndo);
+  const translatedRedo = t(labelRedo);
+
+  return (
+    <>
+      <IconButton
+        ariaLabel={translatedUndo}
+        disabled={!canUndo}
+        title={translatedUndo}
+        tooltipPlacement="top"
+        onClick={undo}
+      >
+        <UndoIcon />
+      </IconButton>
+      <IconButton
+        ariaLabel={translatedRedo}
+        disabled={!canRedo}
+        title={translatedRedo}
+        tooltipPlacement="top"
+        onClick={redo}
+      >
+        <RedoIcon />
+      </IconButton>
+    </>
+  );
+};
+
+export default UndoRedoButtons;

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

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

package/src/RichTextEditor/translatedLabels.ts

@@ -1,8 +1,5 @@
-export const labelUndo = 'Undo';
-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';
+export const labelUndo = 'Undo';
+export const labelRedo = 'Redo';
+export const labelInputLink = 'Insert link';
+export const labelSavedLink = 'Saved link';
+export const labelEditLink = 'Edit link';

package/src/Snackbar/SnackbarProvider.tsx

@@ -1,12 +1,13 @@
+import * as React from 'react';
+
 import { SnackbarProvider as NotistackSnackbarProvider } from 'notistack';
 
 import { TransitionProps } from '@mui/material/transitions';
 
-import { JSXElementConstructor, ReactElement } from 'react';
 import Transition from './Transition';
 
 interface Props {
-  children: ReactElement;
+  children: React.ReactElement;
   maxSnackbars?: number;
 }
 
@@ -17,7 +18,7 @@ const SnackbarProvider = ({
   return (
     <NotistackSnackbarProvider
       TransitionComponent={
-        Transition as JSXElementConstructor<
+        Transition as React.JSXElementConstructor<
           TransitionProps & {
             children;
           }

package/src/Snackbar/Transition.tsx

@@ -1,10 +1,11 @@
+import * as React from 'react';
+
 import {
-  TransitionActions,
-  TransitionProps as _TransitionProps
+  TransitionProps as _TransitionProps,
+  TransitionActions
 } from 'react-transition-group/Transition';
 
 import { Fade } from '@mui/material';
-import { CSSProperties, ReactNode } from 'react';
 
 type TransitionHandlerKeys =
   | 'onEnter'
@@ -23,11 +24,11 @@ type TransitionKeys =
 interface TransitionProps
   extends TransitionActions,
     Partial<Pick<_TransitionProps, TransitionKeys>> {
-  style?: CSSProperties;
+  style?: React.CSSProperties;
 }
 
 interface Props extends TransitionProps {
-  children?: ReactNode;
+  children?: React.ReactNode;
 }
 
 const Transition = ({ children, ...rest }: Props): JSX.Element => (