simple-customize-markdown-converter 1.0.7 → 1.2.0

package/dist/types/token.d.ts

@@ -1,3 +1,4 @@
+import { ILexer } from "../core/lexer";
 /**
  * Token produced by the Markdown lexer.
  *
@@ -33,77 +34,96 @@
  * - FootnodeRef: The reference of a footnote
  * - EOF: A special token, this is the end of input.
  */
-export type Token = {
-    type: "Header";
-    level: number;
-} | {
-    type: "CodeBlock";
-    lang: string;
-    content: string;
-} | {
-    type: "NewLine";
-} | {
-    type: "Bold";
-} | {
-    type: "Italic";
-} | {
-    type: "Strikethrough";
-} | {
-    type: "InlineCode";
-    content: string;
-} | {
-    type: "Quote";
-} | {
-    type: "ListStart";
-    ordered: boolean;
-    level: number;
-} | {
-    type: "ListItem";
-} | {
-    type: "TaskItem";
-    checked: boolean;
-} | {
-    type: "ListEnd";
-} | {
-    type: "Link";
-    text: string;
-    href: string;
-} | {
-    type: "Image";
-    src: string;
-    alt: string;
-} | {
-    type: "HorizontalLine";
-} | {
-    type: "Text";
-    value: string;
-} | {
-    type: "TableStart";
-} | {
-    type: "TableEnd";
-} | {
-    type: "RowStart";
-    isHeader: boolean;
-} | {
-    type: "RowEnd";
-} | {
-    type: "CellStart";
-    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";
-};
+export type DefaultTokenType = "Header" | "CodeBlock" | "NewLine" | "Bold" | "Italic" | "Strikethrough" | "InlineCode" | "Quote" | "ListStart" | "ListItem" | "TaskItem" | "ListEnd" | "Link" | "Image" | "HorizontalLine" | "Text" | "TableStart" | "TableEnd" | "RowStart" | "RowEnd" | "CellStart" | "CellEnd" | "HTMLBlock" | "HTMLInline" | "FootnoteDef" | "FootnoteRef" | "EOF";
+export type TokenType = DefaultTokenType | (string & {});
+/**
+ * Token produced by the Markdown lexer.
+ *
+ * Tokens are the intermediate representation between raw text and the AST.
+ */
+export interface Token {
+    /**
+     * The category of the token.
+     * @see {@link DefaultTokenType} for the list of built-in types.
+     */
+    type: TokenType;
+    /**
+     * Raw text or value associated with the token.
+     * Commonly used in: `Text`, `HTMLBlock`, `HTMLInline`.
+     */
+    value?: string;
+    /**
+     * The nesting level or importance.
+     * Commonly used in: `Header` (level 1-6).
+     */
+    level?: number;
+    /**
+     * Language identifier for code fences.
+     * Commonly used in: `CodeBlock`.
+     */
+    lang?: string;
+    /**
+     * The main body of text within a token.
+     * Commonly used in: `CodeBlock`, `InlineCode`.
+     */
+    content?: string;
+    /**
+     * Destination URL for links or images.
+     * Commonly used in: `Link`, `Image`.
+     */
+    href?: string;
+    /**
+     * Display text for links.
+     * Commonly used in: `Link`.
+     */
+    text?: string;
+    /**
+     * Source path/URL for images.
+     * Commonly used in: `Image`.
+     */
+    src?: string;
+    /**
+     * Accessible alternative text.
+     * Commonly used in: `Image`.
+     */
+    alt?: string;
+    /**
+     * Alignment for table cells.
+     * Commonly used in: `CellStart` ("left", "center", "right").
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * For task lists, indicates completion.
+     * Commonly used in: `TaskItem` (true if `[x]`).
+     */
+    checked?: boolean;
+    /**
+     * Unique identifier for footnotes.
+     * Commonly used in: `FootnoteDef`, `FootnoteRef`.
+     */
+    id?: string;
+    /**
+     * All other properties used by custom `Token`.
+     */
+    [key: string]: any;
+}
+/**
+ * A Strategy pattern for handle tokenizing input.
+ * @property type - Strategy's type.
+ * @property match - A function check current cursor position matched the syntax to be processed by `emit` function.
+ * @property emit - A function handle tokenizing input to `Token`.
+ */
+export interface TokenizerStrategy {
+    name: string;
+    /**
+     * Checks if the current cursor position in the Lexer matches this syntax
+     * @param lex The current `ILexer` instance providing access to the input string and cursor.
+     * @returns True if this strategy should handle the current input.
+     */
+    match: (lex: ILexer) => boolean;
+    /**
+     * Consumes the input and produce Tokens added in ILexer implementation class.
+     * @param lex The `ILexer` instance to advance the cursor and store results.
+     */
+    emit: (lex: ILexer) => void;
+}

