ultisuite-client/components/drive/richtext/docs-body-margin-masks.tsx
R3D347HR4Y 2a7c153748
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
wrap page
2026-06-10 12:48:27 +02:00

66 lines
1.9 KiB
TypeScript

"use client"
import { DOCS_PAGE_GAP_PX } from "@/lib/drive/docs-page-layout-constants"
import type { DocPageLayout } from "@/lib/drive/doc-page-setup"
import {
pageFooterGeometry,
pageHeaderGeometry,
} from "@/lib/drive/docs-header-footer-layout"
/** Hides body text that bleeds into header/footer margin bands on each page. */
export function DocsBodyMarginMasks({
pageCount,
pageLayout,
pageWidth,
pageHeight,
pageColor,
pageRegionHeights,
}: {
pageCount: number
pageLayout: DocPageLayout
pageWidth: number
pageHeight: number
pageColor: string
pageRegionHeights?: Record<string, number>
}) {
return (
<>
{Array.from({ length: pageCount }, (_, index) => {
const pageTop = index * (pageHeight + DOCS_PAGE_GAP_PX)
const header = pageHeaderGeometry(pageLayout, pageTop, index)
const footer = pageFooterGeometry(pageLayout, pageTop, pageHeight, index)
const headerHeight =
pageRegionHeights?.[`header-${index}`] ?? header.zoneHeight
const footerHeight =
pageRegionHeights?.[`footer-${index}`] ?? footer.zoneHeight
const headerBottom = header.zoneTop + headerHeight
const footerTop = footer.zoneBottom - footerHeight
return (
<div key={`body-mask-${index}`} aria-hidden>
<div
className="pointer-events-none absolute z-[15]"
style={{
top: pageTop,
left: 0,
width: pageWidth,
height: headerBottom,
backgroundColor: pageColor,
}}
/>
<div
className="pointer-events-none absolute z-[15]"
style={{
top: footerTop,
left: 0,
width: pageWidth,
height: pageTop + pageHeight - footerTop,
backgroundColor: pageColor,
}}
/>
</div>
)
})}
</>
)
}