simple-customize-markdown-converter 1.0.7 → 1.1.0

package/dist/core/parser.js

@@ -0,0 +1,346 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Parser = void 0;
+class Parser {
+    constructor(listToken, footNoteResolver) {
+        this.pos = 0;
+        this.listToken = listToken;
+        this.footNoteResolver = footNoteResolver;
+    }
+    /**
+     * Parse a list token to a node
+     * @return A parsed abstract syntax tree (AST)
+     */
+    parse() {
+        return {
+            type: "Document",
+            children: this.parseBlocks()
+        };
+    }
+    peek(offset = 0) {
+        const i = this.pos + offset;
+        return i < this.listToken.length ? this.listToken[i] : null;
+    }
+    next(amount = 1) {
+        this.pos += amount;
+    }
+    isEnd() {
+        return this.peek()?.type === "EOF";
+    }
+    parseBlocks() {
+        const listNode = [];
+        while (!this.isEnd()) {
+            const currentNode = this.peek();
+            if (!currentNode)
+                break;
+            switch (currentNode.type) {
+                case "Header": {
+                    listNode.push(this.parseHeader());
+                    break;
+                }
+                case "CodeBlock": {
+                    listNode.push(this.parseCodeBlock());
+                    break;
+                }
+                case "Quote": {
+                    listNode.push(this.parseQuote());
+                    break;
+                }
+                case "Image": {
+                    listNode.push(this.parseImage());
+                    break;
+                }
+                case "HorizontalLine": {
+                    listNode.push(this.parseHorizontalLine());
+                    break;
+                }
+                case "ListStart": {
+                    listNode.push(this.parseList());
+                    break;
+                }
+                case "TableStart": {
+                    listNode.push(this.parseTable());
+                    break;
+                }
+                case "HTMLBlock": {
+                    listNode.push(this.parseHtmlBlock());
+                    break;
+                }
+                case "FootnoteDef": {
+                    this.parseFootnoteDef();
+                    this.next();
+                    break;
+                }
+                case "NewLine": {
+                    this.next(); // skip
+                    break;
+                }
+                default: listNode.push(this.parseParagraph());
+            }
+        }
+        return listNode;
+    }
+    parseParagraph() {
+        return {
+            type: "Paragraph",
+            children: this.parseInlineUntil("NewLine")
+        };
+    }
+    parseCodeBlock() {
+        const tok = this.peek();
+        this.next();
+        return {
+            type: "CodeBlock",
+            lang: tok?.type === "CodeBlock" ? tok.lang : "",
+            content: tok?.type === "CodeBlock" ? tok.content : ""
+        };
+    }
+    parseHeader() {
+        const currentNode = this.peek();
+        this.next();
+        return {
+            type: "Header",
+            level: currentNode?.type === "Header" ? currentNode.level : 1,
+            children: this.parseInlineUntil("NewLine") //Temp
+        };
+    }
+    parseBold() {
+        this.next(); // skip marker
+        return { type: "Bold", children: this.parseInlineUntil("Bold") };
+    }
+    parseItalic() {
+        this.next(); // skip marker
+        return { type: "Italic", children: this.parseInlineUntil("Italic") };
+    }
+    parseStrikethrough() {
+        this.next(); // skip marker
+        return { type: "Strikethrough", children: this.parseInlineUntil("Strikethrough") };
+    }
+    parseInlineCode() {
+        const tok = this.peek();
+        this.next();
+        return {
+            type: "InlineCode",
+            content: tok?.type === "InlineCode" ? tok.content : ""
+        };
+    }
+    parseQuote() {
+        this.next(); //skip marker
+        return { type: "Quote", children: [{ type: "Paragraph", children: this.parseInlineUntil("NewLine") }] };
+    }
+    parseList() {
+        const tok = this.peek();
+        if (tok?.type === "ListStart") {
+            this.next(); //skip marker
+            const result = {
+                type: "List",
+                level: tok.level,
+                ordered: tok.ordered,
+                children: [],
+            };
+            let nextToken = this.peek();
+            while (!this.isEnd()) {
+                if (nextToken?.type === "ListItem" || nextToken?.type === "TaskItem") {
+                    result.children.push(this.parseListItem());
+                    nextToken = this.peek();
+                }
+                else if (nextToken?.type === "ListEnd") {
+                    this.next();
+                    break;
+                }
+                else
+                    break;
+            }
+            return result;
+        }
+        //Temp return
+        return {
+            type: "Text",
+            value: ""
+        };
+    }
+    parseListItem() {
+        const currentToken = this.peek();
+        this.next(); // skip marker   
+        const children = [];
+        while (!this.isEnd()) {
+            const tok = this.peek();
+            if (!tok)
+                break;
+            if (tok.type === "NewLine") {
+                this.next();
+                continue;
+            }
+            if (tok.type === "ListStart") {
+                children.push(this.parseList());
+                continue;
+            }
+            if (["ListItem", "TaskItem", "ListEnd"].includes(tok.type)) {
+                break;
+            }
+            children.push(...this.parseInlineUntil("NewLine"));
+        }
+        return currentToken?.type === "TaskItem" ? {
+            type: "TaskItem",
+            checked: currentToken.type === "TaskItem" ? currentToken.checked : false,
+            children: children
+        } : {
+            type: "ListItem",
+            children: children
+        };
+    }
+    parseLink() {
+        const tok = this.peek();
+        this.next();
+        if (tok?.type === "Link") {
+            return {
+                type: "Link",
+                href: tok.href,
+                text: tok.text
+            };
+        }
+        return { type: "Link", href: "", text: "" };
+    }
+    parseImage() {
+        const tok = this.peek();
+        this.next();
+        if (tok?.type === "Image") {
+            return {
+                type: "Image",
+                src: tok.src,
+                alt: tok.alt
+            };
+        }
+        else
+            return { type: "Image", src: "", alt: "" };
+    }
+    parseTable() {
+        this.next(); // skip TableStart token
+        const parseRow = () => {
+            const rowStartToken = this.peek();
+            if (rowStartToken?.type !== "RowStart")
+                return { isHeader: false, cells: [] };
+            this.next(); // skip RowStart token
+            const cells = [];
+            while (this.peek() && this.peek().type !== "RowEnd") {
+                cells.push(parseCell());
+            }
+            this.next(); // skip RowEnd token
+            return {
+                isHeader: rowStartToken.isHeader,
+                cells: cells
+            };
+        };
+        const parseCell = () => {
+            const cellStartToken = this.peek();
+            if (cellStartToken?.type !== "CellStart")
+                return { align: "left", children: [] };
+            this.next(); // skip CellStart token
+            const childrens = this.parseInlineUntil("CellEnd");
+            return {
+                align: cellStartToken.align,
+                children: childrens
+            };
+        };
+        const rows = [];
+        while (this.peek()?.type !== "TableEnd") {
+            rows.push(parseRow());
+            if (this.isEnd())
+                break;
+        }
+        this.next();
+        return {
+            type: "Table",
+            rows: rows
+        };
+    }
+    parseHtmlBlock() {
+        const tok = this.peek();
+        this.next(); // skip marker
+        if (tok?.type === "HTMLBlock") {
+            return { type: "HTMLBlock", value: tok.value };
+        }
+        else
+            return { type: "Text", value: "" };
+    }
+    parseHtmlInline() {
+        const tok = this.peek();
+        this.next(); // skip marker
+        if (tok?.type === "HTMLInline") {
+            return { type: "HTMLInline", value: tok.value };
+        }
+        else
+            return { type: "Text", value: "" };
+    }
+    parseHorizontalLine() {
+        this.next(); // skip marker
+        return { type: "HorizontalLine" };
+    }
+    parseFootnoteDef() {
+        const tok = this.peek();
+        if (tok?.type !== "FootnoteDef")
+            return;
+        this.footNoteResolver.addDef(tok.id, tok.content);
+    }
+    parseFootnoteRef() {
+        const tok = this.peek();
+        this.next();
+        if (tok?.type !== "FootnoteRef")
+            return { type: "Text", value: "" };
+        this.footNoteResolver.addUsedRef(tok.id);
+        return { type: "FootnoteRef", id: tok.id };
+    }
+    parseInlineUntil(stopType, isConsumeStopToken = true) {
+        const stop = Array.isArray(stopType) ? stopType : [stopType];
+        const listNode = [];
+        while (!this.isEnd()) {
+            const currentNode = this.peek();
+            if (!currentNode)
+                break;
+            if (stop.includes(currentNode.type))
+                break;
+            switch (currentNode.type) {
+                case "Bold": {
+                    listNode.push(this.parseBold());
+                    break;
+                }
+                case "Italic": {
+                    listNode.push(this.parseItalic());
+                    break;
+                }
+                case "Strikethrough": {
+                    listNode.push(this.parseStrikethrough());
+                    break;
+                }
+                case "InlineCode": {
+                    listNode.push(this.parseInlineCode());
+                    break;
+                }
+                case "Text": {
+                    listNode.push({ type: "Text", value: currentNode.value });
+                    this.next();
+                    break;
+                }
+                case "Link": {
+                    listNode.push(this.parseLink());
+                    break;
+                }
+                case "HTMLInline": {
+                    listNode.push(this.parseHtmlInline());
+                    break;
+                }
+                case "FootnoteRef": {
+                    listNode.push(this.parseFootnoteRef());
+                    break;
+                }
+                //Special case
+                case "HTMLBlock": return listNode;
+                default: this.next();
+            }
+        }
+        if (isConsumeStopToken)
+            this.next(); //Skip stop token
+        return listNode;
+    }
+}
+exports.Parser = Parser;

