CRDCDH-3760 Implement Rich Text Editor and add to SRF review comments

apps/frontend/package.json

@@ -53,7 +53,11 @@
     "react-transition-group": "^4.4.5",
     "recharts": "^2.12.0",
     "redux": "^4.2.1",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "slate": "^0.124.1",
+    "slate-history": "^0.113.1",
+    "slate-react": "^0.124.2",
     "uuid": "^11.1.0",
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.3.0",

apps/frontend/src/components/Questionnaire/ReviewFormDialog.test.tsx

@@ -5,6 +5,42 @@ import { render, waitFor, within } from "../../test-utils";
 
 import ReviewFormDialog from "./ReviewFormDialog";
 
+vi.mock("../RichTextEditor", () => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+  const { forwardRef } = require("react");
+  return {
+    default: forwardRef(
+      ({
+        value,
+        onChange,
+        onTextLengthChange,
+        "data-testid": dataTestId,
+        placeholder,
+        disabled,
+      }: {
+        value: string;
+        onChange: (v: string) => void;
+        onTextLengthChange?: (n: number) => void;
+        "data-testid"?: string;
+        placeholder?: string;
+        disabled?: boolean;
+      }) => (
+        <div data-testid={dataTestId}>
+          <textarea
+            placeholder={placeholder}
+            disabled={disabled}
+            value={value}
+            onChange={(e) => {
+              onChange(e.target.value);
+              onTextLengthChange?.(e.target.value.length);
+            }}
+          />
+        </div>
+      )
+    ),
+  };
+});
+
 beforeEach(() => {
   vi.clearAllMocks();
 });
@@ -129,7 +165,7 @@ describe("Implementation Requirements", () => {
     expect(getByTestId("review-form-dialog-confirm-button")).not.toBeDisabled();
   });
 
