feat: get rid of libraries, find native solution

Signed-off-by: Grigory Vodyanov <[email protected]>

package.json

@@ -60,7 +60,6 @@
     "debounce-promise": "^3.1.2",
     "dompurify": "^3.2.3",
     "html-to-text": "^9.0.5",
-    "html2pdf.js": "^0.9.0",
     "ical.js": "^1.5.0",
     "iframe-resizer": "^4.4.5",
     "js-base64": "^3.7.7",

src/components/MenuEnvelope.vue

@@ -5,7 +5,7 @@
 <!-- Standard Actions menu for Envelopes -->
 <template>
 	<div>
-		<template v-if="!localMoreActionsOpen && !snoozeActionsOpen && !isPrinting">
+		<template v-if="!localMoreActionsOpen && !snoozeActionsOpen">
 			<ActionButton v-if="hasWriteAcl"
 				class="action--primary"
 				:close-after-click="true"
@@ -243,7 +243,6 @@ import logger from '../logger.js'
 import moment from '@nextcloud/moment'
 import { mapStores, mapState } from 'pinia'
 import useMainStore from '../store/mainStore.js'
-import html2pdf from 'html2pdf.js';
 
 export default {
 	name: 'MenuEnvelope',
@@ -309,7 +308,6 @@ export default {
 			snoozeActionsOpen: false,
 			forwardMessages: this.envelope.databaseId,
 			customSnoozeDateTime: new Date(moment().add(2, 'hours').minute(0).second(0).valueOf()),
-			isPrinting: false,
 		}
 	},
 	computed: {
@@ -545,33 +543,7 @@ export default {
 			this.onSnooze(this.customSnoozeDateTime.valueOf())
 		},
 		onPrint() {
-			// needed for the actions menu to actually close and not be shown in the print preview
-			this.isPrinting = true
-
-			setTimeout(() => {
-				try {
-					const iframe = document.getElementById('iFrameResizer0')
-
-					iframe.onload = () => {
-						const iframeDocument = iframe.contentDocument || iframe.contentWindow.document
-						const iframeBody = iframeDocument.body
-
-						html2pdf()
-							.from(iframeBody)
-							.set({
-								filename: 'mail.pdf', // Set the filename
-								html2canvas: { scale: 2 },
-								jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
-							})
-					}
-				} catch (error) {
-					showError(t('mail', 'Could not print message'))
-				}
-			}, 100)
-
-			setTimeout(() => {
-				this.isPrinting = false
-			}, 2000)
+			this.$emit('print')
 		},
 	},
 }

src/components/Thread.vue

@@ -45,16 +45,18 @@
 				</div>
 			</div>
 			<ThreadSummary v-if="showSummaryBox" :loading="summaryLoading" :summary="summaryText" />
-			<ThreadEnvelope v-for="env in thread"
+			<ThreadEnvelope v-for="(env, index) in thread"
 				:key="env.databaseId"
 				:envelope="env"
 				:mailbox-id="$route.params.mailboxId"
 				:thread-subject="threadSubject"
 				:expanded="expandedThreads.includes(env.databaseId)"
 				:full-height="thread.length === 1"
+				:thread-index="index"
 				@delete="$emit('delete', env.databaseId)"
 				@move="onMove(env.databaseId)"
-				@toggle-expand="toggleExpand(env.databaseId)" />
+				@toggle-expand="toggleExpand(env.databaseId)"
+				@print="print" />
 		</template>
 	</AppContentDetails>
 </template>
@@ -189,9 +191,11 @@ export default {
 	created() {
 		this.resetThread()
 		window.addEventListener('resize', this.resizeDebounced)
+		window.addEventListener('keydown', this.handleKeyDown)
 	},
 	beforeDestroy() {
 		window.removeEventListener('resize', this.resizeDebounced)
+		window.removeEventListener('keydown', this.handleKeyDown)
 	},
 	methods: {
 		async updateSummary() {
@@ -317,6 +321,40 @@ export default {
 				}
 			}
 		},
+		handleKeyDown(event) {
+			if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+				event.preventDefault()
+
+				this.print()
+			}
+		},
+		print(threadIndex) {
+			setTimeout(() => {
+				try {
+					const messages = Array.from(document.querySelectorAll('.html-message-body'))
+
+					let message
+
+					if (threadIndex !== undefined) {
+						message = messages[threadIndex] ?? messages.pop()
+					} else {
+						// By default, we print the last opened message in the thread
+						message = messages.pop()
+					}
+
+					const iframe = message.querySelector('iframe')
+
+					if (iframe === null) {
+						showError(t('mail', 'Could not print message'))
+						return
+					}
+
+					iframe.contentWindow.print()
+				} catch (error) {
+					showError(t('mail', 'Could not print message'))
+				}
+			}, 100)
+		},
 	},
 }
 </script>
@@ -440,46 +478,6 @@ export default {
 	}
 }
 
-@media print {
-	#mail-thread-header-fields {
-		position: relative;
-	}
-	.app-content-details,
-	.splitpanes__pane-details {
-		max-width: unset !important;
-		width: 100% !important;
-	}
-	#header,
-	.app-navigation,
-	#reply-composer,
-	#forward-button,
-	#mail-message-has-blocked-content,
-	.app-content-list,
-	.message-composer,
-	.splitpanes__pane-list,
-	.mail-message-attachments {
-		display: none !important;
-	}
-	.app-content {
-		margin-left: 0 !important;
-		break-inside: avoid;
-		page-break-inside: avoid;
-		page-break-after: always;
-	}
-	.mail-message-body {
-		margin-bottom: 0 !important;
-	}
-	.app-content-details {
-		min-width: 100% !important;
-	}
-	.action-items, .reply-buttons, .envelope__header__left__unsubscribe {
-		display: none !important;
-	}
-	.envelope {
-		border: none !important;
-	}
-}
-
 .message-source {
 	font-family: monospace;
 	white-space: pre-wrap;

src/components/ThreadEnvelope.vue

@@ -193,7 +193,8 @@
 							@open-move-modal="onOpenMoveModal"
 							@open-event-modal="onOpenEventModal"
 							@open-task-modal="onOpenTaskModal"
-							@open-translation-modal="onOpenTranslationModal" />
+							@open-translation-modal="onOpenTranslationModal"
+							@print="onPrint" />
 					</NcActions>
 					<NcModal v-if="showSourceModal" class="source-modal" @close="onCloseSourceModal">
 						<div class="source-modal-content">
@@ -386,6 +387,10 @@ export default {
 			required: true,
 			type: String,
 		},
+		threadIndex: {
+			required: true,
+			type: Number,
+		},
 	},
 	data() {
 		return {
@@ -905,6 +910,9 @@ export default {
 		onCloseSourceModal() {
 			this.showSourceModal = false
 		},
+		onPrint() {
+			this.$emit('print', this.threadIndex)
+		}
 	},
 }
 </script>