@readme/markdown 14.10.2 → 14.11.0

package/components/Embed/index.tsx

@@ -2,6 +2,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
+import { normalizeYouTubeUrlToEmbedUrl } from './normalizeYouTubeUrl';
+
 interface FaviconProps {
   alt?: string;
   src: string;
@@ -72,7 +74,8 @@ const Embed = ({
     !html && !explicitOptOut && url && typeOfEmbed && IFRAME_DERIVABLE_TYPES.has(typeOfEmbed);
 
   if (iframe || renderTypeAsIframe) {
-    return <iframe {...spreadAttrs} src={url} style={iframeStyle} title={title} />;
+    const src = normalizeYouTubeUrlToEmbedUrl(url);
+    return <iframe {...spreadAttrs} src={src} style={iframeStyle} title={title} />;
   }
 
   if (!providerUrl && url)

package/components/Embed/normalizeYouTubeUrl.ts

@@ -0,0 +1,41 @@
+// YouTube watch/share URLs (youtube.com/watch?v=ID, youtu.be/ID) set X-Frame-Options
+// and refuse to be framed. The player only allows embedding via youtube.com/embed/ID.
+const YOUTUBE_HOSTS = new Set(['youtube.com', 'www.youtube.com', 'm.youtube.com', 'youtu.be', 'www.youtu.be', 'm.youtu.be']);
+
+// /embed/ accepts `start` (integer seconds), not the watch-page `t` value which may carry units (e.g. 596s, 1h2m3s).
+const toStartSeconds = (timestamp: string): string | null => {
+  const [, hours, minutes, seconds] = timestamp.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/) ?? [];
+  const total = (Number(hours) || 0) * 3600 + (Number(minutes) || 0) * 60 + (Number(seconds) || 0);
+  return total > 0 ? String(total) : null;
+};
+
+const extractVideoId = (parsed: URL): string | null => {
+  if (parsed.hostname.endsWith('youtu.be')) return parsed.pathname.slice(1).split('/')[0] || null;
+  if (parsed.pathname.startsWith('/watch')) return parsed.searchParams.get('v');
+  if (parsed.pathname.startsWith('/shorts/')) return parsed.pathname.slice('/shorts/'.length).split('/')[0] || null;
+  return null;
+};
+
+// Most youtube links we get from the browser are watch URLs, like https://www.youtube.com/watch?v=dQw4w9WgXcQ
+// These /watch URLs won't work in an iframe, so we need to convert them to the embed URL if iframe is used
+export const normalizeYouTubeUrlToEmbedUrl = (url: string): string => {
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return url;
+  }
+
+  if (!YOUTUBE_HOSTS.has(parsed.hostname)) return url;
+  if (parsed.pathname.startsWith('/embed/')) return url;
+
+  const videoId = extractVideoId(parsed);
+  if (!videoId) return url;
+
+  const embed = new URL(`https://www.youtube.com/embed/${videoId}`);
+  const timestamp = parsed.searchParams.get('start') || parsed.searchParams.get('t');
+  const start = timestamp ? toStartSeconds(timestamp) : null;
+  if (start) embed.searchParams.set('start', start);
+
+  return embed.toString();
+};

package/dist/components/Embed/normalizeYouTubeUrl.d.ts

@@ -0,0 +1 @@
+export declare const normalizeYouTubeUrlToEmbedUrl: (url: string) => string;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ declare const utils: {
     calloutIcons: {};
 };
 export { compile, exports, FLOW_TYPES, hast, INLINE_ONLY_PARENT_TYPES, run, mdast, mdastV6, mdx, mdxish, mdxishAstProcessor, mdxishMdastToMd, mdxishTags, extractToc, migrate, mix, plain, renderMdxish, remarkPlugins, stripComments, tags, } from './lib';
+export type { MdxishOpts, RenderMdxishOpts, RunOpts } from './lib';
 export { default as Owlmoji } from './lib/owlmoji';
 export { Components, utils };
 export { tailwindCompiler } from './utils/tailwind-compiler';

package/dist/lib/index.d.ts

@@ -16,6 +16,7 @@ export { default as plain } from './plain';
 export { default as renderMdxish } from './renderMdxish';
 export type { RenderMdxishOpts } from './renderMdxish';
 export { default as run } from './run';
+export type { RunOpts } from './run';
 export { default as tags } from './tags';
 export { default as mdxishTags } from './mdxishTags';
 export { default as stripComments } from './stripComments';

package/dist/lib/micromark/mdx-component/syntax.d.ts

@@ -13,12 +13,13 @@ declare module 'micromark-util-types' {
  * self-closing `<Component />`). Prevents CommonMark from fragmenting them
  * across multiple HTML / paragraph nodes.
  *
- * **Text (inline)** — registers only for lowercase tags with brace attrs
- * (e.g. `Start <a href={url}>here</a> end`). Picks them up during inline
- * parsing so they render inline inside their paragraph, then are rewritten
- * to `mdxJsxTextElement` by the `components/inline-html` transformer.
- * PascalCase is intentionally flow-only; ReadMe's custom components are
- * authored as block-level elements.
+ * **Text (inline)** — registers for lowercase tags and inline PascalCase
+ * components (Anchor, Glossary) that carry brace attrs (e.g.
+ * `Start <a href={url}>here</a> end`, `<Anchor href={url}>x</Anchor>`). Picks
+ * them up during inline parsing so they render inline inside their paragraph,
+ * then are rewritten to `mdxJsxTextElement` by the `components/inline-html`
+ * transformer. All other PascalCase is flow-only; ReadMe's custom components
+ * are authored as block-level elements.
  *
  * Excludes tags handled by dedicated tokenizers: Table, HTMLBlock, Glossary,
  * Anchor.

package/dist/lib/micromark/mdx-expression-lenient/index.d.ts

@@ -0,0 +1 @@
+export { mdxExpressionLenient } from './syntax';

package/dist/lib/micromark/mdx-expression-lenient/syntax.d.ts

@@ -0,0 +1,2 @@
+import type { Extension } from 'micromark-util-types';
+export declare function mdxExpressionLenient(): Extension;