@changerawr/markdown 1.0.0

package/dist/react/index.mjs

@@ -0,0 +1,1752 @@
+"use client";
+
+// src/react/MarkdownRenderer.tsx
+import React, { useMemo as useMemo2, useEffect as useEffect2 } from "react";
+
+// src/react/hooks.ts
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+
+// src/parser.ts
+var MarkdownParser = class {
+  constructor(config) {
+    this.rules = [];
+    this.warnings = [];
+    this.config = 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;
+      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();
+    const processedMarkdown = this.preprocessMarkdown(markdown2);
+    const tokens = [];
+    let remaining = processedMarkdown;
+    let iterationCount = 0;
+    const maxIterations = this.config.maxIterations || markdown2.length * 2;
+    while (remaining.length > 0 && iterationCount < maxIterations) {
+      iterationCount++;
+      let matched = false;
+      let bestMatch = null;
+      for (const rule of this.rules) {
+        try {
+          const pattern = new RegExp(rule.pattern.source, rule.pattern.flags.replace("g", ""));
+          const match = remaining.match(pattern);
+          if (match && match.index !== void 0) {
+            const priority = match.index === 0 ? 1e3 : 1e3 - match.index;
+            if (!bestMatch || priority > bestMatch.priority || priority === bestMatch.priority && match.index < (bestMatch.match.index || 0)) {
+              bestMatch = { rule, match, priority };
+            }
+          }
+        } catch (error) {
+          if (this.config.debugMode) {
+            console.warn(`Error in rule "${rule.name}":`, error);
+          }
+        }
+      }
+      if (bestMatch && bestMatch.match.index !== void 0) {
+        const { rule, match } = bestMatch;
+        const matchIndex = match.index;
+        if (matchIndex > 0) {
+          const textBefore = remaining.slice(0, matchIndex);
+          tokens.push({
+            type: "text",
+            content: textBefore,
+            raw: textBefore
+          });
+          remaining = remaining.slice(matchIndex);
+          continue;
+        }
+        try {
+          const token = rule.render(match);
+          tokens.push({
+            ...token,
+            raw: match[0] || ""
+          });
+          remaining = remaining.slice(match[0]?.length || 0);
+          matched = true;
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          this.warnings.push(`Failed to render ${rule.name}: ${errorMessage}`);
+          const char = remaining[0];
+          if (char) {
+            tokens.push({
+              type: "text",
+              content: char,
+              raw: char
+            });
+            remaining = remaining.slice(1);
+          }
+        }
+      }
+      if (!matched) {
+        const char = remaining[0];
+        if (char) {
+          tokens.push({
+            type: "text",
+            content: char,
+            raw: char
+          });
+          remaining = remaining.slice(1);
+        }
+      }
+    }
+    if (iterationCount >= maxIterations) {
+      this.warnings.push("Parser hit maximum iterations - possible infinite loop detected");
+    }
+    const processedTokens = this.postProcessTokens(tokens);
+    return processedTokens;
+  }
+  getWarnings() {
+    return [...this.warnings];
+  }
+  getConfig() {
+    return { ...this.config };
+  }
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+  setDebugMode(enabled) {
+    this.config.debugMode = enabled;
+  }
+  clearWarnings() {
+    this.warnings = [];
+  }
+  getIterationCount() {
+    return 0;
+  }
+  preprocessMarkdown(markdown2) {
+    if (this.config.validateMarkdown) {
+      this.validateMarkdown(markdown2);
+    }
+    return markdown2.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  }
+  validateMarkdown(markdown2) {
+    const boldMatches = markdown2.match(/\*\*/g);
+    if (boldMatches && boldMatches.length % 2 !== 0) {
+      this.warnings.push("Unclosed bold markers (**) detected - some bold formatting may not work");
+    }
+    const italicMatches = markdown2.match(/(?<!\*)\*(?!\*)/g);
+    if (italicMatches && italicMatches.length % 2 !== 0) {
+      this.warnings.push("Unclosed italic markers (*) detected - some italic formatting may not work");
+    }
+    const codeBlockMatches = markdown2.match(/```/g);
+    if (codeBlockMatches && codeBlockMatches.length % 2 !== 0) {
+      this.warnings.push("Unclosed code blocks (```) detected - some code formatting may not work");
+    }
+    const inlineCodeMatches = markdown2.match(/`/g);
+    if (inlineCodeMatches && inlineCodeMatches.length % 2 !== 0) {
+      this.warnings.push("Unclosed inline code markers (`) detected - some code formatting may not work");
+    }
+  }
+  postProcessTokens(tokens) {
+    const processed = [];
+    let i = 0;
+    while (i < tokens.length) {
+      const token = tokens[i];
+      if (token && token.type === "text") {
+        let textContent = token.content || token.raw || "";
+        let j = i + 1;
+        while (j < tokens.length && tokens[j] && tokens[j].type === "text") {
+          const nextToken = tokens[j];
+          textContent += nextToken.content || nextToken.raw || "";
+          j++;
+        }
+        if (textContent.trim().length > 0 || textContent.includes("\n")) {
+          processed.push({
+            type: "text",
+            content: textContent,
+            raw: textContent
+          });
+        }
+        i = j;
+      } else if (token) {
+        processed.push(token);
+        i++;
+      } else {
+        i++;
+      }
+    }
+    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
+var DOMPurify = {
+  sanitize: (html) => html
+};
+if (typeof window !== "undefined") {
+  import("dompurify").then((module) => {
+    DOMPurify = module.default;
+  }).catch((err) => {
+    console.error("Failed to load DOMPurify", err);
+  });
+}
+var ALLOWED_TAGS = [
+  // Standard HTML
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "br",
+  "strong",
+  "em",
+  "del",
+  "ins",
+  "a",
+  "img",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "code",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "div",
+  "span",
+  "sup",
+  "sub",
+  "hr",
+  "input",
+  // Embeds
+  "iframe",
+  "embed",
+  "object",
+  "param",
+  "video",
+  "audio",
+  "source",
+  // SVG
+  "svg",
+  "path",
+  "polyline",
+  "line",
+  "circle",
+  "rect",
+  "g",
+  "defs",
+  "use",
+  // Form elements
+  "form",
+  "fieldset",
+  "legend",
+  "label",
+  "select",
+  "option",
+  "textarea",
+  "button"
+];
+var ALLOWED_ATTR = [
+  // Standard attributes
+  "href",
+  "title",
+  "alt",
+  "src",
+  "class",
+  "id",
+  "target",
+  "rel",
+  "type",
+  "checked",
+  "disabled",
+  "loading",
+  "width",
+  "height",
+  "style",
+  "role",
+  // Iframe attributes
+  "frameborder",
+  "allowfullscreen",
+  "allow",
+  "sandbox",
+  "scrolling",
+  "allowtransparency",
+  "name",
+  "seamless",
+  "srcdoc",
+  // Data attributes (for embeds)
+  "data-*",
+  // SVG attributes
+  "viewBox",
+  "fill",
+  "stroke",
+  "stroke-width",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "d",
+  "points",
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "cx",
+  "cy",
+  "r",
+  "rx",
+  "ry",
+  // Media attributes
+  "autoplay",
+  "controls",
+  "loop",
+  "muted",
+  "preload",
+  "poster",
+  // Form attributes
+  "value",
+  "placeholder",
+  "required",
+  "readonly",
+  "maxlength",
+  "minlength",
+  "max",
+  "min",
+  "step",
+  "pattern",
+  "autocomplete",
+  "autofocus"
+];
+function escapeHtml(text) {
+  const map = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  };
+  return text.replace(/[&<>"']/g, (char) => map[char] || char);
+}
+function generateId(text) {
+  return text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").trim();
+}
+function sanitizeHtml(html) {
+  try {
+    if (html.includes("codepen.io/") || html.includes("youtube.com/embed/")) {
+      return html;
+    }
+    if (typeof DOMPurify?.sanitize === "function") {
+      const sanitized = DOMPurify.sanitize(html, {
+        ALLOWED_TAGS,
+        ALLOWED_ATTR,
+        ALLOW_DATA_ATTR: true,
+        ALLOW_UNKNOWN_PROTOCOLS: false,
+        SAFE_FOR_TEMPLATES: false,
+        WHOLE_DOCUMENT: false,
+        RETURN_DOM: false,
+        RETURN_DOM_FRAGMENT: false,
+        FORCE_BODY: false,
+        SANITIZE_DOM: false,
+        SANITIZE_NAMED_PROPS: false,
+        FORBID_ATTR: ["onload", "onerror", "onclick", "onmouseover", "onmouseout", "onfocus", "onblur"],
+        ADD_TAGS: ["iframe", "embed", "object", "param"],
+        ADD_ATTR: [
+          "allow",
+          "allowfullscreen",
+          "frameborder",
+          "scrolling",
+          "allowtransparency",
+          "sandbox",
+          "loading",
+          "style",
+          "title",
+          "name",
+          "seamless",
+          "srcdoc"
+        ],
+        ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|xxx):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
+      });
+      if (sanitized.length < html.length * 0.7) {
+        return basicSanitize(html);
+      }
+      return sanitized;
+    }
+    return basicSanitize(html);
+  } catch (error) {
+    console.error("Sanitization failed:", error);
+    return basicSanitize(html);
+  }
+}
+function basicSanitize(html) {
+  return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").replace(/on\w+\s*=\s*"[^"]*"/gi, "").replace(/on\w+\s*=\s*'[^']*'/gi, "").replace(/javascript:/gi, "");
+}
+function extractDomain(url) {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+}
+function parseOptions(options) {
+  const parsed = {};
+  if (!options) return parsed;
+  options.split(",").forEach((option) => {
+    const [key, value] = option.split(":").map((s) => s.trim());
+    if (key && value) {
+      parsed[key] = value;
+    }
+  });
+  return parsed;
+}
+
+// src/renderer.ts
+var MarkdownRenderer = class {
+  constructor(config) {
+    this.rules = /* @__PURE__ */ new Map();
+    this.warnings = [];
+    this.config = {
+      format: "tailwind",
+      sanitize: true,
+      allowUnsafeHtml: false,
+      debugMode: false,
+      ...config
+    };
+    this.setupDefaultRules();
+  }
+  addRule(rule) {
+    this.rules.set(rule.type, rule);
+  }
+  hasRule(type) {
+    return this.rules.has(type);
+  }
+  render(tokens) {
+    this.warnings = [];
+    const htmlParts = tokens.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) {
+      try {
+        return rule.render(token);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        this.warnings.push(`Render error for ${token.type}: ${errorMessage}`);
+        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);
+    }
+    return escapeHtml(token.content || token.raw || "");
+  }
+  createErrorBlock(message) {
+    if (this.config.format === "html") {
+      return `<div style="background-color: #fee; border: 1px solid #fcc; color: #c66; padding: 8px; border-radius: 4px; margin: 8px 0; font-size: 14px;">
+        <strong>Render Error:</strong> ${escapeHtml(message)}
+      </div>`;
+    }
+    return `<div class="bg-red-100 border border-red-300 text-red-800 p-2 rounded text-sm mb-2">
+      <strong>Render Error:</strong> ${escapeHtml(message)}
+    </div>`;
+  }
+  createDebugBlock(token) {
+    if (this.config.format === "html") {
+      return `<div style="background-color: #fffbf0; border: 1px solid #fed; color: #b8860b; padding: 8px; border-radius: 4px; margin: 8px 0; font-size: 14px;">
+        <strong>Unknown token type:</strong> ${escapeHtml(token.type)}<br>
+        <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({
+      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") {
+          return `<h${level} id="${id}">${escapedContent}</h${level}>`;
+        }
+        let headingClasses = "group relative flex items-center gap-2";
+        switch (level) {
+          case 1:
+            headingClasses += " text-3xl font-bold mt-8 mb-4";
+            break;
+          case 2:
+            headingClasses += " text-2xl font-semibold mt-6 mb-3";
+            break;
+          case 3:
+            headingClasses += " text-xl font-medium mt-5 mb-3";
+            break;
+          case 4:
+            headingClasses += " text-lg font-medium mt-4 mb-2";
+            break;
+          case 5:
+            headingClasses += " text-base font-medium mt-3 mb-2";
+            break;
+          case 6:
+            headingClasses += " text-sm font-medium mt-3 mb-2";
+            break;
+        }
+        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>
+          </a>
+        </h${level}>`;
+      }
+    });
+    this.addRule({
+      type: "bold",
+      render: (token) => {
+        const content = escapeHtml(token.content);
+        if (this.config.format === "html") {
+          return `<strong>${content}</strong>`;
+        }
+        return `<strong class="font-bold">${content}</strong>`;
+      }
+    });
+    this.addRule({
+      type: "italic",
+      render: (token) => {
+        const content = escapeHtml(token.content);
+        if (this.config.format === "html") {
+          return `<em>${content}</em>`;
+        }
+        return `<em class="italic">${content}</em>`;
+      }
+    });
+    this.addRule({
+      type: "code",
+      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>`;
+        }
+        return `<code class="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">${content}</code>`;
+      }
+    });
+    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>`;
+        }
+        return `<pre class="bg-muted p-4 rounded-md overflow-x-auto my-4"><code class="language-${escapeHtml(language)}">${escapedCode}</code></pre>`;
+      }
+    });
+    this.addRule({
+      type: "link",
+      render: (token) => {
+        const href = token.attributes?.href || "#";
+        const escapedHref = escapeHtml(href);
+        const escapedText = escapeHtml(token.content);
+        if (this.config.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">
+          ${escapedText}
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link">
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+            <polyline points="15 3 21 3 21 9"></polyline>
+            <line x1="10" y1="14" x2="21" y2="3"></line>
+          </svg>
+        </a>`;
+      }
+    });
+    this.addRule({
+      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>`;
+        }
+        return `<p class="leading-7 mb-4">${processedContent}</p>`;
+      }
+    });
+    this.addRule({
+      type: "task-item",
+      render: (token) => {
+        const isChecked = token.attributes?.checked === "true";
+        const escapedContent = escapeHtml(token.content);
+        if (this.config.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>
+          </div>`;
+        }
+        return `<div class="flex items-center gap-2 my-2 task-list-item">
+          <input type="checkbox" ${isChecked ? "checked" : ""} disabled 
+            class="form-checkbox h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" />
+          <span${isChecked ? ' class="line-through text-muted-foreground"' : ""}>${escapedContent}</span>
+        </div>`;
+      }
+    });
+    this.addRule({
+      type: "image",
+      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" />`;
+        }
+        return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}"${titleAttr} class="max-w-full h-auto rounded-lg my-4" loading="lazy" />`;
+      }
+    });
+    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">';
+      }
+    });
+    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/alert.ts
+var AlertExtension = {
+  name: "alert",
+  parseRules: [
+    {
+      name: "alert",
+      pattern: /:::(\w+)(?:\s+(.*?))?\s*\n([\s\S]*?)\n:::/,
+      render: (match) => {
+        return {
+          type: "alert",
+          content: match[3]?.trim() || "",
+          raw: match[0] || "",
+          attributes: {
+            type: match[1] || "info",
+            title: match[2] || ""
+          }
+        };
+      }
+    }
+  ],
+  renderRules: [
+    {
+      type: "alert",
+      render: (token) => {
+        const type = token.attributes?.type || "info";
+        const title = token.attributes?.title || "";
+        const typeConfig = {
+          info: {
+            icon: "\u2139\uFE0F",
+            classes: "bg-blue-500/10 border-blue-500/30 text-blue-600 border-l-blue-500"
+          },
+          warning: {
+            icon: "\u26A0\uFE0F",
+            classes: "bg-amber-500/10 border-amber-500/30 text-amber-600 border-l-amber-500"
+          },
+          error: {
+            icon: "\u274C",
+            classes: "bg-red-500/10 border-red-500/30 text-red-600 border-l-red-500"
+          },
+          success: {
+            icon: "\u2705",
+            classes: "bg-green-500/10 border-green-500/30 text-green-600 border-l-green-500"
+          },
+          tip: {
+            icon: "\u{1F4A1}",
+            classes: "bg-purple-500/10 border-purple-500/30 text-purple-600 border-l-purple-500"
+          },
+          note: {
+            icon: "\u{1F4DD}",
+            classes: "bg-gray-500/10 border-gray-500/30 text-gray-600 border-l-gray-500"
+          }
+        };
+        const config = typeConfig[type] || typeConfig.info;
+        const baseClasses = "border-l-4 p-4 mb-4 rounded-md transition-colors duration-200";
+        const classes = `${baseClasses} ${config?.classes}`;
+        const titleHtml = title ? `<div class="font-medium mb-2 flex items-center gap-2">
+               <span class="text-lg" role="img" aria-label="${type}">${config?.icon}</span>
+               <span>${title}</span>
+             </div>` : `<div class="font-medium mb-2 flex items-center gap-2">
+               <span class="text-lg" role="img" aria-label="${type}">${config?.icon}</span>
+               <span>${type.charAt(0).toUpperCase() + type.slice(1)}</span>
+             </div>`;
+        return `<div class="${classes}" role="alert" aria-live="polite">
+                  ${titleHtml}
+                  <div class="leading-relaxed">${token.content}</div>
+                </div>`;
+      }
+    }
+  ]
+};
+
+// src/extensions/button.ts
+var ButtonExtension = {
+  name: "button",
+  parseRules: [
+    {
+      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";
+        return {
+          type: "button",
+          content: text,
+          raw: match[0] || "",
+          attributes: {
+            href,
+            style,
+            size,
+            disabled: disabled.toString(),
+            target
+          }
+        };
+      }
+    }
+  ],
+  renderRules: [
+    {
+      type: "button",
+      render: (token) => {
+        const href = token.attributes?.href || "#";
+        const style = token.attributes?.style || "primary";
+        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 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>' : "";
+        return `<a href="${href}" class="${classes}"${targetAttr}${disabledAttr}>
+          ${text}${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 = {
+  name: "embed",
+  parseRules: [
+    {
+      name: "embed",
+      pattern: /\[embed:(\w+)\]\(([^)]+)\)(?:\{([^}]+)\})?/,
+      render: (match) => {
+        return {
+          type: "embed",
+          content: match[2] || "",
+          // URL
+          raw: match[0] || "",
+          attributes: {
+            provider: match[1] || "generic",
+            url: match[2] || "",
+            options: match[3] || ""
+          }
+        };
+      }
+    }
+  ],
+  renderRules: [
+    {
+      type: "embed",
+      render: (token) => {
+        const provider = token.attributes?.provider || "generic";
+        const url = token.attributes?.url || "";
+        const options = token.attributes?.options || "";
+        return renderEmbed(provider, url, options);
+      }
+    }
+  ]
+};
+function renderEmbed(provider, url, options) {
+  const baseClasses = "rounded-lg border bg-card text-card-foreground shadow-sm mb-6 overflow-hidden";
+  const parsedOptions = parseOptions(options);
+  switch (provider.toLowerCase()) {
+    case "youtube":
+      return renderYouTubeEmbed(url, parsedOptions, baseClasses);
+    case "codepen":
+      return renderCodePenEmbed(url, parsedOptions, baseClasses);
+    case "figma":
+      return renderFigmaEmbed(url, parsedOptions, baseClasses);
+    case "twitter":
+    case "tweet":
+      return renderTwitterEmbed(url, parsedOptions, baseClasses);
+    case "github":
+      return renderGitHubEmbed(url, parsedOptions, baseClasses);
+    case "vimeo":
+      return renderVimeoEmbed(url, parsedOptions, baseClasses);
+    case "spotify":
+      return renderSpotifyEmbed(url, parsedOptions, baseClasses);
+    case "codesandbox":
+      return renderCodeSandboxEmbed(url, parsedOptions, baseClasses);
+    default:
+      return renderGenericEmbed(url, parsedOptions, baseClasses);
+  }
+}
+function renderYouTubeEmbed(url, options, classes) {
+  const videoId = extractYouTubeId(url);
+  if (!videoId) {
+    return createErrorEmbed("Invalid YouTube URL", url, classes);
+  }
+  const params = new URLSearchParams();
+  if (options.autoplay === "1") params.set("autoplay", "1");
+  if (options.mute === "1") params.set("mute", "1");
+  if (options.loop === "1") {
+    params.set("loop", "1");
+    params.set("playlist", videoId);
+  }
+  if (options.controls === "0") params.set("controls", "0");
+  if (options.start) params.set("start", options.start);
+  params.set("rel", "0");
+  params.set("modestbranding", "1");
+  const embedUrl = `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
+  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;"
+        src="${embedUrl}" 
+        title="YouTube video player"
+        frameborder="0" 
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen>
+      </iframe>
+    </div>
+  </div>`;
+}
+function renderCodePenEmbed(url, options, classes) {
+  const match = url.match(/codepen\.io\/([^\/]+)\/(?:pen|embed)\/([^\/\?#]+)/);
+  if (!match) {
+    return createErrorEmbed("Invalid CodePen URL", url, classes);
+  }
+  const [, user, penId] = match;
+  const height = options.height || "400";
+  const theme = options.theme === "light" ? "light" : "dark";
+  const defaultTab = options.tab || "result";
+  const embedParams = new URLSearchParams({
+    "default-tab": defaultTab,
+    "theme-id": theme,
+    "editable": "true"
+  });
+  const embedUrl = `https://codepen.io/${user}/embed/${penId}?${embedParams.toString()}`;
+  return `
+  <div class="${classes}">
+    <iframe 
+      height="${height}" 
+      style="width: 100%; border: 0;" 
+      scrolling="no" 
+      title="CodePen Embed - ${penId}" 
+      src="${embedUrl}" 
+      frameborder="0" 
+      loading="lazy" 
+      allowtransparency="true" 
+      allowfullscreen="true">
+    </iframe>
+  </div>`;
+}
+function renderVimeoEmbed(url, options, classes) {
+  const videoId = extractVimeoId(url);
+  if (!videoId) {
+    return createErrorEmbed("Invalid Vimeo URL", url, classes);
+  }
+  const params = new URLSearchParams();
+  if (options.autoplay === "1") params.set("autoplay", "1");
+  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}">
+    <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;"
+        src="${embedUrl}" 
+        title="Vimeo video player"
+        frameborder="0" 
+        allow="autoplay; fullscreen; picture-in-picture"
+        allowfullscreen>
+      </iframe>
+    </div>
+  </div>`;
+}
+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}">
+    <iframe 
+      style="border-radius: 12px;" 
+      src="${embedUrl}" 
+      width="100%" 
+      height="${height}" 
+      frameborder="0" 
+      allowfullscreen="" 
+      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
+      loading="lazy">
+    </iframe>
+  </div>`;
+}
+function renderCodeSandboxEmbed(url, options, classes) {
+  let embedUrl = url;
+  if (url.includes("/s/")) {
+    embedUrl = url.replace("/s/", "/embed/");
+  }
+  const height = options.height || "500";
+  const view = options.view || "preview";
+  if (!embedUrl.includes("?")) {
+    embedUrl += `?view=${view}`;
+  }
+  return `
+  <div class="${classes}">
+    <iframe 
+      src="${embedUrl}"
+      style="width: 100%; height: ${height}px; border: 0; border-radius: 4px; overflow: hidden;"
+      title="CodeSandbox Embed"
+      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
+    </iframe>
+  </div>`;
+}
+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}">
+    <iframe 
+      style="border: none;" 
+      width="100%" 
+      height="${height}" 
+      src="${embedUrl}" 
+      allowfullscreen>
+    </iframe>
+  </div>`;
+}
+function renderTwitterEmbed(url, _options, 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">
+          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+        </svg>
+        <div>
+          <div class="font-semibold text-foreground">Twitter Post</div>
+          <div class="text-sm text-muted-foreground">External Link</div>
+        </div>
+      </div>
+      <a href="${url}" target="_blank" 
+         class="inline-flex items-center gap-2 text-primary hover:text-primary/80 font-medium transition-colors">
+        View on Twitter
+        <svg class="w-4 h-4" 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>
+      </a>
+    </div>
+  </div>`;
+}
+function renderGitHubEmbed(url, _options, classes) {
+  const parts = url.replace("https://github.com/", "").split("/");
+  const owner = parts[0];
+  const repo = parts[1];
+  if (!owner || !repo) {
+    return createErrorEmbed("Invalid GitHub URL", url, 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">
+          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+        </svg>
+        <div>
+          <div class="font-semibold text-foreground text-lg">${owner}/${repo}</div>
+          <div class="text-sm text-muted-foreground">GitHub Repository</div>
+        </div>
+      </div>
+      <a href="${url}" target="_blank" 
+         class="inline-flex items-center gap-2 text-primary hover:text-primary/80 font-medium transition-colors">
+        View on GitHub
+        <svg class="w-4 h-4" 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>
+      </a>
+    </div>
+  </div>`;
+}
+function renderGenericEmbed(url, _options, classes) {
+  const domain = extractDomain(url);
+  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">
+          <svg class="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
+          </svg>
+        </div>
+        <div>
+          <div class="font-semibold text-foreground">External Link</div>
+          <div class="text-sm text-muted-foreground">${domain}</div>
+        </div>
+      </div>
+      <a href="${url}" target="_blank" 
+         class="inline-flex items-center gap-2 text-primary hover:text-primary/80 font-medium transition-colors break-all">
+        ${url}
+        <svg class="w-4 h-4 flex-shrink-0" 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>
+      </a>
+    </div>
+  </div>`;
+}
+function createErrorEmbed(error, url, 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">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        ${error}
+      </div>
+      <div class="text-sm text-muted-foreground mt-1 break-all">${url}</div>
+    </div>
+  </div>`;
+}
+function extractYouTubeId(url) {
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/)([^&\n?#]+)/,
+    /youtube\.com\/watch\?.*v=([^&\n?#]+)/
+  ];
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match) return match[1] || null;
+  }
+  return null;
+}
+function extractVimeoId(url) {
+  const match = url.match(/vimeo\.com\/(?:.*\/)?(\d+)/);
+  return match?.[1] ?? null;
+}
+
+// src/engine.ts
+var ChangerawrMarkdown = class {
+  constructor(config) {
+    this.extensions = /* @__PURE__ */ new Map();
+    this.parser = new MarkdownParser(config?.parser);
+    this.renderer = new MarkdownRenderer(config?.renderer);
+    this.registerBuiltInExtensions();
+    if (config?.extensions) {
+      config.extensions.forEach((extension) => {
+        this.registerExtension(extension);
+      });
+    }
+    this.parser.setupDefaultRulesIfEmpty();
+  }
+  /**
+   * Register a custom extension
+   */
+  registerExtension(extension) {
+    try {
+      this.extensions.set(extension.name, extension);
+      extension.parseRules.forEach((rule) => {
+        this.parser.addRule(rule);
+      });
+      extension.renderRules.forEach((rule) => {
+        this.renderer.addRule(rule);
+      });
+      return {
+        success: true,
+        extensionName: extension.name
+      };
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      return {
+        success: false,
+        extensionName: extension.name,
+        error: errorMessage
+      };
+    }
+  }
+  /**
+   * Unregister an extension
+   */
+  unregisterExtension(name) {
+    const extension = this.extensions.get(name);
+    if (!extension) {
+      return false;
+    }
+    try {
+      this.extensions.delete(name);
+      this.rebuildParserAndRenderer();
+      return true;
+    } catch {
+      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(),
+      parseTime: 0,
+      renderTime: 0,
+      tokenCount: 0,
+      iterationCount: 0
+    };
+  }
+  /**
+   * Get performance metrics for the last operation
+   */
+  getPerformanceMetrics() {
+    return {
+      parseTime: 0,
+      renderTime: 0,
+      totalTime: 0,
+      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);
+    });
+    this.parser.setupDefaultRulesIfEmpty();
+  }
+};
+var markdown = new ChangerawrMarkdown();
+
+// src/react/hooks.ts
+function useMarkdown(initialContent = "", options = {}) {
+  const [content, setContent] = useState(initialContent);
+  const [html, setHtml] = useState("");
+  const [tokens, setTokens] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [debug, setDebug] = useState(null);
+  const engineRef = useRef(null);
+  const engine = useMemo(() => {
+    const format = options.format ?? "tailwind";
+    const rendererConfig = {
+      format,
+      ...options.config?.renderer && {
+        sanitize: options.config.renderer.sanitize,
+        allowUnsafeHtml: options.config.renderer.allowUnsafeHtml,
+        customClasses: options.config.renderer.customClasses,
+        debugMode: options.debug ?? options.config.renderer.debugMode ?? false
+      }
+    };
+    const engineConfig = {
+      ...options.config && {
+        parser: options.config.parser,
+        extensions: options.config.extensions
+      },
+      renderer: rendererConfig
+    };
+    const newEngine = new ChangerawrMarkdown(engineConfig);
+    if (options.extensions) {
+      options.extensions.forEach((extension) => {
+        newEngine.registerExtension(extension);
+      });
+    }
+    engineRef.current = newEngine;
+    return newEngine;
+  }, [options.config, options.format, options.debug, options.extensions]);
+  const processMarkdown = useCallback((markdownContent) => {
+    if (!markdownContent.trim()) {
+      setHtml("");
+      setTokens([]);
+      setError(null);
+      setDebug(null);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const parsedTokens = engine.parse(markdownContent);
+      const renderedHtml = engine.render(parsedTokens);
+      setHtml(renderedHtml);
+      setTokens(parsedTokens);
+      if (options.debug) {
+        const coreDebug = engine.getDebugInfo();
+        const performanceMetrics = engine.getPerformanceMetrics();
+        setDebug({
+          core: coreDebug,
+          performance: performanceMetrics,
+          renderedAt: /* @__PURE__ */ new Date(),
+          contentLength: markdownContent.length,
+          htmlLength: renderedHtml.length,
+          extensionsUsed: engine.getExtensions()
+        });
+      }
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      setError(errorObj);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [engine, options.debug]);
+  useEffect(() => {
+    processMarkdown(content);
+  }, [content, processMarkdown]);
+  useEffect(() => {
+    setContent(initialContent);
+  }, [initialContent]);
+  const render = useCallback((newContent) => {
+    setContent(newContent);
+  }, []);
+  const clear = useCallback(() => {
+    setContent("");
+    setHtml("");
+    setTokens([]);
+    setError(null);
+    setDebug(null);
+  }, []);
+  return {
+    html,
+    tokens,
+    isLoading,
+    error,
+    debug,
+    render,
+    clear
+  };
+}
+function useMarkdownEngine(options = {}) {
+  const engineRef = useRef(null);
+  const engine = useMemo(() => {
+    const engineConfig = {
+      ...options.config,
+      renderer: {
+        format: "tailwind",
+        // Required field
+        ...options.config?.renderer
+      }
+    };
+    if (options.autoRegisterExtensions === false) {
+      engineConfig.extensions = [];
+    }
+    const newEngine = new ChangerawrMarkdown(engineConfig);
+    engineRef.current = newEngine;
+    return newEngine;
+  }, [options.config, options.autoRegisterExtensions]);
+  const toHtml = useCallback((content) => {
+    return engine.toHtml(content);
+  }, [engine]);
+  const parse = useCallback((content) => {
+    return engine.parse(content);
+  }, [engine]);
+  const render = useCallback((tokens) => {
+    return engine.render(tokens);
+  }, [engine]);
+  const getExtensions = useCallback(() => {
+    return engine.getExtensions();
+  }, [engine]);
+  const hasExtension = useCallback((name) => {
+    return engine.hasExtension(name);
+  }, [engine]);
+  const registerExtension = useCallback((extension) => {
+    return engine.registerExtension(extension);
+  }, [engine]);
+  const unregisterExtension = useCallback((name) => {
+    return engine.unregisterExtension(name);
+  }, [engine]);
+  const getWarnings = useCallback(() => {
+    return engine.getWarnings();
+  }, [engine]);
+  const getDebugInfo = useCallback(() => {
+    return engine.getDebugInfo();
+  }, [engine]);
+  const getPerformanceMetrics = useCallback(() => {
+    return engine.getPerformanceMetrics();
+  }, [engine]);
+  return {
+    engine,
+    toHtml,
+    parse,
+    render,
+    getExtensions,
+    hasExtension,
+    registerExtension,
+    unregisterExtension,
+    getWarnings,
+    getDebugInfo,
+    getPerformanceMetrics
+  };
+}
+function useMarkdownDebug(content) {
+  const { html, tokens, debug } = useMarkdown(content, { debug: true });
+  return {
+    html,
+    tokens,
+    debug,
+    stats: {
+      tokenCount: tokens.length,
+      htmlLength: html.length,
+      contentLength: content.length
+    }
+  };
+}
+
+// src/react/MarkdownRenderer.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MarkdownRenderer2({
+  content,
+  className,
+  config,
+  format = "tailwind",
+  as: Component = "div",
+  wrapperProps = {},
+  debug = false,
+  errorFallback,
+  loading,
+  onRender,
+  onError,
+  extensions,
+  sanitize = true,
+  allowUnsafeHtml = false,
+  ...restProps
+}) {
+  const markdownOptions = useMemo2(() => {
+    const options = {
+      format,
+      debug,
+      debounceMs: 0,
+      // No debounce for tests
+      memoize: true
+    };
+    if (config) {
+      options.config = {
+        ...config,
+        renderer: {
+          format,
+          // Required field
+          sanitize,
+          allowUnsafeHtml,
+          debugMode: debug,
+          ...config.renderer
+        }
+      };
+    } else {
+      options.config = {
+        renderer: {
+          format,
+          sanitize,
+          allowUnsafeHtml,
+          debugMode: debug
+        }
+      };
+    }
+    if (extensions) {
+      options.extensions = extensions;
+    }
+    return options;
+  }, [config, format, debug, extensions, sanitize, allowUnsafeHtml]);
+  const { html, tokens, isLoading, error } = useMarkdown(content, markdownOptions);
+  useEffect2(() => {
+    if (html && onRender) {
+      onRender(html, tokens);
+    }
+  }, [html, tokens, onRender]);
+  useEffect2(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+  if (isLoading && loading) {
+    return /* @__PURE__ */ jsx(Fragment, { children: loading });
+  }
+  if (error) {
+    if (errorFallback) {
+      return /* @__PURE__ */ jsx(Fragment, { children: errorFallback(error) });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "changerawr-error bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Markdown Render Error" }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm mt-1", children: error.message })
+    ] });
+  }
+  const finalWrapperProps = {
+    ...wrapperProps,
+    ...restProps,
+    className: className ? `${className} changerawr-markdown` : "changerawr-markdown",
+    dangerouslySetInnerHTML: { __html: html }
+  };
+  return React.createElement(Component, finalWrapperProps);
+}
+MarkdownRenderer2.displayName = "MarkdownRenderer";
+var MarkdownErrorBoundary = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("MarkdownRenderer Error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "changerawr-error-boundary bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Markdown Component Error" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm mt-1", children: this.state.error.message }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => this.setState({ hasError: false, error: null }),
+            className: "text-xs mt-2 px-2 py-1 bg-red-200 hover:bg-red-300 rounded",
+            children: "Try Again"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+};
+export {
+  MarkdownRenderer2 as MarkdownRenderer,
+  useMarkdown,
+  useMarkdownDebug,
+  useMarkdownEngine
+};
+//# sourceMappingURL=index.mjs.map