simple-customize-markdown-converter 1.1.0 → 1.2.1

package/dist/renderers/default/handler.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FootnoteRefHandler = exports.HTMLInlineHandler = exports.HTMLBlockHandler = exports.TableHandler = exports.TextHandler = exports.HorizontalLineHandler = exports.ImageHandler = exports.LinkHandler = exports.InlineCodeHandler = exports.StrikethroughHandler = exports.ItalicHandler = exports.BoldHandler = exports.TaskItemHandler = exports.ListItemHandler = exports.ListHandler = exports.QuoteHandler = exports.HeaderHandler = exports.CodeBlockHandler = exports.ParagraphHandler = exports.DocumentHandler = void 0;
+const renderer_utils_1 = require("../../utilities/renderer-utils");
+//Base structural nodes
+exports.DocumentHandler = {
+    type: "Document",
+    render: (_node, children, ctx) => children.join("") + ctx.renderFootnotes()
+};
+exports.ParagraphHandler = {
+    type: "Paragraph",
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<p${cls ? ` class="${cls}"` : ""}>${children.join("")}</p>`;
+    }
+};
+//Container nodes
+exports.CodeBlockHandler = {
+    type: "CodeBlock",
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node, `lang-${node.lang}`);
+        return `<pre><code${cls ? ` class="${cls}"` : ""}>${(0, renderer_utils_1.escapeHtml)(node.content || "")}</code></pre>`;
+    }
+};
+exports.HeaderHandler = {
+    type: "Header",
+    render: (node, children, ctx) => {
+        if (node.level) {
+            const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+            const classAttr = cls ? ` class="${cls}"` : "";
+            const style = node.level <= 2 ? ' style="border-bottom: 1px solid #d1d9e0b3"' : '';
+            return `<h${node.level}${classAttr}${style}>${children.join("")}</h${node.level}>`;
+        }
+        return `<p>${children.join("")}</p>`;
+    }
+};
+exports.QuoteHandler = {
+    type: "Quote",
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        const classAttr = cls ? ` class="${cls}"` : "";
+        return `<blockquote${classAttr} style="margin:0; padding:0 1em; color:#59636e; border-left:.25em solid #d1d9e0;">${children.join("")}</blockquote>`;
+    }
+};
+//For list nodes
+exports.ListHandler = {
+    type: "List",
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        const classAttr = cls ? ` class="${cls}"` : "";
+        return node.ordered ? `<ol${classAttr}>${children.join("")}</ol>` : `<ul${classAttr}>${children.join("")}</ul>`;
+    }
+};
+exports.ListItemHandler = {
+    type: "ListItem",
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<li${cls ? ` class="${cls}"` : ""}>${children.join("")}</li>`;
+    }
+};
+exports.TaskItemHandler = {
+    type: "TaskItem",
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<li${cls ? ` class="${cls}"` : ""} style="list-style-type: none"><input type="checkbox" disabled ${node.checked ? "checked" : ""}>${children.join("")}</li>`;
+    }
+};
+//Styling nodes
+exports.BoldHandler = {
+    type: "Bold",
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<strong${cls ? ` class="${cls}"` : ""}>${children.join("")}</strong>`;
+    }
+};
+exports.ItalicHandler = {
+    type: "Italic",
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<em${cls ? ` class="${cls}"` : ""}>${children.join("")}</em>`;
+    }
+};
+exports.StrikethroughHandler = {
+    type: "Strikethrough",
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<s${cls ? ` class="${cls}"` : ""}>${children.join("")}</s>`;
+    }
+};
+exports.InlineCodeHandler = {
+    type: "InlineCode",
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<code${cls ? ` class="${cls}"` : ""}>${(0, renderer_utils_1.escapeHtml)(node.content || "")}</code>`;
+    }
+};
+//Media nodes
+exports.LinkHandler = {
+    type: "Link",
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<a href="${node.href}"${cls ? ` class="${cls}"` : ""} target="_blank" rel="noopener">${node.text}</a>`;
+    }
+};
+exports.ImageHandler = {
+    type: "Image",
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<img src="${node.src || ""}" alt="${node.alt || ""}"${cls ? ` class="${cls}"` : ""}/>`;
+    }
+};
+//Leaf nodes
+exports.HorizontalLineHandler = {
+    type: "HorizontalLine",
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<hr${cls ? ` class="${cls}"` : ""}>`;
+    }
+};
+exports.TextHandler = {
+    type: "Text",
+    render: (node) => node.value || ""
+};
+//Table nodes
+exports.TableHandler = {
+    type: "Table",
+    render: (node, children, ctx) => ctx.renderTable(node, children)
+};
+//For HTML
+exports.HTMLBlockHandler = {
+    type: "HTMLBlock",
+    render: (node, _children, ctx) => {
+        const val = node.value || "";
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        const content = ctx.options.converterOptions?.allowDangerousHtml ? val : (0, renderer_utils_1.escapeHtml)(val);
+        return cls ? `<div${cls ? ` class="${cls}"` : ""}>${content}</div>` : content;
+    }
+};
+exports.HTMLInlineHandler = {
+    type: "HTMLInline",
+    render: (node, _children, ctx) => {
+        const val = node.value || "";
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        const content = ctx.options.converterOptions?.allowDangerousHtml ? val : (0, renderer_utils_1.escapeHtml)(val);
+        return cls ? `<span${cls ? ` class="${cls}"` : ""}>${content}</span>` : content;
+    }
+};
+//For footnote
+exports.FootnoteRefHandler = {
+    type: "FootnoteRef",
+    render: (node, _children, ctx) => {
+        if (node.id) {
+            const idx = ctx.footnoteResolver.getUsedRefById(node.id);
+            const cls = (0, renderer_utils_1.getClassName)(ctx, node, "footnote-ref");
+            return `<sup id="fnref:${idx}"><a href="#fn:${idx}"${cls ? ` class="${cls}"` : ""}>[${idx}]</a></sup>`;
+        }
+        return "";
+    }
+};

