robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

22500 Phase 2: extract rich multiline leaf renderer

Browse Source
This commit is contained in:
robbond
2026-04-07 09:40:25 +01:00
parent 06b7855826
commit 5b9498b3ef
3 changed files with 107 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/fields/renderRichMultiline.js
+81
View File
@@ -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
+2 -83
View File
@@ -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,
updateLinks
} from "../utils";
import { bytesToSize, getThumbnailIconByExtension } 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
+24
View File
@@ -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