@centreon/ui 23.10.68 → 23.10.69

package/src/Panel/index.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles<StylesProps>()(
       height: '100%'
     },
     container: {
-      backgroundColor: theme.palette.background.panel,
+      backgroundColor: theme.palette.background.default,
       borderTopRightRadius: 0,
       display: 'grid',
       gridTemplate: 'auto auto 1fr / 1fr',
@@ -85,8 +85,7 @@ export interface Tab {
 }
 
 export interface Props {
-  className?: string;
-  header?: React.ReactElement;
+  header: React.ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
   minWidth?: number;
@@ -112,12 +111,11 @@ const Panel = React.forwardRef(
       width = 550,
       minWidth = 550,
       headerBackgroundColor,
-      onResize,
-      className
+      onResize
     }: Props,
     ref
   ): JSX.Element => {
-    const { classes, cx } = useStyles({
+    const { classes } = useStyles({
       hasTabs: !isEmpty(tabs),
       headerBackgroundColor,
       width
@@ -181,7 +179,7 @@ const Panel = React.forwardRef(
           exit: 50
         }}
       >
-        <Paper className={cx(classes.container, className)} elevation={2}>
+        <Paper className={classes.container} elevation={2}>
           {!isNil(onResize) && (
             <div className={classes.dragger} role="none" onMouseDown={resize} />
           )}
@@ -226,9 +224,7 @@ const Panel = React.forwardRef(
               className={classes.contentContainer}
               ref={ref as React.RefObject<HTMLDivElement>}
             >
-              <div className={classes.content} id="panel-content">
-                {selectedTab}
-              </div>
+              <div className={classes.content}>{selectedTab}</div>
             </div>
           </div>
         </Paper>

package/src/RichTextEditor/ContentEditable.tsx

@@ -9,20 +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)
     },
@@ -34,9 +31,7 @@ const useStyles = makeStyles<StyleProps>()(
       outline: '0px solid transparent'
     },
     inputFocused: {
-      border: error
-        ? `1px solid ${theme.palette.error.main}`
-        : `1px solid ${theme.palette.primary.main}`
+      border: `1px solid ${theme.palette.primary.main}`
     },
     placeholder: {
       color: theme.palette.grey[500],
@@ -46,25 +41,17 @@ const useStyles = makeStyles<StyleProps>()(
 );
 
 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,
@@ -74,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('');
 
@@ -96,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(() => {
@@ -130,36 +117,12 @@ const ContentEditable = ({
     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.container,
-        className,
-        isFocused && classes.inputFocused
-      )}
+      className={cx(classes.container, isFocused && classes.inputFocused)}
+      id={namespace}
     >
       {editable && isTextEmpty && (
         <Typography className={classes.placeholder}>
@@ -169,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,24 +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;
-  toolbarPositions?: 'start' | 'end';
 }
 
 const log = anylogger('Rich text editor');
@@ -47,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',
@@ -127,18 +61,9 @@ const RichTextEditor = ({
   initialEditorState,
   editable = true,
   editorState,
-  resetEditorToInitialStateCondition,
-  toolbarPositions = 'start',
-  error,
-  onBlur,
-  contentClassName,
-  displayMacrosButton = false,
-  disabled = false,
-  openLinkInNewTab = true,
-  initialize,
-  displayBlockButtons = true
+  resetEditorToInitialStateCondition
 }: RichTextEditorProps): JSX.Element => {
-  const { classes } = useStyles({ toolbarPositions });
+  const { classes } = useStyles();
 
   const hasInitialTextContent = initialEditorState
     ? JSON.parse(initialEditorState).root?.children.length > 0
@@ -148,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
       }
@@ -172,52 +89,30 @@ const RichTextEditor = ({
 
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <div className={classes.container}>
-        <div className={classes.toolbar}>
-          <ToolbarPlugin
-            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,11 +56,6 @@ withCustomPlaceholder.args = {
   placeholder: 'Custom placeholder...'
 };
 
-export const withMacrosPlugin = Template.bind({});
-withMacrosPlugin.args = {
-  displayMacrosButton: true
-};
-
 export const withEditableFalse = Template.bind({});
 withEditableFalse.args = {
   editable: false,

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;