@centreon/ui 24.4.21 → 24.4.22

package/src/RichTextEditor/RichTextEditor.tsx

@@ -3,10 +3,18 @@ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { HeadingNode } from '@lexical/rich-text';
+import { ListItemNode, ListNode } from '@lexical/list';
 import anylogger from 'anylogger';
 import { makeStyles } from 'tss-react/mui';
-import { EditorState } from 'lexical';
+import { EditorState, LexicalEditor } from 'lexical';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { equals } from 'ramda';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { $generateHtmlFromNodes } from '@lexical/html';
+
+import { Typography } from '@mui/material';
 
 import ContentEditable from './ContentEditable';
 import ToolbarPlugin from './plugins/ToolbarPlugin/index';
@@ -14,15 +22,26 @@ import AutoCompleteLinkPlugin from './plugins/AutoLinkPlugin/index';
 import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 
 export interface RichTextEditorProps {
+  contentClassName?: string;
+  disabled?: boolean;
+  displayBlockButtons?: boolean;
+  displayMacrosButton?: boolean;
   editable: boolean;
   editorState?: string;
-  getEditorState?: (editorState: EditorState) => void;
+  error?: string;
+  getEditorState?: (editorState: EditorState, editor: LexicalEditor) => void;
   initialEditorState?: string;
+  initialize?: (editor) => void;
   inputClassname?: string;
   minInputHeight?: number;
   namespace?: string;
+  onBlur?: (e: string) => void;
+  openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
+  setHtmlString?: (htmlString: string) => void;
+  toolbarClassName?: string;
+  toolbarPositions?: 'start' | 'end';
 }
 
 const log = anylogger('Rich text editor');
@@ -31,26 +50,81 @@ const onError = (error: Error): void => {
   log.error(error.message);
 };
 
