@madie/madie-design-system 1.2.58 → 1.2.59

package/components/RichTextEditor/RichTextEditor.stories.js

@@ -13,7 +13,7 @@ export default {
 export const TextEditor = () => {
     const [value, setValue] = useState("test");
 
-    const handleChange = (id, selectedVal) => {
+    const handleChange = (selectedVal) => {
         setValue(selectedVal);
     };
     return (
@@ -22,6 +22,26 @@ export const TextEditor = () => {
             required={true}
             onChange={handleChange}
             content={value}
+            disabled={false}
+        />
+    );
+};
+
+export const ReadOnlyTextEditor = () => {
+    const [value, setValue] = useState(
+        "<p>This is <strong>readonly</strong> content</p>"
+    );
+
+    const handleChange = (selectedVal) => {
+        setValue(selectedVal);
+    };
+    return (
+        <RichTextEditor
+            label="Test Text Editor"
+            required={true}
+            onChange={handleChange}
+            content={value}
+            disabled={true}
         />
     );
 };

package/components/RichTextEditor/index.jsx

@@ -11,7 +11,6 @@ import TableHeader from "@tiptap/extension-table-header";
 import TableRow from "@tiptap/extension-table-row";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
-import { Markdown } from "tiptap-markdown";
 import { IconButton } from "@mui/material";
 import FormatBoldIcon from "@mui/icons-material/FormatBold";
 import FormatItalicIcon from "@mui/icons-material/FormatItalic";
@@ -21,13 +20,15 @@ import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
 import TableChartIcon from "@mui/icons-material/TableChart";
 import { Tooltip } from "@mui/material";
+import { kebabCase } from "lodash";
+import DOMPurify from "dompurify";
 
 const MenuBar = ({ editor }) => {
     if (!editor) {
         return null;
     }
     return (
-        <div className="control-group">
+        <div className="control-group" data-testid="rich-text-editor-toolbar">
             <div className="button-group">
                 <Tooltip
                     data-testid="bold-tooltip"
@@ -174,12 +175,12 @@ const RichTextEditor = ({
     label,
     onChange,
     content,
+    disabled,
 }) => {
     const editor = useEditor(
         {
             extensions: [
                 StarterKit,
-                Markdown,
                 Gapcursor,
                 Table.configure({
                     resizable: true,
@@ -192,21 +193,23 @@ const RichTextEditor = ({
             shouldRerenderOnTransaction: false,
             content,
             onUpdate: ({ editor }) => {
-                const newValue = editor.storage.markdown.getMarkdown();
+                const newValue = editor.getHTML();
                 onChange(newValue);
-                console.log(newValue);
             },
         },
         [content]
     );
     return (
-        <div className="rich-text-editor">
+        <div
+            className="rich-text-editor"
+            data-testid={`${kebabCase(label)}-rich-text-editor`}
+        >
             <InputLabel
                 shrink
                 required={required}
                 error={error}
                 htmlFor={id}
-                style={{ marginBottom: 0, height: 16 }} // force a heignt
+                style={{ marginBottom: 0, height: 16 }} // force a height
                 sx={[
                     {
                         backgroundColor: "transparent",
@@ -241,8 +244,21 @@ const RichTextEditor = ({
             >
                 {label}
             </InputLabel>
-            <MenuBar editor={editor} />
-            <EditorContent editor={editor} />
+            {disabled ? (
+                    <p
+                        data-testid={`${id}-value`}
+                        aria-labelledby={label}
+                        dangerouslySetInnerHTML={{
+                            __html: content ? DOMPurify.sanitize(content) : "-",
+                        }}
+                    />
+
+                ) : (
+                    <>
+                        <MenuBar editor={editor}/>
+                        <EditorContent editor={editor}/>
+                    </>
+                )}
         </div>
     );
 };
@@ -254,6 +270,7 @@ RichTextEditor.propTypes = {
     label: PropTypes.string,
     onChange: PropTypes.func,
     content: PropTypes.any,
+    disabled: PropTypes.bool,
 };
 
 MenuBar.propTypes = {

package/components/Select/index.jsx

@@ -31,15 +31,6 @@ const Select = ({
     );
     return (
         <FormControl error={error} fullWidth>
-            {/* to deal with multiple height helper text in a single row*/}
-            <div
-                style={{
-                    width: 1,
-                    display: "flex",
-                    flexDirection: "column",
-                    flexGrow: 1,
-                }}
-            />
             <InputLabel
                 // {/* has init at .2rem/3.2 px bottom. passing sx breaks style. */}
                 id={`${id}-label`}