package/dist/renderers/default/index.d.ts

@@ -0,0 +1,14 @@
+import { IRenderer } from "..";
+import { MarkdownOptions } from "../../types/options";
+import { ASTNode } from "../../types/parser";
+import { FootnoteResolver } from "../../core/resolver/footnote-resolver";
+export declare class DefaultRenderer implements IRenderer<string> {
+    options: MarkdownOptions<string>;
+    footnoteResolver: FootnoteResolver;
+    private strategies;
+    constructor(footnoteResolver: FootnoteResolver, options?: MarkdownOptions<string>);
+    private registerDefaultStrategies;
+    render(node: ASTNode): string;
+    renderFootnotes(): string;
+    renderTable(node: ASTNode, children: string[]): string;
+}

package/dist/renderers/default/index.js

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultRenderer = void 0;
+const Handlers = __importStar(require("./handler"));
+const renderer_utils_1 = require("../../utilities/renderer-utils");
+class DefaultRenderer {
+    constructor(footnoteResolver, options = {}) {
+        this.strategies = new Map();
+        this.footnoteResolver = footnoteResolver;
+        this.options = options;
+        this.registerDefaultStrategies();
+    }
+    registerDefaultStrategies() {
+        const listDefaultStrategy = [
+            Handlers.DocumentHandler,
+            Handlers.ParagraphHandler,
+            Handlers.HeaderHandler,
+            Handlers.CodeBlockHandler,
+            Handlers.QuoteHandler,
+            Handlers.BoldHandler,
+            Handlers.ItalicHandler,
+            Handlers.StrikethroughHandler,
+            Handlers.InlineCodeHandler,
+            Handlers.LinkHandler,
+            Handlers.ImageHandler,
+            Handlers.ListHandler,
+            Handlers.ListItemHandler,
+            Handlers.TaskItemHandler,
+            Handlers.TableHandler,
+            Handlers.TextHandler,
+            Handlers.HorizontalLineHandler,
+            Handlers.HTMLBlockHandler,
+            Handlers.HTMLInlineHandler,
+            Handlers.FootnoteRefHandler
+        ];
+        listDefaultStrategy.forEach(s => this.strategies.set(s.type, s));
+    }
+    render(node) {
+        const userRenderer = this.options.renderOptions?.elements?.[node.type];
+        const children = (node.children || []).map(child => this.render(child));
+        if (userRenderer) {
+            return userRenderer(node, children);
+        }
+        const strategy = this.strategies.get(node.type);
+        if (strategy) {
+            return strategy.render(node, children, this);
+        }
+        return children.join("");
+    }
+    renderFootnotes() {
+        if (this.footnoteResolver.isResolverValid()) {
+            const used = this.footnoteResolver.getUsedRef();
+            if (used.length === 0)
+                return "";
+            const items = used.map((id, i) => {
+                const def = this.footnoteResolver.getDef(id) ?? "";
+                const idx = i + 1;
+                return `<li id="fn:${idx}"><p>${def} <a href="#fnref:${idx}" class="footnote-backref">↩</a></p></li>`;
+            });
+            return `<section class="footnotes"><ol>${items.join("")}</ol></section>`;
+        }
+        else
+            return "";
+    }
+    renderTable(node, children) {
+        const cls = (0, renderer_utils_1.getClassName)(this, node);
+        if (node.type === "Table" && node.rows) {
+            const header = node.rows.filter(row => row.isHeader);
+            const body = node.rows.filter(row => !row.isHeader);
+            const renderRows = (row) => {
+                const tag = row.isHeader ? "th" : "td";
+                const cells = row.cells.map(cell => {
+                    const align = `style="text-align:${cell.align}"`;
+                    return `<${tag} ${align}>${cell.children.map(c => this.render(c)).join("")}</${tag}>`;
+                }).join("");
+                return `<tr>${cells}</tr>`;
+            };
+            const tHead = header.length ? `<thead>${header.map(renderRows).join("")}</thead>` : "";
+            const tBody = body.length ? `<tbody>${body.map(renderRows).join("")}</tbody>` : "";
+            return `<table${cls ? ` class="${cls}"` : ""}>${tHead}${tBody}</table>`;
+        }
+        else
+            return `<p${cls ? ` class="${cls}"` : ""}>${children.join("\n")}</p>`;
+    }
+}
+exports.DefaultRenderer = DefaultRenderer;

