Fix PDF preview rendering as raw text

templates/lesson_view.html

@@ -176,9 +176,11 @@
             console.log('Encoded file path:', filePath);
             
             // Check if this is an HTML file
-            const isHtmlFile = filePath.toLowerCase().endsWith('.html');
+            const isHtmlFile = filePath.toLowerCase().endsWith('.html') || filePath.toLowerCase().endsWith('.htm');
+            const isPdfFile = filePath.toLowerCase().endsWith('.pdf');
+            const isBinaryDoc = ['.docx', '.doc', '.rtf'].some(ext => filePath.toLowerCase().endsWith(ext));
             const contentDiv = document.getElementById('content-{{ loop.index0 }}');
-            
+
             if (isHtmlFile) {
                 // For HTML files, create an iframe
                 console.log('Creating iframe for HTML file');
@@ -189,6 +191,25 @@
                         title="${filePath.split('/').pop()}"
                     ></iframe>
                 `;
+            } else if (isPdfFile) {
+                // For PDFs, embed via iframe rather than fetching as text -
+                // browsers render PDFs natively in an iframe, but fetching
+                // the raw bytes as text (like below) produces garbage.
+                console.log('Embedding PDF in iframe');
+                contentDiv.innerHTML = `
+                    <iframe
+                        src="/files/${encodeURIComponent(filePath)}"
+                        style="width: 100%; height: 800px; border: none; border-radius: 5px; background: #fff;"
+                        title="${filePath.split('/').pop()}"
+                    ></iframe>
+                `;
+            } else if (isBinaryDoc) {
+                // .docx/.doc/.rtf can't be rendered inline by the browser;
+                // fetching them as text would show garbled binary content,
+                // so just point at the download/open link instead.
+                contentDiv.innerHTML =
+                    '<div style="color: #999;">Preview isn\'t available for this file type. ' +
+                    'Use the "Open in new tab" link below to view or download it.</div>';
             } else {
                 // For text files, fetch and display content
                 fetch('/files/' + encodeURIComponent(filePath))