diff --git a/frontend/scenarios/include_video.feature b/frontend/scenarios/include_video.feature
index 9a833883..8c7869cf 100644
--- a/frontend/scenarios/include_video.feature
+++ b/frontend/scenarios/include_video.feature
@@ -8,6 +8,7 @@ Scénario: provenant de YouTube
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"
+
diff --git a/frontend/src/components/FormattedText.jsx b/frontend/src/components/FormattedText.jsx
index 3b89be66..ba587406 100644
--- a/frontend/src/components/FormattedText.jsx
+++ b/frontend/src/components/FormattedText.jsx
@@ -16,15 +16,17 @@ function FormattedText({children, setHighlightedText, selectable, setSelectedTex
}
};
+ const AutoLink = ({children, href}) => {children};
+
return (<>
embedVideo(x) || CroppedImage(x),
+ img: (x) => Video(x) || CroppedImage(x),
p: (x) => VideoComment(x)
|| FragmentComment({...x, setHighlightedText})
|| {x.children}
,
- a: ({children, href}) => {children}
+ a: (x) => Video(x) || AutoLink(x)
}}
remarkRehypeOptions={{
handlers: defListHastHandlers
@@ -36,13 +38,14 @@ 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;
}
-function embedVideo({src}) {
- const videoId = getId(src);
+function Video({src, href}) {
+ const videoId = getId(src || href);
if (videoId) {
const embedLink = `https://www.youtube.com/embed/${videoId}`;
return (