22500 Phase 2: extract rich multiline leaf renderer

2026-04-07 09:40:25 +01:00
parent 06b7855826
commit 5b9498b3ef
3 changed files with 107 additions and 83 deletions
@@ -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>
+        </>
+    );
+};