Update include_video.feature

frontend/scenarios/include_video.feature

@@ -1,13 +1,15 @@
 #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 :
+      """
+      https://www.youtube.com/watch?v=JRXkAhMYKEc&ab_channel=ViniciusHenrique
+      """
+    Alors le document comporte la vidéo "https://www.youtube.com/embed/JRXkAhMYKEc"
+
 
-  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)
-    """
-  Alors le document comporte la vidéo "https://www.youtube.com/embed/JRXkAhMYKEc"

frontend/src/components/FormattedText.jsx

@@ -6,50 +6,60 @@ import CroppedImage from './CroppedImage';
 import VideoComment from './VideoComment';
 import FragmentComment from './FragmentComment';
 
-function FormattedText({children, setHighlightedText, selectable, setSelectedText}) {
-
-  const handleMouseUp = () => {
-    if (selectable) {
-      let text = window.getSelection().toString();
-      setSelectedText(text);
-      setHighlightedText(text);
-    }
-  };
-
-  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>
-  </>);
-}
-
 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;
 }
 
-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;
 }
 
+function FormattedText({ children, setHighlightedText, selectable, setSelectedText }) {
+  const handleMouseUp = () => {
+    if (selectable) {
+      let text = window.getSelection().toString();
+      setSelectedText(text);
+      setHighlightedText(text);
+    }
+  };
+
+  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>
+    </>
+  );
+}
+
 export default FormattedText;