simple-customize-markdown-converter 1.0.7 → 1.2.0

package/dist/react.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownComponent = void 0;
+exports.convertMarkdownToReactNode = convertMarkdownToReactNode;
+const react_1 = __importDefault(require("react"));
+const lexer_1 = __importDefault(require("./core/lexer"));
+const parser_1 = require("./core/parser");
+const footnote_resolver_1 = require("./core/resolver/footnote-resolver");
+const react_2 = require("./renderers/react");
+/**
+ * Convert a Markdown string into a ReactNode.
+ * @param input - The Markdown source string
+ * @param renderOptions - Optional rendering options
+ * @param options - Optional handle options
+ * @returns The rendered `React.ReactNode` ready to be rendered into a React component.
+ *
+ * @example
+ * ```tsx
+ * const node = convertMarkdownToReactNode("## Hello React");
+ * return <div>{node}</div>;
+ * ```
+ */
+function convertMarkdownToReactNode(input, options = {
+    renderOptions: {},
+    converterOptions: { allowDangerousHtml: false }
+}) {
+    const tokens = new lexer_1.default(input).tokenize();
+    const footNoteResolver = new footnote_resolver_1.FootnoteResolver();
+    const nodes = new parser_1.Parser(tokens, footNoteResolver).parse();
+    return new react_2.ReactRenderer(footNoteResolver, options).render(nodes);
+}
+/**
+ * A React commponent that renders Markdown content.
+ * Using `React.useMemo` to ensure performance and prevent unnecessary re-render.
+ * @param props.content - The Markdown source to render.
+ * @param props.options - Optional configuration for the renderer.
+ * @param props.className - Optional CSS classes for the wrapping `div` element.
+ * @example
+ * ```tsx
+ * <MarkdownComponent
+ *    content="**Bold text here**"
+ *    className="markdown markdown-rendered"
+ *    options={{ converterOptions: { allowDangerousHtml: true } }}
+ * />
+ * ```
+ */
+const MarkdownComponent = ({ content, className, options }) => {
+    const rendered = react_1.default.useMemo(() => {
+        return convertMarkdownToReactNode(content, options);
+    }, [content]);
+    return react_1.default.createElement("div", { className }, rendered);
+};
+exports.MarkdownComponent = MarkdownComponent;

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

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

package/dist/renderers/default/handler.js

@@ -0,0 +1,114 @@
+"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;
+//Base structural nodes
+exports.DocumentHandler = {
+    type: "Document",
+    render: (_node, children, ctx) => children.join("") + ctx.renderFootnotes()
+};
+exports.ParagraphHandler = {
+    type: "Paragraph",
+    render: (_node, children) => `<p>${children.join("")}</p>`
+};
+//Container nodes
+exports.CodeBlockHandler = {
+    type: "CodeBlock",
+    render: (node) => `<pre><code class="lang-${node.lang}">${escapeHtml(node.content || "")}</code></pre>`,
+};
+exports.HeaderHandler = {
+    type: "Header",
+    render: (node, children) => {
+        if (node.level) {
+            const style = node.level <= 2 ? ' style="border-bottom: 1px solid #d1d9e0b3"' : '';
+            return `<h${node.level}${style}>${children.join("")}</h${node.level}>`;
+        }
+        return `<p>${children.join("")}</p>`;
+    }
+};
+exports.QuoteHandler = {
+    type: "Quote",
+    render: (_node, children) => `<blockquote 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) => node.ordered ? `<ol>${children.join("")}</ol>` : `<ul>${children.join("")}</ul>`
+};
+exports.ListItemHandler = {
+    type: "ListItem",
+    render: (_node, children) => `<li>${children.join("")}</li>`
+};
+exports.TaskItemHandler = {
+    type: "TaskItem",
+    render: (node, children) => `<li><input type="checkbox" disabled ${node.checked ? "checked" : ""}>${children.join("")}</li>`
+};
+//Styling nodes
+exports.BoldHandler = {
+    type: "Bold",
+    render: (_node, children) => `<strong>${children.join("")}</strong>`
+};
+exports.ItalicHandler = {
+    type: "Italic",
+    render: (_node, children) => `<em>${children.join("")}</em>`
+};
+exports.StrikethroughHandler = {
+    type: "Strikethrough",
+    render: (_node, children) => `<s>${children.join("")}</s>`
+};
+exports.InlineCodeHandler = {
+    type: "InlineCode",
+    render: (node, _children) => `<code>${escapeHtml(node.content || "")}</code>`
+};
+//Media nodes
+exports.LinkHandler = {
+    type: "Link",
+    render: (node) => `<a href="${node.href}">${node.text}</a>`
+};
+exports.ImageHandler = {
+    type: "Image",
+    render: (node) => `<img src="${node.src || ""}" alt="${node.alt || ""}"/>`
+};
+//Leaf nodes
+exports.HorizontalLineHandler = {
+    type: "HorizontalLine",
+    render: () => `<hr>`
+};
+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 ? val : escapeHtml(val);
+    }
+};
+exports.HTMLInlineHandler = {
+    type: "HTMLInline",
+    render: (node, _children, ctx) => {
+        const val = node.value || "";
+        return ctx.options.converterOptions?.allowDangerousHtml ? val : escapeHtml(val);
+    }
+};
+//For footnote
+exports.FootnoteRefHandler = {
+    type: "FootnoteRef",
+    render: (node, _children, ctx) => {
+        if (node.id) {
+            const idx = ctx.footnoteResolver.getUsedRefById(node.id);
+            return `<sup id="fnref:${idx}"><a href="#fn:${idx}" class="footnote-ref">[${idx}]</a></sup>`;
+        }
+        return "";
+    }
+};
+//Utilities
+function escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}

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,117 @@
+"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"));
+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) {
+        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>${tHead}${tBody}</table>`;
+        }
+        else
+            return `<p>${children.join("\n")}</p>`;
+    }
+}
+exports.DefaultRenderer = DefaultRenderer;

