simple-customize-markdown-converter 1.0.6 → 1.0.7

package/dist/index.js

@@ -7,6 +7,7 @@ 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");
 /**
  * Convert a Markdown string into HTML.
  * @param input - The Markdown source string
@@ -21,6 +22,7 @@ const renderer_1 = __importDefault(require("./renderer"));
  */
 function convertMarkdownToHTML(input, options = {}) {
     const tokens = new lexer_1.default(input).tokenize();
-    const nodes = new parser_1.Parser(tokens).parse();
-    return new renderer_1.default(options).render(nodes);
+    const footNoteResolver = new resolver_1.FootnoteResolver();
+    const nodes = new parser_1.Parser(tokens, footNoteResolver).parse();
+    return new renderer_1.default(options, footNoteResolver).render(nodes);
 }

package/dist/lexer.d.ts

@@ -34,7 +34,13 @@ export default class Lexer {
     private handleLink;
     private handleImage;
     private handleHorizontalLine;
+    private handleHtmlBlock;
+    private handleHtmlInline;
+    private handleFootnoteDef;
+    private handleFootnoteRef;
     private readUntil;
     private peekUntil;
+    private peekUntilByOffset;
     private isStartOfLine;
+    private readUntilMatchString;
 }

package/dist/lexer.js

@@ -30,6 +30,24 @@ class Lexer {
                     lex.handleTextBlock();
                 }
             },
