@readme/markdown 11.11.0 → 11.12.1

package/dist/main.js

@@ -70584,77 +70584,197 @@ const mdxToHast = () => tree => {
 ;// ./processor/transform/mdxish/mdxish-component-blocks.ts
 
 
-const tagPattern = /^<([A-Z][A-Za-z0-9_]*)([^>]*?)(\/?)>([\s\S]*)?$/;
-const attributePattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*("[^"]*"|'[^']*'|[^\s"'>]+))?/g;
+const pascalCaseTagPattern = /^<([A-Z][A-Za-z0-9_]*)([^>]*?)(\/?)>([\s\S]*)?$/;
+const tagAttributePattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*("[^"]*"|'[^']*'|[^\s"'>]+))?/g;
+/**
+ * Maximum number of siblings to scan forward when looking for a closing tag
+ * to avoid scanning too far and degrading performance
+ */
+const MAX_LOOKAHEAD = 30;
+/**
+ * Tags that have dedicated transformers and should NOT be handled by this plugin.
+ * These components have special parsing requirements that the generic component
+ * block transformer cannot handle correctly.
+ */
+const EXCLUDED_TAGS = new Set(['HTMLBlock', 'Table']);
 const inlineMdProcessor = unified().use(remarkParse);
 const isClosingTag = (value, tag) => value.trim() === `</${tag}>`;
-// Remove matching closing tag from paragraph children; returns updated paragraph and removal status
-const stripClosingFromParagraph = (node, tag) => {
-    if (!Array.isArray(node.children))
-        return { paragraph: node, found: false };
-    const children = [...node.children];
-    const closingIndex = children.findIndex(child => child.type === 'html' && isClosingTag(child.value || '', tag));
-    if (closingIndex === -1)
-        return { paragraph: node, found: false };
-    children.splice(closingIndex, 1);
-    return {
-        paragraph: { ...node, children },
-        found: true,
-    };
-};
-// Replace two child nodes (opening HTML tag + paragraph) with a single replacement node
-const replaceChild = (parent, index, replacement) => {
-    parent.children.splice(index, 2, replacement);
-};
-// Parse markdown inside a component's inline content into mdast children.
+/**
+ * Parse markdown content into mdast children nodes.
+ */
 const parseMdChildren = (value) => {
     const parsed = inlineMdProcessor.parse(value);
     return parsed.children || [];
 };
-// Convert raw attribute string into mdxJsxAttribute entries (strings only; no expressions).
-// Handles both key-value attributes (theme="info") and boolean attributes (empty).
+/**
+ * Convert raw attribute string into mdxJsxAttribute entries.
+ * Handles both key-value attributes (theme="info") and boolean attributes (empty).
+ */
 const parseAttributes = (raw) => {
     const attributes = [];
     const attrString = raw.trim();
     if (!attrString)
         return attributes;
-    // Reset regex lastIndex since it's a global regex that maintains state
-    attributePattern.lastIndex = 0;
-    let match = attributePattern.exec(attrString);
+    tagAttributePattern.lastIndex = 0;
+    let match = tagAttributePattern.exec(attrString);
     while (match !== null) {
         const [, attrName, attrValue] = match;
-        // Boolean attribute (no value) -> set to null
-        // Attribute with value -> clean and set string value
-        // Note: Attribute value types can't directly be numbers & booleans. String, nulls, undefined are supported.
         const value = attrValue ? attrValue.replace(/^['"]|['"]$/g, '') : null;
-        attributes.push({
-            type: 'mdxJsxAttribute',
-            name: attrName,
-            value,
-        });
-        match = attributePattern.exec(attrString);
+        attributes.push({ type: 'mdxJsxAttribute', name: attrName, value });
+        match = tagAttributePattern.exec(attrString);
     }
     return attributes;
 };
-// Parse a single HTML-ish tag string into tag name, attributes, self-closing flag, and inline content.
+/**
+ * Parse an HTML tag string into structured data.
+ */
 const parseTag = (value) => {
-    const match = value.match(tagPattern);
+    const match = value.match(pascalCaseTagPattern);
     if (!match)
         return null;
-    const [, tag, attrString = '', selfClosing = '', content = ''] = match;
-    const attributes = parseAttributes(attrString);
+    const [, tag, attrString = '', selfClosing = '', contentAfterTag = ''] = match;
     return {
         tag,
-        attributes,
+        attributes: parseAttributes(attrString),
         selfClosing: !!selfClosing,
-        content,
+        contentAfterTag,
     };
 };
-// Transform PascalCase HTML blocks into mdxJsxFlowElement nodes.
-// Remark parses unknown tags as raw HTML; we rewrite them so MDX/rehype treats them as components.
+/**
+ * Create an MdxJsxFlowElement node from component data.
+ */
+const createComponentNode = ({ tag, attributes, children, startPosition, endPosition }) => ({
+    type: 'mdxJsxFlowElement',
+    name: tag,
+    attributes,
+    children,
+    position: {
+        start: startPosition?.start,
+        end: endPosition?.end ?? startPosition?.end,
+    },
+});
+/**
+ * Remove a closing tag from a paragraph's children and return the updated paragraph.
+ */
+const stripClosingTagFromParagraph = (node, tag) => {
+    if (!Array.isArray(node.children))
+        return { paragraph: node, found: false };
+    const children = [...node.children];
+    const closingIndex = children.findIndex(child => child.type === 'html' && isClosingTag(child.value || '', tag));
+    if (closingIndex === -1)
+        return { paragraph: node, found: false };
+    children.splice(closingIndex, 1);
+    return { paragraph: { ...node, children }, found: true };
+};
+/**
+ * Scan forward through siblings to find a closing tag.
+ * Handles:
+ * - Exact match HTML siblings (e.g., `</Tag>`)
+ * - HTML siblings with embedded closing tag (e.g., `...\n</Tag>`)
+ * - Paragraph siblings containing the closing tag as a child
+ *
+ * Returns null if not found within MAX_LOOKAHEAD siblings
+ */
+const scanForClosingTag = (parent, startIndex, tag) => {
+    const closingTagStr = `</${tag}>`;
+    const maxIndex = Math.min(startIndex + MAX_LOOKAHEAD, parent.children.length);
+    let i = startIndex + 1;
+    for (; i < maxIndex; i += 1) {
+        const sibling = parent.children[i];
+        // Check HTML siblings
+        if (sibling.type === 'html') {
+            const siblingValue = sibling.value || '';
+            // Exact match (standalone closing tag)
+            if (isClosingTag(siblingValue, tag)) {
+                return { closingIndex: i, extraClosingChildren: [] };
+            }
+            // Embedded closing tag (closing tag at end of HTML block content)
+            if (siblingValue.includes(closingTagStr)) {
+                const contentBeforeClose = siblingValue.substring(0, siblingValue.lastIndexOf(closingTagStr)).trim();
+                const extraChildren = contentBeforeClose
+                    ? parseMdChildren(contentBeforeClose)
+                    : [];
+                return { closingIndex: i, extraClosingChildren: extraChildren };
+            }
+        }
+        // Check paragraph siblings
+        if (sibling.type === 'paragraph') {
+            const { paragraph, found } = stripClosingTagFromParagraph(sibling, tag);
+            if (found) {
+                return { closingIndex: i, extraClosingChildren: [], strippedParagraph: paragraph };
+            }
+        }
+    }
+    if (i < parent.children.length) {
+        // eslint-disable-next-line no-console
+        console.warn(`Closing tag </${tag}> not found within ${MAX_LOOKAHEAD} siblings, stopping scan`);
+    }
+    return null;
+};
+const substituteNodeWithMdxNode = (parent, index, mdxNode) => {
+    parent.children.splice(index, 1, mdxNode);
+};
+/**
+ * Transform PascalCase HTML nodes into mdxJsxFlowElement nodes.
+ *
+ * Remark parses unknown/custom component tags as raw HTML nodes.
+ * These are the custom readme MDX syntax for components.
+ * This transformer identifies these patterns and converts them to proper MDX JSX elements so they
+ * can be accurately recognized and rendered later with their component definition code.
+ * Though for some tags, we need to handle them specially
+ *
+ * ## Supported HTML Structures
+ *
+ * ### 1. Self-closing tags
+ * ```
+ * <Component />
+ * ```
+ * Parsed as: `html: "<Component />"`
+ *
+ * ### 2. Self-contained blocks (entire component in single HTML node)
+ * ```
+ * <Button>Click me</Button>
+ * ```
+ * ```
+ * <Component>
+ *   <h2>Title</h2>
+ *   <p>Content</p>
+ * </Component>
+ * ```
+ * Parsed as: `html: "<Component>\n  <h2>Title</h2>\n  <p>Content</p>\n</Component>"`
+ * The opening tag, content, and closing tag are all captured in one HTML node.
+ *
+ * ### 3. Multi-sibling components (closing tag in a following sibling)
+ * Handles various structures where the closing tag is in a later sibling, such as:
+ *
+ * #### 3a. Block components (closing tag in sibling paragraph)
+ * ```
+ * <Callout>
+ * Some **markdown** content
+ * </Callout>
+ * ```
+ *
+ * #### 3b. Multi-paragraph components (closing tag several siblings away)
+ * ```
+ * <Callout>
+ *
+ * First paragraph
+ *
+ * Second paragraph
+ * </Callout>
+ * ```
+ *
+ * #### 3c. Nested components split by blank lines (closing tag embedded in HTML sibling)
+ * ```
+ * <Outer>
+ *   <Inner>content</Inner>
+ *
+ *   <Inner>content</Inner>
+ * </Outer>
+ * ```
+ */
 const mdxishComponentBlocks = () => tree => {
     const stack = [tree];
-    // Process children depth-first, rewriting opening/closing component HTML pairs
     const processChildNode = (parent, index) => {
         const node = parent.children[index];
         if (!node)
@@ -70662,46 +70782,66 @@ const mdxishComponentBlocks = () => tree => {
         if ('children' in node && Array.isArray(node.children)) {
             stack.push(node);
         }
+        // Only visit HTML nodes with an actual html tag
         const value = node.value;
         if (node.type !== 'html' || typeof value !== 'string')
             return;
         const parsed = parseTag(value);
         if (!parsed)
             return;
-        const { tag, attributes, selfClosing, content = '' } = parsed;
-        const extraChildren = content ? parseMdChildren(content.trimStart()) : [];
+        const { tag, attributes, selfClosing, contentAfterTag = '' } = parsed;
+        // Skip tags that have dedicated transformers
+        if (EXCLUDED_TAGS.has(tag))
+            return;
+        const closingTagStr = `</${tag}>`;
+        // Case 1: Self-closing tag
         if (selfClosing) {
-            const componentNode = {
-                type: 'mdxJsxFlowElement',
-                name: tag,
+            const componentNode = createComponentNode({
+                tag,
                 attributes,
                 children: [],
-                position: node.position,
-            };
-            parent.children.splice(index, 1, componentNode);
+                startPosition: node.position,
+            });
+            substituteNodeWithMdxNode(parent, index, componentNode);
             return;
         }
-        const next = parent.children[index + 1];
-        if (!next || next.type !== 'paragraph')
+        // Case 2: Self-contained block (closing tag in content)
+        if (contentAfterTag.includes(closingTagStr)) {
+            const componentInnerContent = contentAfterTag.substring(0, contentAfterTag.lastIndexOf(closingTagStr)).trim();
+            const componentNode = createComponentNode({
+                tag,
+                attributes,
+                children: componentInnerContent ? parseMdChildren(componentInnerContent) : [],
+                startPosition: node.position,
+            });
+            substituteNodeWithMdxNode(parent, index, componentNode);
             return;
-        const { paragraph, found } = stripClosingFromParagraph(next, tag);
-        if (!found)
+        }
+        // Case 3: Multi-sibling component (closing tag in a following sibling)
+        // Scans forward through siblings to find closing tag in HTML or paragraph nodes
+        const scanResult = scanForClosingTag(parent, index, tag);
+        if (!scanResult)
             return;
-        const componentNode = {
-            type: 'mdxJsxFlowElement',
-            name: tag,
+        const { closingIndex, extraClosingChildren, strippedParagraph } = scanResult;
+        const extraChildren = contentAfterTag ? parseMdChildren(contentAfterTag.trimStart()) : [];
+        // Collect all intermediate siblings between opening tag and closing tag
+        const intermediateChildren = parent.children.slice(index + 1, closingIndex);
+        // For paragraph siblings, include the paragraph's children (with closing tag stripped)
+        // For HTML siblings, include any content parsed from before the closing tag
+        const closingChildren = strippedParagraph
+            ? strippedParagraph.children
+            : extraClosingChildren;
+        const componentNode = createComponentNode({
+            tag,
             attributes,
-            children: [
-                ...extraChildren,
-                ...paragraph.children,
-            ],
-            position: {
-                start: node.position?.start,
-                end: next.position?.end,
-            },
-        };
-        replaceChild(parent, index, componentNode);
+            children: [...extraChildren, ...intermediateChildren, ...closingChildren],
+            startPosition: node.position,
+            endPosition: parent.children[closingIndex]?.position,
+        });
+        // Remove all nodes from opening tag to closing tag (inclusive) and replace with component node
+        parent.children.splice(index, closingIndex - index + 1, componentNode);
     };
+    // Travel the tree depth-first
     while (stack.length) {
         const parent = stack.pop();
         if (parent?.children) {
@@ -92845,8 +92985,11 @@ function smartCamelCase(str) {
     }
     // Sort by length (longest first) to prevent shorter matches (e.g., "column" in "columns")
     const sortedBoundaries = [...allBoundaries].sort((a, b) => b.length - a.length);
+    // Use case-sensitive matching ('g' not 'gi') so that once a letter is
+    // capitalized by a longer boundary, shorter boundaries won't re-match it.
+    // This prevents issues like 'iconcolor' becoming 'iconColOr' instead of 'iconColor'.
     return sortedBoundaries.reduce((res, word) => {
-        const regex = new RegExp(`(${word})([a-z])`, 'gi');
+        const regex = new RegExp(`(${word})([a-z])`, 'g');
         return res.replace(regex, (_, prefix, nextChar) => prefix.toLowerCase() + nextChar.toUpperCase());
     }, str);
 }
@@ -92972,7 +93115,21 @@ const htmlBlockHandler = (_state, node) => {
         children: [],
     };
 };
+// Convert embed magic blocks to Embed components
+const embedHandler = (state, node) => {
+    // Assert to get the minimum properties we need
+    const { data } = node;
+    return {
+        type: 'element',
+        // To differentiate between regular embeds and magic block embeds,
+        // magic block embeds have a certain hName
+        tagName: data?.hName === NodeTypes.embedBlock ? 'Embed' : 'embed',
+        properties: data?.hProperties,
+        children: state.all(node),
+    };
+};
 const mdxComponentHandlers = {
+    embed: embedHandler,
     mdxFlowExpression: mdxExpressionHandler,
     mdxJsxFlowElement: mdxJsxElementHandler,
     mdxJsxTextElement: mdxJsxElementHandler,
@@ -93676,6 +93833,10 @@ const parseInline = (text) => {
     if (!text.trim())
         return [{ type: 'text', value: '' }];
     const tree = cellParser.runSync(cellParser.parse(text));
+    // If there are multiple block-level nodes, keep them as-is to preserve the document structure and spacing
+    if (tree.children.length > 1) {
+        return tree.children;
+    }
     return tree.children.flatMap(n => 
     // This unwraps the extra p node that might appear & wrapping the content
     n.type === 'paragraph' && 'children' in n ? n.children : [n]);
@@ -93813,14 +93974,17 @@ function parseMagicBlock(raw, options = {}) {
             else {
                 children.push(...titleBlocks, ...bodyBlocks);
             }
+            // If there is no title or title is empty
+            const empty = !titleBlocks.length || !titleBlocks[0].children[0]?.value;
             // Create mdxJsxFlowElement directly for mdxish
             const calloutElement = {
                 type: 'mdxJsxFlowElement',
                 name: 'Callout',
-                attributes: toAttributes({ icon, theme: theme || 'default', type: theme || 'default' }, [
+                attributes: toAttributes({ icon, theme: theme || 'default', type: theme || 'default', empty }, [
                     'icon',
                     'theme',
                     'type',
+                    'empty',
                 ]),
                 children: children,
             };
@@ -93878,9 +94042,9 @@ function parseMagicBlock(raw, options = {}) {
             return [
                 wrapPinnedBlocks({
                     children: [
-                        { children: [{ type: 'text', value: title || null }], title: embedJson.provider, type: 'link', url },
+                        { children: [{ type: 'text', value: title || '' }], title: embedJson.provider, type: 'link', url },
                     ],
-                    data: { hName: 'rdme-embed', hProperties: { ...embedJson, href: url, html, title, url } },
+                    data: { hName: 'embed-block', hProperties: { ...embedJson, href: url, html, title, url } },
                     type: 'embed',
                 }, json),
             ];
@@ -93898,6 +94062,25 @@ function parseMagicBlock(raw, options = {}) {
                 }, json),
             ];
         }
+        // Recipe/TutorialTile: renders as Recipe component
+        case 'recipe':
+        case 'tutorial-tile': {
+            const recipeJson = json;
+            if (!recipeJson.slug || !recipeJson.title)
+                return [];
+            // Create mdxJsxFlowElement directly for mdxish flow
+            // Note: Don't wrap in pinned blocks for mdxish - rehypeMdxishComponents handles component resolution
+            // The node structure matches what mdxishComponentBlocks creates for JSX tags
+            const recipeNode = {
+                type: 'mdxJsxFlowElement',
+                name: 'Recipe',
+                attributes: toAttributes(recipeJson, ['slug', 'title']),
+                children: [],
+                // Position is optional but helps with debugging
+                position: undefined,
+            };
+            return [recipeNode];
+        }
         // Unknown block types: render as generic div with JSON properties
         default: {
             const text = json.text || json.html || '';
@@ -94191,6 +94374,45 @@ const restoreSnakeCaseComponentNames = (options) => {
 };
 /* harmony default export */ const restore_snake_case_component_name = (restoreSnakeCaseComponentNames);
 
+;// ./processor/transform/mdxish/retain-boolean-attributes.ts
+
+// Private Use Area character (U+E000) which is extremely unlikely to appear in real content.
+const TEMP_TRUE_BOOLEAN_VALUE = 'readme-this-is-a-temporary-boolean-attribute-\uE000';
+const TEMP_FALSE_BOOLEAN_VALUE = 'readme-this-is-a-temporary-boolean-attribute-\uE001';
+/**
+ * Preserves boolean properties when passed to rehypeRaw because
+ * rehypeRaw converts boolean properties in nodes to strings (e.g. true -> ""),
+ * which can change the truthiness of the property. Hence we need to preserve the boolean properties.
+ */
+const preserveBooleanProperties = () => tree => {
+    visit(tree, 'element', (node) => {
+        if (!node.properties)
+            return;
+        Object.entries(node.properties).forEach(([key, value]) => {
+            if (typeof value === 'boolean') {
+                node.properties[key] = value ? TEMP_TRUE_BOOLEAN_VALUE : TEMP_FALSE_BOOLEAN_VALUE;
+            }
+        });
+    });
+    return tree;
+};
+const restoreBooleanProperties = () => tree => {
+    visit(tree, 'element', (node) => {
+        if (!node.properties)
+            return;
+        Object.entries(node.properties).forEach(([key, value]) => {
+            if (value === TEMP_TRUE_BOOLEAN_VALUE) {
+                node.properties[key] = true;
+            }
+            else if (value === TEMP_FALSE_BOOLEAN_VALUE) {
+                node.properties[key] = false;
+            }
+        });
+    });
+    return tree;
+};
+
+
 ;// ./processor/transform/mdxish/variables-text.ts
 
 
@@ -94218,6 +94440,8 @@ const variablesTextTransformer = () => tree => {
         if (parent.type === 'inlineCode')
             return;
         const text = node.value;
+        if (typeof text !== 'string' || !text.trim())
+            return;
         if (!text.includes('{user.') && !text.includes('{user['))
             return;
         const matches = [...text.matchAll(USER_VAR_REGEX)];
@@ -94370,6 +94594,7 @@ function loadComponents() {
 
 
 
+
 
 
 const defaultTransformers = [callouts, code_tabs, gemoji_, transform_embeds];
@@ -94416,7 +94641,9 @@ function mdxish(mdContent, opts = {}) {
         .use(useTailwind ? transform_tailwind : undefined, { components: tempComponentsMap })
         .use(remarkGfm)
         .use(remarkRehype, { allowDangerousHtml: true, handlers: mdxComponentHandlers })
+        .use(preserveBooleanProperties) // RehypeRaw converts boolean properties to empty strings
         .use(rehypeRaw, { passThrough: ['html-block'] })
+        .use(restoreBooleanProperties)
         .use(rehypeSlug)
         .use(rehypeMdxishComponents, {
         components,