diff --git a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte index 50ea48d5f9..a3af99dd42 100644 --- a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte +++ b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte @@ -498,7 +498,7 @@ style="display: none" on:change={fileSelected} /> -
+
0) { + const printHead = document.createElement('thead') + printHead.append(...headerRows) + printTable.insertBefore(printHead, printBody) + } + } + + printTableContainer.replaceChildren(printTable) + } + + function handleAfterPrint (): void { + printTableContainer.replaceChildren() + } + + function handlePrintMediaChange (event: MediaQueryListEvent): void { + if (event.matches) { + handleBeforePrint() + } else { + handleAfterPrint() + } + } onMount(() => { updateColumns() + printMediaQuery = window.matchMedia('print') + window.addEventListener('beforeprint', handleBeforePrint) + window.addEventListener('afterprint', handleAfterPrint) + printMediaQuery.addEventListener('change', handlePrintMediaChange) }) onDestroy(() => { editor.off('selectionUpdate', handleSelectionUpdate) + window.removeEventListener('beforeprint', handleBeforePrint) + window.removeEventListener('afterprint', handleAfterPrint) + printMediaQuery?.removeEventListener('change', handlePrintMediaChange) }) function onScroll (event: Event): void { @@ -108,6 +149,7 @@
+
{ onScroll(e) }}> @@ -213,5 +255,44 @@ } } } + + .table-print { + display: none; + } + } + + @media print { + .table-wrapper { + width: 100%; + max-width: none; + margin: 0; + + .table-scroller { + display: none; + } + + .table-print { + display: block; + + :global(table) { + width: 100%; + border-collapse: collapse !important; + border-spacing: 0 !important; + } + + :global(tr), + :global(td), + :global(th) { + break-inside: avoid; + page-break-inside: avoid; + border-right: 0.5px solid var(--text-editor-table-border-color) !important; + border-bottom: 0.5px solid var(--text-editor-table-border-color) !important; + } + } + + .table-toolbar-components { + display: none; + } + } }