package/dist/utilities/parser-utils.d.ts

@@ -0,0 +1,5 @@
+import { IParser } from "../core/parser";
+import { ASTNode } from "../types/parser";
+declare function parseList(parser: IParser): ASTNode;
+declare function parseListItem(parser: IParser): ASTNode;
+export { parseList, parseListItem };

package/dist/utilities/parser-utils.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseList = parseList;
+exports.parseListItem = parseListItem;
+function parseList(parser) {
+    const tok = parser.peek(0);
+    if (tok?.type === "ListStart") {
+        parser.next(1); //skip marker
+        const result = {
+            type: "List",
+            level: tok.level,
+            ordered: tok.ordered,
+            children: [],
+        };
+        let nextToken = parser.peek(0);
+        while (!parser.isEnd()) {
+            if (nextToken?.type === "ListItem" || nextToken?.type === "TaskItem") {
+                result.children?.push(parseListItem(parser));
+                nextToken = parser.peek(0);
+            }
+            else if (nextToken?.type === "ListEnd") {
+                parser.next(1);
+                break;
+            }
+            else
+                break;
+        }
+        return result;
+    }
+    //Temp return
+    return {
+        type: "Text",
+        value: ""
+    };
+}
+function parseListItem(parser) {
+    const currentToken = parser.peek(0);
+    parser.next(1); // skip marker   
+    const children = [];
+    while (!parser.isEnd()) {
+        const tok = parser.peek(0);
+        if (!tok)
+            break;
+        if (tok.type === "NewLine") {
+            parser.next(1);
+            break;
+        }
+        if (tok.type === "ListStart") {
+            children.push(parseList(parser));
+            continue;
+        }
+        if (["ListItem", "TaskItem", "ListEnd"].includes(tok.type)) {
+            break;
+        }
+        children.push(...parser.parseInlineUntil("NewLine", true));
+    }
+    return currentToken?.type === "TaskItem" ? {
+        type: "TaskItem",
+        checked: currentToken.type === "TaskItem" ? currentToken.checked : false,
+        children: children
+    } : {
+        type: "ListItem",
+        children: children
+    };
+}

package/dist/utilities/tokenizer-utils.d.ts

@@ -0,0 +1,11 @@
+import { ILexer } from "../core/lexer";
+declare function handleTextBlock(lex: ILexer): void;
+declare function handleHtmlBlock(lex: ILexer): void;
+declare function handleHtmlInline(lex: ILexer): void;
+declare function handleList(lex: ILexer, isOrdered: boolean, isTask: boolean): void;
+declare function handleStartList(lex: ILexer, isOrder: boolean): void;
+declare function handleListItem(lex: ILexer): void;
+declare function handleTaskItem(lex: ILexer, isChecked: boolean): void;
+declare function handleEndList(lex: ILexer): void;
+declare function handleTable(lex: ILexer): void;
+export { handleEndList, handleHtmlBlock, handleHtmlInline, handleList, handleListItem, handleStartList, handleTable, handleTaskItem, handleTextBlock, };

package/dist/utilities/tokenizer-utils.js

