Skip to content

SCENARIO: Simplified Media Insertion (see #365). #394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NourhaneBoudaoud wants to merge 3 commits into
base: main
Choose a base branch
from
Open

SCENARIO: Simplified Media Insertion (see #365). #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f092306
SCENARIO: Simplified Media Insertion (see #365).
ZHENG-Qi625 Mar 31, 2026
2205fb6
IMPROVEMENT: Simplified Media Insertion (Video/Photo) (closes #365).
ZHENG-Qi625 May 12, 2026
8022395
Update FormattedText.jsx
ZHENG-Qi625 May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions frontend/scenarios/include_video.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Copy link
Copy Markdown
Member

@benel benel May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't change those 2 lines since we hope, one day, to be compatible also with Dailymotion, Pod, etc.

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"

56 changes: 33 additions & 23 deletions frontend/src/components/FormattedText.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Copy link
Copy Markdown
Member

@benel benel May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please never commit format change (like spaces), it breaks "git blame" and generates unnecessary edition conflicts when rebasing branch.

const handleMouseUp = () => {
if (selectable) {
let text = window.getSelection().toString();
Expand All @@ -16,38 +15,49 @@ 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 (
<>
Copy link
Copy Markdown
Member

@benel benel May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please never commit format change (like line break and indentation), it breaks "git blame" and generates unnecessary edition conflicts when rebasing branch, and make code review far more long and complex.

<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) {
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" />;
Copy link
Copy Markdown
Member

@benel benel May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please never commit format change (like line break, parenthesis and indentation), it breaks "git blame" and generates unnecessary edition conflicts when rebasing branch, and make code review far more long and complex.

}
return null;
}
Expand Down
Loading