@centreon/ui 24.5.12 → 24.5.13

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -0,0 +1,408 @@
+import RichTextEditor from './RichTextEditor';
+import { standardMacros } from './plugins/ToolbarPlugin/MacrosButton';
+import { labelAlignPicker } from './translatedLabels';
+
+interface CheckElementStyleOnRichTextEditorProps {
+  check: boolean;
+  element: HTMLElement;
+}
+
+const mockInititalStateToEditor =
+  '{"root": {"children": [{"children": [{"detail": 0,"format": 0,"mode": "normal","style": "","text": "test Cypress","type": "text","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "paragraph","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "root","version": 1}}';
+
+const checkElementStyleOnRichTextEditor = ({
+  element,
+  check
+}: CheckElementStyleOnRichTextEditorProps): void => {
+  cy.wrap(element).should('be.visible');
+
+  if (check) {
+    cy.wrap(element)
+      .contains('strong', 'cypress test')
+      .should('have.css', 'font-style')
+      .and('match', /italic/);
+
+    cy.wrap(element)
+      .contains('strong', 'cypress test')
+      .should('have.css', 'text-decoration')
+      .and('match', /underline line-through/);
+  } else {
+    cy.wrap(element)
+      .contains('p', 'cypress test')
+      .invoke('css', 'font-style')
+      .and('not.match', /italic/);
+
+    cy.wrap(element)
+      .contains('p', 'cypress test')
+      .invoke('css', 'text-decoration')
+      .and('not.match', /underline line-through/);
+  }
+};
+
+describe('Rich Text Editor', () => {
+  describe('Editable Rich Text Editor', () => {
+    beforeEach(() => {
+      cy.mount({ Component: <RichTextEditor editable /> });
+    });
+
+    it('displays all elements when RichTextEditor is called with required props', () => {
+      cy.findByLabelText('Undo').should('be.visible');
+      cy.findByLabelText('Redo').should('be.visible');
+      cy.findByLabelText('align picker').should('be.visible');
+      cy.findByLabelText('block').should('be.visible');
+      cy.findByLabelText('format').should('be.visible');
+      cy.findByLabelText('link').should('be.visible');
+      cy.findByLabelText('list').should('be.visible');
+
+      cy.findByLabelText('RichTextEditor')
+        .should('be.visible')
+        .and('have.value', '');
+
+      cy.findByLabelText('RichTextEditor').parent().contains('Type here...');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays all format actions when the format button is clicked', () => {
+      cy.findByLabelText('format').click();
+
+      cy.findByLabelText('bold').should('be.visible');
+      cy.findByLabelText('italic').should('be.visible');
+      cy.findByLabelText('underline').should('be.visible');
+      cy.findByLabelText('strikethrough').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays changes with undo redo buttons', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
+      cy.get('[data-testid="RichTextEditor"]').should(
+        'have.text',
+        'cypress test'
+      );
+
+      cy.findByLabelText('Undo').click();
+
+      cy.get('[data-testid="RichTextEditor"]').should('have.text', '');
+
+      cy.findByLabelText('Redo').click();
+
+      cy.get('[data-testid="RichTextEditor"]').should(
+        'have.text',
+        'cypress test'
+      );
+    });
+
+    it('displays changes with bold, italic, underline and strikethrough buttons', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
+
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('bold').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('italic').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('underline').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('strikethrough').click();
+
+      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
+        checkElementStyleOnRichTextEditor({ check: true, element });
+      });
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('bold').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('italic').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('underline').click();
+
+      cy.findByLabelText('format').click();
+      cy.findByLabelText('strikethrough').click();
+
+      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
+        checkElementStyleOnRichTextEditor({ check: false, element });
+      });
+    });
+
+    it('adds link with an url when link button is clicked', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('cypress');
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.findByLabelText('link').click();
+
+      cy.findByLabelText('Saved link').should('have.text', 'https://');
+
+      cy.findByLabelText('Edit link').click();
+      cy.get('#InputLinkField').type('www.centreon.com').type('{enter}');
+
+      cy.findByText('cypress')
+        .parent()
+        .then((element: HTMLElement) => {
+          cy.wrap(element)
+            .should('have.attr', 'href')
+            .and('match', /^https:\/\/www.centreon.com/);
+
+          cy.wrap(element)
+            .should('have.attr', 'rel')
+            .and('match', /^noreferrer/);
+
+          cy.wrap(element)
+            .should('have.attr', 'target')
+            .and('match', /_blank/);
+        });
+
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.findByLabelText('link').click();
+
+      cy.findByText('cypress')
+        .parent()
+        .then((element: HTMLElement) => {
+          cy.wrap(element)
+            .contains('p', 'cypress')
+            .should('not.have.attr', 'href');
+
+          cy.wrap(element).should('not.have.attr', 'rel');
+
+          cy.wrap(element).should('not.have.attr', 'target');
+        });
+    });
+
+    it('does not allow to open links in a new tab', () => {
+      cy.mount({
+        Component: <RichTextEditor editable openLinkInNewTab={false} />
+      });
+
+      cy.get('[data-testid="RichTextEditor"]').type('cypress');
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.findByLabelText('link').click();
+
+      cy.findByLabelText('Saved link').should('have.text', 'https://');
+
+      cy.findByLabelText('Edit link').click();
+      cy.get('#InputLinkField').type('www.centreon.com').type('{enter}');
+
+      cy.findByText('cypress').parent().should('not.have.attr', 'target');
+
+      cy.get('[data-testid="RichTextEditor"]').focus().clear();
+
+      cy.get('[data-testid="RichTextEditor"]')
+        .focus()
+        .type('https://centreon.com');
+
+      cy.findByText('https://centreon.com')
+        .parent()
+        .should('not.have.attr', 'target');
+    });
+  });
+
+  describe('Rich Text Editor not editable', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            editable={false}
+            initialEditorState={mockInititalStateToEditor}
+          />
+        )
+      });
+    });
+
+    it('displays editor when editable props is false and an initialState exist', () => {
+      cy.findByLabelText('Undo').should('not.exist');
+      cy.findByLabelText('Redo').should('not.exist');
+      cy.findByLabelText(labelAlignPicker).should('not.exist');
+      cy.findByLabelText('block').should('not.exist');
+      cy.findByLabelText('format').should('not.exist');
+      cy.findByLabelText('link').should('not.exist');
+      cy.findByLabelText('list').should('not.exist');
+    });
+  });
+
+  describe('Rich Text Editor is disabled', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            disabled
+            editable
+            initialEditorState={mockInititalStateToEditor}
+          />
+        )
+      });
+    });
+
+    it('displays editor when editable props is false and an initialState exist', () => {
+      cy.findByLabelText('Undo').should('be.disabled');
+      cy.findByLabelText('Redo').should('be.disabled');
+      cy.findByLabelText(labelAlignPicker).should('be.disabled');
+      cy.findByLabelText('block').should('be.disabled');
+      cy.findByLabelText('format').should('be.disabled');
+      cy.findByLabelText('link').should('be.disabled');
+      cy.findByLabelText('list').should('be.disabled');
+    });
+  });
+
+  describe('Custom style editable rich text editor ', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            editable
+            minInputHeight={200}
+            namespace="CypressComponentTest"
+            placeholder="Type Cypress test..."
+          />
+        )
+      });
+    });
+    it('displays editor with custom namespace', () => {
+      cy.get('[data-testid="CypressComponentTest"] > p').should('be.exist');
+      cy.get('[data-testid="CypressComponentTest"]').should('be.exist');
+    });
+
+    it('displays editor with custom placeholder', () => {
+      cy.get('[data-testid="CypressComponentTest"]')
+        .parent()
+        .contains('Type Cypress test...');
+    });
+
+    it('displays editor with custom minimum input height', () => {
+      cy.get('[data-testid="CypressComponentTest"]').should(
+        'have.css',
+        'min-height',
+        '200px'
+      );
+    });
+  });
+
+  describe('Rich Text Editor with Macros Plugin', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: <RichTextEditor displayMacrosButton editable />
+      });
+    });
+
+    it('displays the Macros button when the "displayMacrosButton" prop is set to true', () => {
+      cy.findByLabelText('Macros').click();
+
+      standardMacros.forEach((macro) => {
+        cy.findByText(macro).should('be.visible');
+      });
+    });
+
+    it('ensures that the selected macro is inserted into the RichTextEditor', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('macro : ');
+
+      standardMacros.forEach((macro) => {
+        cy.findByLabelText('Macros').click();
+        cy.findByText(macro).click();
+
+        cy.get('[data-testid="RichTextEditor"]').should('contain', macro);
+      });
+    });
+  });
+
+  describe('Block type', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: <RichTextEditor editable />
+      });
+    });
+
+    const testCases = [
+      {
+        blockType: 'Huge',
+        tag: 'h3'
+      },
+      {
+        blockType: 'Large',
+        tag: 'h5'
+      },
+      {
+        blockType: 'Normal',
+        tag: 'p'
+      },
+      {
+        blockType: 'Small',
+        tag: 'h6'
+      }
+    ];
+
+    testCases.forEach(({ blockType, tag }) => {
+      it(`displays ${blockType} when the corresponding block type button is selected`, () => {
+        cy.get('[data-testid="RichTextEditor"]').type('Example');
+        cy.findByLabelText('block').click();
+        cy.findByText(blockType).click();
+
+        cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
+
+        cy.makeSnapshot();
+      });
+    });
+  });
+
+  describe('List type', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: <RichTextEditor editable />
+      });
+    });
+
+    const testCases = [
+      {
+        listType: 'Unordered List',
+        tag: 'ul'
+      },
+      {
+        listType: 'Ordered List',
+        tag: 'ol'
+      }
+    ];
+
+    testCases.forEach(({ listType, tag }) => {
+      it(`displays ${listType} when the corresponding list type button is selected`, () => {
+        cy.get('[data-testid="RichTextEditor"]').type('Example');
+        cy.findByLabelText('list').click();
+        cy.findByLabelText(listType).click();
+
+        cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
+
+        cy.makeSnapshot();
+      });
+    });
+  });
+
+  describe('Aligns', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: <RichTextEditor editable />
+      });
+    });
+
+    const testCases = ['Center', 'Right', 'Left'];
+
+    testCases.forEach((label) => {
+      it(`aligns the text to the ${label} when the corresponding button was clicked`, () => {
+        cy.get('[data-testid="RichTextEditor"]').type('Example');
+
+        cy.findByLabelText(labelAlignPicker).click();
+        cy.findByLabelText(label).click();
+
+        cy.findByText('Example')
+          .parent()
+          .should('have.css', 'text-align', label.toLowerCase());
+
+        cy.makeSnapshot();
+      });
+    });
+  });
+});

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>
   );
 };