package/dist/core/renderer.d.ts

@@ -0,0 +1,3 @@
+/**
+ * @deprecated - Delete this file later
+ */

package/dist/core/renderer.js

@@ -0,0 +1,99 @@
+"use strict";
+/**
+ * @deprecated - Delete this file later
+ */
+// import { FootnoteResolver } from "./resolver"
+// import { Node, TableRow } from "../types/node"
+// import { RenderElements, RenderOption } from "../types/options/renderOptions"
+// export default class Renderer {
+//     option: RenderOption
+//     footNoteResolver: FootnoteResolver
+//     constructor(option: RenderOption, footNoteResolver: FootnoteResolver) {
+//         this.option = option
+//         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<K extends Node["type"]>(node: Extract<Node, { type: K }>): string {
+//         //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)
+//     }
+//     private handleRender<K extends Node["type"]>(type: K): NonNullable<RenderElements[K]> {
+//         const defaultRender: RenderElements = {
+//             //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) => node.value,
+//             HTMLInline: (node) => 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.option.elements?.[type] ?? defaultRender[type])!
+//     }
+//     private renderTable(node: Node, children: string[]) {
+//         if (node.type === "Table") {
+//             const header = node.rows.filter(row => row.isHeader)
+//             const body = node.rows.filter(row => !row.isHeader)
+//             const renderRows = (row: TableRow) => {
+//                 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>`
+//     }
+//     private escapeHtml(str: string) {
+//         return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+//     }
+//     private renderFootnotes(): string {
+//         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 ""
+//     }
+// }

