@changerawr/markdown 1.0.5 → 1.1.0

package/dist/react/index.mjs

@@ -9,39 +9,56 @@ var MarkdownParser = class {
   constructor(config) {
     this.rules = [];
     this.warnings = [];
-    this.config = config || {};
+    this.config = {
+      debugMode: false,
+      maxIterations: 1e4,
+      validateMarkdown: false,
+      ...config
+    };
   }
   addRule(rule) {
     this.rules.push(rule);
     this.rules.sort((a, b) => {
-      if (a.name.includes("alert") || a.name.includes("embed") || a.name.includes("button")) return -1;
-      if (b.name.includes("alert") || b.name.includes("embed") || b.name.includes("button")) return 1;
-      if (a.name === "task-list") return -1;
-      if (b.name === "task-list") return 1;
-      if (a.name === "list" && b.name === "task-list") return 1;
-      if (b.name === "list" && a.name === "task-list") return -1;
+      const aFeatureExtension = ["alert", "button", "embed"].includes(a.name);
+      const bFeatureExtension = ["alert", "button", "embed"].includes(b.name);
+      if (aFeatureExtension && !bFeatureExtension) return -1;
+      if (!aFeatureExtension && bFeatureExtension) return 1;
+      const aCoreExtension = ["text", "heading", "bold", "italic", "code", "codeblock", "link", "image", "list", "task-list", "blockquote", "hr", "paragraph", "line-break"].includes(a.name);
+      const bCoreExtension = ["text", "heading", "bold", "italic", "code", "codeblock", "link", "image", "list", "task-list", "blockquote", "hr", "paragraph", "line-break"].includes(b.name);
+      if (aCoreExtension && !bCoreExtension) return -1;
+      if (!aCoreExtension && bCoreExtension) return 1;
+      if (a.name === "image" && b.name === "link") return -1;
+      if (a.name === "link" && b.name === "image") return 1;
+      if (a.name === "task-item" && b.name === "list-item") return -1;
+      if (a.name === "list-item" && b.name === "task-item") return 1;
+      if (a.name === "codeblock" && b.name === "code") return -1;
+      if (a.name === "code" && b.name === "codeblock") return 1;
+      if (a.name === "bold" && b.name === "italic") return -1;
+      if (a.name === "italic" && b.name === "bold") return 1;
       return a.name.localeCompare(b.name);
     });
   }
-  setupDefaultRulesIfEmpty() {
-    const hasDefaultRules = this.rules.some(
-      (rule) => !["alert", "button", "embed"].includes(rule.name)
-    );
-    if (!hasDefaultRules) {
-      this.setupDefaultRules();
-    }
-  }
   hasRule(name) {
     return this.rules.some((rule) => rule.name === name);
   }
   parse(markdown2) {
     this.warnings = [];
-    this.setupDefaultRulesIfEmpty();
+    if (!markdown2.trim()) {
+      return [];
+    }
+    if (this.rules.length === 0) {
+      this.warnings.push("No parse rules registered - consider using CoreExtensions");
+      return [{
+        type: "text",
+        content: markdown2,
+        raw: markdown2
+      }];
+    }
     const processedMarkdown = this.preprocessMarkdown(markdown2);
     const tokens = [];
     let remaining = processedMarkdown;
     let iterationCount = 0;
-    const maxIterations = this.config.maxIterations || markdown2.length * 2;
+    const maxIterations = this.config.maxIterations || 1e4;
     while (remaining.length > 0 && iterationCount < maxIterations) {
       iterationCount++;
       let matched = false;
@@ -130,9 +147,6 @@ var MarkdownParser = class {
   clearWarnings() {
     this.warnings = [];
   }
-  getIterationCount() {
-    return 0;
-  }
   preprocessMarkdown(markdown2) {
     if (this.config.validateMarkdown) {
       this.validateMarkdown(markdown2);
@@ -187,161 +201,6 @@ var MarkdownParser = class {
     }
     return processed;
   }
-  setupDefaultRules() {
-    this.addRule({
-      name: "heading",
-      pattern: /^(#{1,6})\s+(.+)$/m,
-      render: (match) => ({
-        type: "heading",
-        content: match[2]?.trim() || "",
-        raw: match[0] || "",
-        attributes: {
-          level: String(match[1]?.length || 1)
-        }
-      })
-    });
-    this.addRule({
-      name: "codeblock",
-      pattern: /```(\w+)?\s*\n([\s\S]*?)\n```/,
-      render: (match) => ({
-        type: "codeblock",
-        content: match[2] || "",
-        raw: match[0] || "",
-        attributes: {
-          language: match[1] || "text"
-        }
-      })
-    });
-    this.addRule({
-      name: "hard-break-backslash",
-      pattern: /\\\s*\n/,
-      render: (match) => ({
-        type: "line-break",
-        content: "",
-        raw: match[0] || ""
-      })
-    });
-    this.addRule({
-      name: "hard-break-spaces",
-      pattern: /  +\n/,
-      render: (match) => ({
-        type: "line-break",
-        content: "",
-        raw: match[0] || ""
-      })
-    });
-    this.addRule({
-      name: "paragraph-break",
-      pattern: /\n\s*\n/,
-      render: (match) => ({
-        type: "paragraph-break",
-        content: "",
-        raw: match[0] || ""
-      })
-    });
-    this.addRule({
-      name: "bold",
-      pattern: /\*\*((?:(?!\*\*).)+)\*\*/,
-      render: (match) => ({
-        type: "bold",
-        content: match[1] || "",
-        raw: match[0] || ""
-      })
-    });
-    this.addRule({
-      name: "italic",
-      pattern: /\*((?:(?!\*).)+)\*/,
-      render: (match) => ({
-        type: "italic",
-        content: match[1] || "",
-        raw: match[0] || ""
-      })
-    });
-    this.addRule({
-      name: "code",
-      pattern: /`([^`]+)`/,
-      render: (match) => ({
-        type: "code",
-        content: match[1] || "",
-        raw: match[0] || ""
-      })
-    });
-    this.addRule({
-      name: "image",
-      pattern: /!\[([^\]]*)\]\(([^)]+?)(?:\s+"([^"]+)")?\)/,
-      render: (match) => ({
-        type: "image",
-        content: match[1] || "",
-        raw: match[0] || "",
-        attributes: {
-          alt: match[1] || "",
-          src: match[2] || "",
-          title: match[3] || ""
-        }
-      })
-    });
-    this.addRule({
-      name: "link",
-      pattern: /\[([^\]]+)\]\(([^)]+)\)/,
-      render: (match) => ({
-        type: "link",
-        content: match[1] || "",
-        raw: match[0] || "",
-        attributes: {
-          href: match[2] || ""
-        }
-      })
-    });
-    this.addRule({
-      name: "task-list",
-      pattern: /^(\s*)-\s*\[([ xX])\]\s*(.+)$/m,
-      render: (match) => ({
-        type: "task-item",
-        content: match[3] || "",
-        raw: match[0] || "",
-        attributes: {
-          checked: String((match[2] || "").toLowerCase() === "x")
-        }
-      })
-    });
-    this.addRule({
-      name: "list",
-      pattern: /^(\s*)[-*+]\s+(.+)$/m,
-      render: (match) => ({
-        type: "list-item",
-        content: match[2] || "",
-        raw: match[0] || ""
-      })
-    });
-    this.addRule({
-      name: "blockquote",
-      pattern: /^>\s+(.+)$/m,
-      render: (match) => ({
-        type: "blockquote",
-        content: match[1] || "",
-        raw: match[0] || ""
-      })
-    });
-    this.addRule({
-      name: "hr",
-      pattern: /^---$/m,
-      render: (match) => ({
-        type: "hr",
-        content: "",
-        raw: match[0] || ""
-      })
-    });
-    this.addRule({
-      name: "soft-break",
-      pattern: /\n/,
-      render: (match) => ({
-        type: "soft-break",
-        content: " ",
-        // Convert to space for inline text
-        raw: match[0] || ""
-      })
-    });
-  }
 };
 
 // src/utils.ts
@@ -580,7 +439,6 @@ var MarkdownRenderer = class {
       debugMode: false,
       ...config
     };
-    this.setupDefaultRules();
   }
   addRule(rule) {
     this.rules.set(rule.type, rule);
@@ -590,28 +448,20 @@ var MarkdownRenderer = class {
   }
   render(tokens) {
     this.warnings = [];
-    const htmlParts = tokens.map((token) => this.renderToken(token));
+    const tokensWithFormat = tokens.map((token) => ({
+      ...token,
+      attributes: {
+        ...token.attributes,
+        format: this.config.format
+      }
+    }));
+    const htmlParts = tokensWithFormat.map((token) => this.renderToken(token));
     const combinedHtml = htmlParts.join("");
     if (this.config.sanitize && !this.config.allowUnsafeHtml) {
       return sanitizeHtml(combinedHtml);
     }
     return combinedHtml;
   }
-  getWarnings() {
-    return [...this.warnings];
-  }
-  getConfig() {
-    return { ...this.config };
-  }
-  updateConfig(config) {
-    this.config = { ...this.config, ...config };
-  }
-  setDebugMode(enabled) {
-    this.config.debugMode = enabled;
-  }
-  clearWarnings() {
-    this.warnings = [];
-  }
   renderToken(token) {
     const rule = this.rules.get(token.type);
     if (rule) {
@@ -623,9 +473,6 @@ var MarkdownRenderer = class {
         return this.createErrorBlock(`Render error for ${token.type}: ${errorMessage}`);
       }
     }
-    if (token.type === "text") {
-      return escapeHtml(token.content || token.raw || "");
-    }
     if (this.config.debugMode) {
       return this.createDebugBlock(token);
     }
@@ -648,20 +495,239 @@ var MarkdownRenderer = class {
         <strong>Content:</strong> ${escapeHtml(token.content || token.raw || "")}
       </div>`;
     }
-    return `<div class="bg-yellow-100 border border-yellow-300 text-yellow-800 p-2 rounded text-sm mb-2">
-      <strong>Unknown token type:</strong> ${escapeHtml(token.type)}<br>
-      <strong>Content:</strong> ${escapeHtml(token.content || token.raw || "")}
-    </div>`;
-  }
-  setupDefaultRules() {
-    this.addRule({
+    return `<div class="bg-yellow-100 border border-yellow-300 text-yellow-800 p-2 rounded text-sm mb-2">
+      <strong>Unknown token type:</strong> ${escapeHtml(token.type)}<br>
+      <strong>Content:</strong> ${escapeHtml(token.content || token.raw || "")}
+    </div>`;
+  }
+  getWarnings() {
+    return [...this.warnings];
+  }
+  getConfig() {
+    return { ...this.config };
+  }
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+  setDebugMode(enabled) {
+    this.config.debugMode = enabled;
+  }
+  clearWarnings() {
+    this.warnings = [];
+  }
+};
+
+// src/extensions/core/blockquote.ts
+var BlockquoteExtension = {
+  name: "blockquote",
+  parseRules: [
+    {
+      name: "blockquote",
+      pattern: /^>\s+(.+)$/m,
+      render: (match) => ({
+        type: "blockquote",
+        content: match[1] || "",
+        raw: match[0] || ""
+      })
+    }
+  ],
+  renderRules: [
+    {
+      type: "blockquote",
+      render: (token) => {
+        const content = escapeHtml(token.content);
+        const format = token.attributes?.format || "html";
+        if (format === "html") {
+          return `<blockquote style="border-left: 2px solid #d1d5db; padding: 8px 0 8px 16px; margin: 16px 0; font-style: italic; color: #6b7280;">${content}</blockquote>`;
+        }
+        return `<blockquote class="pl-4 py-2 border-l-2 border-border italic text-muted-foreground my-4">${content}</blockquote>`;
+      }
+    }
+  ]
+};
+
+// src/extensions/core/breaks.ts
+var LineBreakExtension = {
+  name: "line-break",
+  parseRules: [
+    {
+      name: "hard-break-backslash",
+      pattern: /\\\s*\n/,
+      render: (match) => ({
+        type: "line-break",
+        content: "",
+        raw: match[0] || ""
+      })
+    },
+    {
+      name: "hard-break-spaces",
+      pattern: /  +\n/,
+      render: (match) => ({
+        type: "line-break",
+        content: "",
+        raw: match[0] || ""
+      })
+    }
+  ],
+  renderRules: [
+    {
+      type: "line-break",
+      render: () => "<br>"
+    },
+    {
+      type: "paragraph-break",
+      render: () => "</p><p>"
+    },
+    {
+      type: "soft-break",
+      render: (token) => token.content || " "
+    }
+  ]
+};
+
+// src/extensions/core/code.ts
+var InlineCodeExtension = {
+  name: "inline-code",
+  parseRules: [
+    {
+      name: "code",
+      pattern: /`([^`]+)`/,
+      render: (match) => ({
+        type: "code",
+        content: match[1] || "",
+        raw: match[0] || ""
+      })
+    }
+  ],
+  renderRules: [
+    {
+      type: "code",
+      render: (token) => {
+        const content = escapeHtml(token.content);
+        const format = token.attributes?.format;
+        if (format === "html") {
+          return `<code style="background-color: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 0.875rem;">${content}</code>`;
+        }
+        return `<code class="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">${content}</code>`;
+      }
+    }
+  ]
+};
+var CodeBlockExtension = {
+  name: "codeblock",
+  parseRules: [
+    {
+      name: "codeblock",
+      pattern: /```(\w+)?\s*\n([\s\S]*?)\n```/,
+      render: (match) => ({
+        type: "codeblock",
+        content: match[2] || "",
+        raw: match[0] || "",
+        attributes: {
+          language: match[1] || "text"
+        }
+      })
+    }
+  ],
+  renderRules: [
+    {
+      type: "codeblock",
+      render: (token) => {
+        const language = token.attributes?.language || "text";
+        const escapedCode = escapeHtml(token.content);
+        const format = token.attributes?.format || "html";
+        if (format === "html") {
+          return `<pre style="background-color: #f3f4f6; padding: 16px; border-radius: 6px; overflow-x: auto; margin: 16px 0;"><code class="language-${escapeHtml(language)}">${escapedCode}</code></pre>`;
+        }
+        return `<pre class="bg-muted p-4 rounded-md overflow-x-auto my-4"><code class="language-${escapeHtml(language)}">${escapedCode}</code></pre>`;
+      }
+    }
+  ]
+};
+
+// src/extensions/core/emphasis.ts
+var BoldExtension = {
+  name: "bold",
+  parseRules: [
+    {
+      name: "bold",
+      pattern: /\*\*((?:(?!\*\*).)+)\*\*/,
+      render: (match) => ({
+        type: "bold",
+        content: match[1] || "",
+        raw: match[0] || ""
+      })
+    }
+  ],
+  renderRules: [
+    {
+      type: "bold",
+      render: (token) => {
+        const content = escapeHtml(token.content);
+        const format = token.attributes?.format;
+        if (format === "html") {
+          return `<strong>${content}</strong>`;
+        }
+        return `<strong class="font-bold">${content}</strong>`;
+      }
+    }
+  ]
+};
+var ItalicExtension = {
+  name: "italic",
+  parseRules: [
+    {
+      name: "italic",
+      pattern: /\*((?:(?!\*).)+)\*/,
+      render: (match) => ({
+        type: "italic",
+        content: match[1] || "",
+        raw: match[0] || ""
+      })
+    }
+  ],
+  renderRules: [
+    {
+      type: "italic",
+      render: (token) => {
+        const content = escapeHtml(token.content);
+        const format = token.attributes?.format;
+        if (format === "html") {
+          return `<em>${content}</em>`;
+        }
+        return `<em class="italic">${content}</em>`;
+      }
+    }
+  ]
+};
+
+// src/extensions/core/heading.ts
+var HeadingExtension = {
+  name: "heading",
+  parseRules: [
+    {
+      name: "heading",
+      pattern: /^(#{1,6})\s+(.+)$/m,
+      render: (match) => ({
+        type: "heading",
+        content: match[2]?.trim() || "",
+        raw: match[0] || "",
+        attributes: {
+          level: String(match[1]?.length || 1)
+        }
+      })
+    }
+  ],
+  renderRules: [
+    {
       type: "heading",
       render: (token) => {
         const level = parseInt(token.attributes?.level || "1");
         const text = token.content;
         const id = generateId(text);
         const escapedContent = escapeHtml(text);
-        if (this.config.format === "html") {
+        const format = token.attributes?.format || "html";
+        if (format === "html") {
           return `<h${level} id="${id}">${escapedContent}</h${level}>`;
         }
         let headingClasses = "group relative flex items-center gap-2";
@@ -688,61 +754,108 @@ var MarkdownRenderer = class {
         return `<h${level} id="${id}" class="${headingClasses}">
           ${escapedContent}
           <a href="#${id}" class="opacity-0 group-hover:opacity-100 text-muted-foreground transition-opacity">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M7.5 4H5.75A3.75 3.75 0 002 7.75v.5a3.75 3.75 0 003.75 3.75h1.5m-1.5-4h3m1.5-4h1.75A3.75 3.75 0 0114 7.75v.5a3.75 3.75 0 01-3.75 3.75H8.5"/>
-            </svg>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+</svg>
           </a>
         </h${level}>`;
       }
-    });
-    this.addRule({
-      type: "bold",
+    }
+  ]
+};
+
+// src/extensions/core/hr.ts
+var HorizontalRuleExtension = {
+  name: "hr",
+  parseRules: [
+    {
+      name: "hr",
+      pattern: /^---$/m,
+      render: (match) => ({
+        type: "hr",
+        content: "",
+        raw: match[0] || ""
+      })
+    }
+  ],
+  renderRules: [
+    {
+      type: "hr",
       render: (token) => {
-        const content = escapeHtml(token.content);
-        if (this.config.format === "html") {
-          return `<strong>${content}</strong>`;
+        const format = token.attributes?.format;
+        if (format === "html") {
+          return '<hr style="margin: 24px 0; border: none; border-top: 1px solid #d1d5db;">';
         }
-        return `<strong class="font-bold">${content}</strong>`;
+        return '<hr class="my-6 border-t border-border">';
       }
-    });
-    this.addRule({
-      type: "italic",
-      render: (token) => {
-        const content = escapeHtml(token.content);
-        if (this.config.format === "html") {
-          return `<em>${content}</em>`;
+    }
+  ]
+};
+
+// src/extensions/core/image.ts
+var ImageExtension = {
+  name: "image",
+  parseRules: [
+    {
+      name: "image",
+      pattern: /!\[([^\]]*)\]\(([^)]+?)(?:\s+"([^"]+)")?\)/,
+      render: (match) => ({
+        type: "image",
+        content: match[1] || "",
+        raw: match[0] || "",
+        attributes: {
+          alt: match[1] || "",
+          src: match[2] || "",
+          title: match[3] || ""
         }
-        return `<em class="italic">${content}</em>`;
-      }
-    });
-    this.addRule({
-      type: "code",
+      })
+    }
+  ],
+  renderRules: [
+    {
+      type: "image",
       render: (token) => {
-        const content = escapeHtml(token.content);
-        if (this.config.format === "html") {
-          return `<code style="background-color: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 0.875rem;">${content}</code>`;
+        const src = token.attributes?.src || "";
+        const alt = token.attributes?.alt || "";
+        const title = token.attributes?.title || "";
+        const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
+        const format = token.attributes?.format || "html";
+        if (format === "html") {
+          return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}"${titleAttr} style="max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0;" loading="lazy" />`;
         }
-        return `<code class="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">${content}</code>`;
+        return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}"${titleAttr} class="max-w-full h-auto rounded-lg my-4" loading="lazy" />`;
       }
-    });
-    this.addRule({
-      type: "codeblock",
-      render: (token) => {
-        const language = token.attributes?.language || "text";
-        const escapedCode = escapeHtml(token.content);
-        if (this.config.format === "html") {
-          return `<pre style="background-color: #f3f4f6; padding: 16px; border-radius: 6px; overflow-x: auto; margin: 16px 0;"><code class="language-${escapeHtml(language)}">${escapedCode}</code></pre>`;
+    }
+  ]
+};
+
+// src/extensions/core/links.ts
+var LinkExtension = {
+  name: "link",
+  parseRules: [
+    {
+      name: "link",
+      pattern: /\[(?!(?:button|embed):)([^\]]+)\]\(([^)]+)\)/,
+      render: (match) => ({
+        type: "link",
+        content: match[1] || "",
+        raw: match[0] || "",
+        attributes: {
+          href: match[2] || ""
         }
-        return `<pre class="bg-muted p-4 rounded-md overflow-x-auto my-4"><code class="language-${escapeHtml(language)}">${escapedCode}</code></pre>`;
-      }
-    });
-    this.addRule({
+      })
+    }
+  ],
+  renderRules: [
+    {
       type: "link",
       render: (token) => {
         const href = token.attributes?.href || "#";
         const escapedHref = escapeHtml(href);
         const escapedText = escapeHtml(token.content);
-        if (this.config.format === "html") {
+        const format = token.attributes?.format || "html";
+        if (format === "html") {
           return `<a href="${escapedHref}" target="_blank" rel="noopener noreferrer">${escapedText}</a>`;
         }
         return `<a href="${escapedHref}" class="text-primary hover:underline inline-flex items-center gap-1" target="_blank" rel="noopener noreferrer">
@@ -754,47 +867,55 @@ var MarkdownRenderer = class {
           </svg>
         </a>`;
       }
-    });
-    this.addRule({
+    }
+  ]
+};
+
+// src/extensions/core/lists.ts
+var ListExtension = {
+  name: "list",
+  parseRules: [
+    {
+      name: "list-item",
+      pattern: /^(\s*)[-*+]\s+(.+)$/m,
+      render: (match) => ({
+        type: "list-item",
+        content: match[2] || "",
+        raw: match[0] || ""
+      })
+    }
+  ],
+  renderRules: [
+    {
       type: "list-item",
       render: (token) => `<li>${escapeHtml(token.content)}</li>`
-    });
-    this.addRule({
-      type: "blockquote",
-      render: (token) => {
-        const content = escapeHtml(token.content);
-        if (this.config.format === "html") {
-          return `<blockquote style="border-left: 2px solid #d1d5db; padding: 8px 0 8px 16px; margin: 16px 0; font-style: italic; color: #6b7280;">${content}</blockquote>`;
-        }
-        return `<blockquote class="pl-4 py-2 border-l-2 border-border italic text-muted-foreground my-4">${content}</blockquote>`;
-      }
-    });
-    this.addRule({
-      type: "text",
-      render: (token) => {
-        if (!token.content) return "";
-        return escapeHtml(token.content);
-      }
-    });
-    this.addRule({
-      type: "paragraph",
-      render: (token) => {
-        if (!token.content) return "";
-        const content = token.content.trim();
-        if (!content) return "";
-        const processedContent = content.includes("<br>") ? content : escapeHtml(content);
-        if (this.config.format === "html") {
-          return `<p style="line-height: 1.75; margin-bottom: 16px;">${processedContent}</p>`;
+    }
+  ]
+};
+var TaskListExtension = {
+  name: "task-list",
+  parseRules: [
+    {
+      name: "task-item",
+      pattern: /^(\s*)-\s*\[([ xX])\]\s*(.+)$/m,
+      render: (match) => ({
+        type: "task-item",
+        content: match[3] || "",
+        raw: match[0] || "",
+        attributes: {
+          checked: String((match[2] || "").toLowerCase() === "x")
         }
-        return `<p class="leading-7 mb-4">${processedContent}</p>`;
-      }
-    });
-    this.addRule({
+      })
+    }
+  ],
+  renderRules: [
+    {
       type: "task-item",
       render: (token) => {
         const isChecked = token.attributes?.checked === "true";
         const escapedContent = escapeHtml(token.content);
-        if (this.config.format === "html") {
+        const format = token.attributes?.format || "html";
+        if (format === "html") {
           return `<div style="display: flex; align-items: center; gap: 8px; margin: 8px 0;">
             <input type="checkbox" ${isChecked ? "checked" : ""} disabled style="margin: 0;" />
             <span${isChecked ? ' style="text-decoration: line-through; color: #6b7280;"' : ""}>${escapedContent}</span>
@@ -806,44 +927,65 @@ var MarkdownRenderer = class {
           <span${isChecked ? ' class="line-through text-muted-foreground"' : ""}>${escapedContent}</span>
         </div>`;
       }
-    });
-    this.addRule({
-      type: "image",
+    }
+  ]
+};
+
+// src/extensions/core/paragraph.ts
+var ParagraphExtension = {
+  name: "paragraph",
+  parseRules: [],
+  renderRules: [
+    {
+      type: "paragraph",
       render: (token) => {
-        const src = token.attributes?.src || "";
-        const alt = token.attributes?.alt || "";
-        const title = token.attributes?.title || "";
-        const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
-        if (this.config.format === "html") {
-          return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}"${titleAttr} style="max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0;" loading="lazy" />`;
+        if (!token.content) return "";
+        const content = token.content.trim();
+        if (!content) return "";
+        const processedContent = content.includes("<br>") ? content : escapeHtml(content);
+        const format = token.attributes?.format || "html";
+        if (format === "html") {
+          return `<p style="line-height: 1.75; margin-bottom: 16px;">${processedContent}</p>`;
         }
-        return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}"${titleAttr} class="max-w-full h-auto rounded-lg my-4" loading="lazy" />`;
+        return `<p class="leading-7 mb-4">${processedContent}</p>`;
       }
-    });
-    this.addRule({
-      type: "hr",
-      render: () => {
-        if (this.config.format === "html") {
-          return '<hr style="margin: 24px 0; border: none; border-top: 1px solid #d1d5db;">';
-        }
-        return '<hr class="my-6 border-t border-border">';
+    }
+  ]
+};
+
+// src/extensions/core/text.ts
+var TextExtension = {
+  name: "text",
+  parseRules: [],
+  renderRules: [
+    {
+      type: "text",
+      render: (token) => {
+        if (!token.content) return "";
+        return escapeHtml(token.content);
       }
-    });
-    this.addRule({
-      type: "line-break",
-      render: () => "<br>"
-    });
-    this.addRule({
-      type: "paragraph-break",
-      render: () => "</p><p>"
-    });
-    this.addRule({
-      type: "soft-break",
-      render: (token) => token.content || " "
-    });
-  }
+    }
+  ]
 };
 
+// src/extensions/core/index.ts
+var CoreExtensions = [
+  TextExtension,
+  HeadingExtension,
+  BoldExtension,
+  ItalicExtension,
+  InlineCodeExtension,
+  CodeBlockExtension,
+  LinkExtension,
+  ImageExtension,
+  ListExtension,
+  TaskListExtension,
+  BlockquoteExtension,
+  HorizontalRuleExtension,
+  ParagraphExtension,
+  LineBreakExtension
+];
+
 // src/extensions/alert.ts
 var AlertExtension = {
   name: "alert",
@@ -923,26 +1065,19 @@ var ButtonExtension = {
       name: "button",
       pattern: /\[button:([^\]]+)\]\(([^)]+)\)(?:\{([^}]+)\})?/,
       render: (match) => {
-        const text = match[1] || "";
-        const href = match[2] || "";
-        const optionsString = match[3] || "";
-        const options = optionsString.split(",").map((opt) => opt.trim()).filter(Boolean);
-        const styleOptions = ["default", "primary", "secondary", "success", "danger", "outline", "ghost"];
-        const style = options.find((opt) => styleOptions.includes(opt)) || "primary";
-        const sizeOptions = ["sm", "md", "lg"];
-        const size = options.find((opt) => sizeOptions.includes(opt)) || "md";
-        const disabled = options.includes("disabled");
-        const target = options.includes("self") ? "_self" : "_blank";
+        const options = match[3] ? match[3].split(",").map((opt) => opt.trim()) : [];
         return {
           type: "button",
-          content: text,
+          content: match[1] || "",
           raw: match[0] || "",
           attributes: {
-            href,
-            style,
-            size,
-            disabled: disabled.toString(),
-            target
+            href: match[2] || "",
+            style: options.find(
+              (opt) => ["default", "primary", "secondary", "success", "danger", "outline", "ghost"].includes(opt)
+            ) || "primary",
+            size: options.find((opt) => ["sm", "md", "lg"].includes(opt)) || "md",
+            disabled: String(options.includes("disabled")),
+            target: options.includes("self") ? "_self" : "_blank"
           }
         };
       }
