fix: fit wide tables when printing, keep editor panes from collapsing, rename Upload to Select in Markdown to PDF

src/css/markdown-editor.css

@@ -115,7 +115,7 @@
 /* Split View Container */
 .md-editor-main {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 1rem;
   height: 600px;
   border: 1px solid rgb(55, 65, 81);
@@ -127,6 +127,7 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  min-width: 0;
   background: rgb(31, 41, 55);
 }
 
@@ -284,6 +285,22 @@
   padding-left: 2em;
 }
 
+.md-editor-preview ul {
+  list-style-type: disc;
+}
+
+.md-editor-preview ul ul {
+  list-style-type: circle;
+}
+
+.md-editor-preview ul ul ul {
+  list-style-type: square;
+}
+
+.md-editor-preview ol {
+  list-style-type: decimal;
+}
+
 .md-editor-preview li {
   margin: 0.25em 0;
 }
@@ -559,7 +576,6 @@
 
 /* Print Styles */
 @media print {
-
   /* Reset all backgrounds, margins, and padding */
   html,
   body {
@@ -584,10 +600,10 @@
   nav,
   footer,
   #back-to-tools,
-  .bg-gray-800>h1.text-2xl,
-  .bg-gray-800>p.text-gray-400,
-  #markdown-editor-container~h1,
-  #markdown-editor-container~p {
+  .bg-gray-800 > h1.text-2xl,
+  .bg-gray-800 > p.text-gray-400,
+  #markdown-editor-container ~ h1,
+  #markdown-editor-container ~ p {
     display: none !important;
   }
 
@@ -600,7 +616,7 @@
   .py-8,
   .px-4,
   #markdown-editor-container,
-  [class*="container"] {
+  [class*='container'] {
     padding: 0 !important;
     margin: 0 !important;
     background: white !important;
@@ -646,6 +662,7 @@
     background: white !important;
     color: black !important;
     padding: 0 !important;
+    overflow-wrap: break-word;
   }
 
   .md-editor-preview h1,
@@ -658,8 +675,8 @@
     page-break-after: avoid;
   }
 
-  .md-editor-preview>h1:first-child,
-  .md-editor-preview>*:first-child {
+  .md-editor-preview > h1:first-child,
+  .md-editor-preview > *:first-child {
     margin-top: 0 !important;
   }
 
@@ -682,10 +699,13 @@
     background: #f6f8fa !important;
     border: 1px solid #e1e4e8 !important;
     page-break-inside: avoid;
+    white-space: pre-wrap !important;
+    overflow-wrap: anywhere;
   }
 
   .md-editor-preview pre code {
     color: #24292e !important;
+    white-space: pre-wrap !important;
   }
 
   .md-editor-preview blockquote {
@@ -697,6 +717,11 @@
     page-break-inside: avoid;
   }
 
+  .md-editor-preview table.md-table-break-anywhere th,
+  .md-editor-preview table.md-table-break-anywhere td {
+    overflow-wrap: anywhere;
+  }
+
   .md-editor-preview th,
   .md-editor-preview td {
     border-color: #e1e4e8 !important;
@@ -750,7 +775,7 @@
   }
 
   .md-editor-main {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     height: auto;
     gap: 0;
   }
@@ -814,4 +839,4 @@
   .md-editor-actions {
     gap: 0.375rem;
   }
-}
+}

src/js/utils/markdown-editor.ts

@@ -75,6 +75,9 @@ export interface MarkdownEditorOptions {
 
 export type { MarkdownItOptions } from '@/types';
 
+const MIN_TABLE_ZOOM = 0.6;
+const TABLE_BREAK_CLASS = 'md-table-break-anywhere';
+
 const DEFAULT_MARKDOWN = `# Welcome to BentoPDF Markdown Editor
 
 This is a **live preview** markdown editor with full plugin support.
@@ -342,7 +345,7 @@ export class MarkdownEditor {
               <input type="file" accept=".md,.markdown,.txt" id="mdFileInput" style="display: none;" />
               <button class="md-editor-btn md-editor-btn-secondary" id="mdUpload">
                 <i data-lucide="upload"></i>
-                <span data-i18n="tools:markdownToPdf.btnUpload">Upload</span>
+                <span data-i18n="tools:markdownToPdf.btnUpload">Select</span>
               </button>
               <div class="theme-toggle">
                 <i data-lucide="moon" width="16" height="16"></i>
@@ -439,6 +442,13 @@ export class MarkdownEditor {
       this.updatePreview();
     });
 
+    window
+      .matchMedia('print')
+      .addEventListener('change', (event) =>
+        this.fitTablesToPage(event.matches)
+      );
+    window.addEventListener('afterprint', () => this.fitTablesToPage(false));
+
     // Sync scroll
     const syncScrollBtn = document.getElementById('mdSyncScroll');
     syncScrollBtn?.addEventListener('click', () => {
@@ -752,6 +762,26 @@ export class MarkdownEditor {
     });
   }
 
+  private fitTablesToPage(printing: boolean): void {
+    if (!this.preview) return;
+    const available = this.preview.clientWidth;
+    for (const table of this.preview.querySelectorAll('table')) {
+      table.style.zoom = '';
+      table.classList.remove(TABLE_BREAK_CLASS);
+      if (!printing || table.scrollWidth <= available) continue;
+      if (available / table.scrollWidth < MIN_TABLE_ZOOM) {
+        table.classList.add(TABLE_BREAK_CLASS);
+      }
+      let zoom = 1;
+      for (let attempt = 0; attempt < 5; attempt++) {
+        const width = table.getBoundingClientRect().width;
+        if (width <= available) break;
+        zoom = Math.floor(((zoom * available) / width) * 100) / 100;
+        table.style.zoom = String(zoom);
+      }
+    }
+  }
+
   private exportPdf(): void {
     // Use browser's native print functionality
     window.print();