auwla-markdown 0.0.2 → 0.0.4

package/dist/adapters/shiki.d.ts

@@ -0,0 +1,10 @@
+import type { HighlighterAdapter } from '../types';
+import type { BundledLanguage, BundledTheme } from 'shiki';
+export interface ShikiAdapterOptions {
+    theme?: BundledTheme | {
+        light: BundledTheme;
+        dark: BundledTheme;
+    };
+    langs?: BundledLanguage[];
+}
+export declare function shikiHighlighter(options?: ShikiAdapterOptions): HighlighterAdapter;

package/dist/engine.d.ts

@@ -0,0 +1,3 @@
+import type { MarkdownConfig, MarkdownEngine } from './types';
+/** Configures and returns an isolated instance of the Markdown parsing engine. */
+export declare function createMDConfig(config?: MarkdownConfig): MarkdownEngine;

package/dist/features.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentRenderer, MarkdownFeatures } from './types';
+export declare const defaultComponents: Record<string, ComponentRenderer>;
+/**
+ * Preprocesses component-like tags (=<TagName>) inside a raw markdown string.
+ * Looks up default and custom components, compiles, and injects HTML.
+ */
+export declare function preprocessComponents(rawMarkdown: string, parseFn: (str: string) => Promise<string>, parseInlineFn: (str: string) => Promise<string>, features?: MarkdownFeatures, customComponents?: Record<string, ComponentRenderer>): Promise<string>;
+/** Custom Marked renderer for a button that copies code snippets to clipboard. */
+export declare function copyCodeButtonRenderer(info: any): string;
+/** Custom Marked renderer for adding hoverable anchors pointing to header IDs. */
+export declare function headerAnchorsRenderer(this: any, info: any): string;

package/dist/frontmatter.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Parses header-based metadata blocks (e.g. key: value lines enclosed within =<Header> ... =</Header> tags)
+ * at the top of a Markdown document and removes them from the parsed content body.
+ */
+export declare function extractFrontmatter(rawString: string): {
+    content: string;
+    meta: Record<string, any>;
+};

package/dist/headings.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Scans a Markdown content string and extracts all headings (level 1-6)
+ * to populate the table of contents. Supports both standard # headers and custom tag-based headings (=<h1>...=</h1>).
+ */
+export declare function extractHeadings(content: string): Array<{
+    level: number;
+    text: string;
+    id: string;
+}>;

package/dist/index.js

