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 : """ - ![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" + 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 (