@tanstack/markdown 0.0.1

package/dist/html.js

@@ -0,0 +1,157 @@
+import { parseMarkdown } from './parser.js';
+import { escapeAttr, escapeHtml } from './utils.js';
+export function renderHtml(input, options = {}) {
+    const document = typeof input === 'string' ? parseMarkdown(input, options) : input;
+    return document.children.map(node => renderBlock(node, options)).join('\n');
+}
+export function renderBlock(node, options = {}) {
+    const extension = renderExtension(node, options);
+    if (extension !== undefined)
+        return extension;
+    switch (node.type) {
+        case 'heading': {
+            const id = node.id ? ` id="${escapeAttr(node.id)}"` : '';
+            const framework = node.framework ? ` data-framework="${escapeAttr(node.framework)}"` : '';
+            return `<h${node.depth}${id}${framework}>${renderInlines(node.children, options)}${renderHeadingAnchor(node.id, options)}</h${node.depth}>`;
+        }
+        case 'paragraph':
+            return `<p>${renderInlines(node.children, options)}</p>`;
+        case 'code':
+            return renderCodeBlock(node, options);
+        case 'list': {
+            const tag = node.ordered ? 'ol' : 'ul';
+            const start = node.ordered && node.start && node.start !== 1 ? ` start="${node.start}"` : '';
+            const items = node.items
+                .map(item => {
+                const task = item.checked === undefined
+                    ? ''
+                    : `<input type="checkbox" disabled${item.checked ? ' checked' : ''}> `;
+                return `<li>${task}${item.children.map(child => renderBlock(child, options)).join('\n')}</li>`;
+            })
+                .join('\n');
+            return `<${tag}${start}>\n${items}\n</${tag}>`;
+        }
+        case 'blockquote':
+            return `<blockquote>\n${node.children.map(child => renderBlock(child, options)).join('\n')}\n</blockquote>`;
+        case 'table': {
+            const header = `<thead><tr>${node.header.map((cell, index) => renderTableCell('th', cell, node.align[index], options)).join('')}</tr></thead>`;
+            const body = `<tbody>${node.rows
+                .map(row => `<tr>${row.map((cell, index) => renderTableCell('td', cell, node.align[index], options)).join('')}</tr>`)
+                .join('')}</tbody>`;
+            return `<table>${header}${body}</table>`;
+        }
+        case 'thematicBreak':
+            return '<hr>';
+        case 'html':
+            return options.allowHtml ? node.value : escapeHtml(node.value);
+        case 'callout':
+            return renderCallout(node, options);
+        case 'component':
+            return renderComponent(node, options);
+    }
+}
+export function renderInline(node, options = {}) {
+    const extension = renderExtension(node, options);
+    if (extension !== undefined)
+        return extension;
+    switch (node.type) {
+        case 'text':
+            return escapeHtml(node.value);
+        case 'inlineCode':
+            return `<code>${escapeHtml(node.value)}</code>`;
+        case 'strong':
+            return `<strong>${renderInlines(node.children, options)}</strong>`;
+        case 'emphasis':
+            return `<em>${renderInlines(node.children, options)}</em>`;
+        case 'strike':
+            return `<s>${renderInlines(node.children, options)}</s>`;
+        case 'link':
+            return `<a href="${escapeAttr(node.href)}"${node.title ? ` title="${escapeAttr(node.title)}"` : ''}>${renderInlines(node.children, options)}</a>`;
+        case 'image':
+            return `<img src="${escapeAttr(node.src)}" alt="${escapeAttr(node.alt)}"${node.title ? ` title="${escapeAttr(node.title)}"` : ''}>`;
+        case 'break':
+            return '<br>';
+        case 'inlineHtml':
+            return options.allowHtml ? node.value : escapeHtml(node.value);
+    }
+}
+export function renderDocument(document, options = {}) {
+    return renderHtml(document, options);
+}
+function renderInlines(nodes, options) {
+    return nodes.map(node => renderInline(node, options)).join('');
+}
+function renderCodeBlock(node, options) {
+    const lang = node.lang ?? 'plaintext';
+    const codeAttrs = ` class="language-${escapeAttr(lang)}"`;
+    const preAttrs = [
+        'class="tm-code"',
+        `data-lang="${escapeAttr(lang)}"`,
+        node.title ? `data-code-title="${escapeAttr(node.title)}"` : '',
+        node.file ? `data-filename="${escapeAttr(node.file)}"` : '',
+        node.framework ? `data-framework="${escapeAttr(node.framework)}"` : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const highlighter = options.highlighter;
+    const highlightOptions = {
+        ...(node.highlightLines ? { highlightLines: node.highlightLines } : {}),
+        ...(options.codeLineNumbers !== undefined ? { lineNumbers: options.codeLineNumbers } : {}),
+    };
+    const html = highlighter ? highlighter(node.value, lang, highlightOptions) : escapeHtml(node.value);
+    const pre = `<pre ${preAttrs}><code${codeAttrs}>${html}</code></pre>`;
+    if (!node.title)
+        return pre;
+    return `<figure class="tm-code-frame" data-lang="${escapeAttr(lang)}"><figcaption>${escapeHtml(node.title)}</figcaption>${pre}</figure>`;
+}
+function renderCallout(node, options) {
+    const kind = node.kind.toLowerCase();
+    const children = node.children.map(child => renderBlock(child, options)).join('\n');
+    return `<div class="markdown-alert markdown-alert-${escapeAttr(kind)}"><p class="markdown-alert-title">${escapeHtml(node.title)}</p><div class="markdown-alert-content">${children}</div></div>`;
+}
+function renderComponent(node, options) {
+    const tag = node.tagName ?? 'md-comment-component';
+    const attrs = renderComponentAttrs(node);
+    const children = node.children.map(child => renderBlock(child, options)).join('\n');
+    return `<${tag}${attrs}>${children}</${tag}>`;
+}
+function renderTableCell(tag, cell, align, options) {
+    const style = align ? ` style="text-align:${align}"` : '';
+    return `<${tag}${style}>${renderInlines(cell.children, options)}</${tag}>`;
+}
+function renderExtension(node, options) {
+    for (const extension of options.extensions ?? []) {
+        const rendered = extension.renderHtml?.(node, {
+            options,
+            renderBlock: block => renderBlock(block, options),
+            renderInline: inline => renderInline(inline, options),
+        });
+        if (rendered !== undefined)
+            return rendered;
+    }
+    return undefined;
+}
+function renderHeadingAnchor(id, options) {
+    if (!id || !options.headingAnchors)
+        return '';
+    const anchorOptions = typeof options.headingAnchors === 'object' ? options.headingAnchors : {};
+    const content = anchorOptions.content ?? '#';
+    const className = anchorOptions.className ?? 'anchor-heading anchor-heading-link';
+    const ariaHidden = anchorOptions.ariaHidden ?? true;
+    const tabIndex = anchorOptions.tabIndex ?? -1;
+    return `<a href="#${escapeAttr(id)}" aria-hidden="${ariaHidden}" class="${escapeAttr(className)}" tabindex="${tabIndex}">${escapeHtml(content)}</a>`;
+}
+function renderComponentAttrs(node) {
+    const props = {
+        ...node.properties,
+    };
+    if (!node.tagName) {
+        props['data-component'] = node.name;
+        if (!props['data-attributes'])
+            props['data-attributes'] = JSON.stringify(node.attributes);
+    }
+    const entries = Object.entries(props);
+    if (!entries.length)
+        return '';
+    return ` ${entries.map(([key, value]) => `${key}="${escapeAttr(value)}"`).join(' ')}`;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { renderBlock, renderDocument, renderHtml, renderInline } from './html.js';
+export { parseInline } from './inline.js';
+export { parseMarkdown } from './parser.js';
+export type * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,mBAAmB,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { renderBlock, renderDocument, renderHtml, renderInline } from './html.js';
+export { parseInline } from './inline.js';
+export { parseMarkdown } from './parser.js';

package/dist/inline.d.ts

@@ -0,0 +1,3 @@
+import type { InlineNode, ParseOptions } from './types.js';
+export declare function parseInline(value: string, options?: ParseOptions): InlineNode[];
+//# sourceMappingURL=inline.d.ts.map

package/dist/inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../src/inline.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAG1D,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,UAAU,EAAE,CASnF"}

package/dist/inline.js

@@ -0,0 +1,227 @@
+import { sanitizeUrl } from './utils.js';
+export function parseInline(value, options = {}) {
+    const nodes = parseInlineRaw(value, options);
+    let result = mergeText(nodes);
+    for (const extension of options.extensions ?? []) {
+        result = extension.transformInline?.(result, { options }) ?? result;
+    }
+    return result;
+}
+function parseInlineRaw(value, options) {
+    const nodes = [];
+    let index = 0;
+    let text = '';
+    const pushText = () => {
+        if (text) {
+            nodes.push({ type: 'text', value: text });
+            text = '';
+        }
+    };
+    while (index < value.length) {
+        const char = value[index];
+        const next = value[index + 1];
+        if (char === '\\') {
+            if (next === '\n') {
+                pushText();
+                nodes.push({ type: 'break' });
+                index += 2;
+                continue;
+            }
+            if (next && /[\\`*_[\]{}()#+\-.!|~>]/.test(next)) {
+                text += next;
+                index += 2;
+                continue;
+            }
+        }
+        if (char === '`') {
+            const tickCount = countRun(value, index, '`');
+            const close = findClosingRun(value, index + tickCount, '`', tickCount);
+            if (close !== -1) {
+                pushText();
+                nodes.push({
+                    type: 'inlineCode',
+                    value: value.slice(index + tickCount, close).replace(/\s+/g, ' ').trim(),
+                });
+                index = close + tickCount;
+                continue;
+            }
+        }
+        if (char === '!' && next === '[') {
+            const parsed = parseLinkish(value, index + 1, options);
+            if (parsed) {
+                pushText();
+                nodes.push({
+                    type: 'image',
+                    src: sanitizeUrl(parsed.href),
+                    alt: textFromMarkdown(parsed.label),
+                    ...(parsed.title ? { title: parsed.title } : {}),
+                });
+                index = parsed.end;
+                continue;
+            }
+        }
+        if (char === '[') {
+            const parsed = parseLinkish(value, index, options);
+            if (parsed) {
+                const href = sanitizeUrl(parsed.href);
+                pushText();
+                if (href) {
+                    nodes.push({
+                        type: 'link',
+                        href,
+                        ...(parsed.title ? { title: parsed.title } : {}),
+                        children: parseInlineRaw(parsed.label, options),
+                    });
+                }
+                else {
+                    nodes.push(...parseInlineRaw(parsed.label, options));
+                }
+                index = parsed.end;
+                continue;
+            }
+        }
+        if ((char === '*' && next === '*') || (char === '_' && next === '_')) {
+            const close = findDelimiter(value, index + 2, char + char);
+            if (close !== -1) {
+                pushText();
+                nodes.push({
+                    type: 'strong',
+                    children: parseInlineRaw(value.slice(index + 2, close), options),
+                });
+                index = close + 2;
+                continue;
+            }
+            text += char + next;
+            index += 2;
+            continue;
+        }
+        if (char === '~' && next === '~') {
+            const close = findDelimiter(value, index + 2, '~~');
+            if (close !== -1) {
+                pushText();
+                nodes.push({
+                    type: 'strike',
+                    children: parseInlineRaw(value.slice(index + 2, close), options),
+                });
+                index = close + 2;
+                continue;
+            }
+            text += '~~';
+            index += 2;
+            continue;
+        }
+        if (char === '*' || char === '_') {
+            const close = findDelimiter(value, index + 1, char);
+            if (close !== -1 && !isIntrawordUnderscore(value, index, close, char)) {
+                pushText();
+                nodes.push({
+                    type: 'emphasis',
+                    children: parseInlineRaw(value.slice(index + 1, close), options),
+                });
+                index = close + 1;
+                continue;
+            }
+        }
+        if (char === '<' && options.allowHtml) {
+            const close = value.indexOf('>', index + 1);
+            if (close !== -1) {
+                pushText();
+                nodes.push({ type: 'inlineHtml', value: value.slice(index, close + 1) });
+                index = close + 1;
+                continue;
+            }
+        }
+        text += char;
+        index++;
+    }
+    pushText();
+    return nodes;
+}
+function parseLinkish(value, open, options) {
+    const closeBracket = findBalanced(value, open, '[', ']');
+    if (closeBracket === -1 || value[closeBracket + 1] !== '(')
+        return undefined;
+    const closeParen = findBalanced(value, closeBracket + 1, '(', ')');
+    if (closeParen === -1)
+        return undefined;
+    const label = value.slice(open + 1, closeBracket);
+    const destination = value.slice(closeBracket + 2, closeParen).trim();
+    const parsed = parseDestination(destination);
+    if (!parsed.href)
+        return undefined;
+    return {
+        label,
+        href: parsed.href,
+        ...(parsed.title ? { title: parsed.title } : {}),
+        end: closeParen + 1,
+    };
+}
+function parseDestination(value) {
+    const match = value.match(/^(\S+)(?:\s+["']([^"']*)["'])?$/);
+    if (!match)
+        return { href: value };
+    return {
+        href: match[1].replace(/^<|>$/g, ''),
+        ...(match[2] ? { title: match[2] } : {}),
+    };
+}
+function findBalanced(value, openIndex, open, close) {
+    let depth = 0;
+    for (let index = openIndex; index < value.length; index++) {
+        if (value[index - 1] === '\\')
+            continue;
+        if (value[index] === open)
+            depth++;
+        if (value[index] === close) {
+            depth--;
+            if (depth === 0)
+                return index;
+        }
+    }
+    return -1;
+}
+function countRun(value, index, char) {
+    let count = 0;
+    while (value[index + count] === char)
+        count++;
+    return count;
+}
+function findClosingRun(value, start, char, count) {
+    for (let index = start; index < value.length; index++) {
+        if (value[index] !== char)
+            continue;
+        if (countRun(value, index, char) >= count)
+            return index;
+    }
+    return -1;
+}
+function findDelimiter(value, start, delimiter) {
+    for (let index = start; index < value.length; index++) {
+        if (value[index - 1] === '\\')
+            continue;
+        if (value.startsWith(delimiter, index))
+            return index;
+    }
+    return -1;
+}
+function isIntrawordUnderscore(value, open, close, delimiter) {
+    if (delimiter !== '_')
+        return false;
+    return /\w/.test(value[open - 1] ?? '') && /\w/.test(value[close + 1] ?? '');
+}
+function textFromMarkdown(value) {
+    return parseInlineRaw(value, {}).map(node => (node.type === 'text' || node.type === 'inlineCode' ? node.value : '')).join('');
+}
+function mergeText(nodes) {
+    const result = [];
+    for (const node of nodes) {
+        const previous = result.at(-1);
+        if (previous?.type === 'text' && node.type === 'text') {
+            previous.value += node.value;
+        }
+        else {
+            result.push(node);
+        }
+    }
+    return result;
+}

package/dist/parser.d.ts

@@ -0,0 +1,3 @@
+import type { MarkdownDocument, ParseOptions } from './types.js';
+export declare function parseMarkdown(markdown: string, options?: ParseOptions): MarkdownDocument;
+//# sourceMappingURL=parser.d.ts.map

package/dist/parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../src/parser.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAOV,gBAAgB,EAChB,YAAY,EAGb,MAAM,YAAY,CAAA;AAKnB,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,gBAAgB,CAuB5F"}