package/dist/renderers/index.d.ts

@@ -0,0 +1,10 @@
+import { ASTNode } from "../types/parser";
+import { MarkdownOptions } from '../types/options/index';
+import { FootnoteResolver } from "../core/resolver/footnote-resolver";
+export interface IRenderer<TOutput> {
+    options: MarkdownOptions<TOutput>;
+    footnoteResolver: FootnoteResolver;
+    render(node: ASTNode): TOutput;
+    renderTable(node: ASTNode, children: TOutput[]): TOutput;
+    renderFootnotes(): TOutput;
+}

package/dist/renderers/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/renderers/react/handler.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { RenderStrategy } from "../../types/renderer";
+export declare const DocumentHandler: RenderStrategy<ReactNode>;
+export declare const ParagraphHandler: RenderStrategy<ReactNode>;
+export declare const CodeBlockHandler: RenderStrategy<ReactNode>;
+export declare const HeaderHandler: RenderStrategy<ReactNode>;
+export declare const QuoteHandler: RenderStrategy<ReactNode>;
+export declare const ListHandler: RenderStrategy<ReactNode>;
+export declare const ListItemHandler: RenderStrategy<ReactNode>;
+export declare const TaskItemHandler: RenderStrategy<ReactNode>;
+export declare const BoldHandler: RenderStrategy<ReactNode>;
+export declare const ItalicHandler: RenderStrategy<ReactNode>;
+export declare const StrikethroughHandler: RenderStrategy<ReactNode>;
+export declare const InlineCodeHandler: RenderStrategy<ReactNode>;
+export declare const LinkHandler: RenderStrategy<ReactNode>;
+export declare const ImageHandler: RenderStrategy<ReactNode>;
+export declare const HorizontalLineHandler: RenderStrategy<ReactNode>;
+export declare const TextHandler: RenderStrategy<ReactNode>;
+export declare const TableHandler: RenderStrategy<ReactNode>;
+export declare const HTMLBlockHandler: RenderStrategy<ReactNode>;
+export declare const HTMLInlineHandler: RenderStrategy<ReactNode>;
+export declare const FootnoteRefHandler: RenderStrategy<ReactNode>;

