578 lines
20 KiB
TypeScript
578 lines
20 KiB
TypeScript
"use client"
|
||
|
||
import { memo, useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react"
|
||
import { EditorContent, type Editor } from "@tiptap/react"
|
||
import type { DocPageLayout, DocPageSetup } from "@/lib/drive/doc-page-setup"
|
||
import {
|
||
DocsHeaderFooterBand,
|
||
type DocsHeaderFooterEditTarget,
|
||
type DocsHeaderFooterRegion,
|
||
} from "@/components/drive/richtext/docs-header-footer-region"
|
||
import { DocsBodyMarginMasks } from "@/components/drive/richtext/docs-body-margin-masks"
|
||
import {
|
||
DOCS_CANVAS_PADDING_TOP_NARROW_PX,
|
||
DOCS_CANVAS_PADDING_Y_PX,
|
||
DOCS_PAGE_GAP_PX,
|
||
} from "@/lib/drive/docs-page-layout-constants"
|
||
import {
|
||
effectiveMarginsPx,
|
||
} from "@/lib/drive/docs-header-footer-layout"
|
||
import {
|
||
computePageCount,
|
||
computePageMetrics,
|
||
computeProseMinHeight,
|
||
computeStackHeight,
|
||
} from "@/lib/drive/docs-page-metrics"
|
||
import { docsPageLengthToScreen, docsZoomToScale } from "@/lib/drive/docs-ruler-scale"
|
||
import { cn } from "@/lib/utils"
|
||
import { focusEditorAtPointer } from "@/lib/drive/focus-editor-at-pointer"
|
||
import { applyPageFlowLayout, computeSimulatedLayoutHeight, readPageFlowMetrics } from "@/lib/drive/extensions/docs-page-flow-decoration"
|
||
|
||
/** Total layout height inside ProseMirror (blocks + flow spacers). */
|
||
function measureProseContentHeight(prose: HTMLElement): number {
|
||
const metrics = readPageFlowMetrics(prose)
|
||
if (!metrics) return 0
|
||
|
||
const blocks: Array<{ height: number }> = []
|
||
for (const child of prose.children) {
|
||
const el = child as HTMLElement
|
||
if (el.classList.contains("docs-page-flow-spacer")) continue
|
||
const style = getComputedStyle(el)
|
||
const marginBottom = parseFloat(style.marginBottom) || 0
|
||
blocks.push({ height: el.offsetHeight + marginBottom })
|
||
}
|
||
|
||
if (blocks.length === 0) return 0
|
||
|
||
const simulated = computeSimulatedLayoutHeight(
|
||
blocks,
|
||
metrics.bodyAreaH,
|
||
metrics.interPageSpacer
|
||
)
|
||
|
||
let maxBottom = 0
|
||
for (const child of prose.children) {
|
||
const el = child as HTMLElement
|
||
maxBottom = Math.max(maxBottom, el.offsetTop + el.offsetHeight)
|
||
}
|
||
|
||
return Math.max(simulated, maxBottom)
|
||
}
|
||
|
||
function DocsPageViewInner({
|
||
editor,
|
||
pageLayout,
|
||
zoom,
|
||
editable,
|
||
showLayout,
|
||
showNonPrintableChars,
|
||
editorMode,
|
||
canvasRef: canvasRefProp,
|
||
onPageCountChange,
|
||
onNarrowViewportChange,
|
||
onCanvasHeightChange,
|
||
onRegionContentChange,
|
||
onPageSetupChange,
|
||
onRegionEditorChange,
|
||
}: {
|
||
editor: Editor
|
||
pageLayout: DocPageLayout
|
||
zoom: number
|
||
editable: boolean
|
||
showLayout: boolean
|
||
showRuler: boolean
|
||
showNonPrintableChars: boolean
|
||
editorMode: "edit" | "suggest" | "view"
|
||
canvasRef?: RefObject<HTMLDivElement | null>
|
||
onPageCountChange?: (count: number) => void
|
||
onNarrowViewportChange?: (narrow: boolean) => void
|
||
onCanvasHeightChange?: (height: number) => void
|
||
onRegionContentChange?: (
|
||
region: DocsHeaderFooterRegion,
|
||
content: Record<string, unknown>,
|
||
meta: { pageIndex: number; contentHeightPx: number }
|
||
) => void
|
||
onPageSetupChange?: (patch: Partial<DocPageSetup>) => void
|
||
onRegionEditorChange?: (editor: Editor | null) => void
|
||
}) {
|
||
const pageWidth = pageLayout.widthPx
|
||
const pageHeight = pageLayout.heightPx
|
||
const margins = pageLayout.marginsPx
|
||
|
||
const [pageCount, setPageCount] = useState(1)
|
||
const [narrowViewport, setNarrowViewport] = useState(false)
|
||
const [editingTarget, setEditingTarget] = useState<DocsHeaderFooterEditTarget>(null)
|
||
const [pageRegionHeights, setPageRegionHeights] = useState<
|
||
Record<string, number>
|
||
>({})
|
||
|
||
const handleRegionHeightMeasure = useCallback(
|
||
(payload: {
|
||
region: DocsHeaderFooterRegion
|
||
pageIndex: number
|
||
heightPx: number
|
||
}) => {
|
||
const key = `${payload.region}-${payload.pageIndex}`
|
||
setPageRegionHeights((prev) => {
|
||
if (prev[key] === payload.heightPx) return prev
|
||
return { ...prev, [key]: payload.heightPx }
|
||
})
|
||
},
|
||
[]
|
||
)
|
||
|
||
const measuredRegionHeights = useMemo(() => {
|
||
let header = 0
|
||
let footer = 0
|
||
for (const [key, heightPx] of Object.entries(pageRegionHeights)) {
|
||
if (key.startsWith("header-")) header = Math.max(header, heightPx)
|
||
if (key.startsWith("footer-")) footer = Math.max(footer, heightPx)
|
||
}
|
||
return {
|
||
...(header > 0 ? { header } : {}),
|
||
...(footer > 0 ? { footer } : {}),
|
||
}
|
||
}, [pageRegionHeights])
|
||
|
||
const effectiveMargins = useMemo(
|
||
() =>
|
||
effectiveMarginsPx(
|
||
pageLayout,
|
||
null,
|
||
editingTarget ? undefined : measuredRegionHeights
|
||
),
|
||
[pageLayout, editingTarget, measuredRegionHeights]
|
||
)
|
||
const metrics = useMemo(
|
||
() => computePageMetrics({ ...pageLayout, effectiveMarginsPx: effectiveMargins }),
|
||
[pageLayout, effectiveMargins]
|
||
)
|
||
|
||
const localCanvasRef = useRef<HTMLDivElement>(null)
|
||
const canvasRef = canvasRefProp ?? localCanvasRef
|
||
const contentRef = useRef<HTMLDivElement>(null)
|
||
const onPageCountChangeRef = useRef(onPageCountChange)
|
||
onPageCountChangeRef.current = onPageCountChange
|
||
|
||
const scale = docsZoomToScale(zoom)
|
||
const scaledWidth = docsPageLengthToScreen(pageWidth, scale)
|
||
|
||
const stopRegionEdit = useCallback(() => {
|
||
setEditingTarget(null)
|
||
onRegionEditorChange?.(null)
|
||
}, [onRegionEditorChange])
|
||
|
||
const startRegionEdit = useCallback(
|
||
(region: DocsHeaderFooterRegion, pageIndex: number) => {
|
||
setEditingTarget({ region, pageIndex })
|
||
},
|
||
[]
|
||
)
|
||
|
||
const handleRegionEditorReady = useCallback(
|
||
(editor: Editor | null) => {
|
||
onRegionEditorChange?.(editor)
|
||
},
|
||
[onRegionEditorChange]
|
||
)
|
||
|
||
useEffect(() => {
|
||
const onKey = (event: KeyboardEvent) => {
|
||
if (event.key === "Escape" && editingTarget) {
|
||
event.preventDefault()
|
||
stopRegionEdit()
|
||
}
|
||
}
|
||
window.addEventListener("keydown", onKey)
|
||
return () => window.removeEventListener("keydown", onKey)
|
||
}, [editingTarget, stopRegionEdit])
|
||
|
||
useEffect(() => {
|
||
const canvas = canvasRef.current
|
||
if (!canvas) return
|
||
const syncViewport = () => {
|
||
const narrow = canvas.clientWidth < scaledWidth
|
||
setNarrowViewport(narrow)
|
||
onNarrowViewportChange?.(narrow)
|
||
onCanvasHeightChange?.(canvas.clientHeight)
|
||
}
|
||
syncViewport()
|
||
const ro = new ResizeObserver(syncViewport)
|
||
ro.observe(canvas)
|
||
return () => ro.disconnect()
|
||
}, [onCanvasHeightChange, onNarrowViewportChange, scaledWidth, canvasRef])
|
||
|
||
useEffect(() => {
|
||
if (!showLayout) return
|
||
const surface = contentRef.current
|
||
if (!surface) return
|
||
|
||
let debounceId: ReturnType<typeof setTimeout> | null = null
|
||
let cancelled = false
|
||
|
||
const measurePageCount = () => {
|
||
const prose = surface.querySelector(".ProseMirror") as HTMLElement | null
|
||
if (!prose) return
|
||
const contentHeight = measureProseContentHeight(prose)
|
||
const count = computePageCount(contentHeight, metrics)
|
||
setPageCount((prev) => (prev === count ? prev : count))
|
||
}
|
||
|
||
const runLayoutPasses = (passesLeft: number) => {
|
||
if (cancelled || editor.isDestroyed) return
|
||
requestAnimationFrame(() => {
|
||
if (cancelled || editor.isDestroyed) return
|
||
const changed = applyPageFlowLayout(editor)
|
||
if (changed && passesLeft > 1) {
|
||
runLayoutPasses(passesLeft - 1)
|
||
return
|
||
}
|
||
measurePageCount()
|
||
})
|
||
}
|
||
|
||
let flushPending = false
|
||
const scheduleLayout = () => {
|
||
if (!flushPending) {
|
||
flushPending = true
|
||
requestAnimationFrame(() => {
|
||
flushPending = false
|
||
runLayoutPasses(2)
|
||
})
|
||
}
|
||
if (debounceId) clearTimeout(debounceId)
|
||
debounceId = setTimeout(() => {
|
||
debounceId = null
|
||
runLayoutPasses(2)
|
||
}, 32)
|
||
}
|
||
|
||
scheduleLayout()
|
||
|
||
const onTransaction = ({ transaction }: { transaction: { docChanged: boolean } }) => {
|
||
if (!transaction.docChanged) return
|
||
scheduleLayout()
|
||
}
|
||
editor.on("transaction", onTransaction)
|
||
|
||
return () => {
|
||
cancelled = true
|
||
if (debounceId) clearTimeout(debounceId)
|
||
editor.off("transaction", onTransaction)
|
||
}
|
||
}, [editor, metrics, pageRegionHeights, showLayout])
|
||
|
||
useEffect(() => {
|
||
onPageCountChangeRef.current?.(pageCount)
|
||
}, [pageCount])
|
||
|
||
const stackHeight = computeStackHeight(pageCount, pageHeight)
|
||
const proseMinHeight = computeProseMinHeight(pageCount, metrics)
|
||
|
||
const scaledHeight = docsPageLengthToScreen(stackHeight, scale)
|
||
const verticalPaddingTop = narrowViewport
|
||
? DOCS_CANVAS_PADDING_TOP_NARROW_PX
|
||
: DOCS_CANVAS_PADDING_Y_PX
|
||
const verticalPaddingBottom = DOCS_CANVAS_PADDING_Y_PX
|
||
|
||
const textAreaBorderCss = pageLayout.textAreaBorderCss
|
||
const sheetBorderCss = pageLayout.sheetBorderCss
|
||
const pageBackground = pageLayout.pageColor
|
||
const backgroundLayers = pageLayout.pageBackgroundLayers
|
||
|
||
const renderPageBackground = (index: number) => (
|
||
<>
|
||
{backgroundLayers?.gradientCss ? (
|
||
<div
|
||
key={`bg-gradient-${index}`}
|
||
className="pointer-events-none absolute inset-0 z-[1]"
|
||
style={{ background: backgroundLayers.gradientCss }}
|
||
aria-hidden
|
||
/>
|
||
) : null}
|
||
{backgroundLayers?.fillImageStyle ? (
|
||
<div
|
||
key={`bg-image-${index}`}
|
||
className="pointer-events-none absolute inset-0 z-[1]"
|
||
style={backgroundLayers.fillImageStyle}
|
||
aria-hidden
|
||
/>
|
||
) : null}
|
||
{backgroundLayers?.watermarkStyle ? (
|
||
<div
|
||
key={`bg-watermark-${index}`}
|
||
className="pointer-events-none absolute inset-0 z-[2] flex items-center justify-center overflow-hidden"
|
||
aria-hidden
|
||
>
|
||
{backgroundLayers.watermarkStyle.imageSrc ? (
|
||
<img
|
||
src={backgroundLayers.watermarkStyle.imageSrc}
|
||
alt=""
|
||
className="max-h-[70%] max-w-[70%] select-none object-contain"
|
||
style={{
|
||
opacity: backgroundLayers.watermarkStyle.opacity,
|
||
transform: `rotate(${backgroundLayers.watermarkStyle.rotationDeg}deg)`,
|
||
}}
|
||
/>
|
||
) : (
|
||
<span
|
||
className="select-none whitespace-nowrap text-[72px] font-light leading-none"
|
||
style={{
|
||
color: backgroundLayers.watermarkStyle.color,
|
||
opacity: backgroundLayers.watermarkStyle.opacity,
|
||
transform: `rotate(${backgroundLayers.watermarkStyle.rotationDeg}deg)`,
|
||
}}
|
||
>
|
||
{backgroundLayers.watermarkStyle.text}
|
||
</span>
|
||
)}
|
||
</div>
|
||
) : null}
|
||
</>
|
||
)
|
||
|
||
const bodyDimmed = editingTarget != null
|
||
|
||
return (
|
||
<div ref={canvasRef} className={cn(
|
||
"ultidrive-docs-canvas h-full min-h-0 overflow-auto",
|
||
showLayout ? "bg-[#f9fbfd] dark:bg-[#202124]" : "bg-white dark:bg-background",
|
||
showNonPrintableChars && "docs-show-non-printable",
|
||
editorMode === "suggest" && "docs-editor-mode-suggest",
|
||
editorMode === "view" && "docs-editor-mode-view"
|
||
)}>
|
||
<div
|
||
className="mx-auto"
|
||
style={{
|
||
width: scaledWidth,
|
||
paddingTop: verticalPaddingTop,
|
||
paddingBottom: verticalPaddingBottom,
|
||
minHeight: (showLayout ? scaledHeight : proseMinHeight + margins.top + margins.bottom) + verticalPaddingTop + verticalPaddingBottom,
|
||
}}
|
||
>
|
||
<div
|
||
className="relative mx-auto overflow-hidden"
|
||
style={{ width: scaledWidth, height: showLayout ? scaledHeight : undefined }}
|
||
>
|
||
<div
|
||
data-docs-page-stack
|
||
className="absolute left-1/2 top-0 -translate-x-1/2 overflow-hidden"
|
||
style={{
|
||
width: pageWidth,
|
||
height: stackHeight,
|
||
transform: `scale(${scale})`,
|
||
transformOrigin: "top center",
|
||
}}
|
||
>
|
||
{showLayout
|
||
? Array.from({ length: pageCount }, (_, index) => {
|
||
const pageTop = index * (pageHeight + DOCS_PAGE_GAP_PX)
|
||
return (
|
||
<div
|
||
key={index}
|
||
className={cn(
|
||
"ultidrive-docs-page absolute left-0 overflow-hidden dark:bg-white",
|
||
sheetBorderCss && "ultidrive-docs-page--imported-border"
|
||
)}
|
||
style={{
|
||
top: pageTop,
|
||
width: pageWidth,
|
||
height: pageHeight,
|
||
backgroundColor: pageBackground,
|
||
boxShadow:
|
||
"0 1px 3px 1px rgba(60,64,67,.15), 0 1px 2px 0 rgba(60,64,67,.3)",
|
||
...(sheetBorderCss
|
||
? {
|
||
borderTop: sheetBorderCss.top ?? "none",
|
||
borderRight: sheetBorderCss.right ?? "none",
|
||
borderBottom: sheetBorderCss.bottom ?? "none",
|
||
borderLeft: sheetBorderCss.left ?? "none",
|
||
}
|
||
: {}),
|
||
}}
|
||
aria-hidden
|
||
>
|
||
{renderPageBackground(index)}
|
||
</div>
|
||
)
|
||
})
|
||
: null}
|
||
|
||
{showLayout && textAreaBorderCss
|
||
? Array.from({ length: pageCount }, (_, index) => (
|
||
<div
|
||
key={`text-border-${index}`}
|
||
className="pointer-events-none absolute z-[5] box-border"
|
||
style={{
|
||
top: index * (pageHeight + DOCS_PAGE_GAP_PX) + effectiveMargins.top,
|
||
left: effectiveMargins.left,
|
||
width: pageWidth - effectiveMargins.left - effectiveMargins.right,
|
||
height: pageHeight - effectiveMargins.top - effectiveMargins.bottom,
|
||
borderTop: textAreaBorderCss.top ?? "none",
|
||
borderRight: textAreaBorderCss.right ?? "none",
|
||
borderBottom: textAreaBorderCss.bottom ?? "none",
|
||
borderLeft: textAreaBorderCss.left ?? "none",
|
||
}}
|
||
aria-hidden
|
||
/>
|
||
))
|
||
: null}
|
||
|
||
{showLayout ? (
|
||
<DocsBodyMarginMasks
|
||
pageCount={pageCount}
|
||
pageLayout={pageLayout}
|
||
pageWidth={pageWidth}
|
||
pageHeight={pageHeight}
|
||
pageColor={pageBackground}
|
||
pageRegionHeights={pageRegionHeights}
|
||
/>
|
||
) : null}
|
||
|
||
{showLayout
|
||
? Array.from({ length: pageCount }, (_, index) => {
|
||
const pageTop = index * (pageHeight + DOCS_PAGE_GAP_PX)
|
||
return (
|
||
<div key={`hf-${index}`}>
|
||
<DocsHeaderFooterBand
|
||
region="header"
|
||
pageLayout={pageLayout}
|
||
pageIndex={index}
|
||
pageTop={pageTop}
|
||
pageWidth={pageWidth}
|
||
pageHeight={pageHeight}
|
||
margins={margins}
|
||
editable={editable}
|
||
editingTarget={editingTarget}
|
||
onStartEdit={startRegionEdit}
|
||
onStopEdit={stopRegionEdit}
|
||
onContentChange={(region, content, meta) =>
|
||
onRegionContentChange?.(region, content, meta)
|
||
}
|
||
onPageSetupChange={(patch) => onPageSetupChange?.(patch)}
|
||
onRegionHeightMeasure={handleRegionHeightMeasure}
|
||
onRegionEditorReady={
|
||
editingTarget?.region === "header" &&
|
||
editingTarget.pageIndex === index
|
||
? handleRegionEditorReady
|
||
: undefined
|
||
}
|
||
/>
|
||
<DocsHeaderFooterBand
|
||
region="footer"
|
||
pageLayout={pageLayout}
|
||
pageIndex={index}
|
||
pageTop={pageTop}
|
||
pageWidth={pageWidth}
|
||
pageHeight={pageHeight}
|
||
margins={margins}
|
||
editable={editable}
|
||
editingTarget={editingTarget}
|
||
onStartEdit={startRegionEdit}
|
||
onStopEdit={stopRegionEdit}
|
||
onContentChange={(region, content, meta) =>
|
||
onRegionContentChange?.(region, content, meta)
|
||
}
|
||
onPageSetupChange={(patch) => onPageSetupChange?.(patch)}
|
||
onRegionHeightMeasure={handleRegionHeightMeasure}
|
||
onRegionEditorReady={
|
||
editingTarget?.region === "footer" &&
|
||
editingTarget.pageIndex === index
|
||
? handleRegionEditorReady
|
||
: undefined
|
||
}
|
||
/>
|
||
</div>
|
||
)
|
||
})
|
||
: null}
|
||
|
||
{bodyDimmed ? (
|
||
<div
|
||
className="pointer-events-none absolute inset-0 z-[12] bg-[#e8eaed]/40"
|
||
style={{ height: stackHeight }}
|
||
aria-hidden
|
||
/>
|
||
) : null}
|
||
|
||
<div
|
||
ref={contentRef}
|
||
className={cn(
|
||
"ultidrive-docs-editor-surface relative",
|
||
showLayout && "ultidrive-docs-editor-surface--paginated",
|
||
!showLayout && "ultidrive-docs-editor-surface--compact",
|
||
bodyDimmed && "ultidrive-docs-editor-surface--dimmed"
|
||
)}
|
||
style={{
|
||
padding: `${effectiveMargins.top}px ${effectiveMargins.right}px ${effectiveMargins.bottom}px ${effectiveMargins.left}px`,
|
||
height: showLayout ? stackHeight : undefined,
|
||
minHeight: showLayout
|
||
? undefined
|
||
: proseMinHeight + effectiveMargins.top + effectiveMargins.bottom,
|
||
["--docs-stack-height" as string]: `${stackHeight}px`,
|
||
["--docs-prose-min-height" as string]: `${proseMinHeight}px`,
|
||
["--docs-body-area-h" as string]: `${metrics.bodyAreaHeight}px`,
|
||
["--docs-inter-page-spacer" as string]: `${metrics.interPageSpacer}px`,
|
||
}}
|
||
onMouseDown={(event) => {
|
||
if (bodyDimmed) {
|
||
const target = event.target as HTMLElement
|
||
if (
|
||
!target.closest(".docs-hf-band") &&
|
||
!target.closest(".docs-hf-chrome")
|
||
) {
|
||
stopRegionEdit()
|
||
}
|
||
return
|
||
}
|
||
if (!editable || editingTarget) return
|
||
const target = event.target as HTMLElement
|
||
if (target.closest(".ProseMirror")) return
|
||
event.preventDefault()
|
||
focusEditorAtPointer(editor, event.clientX, event.clientY)
|
||
}}
|
||
>
|
||
<EditorContent
|
||
editor={editor}
|
||
className={cn(!editable && "pointer-events-none select-text")}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export const DocsPageView = memo(DocsPageViewInner)
|
||
|
||
export function DocsStatusBar({
|
||
pageLayout,
|
||
pageCount,
|
||
currentPage = 1,
|
||
className,
|
||
}: {
|
||
pageLayout: DocPageLayout
|
||
pageCount: number
|
||
currentPage?: number
|
||
className?: string
|
||
}) {
|
||
const pageLabel = Math.min(Math.max(1, currentPage), Math.max(1, pageCount))
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"flex shrink-0 items-center justify-between border-t border-[#dadce0] bg-[#edf2fa] px-4 py-1 text-xs text-[#5f6368] dark:border-border dark:bg-muted/40 dark:text-muted-foreground",
|
||
className
|
||
)}
|
||
>
|
||
<span>
|
||
Page {pageLabel} sur {pageCount}
|
||
</span>
|
||
<span>
|
||
{pageLayout.format.label} ({pageLayout.format.widthMm} × {pageLayout.format.heightMm} mm)
|
||
</span>
|
||
</div>
|
||
)
|
||
}
|