22500 Phase 2: extract rich multiline leaf renderer

components/elements/fields/renderRichMultiline.js

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import dynamic from "next/dynamic";
+import { updateLinks } from "../../utils";
+
+const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
+
+export const RenderRichMultiline = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    meta: { touched, error },
+    ...custom
+}) => {
+    const [editValue, setEditValue] = useState(
+        input.value != null ? input.value : ""
+    );
+
+    const changeEdit = (valStr) => {
+        setEditValue(valStr);
+        input.onChange(valStr);
+    };
+
+    const handleBlur = () => {
+        const updated = updateLinks(editValue);
+        setEditValue(updated);
+        input.onChange(updated);
+    };
+
+    var modules = {
+        toolbar: [
+            [{ "header": [1, 2, false] }],
+            ["bold", "italic", "underline", "blockquote"],
+            [{ "list": "ordered" }, { "list": "bullet" }],
+            ["clean"]
+        ]
+    };
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label" htmlFor={name}>
+                    {label}
+                </label>
+
+                {error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {error}
+                    </span>
+                )}
+
+                <ReactQuill
+                    modules={modules}
+                    theme="snow"
+                    value={editValue}
+                    onChange={changeEdit}
+                    onBlur={handleBlur}
+                />
+                <textarea
+                    {...input}
+                    id={id}
+                    name={name}
+                    rows={rows}
+                    className={className}
+                    value={editValue}
+                    style={{ display: "none" }}
+                ></textarea>
+            </div>
+        </>
+    );
+};

components/elements/index.js

@@ -19,12 +19,7 @@ import {
 import fieldLookup from "../../data/crmfieldlookuptranslations.json";
 import pickListLookup from "../../data/picklistLookups.json";
 
-import dynamic from "next/dynamic";
+import { bytesToSize, getThumbnailIconByExtension } from "../utils";
-import {
-    bytesToSize,
-    getThumbnailIconByExtension,
-    updateLinks
-} from "../utils";
 import { setFileCount } from "../../store/appealType/action";
 
 import {
@@ -37,7 +32,6 @@ import {
     subYears
 } from "date-fns";
 import "react-quill-new/dist/quill.snow.css";
-const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
 
 import { useStore as store, useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
@@ -51,6 +45,7 @@ import {
     getFieldTranslation,
     getPickListTranslation
 } from "./helpers/translationHelpers";
+import { RenderRichMultiline } from "./fields/renderRichMultiline";
 
 const RenderTextfield = ({
     id,
@@ -472,82 +467,6 @@ export function MultiLinefield(props) {
     );
 }
 
-export const RenderRichMultiline = ({
-    id,
-    className,
-    rows,
-    datafieldname,
-    name,
-    label,
-    input,
-    meta: { touched, error },
-    ...custom
-}) => {
-    const [editValue, setEditValue] = useState(
-        input.value != null ? input.value : ""
-    );
-
-    const changeEdit = (valStr) => {
-        setEditValue(valStr);
-        input.onChange(valStr);
-    };
-
-    const handleBlur = () => {
-        const updated = updateLinks(editValue);
-        setEditValue(updated);
-        input.onChange(updated);
-    };
-
-    var modules = {
-        toolbar: [
-            [{ "header": [1, 2, false] }],
-            ["bold", "italic", "underline", "blockquote"],
-            [{ "list": "ordered" }, { "list": "bullet" }],
-            ["clean"]
-        ]
-    };
-
-    return (
-        <>
-            <div
-                className={
-                    touched && error
-                        ? "govuk-form-group govuk-form-group--error"
-                        : "govuk-form-group "
-                }
-            >
-                <label className="govuk-label" htmlFor={name}>
-                    {label}
-                </label>
-
-                {error && (
-                    <span id={id + "-error"} className="govuk-error-message">
-                        <span className="govuk-visually-hidden">Error:</span>{" "}
-                        {error}
-                    </span>
-                )}
-
-                <ReactQuill
-                    modules={modules}
-                    theme="snow"
-                    value={editValue}
-                    onChange={changeEdit}
-                    onBlur={handleBlur}
-                />
-                <textarea
-                    {...input}
-                    id={id}
-                    name={name}
-                    rows={rows}
-                    className={className}
-                    value={editValue}
-                    style={{ display: "none" }}
-                ></textarea>
-            </div>
-        </>
-    );
-};
-
 export function RichMultiLinefield(props) {
     const {
         name,

memory-bank/change-log.md

@@ -52,6 +52,30 @@ Follow-ups:
 - Phase 2: extract low-risk leaf field renderer components from `components/elements/index.js` in bounded slices.
 - Perform manual EN/CY + a11y smoke matrix on new appeal/myportal form journeys before merge.
 
+### CL-00Y: 22500 `components/elements/index.js` Phase 2 leaf renderer extraction (Rich multiline)
+
+date: 2026-04-07  
+author: Cline  
+scope: `components/elements/index.js`, `components/elements/fields/renderRichMultiline.js`  
+type: change  
+rationale: Continue the approved phased decomposition by extracting one low-risk leaf renderer (`RenderRichMultiline`) from the elements monolith while keeping existing field wiring and behavior intact.  
+impact: Refactor-only move of rich multiline renderer implementation; no route/API/auth/security changes and no intended EN/CY behavior change.  
+status: completed
+
+Summary:
+
+- Added `components/elements/fields/renderRichMultiline.js` containing the extracted `RenderRichMultiline` renderer.
+- Updated `components/elements/index.js` to import the extracted renderer and removed the inline duplicate implementation.
+- Kept `RichMultiLinefield` usage and props unchanged (same Redux Field component wiring and validation flow).
+
+Validation:
+
+- `npx eslint components/elements/index.js components/elements/fields/renderRichMultiline.js` -> pass
+
+Follow-ups:
+
+- Continue Phase 2 in bounded slices by extracting additional low-risk leaf renderers (e.g., `RenderMultiline` / `RenderTextfield`) with no behavior change.
+
 ### CL-001: TASK22211 endpoint search-document contract consistency slice
 
 date: 2026-03-23