package/dist/renderers/react/handler.js

@@ -0,0 +1,140 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FootnoteRefHandler = exports.HTMLInlineHandler = exports.HTMLBlockHandler = exports.TableHandler = exports.TextHandler = exports.HorizontalLineHandler = exports.ImageHandler = exports.LinkHandler = exports.InlineCodeHandler = exports.StrikethroughHandler = exports.ItalicHandler = exports.BoldHandler = exports.TaskItemHandler = exports.ListItemHandler = exports.ListHandler = exports.QuoteHandler = exports.HeaderHandler = exports.CodeBlockHandler = exports.ParagraphHandler = exports.DocumentHandler = void 0;
+const react_1 = __importDefault(require("react"));
+const renderer_utils_1 = require("../../utilities/renderer-utils");
+//Base structural nodes
+exports.DocumentHandler = {
+    type: "Document",
+    render: (node, children, ctx) => react_1.default.createElement(react_1.default.Fragment, null, ...children, ctx.renderFootnotes())
+};
+exports.ParagraphHandler = {
+    type: "Paragraph",
+    render: (node, children, ctx) => react_1.default.createElement("p", { className: (0, renderer_utils_1.getClassName)(ctx, node) }, ...children)
+};
+//Container nodes
+exports.CodeBlockHandler = {
+    type: "CodeBlock",
+    render: (node, _children, ctx) => react_1.default.createElement("pre", null, react_1.default.createElement("code", { className: (0, renderer_utils_1.getClassName)(ctx, node, `lang-${node.lang}`) }, node.content || ""))
+};
+exports.HeaderHandler = {
+    type: "Header",
+    render: (node, children, ctx) => {
+        if (!node.level)
+            return react_1.default.createElement("p", null, ...children);
+        return react_1.default.createElement(`h${node.level}`, {
+            className: (0, renderer_utils_1.getClassName)(ctx, node),
+            style: { borderBottom: node.level <= 2 ? "1px solid #d1d9e0b3" : undefined }
+        }, ...children);
+    }
+};
+exports.QuoteHandler = {
+    type: "Quote",
+    render: (node, children, ctx) => react_1.default.createElement("blockquote", {
+        className: (0, renderer_utils_1.getClassName)(ctx, node),
+        style: { margin: "0", padding: "0 1em", color: "#59636e", borderLeft: ".25em solid #d1d9e0" }
+    }, ...children)
+};
+//For list nodes
+exports.ListHandler = {
+    type: "List",
+    render: (node, children, ctx) => react_1.default.createElement(node.ordered ? "ol" : "ul", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
+};
+exports.ListItemHandler = {
+    type: "ListItem",
+    render: (node, children, ctx) => react_1.default.createElement("li", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
+};
+exports.TaskItemHandler = {
+    type: "TaskItem",
+    render: (node, children, ctx) => react_1.default.createElement("li", {
+        className: (0, renderer_utils_1.getClassName)(ctx, node),
+        style: { listStyleType: "none" }
+    }, react_1.default.createElement("input", {
+        type: "checkbox",
+        disabled: true,
+        checked: !!node.checked,
+        readOnly: true
+    }), ...children)
+};
+//Styling nodes
+exports.BoldHandler = {
+    type: "Bold",
+    render: (node, children, ctx) => react_1.default.createElement("strong", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
+};
+exports.ItalicHandler = {
+    type: "Italic",
+    render: (node, children, ctx) => react_1.default.createElement("em", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
+};
+exports.StrikethroughHandler = {
+    type: "Strikethrough",
+    render: (node, children, ctx) => react_1.default.createElement("s", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
+};
+exports.InlineCodeHandler = {
+    type: "InlineCode",
+    render: (node, _children, ctx) => react_1.default.createElement("code", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, node.content || "")
+};
+//Media nodes
+exports.LinkHandler = {
+    type: "Link",
+    render: (node, _children, ctx) => react_1.default.createElement("a", {
+        className: (0, renderer_utils_1.getClassName)(ctx, node),
+        href: node.href, target: "_blank", rel: "noopener"
+    }, node.text)
+};
+exports.ImageHandler = {
+    type: "Image",
+    render: (node, _children, ctx) => react_1.default.createElement("img", {
+        className: (0, renderer_utils_1.getClassName)(ctx, node),
+        src: node.src || "",
+        alt: node.alt || ""
+    })
+};
+//Leaf nodes
+exports.HorizontalLineHandler = {
+    type: "HorizontalLine",
+    render: (node, _children, ctx) => react_1.default.createElement("hr", { className: (0, renderer_utils_1.getClassName)(ctx, node), })
+};
+exports.TextHandler = {
+    type: "Text",
+    render: (node) => node.value || ""
+};
+//Table nodes
+exports.TableHandler = {
+    type: "Table",
+    render: (node, children, ctx) => ctx.renderTable(node, children)
+};
+//For HTML
+exports.HTMLBlockHandler = {
+    type: "HTMLBlock",
+    render: (node, _children, ctx) => {
+        const val = node.value || "";
+        return ctx.options.converterOptions?.allowDangerousHtml
+            ? react_1.default.createElement("div", { className: (0, renderer_utils_1.getClassName)(ctx, node), dangerouslySetInnerHTML: { __html: val } })
+            : react_1.default.createElement("code", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, val);
+    }
+};
+exports.HTMLInlineHandler = {
+    type: "HTMLInline",
+    render: (node, _children, ctx) => {
+        const val = node.value || "";
+        return ctx.options.converterOptions?.allowDangerousHtml
+            ? react_1.default.createElement("span", { className: (0, renderer_utils_1.getClassName)(ctx, node), dangerouslySetInnerHTML: { __html: val } })
+            : react_1.default.createElement("code", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, val);
+    }
+};
+//For footnote
+exports.FootnoteRefHandler = {
+    type: "FootnoteRef",
+    render: (node, _children, ctx) => {
+        if (!node.id)
+            return null;
+        const idx = ctx.footnoteResolver.getUsedRefById(node.id);
+        return react_1.default.createElement("sup", { id: `fnref:${idx}` }, react_1.default.createElement("a", {
+            className: (0, renderer_utils_1.getClassName)(ctx, node, "footnote-ref"),
+            href: `#fn:${idx}`,
+        }, `[${idx}]`));
+    }
+};

package/dist/renderers/react/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { IRenderer } from "..";
+import { MarkdownOptions } from "../../types/options";
+import { ASTNode } from "../../types/parser";
+import { FootnoteResolver } from "../../core/resolver/footnote-resolver";
+export declare class ReactRenderer implements IRenderer<React.ReactNode> {
+    options: MarkdownOptions<React.ReactNode>;
+    footnoteResolver: FootnoteResolver;
+    private strategies;
+    constructor(footnoteResolver: FootnoteResolver, options?: MarkdownOptions<React.ReactNode>);
+    private registerDefaultStrategies;
+    render(node: ASTNode): React.ReactNode;
+    renderFootnotes(): React.ReactNode;
+    renderTable(node: ASTNode, children: React.ReactNode[]): React.ReactNode;
+}

package/dist/renderers/react/index.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactRenderer = void 0;
+const react_1 = __importDefault(require("react"));
+const Handlers = __importStar(require("./handler"));
+const renderer_utils_1 = require("../../utilities/renderer-utils");
+class ReactRenderer {
+    constructor(footnoteResolver, options = {}) {
+        this.strategies = new Map();
+        this.footnoteResolver = footnoteResolver;
+        this.options = options;
+        this.registerDefaultStrategies();
+    }
+    registerDefaultStrategies() {
+        const listDefaultStrategy = [
+            Handlers.DocumentHandler,
+            Handlers.ParagraphHandler,
+            Handlers.HeaderHandler,
+            Handlers.CodeBlockHandler,
+            Handlers.QuoteHandler,
+            Handlers.BoldHandler,
+            Handlers.ItalicHandler,
+            Handlers.StrikethroughHandler,
+            Handlers.InlineCodeHandler,
+            Handlers.LinkHandler,
+            Handlers.ImageHandler,
+            Handlers.ListHandler,
+            Handlers.ListItemHandler,
+            Handlers.TaskItemHandler,
+            Handlers.TableHandler,
+            Handlers.TextHandler,
+            Handlers.HorizontalLineHandler,
+            Handlers.HTMLBlockHandler,
+            Handlers.HTMLInlineHandler,
+            Handlers.FootnoteRefHandler
+        ];
+        listDefaultStrategy.forEach(s => this.strategies.set(s.type, s));
+    }
+    render(node) {
+        const userRenderer = this.options.renderOptions?.elements?.[node.type];
+        const children = (node.children || []).map(child => this.render(child));
+        if (userRenderer) {
+            return userRenderer(node, children);
+        }
+        const strategy = this.strategies.get(node.type);
+        if (strategy) {
+            return strategy.render(node, children, this);
+        }
+        return children.join("");
+    }
+    renderFootnotes() {
+        if (this.footnoteResolver.isResolverValid()) {
+            const used = this.footnoteResolver.getUsedRef();
+            if (used.length === 0)
+                return null;
+            const items = used.map((id, i) => {
+                const def = this.footnoteResolver.getDef(id) ?? "";
+                const idx = i + 1;
+                return react_1.default.createElement("li", { id: `fn:${idx}` }, react_1.default.createElement("p", null, def + " ", react_1.default.createElement("a", { href: `#fnref:${idx}`, className: "footnote-backref" }, "↩")));
+            });
+            return react_1.default.createElement("section", { className: "footnotes" }, react_1.default.createElement("ol", null, ...items));
+        }
+        else
+            return null;
+    }
+    renderTable(node, children) {
+        if (node.type === "Table" && node.rows) {
+            const header = node.rows.filter(row => row.isHeader);
+            const body = node.rows.filter(row => !row.isHeader);
+            const renderRows = (row, rowIndex) => {
+                return react_1.default.createElement("tr", { key: rowIndex }, row.cells.map((cell, cellIndex) => {
+                    const tag = row.isHeader ? "th" : "td";
+                    return react_1.default.createElement(tag, { key: cellIndex, style: { textAlign: cell.align } }, ...cell.children.map(c => this.render(c)));
+                }));
+            };
+            const tHead = header.length
+                ? react_1.default.createElement("thead", null, header.map((row, i) => renderRows(row, i)))
+                : null;
+            const tBody = body.length
+                ? react_1.default.createElement("tbody", null, body.map((row, i) => renderRows(row, i)))
+                : null;
+            return react_1.default.createElement("table", { className: (0, renderer_utils_1.getClassName)(this, node), }, tHead, tBody);
+        }
+        else
+            return react_1.default.createElement("p", { className: (0, renderer_utils_1.getClassName)(this, node), }, ...children);
+    }
+}
+exports.ReactRenderer = ReactRenderer;

package/dist/types/options/converterOptions.d.ts

@@ -1,5 +1,5 @@
 /**
- * General option for the render process,
+ * General option for the render process.
  * These rules define high-level behavior for render process.
  */
 export type ConvertOption = {

package/dist/types/options/index.d.ts

@@ -1,17 +1,10 @@
 import { ConvertOption } from "./converterOptions";
-import { ReactRenderOption } from "./reactRenderOptions";
-import { RenderOption } from "./renderOptions";
+import { RenderOption } from './renderOptions';
 /**
  * General option for rendering Markdown into HTML strings
+ * @template TOutput - Output type after rendered
  */
-export type MarkdownDefaultOptions = {
-    renderOptions?: RenderOption;
+export interface MarkdownOptions<TOutput> {
+    renderOptions?: RenderOption<TOutput>;
     converterOptions?: ConvertOption;
-};
-/**
- * General option for rendering Markdown into `React.ReactNode` elements
- */
-export type MarkdownReactOptions = {
-    renderOptions?: ReactRenderOption;
-    converterOptions?: ConvertOption;
-};
+}