simple-customize-markdown-converter 1.2.0 → 1.2.1

package/README.md

@@ -126,6 +126,53 @@ const options: MarkdownReactOptions = {
 };
 ```
 
+#### 3. Customize className (v1.2.1+)
+You can custom CSS class name for each elements
+- For HTML
+```ts
+const renderOptions: RenderOption<string> = {
+  className: {
+    Header: "common-h",
+    Header1: "main-title",
+    Paragraph: "text-muted"
+  }
+};
+
+const md = "# Title\nParagraph content";
+const result = convertMarkdownToHTML(md, { renderOptions });
+```
+
+Output:
+```html
+<h1 class="main-title" style="border-bottom: 1px solid #d1d9e0b3">Title</h1>
+<p class="text-muted">Paragraph content</p>
+```
+
+- For ReactJS
+```ts
+import { MarkdownComponent } from 'simple-customize-markdown-converter/react';
+
+const options: MarkdownOptions<React.ReactNode> = {
+  renderOptions: {
+    className: {
+      Header: "h-common",
+      Header2: "h2-special",
+      Bold: "font-heavy"
+    }
+  }
+};
+
+function App() {
+  return (
+    <MarkdownComponent 
+      content="# Hello React" 
+      className="md-body"
+      options
+    />
+  );
+}
+
+```
 ## 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/renderers/default/handler.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FootnoteRefHandler = exports.HTMLInlineHandler = exports.HTMLBlockHandler = exports.TableHandler = exports.TextHandler = exports.HorizontalLineHandler = exports.ImageHandler = exports.LinkHandler = exports.InlineCodeHandler = exports.StrikethroughHandler = exports.ItalicHandler = exports.BoldHandler = exports.TaskItemHandler = exports.ListItemHandler = exports.ListHandler = exports.QuoteHandler = exports.HeaderHandler = exports.CodeBlockHandler = exports.ParagraphHandler = exports.DocumentHandler = void 0;
+const renderer_utils_1 = require("../../utilities/renderer-utils");
 //Base structural nodes
 exports.DocumentHandler = {
     type: "Document",
@@ -8,70 +9,113 @@ exports.DocumentHandler = {
 };
 exports.ParagraphHandler = {
     type: "Paragraph",
-    render: (_node, children) => `<p>${children.join("")}</p>`
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<p${cls ? ` class="${cls}"` : ""}>${children.join("")}</p>`;
+    }
 };
 //Container nodes
 exports.CodeBlockHandler = {
     type: "CodeBlock",
-    render: (node) => `<pre><code class="lang-${node.lang}">${escapeHtml(node.content || "")}</code></pre>`,
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node, `lang-${node.lang}`);
+        return `<pre><code${cls ? ` class="${cls}"` : ""}>${(0, renderer_utils_1.escapeHtml)(node.content || "")}</code></pre>`;
+    }
 };
 exports.HeaderHandler = {
     type: "Header",
-    render: (node, children) => {
+    render: (node, children, ctx) => {
         if (node.level) {
+            const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+            const classAttr = cls ? ` class="${cls}"` : "";
             const style = node.level <= 2 ? ' style="border-bottom: 1px solid #d1d9e0b3"' : '';
-            return `<h${node.level}${style}>${children.join("")}</h${node.level}>`;
+            return `<h${node.level}${classAttr}${style}>${children.join("")}</h${node.level}>`;
         }
         return `<p>${children.join("")}</p>`;
     }
 };
 exports.QuoteHandler = {
     type: "Quote",
-    render: (_node, children) => `<blockquote style="margin:0; padding:0 1em; color:#59636e; border-left:.25em solid #d1d9e0;">${children.join("")}</blockquote>`
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        const classAttr = cls ? ` class="${cls}"` : "";
+        return `<blockquote${classAttr} style="margin:0; padding:0 1em; color:#59636e; border-left:.25em solid #d1d9e0;">${children.join("")}</blockquote>`;
+    }
 };
 //For list nodes
 exports.ListHandler = {
     type: "List",
-    render: (node, children) => node.ordered ? `<ol>${children.join("")}</ol>` : `<ul>${children.join("")}</ul>`
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        const classAttr = cls ? ` class="${cls}"` : "";
+        return node.ordered ? `<ol${classAttr}>${children.join("")}</ol>` : `<ul${classAttr}>${children.join("")}</ul>`;
+    }
 };
 exports.ListItemHandler = {
     type: "ListItem",
-    render: (_node, children) => `<li>${children.join("")}</li>`
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<li${cls ? ` class="${cls}"` : ""}>${children.join("")}</li>`;
+    }
 };
 exports.TaskItemHandler = {
     type: "TaskItem",
-    render: (node, children) => `<li><input type="checkbox" disabled ${node.checked ? "checked" : ""}>${children.join("")}</li>`
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<li${cls ? ` class="${cls}"` : ""} style="list-style-type: none"><input type="checkbox" disabled ${node.checked ? "checked" : ""}>${children.join("")}</li>`;
+    }
 };
 //Styling nodes
 exports.BoldHandler = {
     type: "Bold",
-    render: (_node, children) => `<strong>${children.join("")}</strong>`
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<strong${cls ? ` class="${cls}"` : ""}>${children.join("")}</strong>`;
+    }
 };
 exports.ItalicHandler = {
     type: "Italic",
-    render: (_node, children) => `<em>${children.join("")}</em>`
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<em${cls ? ` class="${cls}"` : ""}>${children.join("")}</em>`;
+    }
 };
 exports.StrikethroughHandler = {
     type: "Strikethrough",
-    render: (_node, children) => `<s>${children.join("")}</s>`
+    render: (node, children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<s${cls ? ` class="${cls}"` : ""}>${children.join("")}</s>`;
+    }
 };
 exports.InlineCodeHandler = {
     type: "InlineCode",
-    render: (node, _children) => `<code>${escapeHtml(node.content || "")}</code>`
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<code${cls ? ` class="${cls}"` : ""}>${(0, renderer_utils_1.escapeHtml)(node.content || "")}</code>`;
+    }
 };
 //Media nodes
 exports.LinkHandler = {
     type: "Link",
-    render: (node) => `<a href="${node.href}">${node.text}</a>`
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<a href="${node.href}"${cls ? ` class="${cls}"` : ""} target="_blank" rel="noopener">${node.text}</a>`;
+    }
 };
 exports.ImageHandler = {
     type: "Image",
-    render: (node) => `<img src="${node.src || ""}" alt="${node.alt || ""}"/>`
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<img src="${node.src || ""}" alt="${node.alt || ""}"${cls ? ` class="${cls}"` : ""}/>`;
+    }
 };
 //Leaf nodes
 exports.HorizontalLineHandler = {
     type: "HorizontalLine",
-    render: () => `<hr>`
+    render: (node, _children, ctx) => {
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        return `<hr${cls ? ` class="${cls}"` : ""}>`;
+    }
 };
 exports.TextHandler = {
     type: "Text",
@@ -87,14 +131,18 @@ exports.HTMLBlockHandler = {
     type: "HTMLBlock",
     render: (node, _children, ctx) => {
         const val = node.value || "";
-        return ctx.options.converterOptions?.allowDangerousHtml ? val : escapeHtml(val);
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        const content = ctx.options.converterOptions?.allowDangerousHtml ? val : (0, renderer_utils_1.escapeHtml)(val);
+        return cls ? `<div${cls ? ` class="${cls}"` : ""}>${content}</div>` : content;
     }
 };
 exports.HTMLInlineHandler = {
     type: "HTMLInline",
     render: (node, _children, ctx) => {
         const val = node.value || "";
-        return ctx.options.converterOptions?.allowDangerousHtml ? val : escapeHtml(val);
+        const cls = (0, renderer_utils_1.getClassName)(ctx, node);
+        const content = ctx.options.converterOptions?.allowDangerousHtml ? val : (0, renderer_utils_1.escapeHtml)(val);
+        return cls ? `<span${cls ? ` class="${cls}"` : ""}>${content}</span>` : content;
     }
 };
 //For footnote
@@ -103,12 +151,9 @@ exports.FootnoteRefHandler = {
     render: (node, _children, ctx) => {
         if (node.id) {
             const idx = ctx.footnoteResolver.getUsedRefById(node.id);
-            return `<sup id="fnref:${idx}"><a href="#fn:${idx}" class="footnote-ref">[${idx}]</a></sup>`;
+            const cls = (0, renderer_utils_1.getClassName)(ctx, node, "footnote-ref");
+            return `<sup id="fnref:${idx}"><a href="#fn:${idx}"${cls ? ` class="${cls}"` : ""}>[${idx}]</a></sup>`;
         }
         return "";
     }
 };
-//Utilities
-function escapeHtml(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}

package/dist/renderers/default/index.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultRenderer = void 0;
 const Handlers = __importStar(require("./handler"));
+const renderer_utils_1 = require("../../utilities/renderer-utils");
 class DefaultRenderer {
     constructor(footnoteResolver, options = {}) {
         this.strategies = new Map();
@@ -95,6 +96,7 @@ class DefaultRenderer {
             return "";
     }
     renderTable(node, children) {
+        const cls = (0, renderer_utils_1.getClassName)(this, node);
         if (node.type === "Table" && node.rows) {
             const header = node.rows.filter(row => row.isHeader);
             const body = node.rows.filter(row => !row.isHeader);
@@ -108,10 +110,10 @@ class DefaultRenderer {
             };
             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>`;
+            return `<table${cls ? ` class="${cls}"` : ""}>${tHead}${tBody}</table>`;
         }
         else
-            return `<p>${children.join("\n")}</p>`;
+            return `<p${cls ? ` class="${cls}"` : ""}>${children.join("\n")}</p>`;
     }
 }
 exports.DefaultRenderer = DefaultRenderer;

package/dist/renderers/react/handler.js

@@ -5,44 +5,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FootnoteRefHandler = exports.HTMLInlineHandler = exports.HTMLBlockHandler = exports.TableHandler = exports.TextHandler = exports.HorizontalLineHandler = exports.ImageHandler = exports.LinkHandler = exports.InlineCodeHandler = exports.StrikethroughHandler = exports.ItalicHandler = exports.BoldHandler = exports.TaskItemHandler = exports.ListItemHandler = exports.ListHandler = exports.QuoteHandler = exports.HeaderHandler = exports.CodeBlockHandler = exports.ParagraphHandler = exports.DocumentHandler = void 0;
 const react_1 = __importDefault(require("react"));
+const renderer_utils_1 = require("../../utilities/renderer-utils");
 //Base structural nodes
 exports.DocumentHandler = {
     type: "Document",
-    render: (_node, children, ctx) => react_1.default.createElement(react_1.default.Fragment, null, ...children, ctx.renderFootnotes())
+    render: (node, children, ctx) => react_1.default.createElement(react_1.default.Fragment, null, ...children, ctx.renderFootnotes())
 };
 exports.ParagraphHandler = {
     type: "Paragraph",
-    render: (_node, children) => react_1.default.createElement("p", null, ...children)
+    render: (node, children, ctx) => react_1.default.createElement("p", { className: (0, renderer_utils_1.getClassName)(ctx, node) }, ...children)
 };
 //Container nodes
 exports.CodeBlockHandler = {
     type: "CodeBlock",
-    render: (node) => react_1.default.createElement("pre", null, react_1.default.createElement("code", { className: `lang-${node.lang}` }, node.content || ""))
+    render: (node, _children, ctx) => react_1.default.createElement("pre", null, react_1.default.createElement("code", { className: (0, renderer_utils_1.getClassName)(ctx, node, `lang-${node.lang}`) }, node.content || ""))
 };
 exports.HeaderHandler = {
     type: "Header",
-    render: (node, children) => {
+    render: (node, children, ctx) => {
         if (!node.level)
             return react_1.default.createElement("p", null, ...children);
-        return react_1.default.createElement(`h${node.level}`, { style: { borderBottom: node.level <= 2 ? "1px solid #d1d9e0b3" : undefined } }, ...children);
+        return react_1.default.createElement(`h${node.level}`, {
+            className: (0, renderer_utils_1.getClassName)(ctx, node),
+            style: { borderBottom: node.level <= 2 ? "1px solid #d1d9e0b3" : undefined }
+        }, ...children);
     }
 };
 exports.QuoteHandler = {
     type: "Quote",
-    render: (_node, children) => react_1.default.createElement("blockquote", { style: { margin: "0", padding: "0 1em", color: "#59636e", borderLeft: ".25em solid #d1d9e0" } }, ...children)
+    render: (node, children, ctx) => react_1.default.createElement("blockquote", {
+        className: (0, renderer_utils_1.getClassName)(ctx, node),
+        style: { margin: "0", padding: "0 1em", color: "#59636e", borderLeft: ".25em solid #d1d9e0" }
+    }, ...children)
 };
 //For list nodes
 exports.ListHandler = {
     type: "List",
-    render: (node, children) => react_1.default.createElement(node.ordered ? "ol" : "ul", null, ...children)
+    render: (node, children, ctx) => react_1.default.createElement(node.ordered ? "ol" : "ul", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
 };
 exports.ListItemHandler = {
     type: "ListItem",
-    render: (_node, children) => react_1.default.createElement("li", null, ...children)
+    render: (node, children, ctx) => react_1.default.createElement("li", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
 };
 exports.TaskItemHandler = {
     type: "TaskItem",
-    render: (node, children) => react_1.default.createElement("li", { style: { listStyleType: "none" } }, react_1.default.createElement("input", {
+    render: (node, children, ctx) => react_1.default.createElement("li", {
+        className: (0, renderer_utils_1.getClassName)(ctx, node),
+        style: { listStyleType: "none" }
+    }, react_1.default.createElement("input", {
         type: "checkbox",
         disabled: true,
         checked: !!node.checked,
@@ -52,28 +62,32 @@ exports.TaskItemHandler = {
 //Styling nodes
 exports.BoldHandler = {
     type: "Bold",
-    render: (_node, children) => react_1.default.createElement("strong", null, ...children)
+    render: (node, children, ctx) => react_1.default.createElement("strong", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
 };
 exports.ItalicHandler = {
     type: "Italic",
-    render: (_node, children) => react_1.default.createElement("em", null, ...children)
+    render: (node, children, ctx) => react_1.default.createElement("em", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
 };
 exports.StrikethroughHandler = {
     type: "Strikethrough",
-    render: (_node, children) => react_1.default.createElement("s", null, ...children)
+    render: (node, children, ctx) => react_1.default.createElement("s", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, ...children)
 };
 exports.InlineCodeHandler = {
     type: "InlineCode",
-    render: (node) => react_1.default.createElement("code", null, node.content || "")
+    render: (node, _children, ctx) => react_1.default.createElement("code", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, node.content || "")
 };
 //Media nodes
 exports.LinkHandler = {
     type: "Link",
-    render: (node) => react_1.default.createElement("a", { href: node.href, target: "_blank", rel: "noopener" }, node.text)
+    render: (node, _children, ctx) => react_1.default.createElement("a", {
+        className: (0, renderer_utils_1.getClassName)(ctx, node),
+        href: node.href, target: "_blank", rel: "noopener"
+    }, node.text)
 };
 exports.ImageHandler = {
     type: "Image",
-    render: (node) => react_1.default.createElement("img", {
+    render: (node, _children, ctx) => react_1.default.createElement("img", {
+        className: (0, renderer_utils_1.getClassName)(ctx, node),
         src: node.src || "",
         alt: node.alt || ""
     })
@@ -81,7 +95,7 @@ exports.ImageHandler = {
 //Leaf nodes
 exports.HorizontalLineHandler = {
     type: "HorizontalLine",
-    render: () => react_1.default.createElement("hr")
+    render: (node, _children, ctx) => react_1.default.createElement("hr", { className: (0, renderer_utils_1.getClassName)(ctx, node), })
 };
 exports.TextHandler = {
     type: "Text",
@@ -98,8 +112,8 @@ exports.HTMLBlockHandler = {
     render: (node, _children, ctx) => {
         const val = node.value || "";
         return ctx.options.converterOptions?.allowDangerousHtml
-            ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: val } })
-            : react_1.default.createElement("code", null, val);
+            ? react_1.default.createElement("div", { className: (0, renderer_utils_1.getClassName)(ctx, node), dangerouslySetInnerHTML: { __html: val } })
+            : react_1.default.createElement("code", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, val);
     }
 };
 exports.HTMLInlineHandler = {
@@ -107,8 +121,8 @@ exports.HTMLInlineHandler = {
     render: (node, _children, ctx) => {
         const val = node.value || "";
         return ctx.options.converterOptions?.allowDangerousHtml
-            ? react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: val } })
-            : react_1.default.createElement("code", null, val);
+            ? react_1.default.createElement("span", { className: (0, renderer_utils_1.getClassName)(ctx, node), dangerouslySetInnerHTML: { __html: val } })
+            : react_1.default.createElement("code", { className: (0, renderer_utils_1.getClassName)(ctx, node), }, val);
     }
 };
 //For footnote
@@ -118,6 +132,9 @@ exports.FootnoteRefHandler = {
         if (!node.id)
             return null;
         const idx = ctx.footnoteResolver.getUsedRefById(node.id);
-        return react_1.default.createElement("sup", { id: `fnref:${idx}` }, react_1.default.createElement("a", { href: `#fn:${idx}`, className: "footnote-ref" }, `[${idx}]`));
+        return react_1.default.createElement("sup", { id: `fnref:${idx}` }, react_1.default.createElement("a", {
+            className: (0, renderer_utils_1.getClassName)(ctx, node, "footnote-ref"),
+            href: `#fn:${idx}`,
+        }, `[${idx}]`));
     }
 };

package/dist/renderers/react/index.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReactRenderer = void 0;
 const react_1 = __importDefault(require("react"));
 const Handlers = __importStar(require("./handler"));
+const renderer_utils_1 = require("../../utilities/renderer-utils");
 class ReactRenderer {
     constructor(footnoteResolver, options = {}) {
         this.strategies = new Map();
@@ -114,10 +115,10 @@ class ReactRenderer {
             const tBody = body.length
                 ? react_1.default.createElement("tbody", null, body.map((row, i) => renderRows(row, i)))
                 : null;
-            return react_1.default.createElement("table", null, tHead, tBody);
+            return react_1.default.createElement("table", { className: (0, renderer_utils_1.getClassName)(this, node), }, tHead, tBody);
         }
         else
-            return react_1.default.createElement("p", null, ...children);
+            return react_1.default.createElement("p", { className: (0, renderer_utils_1.getClassName)(this, node), }, ...children);
     }
 }
 exports.ReactRenderer = ReactRenderer;

package/dist/types/options/renderOptions.d.ts

@@ -1,4 +1,4 @@
-import { ASTNode } from '../parser';
+import { ASTNode, NodeType } from '../parser';
 /**
  * A strategy function type for rendering a specific AST node.
  * @template TOutput - The resulting type after rendered.
@@ -23,8 +23,15 @@ export type GenericRenderElements<TOutput> = {
 /**
  * Options for customizing the rendering process for a specific output type.
  * @template TOutput - The output type.
+ * @property className - Customize classname for one or more ASTNode types.
+ * @property elements - Optional custom rendered for one or more ASTNode types
  */
 export interface RenderOption<TOutput> {
+    /**
+     * Use "Header" for all levels
+     * Use additional "Header1", "Header2"... "Header6" for specific header level
+     */
+    className?: Partial<Record<NodeType | "Header1" | "Header2" | "Header3" | "Header4" | "Header5" | "Header6", string>>;
     elements?: GenericRenderElements<TOutput>;
 }
 /**
@@ -41,7 +48,7 @@ export type DefaultRenderElements = GenericRenderElements<string>;
 export type ReactRenderElements = GenericRenderElements<React.ReactNode>;
 /**
  * Options to customize how AST nodes are renderes into HTML
- * @deprecated Use {@link RenderOption<string>} for generic support.
+ * @deprecated Use {@link RenderOption<string>} instead to use newer options.
  *
  * @property elements - Optional custom rendered for one or more node types
  * @example
@@ -60,7 +67,7 @@ export type DefaultRenderOption = {
 };
 /**
  * Options to customize how AST nodes are renderes into ReactNode elements
- * @deprecated Use {@link RenderOption<React.ReactNode>} for generic support.
+ * @deprecated Use {@link RenderOption<React.ReactNode>} instead to use newer options.
  *
  * @property elements - Optional custom rendered for one or more node types
  * @example

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

@@ -0,0 +1,4 @@
+import { IRenderer } from "../renderers";
+import { ASTNode } from "../types/parser";
+export declare function escapeHtml(str: string): string;
+export declare function getClassName<TOutput>(renderer: IRenderer<TOutput>, node: ASTNode, defaultClass?: string): string | undefined;

package/dist/utilities/renderer-utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.escapeHtml = escapeHtml;
+exports.getClassName = getClassName;
+function escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function getClassName(renderer, node, defaultClass = "") {
+    const { type, level } = node;
+    const classNames = renderer.options.renderOptions?.className;
+    if (!classNames)
+        return defaultClass || undefined;
+    if (type === "Header" && level) {
+        const levelClass = classNames[`Header${level}`];
+        if (levelClass)
+            return `${defaultClass} ${levelClass}`.trim();
+    }
+    const typeClass = classNames[type];
+    return [defaultClass, typeClass].filter(Boolean).join(" ") || undefined;
+}

package/package.json

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