Add printing stylesheet, enables printing of text files

Currently printing will include the menu bar and longer text files will be cropped after the first page.
This enables printing of text documents without any major styling changes,
slightly adjusted margins and added table borders.
This implements the CSS part of #112

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

3 files changed, 115 insertions, 2 deletions

diff --git a/css/print.scss b/css/print.scss
new file mode 100644
index 000000000..bca5c406a
--- /dev/null
+++ b/css/print.scss
@@ -0,0 +1,84 @@
+@media print {
+	@page {
+		size: A4;
+		margin: 2.5cm 2cm 2cm 2.5cm; 
+	}
+
+	body {
+		// position: fixed does not support scrolling and as such only prints one page
+		position: absolute;
+		overflow: visible!important;
+	}
+
+	#viewer[data-handler='text'] {
+		// Hide top border
+		border: none;
+		width: 100%!important;
+		// NcModal uses fixed, which will be cropped when printed
+		position: absolute!important;
+
+		.modal-header {
+			// Hide modal header (close button)
+			display: none!important;
+		}
+		.modal-container {
+			// Make sure top aligned as we hided the menubar */
+			top: 0px;
+			height: fit-content;
+		}
+	}
+
+	.text-editor {
+		.text-menubar {
+			// Hide menu bar
+			display: none!important;
+		}
+		.action-item {
+			// Hide table settings
+			display: none!important;
+		}
+		.editor__content {
+			// Margins set by page rule
+			max-width: 100%;
+		}
+		.text-editor__wrapper {
+			height: fit-content;
+			position: unset;
+		}
+
+		div.ProseMirror {
+			h1, h2, h3, h4, h5 {
+				// orphaned headlines are ugly
+				break-after: avoid;
+			}
+			.image, img, table {
+				// try no page breaks within tables or images
+				break-inside: avoid-page;
+				// Some more indention
+				max-width: 90%!important;
+				margin: 5vw auto 5vw 5%!important;
+			}
+
+			// Add some borders below header and between columns
+			th {
+				color: black!important;
+				font-weight: bold!important;
+				border-width: 0 1px 2px 0!important;
+				border-color: gray!important;
+				border-style: none solid solid none!important;
+			}
+			th:last-of-type {
+				border-width: 0 0 2px 0!important;
+			}
+
+			td {
+				border-style: none solid none none!important;
+				border-width: 1px!important;
+				border-color: gray!important;
+			}
+			td:last-of-type {
+				border: none!important;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index df86bc73c..c3649b889 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -3,7 +3,7 @@
   -
   - @author Julius Härtl <jus@bitgrid.net>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -286,6 +286,12 @@ export default {
 		if (this.active && (this.hasDocumentParameters)) {
 			this.initSession()
 		}
+		if (!this.richWorkspace) {
+			/* If the editor is shown in the viewer we need to hide the content,
+			   if richt workspace is used we **must** not hide the content */
+			window.addEventListener('beforeprint', this.preparePrinting)
+			window.addEventListener('afterprint', this.preparePrinting)
+		}
 		this.$parent.$emit('update:loaded', true)
 	},
 	created() {
@@ -639,6 +645,9 @@ export default {
 
 		async close() {
 			clearInterval(this.saveStatusPolling)
+			window.removeEventListener('beforeprint', this.preparePrinting)
+			window.removeEventListener('afterprint', this.preparePrinting)
+
 			if (this.currentSession && this.$syncService) {
 				try {
 					await this.$syncService.close()
@@ -660,6 +669,17 @@ export default {
 			}
 			return true
 		},
+
+		/** @param {Event} event */
+		preparePrinting(event) {
+			const content = document.getElementById('content')
+			// Hide Content behind modal, this also hides the sidebar if open
+			if (content && event.type === 'beforeprint') {
+				content.style.display = 'none'
+			} else if (content) {
+				content.style.display = ''
+			}
+		},
 	},
 }
 </script>
@@ -725,6 +745,7 @@ export default {
 
 <style lang="scss">
 	@import './../../css/style';
+	@import './../../css/print';
 
 	.text-editor__wrapper {
 		@import './../../css/prosemirror';
diff --git a/src/components/RichTextReader.vue b/src/components/RichTextReader.vue
index 791ef1d49..5df7be147 100644
--- a/src/components/RichTextReader.vue
+++ b/src/components/RichTextReader.vue
@@ -3,7 +3,7 @@
   -
   - @author Julius Härtl <jus@bitgrid.net>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -79,4 +79,12 @@ export default {
 
 <style lang="scss">
 	@import './../../css/prosemirror';
+	@import './../../css/print';
+
+	@media print {
+		// Hide Content behind modal, this also hides the sidebar if open
+		#content {
+			display: none;
+		}
+	}
 </style>