IMPROVEMENT : The text area should adjust his size to improve the edi…

frontend/src/components/EditableText.jsx

@@ -1,18 +1,19 @@
 import '../styles/EditableText.css';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
 import FormattedText from './FormattedText';
 import DiscreeteDropdown from './DiscreeteDropdown';
 import PictureUploadAction from '../menu-items/PictureUploadAction';
 import {v4 as uuid} from 'uuid';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { PencilSquare, PersonCircle } from 'react-bootstrap-icons';
 
 function EditableText({id, text, rubric, isPartOf, links, beingEditedBy, fragment, setFragment, setHighlightedText, setSelectedText, rawEditMode, setRawEditMode, backend, setLastUpdate, user}) {
   const [beingEdited, setBeingEdited] = useState(false);
   const [editedDocument, setEditedDocument] = useState();
   const [editedText, setEditedText] = useState();
   const [hasBeenChanged, setHasBeenChanged] = useState(false);
+  const textareaRef = useRef(null);
   const PASSAGE = new RegExp(`\\{${rubric}} ?([^{]*)`);
   const isEditedByOther = beingEditedBy && beingEditedBy !== user;
 
@@ -70,6 +71,15 @@
     }
   }, [rawEditMode, updateEditedDocument]);
 
+  useLayoutEffect(() => {
+    if (textareaRef.current && beingEdited) {
+      const el = textareaRef.current;
+      if (el.scrollHeight > el.clientHeight) {
+        el.style.height = `${el.scrollHeight}px`;
+      }
+    }
+  }, [editedText, beingEdited]);
+
   let handleClick = () => {
     if (isEditedByOther) return;
     setBeingEdited(true);
@@ -151,10 +161,8 @@
     </div>
   );
   return (
-    <form className="position-relative">
-      <PencilSquare className="being-edited-icon self" data-testid="being-edited-self" />
-      <textarea className="form-control" type="text" rows="5" autoFocus
-        value={editedText} onChange={handleChange} onBlur={handleBlur}
+    <form className="editable-text-form">
+      <textarea className="form-control editable-textarea" ref={textareaRef} autoFocus value={editedText} onChange={handleChange} onBlur={handleBlur}
       />
     </form>
   );

frontend/src/styles/EditableText.css

@@ -12,16 +12,16 @@
   border-color: black;
 }
 
-.being-edited-icon {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  color: #d2691e;
-  z-index: 5;
-  pointer-events: auto;
+.editable-text-form {
+  margin-inline: -0.5rem;
 }
 
-.being-edited-icon.self {
-  color: #2e7d32;
+.editable-textarea {
+  display: block;
+  width: 100%;
+  min-height: 150px;
+  overflow: hidden;
+  resize: none;
 }
 
+