@centreon/ui 24.7.2 → 24.7.4

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,18 +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 { $generateHtmlFromNodes } from '@lexical/html';
-
-import { Typography } from '@mui/material';
 
 import ContentEditable from './ContentEditable';
 import ToolbarPlugin from './plugins/ToolbarPlugin/index';
@@ -22,26 +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;
-  setHtmlString?: (htmlString: string) => void;
-  toolbarClassName?: string;
-  toolbarPositions?: 'start' | 'end';
 }
 
 const log = anylogger('Rich text editor');
@@ -50,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',
@@ -135,20 +61,9 @@ const RichTextEditor = ({
   initialEditorState,
   editable = true,
   editorState,
-  resetEditorToInitialStateCondition,
-  toolbarPositions = 'start',
-  error,
-  onBlur,
-  contentClassName,
-  displayMacrosButton = false,
-  disabled = false,
-  openLinkInNewTab = true,
-  initialize,
-  displayBlockButtons = true,
-  setHtmlString,
-  toolbarClassName
+  resetEditorToInitialStateCondition
 }: RichTextEditorProps): JSX.Element => {
-  const { classes } = useStyles({ toolbarPositions });
+  const { classes } = useStyles();
 
   const hasInitialTextContent = initialEditorState
     ? JSON.parse(initialEditorState).root?.children.length > 0
@@ -158,86 +73,46 @@ 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
       }
     }
   };
 
-  const change = (state: EditorState, editor: LexicalEditor): void => {
-    editor.update(() => {
-      setHtmlString?.($generateHtmlFromNodes(editor, null));
-    });
-    getEditorState?.(state, editor);
-  };
-
   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
-                }
-                setHtmlString={setHtmlString}
-                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={change} />
-          <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

@@ -1,102 +1,88 @@
-import { useState } from 'react';
-
-import { ComponentMeta } from '@storybook/react';
-import { EditorState } from 'lexical';
-
-import RichTextEditor from './RichTextEditor';
-import type { RichTextEditorProps } from './RichTextEditor';
-import initialEditorState from './initialEditorState.json';
-
-export default {
-  argTypes: {
-    editable: { control: false },
-    initialEditorState: { control: 'text' },
-    inputClassname: { control: 'text' },
-    minInputHeight: { control: 'number' },
-    namespace: { control: 'text' },
-    placeholder: { control: 'text' }
-  },
-  component: RichTextEditor,
-  title: 'RichTextEditor'
-} as ComponentMeta<typeof RichTextEditor>;
-
-const Template = (props: RichTextEditorProps): JSX.Element => (
-  <RichTextEditor {...props} />
-);
-
-export const normal = Template.bind({});
-
-export const withCustomEditorMinHeight = Template.bind({});
-withCustomEditorMinHeight.args = {
-  minInputHeight: 300
-};
-
-const StoryWithUpdateListener = (): JSX.Element => {
-  const [editorState, setEditorState] = useState<EditorState>();
-
-  return (
-    <div>
-      <Template getEditorState={setEditorState} />
-      <pre>{JSON.stringify(editorState, null, 2)}</pre>
-    </div>
-  );
-};
-
-export const withUpdateListener = (): JSX.Element => (
-  <StoryWithUpdateListener />
-);
-
-export const withInitialEditorState = Template.bind({});
-withInitialEditorState.args = {
-  initialEditorState: JSON.stringify(initialEditorState)
-};
-
-export const withCustomPlaceholder = Template.bind({});
-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)
-};
-
-const StoryWithEditableFalseLikePreview = (): JSX.Element => {
-  const [editorState, setEditorState] =
-    useState<EditorState>(initialEditorState);
-
-  return (
-    <div>
-      <Template
-        getEditorState={setEditorState}
-        initialEditorState={JSON.stringify(initialEditorState)}
-        namespace="editable"
-      />
-      <Template
-        editable={false}
-        editorStateForReadOnlyMode={JSON.stringify(editorState)}
-        namespace="uneditable"
-        placeholder=""
-      />
-    </div>
-  );
-};
-
-export const withEditableFalseLikePreview = (): JSX.Element => (
-  <StoryWithEditableFalseLikePreview />
-);
+import { useState } from 'react';
+
+import { ComponentMeta } from '@storybook/react';
+import { EditorState } from 'lexical';
+
+import RichTextEditor from './RichTextEditor';
+import type { RichTextEditorProps } from './RichTextEditor';
+import initialEditorState from './initialEditorState.json';
+
+export default {
+  argTypes: {
+    editable: { control: false },
+    initialEditorState: { control: 'text' },
+    inputClassname: { control: 'text' },
+    minInputHeight: { control: 'number' },
+    namespace: { control: 'text' },
+    placeholder: { control: 'text' }
+  },
+  component: RichTextEditor,
+  title: 'RichTextEditor'
+} as ComponentMeta<typeof RichTextEditor>;
+
+const Template = (props: RichTextEditorProps): JSX.Element => (
+  <RichTextEditor {...props} />
+);
+
+export const normal = Template.bind({});
+
+export const withCustomEditorMinHeight = Template.bind({});
+withCustomEditorMinHeight.args = {
+  minInputHeight: 300
+};
+
+const StoryWithUpdateListener = (): JSX.Element => {
+  const [editorState, setEditorState] = useState<EditorState>();
+
+  return (
+    <div>
+      <Template getEditorState={setEditorState} />
+      <pre>{JSON.stringify(editorState, null, 2)}</pre>
+    </div>
+  );
+};
+
+export const withUpdateListener = (): JSX.Element => (
+  <StoryWithUpdateListener />
+);
+
+export const withInitialEditorState = Template.bind({});
+withInitialEditorState.args = {
+  initialEditorState: JSON.stringify(initialEditorState)
+};
+
+export const withCustomPlaceholder = Template.bind({});
+withCustomPlaceholder.args = {
+  placeholder: 'Custom placeholder...'
+};
+
+export const withEditableFalse = Template.bind({});
+withEditableFalse.args = {
+  editable: false,
+  initialEditorState: JSON.stringify(initialEditorState)
+};
+
+const StoryWithEditableFalseLikePreview = (): JSX.Element => {
+  const [editorState, setEditorState] =
+    useState<EditorState>(initialEditorState);
+
+  return (
+    <div>
+      <Template
+        getEditorState={setEditorState}
+        initialEditorState={JSON.stringify(initialEditorState)}
+        namespace="editable"
+      />
+      <Template
+        editable={false}
+        editorStateForReadOnlyMode={JSON.stringify(editorState)}
+        namespace="uneditable"
+        placeholder=""
+      />
+    </div>
+  );
+};
+
+export const withEditableFalseLikePreview = (): JSX.Element => (
+  <StoryWithEditableFalseLikePreview />
+);