@madie/madie-design-system 1.2.64 → 1.2.65

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.2.64",
+    "version": "1.2.65",
     "description": "Shared style guide across the Madie program.",
     "main": "dist/index.js",
     "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",

package/styles/components/_rich-text-editor.scss

@@ -188,6 +188,11 @@
 			}
 		}
 	}
+
+	.rich-text-editor_read_only {
+		white-space: pre-wrap;
+	}
+	
 	/* Table-specific styling */
 	  table {
 		border-collapse: collapse;

package/styles/qppds/components/_rich-text-editor.scss

@@ -189,6 +189,10 @@
 		}
 	}
 
+	.rich-text-editor_read_only {
+		white-space: pre-wrap;
+	}
+
 	/* Table-specific styling */
 	table {
 		border-collapse: collapse;

package/test/components/RichTextEditor.test.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import RichTextEditor from "../../components/RichTextEditor/index";
+import DOMPurify from "dompurify";
 
 describe("RichTextEditor Component", () => {
     const mockOnChange = jest.fn();
@@ -88,4 +89,28 @@ describe("RichTextEditor Component", () => {
         expect(editorContent).toBeInTheDocument();
         expect(editorContent).toHaveTextContent("Safe Content");
     });
+
+    it("test renders sanitized content with preserved whitespace when readOnly is true", () => {
+        const content = `this is a statement
+                            this is a statement    
+                                this is a statement
+
+                            --------------------- 
+                            this is a statement`;
+
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Label"
+                content={content}
+                onChange={mockOnChange}
+                readOnly
+            />
+        );
+
+        const readOnlyContent = screen.getByTestId("test-editor-value");
+
+        // Ensure the innerHTML matches the sanitized version of the content
+        expect(readOnlyContent.innerHTML).toBe(DOMPurify.sanitize(content));
+    });
 });