-  it("should not allow typing more than 10,000 characters in the review comment input field", async () => {
+  it("should show a validation error when the review comment exceeds 10,000 characters", async () => {
     const mockOnSubmit = vi.fn();
 
     const { getByTestId } = render(
@@ -139,15 +175,13 @@ describe("Implementation Requirements", () => {
     const input = within(getByTestId("review-comment")).getByRole("textbox");
     userEvent.paste(input, "X".repeat(10_050));
 
-    expect(input).toHaveValue("X".repeat(10_000));
-
     userEvent.click(getByTestId("review-form-dialog-confirm-button"));
 
     await waitFor(() => {
-      expect(mockOnSubmit).toHaveBeenCalledTimes(1);
+      expect(getByTestId("review-comment-dialog-error")).toBeInTheDocument();
     });
 
-    expect(mockOnSubmit).toHaveBeenCalledWith(expect.stringMatching(/^X{10000}$/));
+    expect(mockOnSubmit).not.toHaveBeenCalled();
   });
 
   it("should display a character counter that updates as the user types", () => {

apps/frontend/src/components/Questionnaire/ReviewFormDialog.tsx

@@ -1,35 +1,14 @@
 import { LoadingButton } from "@mui/lab";
 import { Box, Button, ButtonProps, DialogProps, Typography, styled } from "@mui/material";
 import { isEqual } from "lodash";
-import { FC, ReactNode, memo, useMemo } from "react";
+import { FC, ReactNode, memo, useCallback, useMemo, useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import Dialog from "../GenericDialog";
+import RichTextEditor from "../RichTextEditor";
+import type { RichTextEditorHandle } from "../RichTextEditor";
+import { getPlainTextLength } from "../RichTextEditor/utils/markdown/markdownSerializer";
 import StyledHelperText from "../StyledFormComponents/StyledHelperText";
-import BaseOutlinedInput from "../StyledFormComponents/StyledOutlinedInput";
-
-const StyledOutlinedInput = styled(BaseOutlinedInput)({
-  marginTop: "24px",
-  width: "fit-content",
-  maxWidth: "100%",
-  "&.MuiInputBase-multiline": {
-    padding: "12px",
-    alignItems: "flex-start",
-  },
-  "& textarea.MuiInputBase-inputMultiline": {
-    resize: "both",
-    overflow: "auto !important",
-    padding: 0,
-    lineHeight: "25px",
-    width: "min(600px, calc(100vw - 150px))",
-    minWidth: "min(750px, calc(100vw - 150px))",
-    maxWidth: "min(1440px, 80vw)",
-    height: "min(375px, calc(100vh - 340px))",
-    minHeight: "clamp(100px, calc(100vh - 340px), 375px)",
-    maxHeight: "min(500px, calc(100vh - 340px))",
-    boxSizing: "border-box",
-  },
-});
 
 const StyledCharacterCount = styled(Box)({
   display: "flex",
@@ -96,7 +75,6 @@ const ReviewFormDialog: FC<Props> = ({
 }) => {
   const {
     handleSubmit,
-    watch,
     control,
     reset,
     formState: { errors },
@@ -108,11 +86,13 @@ const ReviewFormDialog: FC<Props> = ({
     },
   });
 
-  const reviewComment = watch("reviewComment");
+  const [plainTextLength, setPlainTextLength] = useState(0);
+
+  const editorRef = useRef<RichTextEditorHandle>(null);
+
   const reviewCommentLengthLabel = useMemo(
-    () =>
-      Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(reviewComment?.length || 0),
-    [reviewComment]
+    () => Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(plainTextLength),
+    [plainTextLength]
   );
   const reviewCommentLimitLabel = Intl.NumberFormat("en-US", {
     maximumFractionDigits: 0,
@@ -126,11 +106,17 @@ const ReviewFormDialog: FC<Props> = ({
     onCancel?.();
   };
 
+  const handleExited = useCallback(() => {
+    reset();
+    setPlainTextLength(0);
+    editorRef.current?.reset();
+  }, [reset]);
+
   return (
     <StyledDialog
       open={open}
       onClose={handleOnCancel}
-      TransitionProps={{ onExited: () => reset() }}
+      TransitionProps={{ onExited: handleExited }}
       title={header}
       scroll="body"
       actions={
@@ -145,7 +131,7 @@ const ReviewFormDialog: FC<Props> = ({
           <LoadingButton
             data-testid="review-form-dialog-confirm-button"
             onClick={handleSubmit(handleOnSubmit)}
-            disabled={!reviewComment?.trim()?.length || loading}
+            disabled={!plainTextLength || loading}
             loading={loading}
             {...confirmButtonProps}
           >
@@ -160,25 +146,22 @@ const ReviewFormDialog: FC<Props> = ({
         control={control}
         rules={{
           validate: {
-            required: (v: string) => v.trim() !== "" || "This field is required",
+            required: (v: string) => getPlainTextLength(v) > 0 || "This field is required",
             maxLength: (v: string) =>
-              v.trim().length <= MAX_REVIEW_COMMENT_LIMIT ||
+              getPlainTextLength(v) <= MAX_REVIEW_COMMENT_LIMIT ||
               `Maximum of ${reviewCommentLimitLabel} characters allowed`,
           },
         }}
         render={({ field }) => (
-          <StyledOutlinedInput
-            {...field}
-            inputProps={{
-              maxLength: MAX_REVIEW_COMMENT_LIMIT,
-              "aria-label": "Review comment input",
-            }}
-            name="reviewComment"
+          <RichTextEditor
+            ref={editorRef}
+            value={field.value}
+            onChange={field.onChange}
+            onTextLengthChange={setPlainTextLength}
             placeholder={`${reviewCommentLimitLabel} characters allowed`}
+            disabled={loading}
+            aria-label="Review comment input"
             data-testid="review-comment"
-            sx={{ paddingY: "16px" }}
-            required
-            multiline
           />
         )}
       />

apps/frontend/src/components/ReviewCommentsDialog/index.tsx

@@ -12,6 +12,7 @@ import { CSSProperties } from "react";
 
 import CloseIconSvg from "../../assets/icons/close_icon.svg?react";
 import { FormatDate } from "../../utils";
+import RichTextViewer from "../RichTextViewer";
 
 const StyledDialog = styled(Dialog, {
   shouldForwardProp: (prop) => prop !== "status" && prop !== "getColorScheme",
@@ -72,8 +73,18 @@ const StyledDialogContent = styled(DialogContent)({
   marginBottom: "11px",
   minHeight: "44px",
   overflowX: "hidden",
-  whiteSpace: "pre-line",
   overflowWrap: "break-word",
+  "& p": {
+    margin: "0 0 4px 0",
+    "&:last-child": { marginBottom: 0 },
+  },
+  "& ul, & ol": {
+    margin: "0 0 4px 0",
+    paddingLeft: "24px",
+  },
+  "& li": {
+    lineHeight: "1.6",
+  },
 });
 
 const StyledSubTitle = styled("p")({
@@ -177,7 +188,9 @@ const ReviewCommentsDialog = <T, H>({
         {`Based on submission from ${FormatDate(lastReview?.dateTime, "M/D/YYYY", "N/A")}:`}
       </StyledSubTitle>
     </StyledDialogTitle>
-    <StyledDialogContent>{lastReview?.reviewComment}</StyledDialogContent>
+    <StyledDialogContent>
+      <RichTextViewer content={lastReview?.reviewComment ?? ""} />
+    </StyledDialogContent>
     <DialogActions>
       <StyledCloseButton
         id="close-review-comments-button"

apps/frontend/src/components/RichTextEditor/Controller.test.tsx

@@ -0,0 +1,63 @@
+import { createEditor } from "slate";
+import { withHistory } from "slate-history";
+import { withReact } from "slate-react";
+
+import { render } from "../../test-utils";
+
+import Controller from "./Controller";
+
+const mockReset = vi.fn();
+
+vi.mock("./hooks/useRichTextEditor", () => ({
+  useRichTextEditor: () => ({
+    editor: withHistory(withReact(createEditor())),
+    initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
+    handleChange: vi.fn(),
+    handleKeyDown: vi.fn(),
+    renderElement: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    renderLeaf: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+    reset: mockReset,
+  }),
+}));
+
+vi.mock("./Toolbar", () => ({
+  default: () => <div data-testid="toolbar" />,
+}));
+
+describe("RichTextEditor Controller", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render without crashing", () => {
+    expect(() => render(<Controller value="" onChange={vi.fn()} />)).not.toThrow();
+  });
+
+  it("should render the toolbar when not disabled", () => {
+    const { getByTestId } = render(<Controller value="" onChange={vi.fn()} />);
+
+    expect(getByTestId("toolbar")).toBeInTheDocument();
+  });
+
+  it("should not render the toolbar when disabled", () => {
+    const { queryByTestId } = render(<Controller value="" onChange={vi.fn()} disabled />);
+
+    expect(queryByTestId("toolbar")).not.toBeInTheDocument();
+  });
+
+  it("should apply aria-label to the editable area", () => {
+    const { getByRole } = render(
+      <Controller value="" onChange={vi.fn()} aria-label="Comment input" />
+    );
+
+    expect(getByRole("textbox", { name: "Comment input" })).toBeInTheDocument();
+  });
+
+  it("should set the editable to read-only when disabled", () => {
+    const { getByLabelText } = render(
+      <Controller value="" onChange={vi.fn()} disabled aria-label="Comment input" />
+    );
+
+    expect(getByLabelText("Comment input")).toHaveAttribute("contenteditable", "false");
+  });
+});