Render QWord print pages as separate sheets

src/features/qword/QWord.tsx

@@ -180,6 +180,7 @@ function findInPage(query: string) {
 }
 
 const defaultPageViewHeight = 1180;
+const defaultPageGap = 28;
 
 function pageHeightFromStyles(element: HTMLElement) {
   const pageHeight = Number.parseFloat(window.getComputedStyle(element).getPropertyValue("--qword-page-height"));
@@ -270,6 +271,12 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
   const [pageView, setPageView] = useState({ count: 1, current: 1, height: defaultPageViewHeight });
   const wordCount = useMemo(() => countWords(document.html), [document.html]);
   const stageStyle = { "--qword-zoom": String(zoom / 100) } as CSSProperties;
+  const pageFrameStyle = {
+    "--qword-page-count": String(pageView.count),
+    "--qword-page-gap": `${defaultPageGap}px`,
+    minHeight: `${pageView.count * pageView.height + Math.max(0, pageView.count - 1) * defaultPageGap}px`,
+    paddingBottom: pageView.count > 1 ? `${(pageView.count - 1) * defaultPageGap}px` : undefined
+  } as CSSProperties;
   const activeRibbonTabLabel = wordRibbonTabs.find((tab) => tab.id === activeRibbonTab)?.label ?? "Главная";
   const stageClassName = ["document-stage", `qword-view-${viewMode}`].join(" ");
 
@@ -998,7 +1005,12 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
           ))}
         </div>
 
-        <div className="paper-frame">
+        <div className="paper-frame" style={pageFrameStyle}>
+          <div className="page-sheets" aria-hidden="true">
+            {Array.from({ length: pageView.count }, (_, index) => (
+              <span key={index} className="page-sheet" />
+            ))}
+          </div>
           <article
             ref={editorRef}
             className="paper document-content"
@@ -1015,9 +1027,7 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
           {pageView.count > 1 ? (
             <div className="page-break-guides" aria-hidden="true">
               {Array.from({ length: pageView.count - 1 }, (_, index) => (
-                <span key={index} style={{ top: `${(index + 1) * pageView.height}px` }}>
-                  Страница {index + 2}
-                </span>
+                <span key={index} style={{ top: `${(index + 1) * pageView.height + index * defaultPageGap}px` }} />
               ))}
             </div>
           ) : null}