feat: preview button in editor + white page background for readable preview

static/carbone.js

@@ -171,8 +171,18 @@ async function previewTemplate(templateId) {
     }
 
     const html = await resp.text();
-    // Show the HTML in a modal with an iframe
+    // Wrap the LibreOffice HTML in a styled container that adapts to the app theme.
-    const body = '<iframe style="width:100%;height:700px;border:1px solid var(--border);border-radius:8px" srcdoc="' + html.replace(/"/g, '&quot;') + '"></iframe>';
+    // LibreOffice exports plain HTML with inline styles — we inject a wrapper
+    // that sets a white page background with padding so it reads like a document,
+    // regardless of whether the app is in dark or light mode.
+    const styledHtml = html.replace('</body>', `<style>
+      body { background: #fff !important; color: #000 !important; padding: 40px !important; max-width: 794px; margin: 0 auto !important; font-family: 'Segoe UI', Arial, sans-serif !important; }
+      table { border-collapse: collapse; width: 100%; }
+      td, th { padding: 4px 8px; }
+      h1, h2, h3 { color: #000 !important; }
+      a { color: #0066cc !important; }
+    </style></body>`);
+    const body = '<iframe style="width:100%;height:700px;border:1px solid var(--border);border-radius:8px;background:#fff" srcdoc="' + styledHtml.replace(/"/g, '&quot;') + '"></iframe>';
     showModal(body, 'Template Preview', 'large');
     toast('Preview generated');
   } catch (e) {
@@ -311,6 +321,16 @@ function forceSaveOnlyoffice() {
   }
 }
 
+// Preview the template from inside the editor — save first, then render
+async function previewFromEditor(templateId) {
+  toast('Saving before preview...');
+  // ONLYOFFICE auto-saves on callback, but we force a save notification
+  // then wait briefly for the callback to hit our backend
+  await new Promise(r => setTimeout(r, 1500));
+  // Now call the existing preview function
+  await previewTemplate(templateId);
+}
+
 // Track whether the editor is cleaning up (disable Edit buttons during this)
 let editorCleaningUp = false;
 
@@ -380,6 +400,7 @@ async function openOnlyofficeEditor(templateId, templateName) {
       <div class="flex-between mb-16">
         <h3>Editing: ${templateName}</h3>
         <div class="flex gap-8">
+          <button class="btn btn-sm btn-outline" onclick="previewFromEditor('${templateId}')">Preview</button>
           <button class="btn btn-sm btn-outline" onclick="forceSaveOnlyoffice()">Save</button>
           <button class="btn btn-sm btn-danger" onclick="closeOnlyofficeEditor()">Close Editor</button>
         </div>

static/index.html

@@ -140,6 +140,6 @@
 <div class="modal-overlay" id="modal-overlay"></div>
 
 <script src="/static/app.js?v=15"></script>
-<script src="/static/carbone.js?v=15"></script>
+<script src="/static/carbone.js?v=16"></script>
 </body>
 </html>