package/dist/core/resolver.d.ts

@@ -0,0 +1,15 @@
+declare abstract class Resolver {
+    abstract isResolverValid(): boolean;
+}
+export declare class FootnoteResolver extends Resolver {
+    private defs;
+    private usedRef;
+    addDef(id: string, content: string): void;
+    addUsedRef(id: string): void;
+    resolve(id: string): string | undefined;
+    getUsedRef(): string[];
+    getUsedRefById(id: string): number;
+    getDef(id: string): string | undefined;
+    isResolverValid(): boolean;
+}
+export {};

package/dist/core/resolver.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FootnoteResolver = void 0;
+class Resolver {
+}
+class FootnoteResolver extends Resolver {
+    constructor() {
+        super(...arguments);
+        this.defs = new Map();
+        this.usedRef = [];
+    }
+    addDef(id, content) {
+        this.defs.set(id, content);
+    }
+    addUsedRef(id) {
+        if (!this.usedRef.includes(id)) {
+            this.usedRef.push(id);
+        }
+    }
+    resolve(id) {
+        return this.defs.get(id);
+    }
+    getUsedRef() {
+        return this.usedRef;
+    }
+    getUsedRefById(id) {
+        return this.usedRef.indexOf(id) + 1;
+    }
+    getDef(id) {
+        return this.defs.get(id);
+    }
+    isResolverValid() {
+        return this.defs.size !== 0 && this.usedRef.length !== 0;
+    }
+}
+exports.FootnoteResolver = FootnoteResolver;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-import { RenderOption } from "./types/renderOptions";
-export { RenderOption };
+import { MarkdownDefaultOptions } from "./types/options";
+import { RenderOption } from "./types/options/renderOptions";
+import { Node } from "./types/node";
+export { RenderOption, MarkdownDefaultOptions, Node };
 /**
  * Convert a Markdown string into HTML.
  * @param input - The Markdown source string
@@ -12,4 +14,4 @@ export { RenderOption };
  * // => <p>Hello <strong>world</strong></p>
  * ```
  */
