specra 0.2.57 → 0.2.58

package/dist/mdx.js

@@ -100,6 +100,100 @@ const PROP_NAME_MAP = {
  * processed by JSX/component preprocessing functions.
  * Matches 3+ backticks or tildes as fence markers.
  */
+/**
+ * Private Use Area character used to mask `|` inside inline code spans
+ * so that remark-gfm's table tokenizer doesn't treat them as cell dividers.
+ *
+ * Why: GFM splits table cells on `|` BEFORE inline parsing recognizes
+ * backtick-delimited code spans. So a row like
+ *   | `{{ name | upper }}` |
+ * gets split on the inner pipe, breaking the row. Escaping with `\|` is
+ * the GFM-spec workaround, but inside an inline code span the `\` renders
+ * literally — useless for users. We swap `|` for U+E000 before parsing
+ * and swap it back in the output; PUA chars pass through remark/rehype
+ * unchanged and are never HTML-escaped.
+ */
+const PIPE_MARKER = '';
+/**
+ * Mask `|` characters inside single-line markdown inline code spans by
+ * replacing them with `PIPE_MARKER`. Operates only on non-fenced segments.
+ * Idempotent: if no inline code contains `|`, output equals input.
+ */
+function maskInlineCodePipes(markdown) {
+    return splitByCodeFences(markdown).map(({ text, isCode }) => {
+        if (isCode)
+            return text;
+        let result = '';
+        let i = 0;
+        while (i < text.length) {
+            if (text[i] !== '`') {
+                result += text[i];
+                i++;
+                continue;
+            }
+            // Count opening backtick run
+            let openLen = 0;
+            while (i + openLen < text.length && text[i + openLen] === '`')
+                openLen++;
+            // Find matching closing run of the same length on the same line.
+            // (Inline code spans inside table cells are always single-line.)
+            let j = i + openLen;
+            let closeIdx = -1;
+            while (j < text.length && text[j] !== '\n') {
+                if (text[j] === '`') {
+                    let closeLen = 0;
+                    while (j + closeLen < text.length && text[j + closeLen] === '`')
+                        closeLen++;
+                    if (closeLen === openLen) {
+                        closeIdx = j;
+                        break;
+                    }
+                    j += closeLen;
+                }
+                else {
+                    j++;
+                }
+            }
+            if (closeIdx === -1) {
+                // Unmatched run — emit verbatim
+                result += text.slice(i, i + openLen);
+                i += openLen;
+            }
+            else {
+                const content = text.slice(i + openLen, closeIdx).replace(/\|/g, PIPE_MARKER);
+                result += text.slice(i, i + openLen) + content + text.slice(closeIdx, closeIdx + openLen);
+                i = closeIdx + openLen;
+            }
+        }
+        return result;
+    }).join('');
+}
+/**
+ * Restore `PIPE_MARKER` back to `|` in a string. No-op if the marker
+ * isn't present (the common case), so cheap to call blanket.
+ */
+function restorePipeMarkers(s) {
+    return s.indexOf(PIPE_MARKER) === -1 ? s : s.split(PIPE_MARKER).join('|');
+}
+/**
+ * Walk an MdxNode tree and restore `PIPE_MARKER` to `|` in every string
+ * field that could carry the marker (html content, string props, children).
+ */
+function restorePipeMarkersInNodes(nodes) {
+    for (const node of nodes) {
+        if (node.content)
+            node.content = restorePipeMarkers(node.content);
+        if (node.props) {
+            for (const key of Object.keys(node.props)) {
+                const v = node.props[key];
+                if (typeof v === 'string')
+                    node.props[key] = restorePipeMarkers(v);
+            }
+        }
+        if (node.children && node.children.length > 0)
+            restorePipeMarkersInNodes(node.children);
+    }
+}
 function splitByCodeFences(markdown) {
     const fencedCodeRegex = /(^|\n)((`{3,}|~{3,}).*\n[\s\S]*?\n\3\s*(?:\n|$))/g;
     const segments = [];
@@ -419,6 +513,7 @@ function resolveDeploymentBasePath() {
 }
 async function processMarkdownToHtml(markdown) {
     const basePath = resolveDeploymentBasePath();
+    const masked = maskInlineCodePipes(markdown);
     const processor = unified()
         .use(remarkParse)
         .use(remarkGfm)
@@ -432,8 +527,8 @@ async function processMarkdownToHtml(markdown) {
     }
     const result = await processor
         .use(rehypeStringify)
-        .process(markdown);
-    return String(result);
+        .process(masked);
+    return restorePipeMarkers(String(result));
 }
 /**
  * Convert hast properties to component props with correct casing.
@@ -1065,8 +1160,11 @@ function ensureComponentBlockIntegrity(markdown) {
     return markdown;
 }
 async function processMarkdownToMdxNodes(markdown) {
+    // Mask pipes inside inline code spans so GFM tables containing
+    // `{{ x | filter }}`-style code don't get their rows broken.
+    const masked = maskInlineCodePipes(markdown);
     // Pre-process JSX expression attributes into HTML-safe string attributes
-    const preprocessed = preprocessJsxExpressions(markdown);
+    const preprocessed = preprocessJsxExpressions(masked);
     // Dedent content inside component tags so that indented children
     // (e.g. <Tabs> inside <Step>) don't get treated as code blocks
     // by remark-parse (4+ spaces = indented code in CommonMark).
@@ -1089,7 +1187,9 @@ async function processMarkdownToMdxNodes(markdown) {
     const hast = await processor.run(mdast);
     // The hast root has children - process them into MdxNodes
     const children = hast.children || [];
-    return hastChildrenToMdxNodes(children);
+    const nodes = await hastChildrenToMdxNodes(children);
+    restorePipeMarkersInNodes(nodes);
+    return nodes;
 }
 /**
  * Calculate reading time based on word count

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "specra",
-  "version": "0.2.57",
+  "version": "0.2.58",
   "description": "A modern documentation library for SvelteKit with built-in versioning, API reference generation, full-text search, and MDX support",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",