Fix Mermaid diagram rendering support for rich display content

[Copilot]

Problem

Users were encountering the error "Unable to render rich display" with "Could not find a suitable point for the given distance" when trying to include Mermaid diagrams in their posts. The application only supported plain text rendering with basic line breaks, lacking any rich content or diagram rendering capabilities.

Solution

This PR adds comprehensive Mermaid diagram support to the TechForum platform, allowing users to create rich, interactive diagrams in their posts and replies using standard Mermaid syntax.

Key Features Added

🎨 Rich Diagram Support
Users can now include various types of diagrams using standard Mermaid syntax:

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Fix it]
    D --> B
    C --> E[End]

Loading

🛡️ Security & Compatibility

• All user content remains properly HTML-escaped for XSS protection
• Graceful fallback when CDN is blocked (shows formatted diagram code)
• Fully backward compatible - existing posts render unchanged
• Responsive design ensures diagrams scale properly on all devices

📱 Smart Preview Handling
Posts containing diagrams show a special preview message in the post listing instead of truncated diagram code, providing a better user experience.

Implementation Details

The solution introduces a new content processing pipeline that:

1. Detects Mermaid code blocks using the standard ```mermaid syntax
2. Converts them to HTML containers that Mermaid.js can process
3. Preserves security by escaping all other content
4. Handles multiple diagrams per post correctly
5. Provides fallback styling when the CDN is unavailable

Files Modified

• includes/functions.php - Added process_content() and process_content_preview() functions
• post.php - Updated to use new content processing and added Mermaid.js integration
• posts.php - Updated post previews and added Mermaid.js support

Usage Example

Users can now create diagrams by including code blocks like:

Here's a flowchart showing our process:

```mermaid
graph LR
    A[User Input] --> B[Validation]
    B --> C{Valid?}
    C -->|Yes| D[Process]
    C -->|No| E[Error]
    D --> F[Success]
```

Test Results

The screenshot demonstrates:

• ✅ Mermaid code blocks are properly detected and processed
• ✅ Fallback display works when CDN is restricted
• ✅ Regular content formatting is preserved
• ✅ Security is maintained with proper HTML escaping

This implementation resolves the "Unable to render rich display" error by providing comprehensive diagram rendering support while maintaining the application's security and compatibility standards.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.