MD.ai/MarkdownViewer/MarkdownRenderer.swift

import SwiftUI
import WebKit
import AppKit

struct MarkdownRenderer: NSViewRepresentable {
    let content: String
    
    func makeNSView(context: Context) -> WKWebView {
        print("MarkdownRenderer makeNSView called")
        let webView = WKWebView()
        webView.navigationDelegate = context.coordinator
        
        // Set a background color to see if the view is created
        webView.wantsLayer = true
        webView.layer?.backgroundColor = NSColor.systemYellow.cgColor
        
        return webView
    }
    
    func updateNSView(_ webView: WKWebView, context: Context) {
        print("MarkdownRenderer updateNSView called with content length: \(content.count)")
        let htmlContent = convertMarkdownToHTML(content)
        print("Generated HTML length: \(htmlContent.count)")
        webView.loadHTMLString(htmlContent, baseURL: nil)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, WKNavigationDelegate {
        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            print("WebView finished loading")
        }
        
        func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
            print("WebView navigation failed: \(error)")
        }
        
        func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
            print("WebView provisional navigation failed: \(error)")
        }
    }
    
    private func convertMarkdownToHTML(_ markdown: String) -> String {
        guard !markdown.isEmpty else {
            return "<p>No content to display</p>"
        }
        
        var html = markdown
        
        // Handle headers (more robust approach)
        let headerRegex1 = try! NSRegularExpression(pattern: "^# (.+)$", options: [.anchorsMatchLines])
        let headerRegex2 = try! NSRegularExpression(pattern: "^## (.+)$", options: [.anchorsMatchLines])
        let headerRegex3 = try! NSRegularExpression(pattern: "^### (.+)$", options: [.anchorsMatchLines])
        let headerRegex4 = try! NSRegularExpression(pattern: "^#### (.+)$", options: [.anchorsMatchLines])
        let headerRegex5 = try! NSRegularExpression(pattern: "^##### (.+)$", options: [.anchorsMatchLines])
        let headerRegex6 = try! NSRegularExpression(pattern: "^###### (.+)$", options: [.anchorsMatchLines])
        
        let range = NSRange(location: 0, length: html.count)
        html = headerRegex6.stringByReplacingMatches(in: html, options: [], range: range, withTemplate: "<h6>$1</h6>")
        html = headerRegex5.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<h5>$1</h5>")
        html = headerRegex4.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<h4>$1</h4>")
        html = headerRegex3.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<h3>$1</h3>")
        html = headerRegex2.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<h2>$1</h2>")
        html = headerRegex1.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<h1>$1</h1>")
        
        // Handle bold (before italic to avoid conflicts)
        let boldRegex = try! NSRegularExpression(pattern: "\\*\\*(.*?)\\*\\*", options: [])
        html = boldRegex.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<strong>$1</strong>")
        
        // Handle italic
        let italicRegex = try! NSRegularExpression(pattern: "\\*(.*?)\\*", options: [])
        html = italicRegex.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<em>$1</em>")
        
        // Handle inline code
        let codeRegex = try! NSRegularExpression(pattern: "`([^`]+)`", options: [])
        html = codeRegex.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<code>$1</code>")
        
        // Handle horizontal rules (-- on its own line)
        let hrRegex = try! NSRegularExpression(pattern: "^--$", options: [.anchorsMatchLines])
        html = hrRegex.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<hr>")
        
        // Handle links
        let linkRegex = try! NSRegularExpression(pattern: "\\[([^\\]]+)\\]\\(([^\\)]+)\\)", options: [])
        html = linkRegex.stringByReplacingMatches(in: html, options: [], range: NSRange(location: 0, length: html.count), withTemplate: "<a href=\"$2\">$1</a>")
        
        // Convert line breaks to paragraphs
        let paragraphs = html.components(separatedBy: "\n\n")
        html = paragraphs.map { paragraph in
            let trimmed = paragraph.trimmingCharacters(in: .whitespacesAndNewlines)
            if trimmed.isEmpty {
                return ""
            }
            // Don't wrap headers or horizontal rules in paragraphs
            if trimmed.hasPrefix("<h") || trimmed == "<hr>" {
                return trimmed.replacingOccurrences(of: "\n", with: "<br>")
            }
            return "<p>" + trimmed.replacingOccurrences(of: "\n", with: "<br>") + "</p>"
        }.filter { !$0.isEmpty }.joined(separator: "\n")
        
        let fullHTML = """
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                body {
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                    line-height: 1.6;
                    color: #333;
                    max-width: 800px;
                    margin: 0 auto;
                    padding: 20px;
                    background-color: #ffffff;
                }
                h1, h2, h3, h4, h5, h6 {
                    color: #2c3e50;
                    margin-top: 24px;
                    margin-bottom: 16px;
                }
                h1 { font-size: 2em; border-bottom: 2px solid #eee; padding-bottom: 10px; }
                h2 { font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 8px; }
                h3 { font-size: 1.25em; }
                p { margin-bottom: 16px; }
                code {
                    background-color: #f4f4f4;
                    padding: 2px 4px;
                    border-radius: 3px;
                    font-family: 'SF Mono', Monaco, Menlo, monospace;
                    font-size: 0.9em;
                }
                a {
                    color: #007AFF;
                    text-decoration: none;
                }
                a:hover {
                    text-decoration: underline;
                }
                strong {
                    font-weight: 600;
                }
                em {
                    font-style: italic;
                }
                hr {
                    border: none;
                    border-top: 2px solid #eee;
                    margin: 24px 0;
                }
            </style>
        </head>
        <body>
            \(html)
        </body>
        </html>
        """
        
        return fullHTML
    }
}