@centreon/ui 23.10.107 → 23.10.109

package/src/RichTextEditor/RichTextEditor.tsx

@@ -3,17 +3,10 @@ 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, LexicalEditor } from 'lexical';
+import { EditorState } 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 { Typography } from '@mui/material';
 
 import ContentEditable from './ContentEditable';
 import ToolbarPlugin from './plugins/ToolbarPlugin/index';
@@ -21,25 +14,15 @@ 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;
-  error?: string;
-  getEditorState?: (editorState: EditorState, editor: LexicalEditor) => void;
+  getEditorState?: (editorState: EditorState) => void;
   initialEditorState?: string;
-  initialize?: (editor) => void;
   inputClassname?: string;
   minInputHeight?: number;
   namespace?: string;
-  onBlur?: (e: string) => void;
-  openLinkInNewTab?: boolean;
   placeholder?: string;
   resetEditorToInitialStateCondition?: () => boolean;
-  toolbarClassName?: string;
-  toolbarPositions?: 'start' | 'end';
 }
 
 const log = anylogger('Rich text editor');
@@ -48,76 +31,26 @@ const onError = (error: Error): void => {
   log.error(error.message);
 };
 
-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.h6.fontSize,
-      fontWeight: theme.typography.h6.fontWeight,
-      lineHeight: theme.typography.h6.lineHeight
-    },
-    italic: {
-      fontStyle: 'italic'
-    },
-    link: {
-      color: theme.palette.primary.main
-    },
-    strikethrough: {
-      textDecoration: 'line-through'
-    },
-    toolbar: equals(toolbarPositions, 'end')
-      ? {
-          marginTop: theme.spacing(0.5)
-        }
-      : {},
-    underline: {
-      textDecoration: 'underline'
-    },
-    underlineStrikethrough: {
-      textDecoration: 'underline line-through'
-    }
-  })
-);
+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 RichTextEditor = ({
   namespace = 'RichTextEditor',
@@ -128,19 +61,9 @@ const RichTextEditor = ({
   initialEditorState,
   editable = true,
   editorState,
-  resetEditorToInitialStateCondition,
-  toolbarPositions = 'start',
-  error,
-  onBlur,
-  contentClassName,
-  displayMacrosButton = false,
-  disabled = false,
-  openLinkInNewTab = true,
-  initialize,
-  displayBlockButtons = true,
-  toolbarClassName
+  resetEditorToInitialStateCondition
 }: RichTextEditorProps): JSX.Element => {
-  const { classes } = useStyles({ toolbarPositions });
+  const { classes } = useStyles();
 
   const hasInitialTextContent = initialEditorState
     ? JSON.parse(initialEditorState).root?.children.length > 0
@@ -150,22 +73,14 @@ const RichTextEditor = ({
     editable,
     editorState: initialEditorState,
     namespace,
-    nodes: [AutoLinkNode, LinkNode, HeadingNode, ListNode, ListItemNode],
+    nodes: [AutoLinkNode, LinkNode],
     onError,
     theme: {
-      heading: {
-        h1: classes.h1,
-        h2: classes.h2,
-        h3: classes.h3,
-        h4: classes.h4,
-        h5: classes.h5,
-        h6: classes.h6
-      },
       link: classes.link,
       text: {
         bold: classes.bold,
         italic: classes.italic,
-        strikethrough: classes.strikethrough,
+        strikethrough: classes.strikethough,
         underline: classes.underline,
         underlineStrikethrough: classes.underlineStrikethrough
       }
@@ -174,53 +89,30 @@ const RichTextEditor = ({
 
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <div className={classes.container}>
-        <div className={classes.toolbar}>
-          <ToolbarPlugin
-            className={toolbarClassName}
-            disabled={disabled}
-            displayBlockButtons={displayBlockButtons}
-            displayMacrosButton={displayMacrosButton}
+      <ToolbarPlugin editable={editable} getEditorState={getEditorState} />
+      <RichTextPlugin
+        ErrorBoundary={LexicalErrorBoundary}
+        contentEditable={
+          <ContentEditable
             editable={editable}
-          />
-        </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
-                }
-                onBlur={onBlur}
-              />
+            editorState={editorState}
+            hasInitialTextContent={hasInitialTextContent}
+            initialEditorState={initialEditorState}
+            inputClassname={inputClassname}
+            minInputHeight={minInputHeight}
+            namespace={namespace}
+            placeholder={placeholder}
+            resetEditorToInitialStateCondition={
+              resetEditorToInitialStateCondition
             }
-            placeholder={null}
-          />
-          <HistoryPlugin />
-          <LinkPlugin />
-          <ListPlugin />
-          <OnChangePlugin onChange={getEditorState} />
-          <AutoCompleteLinkPlugin openLinkInNewTab={openLinkInNewTab} />
-          <FloatingLinkEditorPlugin
-            editable={editable}
-            openLinkInNewTab={openLinkInNewTab}
           />
-          {error && <Typography className={classes.error}>{error}</Typography>}
-        </div>
-      </div>
+        }
+        placeholder={null}
+      />
+      <HistoryPlugin />
+      <LinkPlugin />
+      <AutoCompleteLinkPlugin />
+      <FloatingLinkEditorPlugin editable={editable} />
     </LexicalComposer>
   );
 };

package/src/RichTextEditor/index.stories.tsx

@@ -56,23 +56,9 @@ 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,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

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

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

@@ -18,11 +18,7 @@ import { labelRedo, labelUndo } from '../../translatedLabels';
 
 const LowPriority = 1;
 
-interface Props {
-  disabled: boolean;
-}
-
-const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
+const UndoRedoButtons = (): JSX.Element => {
   const { t } = useTranslation();
 
   const [canUndo, setCanUndo] = useState(false);
@@ -68,7 +64,7 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
     <>
       <IconButton
         ariaLabel={translatedUndo}
-        disabled={!canUndo || disabled}
+        disabled={!canUndo}
         title={translatedUndo}
         tooltipPlacement="top"
         onClick={undo}
@@ -77,7 +73,7 @@ const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
       </IconButton>
       <IconButton
         ariaLabel={translatedRedo}
-        disabled={!canRedo || disabled}
+        disabled={!canRedo}
         title={translatedRedo}
         tooltipPlacement="top"
         onClick={redo}

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

@@ -1,65 +1,35 @@
+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 BlockButtons from './BlockButtons';
-import AlignPicker from './AlignPicker';
 
 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)
-  },
-  macros: {
-    '& span': {
-      fontSize: theme.typography.caption.fontSize
-    }
-  },
-  macrosButton: {
-    marginBottom: theme.spacing(0.5)
   }
 }));
 
 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} />
-        </>
-      )}
+    <div className={classes.container}>
+      <UndoRedoButtons />
       <Divider flexItem orientation="vertical" />
-      <FormatButtons disabled={disabled} />
-      <AlignPicker disabled={disabled} />
-      {displayMacrosButton && (
-        <>
-          <Divider flexItem orientation="vertical" />
-          <MacrosButton disabled={disabled} />
-        </>
-      )}
+      <FormatButtons getEditorState={getEditorState} />
     </div>
   ) : null;
 };