@readme/markdown 15.2.1 → 15.4.0

package/dist/processor/transform/mdxish/magic-blocks/patterns.d.ts

@@ -2,8 +2,11 @@
 export declare const HTML_TAG_RE: RegExp;
 /** Matches an HTML element from its opening tag to the matching closing tag. */
 export declare const HTML_ELEMENT_BLOCK_RE: RegExp;
+export declare const NEWLINE_RE: RegExp;
 /** Matches a newline with surrounding horizontal whitespace. */
 export declare const NEWLINE_WITH_WHITESPACE_RE: RegExp;
+/** Matches a run of two or more newlines (a blank line) with surrounding horizontal whitespace. */
+export declare const BLANK_LINE_RE: RegExp;
 /** Matches a closing block-level tag followed by non-tag text or by a newline then non-blank content. */
 export declare const CLOSE_BLOCK_TAG_BOUNDARY_RE: RegExp;
 /** Strips HTML open/close tags. Used to detect non-tag inner text content. */

package/dist/processor/transform/mdxish/magic-blocks/types.d.ts

@@ -63,6 +63,7 @@ export interface RecipeJson extends MagicBlockJson {
 }
 export interface MagicBlockTransformerOptions {
     compatibilityMode?: boolean;
+    hardBreaks?: boolean;
     safeMode?: boolean;
 }
 /**

package/dist/render-fixture.node.js

@@ -92693,7 +92693,7 @@ async function loadStylesheet(id, base) {
 async function loadModule() {
     throw new Error('The browser build does not support plugins or config files.');
 }
-async function createCompiler({ darkModeDataAttribute }) {
+async function createCompiler({ darkModeDataAttribute, darkModeRootSelector, }) {
     let css = `
 @layer theme, base, components, utilities;
 
@@ -92701,9 +92701,12 @@ async function createCompiler({ darkModeDataAttribute }) {
 @import "tailwindcss/utilities.css" layer(utilities);
 `;
     if (darkModeDataAttribute) {
+        // Anchors `dark:` to `darkModeRootSelector`'s own attribute instead of any ancestor's,
+        // when supplied — see the `darkModeRootSelector` param doc below for why there's no default.
+        const root = darkModeRootSelector || '';
         css += `
 
-@custom-variant dark (&:where([${darkModeDataAttribute}=dark], [${darkModeDataAttribute}=dark] *));`;
+@custom-variant dark (&:where(${root}[${darkModeDataAttribute}=dark], ${root}[${darkModeDataAttribute}=dark] *));`;
     }
     return Hu(css, {
         base: '/',
@@ -92711,8 +92714,8 @@ async function createCompiler({ darkModeDataAttribute }) {
         loadModule,
     });
 }
-async function tailwindCompiler(classes, { prefix, darkModeDataAttribute }) {
-    const compiler = await createCompiler({ darkModeDataAttribute });
+async function tailwindCompiler(classes, { prefix, darkModeDataAttribute, darkModeRootSelector, }) {
+    const compiler = await createCompiler({ darkModeDataAttribute, darkModeRootSelector });
     const css = compiler.build(Array.from(classes));
     return lib_postcss([postcss_prefix_selector_default()({ prefix })]).process(css, { from: undefined });
 }
@@ -92727,7 +92730,7 @@ const traverse = (node, callback) => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = ({ children, darkModeDataAttribute }) => {
+const TailwindStyle = ({ children, darkModeDataAttribute, darkModeRootSelector }) => {
     const [stylesheet, setStylesheet] = (0,external_react_.useState)('');
     const classesSet = (0,external_react_.useRef)(new Set());
     const ref = (0,external_react_.useRef)(null);
@@ -92751,6 +92754,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             const sheet = await tailwindCompiler(classes, {
                 prefix: `.${tailwindPrefix}`,
                 darkModeDataAttribute,
+                darkModeRootSelector,
             });
             /* @note: don't insert an empty stylesheet */
             if (sheet.css.match(/^@layer utilities;/m))
@@ -92758,7 +92762,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             setStylesheet(sheet.css);
         };
         run();
-    }, [classes, darkModeDataAttribute]);
+    }, [classes, darkModeDataAttribute, darkModeRootSelector]);
     /*
      * @note: execute once on load
      */
