From d95363c93f7e66786d7922d3dcb012e34a5042bc Mon Sep 17 00:00:00 2001
From: ZHENG-Qi625 <zgandasuka@gmail.com>
Date: Tue, 26 May 2026 17:23:53 +0200
Subject: [PATCH 1/4] IMPROVEMENT : The text area should adjust his size to
 improve the editing experience (closes #362).

Co-authored-by: Nourhane BOUDAOUD nourhane.boudaoud@utt.fr
Co-authored-by: Qi ZHENG qi.zheng@utt.fr
Co-authored-by: Zhenpeng LI zhenpeng.li@utt.fr
---
 frontend/src/components/EditableText.jsx | 17 +++++++++++++----
 frontend/src/styles/EditableText.css     | 12 ++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/EditableText.jsx b/frontend/src/components/EditableText.jsx
index 19b3452a..ba1794a7 100644
--- a/frontend/src/components/EditableText.jsx
+++ b/frontend/src/components/EditableText.jsx
@@ -1,6 +1,6 @@
 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';
@@ -12,6 +12,7 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
   const [editedDocument, setEditedDocument] = useState();
   const [editedText, setEditedText] = useState();
   const [hasBeenChanged, setHasBeenChanged] = useState(false);
+  const textareaRef = useRef(null);
   const PASSAGE = new RegExp(`\\{${rubric}} ?([^{]*)`);
 
   let parsePassage = (rawText) => (rubric)
@@ -56,6 +57,15 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
     }
   }, [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 = () => {
     setBeingEdited(true);
     updateEditedDocument()
@@ -120,9 +130,8 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
     </div>
   );
   return (
-    <form>
-      <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>
   );
diff --git a/frontend/src/styles/EditableText.css b/frontend/src/styles/EditableText.css
index 5632ffd2..5d897f41 100644
--- a/frontend/src/styles/EditableText.css
+++ b/frontend/src/styles/EditableText.css
@@ -12,4 +12,16 @@
   border-color: black;
 }
 
+.editable-text-form {
+  margin-inline: -0.5rem;
+}
+
+.editable-textarea {
+  display: block;
+  width: 100%;
+  min-height: 150px;
+  overflow: hidden;
+  resize: none;
+}
+
 

From 2f4b03691bfaa5c4addd6dc4f497e5afa50d89ce Mon Sep 17 00:00:00 2001
From: LZPxka <lizhenpeng138@gmail.com>
Date: Tue, 16 Jun 2026 14:48:24 +0200
Subject: [PATCH 2/4] Refactor EditableText form structure and styling

---
 frontend/src/components/EditableText.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/EditableText.jsx b/frontend/src/components/EditableText.jsx
index 35868f4d..5c1389f3 100644
--- a/frontend/src/components/EditableText.jsx
+++ b/frontend/src/components/EditableText.jsx
@@ -160,9 +160,11 @@ function EditableText({id, text, rubric, isPartOf, links, beingEditedBy, fragmen
       </DiscreeteDropdown>
     </div>
   );
-  return (
-    <form className="editable-text-form">
-      <textarea className="form-control editable-textarea" ref={textareaRef} autoFocus value={editedText} onChange={handleChange} onBlur={handleBlur}
+   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>
   );

From 7d5ddf0faf9a9c705ce80e97ae054e3b1fcc40fe Mon Sep 17 00:00:00 2001
From: LZPxka <lizhenpeng138@gmail.com>
Date: Tue, 16 Jun 2026 14:52:50 +0200
Subject: [PATCH 3/4] Fix return statement formatting in EditableText component

---
 frontend/src/components/EditableText.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/EditableText.jsx b/frontend/src/components/EditableText.jsx
index 5c1389f3..34786b8c 100644
--- a/frontend/src/components/EditableText.jsx
+++ b/frontend/src/components/EditableText.jsx
@@ -160,7 +160,7 @@ function EditableText({id, text, rubric, isPartOf, links, beingEditedBy, fragmen
       </DiscreeteDropdown>
     </div>
   );
-   return (
+  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

From 8f8ab556adc163c4a9b66e5807465b364eeeb8ac Mon Sep 17 00:00:00 2001
From: LZPxka <lizhenpeng138@gmail.com>
Date: Tue, 16 Jun 2026 15:28:08 +0200
Subject: [PATCH 4/4] Update textarea class in EditableText component

---
 frontend/src/components/EditableText.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/EditableText.jsx b/frontend/src/components/EditableText.jsx
index 34786b8c..1bc122f6 100644
--- a/frontend/src/components/EditableText.jsx
+++ b/frontend/src/components/EditableText.jsx
@@ -163,7 +163,7 @@ function EditableText({id, text, rubric, isPartOf, links, beingEditedBy, fragmen
   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
+      <textarea className="form-control editable-textarea" ref={textareaRef} type="text" rows="5" autoFocus
         value={editedText} onChange={handleChange} onBlur={handleBlur}
       />
     </form>