Files
WooNooW/includes/Core/Notifications/MarkdownParser.php
dwindown 1225d7b0ff fix: Email rendering - newlines, hero text color, and card borders
🐛 Three Critical Email Issues Fixed:

1. Newlines Not Working
    "Order Number: #359 Order Total: Rp129.000" on same line
    Fixed by adding <br> for line continuations in paragraphs

   Key change in MarkdownParser.php:
   - Accumulate paragraph content with <br> between lines
   - Match TypeScript behavior exactly
   - Protect variables from markdown parsing

   Before:
   $paragraph_content = $trimmed;

   After:
   if ($paragraph_content) {
       $paragraph_content .= '<br>' . $trimmed;
   } else {
       $paragraph_content = $trimmed;
   }

2. Hero Card Text Color
    Heading black instead of white in Gmail
    Add inline color styles to all headings/paragraphs

   Problem: Gmail doesn't inherit color from parent
   Solution: Add style="color: white;" to each element

   $content = preg_replace(
       '/<(h[1-6]|p)([^>]*)>/',
       '<$1$2 style="color: ' . $hero_text_color . ';">',
       $content
   );

3. Blue Border on Cards
    Unwanted blue border in Gmail (screenshot 2)
    Removed borders from .card-info, .card-warning, .card-success

   Problem: CSS template had borders
   Solution: Removed border declarations

   Before:
   .card-info { border: 1px solid #0071e3; }

   After:
   .card-info { background-color: #f0f7ff; }

�� Additional Improvements:
- Variable protection during markdown parsing
- Don't match bold/italic across newlines
- Proper list handling
- Block-level tag detection
- Paragraph accumulation with line breaks

🎯 Result:
-  Proper line breaks in paragraphs
-  White text in hero cards (Gmail compatible)
-  No unwanted borders
-  Variables preserved during parsing
-  Professional email appearance

Test: Create order, check email - should now show:
- Order Number: #359
- Order Total: Rp129.000
- Estimated Delivery: 3-5 business days
(Each on separate line with proper spacing)
2025-11-18 21:46:06 +07:00

194 lines
5.3 KiB
PHP

<?php
/**
* Markdown to Email HTML Parser
*
* PHP port of the TypeScript markdown parser from admin-spa
*
* Supports:
* - Standard Markdown (headings, bold, italic, lists, links, horizontal rules)
* - Card blocks with ::: syntax
* - Button blocks with [button url="..."]Text[/button] syntax
* - Variables with {variable_name}
* - Checkmarks (✓) and bullet points (•)
* - Proper newline handling
*
* @package WooNooW\Core\Notifications
*/
namespace WooNooW\Core\Notifications;
class MarkdownParser {
/**
* Parse markdown to email HTML
*
* @param string $markdown
* @return string
*/
public static function parse($markdown) {
$html = $markdown;
// Parse card blocks first (:::card or :::card[type])
$html = preg_replace_callback(
'/:::card(?:\[(\w+)\])?\n([\s\S]*?):::/s',
function($matches) {
$type = $matches[1] ?? '';
$content = trim($matches[2]);
$parsed_content = self::parse_basics($content);
return '[card' . ($type ? ' type="' . $type . '"' : '') . "]\n" . $parsed_content . "\n[/card]";
},
$html
);
// Parse button blocks [button url="..."]Text[/button] - already in correct format
// Also support legacy [button](url){text} syntax
$html = preg_replace_callback(
'/\[button(?:\s+style="(solid|outline)")?\]\((.*?)\)\s*\{([^}]+)\}/',
function($matches) {
$style = $matches[1] ?? '';
$url = $matches[2];
$text = $matches[3];
return '[button url="' . $url . '"' . ($style ? ' style="' . $style . '"' : '') . ']' . $text . '[/button]';
},
$html
);
// Horizontal rules
$html = preg_replace('/^---$/m', '<hr>', $html);
// Parse remaining markdown (outside cards)
$html = self::parse_basics($html);
return $html;
}
/**
* Parse basic markdown syntax
*
* @param string $text
* @return string
*/
private static function parse_basics($text) {
$html = $text;
// Protect variables from markdown parsing by temporarily replacing them
$variables = [];
$var_index = 0;
$html = preg_replace_callback('/\{([^}]+)\}/', function($matches) use (&$variables, &$var_index) {
$placeholder = '<!--VAR' . $var_index . '-->';
$variables[$placeholder] = $matches[0];
$var_index++;
return $placeholder;
}, $html);
// Headings (must be done in order from h4 to h1 to avoid conflicts)
$html = preg_replace('/^#### (.*)$/m', '<h4>$1</h4>', $html);
$html = preg_replace('/^### (.*)$/m', '<h3>$1</h3>', $html);
$html = preg_replace('/^## (.*)$/m', '<h2>$1</h2>', $html);
$html = preg_replace('/^# (.*)$/m', '<h1>$1</h1>', $html);
// Bold (don't match across newlines)
$html = preg_replace('/\*\*([^\n*]+?)\*\*/', '<strong>$1</strong>', $html);
$html = preg_replace('/__([^\n_]+?)__/', '<strong>$1</strong>', $html);
// Italic (don't match across newlines)
$html = preg_replace('/\*([^\n*]+?)\*/', '<em>$1</em>', $html);
$html = preg_replace('/_([^\n_]+?)_/', '<em>$1</em>', $html);
// Horizontal rules
$html = preg_replace('/^---$/m', '<hr>', $html);
// Links (but not button syntax)
$html = preg_replace('/\[(?!button)([^\]]+)\]\(([^)]+)\)/', '<a href="$2">$1</a>', $html);
// Process lines for paragraphs and lists
$lines = explode("\n", $html);
$in_list = false;
$paragraph_content = '';
$processed_lines = [];
$close_paragraph = function() use (&$paragraph_content, &$processed_lines) {
if ($paragraph_content) {
$processed_lines[] = '<p>' . $paragraph_content . '</p>';
$paragraph_content = '';
}
};
foreach ($lines as $line) {
$trimmed = trim($line);
// Empty line - close paragraph or list
if (empty($trimmed)) {
if ($in_list) {
$processed_lines[] = '</ul>';
$in_list = false;
}
$close_paragraph();
$processed_lines[] = '';
continue;
}
// Check if line is a list item
if (preg_match('/^[\*\-•✓✔]\s/', $trimmed)) {
$close_paragraph();
$content = preg_replace('/^[\*\-•✓✔]\s/', '', $trimmed);
if (!$in_list) {
$processed_lines[] = '<ul>';
$in_list = true;
}
$processed_lines[] = '<li>' . $content . '</li>';
continue;
}
// Close list if we're in one
if ($in_list) {
$processed_lines[] = '</ul>';
$in_list = false;
}
// Block-level HTML tags - don't wrap in paragraph
if (preg_match('/^<(div|h1|h2|h3|h4|h5|h6|p|ul|ol|li|hr|table|blockquote)/i', $trimmed)) {
$close_paragraph();
$processed_lines[] = $line;
continue;
}
// Regular text line - accumulate in paragraph
if ($paragraph_content) {
// Add line break before continuation (THIS IS THE KEY FIX!)
$paragraph_content .= '<br>' . $trimmed;
} else {
// Start new paragraph
$paragraph_content = $trimmed;
}
}
// Close any open tags
if ($in_list) {
$processed_lines[] = '</ul>';
}
$close_paragraph();
$html = implode("\n", $processed_lines);
// Restore variables
foreach ($variables as $placeholder => $original) {
$html = str_replace($placeholder, $original, $html);
}
return $html;
}
/**
* Convert newlines to <br> tags for email rendering
*
* @param string $html
* @return string
*/
public static function nl2br_email($html) {
// Don't convert newlines inside HTML tags
$html = preg_replace('/(?<!>)\n(?!<)/', '<br>', $html);
return $html;
}
}