simple-customize-markdown-converter 1.0.0 → 1.0.2

package/README.md

@@ -14,7 +14,7 @@ And customizable renderer for all elements
 
 ## Install
 ```bash
-npm install simple-custom-markdown-converter
+npm install simple-customize-markdown-converter
 ```
 
 ## Usage

package/dist/lexer.d.ts

@@ -20,4 +20,8 @@ export default class Lexer {
     private handleItalic;
     private handleBold;
     private handleInlineBlock;
+    private handleQuoteBlock;
+    private handleLink;
+    private handleImage;
+    private readUntil;
 }

package/dist/lexer.js

@@ -17,6 +17,9 @@ class Lexer {
             { match: (lex) => lex.peek() === "`", emit: (lex) => lex.handleInlineBlock() },
             { match: (lex) => lex.peek() === "#", emit: (lex) => lex.handleHeader() },
             { match: (lex) => lex.peek() === "*" || lex.peek() === "_", emit: (lex) => lex.handleItalic() },
+            { match: (lex) => lex.peek() === ">", emit: (lex) => lex.handleQuoteBlock() },
+            { match: (lex) => lex.peek() === "[", emit: (lex) => lex.handleLink() },
+            { match: (lex) => lex.peek() === "!" && lex.peek(1) === "[", emit: (lex) => lex.handleImage() },
             { match: (lex) => lex.peek() === "\n", emit: (lex) => lex.listToken.push({ type: "NewLine" }) },
         ];
         while (!this.isEndOfFile()) {
@@ -56,18 +59,16 @@ class Lexer {
         return this.listToken[this.listToken.length - 1];
     }
     handleHeader() {
-        const lastToken = this.getLastToken();
-        if (!lastToken || lastToken.type === "NewLine") {
-            this.listToken.push({ type: "Header", level: 1 });
-        }
-        else if (lastToken.type === "Header") {
-            lastToken.level++;
+        let level = 0;
+        while (this.peek() === "#") {
+            level++;
+            this.next();
         }
-        this.next();
         if (this.peek() === " ") {
             this.next();
             this.pos--;
         }
+        this.listToken.push({ type: "Header", level });
     }
     handleCodeBlock() {
         let lang = "";
@@ -83,7 +84,7 @@ class Lexer {
             this.next();
         }
         this.next(2); //Skip close block (due to next() after each tokenize iteration)
-        this.listToken.push({ "type": "CodeBlock", lang: lang.trim(), content: content });
+        this.listToken.push({ "type": "CodeBlock", lang: lang.trim(), content: content.trimEnd() });
     }
     handleTextBlock() {
         const currentChar = this.peek();
@@ -112,5 +113,45 @@ class Lexer {
         // this.next() //Skip close block
         this.listToken.push({ "type": "InlineCode", content: content });
     }
+    handleQuoteBlock() {
+        this.listToken.push({ type: "Quote" });
+    }
+    handleLink() {
+        this.next(); //Skip [
+        const text = this.readUntil("]");
+        this.next(); //Skip ]
+        if (this.peek() === "(") {
+            this.next(); //Skip (
+            const url = this.readUntil(")");
+            //Don't skip ) due to auto skip on while loop
+            this.listToken.push({ type: "Link", text: text, href: url });
+        }
+        else
+            this.listToken.push({ type: "Text", value: `[${text}]` });
+    }
+    handleImage() {
+        this.next(); //Skip !
+        if (this.peek() !== "[")
+            return;
+        this.next(); //Skip [
+        const alt = this.readUntil("]");
+        this.next(); //Skip ]
+        if (this.peek() === "(") {
+            this.next(); //Skip (
+            const src = this.readUntil(")");
+            this.next(); //Skip )
+            this.listToken.push({ type: "Image", alt: alt, src: src });
+        }
+        else
+            this.listToken.push({ type: "Text", value: `![${alt}]` });
+    }
+    readUntil(char) {
+        let result = "";
+        while (this.peek() !== char) {
+            result += this.peek();
+            this.next();
+        }
+        return result;
+    }
 }
 exports.default = Lexer;

package/dist/parser.d.ts

@@ -19,5 +19,8 @@ export declare class Parser {
     private parseBold;
     private parseItalic;
     private parseInlineCode;
+    private parseQuote;
+    private parseLink;
+    private parseImage;
     private parseInlineUntil;
 }

package/dist/parser.js

@@ -37,12 +37,18 @@ class Parser {
                     listNode.push(this.parseHeader());
                     break;
                 }
-                case "CodeBlock":
-                    {
-                        listNode.push(this.parseCodeBlock());
-                        this.next();
-                    }
+                case "CodeBlock": {
+                    listNode.push(this.parseCodeBlock());
                     break;
+                }
+                case "Quote": {
+                    listNode.push(this.parseQuote());
+                    break;
+                }
+                case "Image": {
+                    listNode.push(this.parseImage());
+                    break;
+                }
                 case "NewLine": {
                     this.next(); // skip
                     break;
@@ -60,6 +66,7 @@ class Parser {
     }
     parseCodeBlock() {
         const tok = this.peek();
+        this.next();
         return {
             type: "CodeBlock",
             lang: tok?.type === "CodeBlock" ? tok.lang : "",
@@ -91,6 +98,35 @@ class Parser {
             content: tok?.type === "InlineCode" ? tok.content : ""
         };
     }
+    parseQuote() {
+        this.next(); //skip marker
+        return { type: "Quote", children: [{ type: "Paragraph", children: this.parseInlineUntil("NewLine") }] };
+    }
+    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: "" };
+    }
     parseInlineUntil(stopType) {
         const listNode = [];
         while (!this.isEnd() && this.peek()?.type !== stopType) {
@@ -112,6 +148,12 @@ class Parser {
                 }
                 case "Text": {
                     listNode.push({ type: "Text", value: currentNode.value });
+                    this.next();
+                    break;
+                }
+                case "Link": {
+                    listNode.push(this.parseLink());
+                    break;
                 }
                 default: this.next();
             }

package/dist/renderer.js

@@ -26,7 +26,10 @@ class Renderer {
             CodeBlock: (node) => `<pre><code class="lang-${node.lang}">${this.escapeHtml(node.content)}</code></pre>`,
             Bold: (_node, children) => `<strong>${children.join("")}</strong>`,
             Italic: (_node, children) => `<em>${children.join("")}</em>`,
-            Text: (node) => node.value
+            Quote: (_node, children) => `<blockquote>${children.join("")}</blockquote>`,
+            Link: (node) => `<a href="${node.href}">${node.text}</a>`,
+            Image: (node) => `<img src="${node.src}" alt="${node.alt}"/>`,
+            Text: (node) => node.value,
         };
         return this.option.elements?.[type] ?? defaultRender[type];
     }

package/dist/types/node.d.ts

@@ -10,8 +10,11 @@
  * - Header: A header with given `level` (1-6)
  * - Bold: Bold text
  * - Italic: Italic text
- * - InlineCode: Inline code snippet, with `content`
- * - CodeBlock: A code block, with `lang` and `content`
+ * - InlineCode: Inline code snippet, with it's `content`
+ * - Quote: A quote block
+ * - CodeBlock: A code block, with it's `lang` and `content`
+ * - Link: A link, with it's `text` and `href`
+ * - Image: An image, with it's `src` and `alt`
  * - Text: Raw text content.
  */
 export type Node = {
@@ -37,6 +40,17 @@ export type Node = {
     type: "CodeBlock";
     lang: string;
     content: string;
+} | {
+    type: "Quote";
+    children: Node[];
+} | {
+    type: "Link";
+    href: string;
+    text: string;
+} | {
+    type: "Image";
+    src: string;
+    alt: string;
 } | {
     type: "Text";
     value: string;

package/dist/types/token.d.ts

@@ -12,6 +12,9 @@
  * - Bold: Bold marker (`**`).
  * - Italic: Italic marker (`*` or `_`).
  * - InlineCode: Inline code snippet (`` ` ``), with its `content`.
+ * - Quote: A quote block (`>`).
+ * - Link: A link (`[text](url)`)
+ * - Image: An image (`![alt](url)`)
  * - EOF: A special token, this is the end of input.
  */
 export type Token = {
@@ -33,6 +36,16 @@ export type Token = {
 } | {
     type: "InlineCode";
     content: string;
+} | {
+    type: "Quote";
+} | {
+    type: "Link";
+    text: string;
+    href: string;
+} | {
+    type: "Image";
+    src: string;
+    alt: string;
 } | {
     type: "EOF";
 };

package/package.json

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