|
| 1 | +/** |
| 2 | + * Markdown Renderer Utility |
| 3 | + * Converts Markdown text to HTML with proper sanitization |
| 4 | + */ |
| 5 | + |
| 6 | +class MarkdownRenderer { |
| 7 | + constructor() { |
| 8 | + // Initialize the renderer |
| 9 | + } |
| 10 | + /** |
| 11 | + * Convert Markdown to HTML |
| 12 | + * @param {string} markdownText - The markdown text to convert |
| 13 | + * @returns {string} - HTML string |
| 14 | + */ |
| 15 | + render(markdownText) { |
| 16 | + if (!markdownText || typeof markdownText !== "string") { |
| 17 | + return ""; |
| 18 | + } |
| 19 | + |
| 20 | + let html = markdownText; |
| 21 | + |
| 22 | + // Normalize line endings (convert \r\n to \n) |
| 23 | + html = html.replace(/\r\n/g, "\n"); |
| 24 | + |
| 25 | + // Convert headers |
| 26 | + html = html.replace( |
| 27 | + /^### (.*$)/gm, |
| 28 | + '<h3 class="text-lg font-semibold text-gray-800 mt-4 mb-2">$1</h3>' |
| 29 | + ); |
| 30 | + html = html.replace( |
| 31 | + /^## (.*$)/gm, |
| 32 | + '<h2 class="text-xl font-semibold text-gray-800 mt-4 mb-3">$1</h2>' |
| 33 | + ); |
| 34 | + html = html.replace( |
| 35 | + /^# (.*$)/gm, |
| 36 | + '<h1 class="text-2xl font-bold text-gray-800 mt-4 mb-3">$1</h1>' |
| 37 | + ); |
| 38 | + |
| 39 | + // Convert code blocks FIRST (before any other backtick processing) |
| 40 | + html = html.replace(/```(\w+)?\s*([\s\S]*?)```/g, (match, lang, code) => { |
| 41 | + const language = lang ? ` data-language="${lang}"` : ""; |
| 42 | + return `<pre class="bg-gray-50 border border-gray-200 rounded-md p-3 my-3 overflow-x-auto"><code class="text-sm font-mono text-gray-800"${language}>${this.escapeHtml( |
| 43 | + code.trim() |
| 44 | + )}</code></pre>`; |
| 45 | + }); |
| 46 | + |
| 47 | + // Convert inline code AFTER code blocks |
| 48 | + html = html.replace( |
| 49 | + /`([^`]+)`/g, |
| 50 | + '<code class="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono text-gray-800">$1</code>' |
| 51 | + ); |
| 52 | + |
| 53 | + // Convert bold text |
| 54 | + html = html.replace( |
| 55 | + /\*\*(.*?)\*\*/g, |
| 56 | + '<strong class="font-semibold">$1</strong>' |
| 57 | + ); |
| 58 | + html = html.replace( |
| 59 | + /__(.*?)__/g, |
| 60 | + '<strong class="font-semibold">$1</strong>' |
| 61 | + ); |
| 62 | + |
| 63 | + // Convert italic text |
| 64 | + html = html.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>'); |
| 65 | + html = html.replace(/_(.*?)_/g, '<em class="italic">$1</em>'); |
| 66 | + |
| 67 | + // Convert links |
| 68 | + html = html.replace( |
| 69 | + /\[([^\]]+)\]\(([^)]+)\)/g, |
| 70 | + '<a href="$2" class="text-blue-600 hover:text-blue-800 underline" target="_blank" rel="noopener noreferrer">$1</a>' |
| 71 | + ); |
| 72 | + |
| 73 | + // Convert unordered lists |
| 74 | + html = html.replace( |
| 75 | + /^[\s]*[-\*\+][\s]+(.*$)/gm, |
| 76 | + '<li class="ml-4 list-disc">$1</li>' |
| 77 | + ); |
| 78 | + html = html.replace( |
| 79 | + /(<li[^>]*>.*<\/li>)/s, |
| 80 | + '<ul class="my-2 space-y-1">$1</ul>' |
| 81 | + ); |
| 82 | + |
| 83 | + // Convert ordered lists |
| 84 | + html = html.replace( |
| 85 | + /^[\s]*\d+\.[\s]+(.*$)/gm, |
| 86 | + '<li class="ml-4 list-decimal">$1</li>' |
| 87 | + ); |
| 88 | + html = html.replace( |
| 89 | + /(<li[^>]*class="[^"]*list-decimal[^"]*"[^>]*>.*<\/li>)/s, |
| 90 | + '<ol class="my-2 space-y-1">$1</ol>' |
| 91 | + ); |
| 92 | + |
| 93 | + // Convert line breaks |
| 94 | + html = html.replace(/\n\n/g, '</p><p class="text-gray-700 mb-4">'); |
| 95 | + |
| 96 | + // Convert blockquotes |
| 97 | + html = html.replace( |
| 98 | + /^> (.*$)/gm, |
| 99 | + '<blockquote class="border-l-4 border-gray-300 pl-4 italic text-gray-600 my-2">$1</blockquote>' |
| 100 | + ); |
| 101 | + |
| 102 | + // Convert horizontal rules |
| 103 | + html = html.replace(/^---$/gm, '<hr class="my-4 border-gray-300">'); |
| 104 | + |
| 105 | + // Wrap in paragraph if not already wrapped |
| 106 | + if (html && !html.trim().startsWith("<")) { |
| 107 | + html = `<p class="text-gray-700 mb-4">${html}</p>`; |
| 108 | + } |
| 109 | + |
| 110 | + return html; |
| 111 | + } |
| 112 | + |
| 113 | + /** |
| 114 | + * Escape HTML characters to prevent XSS |
| 115 | + * @param {string} text - Text to escape |
| 116 | + * @returns {string} - Escaped text |
| 117 | + */ |
| 118 | + escapeHtml(text) { |
| 119 | + const div = document.createElement("div"); |
| 120 | + div.textContent = text; |
| 121 | + return div.innerHTML; |
| 122 | + } |
| 123 | + |
| 124 | + /** |
| 125 | + * Sanitize HTML content |
| 126 | + * @param {string} html - HTML to sanitize |
| 127 | + * @returns {string} - Sanitized HTML |
| 128 | + */ |
| 129 | + sanitize(html) { |
| 130 | + // Create a temporary element to parse HTML |
| 131 | + const temp = document.createElement("div"); |
| 132 | + temp.innerHTML = html; |
| 133 | + |
| 134 | + // Remove script tags and event handlers |
| 135 | + const scripts = temp.querySelectorAll("script"); |
| 136 | + scripts.forEach((script) => script.remove()); |
| 137 | + |
| 138 | + // Remove potentially dangerous attributes |
| 139 | + const allElements = temp.querySelectorAll("*"); |
| 140 | + allElements.forEach((element) => { |
| 141 | + // Remove event handlers |
| 142 | + Array.from(element.attributes).forEach((attr) => { |
| 143 | + if (attr.name.startsWith("on")) { |
| 144 | + element.removeAttribute(attr.name); |
| 145 | + } |
| 146 | + }); |
| 147 | + |
| 148 | + // Remove javascript: links |
| 149 | + if (element.href && element.href.startsWith("javascript:")) { |
| 150 | + element.removeAttribute("href"); |
| 151 | + } |
| 152 | + }); |
| 153 | + |
| 154 | + return temp.innerHTML; |
| 155 | + } |
| 156 | + |
| 157 | + /** |
| 158 | + * Render and sanitize markdown content |
| 159 | + * @param {string} markdownText - The markdown text to convert |
| 160 | + * @returns {string} - Safe HTML string |
| 161 | + */ |
| 162 | + renderSafe(markdownText) { |
| 163 | + const html = this.render(markdownText); |
| 164 | + return this.sanitize(html); |
| 165 | + } |
| 166 | +} |
| 167 | + |
| 168 | +// Create a global instance |
| 169 | +window.markdownRenderer = new MarkdownRenderer(); |
| 170 | + |
| 171 | +// Export for module usage |
| 172 | +if (typeof module !== "undefined" && module.exports) { |
| 173 | + module.exports = MarkdownRenderer; |
| 174 | +} |
0 commit comments