Skip to content

Fix #195: Add Vector PDF export and modal options #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ThisIs-Developer merged 4 commits into from
Jun 30, 2026
Merged

Fix #195: Add Vector PDF export and modal options #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ba273b1
Fix blurry PDF export by adding vector print export
ThisIs-Developer Jun 30, 2026
a1480af
Update UI to use a modal for PDF export selection
ThisIs-Developer Jun 30, 2026
753e274
Update PDF export modal to use selection cards
ThisIs-Developer Jun 30, 2026
de8e20c
Fix PDF export modal selection style syncing
ThisIs-Developer Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,46 @@ <h2 class="h5 m-0">Menu</h2>
</div>
</div>

<!-- PDF Export Options Modal -->
<div id="pdf-export-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="pdf-export-title" aria-hidden="true" style="display:none;">
<div class="reset-modal-box reset-modal-box--wide modal-box">
<div class="modal-header">
<p id="pdf-export-title" class="reset-modal-message">Export PDF Options</p>
<button type="button" class="modal-close-btn" id="pdf-export-close" aria-label="Close PDF export dialog">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="modal-body">
<p class="share-modal-description">Choose how the PDF should be generated.</p>
<div class="share-mode-cards">
<label class="share-mode-card is-selected" id="pdf-export-card-vector" for="pdf-export-mode-vector">
<input type="radio" id="pdf-export-mode-vector" name="pdf-export-mode" value="vector" checked />
<span class="share-card-icon"><i class="bi bi-file-earmark-pdf"></i></span>
<span class="share-card-body">
<span class="share-card-title">Browser Print (Recommended)</span>
<span class="share-card-desc">Faster, suggested for large documents. Note: images, diagrams, etc. might break.</span>
</span>
<span class="share-card-check"><i class="bi bi-check-lg"></i></span>
</label>
<label class="share-mode-card" id="pdf-export-card-raster" for="pdf-export-mode-raster">
<input type="radio" id="pdf-export-mode-raster" name="pdf-export-mode" value="raster" />
<span class="share-card-icon"><i class="bi bi-file-earmark-pdf-fill"></i></span>
<span class="share-card-body">
<span class="share-card-title">Legacy Raster PDF</span>
<span class="share-card-desc">Intelligently plans page breaks to keep images, tables, equations, and diagrams together. Blocks move to the next page when there is not enough space. Recommended for short documents.</span>
</span>
<span class="share-card-check"><i class="bi bi-check-lg"></i></span>
</label>
</div>
</div>
<div class="reset-modal-actions">
<button class="reset-modal-btn reset-modal-cancel" id="pdf-export-cancel">Cancel</button>
<button class="reset-modal-btn reset-modal-confirm" id="pdf-export-confirm">Export</button>
</div>
</div>
</div>


<!-- Find & Replace Floating Panel -->
<div id="find-replace-modal" class="find-replace-panel" role="region" aria-label="Find and Replace" style="display:none;">
<div class="find-replace-header" id="find-replace-drag-handle">
Expand Down
49 changes: 44 additions & 5 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,14 @@ document.addEventListener("DOMContentLoaded", async function () {
const exportMd = document.getElementById("export-md");
const exportHtml = document.getElementById("export-html");
const exportPdf = document.getElementById("export-pdf");
const pdfExportModal = document.getElementById("pdf-export-modal");
const pdfExportClose = document.getElementById("pdf-export-close");
const pdfExportCancelBtn = document.getElementById("pdf-export-cancel");
const pdfExportConfirmBtn = document.getElementById("pdf-export-confirm");
const pdfExportCardVector = document.getElementById("pdf-export-card-vector");
const pdfExportCardRaster = document.getElementById("pdf-export-card-raster");
const pdfExportModeVector = document.getElementById("pdf-export-mode-vector");
const pdfExportModeRaster = document.getElementById("pdf-export-mode-raster");
const exportPng = document.getElementById("export-png");
const copyMarkdownButton = document.getElementById("copy-markdown-button");
const dragOverlay = document.getElementById("drag-overlay");
Expand Down Expand Up @@ -10948,13 +10956,43 @@ document.addEventListener("DOMContentLoaded", async function () {
// End Oversized Graphics Scaling Functions
// ============================================

exportPdf.addEventListener("click", async function (event) {
pdfExportClose?.addEventListener("click", () => closeAppModal(pdfExportModal));

exportPdf.addEventListener("click", function (event) {
event.preventDefault();
logPdfExportDebug("PDF export button clicked!");
if (activePdfExport) {
logPdfExportDebug("PDF export already active, ignoring click");
return;
openAppModal(pdfExportModal);
});

function syncPdfExportCardStyles() {
if (pdfExportModeVector?.checked) {
pdfExportCardVector?.classList.add('is-selected');
pdfExportCardRaster?.classList.remove('is-selected');
} else {
pdfExportCardRaster?.classList.add('is-selected');
pdfExportCardVector?.classList.remove('is-selected');
}
}

pdfExportModeVector?.addEventListener('change', syncPdfExportCardStyles);
pdfExportModeRaster?.addEventListener('change', syncPdfExportCardStyles);

pdfExportCancelBtn?.addEventListener("click", () => closeAppModal(pdfExportModal));

pdfExportConfirmBtn?.addEventListener("click", async function (event) {
event.preventDefault();
closeAppModal(pdfExportModal);

const selectedMode = document.querySelector('input[name="pdf-export-mode"]:checked')?.value;

if (selectedMode === "vector") {
logPdfExportDebug("PDF (Vector) export button clicked!");
window.print();
} else if (selectedMode === "raster") {
logPdfExportDebug("PDF export button clicked!");
if (activePdfExport) {
logPdfExportDebug("PDF export already active, ignoring click");
return;
}

const progressState = createPdfProgressState();
activePdfExport = progressState;
Expand Down Expand Up @@ -11268,6 +11306,7 @@ document.addEventListener("DOMContentLoaded", async function () {
} finally {
cleanupPdfExport(progressState);
}
}
});

exportPng.addEventListener("click", async function (event) {
Expand Down
28 changes: 28 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4978,3 +4978,31 @@ html[data-theme="dark"] .mermaid svg {
}




@media print {
.app-header, .tab-bar, .markdown-format-toolbar, .editor-pane, .resize-divider, .mobile-menu, #mobile-menu-overlay, .pdf-progress-overlay {
display: none !important;
}
.preview-pane {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
overflow: visible !important;
display: block !important;
position: static !important;
flex: none !important;
}
.app-container, .content-container, .markdown-body {
height: auto !important;
overflow: visible !important;
display: block !important;
position: static !important;
}
body, html {
height: auto !important;
overflow: visible !important;
background: white !important;
}
}

Loading