From 4d3e8b964fdbc95e6a5607b543fa23403d9d4a86 Mon Sep 17 00:00:00 2001 From: alam00000 Date: Thu, 22 Oct 2026 13:34:35 +0530 Subject: [PATCH] fix: fit wide tables when printing, keep editor panes from collapsing, rename Upload to Select in Markdown to PDF --- public/locales/ar/tools.json | 2 +- public/locales/be/tools.json | 2 +- public/locales/ca/tools.json | 2 +- public/locales/da/tools.json | 2 +- public/locales/de/tools.json | 2 +- public/locales/en/tools.json | 2 +- public/locales/es/tools.json | 2 +- public/locales/fa/tools.json | 2 +- public/locales/fr/tools.json | 2 +- public/locales/id/tools.json | 2 +- public/locales/it/tools.json | 2 +- public/locales/ja/tools.json | 2 +- public/locales/ko/tools.json | 2 +- public/locales/nl/tools.json | 2 +- public/locales/pl/tools.json | 2 +- public/locales/pt/tools.json | 2 +- public/locales/ru/tools.json | 2 +- public/locales/sk/tools.json | 2 +- public/locales/sv/tools.json | 2 +- public/locales/tr/tools.json | 2 +- public/locales/uk/tools.json | 2 +- public/locales/vi/tools.json | 2 +- public/locales/zh-TW/tools.json | 2 +- public/locales/zh/tools.json | 2 +- src/css/markdown-editor.css | 47 +++++++++++++++++++++++++-------- src/js/utils/markdown-editor.ts | 32 +++++++++++++++++++++- 26 files changed, 91 insertions(+), 36 deletions(-) diff --git a/public/locales/ar/tools.json b/public/locales/ar/tools.json index bbe24e44..12f7c8aa 100644 --- a/public/locales/ar/tools.json +++ b/public/locales/ar/tools.json @@ -840,7 +840,7 @@ "subtitle": "اكتب أو الصق Markdown وصدّره كـ PDF منسق بشكل جميل.", "paneMarkdown": "Markdown", "panePreview": "معاينة", - "btnUpload": "رفع", + "btnUpload": "اختيار", "btnSyncScroll": "مزامنة التمرير", "btnSettings": "الإعدادات", "btnExportPdf": "تصدير PDF", diff --git a/public/locales/be/tools.json b/public/locales/be/tools.json index 1aa14b54..1fd40b3f 100644 --- a/public/locales/be/tools.json +++ b/public/locales/be/tools.json @@ -842,7 +842,7 @@ "subtitle": "Напісаць або ўставіць Markdown і экспартаваць яго ў прыгожа аформлены PDF.", "paneMarkdown": "Markdown", "panePreview": "Папярэдні прагляд", - "btnUpload": "Запампаваць", + "btnUpload": "Выбраць", "btnSyncScroll": "Сінхранізацыя пракруткі", "btnSettings": "Налады", "btnExportPdf": "Экспартаваць PDF", diff --git a/public/locales/ca/tools.json b/public/locales/ca/tools.json index 6cf611bf..5efa0cd7 100644 --- a/public/locales/ca/tools.json +++ b/public/locales/ca/tools.json @@ -864,7 +864,7 @@ "subtitle": "Escriu o enganxa Markdown i exporta'l com un PDF amb un format acurat.", "paneMarkdown": "Markdown", "panePreview": "Previsualització", - "btnUpload": "Puja", + "btnUpload": "Selecciona", "btnSyncScroll": "Sincronitza el desplaçament", "btnSettings": "Configuració", "btnExportPdf": "Exporta el PDF", diff --git a/public/locales/da/tools.json b/public/locales/da/tools.json index 31791d3e..4ea3503f 100644 --- a/public/locales/da/tools.json +++ b/public/locales/da/tools.json @@ -840,7 +840,7 @@ "subtitle": "Skriv eller indsæt Markdown og eksportér som en flot formateret PDF.", "paneMarkdown": "Markdown", "panePreview": "Forhåndsvisning", - "btnUpload": "Upload", + "btnUpload": "Vælg", "btnSyncScroll": "Synkron rulning", "btnSettings": "Indstillinger", "btnExportPdf": "Eksportér PDF", diff --git a/public/locales/de/tools.json b/public/locales/de/tools.json index dda99cf7..8131602a 100644 --- a/public/locales/de/tools.json +++ b/public/locales/de/tools.json @@ -840,7 +840,7 @@ "subtitle": "Schreiben oder fügen Sie Markdown ein und exportieren Sie es als schön formatiertes PDF.", "paneMarkdown": "Markdown", "panePreview": "Vorschau", - "btnUpload": "Hochladen", + "btnUpload": "Auswählen", "btnSyncScroll": "Sync-Scrollen", "btnSettings": "Einstellungen", "btnExportPdf": "PDF exportieren", diff --git a/public/locales/en/tools.json b/public/locales/en/tools.json index 79aee3ec..16128407 100644 --- a/public/locales/en/tools.json +++ b/public/locales/en/tools.json @@ -856,7 +856,7 @@ "subtitle": "Write or paste Markdown and export it as a beautifully formatted PDF.", "paneMarkdown": "Markdown", "panePreview": "Preview", - "btnUpload": "Upload", + "btnUpload": "Select", "btnSyncScroll": "Sync Scroll", "btnSettings": "Settings", "btnExportPdf": "Export PDF", diff --git a/public/locales/es/tools.json b/public/locales/es/tools.json index ea20b951..680d97f5 100644 --- a/public/locales/es/tools.json +++ b/public/locales/es/tools.json @@ -840,7 +840,7 @@ "subtitle": "Escribe o pega Markdown y expórtalo como un PDF bellamente formateado.", "paneMarkdown": "Markdown", "panePreview": "Vista Previa", - "btnUpload": "Cargar", + "btnUpload": "Seleccionar", "btnSyncScroll": "Sincronizar Desplazamiento", "btnSettings": "Configuración", "btnExportPdf": "Exportar PDF", diff --git a/public/locales/fa/tools.json b/public/locales/fa/tools.json index d38580b4..9f866770 100644 --- a/public/locales/fa/tools.json +++ b/public/locales/fa/tools.json @@ -856,7 +856,7 @@ "subtitle": "Markdown بنویسید یا بچسبانید و آن را به‌صورت یک PDF زیبا برون‌ریزی کنید.", "paneMarkdown": "Markdown", "panePreview": "پیش‌نمایش", - "btnUpload": "بارگذاری", + "btnUpload": "انتخاب", "btnSyncScroll": "پیمایش هم‌زمان", "btnSettings": "تنظیمات", "btnExportPdf": "برون‌ریزی PDF", diff --git a/public/locales/fr/tools.json b/public/locales/fr/tools.json index 2cf90570..93e1dcff 100644 --- a/public/locales/fr/tools.json +++ b/public/locales/fr/tools.json @@ -855,7 +855,7 @@ "subtitle": "Écrire ou coller du Markdown et l’exporter en PDF avec une mise en forme soignée.", "paneMarkdown": "Markdown", "panePreview": "Aperçu", - "btnUpload": "Téléverser", + "btnUpload": "Sélectionner", "btnSyncScroll": "Synchroniser le défilement", "btnSettings": "Paramètres", "btnExportPdf": "Exporter en PDF", diff --git a/public/locales/id/tools.json b/public/locales/id/tools.json index af798e0b..d7648eac 100644 --- a/public/locales/id/tools.json +++ b/public/locales/id/tools.json @@ -840,7 +840,7 @@ "subtitle": "Tulis atau tempel Markdown dan ekspor sebagai PDF yang diformat dengan indah.", "paneMarkdown": "Markdown", "panePreview": "Pratinjau", - "btnUpload": "Unggah", + "btnUpload": "Pilih", "btnSyncScroll": "Sinkron Gulir", "btnSettings": "Pengaturan", "btnExportPdf": "Ekspor PDF", diff --git a/public/locales/it/tools.json b/public/locales/it/tools.json index 7a4c9f08..e26441f5 100644 --- a/public/locales/it/tools.json +++ b/public/locales/it/tools.json @@ -840,7 +840,7 @@ "subtitle": "Scrivi o incolla Markdown ed esportalo come un PDF ben formattato.", "paneMarkdown": "Markdown", "panePreview": "Anteprima", - "btnUpload": "Carica", + "btnUpload": "Seleziona", "btnSyncScroll": "Sincronizza scorrimento", "btnSettings": "Impostazioni", "btnExportPdf": "Esporta PDF", diff --git a/public/locales/ja/tools.json b/public/locales/ja/tools.json index f7bcc395..47621da8 100644 --- a/public/locales/ja/tools.json +++ b/public/locales/ja/tools.json @@ -840,7 +840,7 @@ "subtitle": "Markdownを記述または貼り付けて、見栄えの良いPDFとしてエクスポートします。", "paneMarkdown": "マークダウン", "panePreview": "プレビュー", - "btnUpload": "アップロード", + "btnUpload": "選択", "btnSyncScroll": "同期スクロール", "btnSettings": "設定", "btnExportPdf": "PDFをエクスポート", diff --git a/public/locales/ko/tools.json b/public/locales/ko/tools.json index a52649ca..d3d36196 100644 --- a/public/locales/ko/tools.json +++ b/public/locales/ko/tools.json @@ -840,7 +840,7 @@ "subtitle": "Markdown을 작성하거나 붙여넣고 깔끔하게 서식이 적용된 PDF로 내보냅니다.", "paneMarkdown": "Markdown", "panePreview": "미리보기", - "btnUpload": "업로드", + "btnUpload": "선택", "btnSyncScroll": "스크롤 동기화", "btnSettings": "설정", "btnExportPdf": "PDF 내보내기", diff --git a/public/locales/nl/tools.json b/public/locales/nl/tools.json index ce5adb42..1059a8f4 100644 --- a/public/locales/nl/tools.json +++ b/public/locales/nl/tools.json @@ -840,7 +840,7 @@ "subtitle": "Schrijf of plak Markdown en zet het om in een opgemaakte PDF.", "paneMarkdown": "Markdown", "panePreview": "Voorbeeld", - "btnUpload": "Laden", + "btnUpload": "Selecteren", "btnSyncScroll": "Synchroon bladeren", "btnSettings": "Instellingen", "btnExportPdf": "PDF exporteren", diff --git a/public/locales/pl/tools.json b/public/locales/pl/tools.json index 4dabba06..414b2bd5 100644 --- a/public/locales/pl/tools.json +++ b/public/locales/pl/tools.json @@ -677,7 +677,7 @@ "subtitle": "Napisz lub wklej Markdown i wyeksportuj jako pięknie sformatowany PDF.", "paneMarkdown": "Markdown", "panePreview": "Podgląd", - "btnUpload": "Prześlij", + "btnUpload": "Wybierz", "btnSyncScroll": "Zsynchronizowane przewijanie", "btnSettings": "Ustawienia", "btnExportPdf": "Eksportuj PDF", diff --git a/public/locales/pt/tools.json b/public/locales/pt/tools.json index 0482a6dd..0fa23d79 100644 --- a/public/locales/pt/tools.json +++ b/public/locales/pt/tools.json @@ -840,7 +840,7 @@ "subtitle": "Escreva ou cole Markdown e exporte como um belo formato PDF.", "paneMarkdown": "Markdown", "panePreview": "Pré-visualizar", - "btnUpload": "Upload", + "btnUpload": "Selecionar", "btnSyncScroll": "Sincronizar Scroll", "btnSettings": "Configurações", "btnExportPdf": "Exportar PDF", diff --git a/public/locales/ru/tools.json b/public/locales/ru/tools.json index 19c38a10..0f7e931d 100644 --- a/public/locales/ru/tools.json +++ b/public/locales/ru/tools.json @@ -840,7 +840,7 @@ "subtitle": "Написать или вставить Markdown, чтобы экспортировать его в виде отформатированного PDF.", "paneMarkdown": "Markdown", "panePreview": "Предварительный просмотр", - "btnUpload": "Загрузить", + "btnUpload": "Выбрать", "btnSyncScroll": "Синхронизировать прокрутку", "btnSettings": "Настройки", "btnExportPdf": "Экспортировать PDF", diff --git a/public/locales/sk/tools.json b/public/locales/sk/tools.json index abc81e4c..b4020a87 100644 --- a/public/locales/sk/tools.json +++ b/public/locales/sk/tools.json @@ -840,7 +840,7 @@ "subtitle": "Napíšte alebo vložte Markdown a exportujte ho ako krásne naformátované PDF.", "paneMarkdown": "Markdown", "panePreview": "Náhľad", - "btnUpload": "Nahrať", + "btnUpload": "Vybrať", "btnSyncScroll": "Synchrónne posúvanie", "btnSettings": "Nastavenia", "btnExportPdf": "Exportovať PDF", diff --git a/public/locales/sv/tools.json b/public/locales/sv/tools.json index d714ac4b..939e3bc1 100644 --- a/public/locales/sv/tools.json +++ b/public/locales/sv/tools.json @@ -840,7 +840,7 @@ "subtitle": "Skriv eller klistra in Markdown och exportera som en vackert formaterad PDF.", "paneMarkdown": "Markdown", "panePreview": "Förhandsvisning", - "btnUpload": "Ladda upp", + "btnUpload": "Välj", "btnSyncScroll": "Synkronisera scroll", "btnSettings": "Inställningar", "btnExportPdf": "Exportera PDF", diff --git a/public/locales/tr/tools.json b/public/locales/tr/tools.json index 922fc43e..7bf39a63 100644 --- a/public/locales/tr/tools.json +++ b/public/locales/tr/tools.json @@ -840,7 +840,7 @@ "subtitle": "Write or paste Markdown and export it as a beautifully formatted PDF.", "paneMarkdown": "Markdown", "panePreview": "Preview", - "btnUpload": "Upload", + "btnUpload": "Seç", "btnSyncScroll": "Sync Scroll", "btnSettings": "Settings", "btnExportPdf": "Export PDF", diff --git a/public/locales/uk/tools.json b/public/locales/uk/tools.json index 8354d3e0..3828b80d 100644 --- a/public/locales/uk/tools.json +++ b/public/locales/uk/tools.json @@ -840,7 +840,7 @@ "subtitle": "Напишіть або вставте Markdown і експортуйте його у красиво оформлений PDF.", "paneMarkdown": "Markdown", "panePreview": "Попередній перегляд", - "btnUpload": "Завантажити", + "btnUpload": "Вибрати", "btnSyncScroll": "Синхронізувати прокрутку", "btnSettings": "Налаштування", "btnExportPdf": "Експортувати у PDF", diff --git a/public/locales/vi/tools.json b/public/locales/vi/tools.json index b5258d72..62b2741d 100644 --- a/public/locales/vi/tools.json +++ b/public/locales/vi/tools.json @@ -840,7 +840,7 @@ "subtitle": "Viết hoặc dán Markdown và xuất nó thành PDF được định dạng đẹp.", "paneMarkdown": "Markdown", "panePreview": "Xem trước", - "btnUpload": "Tải lên", + "btnUpload": "Chọn", "btnSyncScroll": "Cuộn đồng bộ", "btnSettings": "Cài đặt", "btnExportPdf": "Xuất PDF", diff --git a/public/locales/zh-TW/tools.json b/public/locales/zh-TW/tools.json index d0a6e195..8b2845a8 100644 --- a/public/locales/zh-TW/tools.json +++ b/public/locales/zh-TW/tools.json @@ -840,7 +840,7 @@ "subtitle": "編寫或貼上 Markdown 並匯出為精美格式的 PDF。", "paneMarkdown": "Markdown", "panePreview": "預覽", - "btnUpload": "上傳", + "btnUpload": "選擇", "btnSyncScroll": "同步捲動", "btnSettings": "設定", "btnExportPdf": "匯出 PDF", diff --git a/public/locales/zh/tools.json b/public/locales/zh/tools.json index dbf7a541..2f6635cc 100644 --- a/public/locales/zh/tools.json +++ b/public/locales/zh/tools.json @@ -840,7 +840,7 @@ "subtitle": "编写或粘贴 Markdown 并将其导出为精美格式的 PDF。", "paneMarkdown": "Markdown", "panePreview": "预览", - "btnUpload": "上传", + "btnUpload": "选择", "btnSyncScroll": "同步滚动", "btnSettings": "设置", "btnExportPdf": "导出 PDF", diff --git a/src/css/markdown-editor.css b/src/css/markdown-editor.css index 3852036e..1edecdb8 100644 --- a/src/css/markdown-editor.css +++ b/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; } -} \ No newline at end of file +} diff --git a/src/js/utils/markdown-editor.ts b/src/js/utils/markdown-editor.ts index 5f603097..028f5cf6 100644 --- a/src/js/utils/markdown-editor.ts +++ b/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 {
@@ -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();