package/dist/renderers/default.d.ts

@@ -0,0 +1,26 @@
+import { FootnoteResolver } from "../core/resolver";
+import { Node } from "../types/node";
+import { MarkdownDefaultOptions } from "../types/options";
+export default class DefaultRenderer {
+    options: MarkdownDefaultOptions;
+    footNoteResolver: FootnoteResolver;
+    constructor(options: MarkdownDefaultOptions, footNoteResolver: FootnoteResolver);
+    /**
+     * Render a Node (AST) to a HTML string according renderer options
+     *
+     * @param node - The abstract syntax tree (AST) from the Parser
+     * @returns The rendered HTML string.
+     */
+    render<K extends Node["type"]>(node: Extract<Node, {
+        type: K;
+    }>): string;
+    /**
+     * Select the appropriate rendering handler for a specific node type
+     * @param type - The type of AST Note
+     * @returns A function take a node and its children to procude a string.
+     */
+    private handleRender;
+    private renderTable;
+    private escapeHtml;
+    private renderFootnotes;
+}

package/dist/renderers/default.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class DefaultRenderer {
+    constructor(options, footNoteResolver) {
+        this.options = options;
+        this.footNoteResolver = footNoteResolver;
+    }
+    /**
+     * Render a Node (AST) to a HTML string according renderer options
+     *
+     * @param node - The abstract syntax tree (AST) from the Parser
+     * @returns The rendered HTML string.
+     */
+    render(node) {
+        //Get proper handler type
+        const handler = this.handleRender(node.type);
+        //If node have children, recursive to handle all node's children
+        const children = "children" in node ? node.children.map((ele) => this.render(ele)) : [];
+        return handler(node, children);
+    }
+    /**
+     * Select the appropriate rendering handler for a specific node type
+     * @param type - The type of AST Note
+     * @returns A function take a node and its children to procude a string.
+     */
+    handleRender(type) {
+        const defaultRender = {
+            //Base structural nodes
+            Document: (_node, children) => children.join("") + this.renderFootnotes(),
+            Paragraph: (_node, children) => `<p>${children.join("")}</p>`,
+            //Container nodes
+            CodeBlock: (node) => `<pre><code class="lang-${node.lang}">${this.escapeHtml(node.content)}</code></pre>`,
+            Header: (node, children) => `<h${node.level}${node.level <= 2 ? ' style="border-bottom: 1px solid #d1d9e0b3"' : ''}>${children.join("")}</h${node.level}>`,
+            Quote: (_node, children) => `<blockquote style="margin:0; padding:0 1em; color:#59636e; border-left:.25em solid #d1d9e0;">${children.join("")}</blockquote>`,
+            //For list nodes
+            List: (node, children) => node.ordered ? `<ol>${children.join("")}</ol>` : `<ul>${children.join("")}</ul>`,
+            ListItem: (_node, children) => `<li>${children.join("")}</li>`,
+            TaskItem: (node, children) => `<li><input type="checkbox" disabled ${node.checked ? "checked" : ""}>${children.join("")}</li>`,
+            //Styling nodes
+            Bold: (_node, children) => `<strong>${children.join("")}</strong>`,
+            Italic: (_node, children) => `<em>${children.join("")}</em>`,
+            Strikethrough: (_node, children) => `<s>${children.join("")}</s>`,
+            InlineCode: (node) => `<code>${this.escapeHtml(node.content)}</code>`,
+            //Media nodes
+            Link: (node) => `<a href="${node.href}">${node.text}</a>`,
+            Image: (node) => `<img src="${node.src}" alt="${node.alt}"/>`,
+            //Leaf nodes
+            HorizontalLine: (_node) => `<hr>`,
+            Text: (node) => node.value,
+            //For table nodes
+            Table: (node, children) => this.renderTable(node, children),
+            //For HTML
+            HTMLBlock: (node) => this.options.converterOptions?.allowDangerousHtml
+                ? node.value
+                : this.escapeHtml(node.value),
+            HTMLInline: (node) => this.options.converterOptions?.allowDangerousHtml
+                ? node.value
+                : this.escapeHtml(node.value),
+            //For footnote
+            FootnoteRef: (node) => {
+                const idx = this.footNoteResolver.getUsedRefById(node.id);
+                return `<sup id="fnref:${idx}"><a href="#fn:${idx}" class="footnote-ref">[${idx}]</a></sup>`;
+            }
+        };
+        return (this.options.renderOptions?.elements?.[type] ?? defaultRender[type]);
+    }
+    renderTable(node, children) {
+        if (node.type === "Table") {
+            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>${tHead}${tBody}</table>`;
+        }
+        else
+            return `<p>${children.join("\n")}</p>`;
+    }
+    escapeHtml(str) {
+        return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+    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 "";
+    }
+}
+exports.default = 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,123 @@
+"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"));
+//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) => react_1.default.createElement("p", null, ...children)
+};
+//Container nodes
+exports.CodeBlockHandler = {
+    type: "CodeBlock",
+    render: (node) => react_1.default.createElement("pre", null, react_1.default.createElement("code", { className: `lang-${node.lang}` }, node.content || ""))
+};
+exports.HeaderHandler = {
+    type: "Header",
+    render: (node, children) => {
+        if (!node.level)
+            return react_1.default.createElement("p", null, ...children);
+        return react_1.default.createElement(`h${node.level}`, { style: { borderBottom: node.level <= 2 ? "1px solid #d1d9e0b3" : undefined } }, ...children);
+    }
+};
+exports.QuoteHandler = {
+    type: "Quote",
+    render: (_node, children) => react_1.default.createElement("blockquote", { style: { margin: "0", padding: "0 1em", color: "#59636e", borderLeft: ".25em solid #d1d9e0" } }, ...children)
+};
+//For list nodes
+exports.ListHandler = {
+    type: "List",
+    render: (node, children) => react_1.default.createElement(node.ordered ? "ol" : "ul", null, ...children)
+};
+exports.ListItemHandler = {
+    type: "ListItem",
+    render: (_node, children) => react_1.default.createElement("li", null, ...children)
+};
+exports.TaskItemHandler = {
+    type: "TaskItem",
+    render: (node, children) => react_1.default.createElement("li", { 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) => react_1.default.createElement("strong", null, ...children)
+};
+exports.ItalicHandler = {
+    type: "Italic",
+    render: (_node, children) => react_1.default.createElement("em", null, ...children)
+};
+exports.StrikethroughHandler = {
+    type: "Strikethrough",
+    render: (_node, children) => react_1.default.createElement("s", null, ...children)
+};
+exports.InlineCodeHandler = {
+    type: "InlineCode",
+    render: (node) => react_1.default.createElement("code", null, node.content || "")
+};
+//Media nodes
+exports.LinkHandler = {
+    type: "Link",
+    render: (node) => react_1.default.createElement("a", { href: node.href, target: "_blank", rel: "noopener" }, node.text)
+};
+exports.ImageHandler = {
+    type: "Image",
+    render: (node) => react_1.default.createElement("img", {
+        src: node.src || "",
+        alt: node.alt || ""
+    })
+};
+//Leaf nodes
+exports.HorizontalLineHandler = {
+    type: "HorizontalLine",
+    render: () => react_1.default.createElement("hr")
+};
+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", { dangerouslySetInnerHTML: { __html: val } })
+            : react_1.default.createElement("code", null, val);
+    }
+};
+exports.HTMLInlineHandler = {
+    type: "HTMLInline",
+    render: (node, _children, ctx) => {
+        const val = node.value || "";
+        return ctx.options.converterOptions?.allowDangerousHtml
+            ? react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: val } })
+            : react_1.default.createElement("code", null, 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", { href: `#fn:${idx}`, className: "footnote-ref" }, `[${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;
+}