-export declare function convertMarkdownToHTML(input: string, options?: RenderOption): string;
+export declare function convertMarkdownToHTML(input: string, options?: MarkdownDefaultOptions): string;

package/dist/index.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertMarkdownToHTML = convertMarkdownToHTML;
-const lexer_1 = __importDefault(require("./lexer"));
-const parser_1 = require("./parser");
-const renderer_1 = __importDefault(require("./renderer"));
-const resolver_1 = require("./resolver");
+const lexer_1 = __importDefault(require("./core/lexer"));
+const parser_1 = require("./core/parser");
+const resolver_1 = require("./core/resolver");
+const default_1 = __importDefault(require("./renderers/default"));
 /**
  * Convert a Markdown string into HTML.
  * @param input - The Markdown source string
@@ -20,9 +20,12 @@ const resolver_1 = require("./resolver");
  * // => <p>Hello <strong>world</strong></p>
  * ```
  */
-function convertMarkdownToHTML(input, options = {}) {
+function convertMarkdownToHTML(input, options = {
+    renderOptions: {},
+    converterOptions: { allowDangerousHtml: false }
+}) {
     const tokens = new lexer_1.default(input).tokenize();
     const footNoteResolver = new resolver_1.FootnoteResolver();
     const nodes = new parser_1.Parser(tokens, footNoteResolver).parse();
-    return new renderer_1.default(options, footNoteResolver).render(nodes);
+    return new default_1.default(options, footNoteResolver).render(nodes);
 }

package/dist/react.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { ReactRenderOption } from "./types/options/reactRenderOptions";
+import { MarkdownReactOptions } from "./types/options";
+import { Node } from "./types/node";
+export { MarkdownReactOptions, ReactRenderOption, Node };
+/**
+ * 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>;
+ * ```
+ */
+export declare function convertMarkdownToReactNode(input: string, options?: MarkdownReactOptions): React.ReactNode;
+/**
+ * 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 } }}
+ * />
+ * ```
+ */
+export declare const MarkdownComponent: React.FC<{
+    content: string;
+    options?: MarkdownReactOptions;
+    className?: string;
+}>;

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 resolver_1 = require("./core/resolver");
+const parser_1 = require("./core/parser");
+const react_2 = __importDefault(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 resolver_1.FootnoteResolver();
+    const nodes = new parser_1.Parser(tokens, footNoteResolver).parse();
+    return new react_2.default(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, options]);
+    return react_1.default.createElement("div", { className }, rendered);
+};
+exports.MarkdownComponent = MarkdownComponent;

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;
+}