@@ -0,0 +1,435 @@
+import { createRequire } from "node:module";
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/engine.ts
+import { Marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+
+// src/frontmatter.ts
+function extractFrontmatter(rawString) {
+  const match = rawString.match(/^=<Header(?:[^>]*)>\r?\n([\s\S]*?)\r?\n=<\/Header>\r?\n([\s\S]*)$/);
+  if (!match)
+    return { content: rawString, meta: {} };
+  const rawMeta = match[1];
+  const content = match[2];
+  const meta = {};
+  for (const line of rawMeta.split(`
+`)) {
+    const sep = line.indexOf(":");
+    if (sep === -1)
+      continue;
+    const key = line.slice(0, sep).trim();
+    const val = line.slice(sep + 1).trim();
+    if (val === "true") {
+      meta[key] = true;
+    } else if (val === "false") {
+      meta[key] = false;
+    } else if (!isNaN(Number(val)) && val !== "") {
+      meta[key] = Number(val);
+    } else {
+      meta[key] = val.replace(/^["']|["']$/g, "");
+    }
+  }
+  return { content, meta };
+}
+
+// src/headings.ts
+function extractHeadings(content) {
+  const headings = [];
+  const lines = content.split(`
+`);
+  let inCodeBlock = false;
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith("```")) {
+      inCodeBlock = !inCodeBlock;
+      continue;
+    }
+    if (inCodeBlock)
+      continue;
+    const tagMatch = trimmed.match(/^=<h([1-6])(?:[^>]*?)>(.*?)=<\/h\1>$/);
+    if (tagMatch) {
+      const level = parseInt(tagMatch[1], 10);
+      const text = tagMatch[2].trim();
+      const id = text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-");
+      headings.push({ level, text, id });
+      continue;
+    }
+    const match = line.match(/^(#{1,6})\s+(.+)$/);
+    if (match) {
+      const level = match[1].length;
+      const text = match[2].trim();
+      const id = text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-");
+      headings.push({ level, text, id });
+    }
+  }
+  return headings;
+}
+
+// src/features.ts
+var inlineWrapperTags = new Set(["h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "a", "li"]);
+var defaultComponents = {
+  Callout: async (props, rawContent, parse, parseInline, features) => {
+    const type = props.type || "note";
+    const title = props.title || type.toUpperCase();
+    const htmlContent = await parse(rawContent);
+    const isCollapsible = "collapsible" in props && props.collapsible !== "false";
+    const isCollapsed = props.collapsed === "true";
+    const customClass = props.class ? ` ${props.class}` : "";
+    const className = `callout callout-${type.toLowerCase()}${customClass}`;
+    const otherAttrs = Object.entries(props).filter(([k]) => !["value", "type", "title", "collapsible", "collapsed", "class"].includes(k)).map(([k, v]) => `${k}="${v}"`).join(" ");
+    const attrString = otherAttrs ? ` ${otherAttrs}` : "";
+    if (isCollapsible) {
+      const openAttr = isCollapsed ? "" : " open";
+      return `<details class="${className}"${openAttr}${attrString}><summary class="callout-title">${title}</summary><div class="callout-content">${htmlContent}</div></details>`;
+    }
+    return `<div class="${className}"${attrString}><div class="callout-title">${title}</div><div class="callout-content">${htmlContent}</div></div>`;
+  },
+  Tabs: async (props, rawContent, parse, parseInline, features) => {
+    const content = await parse(rawContent);
+    const regex = /<div class="tab-panel[^"]*"\s+data-title="([^"]*)"/g;
+    const titles = [];
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+      titles.push(match[1]);
+    }
+    if (titles.length === 0)
+      return content;
+    const tabButtons = titles.map((title, idx) => {
+      const activeClass = idx === 0 ? "active" : "";
+      const clickHandler = `const c = this.closest('.tabs-container'); c.querySelectorAll('.tab-btn').forEach((b, i) => { b.classList.toggle('active', b === this); c.querySelectorAll('.tab-panel')[i].style.display = (b === this) ? 'block' : 'none'; })`;
+      return `<button class="tab-btn ${activeClass}" onclick="${clickHandler}">${title}</button>`;
+    }).join("");
+    let panelIndex = 0;
+    const adjustedContent = content.replace(/class="tab-panel([^"]*)"/g, (match2, customClasses) => {
+      const activeClass = panelIndex === 0 ? " active" : "";
+      const display = panelIndex === 0 ? "block" : "none";
+      panelIndex++;
+      return `class="tab-panel${customClasses}${activeClass}" style="display: ${display};"`;
+    });
+    const customClass = props.class ? ` ${props.class}` : "";
+    const className = `tabs-container${customClass}`;
+    const otherAttrs = Object.entries(props).filter(([k]) => !["value", "class"].includes(k)).map(([k, v]) => `${k}="${v}"`).join(" ");
+    const attrString = otherAttrs ? ` ${otherAttrs}` : "";
+    return `<div class="${className}"${attrString}><div class="tabs-header">${tabButtons}</div><div class="tabs-content">${adjustedContent}</div></div>`;
+  },
+  Tab: async (props, rawContent, parse, parseInline, features) => {
+    const title = props.title || "";
+    const content = await parse(rawContent);
+    const customClass = props.class ? ` ${props.class}` : "";
+    const className = `tab-panel${customClass}`;
+    const otherAttrs = Object.entries(props).filter(([k]) => !["value", "title", "class"].includes(k)).map(([k, v]) => `${k}="${v}"`).join(" ");
+    const attrString = otherAttrs ? ` ${otherAttrs}` : "";
+    return `<div class="${className}" data-title="${title}"${attrString}>${content}</div>`;
+  },
+  Table: async (props, rawContent, parse, parseInline, features) => {
+    const content = await parseInline(rawContent);
+    const defaultClass = "auwla-table";
+    const customClass = props.class ? ` ${props.class}` : "";
+    const mergedClass = `${defaultClass}${customClass}`;
+    const attrPairs = Object.entries(props).filter(([k]) => k !== "value" && k !== "class").map(([k, v]) => `${k}="${v}"`).join(" ");
+    const attrString = attrPairs ? ` ${attrPairs}` : "";
+    return `<table class="${mergedClass}"${attrString}>${content}</table>`;
+  },
+  Row: async (props, rawContent, parse, parseInline, features) => {
+    const content = await parseInline(rawContent);
+    const attrPairs = Object.entries(props).filter(([k]) => k !== "value").map(([k, v]) => `${k}="${v}"`).join(" ");
+    const attrString = attrPairs ? ` ${attrPairs}` : "";
+    return `<tr${attrString}>${content}</tr>`;
+  },
+  Column: async (props, rawContent, parse, parseInline, features) => {
+    const content = await parseInline(rawContent);
+    const attrPairs = Object.entries(props).filter(([k]) => k !== "value").map(([k, v]) => `${k}="${v}"`).join(" ");
+    const attrString = attrPairs ? ` ${attrPairs}` : "";
+    return `<th${attrString}>${content}</th>`;
+  },
+  Cell: async (props, rawContent, parse, parseInline, features) => {
+    const content = await parseInline(rawContent);
+    const attrPairs = Object.entries(props).filter(([k]) => k !== "value").map(([k, v]) => `${k}="${v}"`).join(" ");
+    const attrString = attrPairs ? ` ${attrPairs}` : "";
+    return `<td${attrString}>${content}</td>`;
+  }
+};
+function parseAttributes(attrString) {
+  const attrs = {};
+  const trimmed = attrString.trim();
+  if (!trimmed)
+    return attrs;
+  if (trimmed.startsWith("=")) {
+    const match2 = trimmed.match(/^=\s*(?:"(.*?)"|'(.*?)'|([^\s>]+))/);
+    if (match2) {
+      attrs.value = match2[1] ?? match2[2] ?? match2[3] ?? "";
+      return attrs;
+    }
+  }
+  const regex = /(\w+)(?:\s*=\s*(?:"(.*?)"|'(.*?)'|([^\s>]+)))?/g;
+  let match;
+  while ((match = regex.exec(attrString)) !== null) {
+    const key = match[1];
+    const val = match[2] ?? match[3] ?? match[4] ?? "true";
+    attrs[key] = val;
+  }
+  return attrs;
+}
+async function renderComponent(tagName, props, rawContent, parseFn, parseInlineFn, features, customComponents) {
+  if (customComponents[tagName]) {
+    return await customComponents[tagName](props, rawContent, parseFn, parseInlineFn, features);
+  }
+  if (defaultComponents[tagName]) {
+    return await defaultComponents[tagName](props, rawContent, parseFn, parseInlineFn, features);
+  }
+  const isInline = inlineWrapperTags.has(tagName.toLowerCase());
+  const compiledContent = isInline ? await parseInlineFn(rawContent) : await parseFn(rawContent);
+  if (isInline && tagName.toLowerCase().startsWith("h") && tagName.length === 2 && !isNaN(Number(tagName.slice(1)))) {
+    const depth = tagName.toLowerCase().slice(1);
+    const plainText = compiledContent.replace(/<[^>]*>/g, "");
+    const id = props.id || plainText.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-");
+    const idAttr = `id="${id}"`;
+    const classAttr = props.class ? `class="${props.class}"` : "";
+    const otherAttrs = Object.entries(props).filter(([k]) => k !== "value" && k !== "id" && k !== "class").map(([k, v]) => `${k}="${v}"`).join(" ");
+    const attrString2 = [idAttr, classAttr, otherAttrs].filter(Boolean).map((s) => s.trim()).join(" ");
+    const finalAttrString = attrString2 ? ` ${attrString2}` : "";
+    if (features?.headerAnchors) {
+      return `<h${depth}${finalAttrString}><a href="#${id}" class="header-anchor" aria-hidden="true">#</a>${compiledContent}</h${depth}>`;
+    } else {
+      return `<h${depth}${finalAttrString}>${compiledContent}</h${depth}>`;
+    }
+  }
+  const attrPairs = Object.entries(props).filter(([k]) => k !== "value").map(([k, v]) => `${k}="${v}"`).join(" ");
+  const attrString = attrPairs ? ` ${attrPairs}` : "";
+  return `<${tagName}${attrString}>${compiledContent}</${tagName}>`;
+}
+async function preprocessComponents(rawMarkdown, parseFn, parseInlineFn, features = {}, customComponents = {}) {
+  const lines = rawMarkdown.split(`
+`);
+  const result = [];
+  const stack = [];
+  for (const line of lines) {
+    const trimmed = line.trim();
+    const singleLineMatch = trimmed.match(/^=<(\w+)([^>]*?)>(.*?)=<\/\1>$/);
+    if (singleLineMatch) {
+      const tagName = singleLineMatch[1];
+      const attrString = singleLineMatch[2] || "";
+      const innerContent = singleLineMatch[3] || "";
+      const props = parseAttributes(attrString);
+      const html = await renderComponent(tagName, props, innerContent, parseFn, parseInlineFn, features, customComponents);
+      if (stack.length > 0) {
+        stack[stack.length - 1].contentLines.push(html);
+      } else {
+        result.push(html);
+      }
+      continue;
+    }
+    if (trimmed.startsWith("=<") && trimmed.endsWith("/>")) {
+      const match = trimmed.match(/^=<(\w+)([^>]*?)\/>$/);
+      if (match) {
+        const tagName = match[1];
+        const attrString = match[2] || "";
+        const props = parseAttributes(attrString);
+        const html = await renderComponent(tagName, props, "", parseFn, parseInlineFn, features, customComponents);
+        if (stack.length > 0) {
+          stack[stack.length - 1].contentLines.push(html);
+        } else {
+          result.push(html);
+        }
+        continue;
+      }
+    }
+    if (trimmed.startsWith("=<") && !trimmed.startsWith("=</") && trimmed.endsWith(">")) {
+      const match = trimmed.match(/^=<(\w+)([^>]*?)>$/);
+      if (match) {
+        const tagName = match[1];
+        const attrString = match[2] || "";
+        const props = parseAttributes(attrString);
+        stack.push({
+          tagName,
+          props,
+          contentLines: []
+        });
+        continue;
+      }
+    }
+    if (trimmed.startsWith("=</") && trimmed.endsWith(">")) {
+      const match = trimmed.match(/^=<\/(.*?)>$/);
+      if (match) {
+        const tagName = match[1].trim();
+        if (stack.length > 0 && stack[stack.length - 1].tagName === tagName) {
+          const block = stack.pop();
+          const rawContent = block.contentLines.join(`
+`);
+          const html = await renderComponent(block.tagName, block.props, rawContent, parseFn, parseInlineFn, features, customComponents);
+          if (stack.length > 0) {
+            stack[stack.length - 1].contentLines.push(html);
+          } else {
+            result.push(html);
+          }
+          continue;
+        }
+      }
+    }
+    if (stack.length > 0) {
+      stack[stack.length - 1].contentLines.push(line);
+    } else {
+      result.push(line);
+    }
+  }
+  while (stack.length > 0) {
+    const block = stack.pop();
+    result.push(`=<${block.tagName}>`);
+    result.push(block.contentLines.join(`
+`));
+    result.push(`=</${block.tagName}>`);
+  }
+  return result.join(`
+`);
+}
+function extractRawCode(raw) {
+  if (raw.startsWith("```") || raw.startsWith("~~~")) {
+    const lines = raw.split(`
+`);
+    return lines.slice(1, -1).join(`
+`);
+  }
+  return raw;
+}
+function parseCodeMeta(langString) {
+  const parts = langString.trim().split(/\s+/);
+  const lang = parts[0] || "";
+  let filename;
+  const highlightedLines = new Set;
+  for (const part of parts.slice(1)) {
+    if (part.startsWith("[") && part.endsWith("]")) {
+      filename = part.slice(1, -1);
+    } else if (part.startsWith("{") && part.endsWith("}")) {
+      const ranges = part.slice(1, -1).split(",");
+      for (const range of ranges) {
+        if (range.includes("-")) {
+          const [startStr, endStr] = range.split("-");
+          const start = parseInt(startStr || "0", 10);
+          const end = parseInt(endStr || "0", 10);
+          if (!isNaN(start) && !isNaN(end)) {
+            for (let i = start;i <= end; i++) {
+              highlightedLines.add(i);
+            }
+          }
+        } else {
+          const val = parseInt(range, 10);
+          if (!isNaN(val)) {
+            highlightedLines.add(val);
+          }
+        }
+      }
+    }
+  }
+  return { lang, filename, highlightedLines };
+}
+function injectHighlightedLines(html, highlightedLines) {
+  if (highlightedLines.size === 0)
+    return html;
+  if (html.includes('class="line"')) {
+    let lineIndex = 0;
+    return html.replace(/class="line"/g, () => {
+      lineIndex++;
+      if (highlightedLines.has(lineIndex)) {
+        return 'class="line highlighted-line"';
+      }
+      return 'class="line"';
+    });
+  }
+  const lines = html.split(`
+`);
+  const processed = lines.map((line, idx) => {
+    const lineNum = idx + 1;
+    if (highlightedLines.has(lineNum)) {
+      return `<div class="highlighted-line">${line}</div>`;
+    }
+    return line;
+  });
+  return processed.join(`
+`);
+}
+function copyCodeButtonRenderer(info) {
+  const rawCode = extractRawCode(info.raw);
+  const escapedCode = encodeURIComponent(rawCode).replace(/'/g, "%27");
+  const { lang, filename, highlightedLines } = parseCodeMeta(info.lang ?? "");
+  let codeContent = info.text.trim().startsWith("<pre") ? info.text : `<pre><code class="language-${lang}">${info.text}</code></pre>`;
+  codeContent = injectHighlightedLines(codeContent, highlightedLines);
+  const filenameHeader = filename ? `<div class="code-block-filename">${filename}</div>` : "";
+  return `<div class="code-block-wrapper" style="position: relative;">${filenameHeader}<button onclick="navigator.clipboard.writeText(decodeURIComponent('${escapedCode}')); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 2000)" class="copy-code-btn" style="position: absolute; right: 0.5rem; top: ${filename ? "2.5rem" : "0.5rem"}; z-index: 10;">Copy</button>${codeContent}</div>`;
+}
+function headerAnchorsRenderer(info) {
+  const text = info.text ?? (this.parser ? this.parser.parseInline(info.tokens) : info.raw);
+  const depth = info.depth;
+  const id = text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-");
+  return `<h${depth} id="${id}"><a href="#${id}" class="header-anchor" aria-hidden="true">#</a>${text}</h${depth}>`;
+}
+
+// src/engine.ts
+function createMDConfig(config = {}) {
+  const markedInstance = new Marked({
+    gfm: true
+  });
+  if (config.highlighter) {
+    markedInstance.use(markedHighlight({
+      async: true,
+      highlight: async (code, lang) => {
+        if (!lang)
+          return code;
+        return await config.highlighter(code, lang);
+      }
+    }));
+  }
+  const customRenderer = {};
+  if (config.features?.headerAnchors) {
+    customRenderer.heading = headerAnchorsRenderer;
+  }
+  if (config.features?.copyCodeButton) {
+    customRenderer.code = copyCodeButtonRenderer;
+  }
+  if (Object.keys(customRenderer).length > 0) {
+    markedInstance.use({ renderer: customRenderer });
+  }
+  return {
+    parse: async (rawString) => {
+      let { content, meta } = extractFrontmatter(rawString);
+      const headings = extractHeadings(content);
+      content = await preprocessComponents(content, async (str) => await markedInstance.parse(str), async (str) => await markedInstance.parseInline(str), config.features, config.components);
+      const html = await markedInstance.parse(content);
+      return {
+        html,
+        meta,
+        headings
+      };
+    }
+  };
+}
+// src/adapters/shiki.ts
+function shikiHighlighter(options = {}) {
+  let shikiInstance = null;
+  const theme = options.theme || "github-dark";
+  return async (code, language) => {
+    const { createHighlighter } = await import("shiki");
+    if (!shikiInstance) {
+      shikiInstance = await createHighlighter({
+        themes: typeof theme === "string" ? [theme] : [theme.light, theme.dark],
+        langs: options.langs || [language, "javascript", "typescript", "bash", "html", "css"]
+      });
+    }
+    if (!shikiInstance.getLoadedLanguages().includes(language)) {
+      await shikiInstance.loadLanguage(language).catch(() => {});
+    }
+    const shikiOptions = {
+      lang: language
+    };
+    if (typeof theme === "string") {
+      shikiOptions.theme = theme;
+    } else {
+      shikiOptions.themes = theme;
+    }
+    return shikiInstance.codeToHtml(code, shikiOptions);
+  };
+}
+export {
+  shikiHighlighter,
+  createMDConfig
+};

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+export type HighlighterAdapter = (code: string, language: string) => Promise<string> | string;
+export interface MarkdownFeatures {
+    copyCodeButton?: boolean;
+    tabs?: boolean;
+    callouts?: boolean;
+    headerAnchors?: boolean;
+}
+export type ComponentRenderer = (props: Record<string, string>, rawContent: string, parseFn: (str: string) => Promise<string>, parseInlineFn: (str: string) => Promise<string>, features?: MarkdownFeatures) => Promise<string> | string;
+export interface MarkdownConfig {
+    highlighter?: HighlighterAdapter | false;
+    features?: MarkdownFeatures;
+    components?: Record<string, ComponentRenderer>;
+}
+export interface ParsedMarkdown {
+    html: string;
+    meta: Record<string, any>;
+    headings: Array<{
+        level: number;
+        text: string;
+        id: string;
+    }>;
+}
+export interface MarkdownEngine {
+    parse: (rawString: string) => Promise<ParsedMarkdown>;
+}

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "auwla-markdown",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@types/bun": "latest",
     "@types/prismjs": "^1.26.6",
@@ -27,6 +30,6 @@
     "marked-highlight": "^2.2.4"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.lib.json"
+    "build": "bun -e \"import { rmSync } from 'fs'; rmSync('dist', { recursive: true, force: true })\" && bun build src/index.ts --outdir dist --target node --external shiki --external prismjs --external marked --external marked-highlight && tsc --project tsconfig.lib.json --emitDeclarationOnly"
   }
 }