@centreon/ui 23.10.109 → 23.10.110

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

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

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

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import {
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  ElementFormatType,
+  FORMAT_ELEMENT_COMMAND
+} from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { equals } from 'ramda';
+
+import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
+import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { SvgIconTypeMap } from '@mui/material';
+
+import { Menu } from '../../../components';
+import { getSelectedNode } from '../../utils/getSelectedNode';
+
+import { useAlignPickerStyles } from './ToolbarPlugin.styles';
+
+const formatOptions: Array<{
+  Icon: OverridableComponent<SvgIconTypeMap<object, 'svg'>>;
+  label: string;
+  value: ElementFormatType;
+}> = [
+  {
+    Icon: FormatAlignLeftIcon,
+    label: 'Left',
+    value: 'left'
+  },
+  {
+    Icon: FormatAlignCenterIcon,
+    label: 'Center',
+    value: 'center'
+  },
+  {
+    Icon: FormatAlignRightIcon,
+    label: 'Right',
+    value: 'right'
+  }
+];
+
+interface Props {
+  disabled: boolean;
+}
+
+const AlignPicker = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useAlignPickerStyles();
+
+  const [elementFormat, setElementFormat] = useState<ElementFormatType>('left');
+
+  const [editor] = useLexicalComposerContext();
+
+  const dispatchAlignment = (alignment: ElementFormatType) => () => {
+    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment);
+  };
+
+  const updateElementFormat = useCallback(() => {
+    const selection = $getSelection();
+
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+
+    const node = getSelectedNode(selection);
+    const parent = node.getParent();
+
+    setElementFormat(
+      ($isElementNode(node) ? node.getFormatType() : parent?.getFormatType()) ||
+        'left'
+    );
+  }, [editor]);
+
+  const selectedFormat = formatOptions.find(({ value }) =>
+    equals(value, elementFormat)
+  );
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        updateElementFormat();
+      });
+    });
+  }, [editor, updateElementFormat]);
+
+  return (
+    <Menu>
+      <Menu.Button ariaLabel={elementFormat} disabled={disabled}>
+        {selectedFormat && (
+          <div className={classes.button}>
+            <selectedFormat.Icon /> {selectedFormat.label}
+          </div>
+        )}
+      </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>
+    </Menu>
+  );
+};
+
+export default AlignPicker;

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

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

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

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

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

@@ -0,0 +1,91 @@
+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 { useStyles } from '.';
+
+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 [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();
+
+    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
+  );
+
+  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>
+  );
+};
+
+export default MacrosButton;