simple-customize-markdown-converter 1.0.3 → 1.0.5

package/README.md

@@ -1,8 +1,8 @@
-# Simple Custom Markdown Converter
+# Simple Customize Markdown Converter
 This simple library help you convert Markdown to HTML and customize it.
 
 ## Feature
-Currently, this lib only supports:
+This library currently supports the most common Markdown syntaxes:
 - Headings (`#, ##, …`)
 - Paragraphs
 - Bold (`\*\*text\*\*`)
@@ -10,12 +10,13 @@ Currently, this lib only supports:
 - Strikethrough (`\~\~text\~\~`)
 - Inline code (`\`code\``)
 - Code blocks (`\`\`\`lang ... \`\`\``)
-- Quote (`> text`)
-- List (`- Item 1,...`)
-- Tasklist (`- [ ], - \[x\]`)
-- Link (`\[link\]\(url\)`)
-- Image (`\[alt\]\(url\)`)
-- Horizontal line (`---` or `***` or `___`)
+- Quotes (`> text`)
+- Lists (`- Item 1,...`)
+- Tasklists (`- [ ], - \[x\]`)
+- Links (`\[link\]\(url\)`)
+- Images (`\[alt\]\(url\)`)
+- Horizontal lines (`---` or `***` or `___`)
+- Tables
 
 And customizable renderer for all elements
 

package/dist/lexer.d.ts