@@ -957,53 +1092,92 @@ var ButtonExtension = {
         const size = token.attributes?.size || "md";
         const disabled = token.attributes?.disabled === "true";
         const target = token.attributes?.target || "_blank";
-        const text = token.content;
-        const classes = buildButtonClasses(style, size);
+        const baseClasses = `
+                    inline-flex items-center justify-center font-medium rounded-lg 
+                    transition-all duration-200 ease-out
+                    focus:outline-none focus:ring-2 focus:ring-offset-2
+                    disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none
+                    transform hover:scale-[1.02] active:scale-[0.98]
+                    shadow-sm hover:shadow-md active:shadow-sm
+                    border border-transparent
+                    relative overflow-hidden
+                    before:absolute before:inset-0 before:rounded-lg
+                    before:bg-gradient-to-br before:from-white/20 before:to-transparent
+                    before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-200
+                `.replace(/\s+/g, " ").trim();
+        const sizeClasses = {
+          sm: "px-3 py-1.5 text-sm gap-1.5",
+          md: "px-4 py-2 text-base gap-2",
+          lg: "px-6 py-3 text-lg gap-2.5"
+        };
+        const styleClasses = {
+          default: `
+                        bg-slate-600 text-white border-slate-500
+                        hover:bg-slate-700 hover:border-slate-400
+                        focus:ring-slate-500
+                        shadow-[0_1px_0_0_rgba(255,255,255,0.1)_inset,0_1px_2px_0_rgba(0,0,0,0.1)]
+                        hover:shadow-[0_1px_0_0_rgba(255,255,255,0.15)_inset,0_2px_4px_0_rgba(0,0,0,0.15)]
+                    `,
+          primary: `
+                        bg-blue-600 text-white border-blue-500
+                        hover:bg-blue-700 hover:border-blue-400
+                        focus:ring-blue-500
+                        shadow-[0_1px_0_0_rgba(255,255,255,0.1)_inset,0_1px_2px_0_rgba(0,0,0,0.1)]
+                        hover:shadow-[0_1px_0_0_rgba(255,255,255,0.15)_inset,0_2px_4px_0_rgba(0,0,0,0.15)]
+                    `,
+          secondary: `
+                        bg-gray-600 text-white border-gray-500
+                        hover:bg-gray-700 hover:border-gray-400
+                        focus:ring-gray-500
+                        shadow-[0_1px_0_0_rgba(255,255,255,0.1)_inset,0_1px_2px_0_rgba(0,0,0,0.1)]
+                        hover:shadow-[0_1px_0_0_rgba(255,255,255,0.15)_inset,0_2px_4px_0_rgba(0,0,0,0.15)]
+                    `,
+          success: `
+                        bg-green-600 text-white border-green-500
+                        hover:bg-green-700 hover:border-green-400
+                        focus:ring-green-500
+                        shadow-[0_1px_0_0_rgba(255,255,255,0.1)_inset,0_1px_2px_0_rgba(0,0,0,0.1)]
+                        hover:shadow-[0_1px_0_0_rgba(255,255,255,0.15)_inset,0_2px_4px_0_rgba(0,0,0,0.15)]
+                    `,
+          danger: `
+                        bg-red-600 text-white border-red-500
+                        hover:bg-red-700 hover:border-red-400
+                        focus:ring-red-500
+                        shadow-[0_1px_0_0_rgba(255,255,255,0.1)_inset,0_1px_2px_0_rgba(0,0,0,0.1)]
+                        hover:shadow-[0_1px_0_0_rgba(255,255,255,0.15)_inset,0_2px_4px_0_rgba(0,0,0,0.15)]
+                    `,
+          outline: `
+                        bg-transparent text-blue-600 border-blue-600
+                        hover:bg-blue-50 hover:border-blue-700 hover:text-blue-700
+                        focus:ring-blue-500
+                        shadow-[0_0_0_1px_rgba(59,130,246,0.5)_inset]
+                        hover:shadow-[0_0_0_1px_rgba(29,78,216,0.6)_inset,0_1px_2px_0_rgba(0,0,0,0.05)]
+                    `,
+          ghost: `
+                        bg-transparent text-gray-700 border-transparent
+                        hover:bg-gray-100 hover:text-gray-900
+                        focus:ring-gray-500
+                        shadow-none
+                        hover:shadow-[0_1px_2px_0_rgba(0,0,0,0.05)]
+                    `
+        };
+        const classes = `
+                    ${baseClasses}
+                    ${sizeClasses[size] || sizeClasses.md}
+                    ${styleClasses[style] || styleClasses.primary}
+                `.replace(/\s+/g, " ").trim();
         const targetAttr = target === "_blank" ? ' target="_blank" rel="noopener noreferrer"' : target === "_self" ? ' target="_self"' : "";
         const disabledAttr = disabled ? ' aria-disabled="true" tabindex="-1"' : "";
-        const externalIcon = target === "_blank" && !disabled ? '<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>' : "";
+        const externalIcon = target === "_blank" && !disabled ? `<svg class="w-4 h-4 ml-1 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                    </svg>` : "";
         return `<a href="${href}" class="${classes}"${targetAttr}${disabledAttr}>
-          ${text}${externalIcon}
-        </a>`;
+                    <span class="relative z-10">${token.content}</span>${externalIcon}
+                </a>`;
       }
     }
   ]
 };
-function buildButtonClasses(style, size) {
-  const base = [
-    "inline-flex",
-    "items-center",
-    "justify-center",
-    "font-medium",
-    "rounded-lg",
-    "transition-colors",
-    "focus:outline-none",
-    "focus:ring-2",
-    "focus:ring-offset-2",
-    "disabled:opacity-50",
-    "disabled:cursor-not-allowed"
-  ];
-  const sizes = {
-    sm: ["px-3", "py-1.5", "text-sm"],
-    md: ["px-4", "py-2", "text-base"],
-    lg: ["px-6", "py-3", "text-lg"]
-  };
-  const styles = {
-    default: ["bg-slate-600", "text-white", "hover:bg-slate-700", "focus:ring-slate-500"],
-    primary: ["bg-blue-600", "text-white", "hover:bg-blue-700", "focus:ring-blue-500"],
-    secondary: ["bg-gray-600", "text-white", "hover:bg-gray-700", "focus:ring-gray-500"],
-    success: ["bg-green-600", "text-white", "hover:bg-green-700", "focus:ring-green-500"],
-    danger: ["bg-red-600", "text-white", "hover:bg-red-700", "focus:ring-red-500"],
-    outline: ["border", "border-blue-600", "text-blue-600", "hover:bg-blue-50", "focus:ring-blue-500"],
-    ghost: ["text-gray-700", "hover:bg-gray-100", "focus:ring-gray-500"]
-  };
-  const allClasses = [
-    ...base,
-    ...sizes[size] ?? sizes.md ?? [],
-    ...styles[style] ?? styles.primary ?? []
-  ];
-  return allClasses.join(" ");
-}
 
 // src/extensions/embed.ts
 var EmbedExtension = {
@@ -1081,8 +1255,7 @@ function renderYouTubeEmbed(url, options, classes) {
   params.set("rel", "0");
   params.set("modestbranding", "1");
   const embedUrl = `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
       <iframe 
         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
@@ -1110,8 +1283,7 @@ function renderCodePenEmbed(url, options, classes) {
     "editable": "true"
   });
   const embedUrl = `https://codepen.io/${user}/embed/${penId}?${embedParams.toString()}`;
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <iframe 
       height="${height}" 
       style="width: 100%; border: 0;" 
