feat(remark-lite-youtube): new remark plugin for lite-youtube embeds#294
feat(remark-lite-youtube): new remark plugin for lite-youtube embeds#294stephansama wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (9)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
@stephansama/ai-commit-msg
@stephansama/alfred-kaomoji
@stephansama/astro-iconify-svgmap
@stephansama/auto-readme
@stephansama/catppuccin-jsonresume-theme
@stephansama/catppuccin-opml
@stephansama/catppuccin-rss
@stephansama/catppuccin-typedoc
@stephansama/catppuccin-xsl
@stephansama/eslint-config
create-stephansama-example
@stephansama/find-makefile-targets
@stephansama/github-env
@stephansama/multipublish
@stephansama/pnpm-hooks
@stephansama/prettier-plugin-handlebars
@stephansama/remark-asciinema
@stephansama/remark-lite-youtube
@stephansama/single-file
@stephansama/svelte-social-share-links
@stephansama/typed-env
@stephansama/typed-events
@stephansama/typed-nocodb-api
@stephansama/typed-templates
@stephansama/types-github-action-env
@stephansama/types-lhci
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new package, @stephansama/remark-lite-youtube, which is a remark plugin designed to transform YouTube links into custom-element markup. The implementation includes comprehensive unit tests and documentation. The review feedback identifies several important improvements: addressing a potential XSS vulnerability by escaping the videoId, lowering the Node.js engine requirement for better compatibility, and enhancing the robustness of the URL parsing and link text extraction logic (including support for YouTube Shorts).
| const label = (playLabel ?? "") | ||
| .replaceAll("&", "&") | ||
| .replaceAll('"', """); | ||
| return ( | ||
| '<lite-youtube videoid="' + | ||
| videoId + | ||
| '" playlabel="' + | ||
| label + | ||
| '"></lite-youtube>' | ||
| ); |
There was a problem hiding this comment.
The videoId is injected directly into the HTML string without escaping. While YouTube IDs are typically alphanumeric, the extractYoutubeId function does not validate the format, meaning a malformed or malicious URL could lead to XSS or broken HTML. Both videoId and playLabel should be properly escaped for use in HTML attributes.
| const label = (playLabel ?? "") | |
| .replaceAll("&", "&") | |
| .replaceAll('"', """); | |
| return ( | |
| '<lite-youtube videoid="' + | |
| videoId + | |
| '" playlabel="' + | |
| label + | |
| '"></lite-youtube>' | |
| ); | |
| const escape = (str: string) => str.replaceAll("&", "&").replaceAll('"', """); | |
| const id = escape(videoId); | |
| const label = escape(playLabel ?? ""); | |
| return ( | |
| '<lite-youtube videoid="' + | |
| id + | |
| '" playlabel="' + | |
| label + | |
| '"></lite-youtube>' | |
| ); |
| "unist-util-visit": "catalog:" | ||
| }, | ||
| "engines": { | ||
| "node": ">=24" |
There was a problem hiding this comment.
The engines field specifies node >= 24. Node.js 24 is not yet a stable or LTS release (v22 is the current stable, v20 is LTS). This restriction will prevent the package from being used in most current environments. Consider lowering this to node >= 20 or node >= 22.
| "node": ">=24" | |
| "node": ">=20" |
| const linkText = node.children | ||
| ?.filter((child) => child.type === "text") | ||
| .map((child) => child.value ?? "") | ||
| .join("") | ||
| .trim(); |
There was a problem hiding this comment.
The current logic for extracting link text only considers direct text children. If the link contains any nested formatting (e.g., [**My Video**](...) or [*Video*](...)), the text will not be captured correctly, and the fallback label will be used instead. Consider using a utility like mdast-util-to-string or a recursive helper to extract all text content from the link node.
| return; | ||
| } | ||
|
|
||
| const host = url.host.replace(WWW_PREFIX, ""); |
There was a problem hiding this comment.
Using url.hostname instead of url.host is more robust as it excludes the port number, ensuring the domain check works correctly even if a port is specified in the URL.
| const host = url.host.replace(WWW_PREFIX, ""); | |
| const host = url.hostname.replace(WWW_PREFIX, ""); |
| if (host === "youtube.com" || host === "m.youtube.com") { | ||
| if (url.pathname === "/watch") { | ||
| return url.searchParams.get("v") ?? undefined; | ||
| } | ||
| if (url.pathname.startsWith("/embed/")) { | ||
| const id = url.pathname.slice("/embed/".length).split("/")[0]; | ||
| return id || undefined; | ||
| } | ||
| } |
There was a problem hiding this comment.
The plugin currently does not support YouTube Shorts URLs (e.g., https://www.youtube.com/shorts/{id}). Adding support for this format would improve the plugin's utility.
if (host === "youtube.com" || host === "m.youtube.com") {
if (url.pathname === "/watch") {
return url.searchParams.get("v") ?? undefined;
}
if (url.pathname.startsWith("/embed/")) {
const id = url.pathname.slice("/embed/".length).split("/")[0];
return id || undefined;
}
if (url.pathname.startsWith("/shorts/")) {
const id = url.pathname.slice("/shorts/".length).split("/")[0];
return id || undefined;
}
}1 participant
Closes STE-145
New
@stephansama/remark-lite-youtubepackage atcore/remark-lite-youtube/. Remark plugin that transforms YouTube URL links into<lite-youtube videoid='...' playlabel='...'>markup for use with@justinribeiro/lite-youtube(already in the workspace catalog).Supported URL formats
https://www.youtube.com/watch?v={id}https://youtu.be/{id}https://www.youtube.com/embed/{id}Non-YouTube links are left untouched.
Options
defaultPlayLabel— fallback for theplaylabelattribute when the markdown link has no text (default:Play).Tests
8 cases in
src/lite-youtube.test.tscovering URL parsing (all three formats + invalid input) and end-to-end remark processing.Pattern mirrors
core/remark-asciinema(same package shape, same plugin shape viaunist-util-visit).