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>

Author: susnux

css/print.scss

@@ -0,0 +1,78 @@
+@media print {
+	@page {
+		size: A4;
+		margin: 2.5cm 2cm 2cm 2.5cm; 
+	}
+
+	#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;
+			}
+		}
+	}
+}

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';

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>