@@ -0,0 +1,159 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleEndList = handleEndList;
+exports.handleHtmlBlock = handleHtmlBlock;
+exports.handleHtmlInline = handleHtmlInline;
+exports.handleList = handleList;
+exports.handleListItem = handleListItem;
+exports.handleStartList = handleStartList;
+exports.handleTable = handleTable;
+exports.handleTaskItem = handleTaskItem;
+exports.handleTextBlock = handleTextBlock;
+const lexer_1 = __importDefault(require("../core/lexer"));
+function handleTextBlock(lex) {
+    const currentChar = lex.peek();
+    if (currentChar === null)
+        return;
+    const lastToken = lex.getLastToken();
+    if (lastToken?.type === "Text")
+        lastToken.value += currentChar;
+    else
+        lex.listToken.push({ type: "Text", value: currentChar });
+}
+function handleHtmlBlock(lex) {
+    const openTag = lex.readUntil(">", true) + ">";
+    const matchTagName = /^<\s*([a-zA-Z0-9]+)/.exec(openTag);
+    const tagName = matchTagName ? matchTagName[1] : null;
+    //Tagname is not valid
+    if (!tagName) {
+        lex.listToken.push({ type: "Text", value: "<" });
+        return;
+    }
+    //If it's self-closing tag
+    if (openTag.endsWith("/>") || ["hr", "img", "br", "input", "meta", "link"].includes(tagName)) {
+        lex.listToken.push({ type: "HTMLBlock", value: openTag });
+        return;
+    }
+    let content = "";
+    while (!lex.isEndOfFile()) {
+        if (lex.peekUntilByOffset(`</${tagName}>`.length).toLowerCase() === `</${tagName}>`) {
+            break;
+        }
+        content += lex.peek();
+        lex.next();
+    }
+    const closeTag = `</${tagName}>`;
+    lex.next(closeTag.length - 1); //Skip closing tag
+    lex.listToken.push({ type: "HTMLBlock", value: openTag + content + closeTag });
+}
+function handleHtmlInline(lex) {
+    const openTag = lex.readUntil(">", true) + ">";
+    const matchTagName = /^<\s*([a-zA-Z0-9]+)/.exec(openTag);
+    const tagName = matchTagName ? matchTagName[1] : null;
+    if (!tagName) {
+        lex.listToken.push({ type: "Text", value: "<" });
+        return;
+    }
+    const content = lex.readUntilMatchString(`</${tagName}>`, false);
+    const closeTag = `</${tagName}>`;
+    lex.next(closeTag.length - 1); //Skip closing tag
+    lex.listToken.push({ type: "HTMLInline", value: openTag + content + closeTag });
+}
+//Task and List utilities
+function handleList(lex, isOrdered, isTask) {
+    const line = lex.peekUntil("\n");
+    if (isTask) {
+        const m = line.match(/^(\s*)([-*+]) \[( |x|X)\] (.*)$/);
+        const indent = Math.floor(m[1].length / 2) + 1;
+        while (lex.listLevelFlag < indent)
+            handleStartList(lex, false);
+        while (lex.listLevelFlag > indent)
+            handleEndList(lex);
+        lex.next(m[1].length + 4);
+        handleTaskItem(lex, m[3].toLowerCase() === "x");
+    }
+    else {
+        //Regex: line started with: Group 1: zero or more spaces, group 2: (- or + or * + 1 space) or (number with . character), group 3: everything else in line
+        const m = isOrdered ? line.match(/^(\s*)(\d+)\. (.*)$/) : line.match(/^(\s*)([-*+]) (.*)$/);
+        const indent = Math.floor(m[1].length / 2) + 1; //m[1] to get the spaces in group 1
+        while (lex.listLevelFlag < indent)
+            handleStartList(lex, isOrdered);
+        while (lex.listLevelFlag > indent)
+            handleEndList(lex);
+        lex.next(m[1].length + (isOrdered ? 1 : 0)); //+1 due to marker have 2 characters (e.g: 1.) instead 1 like unordered list
+        handleListItem(lex);
+    }
+}
+function handleStartList(lex, isOrder) {
+    lex.listLevelFlag++;
+    lex.listToken.push({ type: "ListStart", level: lex.listLevelFlag, ordered: isOrder });
+}
+function handleListItem(lex) {
+    lex.next(); // Skip space between - and text
+    lex.listToken.push({ type: "ListItem" });
+}
+function handleTaskItem(lex, isChecked) {
+    lex.next(); // Skip space between last ] and text
+    lex.listToken.push({ type: "TaskItem", checked: isChecked });
+}
+function handleEndList(lex) {
+    lex.listLevelFlag === 0 ? 0 : lex.listLevelFlag--;
+    lex.listToken.push({ type: "ListEnd" });
+}
+//Table utilities
+function handleTable(lex) {
+    const tokenizeResult = [];
+    const handler = new lexer_1.default("");
+    const header = lex.readUntil("\n", true);
+    const headerDetails = header.trim().replace(/^ *\|/, "").replace(/\| *$/, "").split("|");
+    const align = lex.readUntil("\n", true);
+    const alignDetails = align.trim().replace(/^ *\|/, "").replace(/\| *$/, "").split("|");
+    if (alignDetails.length !== headerDetails.length || !alignDetails.every(c => /^:?-{3,}:?$/.test(c))) {
+        lex.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 (!lex.isEndOfFile()) {
+            const body = lex.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" });
+        lex.listToken.push(...tokenizeResult);
+    }
+}

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "simple-customize-markdown-converter",
-  "version": "1.0.7",
-  "description": "Convert Markdown to your customize HTML",
+  "version": "1.2.0",
+  "description": "Transform Markdown into fully customizable HTML or React components.",
   "keywords": [
     "markdown",
     "html",
-    "converter"
+    "converter",
+    "react-markdown",
+    "typescript"
   ],
   "author": "Regiko04",
   "license": "MIT",
@@ -17,15 +19,34 @@
     "LICENSE",
     "README.md"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    }
+  },
   "scripts": {
     "test": "jest",
     "build": "tsc",
     "start": "ts-node src/index.ts"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.2.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.2.0"
+  },
   "devDependencies": {
     "@types/jest": "^30.0.0",
     "@types/node": "^24.3.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "jest": "^30.1.3",
+    "jest-environment-jsdom": "^30.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "ts-jest": "^29.4.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2"