@@ -1135,8 +1307,7 @@ function renderVimeoEmbed(url, options, classes) {
   if (options.mute === "1") params.set("muted", "1");
   if (options.loop === "1") params.set("loop", "1");
   const embedUrl = `https://player.vimeo.com/video/${videoId}?${params.toString()}`;
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
       <iframe 
         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
@@ -1152,8 +1323,7 @@ function renderVimeoEmbed(url, options, classes) {
 function renderSpotifyEmbed(url, options, classes) {
   const embedUrl = url.replace("open.spotify.com", "open.spotify.com/embed");
   const height = options.height || "380";
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <iframe 
       style="border-radius: 12px;" 
       src="${embedUrl}" 
@@ -1176,8 +1346,7 @@ function renderCodeSandboxEmbed(url, options, classes) {
   if (!embedUrl.includes("?")) {
     embedUrl += `?view=${view}`;
   }
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <iframe 
       src="${embedUrl}"
       style="width: 100%; height: ${height}px; border: 0; border-radius: 4px; overflow: hidden;"
@@ -1190,8 +1359,7 @@ function renderCodeSandboxEmbed(url, options, classes) {
 function renderFigmaEmbed(url, options, classes) {
   const embedUrl = `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(url)}`;
   const height = options.height || "450";
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <iframe 
       style="border: none;" 
       width="100%" 
@@ -1202,8 +1370,7 @@ function renderFigmaEmbed(url, options, classes) {
   </div>`;
 }
 function renderTwitterEmbed(url, _options, classes) {
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <div class="p-4">
       <div class="flex items-center gap-3 mb-3">
         <svg class="w-6 h-6 fill-current text-blue-500" viewBox="0 0 24 24">
@@ -1231,8 +1398,7 @@ function renderGitHubEmbed(url, _options, classes) {
   if (!owner || !repo) {
     return createErrorEmbed("Invalid GitHub URL", url, classes);
   }
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <div class="p-4">
       <div class="flex items-center gap-3 mb-3">
         <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
@@ -1255,8 +1421,7 @@ function renderGitHubEmbed(url, _options, classes) {
 }
 function renderGenericEmbed(url, _options, classes) {
   const domain = extractDomain(url);
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <div class="p-4">
       <div class="flex items-center gap-3 mb-3">
         <div class="w-10 h-10 rounded-lg bg-muted flex items-center justify-center">
@@ -1280,8 +1445,7 @@ function renderGenericEmbed(url, _options, classes) {
   </div>`;
 }
 function createErrorEmbed(error, url, classes) {
-  return `
-  <div class="${classes}">
+  return `<div class="${classes}">
     <div class="p-4 text-destructive">
       <div class="font-medium flex items-center gap-2">
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1315,19 +1479,54 @@ var ChangerawrMarkdown = class {
     this.extensions = /* @__PURE__ */ new Map();
     this.parser = new MarkdownParser(config?.parser);
     this.renderer = new MarkdownRenderer(config?.renderer);
-    this.registerBuiltInExtensions();
+    this.registerCoreExtensions();
+    this.registerFeatureExtensions();
     if (config?.extensions) {
       config.extensions.forEach((extension) => {
         this.registerExtension(extension);
       });
     }
-    this.parser.setupDefaultRulesIfEmpty();
   }
-  /**
-   * Register a custom extension
-   */
+  registerFeatureExtensions() {
+    this.registerExtension(AlertExtension);
+    this.registerExtension(ButtonExtension);
+    this.registerExtension(EmbedExtension);
+  }
+  registerCoreExtensions() {
+    CoreExtensions.forEach((extension) => {
+      this.registerExtension(extension);
+    });
+  }
   registerExtension(extension) {
     try {
+      if (!extension.name || typeof extension.name !== "string") {
+        throw new Error("Extension must have a valid name");
+      }
+      if (!Array.isArray(extension.parseRules)) {
+        throw new Error("Extension must have parseRules array");
+      }
+      if (!Array.isArray(extension.renderRules)) {
+        throw new Error("Extension must have renderRules array");
+      }
+      extension.parseRules.forEach((rule, index) => {
+        if (!rule.name || typeof rule.name !== "string") {
+          throw new Error(`Parse rule ${index} must have a valid name`);
+        }
+        if (!rule.pattern || !(rule.pattern instanceof RegExp)) {
+          throw new Error(`Parse rule ${index} must have a valid RegExp pattern`);
+        }
+        if (!rule.render || typeof rule.render !== "function") {
+          throw new Error(`Parse rule ${index} must have a valid render function`);
+        }
+      });
+      extension.renderRules.forEach((rule, index) => {
+        if (!rule.type || typeof rule.type !== "string") {
+          throw new Error(`Render rule ${index} must have a valid type`);
+        }
+        if (!rule.render || typeof rule.render !== "function") {
+          throw new Error(`Render rule ${index} must have a valid render function`);
+        }
+      });
       this.extensions.set(extension.name, extension);
       extension.parseRules.forEach((rule) => {
         this.parser.addRule(rule);
@@ -1348,9 +1547,6 @@ var ChangerawrMarkdown = class {
       };
     }
   }
-  /**
-   * Unregister an extension
-   */
   unregisterExtension(name) {
     const extension = this.extensions.get(name);
     if (!extension) {
@@ -1364,46 +1560,25 @@ var ChangerawrMarkdown = class {
       return false;
     }
   }
-  /**
-   * Parse markdown content into tokens
-   */
   parse(markdown2) {
     return this.parser.parse(markdown2);
   }
-  /**
-   * Render tokens to HTML
-   */
   render(tokens) {
     return this.renderer.render(tokens);
   }
-  /**
-   * Parse and render markdown to HTML in one step
-   */
   toHtml(markdown2) {
     const tokens = this.parse(markdown2);
     return this.render(tokens);
   }
-  /**
-   * Get list of registered extensions
-   */
   getExtensions() {
     return Array.from(this.extensions.keys());
   }
-  /**
-   * Check if extension is registered
-   */
   hasExtension(name) {
     return this.extensions.has(name);
   }
-  /**
-   * Get parser warnings
-   */
   getWarnings() {
     return [...this.parser.getWarnings(), ...this.renderer.getWarnings()];
   }
-  /**
-   * Get debug information from last render
-   */
   getDebugInfo() {
     return {
       warnings: this.getWarnings(),
@@ -1413,9 +1588,6 @@ var ChangerawrMarkdown = class {
       iterationCount: 0
     };
   }
-  /**
-   * Get performance metrics for the last operation
-   */
   getPerformanceMetrics() {
     return {
       parseTime: 0,
@@ -1424,28 +1596,29 @@ var ChangerawrMarkdown = class {
       tokenCount: 0
     };
   }
-  /**
-   * Register built-in extensions
-   */
-  registerBuiltInExtensions() {
-    this.registerExtension(AlertExtension);
-    this.registerExtension(ButtonExtension);
-    this.registerExtension(EmbedExtension);
-  }
-  /**
-   * Rebuild parser and renderer with current extensions
-   */
   rebuildParserAndRenderer() {
     const parserConfig = this.parser.getConfig();
     const rendererConfig = this.renderer.getConfig();
     this.parser = new MarkdownParser(parserConfig);
     this.renderer = new MarkdownRenderer(rendererConfig);
     const extensionsToRegister = Array.from(this.extensions.values());
-    this.extensions.clear();
-    extensionsToRegister.forEach((extension) => {
-      this.registerExtension(extension);
+    const featureExtensions = extensionsToRegister.filter(
+      (ext) => ["alert", "button", "embed"].includes(ext.name)
+    );
+    const coreExtensions = extensionsToRegister.filter(
+      (ext) => ["text", "heading", "bold", "italic", "code", "codeblock", "link", "image", "list", "task-list", "blockquote", "hr", "paragraph", "line-break"].includes(ext.name)
+    );
+    const customExtensions = extensionsToRegister.filter(
+      (ext) => !["alert", "button", "embed", "text", "heading", "bold", "italic", "code", "codeblock", "link", "image", "list", "task-list", "blockquote", "hr", "paragraph", "line-break"].includes(ext.name)
+    );
+    [...featureExtensions, ...coreExtensions, ...customExtensions].forEach((extension) => {
+      extension.parseRules.forEach((rule) => {
+        this.parser.addRule(rule);
+      });
+      extension.renderRules.forEach((rule) => {
+        this.renderer.addRule(rule);
+      });
     });
-    this.parser.setupDefaultRulesIfEmpty();
   }
 };
 var markdown = new ChangerawrMarkdown();