@readme/markdown 14.10.2 → 14.10.3

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/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/main.js

@@ -12060,10 +12060,55 @@ const Columns = ({ children, layout = 'auto' }) => {
 };
 /* harmony default export */ const components_Columns = (Columns);
 
+;// ./components/Embed/normalizeYouTubeUrl.ts
+// 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) => {
+    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) => {
+    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
+const normalizeYouTubeUrlToEmbedUrl = (url) => {
+    let parsed;
+    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();
+};
+
 ;// ./components/Embed/index.tsx
 /* eslint-disable no-param-reassign */
 /* eslint-disable react/jsx-props-no-spreading */
 
+
 const Favicon = ({ src, alt = 'favicon', ...attr }) => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("img", { ...attr, alt: alt, height: "14", src: src, width: "14" }));
 const IFRAME_DERIVABLE_TYPES = new Set(['youtube', 'jsfiddle', 'pdf']);
 // HTML width/height attrs accept bare numbers (interpreted as px), but CSS does not, convert.
@@ -12097,7 +12142,8 @@ const Embed = ({ lazy = true, url, html, providerName, providerUrl, title, ifram
     // Fall back to a direct iframe for URL-derivable embed types when html is missing.
     const renderTypeAsIframe = !html && !explicitOptOut && url && typeOfEmbed && IFRAME_DERIVABLE_TYPES.has(typeOfEmbed);
     if (iframe || renderTypeAsIframe) {
-        return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("iframe", { ...spreadAttrs, src: url, style: iframeStyle, title: title });
+        const src = normalizeYouTubeUrlToEmbedUrl(url);
+        return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("iframe", { ...spreadAttrs, src: src, style: iframeStyle, title: title });
     }
     if (!providerUrl && url)
         providerUrl = new URL(url).hostname
@@ -100750,6 +100796,12 @@ const types_types = /** @type {const} */ ({
 
 
 
+
+// Raw tags (type-1: pre/script/style/textarea) and block tags (type-6: div,
+// section, …) always start a block, so they stay flow even with trailing
+// content. Other lowercase tags (i, span, …) follow the type-7 rule and only
+// stay flow when nothing trails the close tag.
+const htmlFlowTagNames = new Set([...htmlRawNames, ...htmlBlockNames]);
 const syntax_nonLazyContinuationStart = {
     tokenize: syntax_tokenizeNonLazyContinuationStart,
     partial: true,
@@ -100786,11 +100838,12 @@ const mdxComponentTextConstruct = {
  * lowercase HTML tags that carry at least one `{…}` attribute expression.
  * Multi-line, concrete, `afterClose` consumes the rest of the line.
  *
- * **Text** — runs inside paragraphs / inline context. Claims *only* lowercase
- * tags with brace attributes (PascalCase is intentionally flow-only, matching
- * how ReadMe's custom components are authored). Aborts on line endings (inline
- * constructs don't span lines) and exits immediately after `</tag>` so the
- * paragraph's inline parser picks up the trailing text.
+ * **Text** — runs inside paragraphs / inline context. Claims lowercase tags and
+ * inline PascalCase components (`INLINE_COMPONENT_TAGS` — Anchor, Glossary), both
+ * gated on at least one `{…}` brace attribute. All other PascalCase stays
+ * flow-only, matching how ReadMe's custom components are authored. Aborts on line
+ * endings (inline constructs don't span lines) and exits immediately after
+ * `</tag>` so the paragraph's inline parser picks up the trailing text.
  */
 function createTokenize(mode) {
     const isFlow = mode === 'flow';
@@ -100802,8 +100855,9 @@ function createTokenize(mode) {
         let closingTagName = '';
         // For lowercase tags we only want to claim the block if it uses JSX
         // attribute expression syntax (`attr={...}`). Plain HTML should fall
-        // through to CommonMark html-flow. Uppercase tags are always claimed
-        // (flow only — PascalCase is not accepted in text mode).
+        // through to CommonMark html-flow. Flow mode claims any PascalCase block
+        // component; text mode claims only inline PascalCase components
+        // (INLINE_COMPONENT_TAGS — Anchor, Glossary), also brace-gated.
         let isLowercaseTag = false;
         let sawBraceAttr = false;
         // Code span tracking
@@ -100814,6 +100868,9 @@ function createTokenize(mode) {
         let fenceLength = 0;
         let fenceCloseLength = 0;
         let atLineStart = false;
+        // True once this construct consumes any line ending; lets `afterClose`
+        // treat only single-line lowercase tags as inline candidates.
+        let sawLineEnding = false;
         // Bail when the opener line has unmatched tag-like tokens in its body.
         // `<Foo>_<Bar>.csv` leaves opens > closes; matched shapes like
         // `<Callout>x <strong>y</strong>` balance to 0. Without this,
@@ -100964,13 +101021,13 @@ function createTokenize(mode) {
         }
         // ── Tag name parsing ───────────────────────────────────────────────────
         function tagNameFirst(code) {
-            // Uppercase A-Z → PascalCase MDX component. Flow-only — PascalCase
-            // components are block elements in ReadMe's authoring model.
+            // Uppercase A-Z → PascalCase MDX component. Flow mode claims block
+            // components; text mode only claims inline components (Anchor, Glossary),
+            // which is enforced once the full name is known in `tagNameRest`.
             if (code !== null && code >= codes.uppercaseA && code <= codes.uppercaseZ) {
-                if (!isFlow)
-                    return nok(code);
                 tagName = String.fromCharCode(code);
                 isLowercaseTag = false;
+                sawBraceAttr = false;
                 effects.consume(code);
                 return tagNameRest;
             }
@@ -100998,10 +101055,18 @@ function createTokenize(mode) {
                 effects.consume(code);
                 return tagNameRest;
             }
-            // Tag name complete — check exclusions
-            if (TOKENIZER_MDX_COMPONENT_EXCLUDED_TAGS.has(tagName)) {
+            // Tag name complete — decide whether this tokenizer claims the tag.
+            // Three cases: lowercase tags are always candidates (brace-gated later in
+            // `afterOpenTagName`); flow-mode PascalCase claims any block component
+            // except those with a dedicated tokenizer; text-mode PascalCase claims
+            // only inline components (Anchor, Glossary).
+            const claimable = isLowercaseTag
+                ? true
+                : isFlow
+                    ? !TOKENIZER_MDX_COMPONENT_EXCLUDED_TAGS.has(tagName)
+                    : INLINE_COMPONENT_TAGS.has(tagName);
+            if (!claimable)
                 return nok(code);
-            }
             depth = 1;
             return afterOpenTagName(code);
         }
@@ -101009,6 +101074,10 @@ function createTokenize(mode) {
         function afterOpenTagName(code) {
             if (code === null)
                 return nok(code);
+            // Everything except a flow-mode PascalCase block component must carry a
+            // `{…}` brace attribute to be claimed; plain HTML falls through to
+            // CommonMark.
+            const requiresBraceAttr = isLowercaseTag || !isFlow;
             if (markdownLineEnding(code)) {
                 if (!isFlow)
                     return nok(code);
@@ -101017,14 +101086,14 @@ function createTokenize(mode) {
             }
             // Self-closing />
             if (code === codes.slash) {
-                if (isLowercaseTag && !sawBraceAttr)
+                if (requiresBraceAttr && !sawBraceAttr)
                     return nok(code);
                 effects.consume(code);
                 return selfCloseGt;
             }
             // End of opening tag
             if (code === codes.greaterThan) {
-                if (isLowercaseTag && !sawBraceAttr)
+                if (requiresBraceAttr && !sawBraceAttr)
                     return nok(code);
                 effects.consume(code);
                 onOpenerLine = isFlow;
@@ -101088,6 +101157,7 @@ function createTokenize(mode) {
             return effects.check(syntax_nonLazyContinuationStart, openTagContinuationNonLazy, continuationAfter)(code);
         }
         function openTagContinuationNonLazy(code) {
+            sawLineEnding = true;
             effects.enter(types_types.lineEnding);
             effects.consume(code);
             effects.exit(types_types.lineEnding);
@@ -101211,6 +101281,7 @@ function createTokenize(mode) {
             return effects.check(syntax_nonLazyContinuationStart, fencedCodeContinuationNonLazy, continuationAfter)(code);
         }
         function fencedCodeContinuationNonLazy(code) {
+            sawLineEnding = true;
             effects.enter(types_types.lineEnding);
             effects.consume(code);
             effects.exit(types_types.lineEnding);
@@ -101367,6 +101438,12 @@ function createTokenize(mode) {
                 effects.exit('mdxComponent');
                 return ok(code);
             }
+            // A single-line type-7 lowercase tag with content trailing its close is
+            // inline, so `<i …></i> <a>…</a>` stays on one line instead of splitting
+            // into separate blocks. Raw/block tags (pre, div, …) stay flow.
+            if (isLowercaseTag && !sawLineEnding && !htmlFlowTagNames.has(tagName)) {
+                return afterCloseInlineCandidate(code);
+            }
             if (code === null || markdownLineEnding(code)) {
                 effects.exit('mdxComponentData');
                 effects.exit('mdxComponent');
@@ -101377,11 +101454,26 @@ function createTokenize(mode) {
             effects.consume(code);
             return afterClose;
         }
+        // Whitespace-only to the line ending keeps the flow block; any other
+        // trailing char means inline content, so refuse and let inline parsing run.
+        function afterCloseInlineCandidate(code) {
+            if (code === null || markdownLineEnding(code)) {
+                effects.exit('mdxComponentData');
+                effects.exit('mdxComponent');
+                return ok(code);
+            }
+            if (markdownSpace(code)) {
+                effects.consume(code);
+                return afterCloseInlineCandidate;
+            }
+            return nok(code);
+        }
         // ── Body continuation (line endings) ───────────────────────────────────
         function bodyContinuationStart(code) {
             return effects.check(syntax_nonLazyContinuationStart, bodyContinuationNonLazy, continuationAfter)(code);
         }
         function bodyContinuationNonLazy(code) {
+            sawLineEnding = true;
             effects.enter(types_types.lineEnding);
             effects.consume(code);
             effects.exit(types_types.lineEnding);
@@ -101451,12 +101543,13 @@ function syntax_tokenizeNonLazyContinuationStart(effects, ok, nok) {
  * 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.
@@ -101575,12 +101668,12 @@ const parsePhrasingChildren = (value, safeMode) => {
     return first?.type === 'paragraph' ? first.children : [];
 };
 /**
- * Attempt to promote a lowercase inline `html` node to an
- * `mdxJsxTextElement`. Scope is deliberately narrow: only lowercase tags
- * carrying `{…}` attribute expressions (what the `mdxComponent` text
- * tokenizer claims). PascalCase components — even when inline — stay with
- * `mdxishComponentBlocks` so they remain `mdxJsxFlowElement`, matching
- * ReadMe's flow-level component authoring model.
+ * Attempt to promote an inline `html` node to an `mdxJsxTextElement`. Scope
+ * mirrors what the `mdxComponent` text tokenizer claims: lowercase tags and
+ * inline PascalCase components (`INLINE_COMPONENT_TAGS` — Anchor, Glossary),
+ * both carrying `{…}` attribute expressions. All other PascalCase components
+ * stay with `mdxishComponentBlocks` so they remain `mdxJsxFlowElement`,
+ * matching ReadMe's flow-level component authoring model.
  *
  * Returns the original node unchanged when it doesn't qualify.
  */
@@ -101589,12 +101682,11 @@ const promoteInlineHtml = (node, parseOpts, safeMode) => {
     if (!parsed)
         return node;
     const { tag, attributes, selfClosing, contentAfterTag = '' } = parsed;
-    // PascalCase stays flow-level; handled by mdxishComponentBlocks.
-    if (isPascalCase(tag))
-        return node;
-    // Dedicated tokenizers (Table, HTMLBlock, Glossary, Anchor) handle their
-    // own tags — don't hijack them here.
-    if (GENERIC_MDX_COMPONENT_EXCLUDED_TAGS.has(tag))
+    // Non-inline PascalCase stays flow-level (handled by mdxishComponentBlocks)
+    // and dedicated tokenizers (Table, HTMLBlock) own their tags. Inline
+    // components (Anchor, Glossary) with expression attrs are promoted here —
+    // the text tokenizer captures them as a single html node.
+    if (isPascalCase(tag) && !INLINE_COMPONENT_TAGS.has(tag))
         return node;
     // Plain inline HTML (no expressions) stays as an html node so rehype-raw
     // parses it with parse5 as normal.
@@ -101618,14 +101710,15 @@ const promoteInlineHtml = (node, parseOpts, safeMode) => {
  * Runs after `mdxishComponentBlocks`, which skips paragraph-parented html
  * nodes and leaves them for this pass. Two producers put html nodes inside
  * paragraphs:
- *   1. The `mdxComponent` text tokenizer, for lowercase tags with `{…}`
- *      attribute expressions (e.g. `<a href={url}>here</a>`).
+ *   1. The `mdxComponent` text tokenizer, for lowercase tags and inline
+ *      PascalCase components (Anchor, Glossary) with `{…}` attribute
+ *      expressions (e.g. `<a href={url}>here</a>`, `<Anchor href={url}>x</Anchor>`).
  *   2. CommonMark's built-in html-text tokenizer, for PascalCase components
  *      (e.g. a single html node for self-closing `<C />`).
  *
- * Eligibility mirrors `mdxishComponentBlocks`: lowercase tags only promote
- * when they carry an expression attribute; plain inline HTML like
- * `<a href="x">` stays as an html node for rehype-raw.
+ * Eligibility mirrors `mdxishComponentBlocks`: a tag only promotes when it
+ * carries an expression attribute and isn't a non-inline PascalCase component;
+ * plain inline HTML like `<a href="x">` stays as an html node for rehype-raw.
  */
 const mdxishInlineMdxHtmlBlocks = (opts = {}) => tree => {
     const safeMode = !!opts.safeMode;