-const useStyles = makeStyles()((theme) => ({
-  bold: {
-    fontWeight: theme.typography.fontWeightBold
-  },
-  italic: {
-    fontStyle: 'italic'
-  },
-  link: {
-    color: theme.palette.primary.main
-  },
-  strikethough: {
-    textDecoration: 'line-through'
-  },
-  underline: {
-    textDecoration: 'underline'
-  },
-  underlineStrikethrough: {
-    textDecoration: 'underline line-through'
-  }
-}));
+const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
+  (theme, { toolbarPositions }) => ({
+    bold: {
+      fontWeight: theme.typography.fontWeightBold
+    },
+    container: equals(toolbarPositions, 'end')
+      ? {
+          display: 'flex',
+          flexDirection: 'column-reverse'
+        }
+      : {},
+    error: {
+      color: theme.palette.error.main,
+      fontSize: theme.spacing(1.5),
+      fontWeight: '200',
+      paddingLeft: theme.spacing(1.5),
+      paddingTop: theme.spacing(0.5)
+    },
+    h1: {
+      fontSize: theme.typography.h1.fontSize,
+      fontWeight: theme.typography.h1.fontWeight,
+      lineHeight: theme.typography.h1.lineHeight
+    },
+    h2: {
+      fontSize: theme.typography.h2.fontSize,
+      fontWeight: theme.typography.h2.fontWeight,
+      lineHeight: theme.typography.h2.lineHeight
+    },
+    h3: {
+      fontSize: theme.typography.h3.fontSize,
+      fontWeight: theme.typography.h3.fontWeight,
+      lineHeight: theme.typography.h3.lineHeight
+    },
+    h4: {
+      fontSize: theme.typography.h4.fontSize,
+      fontWeight: theme.typography.h4.fontWeight,
+      lineHeight: theme.typography.h4.lineHeight
+    },
+    h5: {
+      fontSize: theme.typography.h5.fontSize,
+      fontWeight: theme.typography.h5.fontWeight,
+      lineHeight: theme.typography.h5.lineHeight
+    },
+    h6: {
+      fontSize: theme.typography.body2.fontSize,
+      fontWeight: theme.typography.body2.fontWeight,
+      lineHeight: theme.typography.body2.lineHeight
+    },
+    italic: {
+      fontStyle: 'italic'
+    },
+    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'
+    },
+    toolbar: equals(toolbarPositions, 'end')
+      ? {
+          marginTop: theme.spacing(0.5)
+        }
+      : {},
+    underline: {
+      textDecoration: 'underline'
+    },
+    underlineStrikethrough: {
+      textDecoration: 'underline line-through'
+    }
+  })
+);
 
 const RichTextEditor = ({
   namespace = 'RichTextEditor',
@@ -61,9 +135,20 @@ const RichTextEditor = ({
   initialEditorState,
   editable = true,
   editorState,
-  resetEditorToInitialStateCondition
+  resetEditorToInitialStateCondition,
+  toolbarPositions = 'start',
+  error,
+  onBlur,
+  contentClassName,
+  displayMacrosButton = false,
+  disabled = false,
+  openLinkInNewTab = true,
+  initialize,
+  displayBlockButtons = true,
+  setHtmlString,
+  toolbarClassName
 }: RichTextEditorProps): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes } = useStyles({ toolbarPositions });
 
   const hasInitialTextContent = initialEditorState
     ? JSON.parse(initialEditorState).root?.children.length > 0
@@ -73,46 +158,86 @@ const RichTextEditor = ({
     editable,
     editorState: initialEditorState,
     namespace,
-    nodes: [AutoLinkNode, LinkNode],
+    nodes: [AutoLinkNode, LinkNode, HeadingNode, ListNode, ListItemNode],
     onError,
     theme: {
+      heading: {
+        h1: classes.h1,
+        h2: classes.h2,
+        h3: classes.h3,
+        h4: classes.h4,
+        h5: classes.h5,
+        h6: classes.h6
+      },
       link: classes.link,
+      paragraph: classes.paragraph,
       text: {
         bold: classes.bold,
         italic: classes.italic,
-        strikethrough: classes.strikethough,
+        strikethrough: classes.strikethrough,
         underline: classes.underline,
         underlineStrikethrough: classes.underlineStrikethrough
       }
     }
   };
 
+  const change = (state: EditorState, editor: LexicalEditor): void => {
+    editor.update(() => {
+      setHtmlString?.($generateHtmlFromNodes(editor, null));
+    });
+    getEditorState?.(state, editor);
+  };
+
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <ToolbarPlugin editable={editable} getEditorState={getEditorState} />
-      <RichTextPlugin
-        ErrorBoundary={LexicalErrorBoundary}
-        contentEditable={
-          <ContentEditable
+      <div className={classes.container}>
+        <div className={classes.toolbar}>
+          <ToolbarPlugin
+            className={toolbarClassName}
+            disabled={disabled}
+            displayBlockButtons={displayBlockButtons}
+            displayMacrosButton={displayMacrosButton}
             editable={editable}
-            editorState={editorState}
-            hasInitialTextContent={hasInitialTextContent}
-            initialEditorState={initialEditorState}
-            inputClassname={inputClassname}
-            minInputHeight={minInputHeight}
-            namespace={namespace}
-            placeholder={placeholder}
-            resetEditorToInitialStateCondition={
-              resetEditorToInitialStateCondition
+          />
+        </div>
+        <div>
+          <RichTextPlugin
+            ErrorBoundary={LexicalErrorBoundary}
+            contentEditable={
+              <ContentEditable
+                className={contentClassName || ''}
+                disabled={disabled}
+                editable={editable}
+                editorState={editorState}
+                error={error}
+                hasInitialTextContent={hasInitialTextContent}
+                initialEditorState={initialEditorState}
+                initialize={initialize}
+                inputClassname={inputClassname}
+                minInputHeight={minInputHeight}
+                namespace={namespace}
+                placeholder={placeholder}
+                resetEditorToInitialStateCondition={
+                  resetEditorToInitialStateCondition
+                }
+                setHtmlString={setHtmlString}
+                onBlur={onBlur}
+              />
             }
+            placeholder={null}
           />
-        }
-        placeholder={null}
-      />
-      <HistoryPlugin />
-      <LinkPlugin />
-      <AutoCompleteLinkPlugin />
-      <FloatingLinkEditorPlugin editable={editable} />
+          <HistoryPlugin />
+          <LinkPlugin />
+          <ListPlugin />
+          <OnChangePlugin onChange={change} />
+          <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
+          <FloatingLinkEditorPlugin
+            editable={editable}
+            openLinkInNewTab={openLinkInNewTab}
+          />
+          {error && <Typography className={classes.error}>{error}</Typography>}
+        </div>
+      </div>
     </LexicalComposer>
   );
 };

package/src/RichTextEditor/index.stories.tsx

@@ -56,9 +56,23 @@ withCustomPlaceholder.args = {
   placeholder: 'Custom placeholder...'
 };
 
+export const withMacrosPlugin = Template.bind({});
+withMacrosPlugin.args = {
+  displayMacrosButton: true
+};
+
 export const withEditableFalse = Template.bind({});
 withEditableFalse.args = {
+  editable: true,
+  editorState: JSON.stringify(initialEditorState),
+  initialEditorState: JSON.stringify(initialEditorState)
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
   editable: false,
+  editorState: JSON.stringify(initialEditorState),
   initialEditorState: JSON.stringify(initialEditorState)
 };
 

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,116 @@
+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 { labelAlignPicker } from '../../translatedLabels';
+
+import { useStyles } 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 } = useStyles();
+
+  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={labelAlignPicker}
+        className={classes.button}
+        disabled={disabled}
+      >
+        {selectedFormat && <selectedFormat.Icon />}
+      </Menu.Button>
+      <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>
+  );
+};
+
+export default AlignPicker;