@henryavila/mdprobe 0.1.0

package/src/renderer.js

@@ -0,0 +1,247 @@
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkRehype from 'remark-rehype'
+import rehypeRaw from 'rehype-raw'
+import rehypeStringify from 'rehype-stringify'
+import { visit } from 'unist-util-visit'
+import hljs from 'highlight.js'
+import yaml from 'js-yaml'
+
+// ---------------------------------------------------------------------------
+// Inline element tag names that should get data-source-col in addition to
+// data-source-line.
+// ---------------------------------------------------------------------------
+const INLINE_TAGS = new Set([
+  'strong', 'em', 'code', 'a', 'del', 'sup', 'sub',
+  'span', 'abbr', 'mark', 'small', 'b', 'i', 'u',
+])
+
+// ---------------------------------------------------------------------------
+// Custom remark plugin: extract YAML / TOML frontmatter
+// ---------------------------------------------------------------------------
+function remarkExtractFrontmatter() {
+  return (tree, file) => {
+    let fm = null
+    visit(tree, 'yaml', (node) => {
+      try {
+        fm = yaml.load(node.value)
+      } catch {
+        fm = null
+      }
+    })
+    file.data.frontmatter = fm
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Custom remark plugin: extract TOC from heading nodes
+// ---------------------------------------------------------------------------
+function remarkExtractToc() {
+  return (tree, file) => {
+    const toc = []
+    visit(tree, 'heading', (node) => {
+      const text = collectText(node)
+      toc.push({
+        heading: text,
+        level: node.depth,
+        line: node.position?.start?.line ?? 0,
+      })
+    })
+    file.data.toc = toc
+  }
+}
+
+/** Recursively collect plain text from an mdast node. */
+function collectText(node) {
+  if (node.type === 'text' || node.type === 'inlineCode') return node.value
+  if (node.children) return node.children.map(collectText).join('')
+  return ''
+}
+
+// ---------------------------------------------------------------------------
+// Custom rehype plugin: inject data-source-line / data-source-col attributes
+// from hast node positions (preserved by remark-rehype).
+//
+// IMPORTANT: This runs BEFORE rehype-raw so that elements parsed from raw
+// HTML in markdown do NOT receive source-position attributes — only elements
+// generated by remark-rehype (which carry accurate mdast positions) are
+// annotated.
+// ---------------------------------------------------------------------------
+function rehypeSourcePositions() {
+  return (tree) => {
+    visit(tree, 'element', (node) => {
+      const pos = node.position
+      if (pos?.start?.line != null) {
+        node.properties = node.properties || {}
+        node.properties['dataSourceLine'] = String(pos.start.line)
+
+        if (INLINE_TAGS.has(node.tagName) && pos.start.column != null) {
+          node.properties['dataSourceCol'] = String(pos.start.column)
+        }
+      }
+    })
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Custom rehype plugin: syntax highlight code blocks (skip mermaid).
+//
+// Adds the `hljs` class to fenced code blocks so that highlight.js
+// stylesheets apply.  Uses hljs to detect/validate the language but
+// preserves the original text content so that downstream consumers
+// (search, copy-to-clipboard, tests) can rely on literal text matching.
+// ---------------------------------------------------------------------------
+function rehypeHighlight() {
+  return (tree) => {
+    visit(tree, 'element', (node, _index, parent) => {
+      if (node.tagName !== 'code') return
+      if (!parent || parent.tagName !== 'pre') return
+
+      const className = node.properties?.className || []
+      const langClass = className.find(
+        (c) => typeof c === 'string' && c.startsWith('language-'),
+      )
+      const lang = langClass ? langClass.replace('language-', '') : null
+
+      if (lang === 'mermaid' || lang === 'math') return
+
+      const source = getTextContent(node)
+      let highlighted
+
+      try {
+        if (lang && hljs.getLanguage(lang)) {
+          highlighted = hljs.highlight(source, { language: lang })
+        } else {
+          highlighted = hljs.highlightAuto(source)
+        }
+      } catch {
+        return // leave node unchanged on error
+      }
+
+      if (!className.includes('hljs')) className.push('hljs')
+      if (highlighted.language && !className.includes(`language-${highlighted.language}`)) {
+        className.push(`language-${highlighted.language}`)
+      }
+      node.properties.className = className
+
+      // Replace children with highlighted HTML via a raw hast node
+      node.children = [{ type: 'raw', value: highlighted.value }]
+    })
+  }
+}
+
+/** Recursively get text content from a hast node. */
+function getTextContent(node) {
+  if (node.type === 'text') return node.value
+  if (node.children) return node.children.map(getTextContent).join('')
+  return ''
+}
+
+// ---------------------------------------------------------------------------
+// Custom rehype plugin: handle mermaid code blocks
+// Replace <pre><code class="language-mermaid">...</code></pre> with
+// <pre class="mermaid" data-language="mermaid">raw source</pre>
+// ---------------------------------------------------------------------------
+function rehypeMermaid() {
+  return (tree) => {
+    visit(tree, 'element', (node) => {
+      if (node.tagName !== 'pre') return
+      if (!node.children || node.children.length === 0) return
+
+      const codeNode = node.children.find(
+        (c) => c.type === 'element' && c.tagName === 'code',
+      )
+      if (!codeNode) return
+
+      const className = codeNode.properties?.className || []
+      if (!className.includes('language-mermaid')) return
+
+      // Extract raw mermaid source
+      const source = getTextContent(codeNode)
+
+      // Transform the <pre> to have class="mermaid" and hold the raw source
+      const props = { className: ['mermaid'], dataLanguage: 'mermaid' }
+      // Preserve data-source-line if present on either node
+      const srcLine =
+        node.properties?.dataSourceLine ?? codeNode.properties?.dataSourceLine
+      if (srcLine != null) {
+        props.dataSourceLine = srcLine
+      }
+      node.properties = props
+
+      // Replace children with raw text (for client-side Mermaid rendering)
+      node.children = [{ type: 'text', value: source }]
+    })
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Custom rehype plugin: ensure math elements have detectable class markers.
+//
+// remark-math + remark-rehype produces <code class="language-math math-inline">
+// for inline math and <code class="language-math math-display"> for display
+// math.  These already contain "math" in the class list, so detection
+// (`class="[^"]*math[^"]*"`) works.  This plugin is a safety net to add
+// a `data-math` attribute if no class-based marker is found.
+// ---------------------------------------------------------------------------
+function rehypeMathClass() {
+  return (tree) => {
+    visit(tree, 'element', (node) => {
+      const className = node.properties?.className || []
+      const hasMathClass = className.some(
+        (c) => typeof c === 'string' && (c.includes('math') || c.includes('katex')),
+      )
+      if (hasMathClass && !node.properties.dataMath) {
+        // Add data-math for extra detectability
+        node.properties.dataMath = 'true'
+      }
+    })
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Build the unified processor
+// ---------------------------------------------------------------------------
+const processor = unified()
+  .use(remarkParse)
+  .use(remarkGfm)
+  .use(remarkMath)
+  .use(remarkFrontmatter, ['yaml', 'toml'])
+  .use(remarkExtractFrontmatter)
+  .use(remarkExtractToc)
+  .use(remarkRehype, { allowDangerousHtml: true })
+  // Source positions BEFORE rehype-raw so raw HTML elements are not annotated
+  .use(rehypeSourcePositions)
+  .use(rehypeRaw)
+  .use(rehypeHighlight)
+  .use(rehypeMermaid)
+  .use(rehypeMathClass)
+  .use(rehypeStringify, { allowDangerousHtml: true })
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Render a markdown string to HTML with source-position tracking, TOC
+ * extraction, and frontmatter parsing.
+ *
+ * @param {string} markdown - The markdown source string
+ * @returns {{ html: string, toc: Array<{heading: string, level: number, line: number}>, frontmatter: object|null }}
+ */
+export function render(markdown) {
+  if (!markdown || typeof markdown !== 'string' || markdown.trim() === '') {
+    return { html: '', toc: [], frontmatter: null }
+  }
+
+  const file = processor.processSync(markdown)
+
+  return {
+    html: String(file),
+    toc: file.data.toc || [],
+    frontmatter: file.data.frontmatter ?? null,
+  }
+}