@@ -95928,6 +95932,7 @@ var allCSS2RNProps = __webpack_unused_export__ = flatten([allProps, CSS2RNProps]
 
 
 
+
 /**
  * Extract word boundaries from camelCase strings (e.g., "borderWidth" -> ["border", "width"])
  */
@@ -96007,10 +96012,43 @@ const CUSTOM_PROP_BOUNDARIES = [
  */
 const RUNTIME_COMPONENT_TAGS = new Set(['Variable', 'variable', 'html-block', 'rdme-pin']);
 /**
- * Standard HTML tags that should never be treated as custom components.
- * Uses the html-tags package, converted to a Set<string> for efficient lookups.
+ * Elements that are not actually standard HTML tags, or those that we intentionally
+ * don't want to treat as one & is mute to check with. These include:
+ * - SVG/MathML descendants
+ * - Namespaced foreign content
+ * - `image`, which the HTML tree builder rewrites to `img`
+ * Most of these are bundled in parse5's `TAG_NAMES` set, but we can also add a few more.
  */
-const STANDARD_HTML_TAGS = new Set(html_tags_namespaceObject);
+const NON_STANDARD_TAGS = new Set([
+    'annotation-xml',
+    'desc',
+    'foreignObject',
+    'image',
+    'malignmark',
+    'mglyph',
+    'mi',
+    'mn',
+    'mo',
+    'ms',
+    'mtext',
+]);
+/**
+ * Standard HTML tags list.
+ * A use case of this is to differentiate custom components tag vs standard HTML tags.
+ *
+ * Unioned from:
+ * - `html-tags`: All modern spec HTML elements
+ * - parse5's `TAG_NAMES`: Elements the HTML tree-construction algorithm has to special-case
+ *   This includes obsolete tags that are still rendered by browsers.
+ * - NON_STANDARD_TAGS: We've had to filter because currently parse5's `TAG_NAMES` set over-enumerates
+ *   tags that are not actually standard HTML tags. It also allows custom tags to be filtered out.
+ */
+const STANDARD_HTML_TAGS = new Set([
+    ...html_tags_namespaceObject,
+    ...Object.values(TAG_NAMES),
+    'acronym', // Obselete tag not included either of the above sources. Add here if we have missed any.
+    'blink',
+].filter(tag => !NON_STANDARD_TAGS.has(tag)));
 /**
  * Table structural tags. Blank lines inside these carry deliberate meaning for
  * `mdxishTables` (e.g. splitting cell content into paragraphs, or deciding
@@ -125298,8 +125336,11 @@ function rehypeStringify(options) {
 const HTML_TAG_RE = /<\/?([a-zA-Z][a-zA-Z0-9-]*)((?:[^>"']*(?:"[^"]*"|'[^']*'))*[^>"']*)>/g;
 /** Matches an HTML element from its opening tag to the matching closing tag. */
 const HTML_ELEMENT_BLOCK_RE = /<([a-zA-Z][a-zA-Z0-9-]*)[\s>][\s\S]*?<\/\1>/g;
+const NEWLINE_RE = /\n/g;
 /** Matches a newline with surrounding horizontal whitespace. */
 const NEWLINE_WITH_WHITESPACE_RE = /[^\S\n]*\n[^\S\n]*/g;
+/** Matches a run of two or more newlines (a blank line) with surrounding horizontal whitespace. */
+const BLANK_LINE_RE = /[^\S\n]*\n(?:[^\S\n]*\n)+[^\S\n]*/g;
 /** Matches a closing block-level tag followed by non-tag text or by a newline then non-blank content. */
 const CLOSE_BLOCK_TAG_BOUNDARY_RE = /<\/([a-zA-Z][a-zA-Z0-9-]*)>\s*(?:(?!<)(\S)|\n([^\n]))/g;
 /** Strips HTML open/close tags. Used to detect non-tag inner text content. */
@@ -125369,7 +125410,6 @@ const EMPTY_CODE_PLACEHOLDER = {
 
 
 
-
 /**
  * Wraps a node in a "pinned" container if sidebar: true is set.
  */
@@ -125404,16 +125444,13 @@ const textToBlock = (text) => [{ children: textToInline(text), type: 'paragraph'
  */
 const ensureLeadingBreaks = (text) => text.replace(/^\n+/, match => '<br>'.repeat(match.length));
 /** Preprocesses magic block body content before parsing. */
-const preprocessBody = (text) => {
-    return ensureLeadingBreaks(text);
-};
+const preprocessBody = (text, hardBreaks) => (hardBreaks ? ensureLeadingBreaks(text) : text);
 const bodyExtensions = mdxishExtensions(FEATURES.magicBlockBody);
 /** Markdown parser */
 const contentParser = unified()
     .data('micromarkExtensions', bodyExtensions.micromarkExtensions)
     .data('fromMarkdownExtensions', bodyExtensions.fromMarkdownExtensions)
     .use(remarkParse)
-    .use(hard_breaks)
     .use(remarkGfm)
     .use(normalize_malformed_md_syntax);
 /**
@@ -125510,17 +125547,21 @@ const processMarkdownInHtmlString = (html) => {
 /**
  * Separate a closing block-level tag from the content that follows it.
  *
- * Each \n in the original text becomes a <br> tag to preserve spacing, then a
- * blank line (\n\n) is appended so CommonMark ends the HTML block and parses
- * the following content as markdown.
+ * A blank line (\n\n) is appended so CommonMark ends the HTML block and parses the
+ * following content as markdown; with hard breaks each \n also becomes a <br> to keep its spacing.
  */
-const separateBlockTagFromContent = (match, tag, inlineChar, nextLineChar) => {
+const separateBlockTagFromContent = (hardBreaks, match, tag, inlineChar, nextLineChar) => {
     if (!BLOCK_LEVEL_TAGS.has(tag.toLowerCase()))
         return match;
-    const newlineCount = (match.match(/\n/g) ?? []).length;
+    const newlineCount = hardBreaks ? (match.match(NEWLINE_RE) ?? []).length : 0;
     const breaks = '<br>'.repeat(newlineCount);
     return `</${tag}>${breaks}\n\n${inlineChar || nextLineChar}`;
 };
+/**
+ * Newlines inside an HTML block become <br> so CommonMark doesn't end the block on a blank
+ * line. Without hard breaks only blank lines break, but they still have to be replaced.
+ */
+const collapseHtmlBlockNewlines = (html, hardBreaks) => html.replace(hardBreaks ? NEWLINE_WITH_WHITESPACE_RE : BLANK_LINE_RE, '<br>');
 /** Escape a leading (possibly indented) `-`/`*`/`+` so cells don't become bullet lists. */
 const escapeLeadingListMarkers = (text) => text.replace(/^([ \t]*)([-*+])(?=[ \t]|$)/gm, '$1\\$2');
 /**
@@ -125528,15 +125569,13 @@ const escapeLeadingListMarkers = (text) => text.replace(/^([ \t]*)([-*+])(?=[ \t
  * so `<ul><li>_text_</li></ul>` won't convert underscores to emphasis.
  * We parse first, then visit html nodes and process their text content.
  */
-const parseTableCell = (text) => {
+const parseTableCell = (text, hardBreaks) => {
     if (!text.trim())
         return [{ type: 'text', value: '' }];
-    // Convert \n (and surrounding whitespace) to <br> inside HTML blocks so
-    // CommonMark doesn't split them on blank lines.
     const escaped = processBackslashEscapes(text);
     const normalized = escaped
-        .replace(HTML_ELEMENT_BLOCK_RE, match => match.replace(NEWLINE_WITH_WHITESPACE_RE, '<br>'))
-        .replace(CLOSE_BLOCK_TAG_BOUNDARY_RE, separateBlockTagFromContent);
+        .replace(HTML_ELEMENT_BLOCK_RE, match => collapseHtmlBlockNewlines(match, hardBreaks))
+        .replace(CLOSE_BLOCK_TAG_BOUNDARY_RE, (match, tag, inlineChar, nextLineChar) => separateBlockTagFromContent(hardBreaks, match, tag, inlineChar, nextLineChar));
     const processed = escapeLeadingListMarkers(normalized);
     const tree = contentParser.runSync(contentParser.parse(processed));
     // Process markdown inside HTML blocks that have non-tag inner text (e.g. `<div>**x**`
@@ -125585,7 +125624,7 @@ const parseApiHeaderTitle = (text) => {
  * Transform a magicBlock node into final MDAST nodes.
  */
 function transformMagicBlock(blockType, data, rawValue, options = {}) {
-    const { compatibilityMode = false, safeMode = false } = options;
+    const { compatibilityMode = false, hardBreaks = true, safeMode = false } = options;
     // Handle empty data by returning placeholder nodes for known block types
     // This allows the editor to show appropriate placeholder UI instead of nothing
     if (Object.keys(data).length < 1) {
@@ -125724,7 +125763,7 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 });
             }
             if (hasBody) {
-                const bodyBlocks = parseBlock(preprocessBody(calloutJson.body || ''));
+                const bodyBlocks = parseBlock(preprocessBody(calloutJson.body || '', hardBreaks));
                 children.push(...bodyBlocks);
             }
             const calloutElement = {
@@ -125756,12 +125795,12 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 mapped[rowIndex][colIndex] = v;
                 return mapped;
             }, []);
-            const tokenizeCell = compatibilityMode
-                ? textToBlock
-                : parseTableCell;
+            const tokenizeCell = compatibilityMode ? textToBlock : (text) => parseTableCell(text, hardBreaks);
             const tableChildren = Array.from({ length: rows + 1 }, (_, y) => ({
                 children: Array.from({ length: cols }, (__, x) => ({
-                    children: sparseData[y]?.[x] ? tokenizeCell(preprocessBody(sparseData[y][x])) : [{ type: 'text', value: '' }],
+                    children: sparseData[y]?.[x]
+                        ? tokenizeCell(preprocessBody(sparseData[y][x], hardBreaks))
+                        : [{ type: 'text', value: '' }],
                     type: y === 0 ? 'tableHead' : 'tableCell',
                 })),
                 type: 'tableRow',
@@ -127618,7 +127657,7 @@ function preprocessContent(content, opts) {
     return processSnakeCaseComponent(result, { knownComponents });
 }
 function mdxishAstProcessor(mdContent, opts = {}) {
-    const { components: userComponents = {}, newEditorTypes = false, safeMode = false, useTailwind } = opts;
+    const { components: userComponents = {}, hardBreaks: enableHardBreaks = true, newEditorTypes = false, safeMode = false, useTailwind, } = opts;
     const components = {
         ...loadComponents(),
         ...userComponents,
@@ -127647,7 +127686,7 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         // The next few transformers must appear after mdxishMdxComponentBlocks
         // so nodes produced by the inline re-parse of component bodies
         // (e.g. code/image/embed inside <Tabs>) get visited too
-        .use(magic_block_transformer)
+        .use(magic_block_transformer, { hardBreaks: enableHardBreaks })
         .use(transform_images, { isMdxish: true })
         .use(defaultTransformers)
         .use(newEditorTypes ? inline_mdx_blocks : undefined) // Merge inline html components (e.g. <Anchor>) into MDAST nodes
@@ -127704,7 +127743,7 @@ function mdxishMdastToMd(mdast) {
  * @see .claude/context/MDXish/Processor Overview.md
  */
 function mdxish(mdContent, opts = {}) {
-    const { components: userComponents = {}, safeMode = false, variables } = opts;
+    const { components: userComponents = {}, hardBreaks: enableHardBreaks = true, safeMode = false, variables } = opts;
     const components = {
         ...loadComponents(),
         ...userComponents,
@@ -127716,7 +127755,7 @@ function mdxish(mdContent, opts = {}) {
     const { processor, parserReadyContent } = mdxishAstProcessor(contentWithoutComments, opts);
     processor
         .use(safeMode ? undefined : evaluate_exports) // Evaluate `export const/function` and stash scope on file.data.mdxishScope
-        .use(hard_breaks) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
+        .use(enableHardBreaks ? hard_breaks : undefined) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
         .use(safeMode ? undefined : evaluate_expressions) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
         .use(safeMode ? undefined : evaluate_style_block_expressions) // Evaluate `<style>{`...`}</style>` template literals into plain CSS
         .use(variables_code, { variables }) // Resolve <<...>> and {user.*} inside code and inline code nodes