feat: add pdf image renderer (#2554)

## Description

Replace the PDF renderer with an custom image renderer.

This allows us to remove the "react-pdf" dependency and allows us to use
a virtual list to improve performance.

packages/ui/primitives/document-flow/add-fields.tsx

@@ -23,7 +23,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { useAutoSave } from '@documenso/lib/client-only/hooks/use-autosave';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { PDF_VIEWER_PAGE_SELECTOR, getPdfPagesCount } from '@documenso/lib/constants/pdf-viewer';
 import {
   type TFieldMetaSchema as FieldMeta,
   ZFieldMetaSchema,
@@ -431,13 +431,15 @@ export const AddFieldsFormPartial = ({
         }
 
         if (duplicateAll) {
-          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
+          const totalPages = getPdfPagesCount();
 
-          pages.forEach((_, index) => {
-            const pageNumber = index + 1;
+          if (totalPages < 1) {
+            return;
+          }
 
+          for (let pageNumber = 1; pageNumber <= totalPages; pageNumber += 1) {
             if (pageNumber === lastActiveField.pageNumber) {
-              return;
+              continue;
             }
 
             const newField: TAddFieldsFormSchema['fields'][0] = {
@@ -450,7 +452,7 @@ export const AddFieldsFormPartial = ({
             };
 
             append(newField);
-          });
+          }
 
           return;
         }

packages/ui/primitives/document-flow/field-item.tsx

@@ -10,6 +10,7 @@ import { Rnd } from 'react-rnd';
 import { useSearchParams } from 'react-router';
 
 import { useElementBounds } from '@documenso/lib/client-only/hooks/use-element-bounds';
+import { useIsPageInDom } from '@documenso/lib/client-only/hooks/use-is-page-in-dom';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { ZCheckboxFieldMeta, ZRadioFieldMeta } from '@documenso/lib/types/field-meta';
@@ -50,7 +51,17 @@ export type FieldItemProps = {
 /**
  * The item when editing fields??
  */
-export const FieldItem = ({
+export const FieldItem = (props: FieldItemProps) => {
+  const isPageInDom = useIsPageInDom(props.field.pageNumber);
+
+  if (!isPageInDom) {
+    return null;
+  }
+
+  return <FieldItemInner {...props} />;
+};
+
+const FieldItemInner = ({
   fieldClassName,
   field,
   passive,