From f0923060ebb585967bdd6dcb048d483950035d44 Mon Sep 17 00:00:00 2001
From: ZHENG-Qi625 <zgandasuka@gmail.com>
Date: Tue, 31 Mar 2026 15:16:24 +0200
Subject: [PATCH 1/3] SCENARIO: Simplified Media Insertion (see #365).

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/scenarios/include_video.feature | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/scenarios/include_video.feature b/frontend/scenarios/include_video.feature
index 9a833883..30012a9b 100644
--- a/frontend/scenarios/include_video.feature
+++ b/frontend/scenarios/include_video.feature
@@ -1,13 +1,14 @@
 #language: fr
 
-Fonctionnalité: Insérer dans un document une vidéo
+Fonctionnalité: Insérer dans un document une vidéo sur YouTube
 
-Scénario: provenant de YouTube
+Scénario: Reconnaissance automatique d'un lien YouTube pur
 
   Soit un document dont je suis l'auteur affiché comme glose
   Et une session active avec mon compte
   Quand j'essaie de remplacer le contenu de la glose par :
     """
-    ![link](https://www.youtube.com/watch?v=JRXkAhMYKEc&ab_channel=ViniciusHenrique)
+    https://www.youtube.com/watch?v=JRXkAhMYKEc&ab_channel=ViniciusHenrique
     """
   Alors le document comporte la vidéo "https://www.youtube.com/embed/JRXkAhMYKEc"
+

From 2205fb6244317011fc8f3abbf62d302c0d5085f8 Mon Sep 17 00:00:00 2001
From: ZHENG-Qi625 <zgandasuka@gmail.com>
Date: Tue, 12 May 2026 17:56:57 +0200
Subject: [PATCH 2/3] IMPROVEMENT: Simplified Media Insertion (Video/Photo)
 (closes #365).

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/FormattedText.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/FormattedText.jsx b/frontend/src/components/FormattedText.jsx
index 3b89be66..d7d02407 100644
--- a/frontend/src/components/FormattedText.jsx
+++ b/frontend/src/components/FormattedText.jsx
@@ -36,6 +36,7 @@ function FormattedText({children, setHighlightedText, selectable, setSelectedTex
 }
 
 function getId(text) {
+  if (!text) return null;
   const regExp = /^.*(?:youtube\.com\/watch\?v=|youtu\.be\/)([^\s&]{11})/;
   const match = text.match(regExp);
   return match ? match[1] : null;

From 802239515691a7e8ad136ce9da2cd264bf6f9b1e Mon Sep 17 00:00:00 2001
From: ZHENG-Qi625 <zgandasuka@gmail.com>
Date: Tue, 12 May 2026 19:28:10 +0200
Subject: [PATCH 3/3] Update FormattedText.jsx

---
 frontend/src/components/FormattedText.jsx | 55 +++++++++++++----------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/FormattedText.jsx b/frontend/src/components/FormattedText.jsx
index d7d02407..bd87dd0a 100644
--- a/frontend/src/components/FormattedText.jsx
+++ b/frontend/src/components/FormattedText.jsx
@@ -6,8 +6,7 @@ import CroppedImage from './CroppedImage';
 import VideoComment from './VideoComment';
 import FragmentComment from './FragmentComment';
 
-function FormattedText({children, setHighlightedText, selectable, setSelectedText}) {
-
+function FormattedText({ children, setHighlightedText, selectable, setSelectedText }) {
   const handleMouseUp = () => {
     if (selectable) {
       let text = window.getSelection().toString();
@@ -16,23 +15,35 @@ function FormattedText({children, setHighlightedText, selectable, setSelectedTex
     }
   };
 
-  return (<>
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm, remarkDefinitionList, remarkUnwrapImages]}
-      components={{
-        img: (x) => embedVideo(x) || CroppedImage(x),
-        p: (x) => VideoComment(x)
-          || FragmentComment({...x, setHighlightedText})
-          || <p onMouseUp={handleMouseUp}>{x.children}</p>,
-        a: ({children, href}) => <a href={href}>{children}</a>
-      }}
-      remarkRehypeOptions={{
-        handlers: defListHastHandlers
-      }}
-    >
-      {children}
-    </ReactMarkdown>
-  </>);
+  const renderLinkOrVideo = ({ children, href }) => {
+    const videoId = getId(href);
+    if (videoId) {
+      const embedLink = `https://www.youtube.com/embed/${videoId}`;
+      return <iframe width="80%" height="300" src={embedLink} style={{ border: 0 }} allowFullScreen title="YouTube video" />;
+    }
+    return <a href={href}>{children}</a>;
+  };
+
+  return (
+    <>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkDefinitionList, remarkUnwrapImages]}
+        components={{
+          img: (x) => embedVideo(x) || CroppedImage(x),
+          p: (x) =>
+            VideoComment(x) ||
+            FragmentComment({ ...x, setHighlightedText }) ||
+            <p onMouseUp={handleMouseUp}>{x.children}</p>,
+          a: renderLinkOrVideo
+        }}
+        remarkRehypeOptions={{
+          handlers: defListHastHandlers
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </>
+  );
 }
 
 function getId(text) {
@@ -42,13 +53,11 @@ function getId(text) {
   return match ? match[1] : null;
 }
 
-function embedVideo({src}) {
+function embedVideo({ src }) {
   const videoId = getId(src);
   if (videoId) {
     const embedLink = `https://www.youtube.com/embed/${videoId}`;
-    return (
-      <iframe width="80%" height="300" src={embedLink} frameBorder="0" allowFullScreen></iframe>
-    );
+    return <iframe width="80%" height="300" src={embedLink} style={{ border: 0 }} allowFullScreen title="YouTube video" />;
   }
   return null;
 }