From 183bcf0ef2dcb8ea4f3a39c971f1d70128958b77 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Thu, 30 Jul 2026 12:26:55 -0400
Subject: [PATCH] Import .docx content directly into RTE editor as editable
 HTML

Instead of embedding an iframe, mammoth HTML is inserted straight into
the contenteditable body so the admin can edit it like any other content.
A download link to the original .docx sits above the content.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/admin.js | 16 +++++++---------
 server.js       | 29 ++++++-----------------------
 2 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/public/admin.js b/public/admin.js
index 8f758f0..25d1b68 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -623,15 +623,13 @@ $('#import-go-btn').addEventListener('click', async () => {
       method: 'POST',
       body: { base64, originalName: file.name },
     });
-    const embed = result.htmlUrl
-      ? `<details><summary>📄 ${result.originalName}</summary><iframe src="${result.htmlUrl}" style="width:100%;border:1px solid #ccc;border-radius:4px;margin-top:.5em;display:block;" onload="try{this.style.height=this.contentDocument.documentElement.scrollHeight+32+'px'}catch(e){this.style.height='500px'}"></iframe><p><a href="${result.url}" download="${result.originalName}">⬇️ Download ${result.originalName}</a></p></details>`
-      : `<a href="${result.url}" target="_blank">📄 ${result.originalName}</a>`;
-    if (type === 'assignment') {
-      $('#ie-body-assignment').innerHTML += embed;
-    } else {
-      $('#ie-body-lesson').innerHTML += embed;
-    }
-    $('#import-status').textContent = '✅ File uploaded. Document embedded in body.';
+    const downloadLink = `<p><a href="${result.url}" download="${result.originalName}">⬇️ ${result.originalName}</a></p>`;
+    const content = result.htmlBody
+      ? downloadLink + result.htmlBody
+      : `<p><a href="${result.url}" target="_blank">📄 ${result.originalName}</a></p>`;
+    const editor = type === 'assignment' ? $('#ie-body-assignment') : $('#ie-body-lesson');
+    editor.innerHTML += content;
+    $('#import-status').textContent = '✅ Imported — content is now editable above.';
   } catch (err) {
     $('#import-status').textContent = `❌ ${err.message}`;
   } finally {
diff --git a/server.js b/server.js
index 9f2b190..536dd8f 100644
--- a/server.js
+++ b/server.js
@@ -1548,33 +1548,16 @@ app.post('/api/admin/upload-attachment', requirePin, async (req, res) => {
     return res.status(500).json({ error: `Could not save file: ${err.message}` });
   }
 
-  // Convert to HTML for the iframe viewer
-  let htmlUrl = null;
+  // Convert to HTML for inline editing in the RTE
+  let htmlBody = null;
   try {
-    const { value: bodyHtml } = await mammoth.convertToHtml({ buffer });
-    const htmlFilename = `${uuid}.html`;
-    const page = `<!doctype html><html><head><meta charset="utf-8">
-<style>
-*{box-sizing:border-box}
-body{font-family:Georgia,serif;margin:0;padding:1rem 1.5rem;line-height:1.7;font-size:15px;font-weight:normal;color:#111}
-p{margin:.6em 0;font-weight:normal}
-strong,b{font-weight:bold}
-h1{font-size:1.5em;margin:1em 0 .3em}
-h2{font-size:1.25em;margin:.9em 0 .3em}
-h3{font-size:1.1em;margin:.8em 0 .2em}
-img{max-width:100%}
-table{border-collapse:collapse;width:100%}
-td,th{border:1px solid #ccc;padding:.4em .6em}
-ul,ol{padding-left:1.5em}
-</style>
-</head><body>${bodyHtml}</body></html>`;
-    await writeFile(join(ATTACHMENTS_DIR, htmlFilename), page);
-    htmlUrl = `/api/attachments/${htmlFilename}`;
+    const { value } = await mammoth.convertToHtml({ buffer });
+    htmlBody = value || null;
   } catch (_) {
-    // preview failed — download link still works
+    // conversion failed — download link still available
   }
 
-  return res.json({ url: `/api/attachments/${filename}`, htmlUrl, originalName });
+  return res.json({ url: `/api/attachments/${filename}`, htmlBody, originalName });
 });
 
 app.get('/health', (req, res) => res.json({ ok: true }));