@madie/madie-design-system 1.2.72 → 1.2.73

package/components/RichTextEditor/index.jsx

@@ -40,213 +40,213 @@ const iconStyle = {
   display: "block",
 };
 
-const MenuBar = ({ editor, disabled }) => {
-    if (!editor) {
-        return null;
-    }
-    return (
-        <div
-            className="control-group"
-            role="toolbar"
-            aria-label="Text formatting toolbar"
-            data-testid="rich-text-editor-toolbar"
+const MenuBar = ({editor, disabled}) => {
+  if (!editor) {
+    return null;
+  }
+  return (
+    <div
+      className="control-group"
+      role="toolbar"
+      aria-label="Text formatting toolbar"
+      data-testid="rich-text-editor-toolbar"
+    >
+      <div className="button-group">
+        <Tooltip
+          data-testid="undo-tooltip"
+          title="Undo"
+          placement="top"
+          enterDelay={1000}
+          arrow
+        >
+          <IconButton
+            key={"undo"}
+            onClick={() =>
+              editor.chain().focus().undo().run()
+            }
+          >
+            <UndoIcon/>
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          data-testid="redo-tooltip"
+          title="Redo"
+          placement="top"
+          enterDelay={1000}
+          arrow
+        >
+          <IconButton
+            key={"redo"}
+            onClick={() =>
+              editor.chain().focus().redo().run()
+            }
+            style={{borderRight: "solid 1px #9c9c9c"}}
+          >
+            <RedoIcon/>
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          data-testid="bold-tooltip"
+          title="Bold"
+          placement="top"
+          enterDelay={1000}
+          arrow
+        >
+          <IconButton
+            key={"bold"}
+            onClick={() =>
+              editor.chain().focus().toggleBold().run()
+            }
+            aria-label="Bold"
+            aria-pressed={editor.isActive("bold")}
+            className={editor.isActive("bold") ? "is-active" : ""}
+            disabled={disabled}
+            type="button"
+          >
+            <FormatBoldIcon/>
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          data-testid="italic-tooltip"
+          title="Italic"
+          placement="top"
+          enterDelay={1000}
+          arrow
+        >
+          <IconButton
+            key={"italic"}
+            onClick={() =>
+              editor.chain().focus().toggleItalic().run()
+            }
+            aria-label="Italic"
+            aria-pressed={editor.isActive("italic")}
+            className={editor.isActive("italic") ? "is-active" : ""}
+            disabled={disabled}
+            type="button"
+          >
+            <FormatItalicIcon/>
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          data-testid="underline-tooltip"
+          title="Underline"
+          placement="top"
+          enterDelay={1000}
+          arrow
         >
-            <div className="button-group">
-                <Tooltip
-                    data-testid="undo-tooltip"
-                    title="Undo"
-                    placement="top"
-                    enterDelay={1000}
-                    arrow
-                >
-                    <IconButton
-                        key={"undo"}
-                        onClick={() =>
-                            editor.chain().focus().undo().run()
-                        }
-                    >
-                        <UndoIcon />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip
-                    data-testid="redo-tooltip"
-                    title="Redo"
-                    placement="top"
-                    enterDelay={1000}
-                    arrow
-                >
-                    <IconButton
-                        key={"redo"}
-                        onClick={() =>
-                            editor.chain().focus().redo().run()
-                        }
-                        style={{ borderRight: "solid 1px #9c9c9c" }}
-                    >
-                        <RedoIcon />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip
-                    data-testid="bold-tooltip"
-                    title="Bold"
-                    placement="top"
-                    enterDelay={1000}
-                    arrow
-                >
-                    <IconButton
-                        key={"bold"}
-                        onClick={() =>
-                            editor.chain().focus().toggleBold().run()
-                        }
-                        aria-label="Bold"
-                        aria-pressed={editor.isActive("bold")}
-                        className={editor.isActive("bold") ? "is-active" : ""}
-                        disabled={disabled}
-                        type="button"
-                    >
-                        <FormatBoldIcon />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip
-                    data-testid="italic-tooltip"
-                    title="Italic"
-                    placement="top"
-                    enterDelay={1000}
-                    arrow
-                >
-                    <IconButton
-                        key={"italic"}
-                        onClick={() =>
-                            editor.chain().focus().toggleItalic().run()
-                        }
-                        aria-label="Italic"
-                        aria-pressed={editor.isActive("italic")}
-                        className={editor.isActive("italic") ? "is-active" : ""}
-                        disabled={disabled}
-                        type="button"
-                    >
-                        <FormatItalicIcon />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip
-                    data-testid="underline-tooltip"
-                    title="Underline"
-                    placement="top"
-                    enterDelay={1000}
-                    arrow
-                >
-                    <IconButton
-                        key={"underline"}
-                        onClick={() =>
-                            editor.chain().focus().toggleUnderline().run()
-                        }
-                        aria-label="Underline"
-                        aria-pressed={editor.isActive("underline")}
-                        className={
-                            editor.isActive("underline") ? "is-active" : ""
-                        }
-                        disabled={disabled}
-                        type="button"
-                    >
-                        <FormatUnderlinedIcon />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip
-                    data-testid="strikethrough-tooltip"
-                    title="Strikethrough"
-                    placement="top"
-                    enterDelay={1000}
-                    arrow
-                >
-                    <IconButton
-                        key={"strike"}
-                        onClick={() =>
-                            editor.chain().focus().toggleStrike().run()
-                        }
-                        aria-label="Strikethrough"
-                        aria-pressed={editor.isActive("strike")}
-                        className={editor.isActive("strike") ? "is-active" : ""}
-                        style={{ borderRight: "solid 1px #9c9c9c" }}
-                        disabled={disabled}
-                        type="button"
-                    >
-                        <StrikethroughSIcon />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip
-                    data-testid="orderedlist-tooltip"
-                    title="Ordered List"
-                    placement="top"
-                    enterDelay={1000}
-                    arrow
-                >
-                    <IconButton
-                        key={"orderedList"}
-                        onClick={() =>
-                            editor.chain().focus().toggleOrderedList().run()
-                        }
-                        aria-label="Ordered List"
-                        aria-pressed={editor.isActive("orderedList")}
-                        className={
-                            editor.isActive("orderedList") ? "is-active" : ""
-                        }
-                        disabled={disabled}
-                        type="button"
-                    >
-                        <FormatListNumberedIcon />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip
-                    data-testid="bulletedlist-tooltip"
-                    title="Bulleted List"
-                    placement="top"
-                    enterDelay={1000}
-                    arrow
-                >
-                    <IconButton
-                        key={"bulletList"}
-                        onClick={() =>
-                            editor.chain().focus().toggleBulletList().run()
-                        }
-                        aria-label="Bulleted List"
-                        aria-pressed={editor.isActive("bulletList")}
-                        className={
-                            editor.isActive("bulletList") ? "is-active" : ""
-                        }
-                        style={{ borderRight: "solid 1px #9c9c9c" }}
-                        disabled={disabled}
-                        type="button"
-                    >
-                        <FormatListBulletedIcon />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip
-                    data-testid="table-tooltip"
-                    title="Table"
-                    placement="top"
-                    enterDelay={1000}
-                    arrow
-                >
-                    <IconButton
-                        key={"insertTable"}
-                        onClick={() =>
-                            editor.commands.insertTable({
-                                rows: 3,
-                                cols: 3,
-                                withHeaderRow: true,
-                            })
-                        }
-                        aria-label="Insert Table"
-                        className={
-                            editor.isActive("insertTable") ? "is-active" : ""
-                        }
-                        disabled={disabled}
-                        type="button"
-                    >
+          <IconButton
+            key={"underline"}
+            onClick={() =>
+              editor.chain().focus().toggleUnderline().run()
+            }
+            aria-label="Underline"
+            aria-pressed={editor.isActive("underline")}
+            className={
+              editor.isActive("underline") ? "is-active" : ""
+            }
+            disabled={disabled}
+            type="button"
+          >
+            <FormatUnderlinedIcon/>
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          data-testid="strikethrough-tooltip"
+          title="Strikethrough"
+          placement="top"
+          enterDelay={1000}
+          arrow
+        >
+          <IconButton
+            key={"strike"}
+            onClick={() =>
+              editor.chain().focus().toggleStrike().run()
+            }
+            aria-label="Strikethrough"
+            aria-pressed={editor.isActive("strike")}
+            className={editor.isActive("strike") ? "is-active" : ""}
+            style={{borderRight: "solid 1px #9c9c9c"}}
+            disabled={disabled}
+            type="button"
+          >
+            <StrikethroughSIcon/>
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          data-testid="orderedlist-tooltip"
+          title="Ordered List"
+          placement="top"
+          enterDelay={1000}
+          arrow
+        >
+          <IconButton
+            key={"orderedList"}
+            onClick={() =>
+              editor.chain().focus().toggleOrderedList().run()
+            }
+            aria-label="Ordered List"
+            aria-pressed={editor.isActive("orderedList")}
+            className={
+              editor.isActive("orderedList") ? "is-active" : ""
+            }
+            disabled={disabled}
+            type="button"
+          >
+            <FormatListNumberedIcon/>
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          data-testid="bulletedlist-tooltip"
+          title="Bulleted List"
+          placement="top"
+          enterDelay={1000}
+          arrow
+        >
+          <IconButton
+            key={"bulletList"}
+            onClick={() =>
+              editor.chain().focus().toggleBulletList().run()
+            }
+            aria-label="Bulleted List"
+            aria-pressed={editor.isActive("bulletList")}
+            className={
+              editor.isActive("bulletList") ? "is-active" : ""
+            }
+            style={{borderRight: "solid 1px #9c9c9c"}}
+            disabled={disabled}
+            type="button"
+          >
+            <FormatListBulletedIcon/>
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          data-testid="table-tooltip"
+          title="Table"
+          placement="top"
+          enterDelay={1000}
+          arrow
+        >
+          <IconButton
+            key={"insertTable"}
+            onClick={() =>
+              editor.commands.insertTable({
+                rows: 3,
+                cols: 3,
+                withHeaderRow: true,
+              })
+            }
+            aria-label="Insert Table"
+            className={
+              editor.isActive("insertTable") ? "is-active" : ""
+            }
+            disabled={disabled}
+            type="button"
+          >
 
-                        <TableChartIcon />
-                    </IconButton>
-                </Tooltip>
-                     {editor.isActive("table") && (
+            <TableChartIcon/>
+          </IconButton>
+        </Tooltip>
+        {editor.isActive("table") && (
           <>
             <Tooltip
               data-testid="add-row-above-tooltip"
@@ -259,7 +259,7 @@ const MenuBar = ({ editor, disabled }) => {
                 key="addRowAbove"
                 onClick={() => editor.chain().focus().addRowBefore().run()}
               >
-                <AddRowAboveIcon style={iconStyle} />
+                <AddRowAboveIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
             <Tooltip
@@ -273,7 +273,7 @@ const MenuBar = ({ editor, disabled }) => {
                 key="addRowBelow"
                 onClick={() => editor.chain().focus().addRowAfter().run()}
               >
-                <AddRowBelowIcon style={iconStyle} />
+                <AddRowBelowIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
 
@@ -288,7 +288,7 @@ const MenuBar = ({ editor, disabled }) => {
                 key="deleteRow"
                 onClick={() => editor.chain().focus().deleteRow().run()}
               >
-                <DeleteRowIcon style={iconStyle} />
+                <DeleteRowIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
             <Tooltip
@@ -302,7 +302,7 @@ const MenuBar = ({ editor, disabled }) => {
                 key="addColumnRight"
                 onClick={() => editor.chain().focus().addColumnAfter().run()}
               >
-                <AddColumnRightIcon style={iconStyle} />
+                <AddColumnRightIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
             <Tooltip
@@ -316,7 +316,7 @@ const MenuBar = ({ editor, disabled }) => {
                 key="addColumnLeft"
                 onClick={() => editor.chain().focus().addColumnBefore().run()}
               >
-                <AddColumnLeftIcon style={iconStyle} />
+                <AddColumnLeftIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
 
@@ -331,7 +331,7 @@ const MenuBar = ({ editor, disabled }) => {
                 key="deleteColumn"
                 onClick={() => editor.chain().focus().deleteColumn().run()}
               >
-                <DeleteColumnIcon style={iconStyle} />
+                <DeleteColumnIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
 
@@ -345,9 +345,9 @@ const MenuBar = ({ editor, disabled }) => {
               <IconButton
                 key="deleteTable"
                 onClick={() => editor.chain().focus().deleteTable().run()}
-                style={{ borderRight: "solid 1px #9c9c9c" }}
+                style={{borderRight: "solid 1px #9c9c9c"}}
               >
-                <DeleteTableIcon style={iconStyle} />
+                <DeleteTableIcon style={iconStyle}/>
               </IconButton>
             </Tooltip>
           </>
@@ -358,28 +358,74 @@ const MenuBar = ({ editor, disabled }) => {
 };
 
 const RichTextEditor = ({
-    name,
-    id,
-    error = false,
-    helperText,
-    required = false,
-    label,
-    onChange,
-    onBlur,
-    content,
-    disabled = false,
-    readOnly = false,
+  name,
+  id,
+  error = false,
+  helperText,
+  required = false,
+  label,
+  onChange,
+  onBlur,
+  content,
+  disabled = false,
+  readOnly = false,
 }) => {
-  if(readOnly) {
+  const labelStyles = [
+    {
+      backgroundColor: "transparent",
+      borderColor: "#8C8C8C",
+      display: "inline-flex",
+      flexDirection: "row-reverse",
+      alignSelf: "baseline",
+      textTransform: "none",
+      // force it outside the select box
+      position: "initial",
+      transform: "translateX(0px) translateY(0px)",
+      fontFamily: "Rubik",
+      fontWeight: 500,
+      fontSize: 14,
+      color: "#333",
+      "& .MuiInputLabel-asterisk": {
+        color: "#AE1C1C !important",
+        marginRight: "3px !important", //this was
+      },
+    },
+    required && {
+      transform: "translateX(-12px) translateY(0px)",
+      "& .MuiInputLabel-asterisk": {
+        color: "#D92F2",
+        marginRight: "3px !important", //this was
+      },
+    },
+    error && {
+      color: "#AE1C1C !important",
+    },
+  ];
+
+  if (readOnly) {
     return (
-      <p
-        className="rich-text-editor_read_only"
-        data-testid={`${id}-value`}
-        aria-labelledby={`${id}-label`}
-        dangerouslySetInnerHTML={{
-          __html: content ? DOMPurify.sanitize(content) : "-",
-        }}
-      />
+      <div className="rich-text-editor" data-testid={`${kebabCase(id)}-rich-text-editor`}>
+        <InputLabel
+          id={`${id}-label`}
+          shrink
+          required={required}
+          error={error}
+          htmlFor={id}
+          style={{marginBottom: 0, height: 16}} // force a height
+          sx={labelStyles}
+          disabled={false}
+        >
+          {label}
+        </InputLabel>
+        <p
+          className="rich-text-editor_read_only"
+          data-testid={`${id}-value`}
+          aria-labelledby={`${id}-label`}
+          dangerouslySetInnerHTML={{
+            __html: content ? DOMPurify.sanitize(content) : "-",
+          }}
+        />
+      </div>
     );
   }
 
@@ -402,7 +448,7 @@ const RichTextEditor = ({
       Underline,
       Strike.extend({
         strike: false, // disable default strike through
-        renderHTML({ HTMLAttributes }) {
+        renderHTML({HTMLAttributes}) {
           return ["del", HTMLAttributes, 0];
         },
       }),
@@ -410,7 +456,7 @@ const RichTextEditor = ({
     shouldRerenderOnTransaction: false,
     content,
     editable: !disabled,
-    onUpdate: ({ editor }) => {
+    onUpdate: ({editor}) => {
       const newValue = editor.getHTML();
       onChange?.(newValue);
     },
@@ -426,124 +472,95 @@ const RichTextEditor = ({
   }, [content, editor, disabled]);
 
   React.useEffect(() => {
-        if (!editor || !onBlur || !name) return;
+    if (!editor || !onBlur || !name) return;
 
-        const handleBlur = () => {
-            onBlur({ target: { name } });
-        };
+    const handleBlur = () => {
+      onBlur({target: {name}});
+    };
 
-        editor.on("blur", handleBlur);
+    editor.on("blur", handleBlur);
 
-        return () => {
-            editor.off("blur", handleBlur);
-        };
-    }, [editor, onBlur, name]);
+    return () => {
+      editor.off("blur", handleBlur);
+    };
+  }, [editor, onBlur, name]);
 
-    return (
-        <div
-            className="rich-text-editor"
-            data-testid={`${kebabCase(id)}-rich-text-editor`}
-        >
-            <InputLabel
-                id={`${id}-label`}
-                shrink
-                required={required}
-                error={error}
-                htmlFor={id}
-                style={{ marginBottom: 0, height: 16 }} // force a height
-                sx={[
-                    {
-                        backgroundColor: "transparent",
-                        borderColor: "#8C8C8C",
-                        display: "inline-flex",
-                        flexDirection: "row-reverse",
-                        alignSelf: "baseline",
-                        textTransform: "none",
-                        // force it outside the select box
-                        position: "initial",
-                        transform: "translateX(0px) translateY(0px)",
-                        fontFamily: "Rubik",
-                        fontWeight: 500,
-                        fontSize: 14,
-                        color: "#333",
-                        "& .MuiInputLabel-asterisk": {
-                            color: "#AE1C1C !important",
-                            marginRight: "3px !important", //this was
-                        },
-                    },
-                    required && {
-                        transform: "translateX(-12px) translateY(0px)",
-                        "& .MuiInputLabel-asterisk": {
-                            color: "#D92F2",
-                            marginRight: "3px !important", //this was
-                        },
-                    },
-                    error && {
-                        color: "#AE1C1C !important",
-                    },
-                ]}
-            >
-                {label}
-            </InputLabel>
+  return (
+    <div
+      className="rich-text-editor"
+      data-testid={`${kebabCase(id)}-rich-text-editor`}
+    >
+      <InputLabel
+        id={`${id}-label`}
+        shrink
+        required={required}
+        error={error}
+        htmlFor={id}
+        style={{marginBottom: 0, height: 16}} // force a height
+        sx={labelStyles}
+        disabled
+      >
+        {label}
+      </InputLabel>
 
-            {helperText && (
-                <FormHelperText
-                    tabIndex={0}
-                    aria-live="polite"
-                    id={`${id}-helper-text`}
-                    data-testid={`${id}-helper-text`}
-                    sx={[
-                        {
-                            margin: "4px 0px 0px 0px",
-                            color: "#515151",
-                            lineHeight: 1,
-                        },
-                        error && {
-                            color: "#AE1C1C !important",
-                        },
-                    ]}
-                >
-                    {helperText}
-                </FormHelperText>
-            )}
-            <>
-                <MenuBar editor={editor} disabled={disabled} />
-                <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>
-    );
+      {helperText && (
+        <FormHelperText
+          tabIndex={0}
+          aria-live="polite"
+          id={`${id}-helper-text`}
+          data-testid={`${id}-helper-text`}
+          sx={[
+            {
+              margin: "4px 0px 0px 0px",
+              color: "#515151",
+              lineHeight: 1,
+            },
+            error && {
+              color: "#AE1C1C !important",
+            },
+          ]}
+        >
+          {helperText}
+        </FormHelperText>
+      )}
+      <>
+        <MenuBar editor={editor} disabled={disabled}/>
+        <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>
+  );
 };
 
 RichTextEditor.propTypes = {
   id: PropTypes.string,
-    name: PropTypes.string,
+  name: PropTypes.string,
   error: PropTypes.bool,
-    helperText: PropTypes.string,
+  helperText: PropTypes.string,
   required: PropTypes.bool,
   label: PropTypes.string,
   onChange: PropTypes.func,
-    onBlur: PropTypes.func,
+  onBlur: PropTypes.func,
   content: PropTypes.any,
   disabled: PropTypes.bool,
-    readOnly: PropTypes.bool,
+  readOnly: PropTypes.bool,
 };
 
 MenuBar.propTypes = {
   editor: PropTypes.any,
-    disabled: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 export default RichTextEditor;