ttrpg-tools/src/markdown/index.ts

import { Marked, type MarkedExtension } from 'marked';
import {createDirectives, presetDirectiveConfigs} from 'marked-directive';
import yaml from 'js-yaml';
import markedAlert from "marked-alert";
import markedMermaid from "./mermaid";
import markedTable from "./table";
import {gfmHeadingId} from "marked-gfm-heading-id";
import markedColumns from "./columns";

let globalIconPrefix: string | undefined = undefined;
function overrideIconPrefix(path?: string){
    globalIconPrefix = path;
    return {
        [Symbol.dispose](){
            globalIconPrefix = undefined;
        }
    }
}

// 使用 marked-directive 来支持指令语法
const marked = new Marked()
    .use(gfmHeadingId())
    .use(markedAlert())
    .use(markedMermaid())
    .use(markedTable())
    .use(createDirectives([
    ...presetDirectiveConfigs,
    {
        marker: '::::',
        level: 'container'
    },
    {
        marker: ':::::',
        level: 'container'
    },
    {
        level: 'inline',
        marker: ':',
        // :[icon] 或 :[icon.ext] 语法
        // 支持的扩展名: .svg, .png, .gif, .jpg, .jpeg, .webp
        // 如果不指定扩展名，默认为 .png
        renderer(token) {
            if (!token.meta.name) {
                const iconText = token.text || '';
                
                // 已知支持的图片扩展名
                const supportedExtensions = ['svg', 'png', 'gif', 'jpg', 'jpeg', 'webp'];
                
                // 检查是否包含扩展名（查找最后一个点）
                let iconName = iconText;
                let extension = 'png'; // 默认扩展名
                
                const lastDotIndex = iconName.lastIndexOf('.');
                if (lastDotIndex > 0) {
                    const potentialExt = iconName.slice(lastDotIndex + 1).toLowerCase();
                    if (supportedExtensions.includes(potentialExt)) {
                        extension = potentialExt;
                        iconName = iconName.slice(0, lastDotIndex);
                    }
                }
                
                const label = token.attrs?.label as string | undefined;
                const inner = label ? `<span class="icon-label-stroke">${label}</span><span class="icon-label">${label}</span>` : "";
                const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}/${iconName}.${extension}')"` : '';
                const iconHtml = `<icon ${style} class="icon-${iconName} ${token.attrs?.class || ""}">${inner}</icon>`;
                
                const repeat = parseInt(`${token.attrs?.repeat || ''}`);
                const join = token.attrs?.join || '';
                const separator = join ? `<${join}></${join}>` : '';
                if(isNaN(repeat) || repeat < 1) return iconHtml;
                
                return Array(repeat).fill(iconHtml).join(separator);
            }
            return false;
        }
    },
]), {
    extensions: [
        ...markedColumns(),
    {
    // 自定义代码块渲染器，支持 yaml/tag 格式
        name: 'code-block-yaml-tag',
        level: 'block',
        start(src: string) {
            // 检测 ```yaml/tag 开头的代码块
            return src.match(/^```yaml\/tag\s*\n/m)?.index;
        },
        tokenizer(src: string) {
            const rule = /^```yaml\/tag\s*\n([\s\S]*?)\n```/;
            const match = rule.exec(src);
            if (match) {
                const yamlContent = match[1]?.trim() || '';
                let props: Record<string, unknown> = {};
                try {
                    props = (yaml.load(yamlContent) as Record<string, unknown>) || {};
                } catch (e) {
                    console.error("YAML Parse Error in code-block-yaml-tag:", e);
                    props = { error: "Invalid YAML content" };
                }

                // 提取 tag 名称，默认为 tag-unknown
                const tagName = (props.tag as string) || 'tag-unknown';

                // 移除 tag 属性，剩下的作为 HTML 属性
                const { tag, ...rest } = props;

                // 提取 innerText 内容（如果有 body 字段）
                let content = '';
                if ('body' in rest) {
                    content = String(rest.body || '');
                    delete (rest as Record<string, unknown>).body;
                }

                // 构建属性字符串
                const propsStr = Object.entries(rest)
                    .map(([key, value]) => {
                        const strValue = String(value);
                        // 如果值包含空格或特殊字符，添加引号
                        if (strValue.includes(' ') || strValue.includes('"')) {
                            return `${key}="${strValue.replace(/"/g, '&quot;')}"`;
                        }
                        return `${key}="${strValue}"`;
                    })
                    .join(' ');

                return {
                    type: 'code-block-yaml-tag',
                    raw: match[0],
                    tagName,
                    props: propsStr,
                    content
                };
            }
        },
        renderer(token: any) {
            // 渲染为自定义 HTML 标签
            const propsAttr = token.props ? ` ${token.props}` : '';
            return `<${token.tagName}${propsAttr}>${token.content || ''}</${token.tagName}>\n`;
        }
    }]
});

export function parseMarkdown(content: string, iconPrefix?: string): string {
    using prefix = overrideIconPrefix(iconPrefix);
    return marked.parse(content.trimStart()) as string;
}

export { marked };