import { h } from "@stencil/core";
import { marked } from "marked";
export class MarkdownRenderer {
    /**
     * 要渲染的Markdown内容
     */
    content = '';
    /**
     * 是否启用代码高亮
     */
    highlightCode = true;
    /**
     * 是否启用表格
     */
    enableTables = true;
    /**
     * 是否启用任务列表
     */
    enableTaskLists = true;
    /**
     * 是否启用脚注
     */
    enableFootnotes = true;
    renderedHtml = '';
    componentWillLoad() {
        this.setupMarked();
        this.renderMarkdown();
    }
    contentChanged() {
        this.renderMarkdown();
    }
    setupMarked() {
        // 配置marked选项
        marked.setOptions({
            breaks: true, // 支持换行
            gfm: true, // GitHub风格Markdown
        });
        // 自定义渲染器
        const renderer = new marked.Renderer();
        // 自定义链接渲染
        renderer.link = ({ href, title, text }) => {
            const titleAttr = title ? ` title="${title}"` : '';
            return `<a href="${href}" target="_blank" rel="noopener noreferrer"${titleAttr}>${text}</a>`;
        };
        // 自定义图片渲染
        renderer.image = ({ href, title, text }) => {
            const titleAttr = title ? ` title="${title}"` : '';
            const altAttr = text ? ` alt="${text}"` : '';
            return `<img src="${href}"${altAttr}${titleAttr} loading="lazy" />`;
        };
        // 自定义代码块渲染
        renderer.code = ({ text, lang }) => {
            const language = lang || 'text';
            return `<pre><code class="language-${language}">${text}</code></pre>`;
        };
        // 自定义表格渲染
        renderer.table = (token) => {
            const header = token.header.map(cell => `<th>${cell.text}</th>`).join('');
            const body = token.rows.map(row => `<tr>${row.map(cell => `<td>${cell.text}</td>`).join('')}</tr>`).join('');
            return `<div class="table-wrapper"><table><thead><tr>${header}</tr></thead><tbody>${body}</tbody></table></div>`;
        };
        marked.use({ renderer });
    }
    async renderMarkdown() {
        if (!this.content) {
            this.renderedHtml = '';
            return;
        }
        try {
            this.renderedHtml = await marked(this.content);
        }
        catch (error) {
            console.error('Markdown rendering error:', error);
            this.renderedHtml = `<p>Error rendering markdown: ${error.message}</p>`;
        }
    }
    render() {
        return (h("div", { key: 'd6f6f9ef42cf4923b873d813e12cce534d7235db', class: "markdown-renderer", innerHTML: this.renderedHtml }));
    }
    static get is() { return "markdown-renderer"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["markdown-renderer.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["markdown-renderer.css"]
        };
    }
    static get properties() {
        return {
            "content": {
                "type": "string",
                "attribute": "content",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8981\u6E32\u67D3\u7684Markdown\u5185\u5BB9"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "highlightCode": {
                "type": "boolean",
                "attribute": "highlight-code",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u542F\u7528\u4EE3\u7801\u9AD8\u4EAE"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "enableTables": {
                "type": "boolean",
                "attribute": "enable-tables",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u542F\u7528\u8868\u683C"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "enableTaskLists": {
                "type": "boolean",
                "attribute": "enable-task-lists",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u542F\u7528\u4EFB\u52A1\u5217\u8868"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "enableFootnotes": {
                "type": "boolean",
                "attribute": "enable-footnotes",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u542F\u7528\u811A\u6CE8"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "renderedHtml": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "content",
                "methodName": "contentChanged"
            }];
    }
}
//# sourceMappingURL=markdown-renderer.js.map
