simple-customize-markdown-converter 1.0.4 → 1.0.6

package/README.md

@@ -1,4 +1,4 @@
-# Simple Custom Markdown Converter
+# Simple Customize Markdown Converter
 This simple library help you convert Markdown to HTML and customize it.
 
 ## Feature

package/dist/parser.js

@@ -168,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",
@@ -227,12 +224,12 @@ class Parser {
         const parseCell = () => {
             const cellStartToken = this.peek();
             if (cellStartToken?.type !== "CellStart")
-                return { align: "left", chlidren: [] };
+                return { align: "left", children: [] };
             this.next(); // skip CellStart token
             const childrens = this.parseInlineUntil("CellEnd");
             return {
                 align: cellStartToken.align,
-                chlidren: [{ type: "Paragraph", children: childrens }]
+                children: childrens
             };
         };
         const rows = [];

package/dist/renderer.d.ts

@@ -9,7 +9,9 @@ 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,7 @@ 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>`,
@@ -44,7 +44,7 @@ class Renderer {
             //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") {
@@ -54,7 +54,7 @@ class Renderer {
                 const tag = row.isHeader ? "th" : "td";
                 const cells = row.cells.map(cell => {
                     const align = `style="text-align:${cell.align}"`;
-                    return `<${tag} ${align}>${cell.chlidren.map(c => this.render(c)).join("")}</${tag}>`;
+                    return `<${tag} ${align}>${cell.children.map(c => this.render(c)).join("")}</${tag}>`;
                 }).join("");
                 return `<tr>${cells}</tr>`;
             };

package/dist/types/node.d.ts

@@ -86,5 +86,5 @@ export type TableRow = {
 };
 export type TableCell = {
     align: "left" | "center" | "right";
-    chlidren: Node[];
+    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/package.json

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