2025-04-10 13:56:35 -04:00
|
|
|
import React, { useRef } from 'react';
|
|
|
|
|
import './editor.css';
|
|
|
|
|
import { TextareaAutosize } from '@mui/material';
|
2024-03-29 20:08:34 -04:00
|
|
|
|
|
|
|
|
interface EditorProps {
|
2024-09-17 18:56:13 -04:00
|
|
|
label: string;
|
2025-03-12 13:43:11 -04:00
|
|
|
values: string[];
|
2025-04-10 13:56:35 -04:00
|
|
|
onEditorChange: (value: string) => void;
|
2024-03-29 20:08:34 -04:00
|
|
|
}
|
|
|
|
|
|
2025-04-10 13:56:35 -04:00
|
|
|
const Editor: React.FC<EditorProps> = ({ label, values, onEditorChange }) => {
|
|
|
|
|
const editorRef = useRef<HTMLTextAreaElement | null>(null);
|
2025-04-05 15:34:44 -04:00
|
|
|
|
2025-04-10 13:56:35 -04:00
|
|
|
function handleEditorChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
|
|
|
|
|
const text = event.target.value;
|
|
|
|
|
onEditorChange(text || '');
|
2025-04-05 15:34:44 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
2025-04-10 13:56:35 -04:00
|
|
|
<label>
|
|
|
|
|
<h4>{label}</h4>
|
|
|
|
|
<TextareaAutosize
|
|
|
|
|
id="editor-textarea"
|
|
|
|
|
ref={editorRef}
|
|
|
|
|
onChange={handleEditorChange}
|
|
|
|
|
value={values}
|
|
|
|
|
className="editor"
|
|
|
|
|
minRows={5}
|
|
|
|
|
/>
|
|
|
|
|
</label>
|
2024-03-29 20:08:34 -04:00
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2025-03-12 13:43:11 -04:00
|
|
|
export default Editor;
|