@centreon/ui 24.4.59 → 24.4.60

package/src/RichTextEditor/ContentEditable.tsx

@@ -9,17 +9,17 @@ import { Typography } from '@mui/material';
 
 interface StyleProps {
   editable: boolean;
-  error?: string;
   minInputHeight: number;
 }
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { minInputHeight, editable, error }) => ({
+  (theme, { minInputHeight, editable }) => ({
     container: {
+      '& p': {
+        margin: 0
+      },
       backgroundColor: theme.palette.background.paper,
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : '1px solid transparent',
+      border: '1px solid transparent',
       borderRadius: theme.shape.borderRadius,
       padding: theme.spacing(0.5, 1)
     },
@@ -31,45 +31,27 @@ const useStyles = makeStyles<StyleProps>()(
       outline: '0px solid transparent'
     },
     inputFocused: {
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : `1px solid ${theme.palette.primary.main}`
-    },
-    notEditable: {
-      backgroundColor: 'transparent'
+      border: `1px solid ${theme.palette.primary.main}`
     },
     placeholder: {
       color: theme.palette.grey[500],
       pointerEvents: 'none'
-    },
-    root: {
-      '& p,h1,h2,h3,h4,h5,h6,span': {
-        margin: 0
-      }
     }
   })
 );
 
 interface Props {
-  className?: string;
-  disabled?: boolean;
   editable: boolean;
   editorState?: string;
-  error?: string;
   hasInitialTextContent?: boolean;
   initialEditorState?: string;
-  initialize?: (editor) => void;
   inputClassname?: string;
   minInputHeight: number;
   namespace: string;
-  onBlur?: (e: string) => void;
   placeholder: string;
   resetEditorToInitialStateCondition?: () => boolean;
 }
 
-const defaultState =
-  '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
-
 const ContentEditable = ({
   minInputHeight,
   inputClassname,
@@ -79,17 +61,13 @@ const ContentEditable = ({
   editorState,
   namespace,
   resetEditorToInitialStateCondition,
-  initialEditorState,
-  error,
-  onBlur,
-  className,
-  disabled,
-  initialize
+  initialEditorState
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, error, minInputHeight });
+  const { classes, cx } = useStyles({ editable, minInputHeight });
   const { t } = useTranslation();
 
   const [editor] = useLexicalComposerContext();
+  const [isEditable, setEditable] = useState(false);
   const [isFocused, setFocused] = useState(false);
   const [root, setRoot] = useState('');
 
@@ -101,13 +79,17 @@ const ContentEditable = ({
   );
 
   useLayoutEffect(() => {
-    if (!editable) {
-      const newEditorState = editor.parseEditorState(
-        editorState || defaultState
-      );
+    setEditable(editor.isEditable());
+
+    if (editorState && !editable) {
+      const newEditorState = editor.parseEditorState(editorState);
 
       editor.setEditorState(newEditorState);
     }
+
+    return editor.registerEditableListener((currentIsEditable) => {
+      setEditable(currentIsEditable);
+    });
   }, [editor, editorState]);
 
   useEffect(() => {
@@ -126,49 +108,21 @@ const ContentEditable = ({
     const shouldResetEditorToInitialState =
       resetEditorToInitialStateCondition?.();
 
-    if (!shouldResetEditorToInitialState) {
+    if (!shouldResetEditorToInitialState || isNil(initialEditorState)) {
       return;
     }
 
-    const newEditorState = editor.parseEditorState(
-      initialEditorState || defaultState
-    );
+    const newEditorState = editor.parseEditorState(initialEditorState);
 
     editor.setEditorState(newEditorState);
   }, [editorState]);
 
-  const isTextEmpty =
-    isEmpty(root) &&
-    !editor.getEditorState().toJSON().root.children?.[0]?.children?.length;
-
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
-    setFocused(false);
-    onBlur?.(event);
-  };
-
-  const isEditable = editor.isEditable();
-
-  useEffect(() => {
-    if (isNil(disabled)) {
-      return;
-    }
-
-    editor.setEditable(!disabled);
-  }, [disabled]);
-
-  useEffect(() => {
-    initialize?.(editor);
-  }, []);
+  const isTextEmpty = isEmpty(root);
 
   return (
     <div
-      className={cx(
-        classes.root,
-        editable && classes.container,
-        !isEditable && !disabled && classes.notEditable,
-        className,
-        isFocused && classes.inputFocused
-      )}
+      className={cx(classes.container, isFocused && classes.inputFocused)}
+      id={namespace}
     >
       {editable && isTextEmpty && (
         <Typography className={classes.placeholder}>
@@ -178,14 +132,14 @@ const ContentEditable = ({
       <div
         aria-label={namespace}
         className={cx(
-          editable && isTextEmpty && classes.emptyInput,
+          isTextEmpty && classes.emptyInput,
           classes.input,
           inputClassname
         )}
         contentEditable={isEditable}
         data-testid={namespace}
         ref={ref}
-        onBlur={handleBlur}
+        onBlur={(): void => setFocused(false)}
         onFocus={(): void => setFocused(true)}
       />
     </div>

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,81 +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.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 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',
@@ -133,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
@@ -155,23 +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,
-      paragraph: classes.paragraph,
       text: {
         bold: classes.bold,
         italic: classes.italic,
-        strikethrough: classes.strikethrough,
+        strikethrough: classes.strikethough,
         underline: classes.underline,
         underlineStrikethrough: classes.underlineStrikethrough
       }
@@ -180,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;