@changerawr/markdown 1.1.3 → 1.1.4

package/dist/css/index.css

@@ -81,7 +81,7 @@
 }
 
 @layer components {
-    /* Alert components */
+    /* Alert components - all 6 types */
     .changerawr-alert {
         @apply border-l-4 p-4 mb-4 rounded-md transition-all duration-200;
     }
@@ -114,7 +114,21 @@
         border-left-color: #10b981;
     }
 
-    /* Button components */
+    .changerawr-alert-tip {
+        background-color: color-mix(in srgb, #a855f7 10%, transparent);
+        border-color: color-mix(in srgb, #a855f7 30%, transparent);
+        color: #a855f7;
+        border-left-color: #a855f7;
+    }
+
+    .changerawr-alert-note {
+        background-color: color-mix(in srgb, #6b7280 10%, transparent);
+        border-color: color-mix(in srgb, #6b7280 30%, transparent);
+        color: #6b7280;
+        border-left-color: #6b7280;
+    }
+
+    /* Button base component */
     .changerawr-button {
         @apply inline-flex items-center justify-center px-4 py-2 rounded-lg transition-all duration-200 cursor-pointer;
         border: 1px solid transparent;
@@ -122,13 +136,109 @@
         text-decoration: none;
     }
 
+    /* Button style variants - all 7 types */
+    .changerawr-button-default {
+        background-color: #475569;
+        color: white;
+        border-color: #64748b;
+    }
+
+    .changerawr-button-default:hover:not(:disabled) {
+        background-color: #334155;
+        border-color: #94a3b8;
+    }
+
     .changerawr-button-primary {
         background-color: #3b82f6;
         color: white;
+        border-color: #60a5fa;
     }
 
     .changerawr-button-primary:hover:not(:disabled) {
-        background-color: color-mix(in srgb, #3b82f6 90%, black);
+        background-color: #2563eb;
+        border-color: #93c5fd;
+    }
+
+    .changerawr-button-secondary {
+        background-color: #4b5563;
+        color: white;
+        border-color: #6b7280;
+    }
+
+    .changerawr-button-secondary:hover:not(:disabled) {
+        background-color: #374151;
+        border-color: #9ca3af;
+    }
+
+    .changerawr-button-success {
+        background-color: #059669;
+        color: white;
+        border-color: #10b981;
+    }
+
+    .changerawr-button-success:hover:not(:disabled) {
+        background-color: #047857;
+        border-color: #34d399;
+    }
+
+    .changerawr-button-danger {
+        background-color: #dc2626;
+        color: white;
+        border-color: #ef4444;
+    }
+
+    .changerawr-button-danger:hover:not(:disabled) {
+        background-color: #b91c1c;
+        border-color: #f87171;
+    }
+
+    .changerawr-button-outline {
+        background-color: transparent;
+        color: #3b82f6;
+        border-color: #3b82f6;
+    }
+
+    .changerawr-button-outline:hover:not(:disabled) {
+        background-color: #eff6ff;
+        border-color: #1d4ed8;
+        color: #1d4ed8;
+    }
+
+    .changerawr-button-ghost {
+        background-color: transparent;
+        color: #374151;
+        border-color: transparent;
+    }
+
+    .changerawr-button-ghost:hover:not(:disabled) {
+        background-color: #f3f4f6;
+        color: #111827;
+    }
+
+    /* Button size variants */
+    .changerawr-button-sm {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.875rem;
+        gap: 0.375rem;
+    }
+
+    .changerawr-button-md {
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        gap: 0.5rem;
+    }
+
+    .changerawr-button-lg {
+        padding: 0.75rem 1.5rem;
+        font-size: 1.125rem;
+        gap: 0.625rem;
+    }
+
+    /* Button disabled state */
+    .changerawr-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
     }
 }
 
@@ -153,4 +263,14 @@
         color: #34d399;
         background-color: color-mix(in srgb, #10b981 20%, transparent);
     }
+
+    .changerawr-alert-tip {
+        color: #c084fc;
+        background-color: color-mix(in srgb, #a855f7 20%, transparent);
+    }
+
+    .changerawr-alert-note {
+        color: #9ca3af;
+        background-color: color-mix(in srgb, #6b7280 20%, transparent);
+    }
 }

package/dist/index.d.mts

@@ -3,6 +3,7 @@ interface MarkdownToken {
     content: string;
     raw: string;
     attributes?: Record<string, string>;
+    children?: MarkdownToken[];
 }
 interface ParseRule {
     name: string;
@@ -384,6 +385,7 @@ declare class MarkdownParser {
     private preprocessMarkdown;
     private validateMarkdown;
     private postProcessTokens;
+    private recursivelyParseBlockContent;
 }
 
 declare class MarkdownRenderer {

package/dist/index.d.ts

@@ -3,6 +3,7 @@ interface MarkdownToken {
     content: string;
     raw: string;
     attributes?: Record<string, string>;
+    children?: MarkdownToken[];
 }
 interface ParseRule {
     name: string;
@@ -384,6 +385,7 @@ declare class MarkdownParser {
     private preprocessMarkdown;
     private validateMarkdown;
     private postProcessTokens;
+    private recursivelyParseBlockContent;
 }
 
 declare class MarkdownRenderer {

package/dist/index.js

@@ -295,7 +295,8 @@ var MarkdownParser = class {
         }
         i = j;
       } else if (token) {
-        processed.push(token);
+        const processedToken = this.recursivelyParseBlockContent(token);
+        processed.push(processedToken);
         i++;
       } else {
         i++;
@@ -303,6 +304,17 @@ var MarkdownParser = class {
     }
     return processed;
   }
+  recursivelyParseBlockContent(token) {
+    const blockTypes = ["alert", "blockquote"];
+    if (blockTypes.includes(token.type) && token.content && token.content.trim()) {
+      const children = this.parse(token.content);
+      return {
+        ...token,
+        children
+      };
+    }
+    return token;
+  }
 };
 
 // src/utils.ts
@@ -648,7 +660,19 @@ var MarkdownRenderer = class {
     const rule = this.rules.get(token.type);
     if (rule) {
       try {
-        return rule.render(token);
+        let tokenToRender = token;
+        if (token.children && token.children.length > 0) {
+          const renderedChildren = this.render(token.children);
+          tokenToRender = {
+            ...token,
+            attributes: {
+              ...token.attributes,
+              renderedChildren
+              // Extensions can use this instead of re-parsing
+            }
+          };
+        }
+        return rule.render(tokenToRender);
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
         this.warnings.push(`Render error for ${token.type}: ${errorMessage}`);
@@ -717,8 +741,10 @@ var BlockquoteExtension = {
     {
       type: "blockquote",
       render: (token) => {
-        const content = escapeHtml(token.content);
         const format = token.attributes?.format || "html";
+        const renderedChildren = token.attributes?.renderedChildren;
+        const renderMarkdown2 = token.attributes?.renderMarkdown;
+        const content = renderedChildren || (renderMarkdown2 ? renderMarkdown2(token.content) : escapeHtml(token.content));
         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>`;
         }
@@ -1223,6 +1249,9 @@ var AlertExtension = {
         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 renderedChildren = token.attributes?.renderedChildren;
+        const renderMarkdown2 = token.attributes?.renderMarkdown;
+        const renderedContent = renderedChildren || (renderMarkdown2 ? renderMarkdown2(token.content) : token.content);
         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>
@@ -1232,7 +1261,7 @@ var AlertExtension = {
              </div>`;
         return `<div class="${classes}" role="alert" aria-live="polite">
                   ${titleHtml}
-                  <div class="leading-relaxed">${token.content}</div>
+                  <div class="leading-relaxed">${renderedContent}</div>
                 </div>`;
       }
     }