From 63ef99504ef1a1d87438dc8d8b8953378e1862ce Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@xored.com>
Date: Wed, 2 Sep 2026 14:54:02 +0700
Subject: [PATCH] fix: print table with headers

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
---
 .../components/CollaborativeTextEditor.svelte |  2 +-
 .../extension/table/TableNodeView.svelte      | 83 ++++++++++++++++++-
 2 files changed, 83 insertions(+), 2 deletions(-)

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}
 />
-<div class="editorPopupContainer" bind:this={editorPopupContainer}></div>
+<div class="editorPopupContainer no-print" bind:this={editorPopupContainer}></div>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
diff --git a/plugins/text-editor-resources/src/components/extension/table/TableNodeView.svelte b/plugins/text-editor-resources/src/components/extension/table/TableNodeView.svelte
index 191a4991ea..0457d537d2 100644
--- a/plugins/text-editor-resources/src/components/extension/table/TableNodeView.svelte
+++ b/plugins/text-editor-resources/src/components/extension/table/TableNodeView.svelte
@@ -1,6 +1,7 @@
 <!--
 //
 // Copyright © 2023, 2024 Hardcore Engineering Inc.
+// Copyright © 2026 TraceX SAS.
 //
 // Licensed under the Eclipse Public License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License. You may
@@ -21,7 +22,6 @@
   import { findTable, insertColumn, insertRow } from './utils'
   import { TableMap, updateColumnsOnResize } from '@tiptap/pm/tables'
   import { getToolbarCursor, setToolbarMeta } from '../toolbar/toolbar'
-  import { getTableCursor } from './table'
 
   export let node: NodeViewProps['node']
   export let getPos: NodeViewProps['getPos']
@@ -77,13 +77,54 @@
 
   let tableElement: HTMLTableElement
   let colgroupElement: HTMLTableColElement
+  let printTableContainer: HTMLDivElement
+  let printMediaQuery: MediaQueryList | undefined
+
+  function handleBeforePrint (): void {
+    const printTable = tableElement.cloneNode(true) as HTMLTableElement
+    const printBody = printTable.tBodies.item(0)
+    if (printBody !== null) {
+      const headerRows: HTMLTableRowElement[] = []
+      for (const row of Array.from(printBody.rows)) {
+        if (row.cells[0]?.tagName !== 'TH') break
+        headerRows.push(row)
+      }
+
+      if (headerRows.length > 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 @@
 <!-- prettier-ignore -->
 <NodeViewWrapper class="table-node-wrapper" data-drag-handle>
   <div class="table-wrapper" class:table-selected={editable && focused}>
+    <div class="table-print" bind:this={printTableContainer}></div>
     <div class="table-scroller" on:scroll={(e) => { onScroll(e) }}>
       <table class={className} bind:this={tableElement}>
         <colgroup bind:this={colgroupElement} />
@@ -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;
+      }
+    }
   }
 </style>