jjsm01/cv-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
root
2026-07-19 07:47:18 +00:00
parent 250d5496ec
commit 7ab407e1b8
2 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
static/carbone.js
View File

@@ -171,8 +171,18 @@ async function previewTemplate(templateId) {
}
const html = await resp.text();
// Show the HTML in a modal with an iframe
const body = '<iframe style="width:100%;height:700px;border:1px solid var(--border);border-radius:8px" srcdoc="' + html.replace(/"/g, '&quot;') + '"></iframe>';
// Wrap the LibreOffice HTML in a styled container that adapts to the app theme.
// 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>

2
static/index.html
View File

@@ -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>