@@ -5,16 +5,19 @@ export default class Lexer {
     listToken: Token[];
     listLevelFlag: number;
     constructor(input: string);
+    setInput(input: string): void;
     /**
      * Tokenize the markdown into a list of tokens.
+     * @param isEof - `True` when input is whole markdown, `False` if input is just a part of markdown.
      * @returns List of tokens
      */
-    tokenize(): Token[];
+    tokenize(isEof?: boolean): Token[];
     private peek;
     private next;
     private startsWith;
     private isEndOfFile;
     private getLastToken;
+    private handleTable;
     private handleHeader;
     private handleCodeBlock;
     private handleTextBlock;

package/dist/lexer.js

@@ -8,11 +8,19 @@ class Lexer {
         this.listLevelFlag = 0;
         this.input = input;
     }
+    //Reset input and other attribute
+    setInput(input) {
+        this.input = input;
+        this.pos = 0;
+        this.listLevelFlag = 0;
+        this.listToken = [];
+    }
     /**
      * Tokenize the markdown into a list of tokens.
+     * @param isEof - `True` when input is whole markdown, `False` if input is just a part of markdown.
      * @returns List of tokens
      */
-    tokenize() {
+    tokenize(isEof = true) {
         const TOKEN_HANDLER = [
             //Handle escape character first
             {
@@ -53,6 +61,8 @@ class Lexer {
                     }
                 }
             },
+            //For table
+            { match: (lex) => lex.isStartOfLine() && /^\s*\|.*\|\s*$/.test(lex.peekUntil("\n")), emit: (lex) => lex.handleTable() },
             //For common syntax
             { match: (lex) => lex.peek() === "`", emit: (lex) => lex.handleInlineBlock() },
             { match: (lex) => lex.peek() === "#", emit: (lex) => lex.handleHeader() },
@@ -79,7 +89,8 @@ class Lexer {
         while (this.listLevelFlag > 0) {
             this.handleEndList();
         }
-        this.listToken.push({ type: "EOF" });
+        if (isEof)
+            this.listToken.push({ type: "EOF" });
         return this.listToken;
     }
     //Get current character with offset
@@ -101,6 +112,59 @@ class Lexer {
     getLastToken() {
         return this.listToken[this.listToken.length - 1];
     }
+    handleTable() {
+        const tokenizeResult = [];
+        const handler = new Lexer("");
+        const header = this.readUntil("\n", true);
+        const headerDetails = header.trim().replace(/^ *\|/, "").replace(/\| *$/, "").split("|");
+        const align = this.readUntil("\n", true);
+        const alignDetails = align.trim().replace(/^ *\|/, "").replace(/\| *$/, "").split("|");
+        if (alignDetails.length !== headerDetails.length || !alignDetails.every(c => /^:?-{3,}:?$/.test(c))) {
+            this.listToken.push({ type: "Text", value: `${header}\n${align}\n` });
+            return;
+        }
+        else {
+            //Handle alignment
+            const normalizeAlign = alignDetails.map(value => {
+                if (value.startsWith(":") && value.endsWith(":"))
+                    return "center";
+                else if (value.endsWith(":"))
+                    return "right";
+                else
+                    return "left";
+            });
+            tokenizeResult.push({ type: "TableStart" });
+            //Handle header
+            tokenizeResult.push({ type: "RowStart", isHeader: true });
+            headerDetails.forEach((cell, index) => {
+                tokenizeResult.push({ type: "CellStart", align: normalizeAlign[index] ?? "left" });
+                handler.setInput(cell.trim());
+                tokenizeResult.push(...handler.tokenize(false));
+                tokenizeResult.push({ type: "CellEnd" });
+            });
+            tokenizeResult.push({ type: "RowEnd" });
+            //Handle body
+            while (!this.isEndOfFile()) {
+                const body = this.readUntil("\n", true);
+                if (!body)
+                    break;
+                const line = body.trim();
+                if (!line.startsWith("|") || !line.endsWith("|"))
+                    break; //End of table
+                const bodyDetail = body.trim().replace(/^ *\|/, "").replace(/\| *$/, "").split("|");
+                tokenizeResult.push({ type: "RowStart", isHeader: false });
+                bodyDetail.forEach((cell, index) => {
+                    tokenizeResult.push({ type: "CellStart", align: normalizeAlign[index] ?? "left" });
+                    handler.setInput(cell.trim());
+                    tokenizeResult.push(...handler.tokenize(false));
+                    tokenizeResult.push({ type: "CellEnd" });
+                });
+                tokenizeResult.push({ type: "RowEnd" });
+            }
+            tokenizeResult.push({ type: "TableEnd" });
+            this.listToken.push(...tokenizeResult);
+        }
+    }
     handleHeader() {
         let level = 0;
         while (this.peek() === "#") {
@@ -236,12 +300,16 @@ class Lexer {
         this.listToken.push({ type: "HorizontalLine" });
     }
     //Utilities function
-    readUntil(char) {
+    readUntil(char, isConsumeChar = false) {
         let result = "";
         while (this.peek() !== char) {
             result += this.peek();
             this.next();
+            if (this.isEndOfFile())
+                break;
         }
+        if (isConsumeChar)
+            this.next(char.length); //Make cursor skip the char
         return result;
     }
     peekUntil(char) {

package/dist/parser.d.ts

@@ -25,6 +25,7 @@ export declare class Parser {
     private parseListItem;
     private parseLink;
     private parseImage;
+    private parseTable;
     private parseHorizontalLine;
     private parseInlineUntil;
 }

package/dist/parser.js

@@ -57,6 +57,10 @@ class Parser {
                     listNode.push(this.parseList());
                     break;
                 }
+                case "TableStart": {
+                    listNode.push(this.parseTable());
+                    break;
+                }
                 case "NewLine": {
                     this.next(); // skip
                     break;
@@ -164,10 +168,7 @@ class Parser {
             if (["ListItem", "TaskItem", "ListEnd"].includes(tok.type)) {
                 break;
             }
-            children.push({
-                type: "Paragraph",
-                children: this.parseInlineUntil("NewLine")
-            });
+            children.push(...this.parseInlineUntil("NewLine"));
         }
         return currentToken?.type === "TaskItem" ? {
             type: "TaskItem",
@@ -203,6 +204,46 @@ class Parser {
         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
+        };
+    }
     parseHorizontalLine() {
         const tok = this.peek();
         this.next(); // skip marker

package/dist/renderer.d.ts

@@ -9,7 +9,10 @@ export default class Renderer {
      * @param node - The abstract syntax tree (AST) from the Parser
      * @returns The rendered HTML string.
      */
-    render(node: Node): string;
+    render<K extends Node["type"]>(node: Extract<Node, {
+        type: K;
+    }>): string;
     private handleRender;
+    private renderTable;
     private escapeHtml;
 }

package/dist/renderer.js

@@ -25,7 +25,8 @@ class Renderer {
             //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>${children.join("")}</blockquote>`,
+            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>`,
@@ -40,8 +41,29 @@ class Renderer {
             //Leaf nodes
             HorizontalLine: (_node) => `<hr>`,
             Text: (node) => node.value,
+            //For table nodes
+            Table: (node, children) => this.renderTable(node, children),
         };
-        return this.option.elements?.[type] ?? defaultRender[type];
+        return (this.option.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;");

package/dist/types/node.d.ts

@@ -76,4 +76,15 @@ export type Node = {
 } | {
     type: "Text";
     value: string;
+} | {
+    type: "Table";
+    rows: TableRow[];
+};
+export type TableRow = {
+    isHeader: boolean;
+    cells: TableCell[];
+};
+export type TableCell = {
+    align: "left" | "center" | "right";
+    children: Node[];
 };

package/dist/types/renderOptions.d.ts

@@ -1,10 +1,31 @@
 import { Node } from "./node";
 /**
- * Option to customize how AST nodes are renderes into HTML
+ * Function type for rendering an AST node to HTML.
  *
- * @property elements? - A mapping of AST node types to custom render functions.
- * - The key is the `Node` type (e.g. `"Header"`, `"Text"`).
- * - The value is a function `(node, children) => string` that define how to render HTML string. With `node` is a AST `Node`. `children` is the node's childrens
+ * @template T - A subtype of `Node` corresponding to the render node
+ * @param node - The AST node to render
+ * @param children - Rendered HTML strings of the node's children
+ * @returns A HTML string representation of the node
+ */
+type NodeRenderer<T extends Node = Node> = (node: T, children: string[]) => string;
+/**
+ * A mapping of AST node types to custom render functions.
+ *
+ * - The key is a `Node["type"]` string literal (e.g. `"Header"`, `"Paragraph"`)
+ * - The value is a function `(node, children) => string`:
+ *      - `node` is a `Node` with its attribute depending on its `type`.
+ *      (e.g. `"Header"` nodes include `level`, `"CodeBlock"` nodes include `lang` and `content`, etc)
+ *      - `children` is the array of rendered strings of its children.
+ */
+export type RenderElements = {
+    [K in Node["type"]]?: NodeRenderer<Extract<Node, {
+        type: K;
+    }>>;
+};
+/**
+ * Options to customize how AST nodes are renderes into HTML
+ *
+ * @property elements - Optional custom rendered for one or more node types
  *
  * @example
  * ```ts
@@ -16,8 +37,8 @@ import { Node } from "./node";
  * }
  * ```
  *
- * @todo Update`node` type in value function from `any` to `Node`
  */
 export type RenderOption = {
-    elements?: Partial<Record<Node["type"], (node: any, children: string[]) => string>>;
+    elements?: RenderElements;
 };
+export {};

package/dist/types/token.d.ts

@@ -69,4 +69,18 @@ export type Token = {
     value: string;
 } | {
     type: "EOF";
+} | {
+    type: "TableStart";
+} | {
+    type: "TableEnd";
+} | {
+    type: "RowStart";
+    isHeader: boolean;
+} | {
+    type: "RowEnd";
+} | {
+    type: "CellStart";
+    align: "left" | "center" | "right";
+} | {
+    type: "CellEnd";
 };

package/package.json

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