82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
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>
|
|
</>
|
|
);
|
|
};
|