+            //For HTML
+            //Comment
+            { match: (lex) => lex.startsWith("<!--"), emit: (lex) => lex.readUntilMatchString("-->", true), },
+            //Normal HTML
+            {
+                match: (lex) => lex.peek() === "<",
+                emit: (lex) => {
+                    //Handle comment
+                    const line = lex.peekUntil(">");
+                    const blockRegex = /^<(h[1-6]|div|table|pre|blockquote|ul|ol|li|p|section|article|header|footer|nav|aside|hr|form|iframe)\b/i;
+                    if (blockRegex.test(line)) {
+                        lex.handleHtmlBlock();
+                    }
+                    else {
+                        lex.handleHtmlInline();
+                    }
+                }
+            },
             {
                 //Regex: if line started with at least 3 characters: -, *, _
                 match: (lex) => /^([-*_])\1{2,}$/.test(lex.peekUntil("\n").trim()) && this.getLastToken()?.type === "NewLine",
@@ -38,6 +56,10 @@ class Lexer {
             { match: (lex) => lex.startsWith("```"), emit: (lex) => lex.handleCodeBlock() },
             { match: (lex) => lex.startsWith("**"), emit: (lex) => lex.handleBold() },
             { match: (lex) => lex.startsWith("~~"), emit: (lex) => lex.handleStrikethrough() },
+            // Footnote Definition
+            { match: (lex) => lex.isStartOfLine() && /^\[\^[^\]]+\]:/.test(lex.peekUntil("\n")), emit: (lex) => lex.handleFootnoteDef() },
+            // Footnote Reference
+            { match: (lex) => lex.startsWith("[^"), emit: (lex) => lex.handleFootnoteRef() },
             //For List
             {
                 match: (lex) => lex.isStartOfLine() && /^(\s*)([-*+]) \[( |x|X)\] /.test(lex.peekUntil("\n")),
@@ -299,7 +321,60 @@ class Lexer {
         this.next(2); //Skip two first characters, remain will be skiped after loop
         this.listToken.push({ type: "HorizontalLine" });
     }
-    //Utilities function
+    handleHtmlBlock() {
+        const openTag = this.readUntil(">", true) + ">";
+        const matchTagName = /^<\s*([a-zA-Z0-9]+)/.exec(openTag);
+        const tagName = matchTagName ? matchTagName[1] : null;
+        //Tagname is not valid
+        if (!tagName) {
+            this.listToken.push({ type: "Text", value: "<" });
+            return;
+        }
+        //If it's self-closing tag
+        if (openTag.endsWith("/>") || ["hr", "img", "br", "input", "meta", "link"].includes(tagName)) {
+            this.listToken.push({ type: "HTMLBlock", value: openTag });
+            return;
+        }
+        let content = "";
+        while (!this.isEndOfFile()) {
+            if (this.peekUntilByOffset(`</${tagName}>`.length).toLowerCase() === `</${tagName}>`) {
+                break;
+            }
+            content += this.peek();
+            this.next();
+        }
+        const closeTag = `</${tagName}>`;
+        this.next(closeTag.length - 1); //Skip closing tag
+        this.listToken.push({ type: "HTMLBlock", value: openTag + content + closeTag });
+    }
+    handleHtmlInline() {
+        const openTag = this.readUntil(">", true) + ">";
+        const matchTagName = /^<\s*([a-zA-Z0-9]+)/.exec(openTag);
+        const tagName = matchTagName ? matchTagName[1] : null;
+        if (!tagName) {
+            this.listToken.push({ type: "Text", value: "<" });
+            return;
+        }
+        const content = this.readUntilMatchString(`</${tagName}>`);
+        const closeTag = `</${tagName}>`;
+        this.next(closeTag.length - 1); //Skip closing tag
+        this.listToken.push({ type: "HTMLInline", value: openTag + content + closeTag });
+    }
+    handleFootnoteDef() {
+        const line = this.readUntil("\n");
+        const match = line.match(/^\[\^([^\]]+)\]:\s*(.*)$/);
+        if (match) {
+            const id = match[1];
+            const content = match[2];
+            this.listToken.push({ type: "FootnoteDef", id, content });
+        }
+    }
+    handleFootnoteRef() {
+        this.next(2); //Skip [^
+        const id = this.readUntil("]");
+        this.listToken.push({ type: "FootnoteRef", id });
+    }
+    //Utilities function    
     readUntil(char, isConsumeChar = false) {
         let result = "";
         while (this.peek() !== char) {
@@ -325,8 +400,34 @@ class Lexer {
         }
         return result;
     }
+    peekUntilByOffset(offset) {
+        let result = "";
+        let i = 0;
+        while (i !== offset) {
+            const current = this.peek(i++);
+            if (current == null)
+                break;
+            if (this.isEndOfFile())
+                break;
+            result += current;
+        }
+        return result;
+    }
     isStartOfLine() {
         return this.pos === 0 || this.peek(-1) === "\n";
     }
+    readUntilMatchString(str, isConsume = false) {
+        let result = "";
+        while (!this.isEndOfFile()) {
+            if (this.peekUntilByOffset(str.length) === str) {
+                if (isConsume)
+                    this.next(str.length);
+                break;
+            }
+            result += this.peek();
+            this.next();
+        }
+        return result;
+    }
 }
 exports.default = Lexer;

package/dist/parser.d.ts

@@ -1,9 +1,11 @@
+import { FootnoteResolver } from "./resolver";
 import { Node } from "./types/node";
 import { Token } from "./types/token";
 export declare class Parser {
     listToken: Token[];
     pos: number;
-    constructor(listToken: Token[]);
+    footNoteResolver: FootnoteResolver;
+    constructor(listToken: Token[], footNoteResolver: FootnoteResolver);
     /**
      * Parse a list token to a node
      * @return A parsed abstract syntax tree (AST)
@@ -26,6 +28,10 @@ export declare class Parser {
     private parseLink;
     private parseImage;
     private parseTable;
+    private parseHtmlBlock;
+    private parseHtmlInline;
     private parseHorizontalLine;
+    private parseFootnoteDef;
+    private parseFootnoteRef;
     private parseInlineUntil;
 }

package/dist/parser.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Parser = void 0;
 class Parser {
-    constructor(listToken) {
+    constructor(listToken, footNoteResolver) {
         this.pos = 0;
         this.listToken = listToken;
+        this.footNoteResolver = footNoteResolver;
     }
     /**
      * Parse a list token to a node
@@ -61,6 +62,15 @@ class Parser {
                     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;
@@ -244,12 +254,43 @@ class Parser {
             rows: rows
         };
     }
-    parseHorizontalLine() {
+    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" };
     }
-    parseInlineUntil(stopType) {
+    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()) {
@@ -284,10 +325,21 @@ class Parser {
                     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();
             }
         }
-        this.next(); //Skip stop token
+        if (isConsumeStopToken)
+            this.next(); //Skip stop token
         return listNode;
     }
 }

package/dist/renderer.d.ts

@@ -1,8 +1,10 @@
+import { FootnoteResolver } from "./resolver";
 import { Node } from "./types/node";
 import { RenderOption } from "./types/renderOptions";
 export default class Renderer {
     option: RenderOption;
-    constructor(option: RenderOption);
+    footNoteResolver: FootnoteResolver;
+    constructor(option: RenderOption, footNoteResolver: FootnoteResolver);
     /**
      * Render a Node (AST) to a HTML string according renderer options
      *
@@ -15,4 +17,5 @@ export default class Renderer {
     private handleRender;
     private renderTable;
     private escapeHtml;
+    private renderFootnotes;
 }

package/dist/renderer.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 class Renderer {
-    constructor(option) {
+    constructor(option, footNoteResolver) {
         this.option = option;
+        this.footNoteResolver = footNoteResolver;
     }
     /**
      * Render a Node (AST) to a HTML string according renderer options
@@ -20,7 +21,7 @@ class Renderer {
     handleRender(type) {
         const defaultRender = {
             //Base structural nodes
-            Document: (_node, children) => children.join(""),
+            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>`,
@@ -43,6 +44,14 @@ class Renderer {
             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]);
     }
@@ -68,5 +77,20 @@ class Renderer {
     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 = Renderer;

package/dist/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/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/types/node.d.ts

@@ -21,6 +21,10 @@
  * - Image: An image, with it's `src` and `alt`
  * - HorizontalLine: A horizontal line
  * - Text: Raw text content.
+ * - Table: A table, with it's rows
+ * - HTMLBlock: A HTML block element, with it's `value`
+ * - HTMLInline: An inline HTML element, with it's `value`
+ * - FootnoteRef: A refernce with it's `id`
  */
 export type Node = {
     type: "Document";
@@ -79,11 +83,30 @@ export type Node = {
 } | {
     type: "Table";
     rows: TableRow[];
+} | {
+    type: "HTMLBlock";
+    value: string;
+} | {
+    type: "HTMLInline";
+    value: string;
+} | {
+    type: "FootnoteRef";
+    id: string;
 };
+/**
+ * A subtype represent a row of table
+ * @property isHeader - If this row is header
+ * @property cells: List cells of this row
+ */
 export type TableRow = {
     isHeader: boolean;
     cells: TableCell[];
 };
+/**
+ * A subtype represent a table cell
+ * @property align - Cell's align
+ * @property children - Cell's children nodes
+ */
 export type TableCell = {
     align: "left" | "center" | "right";
     children: Node[];

package/dist/types/token.d.ts

@@ -21,6 +21,16 @@
  * - Image: An image (`![alt](url)`)
  * - HorizontalLine: A horizontal line (`---` or `___` or `***`)
  * - Text: Plain text content.
+ * - TableStart: Start of a table
+ * - TableEnd: End of a table
+ * - RowStart: Start of a table row
+ * - RowEnd: End of a table row
+ * - CellStart: Start of a table cell, with it's align accroding to it's row
+ * - CellEnd: End of a table cell
+ * - HTMLBlock: A HTML block element
+ * - HTMLInline: An inline HTML element
+ * - FootnodeDef: Definition of a footnote
+ * - FootnodeRef: The reference of a footnote
  * - EOF: A special token, this is the end of input.
  */
 export type Token = {
@@ -67,8 +77,6 @@ export type Token = {
 } | {
     type: "Text";
     value: string;
-} | {
-    type: "EOF";
 } | {
     type: "TableStart";
 } | {
@@ -83,4 +91,19 @@ export type Token = {
     align: "left" | "center" | "right";
 } | {
     type: "CellEnd";
+} | {
+    type: "HTMLBlock";
+    value: string;
+} | {
+    type: "HTMLInline";
+    value: string;
+} | {
+    type: "FootnoteDef";
+    id: string;
+    content: string;
+} | {
+    type: "FootnoteRef";
+    id: string;
+} | {
+    type: "EOF";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-customize-markdown-converter",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Convert Markdown to your customize HTML",
   "keywords": [
     "markdown",