feat: enhance pagination logic and improve layout handling in cover letter and resume templates

Gautam25Raj · Gautam25Raj · commit 265f535284d2 · 2026-05-30T00:02:03.000+05:30
diff --git a/apps/studio/features/resume/editor/ResumePagedPreview.tsx b/apps/studio/features/resume/editor/ResumePagedPreview.tsx
@@ -13,6 +13,47 @@ interface ResumePreviewPage {
   content: string;
 }
 
+function getSectionItemsContainer(section: HTMLElement): HTMLElement | null {
+  let itemsContainer =
+    section.tagName.toLowerCase() === "section" && section.children.length >= 2
+      ? (section.children[1] as HTMLElement)
+      : null;
+
+  while (
+    itemsContainer &&
+    itemsContainer.children.length === 1 &&
+    itemsContainer.children[0] instanceof HTMLElement &&
+    itemsContainer.children[0].tagName.toLowerCase() === "div"
+  ) {
+    itemsContainer = itemsContainer.children[0] as HTMLElement;
+  }
+
+  return itemsContainer;
+}
+
+function createSectionFragment(
+  section: HTMLElement,
+  items: HTMLElement[],
+  includeHeader: boolean,
+): HTMLElement {
+  const sectionClone = section.cloneNode(true) as HTMLElement;
+  const clonedItemsContainer = getSectionItemsContainer(sectionClone);
+
+  if (clonedItemsContainer) {
+    clonedItemsContainer.innerHTML = "";
+
+    items.forEach((item) => {
+      clonedItemsContainer.appendChild(item.cloneNode(true));
+    });
+  }
+
+  if (!includeHeader && sectionClone.children.length > 0) {
+    sectionClone.removeChild(sectionClone.children[0]);
+  }
+
+  return sectionClone;
+}
+
 export function ResumePagedPreview({ children }: { children: ReactNode }) {
   const measureRef = useRef<HTMLDivElement | null>(null);
   const [pages, setPages] = useState<ResumePreviewPage[]>([]);
@@ -30,43 +71,121 @@ export function ResumePagedPreview({ children }: { children: ReactNode }) {
       }
 
       const computed = window.getComputedStyle(container);
-      const paddingTop = Number.parseFloat(computed.paddingTop) || 0;
-      const paddingBottom = Number.parseFloat(computed.paddingBottom) || 0;
-      const usableHeight = RESUME_PAGE_HEIGHT_PX - paddingTop - paddingBottom;
+      const nextPageStyle = {
+        backgroundColor: computed.backgroundColor,
+        color: computed.color,
+        fontFamily: computed.fontFamily,
+        fontSize: computed.fontSize,
+        lineHeight: computed.lineHeight,
+        padding: computed.padding,
+      } satisfies CSSProperties;
+      const probe = document.createElement("article");
+
+      probe.className = "resume-page-preview mx-auto overflow-hidden bg-white";
+      Object.assign(probe.style, {
+        ...nextPageStyle,
+        boxShadow: "none",
+        height: `${RESUME_PAGE_HEIGHT_PX}px`,
+        minHeight: `${RESUME_PAGE_HEIGHT_PX}px`,
+        position: "absolute",
+        width: `${RESUME_PAGE_WIDTH_PX}px`,
+      });
+
+      measureRef.current.appendChild(probe);
+
+      const fitsPage = (elements: HTMLElement[]) => {
+        probe.innerHTML = elements.map((element) => element.outerHTML).join("");
+
+        return probe.scrollHeight <= RESUME_PAGE_HEIGHT_PX + 1;
+      };
+
       const nextPages: ResumePreviewPage[] = [];
-      let current: string[] = [];
-      let usedHeight = 0;
+      let current: HTMLElement[] = [];
+
+      const commitCurrentPage = () => {
+        if (current.length === 0) {
+          return;
+        }
+
+        nextPages.push({
+          content: current.map((element) => element.outerHTML).join(""),
+        });
+        current = [];
+      };
+
+      const appendBlock = (block: HTMLElement) => {
+        const candidate = [...current, block];
+
+        if (candidate.length === 1 || fitsPage(candidate)) {
+          current = candidate;
+          return;
+        }
+
+        commitCurrentPage();
+        current = [block];
+      };
 
       Array.from(container.children).forEach((child) => {
-        const element = child as HTMLElement;
-        const childStyle = window.getComputedStyle(element);
-        const blockHeight =
-          element.getBoundingClientRect().height +
-          (Number.parseFloat(childStyle.marginTop) || 0) +
-          (Number.parseFloat(childStyle.marginBottom) || 0);
-
-        if (current.length > 0 && usedHeight + blockHeight > usableHeight) {
-          nextPages.push({ content: current.join("") });
-          current = [];
-          usedHeight = 0;
+        if (!(child instanceof HTMLElement)) {
+          return;
+        }
+
+        const isSection = child.tagName.toLowerCase() === "section";
+        const itemsContainer = getSectionItemsContainer(child);
+        const items = itemsContainer
+          ? (Array.from(itemsContainer.children).filter(
+              (item): item is HTMLElement => item instanceof HTMLElement,
+            ) as HTMLElement[])
+          : [];
+
+        if (!isSection || items.length <= 1) {
+          appendBlock(child);
+          return;
         }
 
-        current.push(element.outerHTML);
-        usedHeight += blockHeight;
+        let itemIndex = 0;
+        let includeHeader = true;
+
+        while (itemIndex < items.length) {
+          let acceptedCount = 0;
+
+          for (let count = 1; itemIndex + count <= items.length; count += 1) {
+            const fragment = createSectionFragment(
+              child,
+              items.slice(itemIndex, itemIndex + count),
+              includeHeader,
+            );
+            const candidate = [...current, fragment];
+
+            if (fitsPage(candidate) || (current.length === 0 && count === 1)) {
+              acceptedCount = count;
+            } else {
+              break;
+            }
+          }
+
+          if (acceptedCount === 0) {
+            commitCurrentPage();
+            continue;
+          }
+
+          const acceptedFragment = createSectionFragment(
+            child,
+            items.slice(itemIndex, itemIndex + acceptedCount),
+            includeHeader,
+          );
+          current = [...current, acceptedFragment];
+          itemIndex += acceptedCount;
+          includeHeader = false;
+        }
       });
 
       if (current.length > 0) {
-        nextPages.push({ content: current.join("") });
+        commitCurrentPage();
       }
 
-      const nextPageStyle = {
-        backgroundColor: computed.backgroundColor,
-        color: computed.color,
-        fontFamily: computed.fontFamily,
-        fontSize: computed.fontSize,
-        lineHeight: computed.lineHeight,
-        padding: computed.padding,
-      } satisfies CSSProperties;
+      probe.remove();
+
       const resolvedPages = nextPages.length > 0 ? nextPages : [{ content: container.innerHTML }];
       const pageKey = resolvedPages.map((page) => page.content).join("");
       const styleKey = JSON.stringify(nextPageStyle);
diff --git a/apps/studio/templates/cover-letter/professional/web.tsx b/apps/studio/templates/cover-letter/professional/web.tsx
@@ -23,7 +23,6 @@ import { escapeHtml } from "@/features/resume/services/resume-formatters";
 import { SOCIAL_ICON_SRC_BY_TYPE } from "@/templates/shared/social-icons";
 
 const PAGE_HEIGHT = 1123;
-const BODY_TOP_GAP = 28;
 const PARAGRAPH_CHUNK_WORDS = 70;
 
 type ProfessionalFlowItem =
@@ -167,31 +166,38 @@ function renderGroupedFlowItems(items: ProfessionalFlowItem[], accentColor: stri
 
 function paginateMeasuredItems<T extends { id: string }>(
   items: T[],
-  heights: Map<string, number>,
-  firstLimit: number,
-  nextLimit: number,
+  fitsPage: (items: T[], pageIndex: number) => boolean,
 ) {
   const pages: T[][] = [[]];
   let pageIndex = 0;
-  let used = 0;
 
   for (const item of items) {
-    const height = Math.ceil(heights.get(item.id) ?? 0);
-    const limit = pageIndex === 0 ? firstLimit : nextLimit;
+    const candidate = [...pages[pageIndex], item];
 
-    if (pages[pageIndex].length > 0 && used + height > limit) {
+    if (pages[pageIndex].length > 0 && !fitsPage(candidate, pageIndex)) {
       pages.push([]);
       pageIndex += 1;
-      used = 0;
     }
 
     pages[pageIndex].push(item);
-    used += height;
   }
 
   return pages.filter((page) => page.length > 0);
 }
 
+function getProfessionalPageKey(pages: ProfessionalFlowItem[][]) {
+  return pages.map((page) => page.map((item) => JSON.stringify(item)).join(",")).join("|");
+}
+
+function fitsInsideBottomPadding(container: HTMLElement, content: HTMLElement) {
+  const containerStyle = window.getComputedStyle(container);
+  const paddingBottom = Number.parseFloat(containerStyle.paddingBottom) || 0;
+  const containerBottom = container.getBoundingClientRect().bottom - paddingBottom;
+  const contentBottom = content.getBoundingClientRect().bottom;
+
+  return contentBottom <= containerBottom + 1;
+}
+
 function getProfessionalHtmlItemWeight(item: ProfessionalFlowItem) {
   if (item.type === "body-list" || item.type === "proof-list") {
     return 2 + item.items.reduce((total, listItem) => total + Math.ceil(listItem.length / 78), 0);
@@ -281,38 +287,70 @@ export function ProfessionalCoverLetterPreview({ content }: { content: CoverLett
     [flowContent, flowSenderName],
   );
   const [pages, setPages] = useState<ProfessionalFlowItem[][]>(() => [flowItems]);
+  const measureRef = useRef<HTMLDivElement | null>(null);
   const firstPrefixRef = useRef<HTMLDivElement | null>(null);
   const nextPrefixRef = useRef<HTMLParagraphElement | null>(null);
   const itemRefs = useRef(new Map<string, HTMLDivElement>());
 
   useLayoutEffect(() => {
     const frame = window.requestAnimationFrame(() => {
-      const firstPrefixHeight = firstPrefixRef.current?.getBoundingClientRect().height ?? 0;
-      const nextPrefixHeight = nextPrefixRef.current?.getBoundingClientRect().height ?? 0;
-      const firstLimit = PAGE_HEIGHT - appearance.pageMargin * 2 - firstPrefixHeight - BODY_TOP_GAP;
-      const nextLimit = PAGE_HEIGHT - appearance.pageMargin * 2 - nextPrefixHeight - BODY_TOP_GAP;
-      const heights = new Map<string, number>();
-
-      flowItems.forEach((item) => {
-        const node = itemRefs.current.get(item.id);
-        heights.set(item.id, node?.getBoundingClientRect().height ?? 0);
+      const probe = document.createElement("article");
+
+      probe.className = "mx-auto h-280.75 w-198.5 max-w-full overflow-hidden";
+      Object.assign(probe.style, {
+        backgroundColor: appearance.pageColor,
+        color: appearance.textColor,
+        fontFamily,
+        padding: `${appearance.pageMargin}px`,
       });
+      measureRef.current?.appendChild(probe);
+
+      const fitsPage = (items: ProfessionalFlowItem[], pageIndex: number) => {
+        probe.innerHTML = "";
+
+        const prefix = pageIndex === 0 ? firstPrefixRef.current : nextPrefixRef.current;
+        if (prefix) probe.appendChild(prefix.cloneNode(true));
+
+        const main = document.createElement("main");
+        main.className = "mt-7 text-[15px] text-zinc-800";
+        main.style.lineHeight = String(appearance.lineHeight);
+        main.style.setProperty("--paragraph-gap", `${appearance.paragraphSpacing}px`);
+
+        items.forEach((item) => {
+          const node = itemRefs.current.get(item.id);
+          if (node) main.appendChild(node.cloneNode(true));
+        });
+
+        probe.appendChild(main);
+
+        return probe.scrollHeight <= PAGE_HEIGHT + 1 && fitsInsideBottomPadding(probe, main);
+      };
 
-      const nextPages = paginateMeasuredItems(flowItems, heights, firstLimit, nextLimit);
-      const nextKey = nextPages.map((page) => page.map((item) => item.id).join(",")).join("|");
+      const nextPages = paginateMeasuredItems(flowItems, fitsPage);
+      probe.remove();
+      const nextKey = getProfessionalPageKey(nextPages);
 
       setPages((current) => {
-        const currentKey = current.map((page) => page.map((item) => item.id).join(",")).join("|");
+        const currentKey = getProfessionalPageKey(current);
         return currentKey === nextKey ? current : nextPages;
       });
     });
 
     return () => window.cancelAnimationFrame(frame);
-  }, [appearance.lineHeight, appearance.pageMargin, appearance.paragraphSpacing, flowItems]);
+  }, [
+    appearance.lineHeight,
+    appearance.pageColor,
+    appearance.pageMargin,
+    appearance.paragraphSpacing,
+    appearance.textColor,
+    flowItems,
+    fontFamily,
+  ]);
 
   return (
     <div className="grid gap-6">
       <div
+        ref={measureRef}
         aria-hidden="true"
         className="pointer-events-none absolute opacity-0"
         style={{ left: -10000, top: 0, width: 794 }}
diff --git a/apps/studio/templates/cover-letter/veriworkly/web.tsx b/apps/studio/templates/cover-letter/veriworkly/web.tsx
