diff --git a/frontend/scenarios/include_video.feature b/frontend/scenarios/include_video.feature
index 9a833883..f0955504 100644
--- a/frontend/scenarios/include_video.feature
+++ b/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 :
- """
- 
- """
- 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..8a8aaf85 100644
--- a/frontend/src/components/FormattedText.jsx
+++ b/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 (<>
- embedVideo(x) || CroppedImage(x),
- p: (x) => VideoComment(x)
- || FragmentComment({...x, setHighlightedText})
- || {x.children}
,
- a: ({children, href}) => {children}
- }}
- remarkRehypeOptions={{
- handlers: defListHastHandlers
- }}
- >
- {children}
-
- >);
-}
-
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 (
-
- );
+ return ;
}
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 ;
+ }
+ return {children};
+ };
+
+ return (
+ <>
+ embedVideo(x) || CroppedImage(x),
+ p: (x) =>
+ VideoComment(x) ||
+ FragmentComment({ ...x, setHighlightedText }) ||
+ {x.children}
,
+ a: renderLinkOrVideo
+ }}
+ remarkRehypeOptions={{
+ handlers: defListHastHandlers
+ }}
+ >
+ {children}
+
+ >
+ );
+}
+
export default FormattedText;