@centreon/ui 24.7.2 → 24.7.4

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

@@ -1,11 +1,4 @@
-import { useEffect, useState } from 'react';
-
-import {
-  AutoLinkPlugin,
-  LinkMatcher
-} from '@lexical/react/LexicalAutoLinkPlugin';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical';
+import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
 
 interface LinkAttributes {
   rel?: null | string;
@@ -26,15 +19,13 @@ 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 getMatchers = (openLinkInNewTab: boolean): Array<LinkMatcher> => [
+const MATCHERS = [
   (text: string): LinkMatcherResult | null => {
     const match = URL_MATCHER.exec(text);
 
     return (
       match && {
-        attributes: openLinkInNewTab
-          ? { rel: 'noreferrer', target: '_blank' }
-          : undefined,
+        attributes: { rel: 'noreferrer', target: '_blank' },
         index: match.index,
         length: match[0].length,
         text: match[0],
@@ -56,47 +47,8 @@ const getMatchers = (openLinkInNewTab: boolean): Array<LinkMatcher> => [
   }
 ];
 
-const AutoCompleteLinkPlugin = ({
-  openLinkInNewTab
-}: {
-  openLinkInNewTab: boolean;
-}): JSX.Element | null => {
-  const [editor] = useLexicalComposerContext();
-  const [hasFocus, setFocus] = useState(false);
-
-  useEffect(
-    () =>
-      editor.registerCommand(
-        BLUR_COMMAND,
-        () => {
-          setFocus(false);
-
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-    []
-  );
-
-  useEffect(
-    () =>
-      editor.registerCommand(
-        FOCUS_COMMAND,
-        () => {
-          setFocus(true);
-
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-    []
-  );
-
-  if (!hasFocus) {
-    return null;
-  }
-
-  return <AutoLinkPlugin matchers={getMatchers(openLinkInNewTab)} />;
+const AutoCompleteLinkPlugin = (): JSX.Element => {
+  return <AutoLinkPlugin matchers={MATCHERS} />;
 };
 
 export default AutoCompleteLinkPlugin;

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -11,7 +11,7 @@ import { mergeRegister } from '@lexical/utils';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useTranslation } from 'react-i18next';
-import { dec, equals, gt, isNil, replace } from 'ramda';
+import { equals, isNil } from 'ramda';
 
 import { Popper, IconButton, Paper, Link, Box } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
@@ -28,7 +28,6 @@ import {
 
 interface FloatingLinkEditorPluginProps {
   editable: boolean;
-  openLinkInNewTab: boolean;
 }
 
 interface UseFloatingLinkEditorProps extends FloatingLinkEditorPluginProps {
@@ -37,7 +36,6 @@ interface UseFloatingLinkEditorProps extends FloatingLinkEditorPluginProps {
 
 interface FloatingLinkEditorProps {
   editor: LexicalEditor;
-  openLinkInNewTab: boolean;
 }
 
 interface TooltipPosition {
@@ -46,8 +44,7 @@ interface TooltipPosition {
 }
 
 const FloatingLinkEditor = ({
-  editor,
-  openLinkInNewTab
+  editor
 }: FloatingLinkEditorProps): JSX.Element | null => {
   const nativeSelection = window.getSelection();
   const rootElement = editor.getRootElement();
@@ -56,7 +53,6 @@ const FloatingLinkEditor = ({
     x: 0,
     y: 0
   });
-  const [editedUrl, setEditedUrl] = useState('');
 
   const [editMode, setEditMode] = useAtom(editLinkModeAtom);
   const [linkUrl, setLinkUrl] = useAtom(linkValueAtom);
@@ -66,47 +62,24 @@ const FloatingLinkEditor = ({
   const acceptOrCancelNewLinkValue = useCallback(
     (event): void => {
       const { value } = event.target;
-
-      event.preventDefault();
-
       if (event.key === 'Enter') {
+        event.preventDefault();
+
         if (value !== '') {
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
-            target: openLinkInNewTab ? '_blank' : undefined,
+            target: '_blank',
             url: value
           });
         }
         setEditMode(false);
-      }
-
-      if (event.key === 'Escape') {
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
         setEditMode(false);
       }
     },
     [setEditMode, setLinkUrl]
   );
 
-  const enterInEditMode = useCallback(() => {
-    setEditedUrl(linkUrl);
-    setEditMode(true);
-  }, [linkUrl]);
-
-  const changeValue = useCallback((event): void => {
-    const { value } = event.target;
-
-    const matched = value.match(/https?:\/\//g);
-
-    if (gt(matched.length, 1)) {
-      setEditedUrl(
-        replace(matched.join(''), matched[dec(matched.length)], value)
-      );
-
-      return;
-    }
-
-    setEditedUrl(value);
-  }, []);
-
   useEffect(() => {
     const isPositioned =
       rangeRect && (!equals(rangeRect.x, 0) || !equals(rangeRect.y, 0));
@@ -133,12 +106,7 @@ const FloatingLinkEditor = ({
   const yOffset = tooltipPosition.y - rootElementY + 30;
 
   return (
-    <Popper
-      open
-      anchorEl={rootElement}
-      placement="top-start"
-      sx={{ zIndex: 'tooltip' }}
-    >
+    <Popper open anchorEl={rootElement} placement="top-start">
       <Paper
         sx={{
           transform: `translate3d(${xOffset}px, ${
@@ -149,10 +117,9 @@ const FloatingLinkEditor = ({
         {editMode ? (
           <InputField
             autoFocus
-            dataTestId="InputLinkField"
+            defaultValue={linkUrl}
             label={t(labelInputLink)}
             size="small"
-            value={editedUrl}
             onBlur={(event): void => {
               const { value } = event.target;
 
@@ -163,8 +130,7 @@ const FloatingLinkEditor = ({
               }
               setEditMode(false);
             }}
-            onChange={changeValue}
-            onKeyUp={acceptOrCancelNewLinkValue}
+            onKeyDown={acceptOrCancelNewLinkValue}
           />
         ) : (
           <Box component="span" sx={{ margin: '10px' }}>
@@ -172,7 +138,7 @@ const FloatingLinkEditor = ({
               aria-label={labelSavedLink}
               href={linkUrl}
               rel="noreferrer noopener"
-              target={openLinkInNewTab ? '_blank' : undefined}
+              target="_blank"
               variant="button"
             >
               {linkUrl}
@@ -181,7 +147,7 @@ const FloatingLinkEditor = ({
               aria-label={labelEditLink}
               size="small"
               sx={{ marginLeft: '5px' }}
-              onClick={enterInEditMode}
+              onClick={(): void => setEditMode(true)}
             >
               <EditIcon fontSize="small" />
             </IconButton>
@@ -194,8 +160,7 @@ const FloatingLinkEditor = ({
 
 const useFloatingTextFormatToolbar = ({
   editor,
-  editable,
-  openLinkInNewTab
+  editable
 }: UseFloatingLinkEditorProps): JSX.Element | null => {
   const [isText, setIsText] = useState(false);
   const isInsertingLink = useAtomValue(isInsertingLinkAtom);
@@ -270,18 +235,15 @@ const useFloatingTextFormatToolbar = ({
     return null;
   }
 
-  return (
-    <FloatingLinkEditor editor={editor} openLinkInNewTab={openLinkInNewTab} />
-  );
+  return <FloatingLinkEditor editor={editor} />;
 };
 
 const FloatingActionsToolbarPlugin = ({
-  editable,
-  openLinkInNewTab
+  editable
 }: FloatingLinkEditorPluginProps): JSX.Element | null => {
   const [editor] = useLexicalComposerContext();
 
-  return useFloatingTextFormatToolbar({ editable, editor, openLinkInNewTab });
+  return useFloatingTextFormatToolbar({ editable, editor });
 };
 
 export default FloatingActionsToolbarPlugin;

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

@@ -1,38 +1,77 @@
 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
+  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 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 { Menu } from '../../../components';
-
-import { useStyles } from './ToolbarPlugin.styles';
+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 {
-  disabled: boolean;
+  getEditorState?: (editorState: EditorState) => void;
 }
 
-const FormatButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
+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();
 
@@ -45,10 +84,33 @@ 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.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+
+        getEditorState?.(editorState);
+      }),
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         () => {
@@ -90,34 +152,33 @@ 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]
+    [isBold, isItalic, isUnderline, isStrikeThrough, isLink]
   );
 
   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>
+    <>
+      {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>
+      ))}
+    </>
   );
 };
 

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

@@ -16,17 +16,9 @@ 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 {
-  disabled: boolean;
-}
-
-const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
+const UndoRedoButtons = (): JSX.Element => {
   const { t } = useTranslation();
 
   const [canUndo, setCanUndo] = useState(false);
@@ -72,8 +64,7 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
     <>
       <IconButton
         ariaLabel={translatedUndo}
-        className={classes.button}
-        disabled={!canUndo || disabled}
+        disabled={!canUndo}
         title={translatedUndo}
         tooltipPlacement="top"
         onClick={undo}
@@ -82,8 +73,7 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
       </IconButton>
       <IconButton
         ariaLabel={translatedRedo}
-        className={classes.button}
-        disabled={!canRedo || disabled}
+        disabled={!canRedo}
         title={translatedRedo}
         tooltipPlacement="top"
         onClick={redo}

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

@@ -1,26 +1,18 @@
+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;
 }
 
-export const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()((theme) => ({
   container: {
-    alignItems: 'center',
     columnGap: theme.spacing(1),
     display: 'flex',
     marginBottom: theme.spacing(1)
@@ -28,33 +20,16 @@ export const useStyles = makeStyles()((theme) => ({
 }));
 
 const ToolbarPlugin = ({
-  editable,
-  displayMacrosButton,
-  disabled,
-  displayBlockButtons,
-  className
+  getEditorState,
+  editable
 }: Props): JSX.Element | null => {
-  const { cx, classes } = useStyles();
+  const { 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 className={classes.container}>
+      <UndoRedoButtons />
+      <Divider flexItem orientation="vertical" />
+      <FormatButtons getEditorState={getEditorState} />
     </div>
   ) : null;
 };

package/src/RichTextEditor/translatedLabels.ts

@@ -3,6 +3,3 @@ 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/Snackbar/index.tsx

@@ -7,28 +7,22 @@ import { makeStyles } from 'tss-react/mui';
 import { IconButton, Alert } from '@mui/material';
 import IconClose from '@mui/icons-material/Close';
 
-import { sanitizedHTML } from '../utils';
-
 import Severity from './Severity';
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()({
   alertIcon: {
-    paddingTop: theme.spacing(1.25)
+    paddingTop: '10px'
   },
   closeIcon: {
     fontSize: 20,
     opacity: 0.9
   },
   message: {
-    '& a': {
-      color: theme.palette.primary.main,
-      textDecoration: 'none'
-    },
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center'
   }
-}));
+});
 
 export interface SnackbarProps {
   id: string | number;
@@ -57,10 +51,6 @@ const Snackbar = React.forwardRef(
       }
       closeSnackbar(id);
     };
-    const sanitizedMessage = sanitizedHTML({ initialContent: message });
-
-    const formatedMessage =
-      typeof message === 'string' ? <div>{sanitizedMessage}</div> : message;
 
     return (
       <SnackbarContent ref={ref}>
@@ -79,7 +69,7 @@ const Snackbar = React.forwardRef(
           severity={severity}
           variant="filled"
         >
-          {formatedMessage}
+          {message}
         </Alert>
       </SnackbarContent>
     );

package/src/Snackbar/useSnackbar.tsx

@@ -2,8 +2,6 @@ import { useSnackbar as useNotistackSnackbar } from 'notistack';
 
 import { Typography } from '@mui/material';
 
-import { sanitizedHTML } from '../utils';
-
 import Severity from './Severity';
 
 import Snackbar from '.';
@@ -61,9 +59,7 @@ const useSnackbar = (): UseSnackbar => {
         <div>
           {formattedMessages.map((errorMessage, index) => (
             <Typography key={messageKeys[index]} variant="body2">
-              {sanitizedHTML({
-                initialContent: errorMessage
-              })}
+              {errorMessage}
             </Typography>
           ))}
         </div>

package/src/SortableItems/SortableItem.tsx

@@ -2,7 +2,7 @@ import { props } from 'ramda';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import Item from './Item';
 
@@ -56,8 +56,7 @@ const SortableItem = ({
       transform,
       props(itemProps, rest),
       ...memoProps,
-      ...additionalProps,
-      ...Object.values(rest)
+      ...additionalProps
     ]
   });
 };

package/src/SortableItems/index.tsx

@@ -15,7 +15,11 @@ import {
   DragEndEvent,
   Over
 } from '@dnd-kit/core';
-import { SortableContext, SortingStrategy } from '@dnd-kit/sortable';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  SortingStrategy
+} from '@dnd-kit/sortable';
 import {
   equals,
   find,
@@ -113,6 +117,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     useSensor(MouseSensor),
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
       keyboardCodes: {
         cancel: ['Escape'],
         end: ['Space', 'Enter'],
@@ -164,7 +169,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
   };
 
   const getItemById = (id): T | undefined =>
-    find(propEq(id, propertyToFilterItemsOn), items);
+    find(propEq(propertyToFilterItemsOn, id), items);
 
   const activeItem = getItemById(activeId) as Record<string, unknown>;