@madie/madie-design-system 1.2.77 → 1.2.78

package/components/RichTextEditor/index.jsx

@@ -40,7 +40,7 @@ const iconStyle = {
   display: "block",
 };
 
-const MenuBar = ({editor, disabled}) => {
+export const MenuBar = ({editor, disabled, id}) => {
   if (!editor) {
     return null;
   }
@@ -49,11 +49,12 @@ const MenuBar = ({editor, disabled}) => {
       className="control-group"
       role="toolbar"
       aria-label="Text formatting toolbar"
-      data-testid="rich-text-editor-toolbar"
+      data-testid={`${id}-rich-text-editor-toolbar`}
+      id={`${id}-rich-text-editor-toolbar`}
     >
       <div className="button-group">
         <Tooltip
-          data-testid="undo-tooltip"
+          data-testid={`${id}-undo-tooltip`}
           title="Undo"
           placement="top"
           enterDelay={1000}
@@ -64,12 +65,13 @@ const MenuBar = ({editor, disabled}) => {
             onClick={() =>
               editor.chain().focus().undo().run()
             }
+            data-testId={`${id}-undo-button`}
           >
             <UndoIcon/>
           </IconButton>
         </Tooltip>
         <Tooltip
-          data-testid="redo-tooltip"
+          data-testid={`${id}-redo-tooltip`}
           title="Redo"
           placement="top"
           enterDelay={1000}
@@ -81,12 +83,13 @@ const MenuBar = ({editor, disabled}) => {
               editor.chain().focus().redo().run()
             }
             style={{borderRight: "solid 1px #9c9c9c"}}
+            data-testId={`${id}-redo-button`}
           >
             <RedoIcon/>
           </IconButton>
         </Tooltip>
         <Tooltip
-          data-testid="bold-tooltip"
+          data-testid={`${id}-bold-tooltip`}
           title="Bold"
           placement="top"
           enterDelay={1000}
@@ -102,12 +105,13 @@ const MenuBar = ({editor, disabled}) => {
             className={editor.isActive("bold") ? "is-active" : ""}
             disabled={disabled}
             type="button"
+            data-testId={`${id}-add-bold-button`}
           >
             <FormatBoldIcon/>
           </IconButton>
         </Tooltip>
         <Tooltip
-          data-testid="italic-tooltip"
+          data-testid={`${id}-italic-tooltip`}
           title="Italic"
           placement="top"
           enterDelay={1000}
@@ -123,12 +127,13 @@ const MenuBar = ({editor, disabled}) => {
             className={editor.isActive("italic") ? "is-active" : ""}
             disabled={disabled}
             type="button"
+            data-testId={`${id}-add-italic-button`}
           >
             <FormatItalicIcon/>
           </IconButton>
         </Tooltip>
         <Tooltip
-          data-testid="underline-tooltip"
+          data-testid={`${id}-underline-tooltip`}
           title="Underline"
           placement="top"
           enterDelay={1000}
@@ -146,12 +151,13 @@ const MenuBar = ({editor, disabled}) => {
             }
             disabled={disabled}
             type="button"
+            data-testId={`${id}-add-underline-button`}
           >
             <FormatUnderlinedIcon/>
           </IconButton>
         </Tooltip>
         <Tooltip
-          data-testid="strikethrough-tooltip"
+          data-testid={`${id}-strikethrough-tooltip`}
           title="Strikethrough"
           placement="top"
           enterDelay={1000}
@@ -168,12 +174,13 @@ const MenuBar = ({editor, disabled}) => {
             style={{borderRight: "solid 1px #9c9c9c"}}
             disabled={disabled}
             type="button"
+            data-testId={`${id}-add-strikethrough-button`}
           >
             <StrikethroughSIcon/>
           </IconButton>
         </Tooltip>
         <Tooltip
-          data-testid="orderedlist-tooltip"
+          data-testid={`${id}-orderedlist-tooltip`}
           title="Ordered List"
           placement="top"
           enterDelay={1000}
@@ -191,12 +198,13 @@ const MenuBar = ({editor, disabled}) => {
             }
             disabled={disabled}
             type="button"
+            data-testId={`${id}-add-ordered-list-button`}
           >
             <FormatListNumberedIcon/>
           </IconButton>
         </Tooltip>
         <Tooltip
-          data-testid="bulletedlist-tooltip"
+          data-testid={`${id}-bulletedlist-tooltip`}
           title="Bulleted List"
           placement="top"
           enterDelay={1000}
@@ -215,12 +223,13 @@ const MenuBar = ({editor, disabled}) => {
             style={{borderRight: "solid 1px #9c9c9c"}}
             disabled={disabled}
             type="button"
+            data-testId={`${id}-add-bulleted-list-button`}
           >
             <FormatListBulletedIcon/>
           </IconButton>
         </Tooltip>
         <Tooltip
-          data-testid="table-tooltip"
+          data-testid={`${id}-table-tooltip`}
           title="Table"
           placement="top"
           enterDelay={1000}
@@ -241,6 +250,7 @@ const MenuBar = ({editor, disabled}) => {
             }
             disabled={disabled}
             type="button"
+            data-testId={`${id}-insert-table-button`}
           >
 
             <TableChartIcon/>
@@ -249,21 +259,22 @@ const MenuBar = ({editor, disabled}) => {
         {editor.isActive("table") && (
           <>
             <Tooltip
-              data-testid="add-row-above-tooltip"
+              data-testid={`${id}-add-row-above-tooltip`}
               title="Add row above"
               placement="top"
               enterDelay={1000}
               arrow
             >
-              <IconButton
+              <IconButton 
                 key="addRowAbove"
                 onClick={() => editor.chain().focus().addRowBefore().run()}
+                data-testId={`${id}-add-row-above-button`}
               >
                 <AddRowAboveIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
             <Tooltip
-              data-testid="add-row-below-tooltip"
+              data-testid={`${id}-add-row-below-tooltip`}
               title="Add row below"
               placement="top"
               enterDelay={1000}
@@ -271,6 +282,7 @@ const MenuBar = ({editor, disabled}) => {
             >
               <IconButton
                 key="addRowBelow"
+                data-testId={`${id}-add-row-below-button`}
                 onClick={() => editor.chain().focus().addRowAfter().run()}
               >
                 <AddRowBelowIcon style={iconStyle}/>
@@ -278,7 +290,7 @@ const MenuBar = ({editor, disabled}) => {
             </Tooltip>
 
             <Tooltip
-              data-testid="remove-row-tooltip"
+              data-testid={`${id}-remove-row-tooltip`}
               title="Remove row"
               placement="top"
               enterDelay={1000}
@@ -286,13 +298,14 @@ const MenuBar = ({editor, disabled}) => {
             >
               <IconButton
                 key="deleteRow"
+                data-testId={`${id}-delete-row-below-button`}
                 onClick={() => editor.chain().focus().deleteRow().run()}
               >
                 <DeleteRowIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
             <Tooltip
-              data-testid="add-column-right-tooltip"
+              data-testid={`${id}-add-column-right-tooltip`}
               title="Add column right"
               placement="top"
               enterDelay={1000}
@@ -300,13 +313,14 @@ const MenuBar = ({editor, disabled}) => {
             >
               <IconButton
                 key="addColumnRight"
+                data-testId={`${id}-add-column-right-button`}
                 onClick={() => editor.chain().focus().addColumnAfter().run()}
               >
                 <AddColumnRightIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
             <Tooltip
-              data-testid="add-column-left-tooltip"
+              data-testid={`${id}-add-column-left-tooltip`}
               title="Add column left"
               placement="top"
               enterDelay={1000}
@@ -315,13 +329,14 @@ const MenuBar = ({editor, disabled}) => {
               <IconButton
                 key="addColumnLeft"
                 onClick={() => editor.chain().focus().addColumnBefore().run()}
+                data-testId={`${id}-add-column-left-button`}
               >
                 <AddColumnLeftIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
 
             <Tooltip
-              data-testid="remove-column-tooltip"
+              data-testid={`${id}-remove-column-tooltip`}
               title="Remove column"
               placement="top"
               enterDelay={1000}
@@ -330,13 +345,14 @@ const MenuBar = ({editor, disabled}) => {
               <IconButton
                 key="deleteColumn"
                 onClick={() => editor.chain().focus().deleteColumn().run()}
+                data-testId={`${id}-delete-column-right-button`}
               >
                 <DeleteColumnIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
 
             <Tooltip
-              data-testid="remove-table-tooltip"
+              data-testid={`${id}-remove-table-tooltip`}
               title="Remove table"
               placement="top"
               enterDelay={1000}
@@ -345,6 +361,7 @@ const MenuBar = ({editor, disabled}) => {
               <IconButton
                 key="deleteTable"
                 onClick={() => editor.chain().focus().deleteTable().run()}
+                data-testId={`${id}-delete-table-button`}
                 style={{borderRight: "solid 1px #9c9c9c"}}
               >
                 <DeleteTableIcon style={iconStyle}/>
@@ -407,6 +424,7 @@ const RichTextEditor = ({
       <div className="rich-text-editor" data-testid={`${kebabCase(id)}-rich-text-editor`}>
         <InputLabel
           id={`${id}-label`}
+          data-testid={`${id}-label`}
           shrink
           required={required}
           error={error}
@@ -429,38 +447,53 @@ const RichTextEditor = ({
     );
   }
 
-  const editor = useEditor({
-    parseOptions: {
-      preserveWhitespace: 'full',
-    },
-    extensions: [
-      StarterKit,
-      Gapcursor,
-      Table.configure({
-        resizable: true,
-        HTMLAttributes: {
-          class: "rich-text-table",
-        },
-      }),
-      TableRow,
-      TableHeader,
-      TableCell,
-      Underline,
-      Strike.extend({
-        strike: false, // disable default strike through
-        renderHTML({HTMLAttributes}) {
-          return ["del", HTMLAttributes, 0];
+  
+    const editor = useEditor({
+      parseOptions: {
+        preserveWhitespace: 'full',
+      },
+      extensions: [
+        StarterKit,
+        Gapcursor,
+        Table.configure({
+          resizable: true,
+          HTMLAttributes: {
+            class: "rich-text-table",
+          },
+        }),
+        TableRow,
+        TableHeader,
+        TableCell,
+        Underline,
+        Strike.extend({
+          strike: false, // disable default strike through
+          renderHTML({HTMLAttributes}) {
+            return ["del", HTMLAttributes, 0];
+          },
+        }),
+      ],
+      editorProps: {
+        attributes: {
+        tabIndex: '0',
+        role: 'textbox',
+        id,
+        'data-testid': `${id}-rich-text-editor-content`,
+        'aria-invalid': error ? "true" : undefined,
+        'aria-labelledby': `${id}-label`,
+        'aria-describedby': helperText ? `${id}-helper-text` : undefined,
+        'aria-multiline': "true",
+        'aria-required': required ? "true" : undefined,
+        'className': `${error ? "has-error" : ""}`
         },
-      }),
-    ],
-    shouldRerenderOnTransaction: false,
-    content,
-    editable: !disabled,
-    onUpdate: ({editor}) => {
-      const newValue = editor.getHTML();
-      onChange?.(newValue);
-    },
-  });
+      },
+      shouldRerenderOnTransaction: false,
+      content,
+      editable: !disabled,
+      onUpdate: ({editor}) => {
+        const newValue = editor.getHTML();
+        onChange?.(newValue);
+      },
+    });
 
   React.useEffect(() => {
     if (editor && content !== editor.getHTML()) {
@@ -492,6 +525,7 @@ const RichTextEditor = ({
     >
       <InputLabel
         id={`${id}-label`}
+        data-testid={`${id}-label`}
         shrink
         required={required}
         error={error}
@@ -502,8 +536,7 @@ const RichTextEditor = ({
       >
         {label}
       </InputLabel>
-
-      {helperText && (
+      {helperText ? (
         <FormHelperText
           tabIndex={0}
           aria-live="polite"
@@ -522,22 +555,11 @@ const RichTextEditor = ({
         >
           {helperText}
         </FormHelperText>
-      )}
+        ) : null}
       <>
-        <MenuBar editor={editor} disabled={disabled}/>
+        <MenuBar editor={editor} disabled={disabled} id={id}/>
         <EditorContent
-          id={id}
-          tabIndex={0}
-          data-testid="rich-text-editor-content"
           editor={editor}
-          aria-labelledby={`${id}-label`}
-          aria-describedby={
-            helperText ? `${id}-helper-text` : undefined
-          }
-          aria-multiline="true"
-          aria-required={required || undefined}
-          aria-invalid={error || undefined}
-          className={`${error ? "has-error" : ""}`}
         />
       </>
     </div>
@@ -561,6 +583,7 @@ RichTextEditor.propTypes = {
 MenuBar.propTypes = {
   editor: PropTypes.any,
   disabled: PropTypes.bool,
+  id: PropTypes.string,
 };
 
 export default RichTextEditor;