simple-customize-markdown-converter 1.2.1 → 1.3.0

package/README.md

@@ -173,6 +173,85 @@ function App() {
 }
 
 ```
+
+## Plugin (v1.3.0+)
+You can create a plugin to define custom sytax rule handler
+- With default converter
+```ts
+import { DefaultMarkdownConverter } from 'simple-customize-markdown-converter';
+
+const emojiPlugin = createPlugin<string, React.ReactNode>(
+  "Emoji",
+  "inline",
+  {
+      match: (lexer) => lexer.peek() === ":",
+      emit: (lexer) => {
+        lexer.next();
+        const value = lexer.readUntil(":");
+        lexer.listToken.push({ type: "Emoji", value });
+      }
+  },
+  {
+    execute: (parser, token) => {
+      parser.next(1);
+      return { type: "Emoji", value: token.value };
+    }
+  },
+  {
+    render: (node) => React.createElement(
+      "span",
+      { className: `emoji emoji-${node.value}` },
+      "😲"
+    )
+  }
+);
+
+const converter = new DefaultMarkdownConverter({}, plugin).convert(input)
+```
+
+- With React converter
+```tsx
+import { MarkdownComponent } from 'simple-customize-markdown-converter/react';
+
+function App() {
+  const emojiPlugin = createPlugin<string, React.ReactNode>(
+    "Emoji",
+    "inline",
+    {
+        match: (lexer) => lexer.peek() === ":",
+          emit: (lexer) => {
+            lexer.next();
+            const value = lexer.readUntil(":");
+            lexer.listToken.push({ type: "Emoji", value });
+          }
+    },
+    {
+      execute: (parser, token) => {
+        parser.next(1);
+        return { type: "Emoji", value: token.value };
+      }
+    },
+    {
+      render: (node) => React.createElement(
+        "span",
+        { className: `emoji emoji-${node.value}` },
+        "😲"
+      )
+    }
+  );
+
+  return (
+    <MarkdownComponent 
+      content="Hello :omg: world"
+      className="md-body"
+      options=options
+      plugin=[emojiPlugin]
+    />
+  );
+}
+```
+
+
 ## Security
 By default, HTML tags in Markdown are escaped. To allow raw HTML, explicitly set `allowDangerousHtml: true` in `converterOptions`. Be sure only **enable** this for **trusted** content.
 

package/dist/core/lexer/handler.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnorderedListHandler = exports.TaskListHandler = exports.TableHandler = exports.StrikethroughHandler = exports.QuoteHandler = exports.OrderedListHandler = exports.NewLineHandler = exports.LinkHandler = exports.ItalicHandler = exports.InlineCodeHandler = exports.ImageHandler = exports.HtmlHandler = exports.HorizontalLineHandler = exports.HeaderHandler = exports.FootnoteRefHandler = exports.FootnoteDefHandler = exports.EscapeCharacterHandler = exports.EndListHandler = exports.CommentHandler = exports.CodeBlockHandler = exports.BoldHandler = void 0;
 const utils = __importStar(require("../../utilities/tokenizer-utils"));
 const EscapeCharacterHandler = {
-    name: "EscapeCharacter",
+    type: "EscapeCharacter",
     match: (lex) => lex.peek() === "\\" && lex.peek(1) !== undefined,
     emit: (lex) => {
         lex.next(1);
@@ -45,13 +45,13 @@ const EscapeCharacterHandler = {
 };
 exports.EscapeCharacterHandler = EscapeCharacterHandler;
 const CommentHandler = {
-    name: "Comment",
+    type: "Comment",
     match: (lex) => lex.startsWith("<!--"),
     emit: (lex) => lex.readUntilMatchString("-->", true)
 };
 exports.CommentHandler = CommentHandler;
 const HtmlHandler = {
-    name: "HTML",
+    type: "HTML",
     match: (lex) => lex.peek() === "<",
     emit: (lex) => {
         //Handle comment
@@ -67,7 +67,7 @@ const HtmlHandler = {
 };
 exports.HtmlHandler = HtmlHandler;
 const HorizontalLineHandler = {
-    name: "HorizontalLine",
+    type: "HorizontalLine",
     match: (lex) => /^([-*_])\1{2,}$/.test(lex.peekUntil("\n").trim()) && lex.getLastToken()?.type === "NewLine",
     emit: (lex) => {
         lex.next(2); //Skip two first characters, remain will be skiped after loop
@@ -76,7 +76,7 @@ const HorizontalLineHandler = {
 };
 exports.HorizontalLineHandler = HorizontalLineHandler;
 const CodeBlockHandler = {
-    name: "CodeBlock",
+    type: "CodeBlock",
     match: (lex) => lex.startsWith("```"),
     emit: (lex) => {
         let lang = "";
@@ -97,7 +97,7 @@ const CodeBlockHandler = {
 };
 exports.CodeBlockHandler = CodeBlockHandler;
 const BoldHandler = {
-    name: "Bold",
+    type: "Bold",
     match: (lex) => lex.startsWith("**"),
     emit: (lex) => {
         lex.listToken.push({ type: "Bold" });
@@ -106,7 +106,7 @@ const BoldHandler = {
 };
 exports.BoldHandler = BoldHandler;
 const StrikethroughHandler = {
-    name: "Strikethrough",
+    type: "Strikethrough",
     match: (lex) => lex.startsWith("~~"),
     emit: (lex) => {
         lex.listToken.push({ type: "Strikethrough" });
@@ -116,7 +116,7 @@ const StrikethroughHandler = {
 exports.StrikethroughHandler = StrikethroughHandler;
 // Footnote
 const FootnoteDefHandler = {
-    name: "FootnoteDef",
+    type: "FootnoteDef",
     match: (lex) => lex.isStartOfLine() && /^\[\^[^\]]+\]:/.test(lex.peekUntil("\n")),
     emit: (lex) => {
         const line = lex.readUntil("\n");
@@ -130,7 +130,7 @@ const FootnoteDefHandler = {
 };
 exports.FootnoteDefHandler = FootnoteDefHandler;
 const FootnoteRefHandler = {
-    name: "FootnoteRef",
+    type: "FootnoteRef",
     match: (lex) => lex.startsWith("[^"),
     emit: (lex) => {
         lex.next(2); //Skip [^
@@ -141,25 +141,25 @@ const FootnoteRefHandler = {
 exports.FootnoteRefHandler = FootnoteRefHandler;
 //List
 const TaskListHandler = {
-    name: "TaskList",
+    type: "TaskList",
     match: (lex) => lex.isStartOfLine() && /^(\s*)([-*+]) \[( |x|X)\] /.test(lex.peekUntil("\n")),
     emit: (lex) => utils.handleList(lex, false, true)
 };
 exports.TaskListHandler = TaskListHandler;
 const UnorderedListHandler = {
-    name: "UnorderList",
+    type: "UnorderList",
     match: (lex) => lex.isStartOfLine() && /^(\s*)([-*+]) /.test(lex.peekUntil("\n")),
     emit: (lex) => utils.handleList(lex, false, false)
 };
 exports.UnorderedListHandler = UnorderedListHandler;
 const OrderedListHandler = {
-    name: "OrderedList",
+    type: "OrderedList",
     match: (lex) => lex.isStartOfLine() && /^(\s*)(\d+)\. /.test(lex.peekUntil("\n")),
     emit: (lex) => utils.handleList(lex, true, false)
 };
 exports.OrderedListHandler = OrderedListHandler;
 const EndListHandler = {
-    name: "EndList",
+    type: "EndList",
     match: (lex) => lex.listLevelFlag > 0 && lex.isStartOfLine() && !/^(\s*)([-+*]|\d+\.) /.test(lex.peekUntil("\n")),
     emit: (lex) => {
         while (lex.listLevelFlag > 0) {
@@ -170,14 +170,14 @@ const EndListHandler = {
 exports.EndListHandler = EndListHandler;
 //Table
 const TableHandler = {
-    name: "Table",
+    type: "Table",
     match: (lex) => lex.isStartOfLine() && /^\s*\|.*\|\s*$/.test(lex.peekUntil("\n")),
     emit: (lex) => utils.handleTable(lex)
 };
 exports.TableHandler = TableHandler;
 //Other common syntax
 const InlineCodeHandler = {
-    name: "InlineCode",
+    type: "InlineCode",
     match: (lex) => lex.peek() === "`",
     emit: (lex) => {
         let content = "";
@@ -191,7 +191,7 @@ const InlineCodeHandler = {
 };
 exports.InlineCodeHandler = InlineCodeHandler;
 const HeaderHandler = {
-    name: "Header",
+    type: "Header",
     match: (lex) => lex.peek() === "#",
     emit: (lex) => {
         let level = 0;
@@ -208,7 +208,7 @@ const HeaderHandler = {
 };
 exports.HeaderHandler = HeaderHandler;
 const ItalicHandler = {
-    name: "Italic",
+    type: "Italic",
     match: (lex) => lex.peek() === "*" || lex.peek() === "_",
     emit: (lex) => {
         lex.listToken.push({ type: "Italic" });
@@ -216,7 +216,7 @@ const ItalicHandler = {
 };
 exports.ItalicHandler = ItalicHandler;
 const QuoteHandler = {
-    name: "Quote",
+    type: "Quote",
     match: (lex) => lex.peek() === ">",
     emit: (lex) => {
         lex.listToken.push({ type: "Quote" });
@@ -224,7 +224,7 @@ const QuoteHandler = {
 };
 exports.QuoteHandler = QuoteHandler;
 const LinkHandler = {
-    name: "Link",
+    type: "Link",
     match: (lex) => lex.peek() === "[",
     emit: (lex) => {
         lex.next(); //Skip [
@@ -242,7 +242,7 @@ const LinkHandler = {
 };
 exports.LinkHandler = LinkHandler;
 const ImageHandler = {
-    name: "Image",
+    type: "Image",
     match: (lex) => lex.peek() === "!" && lex.peek(1) === "[",
     emit: (lex) => {
         lex.next(); //Skip !
@@ -263,7 +263,7 @@ const ImageHandler = {
 };
 exports.ImageHandler = ImageHandler;
 const NewLineHandler = {
-    name: "NewLine",
+    type: "NewLine",
     match: (lex) => lex.peek() === "\n",
     emit: (lex) => {
         lex.listToken.push({ type: "NewLine" });

package/dist/core/lexer/index.d.ts

@@ -1,9 +1,10 @@
-import { Token } from "../../types/token";
+import { Token, TokenizerStrategy } from "../../types/token";
 export interface ILexer {
     pos: number;
     input: string;
     listToken: Token[];
     listLevelFlag: number;
+    strategies: TokenizerStrategy[];
     peek(offset?: number): string | null;
     next(amount?: number): void;
     startsWith(str: string): boolean;
@@ -14,14 +15,19 @@ export interface ILexer {
     isEndOfFile(): boolean;
     isStartOfLine(): boolean;
     getLastToken(): Token;
+    registerStrategy(strategy: TokenizerStrategy): void;
 }
-export default class Lexer implements ILexer {
+export declare class Lexer implements ILexer {
     input: string;
     pos: number;
     listToken: Token[];
     listLevelFlag: number;
-    private strategies;
-    constructor(input: string);
+    strategies: TokenizerStrategy[];
+    private coreStrategy;
+    private pluginStrategy;
+    private defaultStrategy;
+    constructor(input: string, pluginStrategy?: TokenizerStrategy[]);
+    private setUpStrategy;
     setInput(input: string): void;
     peek(offset?: number): string | null;
     next(amount?: number): void;
@@ -33,6 +39,7 @@ export default class Lexer implements ILexer {
     peekUntilByOffset(offset: number): string;
     isStartOfLine(): boolean;
     readUntilMatchString(str: string, isConsume?: boolean): string;
+    registerStrategy(strategy: TokenizerStrategy): 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.

package/dist/core/lexer/index.js

@@ -33,19 +33,22 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lexer = void 0;
 const Handlers = __importStar(require("./handler"));
 const utils = __importStar(require("../../utilities/tokenizer-utils"));
 class Lexer {
-    constructor(input) {
+    constructor(input, pluginStrategy = []) {
         this.pos = 0;
         this.listToken = [];
         // Flag for handle special syntax
         this.listLevelFlag = 0;
-        this.input = input;
-        this.strategies = [
+        this.coreStrategy = [
             Handlers.EscapeCharacterHandler,
             Handlers.CommentHandler,
             Handlers.HtmlHandler,
+        ];
+        this.pluginStrategy = [];
+        this.defaultStrategy = [
             Handlers.HorizontalLineHandler,
             Handlers.CodeBlockHandler,
             Handlers.BoldHandler,
@@ -65,6 +68,17 @@ class Lexer {
             Handlers.ImageHandler,
             Handlers.NewLineHandler,
         ];
+        this.input = input;
+        this.pluginStrategy = pluginStrategy;
+        this.strategies = [];
+        this.setUpStrategy();
+    }
+    setUpStrategy() {
+        this.strategies = [
+            ...this.coreStrategy,
+            ...this.pluginStrategy,
+            ...this.defaultStrategy
+        ];
     }
     //Reset input and other attribute
     setInput(input) {
@@ -146,6 +160,10 @@ class Lexer {
         }
         return result;
     }
+    registerStrategy(strategy) {
+        this.pluginStrategy.push(strategy);
+        this.setUpStrategy();
+    }
     /**
      * 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.
@@ -174,4 +192,4 @@ class Lexer {
         return this.listToken;
     }
 }
-exports.default = Lexer;
+exports.Lexer = Lexer;

package/dist/core/parser/index.d.ts

@@ -1,26 +1,33 @@
-import { ASTNode } from '../../types/parser';
+import { ASTNode, ParsingStrategy } from '../../types/parser';
 import { Token } from '../../types/token';
 import { FootnoteResolver } from '../resolver/footnote-resolver';
 export interface IParser {
     listToken: Token[];
     pos: number;
+    inlineStrategies: Map<string, ParsingStrategy>;
+    blockStrategies: Map<string, ParsingStrategy>;
     footNoteResolver: FootnoteResolver;
     peek(offset: number): Token | null;
     next(amount: number): void;
     isEnd(): boolean;
     parseBlocks(): ASTNode[];
     parseInlineUntil(stopType: Token["type"] | Token["type"][], isConsumeStopToken: boolean): ASTNode[];
+    registerStrategy(strategy: ParsingStrategy, type: "block" | "inline"): void;
 }
 export declare class Parser implements IParser {
     listToken: Token[];
     pos: number;
     footNoteResolver: FootnoteResolver;
-    private inlineStrategies;
-    private blockStrategies;
-    constructor(listToken: Token[], footNoteResolver: FootnoteResolver);
+    inlineStrategies: Map<string, ParsingStrategy>;
+    blockStrategies: Map<string, ParsingStrategy>;
+    constructor(listToken: Token[], footNoteResolver: FootnoteResolver, plugin?: {
+        type: 'block' | 'inline';
+        strategy: ParsingStrategy;
+    }[]);
     peek(offset?: number): Token | null;
     next(amount?: number): void;
     isEnd(): boolean;
+    registerStrategy(strategy: ParsingStrategy, type: 'block' | 'inline'): void;
     /**
          * Parse a list token to a node
          * @return A parsed abstract syntax tree (AST)

package/dist/core/parser/index.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Parser = void 0;
 const Handler = __importStar(require("./handler"));
 class Parser {
-    constructor(listToken, footNoteResolver) {
+    constructor(listToken, footNoteResolver, plugin = []) {
         this.pos = 0;
         this.listToken = listToken;
         this.footNoteResolver = footNoteResolver;
@@ -61,6 +61,8 @@ class Parser {
             Handler.HtmlInlineHandler,
             Handler.FootnoteRefHandler,
         ].map(ele => [ele.type, ele]));
+        if (plugin.length > 0)
+            plugin.forEach(p => this.registerStrategy(p.strategy, p.type));
     }
     peek(offset = 0) {
         const i = this.pos + offset;
@@ -72,6 +74,13 @@ class Parser {
     isEnd() {
         return this.peek()?.type === "EOF";
     }
+    registerStrategy(strategy, type) {
+        if (type === "block") {
+            this.blockStrategies.set(strategy.type, strategy);
+        }
+        else
+            this.inlineStrategies.set(strategy.type, strategy);
+    }
     /**
          * Parse a list token to a node
          * @return A parsed abstract syntax tree (AST)

package/dist/index.d.ts

@@ -1,8 +1,14 @@
+import { ILexer, Lexer } from "./core/lexer";
+import { IParser, Parser } from "./core/parser";
+import { IRenderer } from "./renderers/index";
+import { DefaultRenderer } from "./renderers/default";
 import { MarkdownOptions } from "./types/options";
 import { Token, TokenizerStrategy } from './types/token';
 import { ASTNode, ParsingStrategy } from './types/parser';
 import { RenderStrategy } from './types/renderer';
-export { MarkdownOptions, Token, TokenizerStrategy, ASTNode, ParsingStrategy, RenderStrategy };
+import { MarkdownPlugin } from "./types/plugin";
+import { BaseConverter } from "./types/converter";
+export { MarkdownOptions, Token, TokenizerStrategy, ILexer, IParser, IRenderer, Lexer, Parser, DefaultRenderer, ASTNode, ParsingStrategy, RenderStrategy, MarkdownPlugin, };
 /**
  * Convert a Markdown string into HTML.
  * @param input - The Markdown source string
@@ -15,4 +21,24 @@ export { MarkdownOptions, Token, TokenizerStrategy, ASTNode, ParsingStrategy, Re
  * // => <p>Hello <strong>world</strong></p>
  * ```
  */
-export declare function convertMarkdownToHTML(input: string, options?: MarkdownOptions<string>): string;
+export declare function convertMarkdownToHTML(input: string, options?: MarkdownOptions<string>, plugin?: MarkdownPlugin<string, string>[]): string;
+/**
+ * Default Markdown converter that outputs a standard HTML string
+ * @extends BaseConverter<string>
+ * @example
+ * ```ts
+ * const converter = new DefaultMarkdownConverter(
+ *  {
+ *    renderOptions: {
+ *      className: { Header: "my-title" }
+ *    }
+ *  },
+ *  [MyCustomPlugin]
+ * );
+ * const html = converter.convert("# Hello");
+ * ```
+ */
+export declare class DefaultMarkdownConverter extends BaseConverter<string> {
+    constructor(options?: MarkdownOptions<string>, plugin?: MarkdownPlugin<string, string>[]);
+    convert(input: string): string;
+}

package/dist/index.js

@@ -1,13 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultMarkdownConverter = exports.DefaultRenderer = exports.Parser = exports.Lexer = void 0;
 exports.convertMarkdownToHTML = convertMarkdownToHTML;
-const lexer_1 = __importDefault(require("./core/lexer"));
+const lexer_1 = require("./core/lexer");
+Object.defineProperty(exports, "Lexer", { enumerable: true, get: function () { return lexer_1.Lexer; } });
 const parser_1 = require("./core/parser");
-const footnote_resolver_1 = require("./core/resolver/footnote-resolver");
+Object.defineProperty(exports, "Parser", { enumerable: true, get: function () { return parser_1.Parser; } });
 const default_1 = require("./renderers/default");
+Object.defineProperty(exports, "DefaultRenderer", { enumerable: true, get: function () { return default_1.DefaultRenderer; } });
+const converter_1 = require("./types/converter");
 /**
  * Convert a Markdown string into HTML.
  * @param input - The Markdown source string
@@ -23,9 +24,37 @@ const default_1 = require("./renderers/default");
 function convertMarkdownToHTML(input, options = {
     renderOptions: {},
     converterOptions: { allowDangerousHtml: false }
-}) {
-    const tokens = new lexer_1.default(input).tokenize();
-    const footNoteResolver = new footnote_resolver_1.FootnoteResolver();
-    const nodes = new parser_1.Parser(tokens, footNoteResolver).parse();
-    return new default_1.DefaultRenderer(footNoteResolver, options).render(nodes);
+}, plugin = []) {
+    return new DefaultMarkdownConverter(options, plugin).convert(input);
 }
+/**
+ * Default Markdown converter that outputs a standard HTML string
+ * @extends BaseConverter<string>
+ * @example
+ * ```ts
+ * const converter = new DefaultMarkdownConverter(
+ *  {
+ *    renderOptions: {
+ *      className: { Header: "my-title" }
+ *    }
+ *  },
+ *  [MyCustomPlugin]
+ * );
+ * const html = converter.convert("# Hello");
+ * ```
+ */
+class DefaultMarkdownConverter extends converter_1.BaseConverter {
+    constructor(options = {
+        renderOptions: {},
+        converterOptions: { allowDangerousHtml: false }
+    }, plugin = []) {
+        super(options, plugin);
+    }
+    convert(input) {
+        const tokens = this.getTokens(input);
+        const nodes = this.getNodes(tokens);
+        const renderer = new default_1.DefaultRenderer(this.footnoteResolver, this.options, this.plugin.map(p => p.renderer));
+        return renderer.render(nodes);
+    }
+}
+exports.DefaultMarkdownConverter = DefaultMarkdownConverter;

package/dist/react.d.ts

@@ -1,10 +1,15 @@
 import React from "react";
+import { ReactRenderer } from "./renderers/react";
 import { MarkdownOptions } from "./types/options";
+import { BaseConverter } from "./types/converter";
+import { MarkdownPlugin } from "./types/plugin";
+export { ReactRenderer };
 /**
  * Convert a Markdown string into a ReactNode.
  * @param input - The Markdown source string
  * @param renderOptions - Optional rendering options
  * @param options - Optional handle options
+ * @param [plugin=[]] - Optional plugin for additional render rules
  * @returns The rendered `React.ReactNode` ready to be rendered into a React component.
  *
  * @example
@@ -13,13 +18,14 @@ import { MarkdownOptions } from "./types/options";
  * return <div>{node}</div>;
  * ```
  */
-export declare function convertMarkdownToReactNode(input: string, options?: MarkdownOptions<React.ReactNode>): React.ReactNode;
+export declare function convertMarkdownToReactNode(input: string, options?: MarkdownOptions<React.ReactNode>, plugin?: MarkdownPlugin<string, React.ReactNode>[]): React.ReactNode;
 /**
  * A React commponent that renders Markdown content.
  * Using `React.useMemo` to ensure performance and prevent unnecessary re-render.
  * @param props.content - The Markdown source to render.
  * @param props.options - Optional configuration for the renderer.
  * @param props.className - Optional CSS classes for the wrapping `div` element.
+ * @param props.plugin - Optional plugin for additional syntax handler.
  * @example
  * ```tsx
  * <MarkdownComponent
@@ -33,4 +39,25 @@ export declare const MarkdownComponent: React.FC<{
     content: string;
     options?: MarkdownOptions<React.ReactNode>;
     className?: string;
+    plugin?: MarkdownPlugin<string, React.ReactNode>[];
 }>;
+/**
+ * React Markdown converter that outputs a React.ReactNode
+ * @extends BaseConverter<React.ReactNode>
+ * @example
+ * ```ts
+ * const converter = new ReactMarkdownConverter(
+ *  {
+ *    renderOptions: {
+ *      className: { Header: "my-title" }
+ *    }
+ *  },
+ *  [MyCustomPlugin]
+ * );
+ * const html = converter.convert("# Hello");
+ * ```
+ */
+export declare class ReactMarkdownConverter extends BaseConverter<React.ReactNode> {
+    constructor(options?: MarkdownOptions<React.ReactNode>, plugin?: MarkdownPlugin<string, React.ReactNode>[]);
+    convert(input: string): React.ReactNode;
+}

package/dist/react.js

@@ -3,18 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MarkdownComponent = void 0;
+exports.ReactMarkdownConverter = exports.MarkdownComponent = exports.ReactRenderer = void 0;
 exports.convertMarkdownToReactNode = convertMarkdownToReactNode;
 const react_1 = __importDefault(require("react"));
-const lexer_1 = __importDefault(require("./core/lexer"));
-const parser_1 = require("./core/parser");
-const footnote_resolver_1 = require("./core/resolver/footnote-resolver");
 const react_2 = require("./renderers/react");
+Object.defineProperty(exports, "ReactRenderer", { enumerable: true, get: function () { return react_2.ReactRenderer; } });
+const converter_1 = require("./types/converter");
 /**
  * Convert a Markdown string into a ReactNode.
  * @param input - The Markdown source string
  * @param renderOptions - Optional rendering options
  * @param options - Optional handle options
+ * @param [plugin=[]] - Optional plugin for additional render rules
  * @returns The rendered `React.ReactNode` ready to be rendered into a React component.
  *
  * @example
@@ -26,11 +26,8 @@ const react_2 = require("./renderers/react");
 function convertMarkdownToReactNode(input, options = {
     renderOptions: {},
     converterOptions: { allowDangerousHtml: false }
-}) {
-    const tokens = new lexer_1.default(input).tokenize();
-    const footNoteResolver = new footnote_resolver_1.FootnoteResolver();
-    const nodes = new parser_1.Parser(tokens, footNoteResolver).parse();
-    return new react_2.ReactRenderer(footNoteResolver, options).render(nodes);
+}, plugin = []) {
+    return new ReactMarkdownConverter(options, plugin).convert(input);
 }
 /**
  * A React commponent that renders Markdown content.
@@ -38,6 +35,7 @@ function convertMarkdownToReactNode(input, options = {
  * @param props.content - The Markdown source to render.
  * @param props.options - Optional configuration for the renderer.
  * @param props.className - Optional CSS classes for the wrapping `div` element.
+ * @param props.plugin - Optional plugin for additional syntax handler.
  * @example
  * ```tsx
  * <MarkdownComponent
@@ -47,10 +45,41 @@ function convertMarkdownToReactNode(input, options = {
  * />
  * ```
  */
-const MarkdownComponent = ({ content, className, options }) => {
+const MarkdownComponent = ({ content, className, options, plugin }) => {
     const rendered = react_1.default.useMemo(() => {
-        return convertMarkdownToReactNode(content, options);
-    }, [content]);
+        return new ReactMarkdownConverter(options, plugin).convert(content);
+    }, [content, options, plugin]);
     return react_1.default.createElement("div", { className }, rendered);
 };
 exports.MarkdownComponent = MarkdownComponent;
+/**
+ * React Markdown converter that outputs a React.ReactNode
+ * @extends BaseConverter<React.ReactNode>
+ * @example
+ * ```ts
+ * const converter = new ReactMarkdownConverter(
+ *  {
+ *    renderOptions: {
+ *      className: { Header: "my-title" }
+ *    }
+ *  },
+ *  [MyCustomPlugin]
+ * );
+ * const html = converter.convert("# Hello");
+ * ```
+ */
+class ReactMarkdownConverter extends converter_1.BaseConverter {
+    constructor(options = {
+        renderOptions: {},
+        converterOptions: { allowDangerousHtml: false }
+    }, plugin = []) {
+        super(options, plugin);
+    }
+    convert(input) {
+        const tokens = this.getTokens(input);
+        const nodes = this.getNodes(tokens);
+        const renderer = new react_2.ReactRenderer(this.footnoteResolver, this.options, this.plugin.map(p => p.renderer));
+        return renderer.render(nodes);
+    }
+}
+exports.ReactMarkdownConverter = ReactMarkdownConverter;

package/dist/renderers/default/index.d.ts

@@ -1,14 +1,16 @@
 import { IRenderer } from "..";
 import { MarkdownOptions } from "../../types/options";
 import { ASTNode } from "../../types/parser";
+import { RenderStrategy } from "../../types/renderer";
 import { FootnoteResolver } from "../../core/resolver/footnote-resolver";
 export declare class DefaultRenderer implements IRenderer<string> {
     options: MarkdownOptions<string>;
     footnoteResolver: FootnoteResolver;
-    private strategies;
-    constructor(footnoteResolver: FootnoteResolver, options?: MarkdownOptions<string>);
+    strategies: Map<string, RenderStrategy<string>>;
+    constructor(footnoteResolver: FootnoteResolver, options?: MarkdownOptions<string>, plugin?: RenderStrategy<string>[]);
     private registerDefaultStrategies;
     render(node: ASTNode): string;
     renderFootnotes(): string;
     renderTable(node: ASTNode, children: string[]): string;
+    registerStrategy(strategy: RenderStrategy<string>): void;
 }

package/dist/renderers/default/index.js

@@ -37,11 +37,13 @@ exports.DefaultRenderer = void 0;
 const Handlers = __importStar(require("./handler"));
 const renderer_utils_1 = require("../../utilities/renderer-utils");
 class DefaultRenderer {
-    constructor(footnoteResolver, options = {}) {
+    constructor(footnoteResolver, options = {}, plugin = []) {
         this.strategies = new Map();
         this.footnoteResolver = footnoteResolver;
         this.options = options;
         this.registerDefaultStrategies();
+        if (plugin.length > 0)
+            plugin.forEach(p => this.registerStrategy(p));
     }
     registerDefaultStrategies() {
         const listDefaultStrategy = [
@@ -115,5 +117,8 @@ class DefaultRenderer {
         else
             return `<p${cls ? ` class="${cls}"` : ""}>${children.join("\n")}</p>`;
     }
+    registerStrategy(strategy) {
+        this.strategies.set(strategy.type, strategy);
+    }
 }
 exports.DefaultRenderer = DefaultRenderer;

package/dist/renderers/index.d.ts

@@ -1,10 +1,13 @@
 import { ASTNode } from "../types/parser";
 import { MarkdownOptions } from '../types/options/index';
 import { FootnoteResolver } from "../core/resolver/footnote-resolver";
+import { RenderStrategy } from "../types/renderer";
 export interface IRenderer<TOutput> {
     options: MarkdownOptions<TOutput>;
     footnoteResolver: FootnoteResolver;
+    strategies: Map<string, RenderStrategy<TOutput>>;
     render(node: ASTNode): TOutput;
     renderTable(node: ASTNode, children: TOutput[]): TOutput;
     renderFootnotes(): TOutput;
+    registerStrategy(strategy: RenderStrategy<TOutput>): void;
 }

package/dist/renderers/react/index.d.ts

@@ -2,14 +2,16 @@ import React from "react";
 import { IRenderer } from "..";
 import { MarkdownOptions } from "../../types/options";
 import { ASTNode } from "../../types/parser";
+import { RenderStrategy } from "../../types/renderer";
 import { FootnoteResolver } from "../../core/resolver/footnote-resolver";
 export declare class ReactRenderer implements IRenderer<React.ReactNode> {
     options: MarkdownOptions<React.ReactNode>;
     footnoteResolver: FootnoteResolver;
-    private strategies;
-    constructor(footnoteResolver: FootnoteResolver, options?: MarkdownOptions<React.ReactNode>);
+    strategies: Map<string, RenderStrategy<React.ReactNode>>;
+    constructor(footnoteResolver: FootnoteResolver, options?: MarkdownOptions<React.ReactNode>, plugin?: RenderStrategy<React.ReactNode>[]);
     private registerDefaultStrategies;
     render(node: ASTNode): React.ReactNode;
     renderFootnotes(): React.ReactNode;
     renderTable(node: ASTNode, children: React.ReactNode[]): React.ReactNode;
+    registerStrategy(strategy: RenderStrategy<React.ReactNode>): void;
 }

package/dist/renderers/react/index.js

@@ -41,11 +41,13 @@ const react_1 = __importDefault(require("react"));
 const Handlers = __importStar(require("./handler"));
 const renderer_utils_1 = require("../../utilities/renderer-utils");
 class ReactRenderer {
-    constructor(footnoteResolver, options = {}) {
+    constructor(footnoteResolver, options = {}, plugin = []) {
         this.strategies = new Map();
         this.footnoteResolver = footnoteResolver;
         this.options = options;
         this.registerDefaultStrategies();
+        if (plugin.length > 0)
+            plugin.forEach(p => this.registerStrategy(p));
     }
     registerDefaultStrategies() {
         const listDefaultStrategy = [
@@ -120,5 +122,8 @@ class ReactRenderer {
         else
             return react_1.default.createElement("p", { className: (0, renderer_utils_1.getClassName)(this, node), }, ...children);
     }
+    registerStrategy(strategy) {
+        this.strategies.set(strategy.type, strategy);
+    }
 }
 exports.ReactRenderer = ReactRenderer;

package/dist/types/converter.d.ts

@@ -0,0 +1,14 @@
+import { FootnoteResolver } from "../core/resolver/footnote-resolver";
+import { MarkdownOptions } from "./options";
+import { ASTNode } from "./parser";
+import { MarkdownPlugin } from "./plugin";
+import { Token } from "./token";
+export declare abstract class BaseConverter<TOutput> {
+    protected options: MarkdownOptions<TOutput>;
+    protected plugin: MarkdownPlugin<string, TOutput>[];
+    protected footnoteResolver: FootnoteResolver;
+    constructor(options: MarkdownOptions<TOutput>, plugin: MarkdownPlugin<string, TOutput>[]);
+    protected getTokens(input: string): Token[];
+    protected getNodes(tokens: Token[]): ASTNode;
+    abstract convert(input: string): TOutput;
+}

package/dist/types/converter.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseConverter = void 0;
+const lexer_1 = require("../core/lexer");
+const parser_1 = require("../core/parser");
+const footnote_resolver_1 = require("../core/resolver/footnote-resolver");
+class BaseConverter {
+    constructor(options, plugin) {
+        this.options = options;
+        this.plugin = plugin;
+        this.footnoteResolver = new footnote_resolver_1.FootnoteResolver();
+    }
+    getTokens(input) {
+        return new lexer_1.Lexer(input, this.plugin.map(p => p.tokenizer)).tokenize();
+    }
+    getNodes(tokens) {
+        return new parser_1.Parser(tokens, this.footnoteResolver, this.plugin.map(p => ({
+            type: p.type,
+            strategy: p.parser
+        }))).parse();
+    }
+}
+exports.BaseConverter = BaseConverter;

package/dist/types/plugin.d.ts

@@ -0,0 +1,51 @@
+import { TokenizerStrategy } from "./token";
+import { ParsingStrategy } from "./parser";
+import { RenderStrategy } from "./renderer";
+/**
+ * Representing a custom plugin for the Markdown converter.
+ * It allow to define new syntax by hooking into the `Lexing`, `Parsing` and `Rendering` stages.
+ * @template TOutput - The type of final rendered output
+ */
+export interface MarkdownPlugin<T extends string, TOutput> {
+    /**
+     * Unique identifier for the plugin
+     */
+    name: T;
+    /**
+     * Define the context of plugin
+     */
+    type: "block" | "inline";
+    /**
+     * Strategy for the Lexer.
+     * The `type` property of this property must be same as `name` property
+     */
+    tokenizer: TokenizerStrategy & {
+        type: T;
+    };
+    /**
+     * Strategy for the Parser.
+     * The `type` property of this property must be same as `name` property
+     */
+    parser: ParsingStrategy & {
+        type: T;
+    };
+    /**
+     * Strategy for the Renderer.
+     * The `type` property of this property must be same as `name` property
+     */
+    renderer: RenderStrategy<TOutput> & {
+        type: T;
+    };
+}
+/**
+ * A helper function to create a plugin
+ * @template T - The literal string type for the plugin name.
+ * @template TOutput - The output type.
+ * @param name - Name of plugin
+ * @param type - Context of plugin, determine for parser processing
+ * @param tokenizer - Tokenizer strategy for Lexer
+ * @param parser - Parser strategy for Parser
+ * @param renderer - Render strategy for Renderer
+ * @returns - A complete Markdown plugin
+ */
+export declare function createPlugin<T extends string, TOutput>(name: T, type: "block" | "inline", tokenizer: Omit<TokenizerStrategy, "type">, parser: Omit<ParsingStrategy, "type">, renderer: Omit<RenderStrategy<TOutput>, "type">): MarkdownPlugin<T, TOutput>;

package/dist/types/plugin.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPlugin = createPlugin;
+/**
+ * A helper function to create a plugin
+ * @template T - The literal string type for the plugin name.
+ * @template TOutput - The output type.
+ * @param name - Name of plugin
+ * @param type - Context of plugin, determine for parser processing
+ * @param tokenizer - Tokenizer strategy for Lexer
+ * @param parser - Parser strategy for Parser
+ * @param renderer - Render strategy for Renderer
+ * @returns - A complete Markdown plugin
+ */
+function createPlugin(name, type, tokenizer, parser, renderer) {
+    const finalTokenizer = Object.assign(tokenizer, { type: name });
+    const finalParser = Object.assign(parser, { type: name });
+    const finalRenderer = Object.assign(renderer, { type: name });
+    return {
+        name,
+        type,
+        tokenizer: finalTokenizer,
+        parser: finalParser,
+        renderer: finalRenderer
+    };
+}

package/dist/types/token.d.ts

@@ -114,7 +114,7 @@ export interface Token {
  * @property emit - A function handle tokenizing input to `Token`.
  */
 export interface TokenizerStrategy {
-    name: string;
+    type: 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.

package/dist/utilities/tokenizer-utils.js

@@ -1,7 +1,4 @@
 "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;
@@ -12,7 +9,7 @@ exports.handleStartList = handleStartList;
 exports.handleTable = handleTable;
 exports.handleTaskItem = handleTaskItem;
 exports.handleTextBlock = handleTextBlock;
-const lexer_1 = __importDefault(require("../core/lexer"));
+const lexer_1 = require("../core/lexer");
 function handleTextBlock(lex) {
     const currentChar = lex.peek();
     if (currentChar === null)
@@ -106,7 +103,7 @@ function handleEndList(lex) {
 //Table utilities
 function handleTable(lex) {
     const tokenizeResult = [];
-    const handler = new lexer_1.default("");
+    const handler = new lexer_1.Lexer("");
     const header = lex.readUntil("\n", true);
     const headerDetails = header.trim().replace(/^ *\|/, "").replace(/\| *$/, "").split("|");
     const align = lex.readUntil("\n", true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-customize-markdown-converter",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Transform Markdown into fully customizable HTML or React components.",
   "keywords": [
     "markdown",