fix: print table with headers

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

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>