feat: bulk add fields (#1683)

## Demo

![CleanShot 2025-03-04 at 02 17
47](https://github.com/user-attachments/assets/2cffaee3-9933-49e9-bdab-eadfd4c35030)

---------

Co-authored-by: Lucas Smith <me@lucasjamessmith.me>

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -173,34 +173,59 @@ export const ConfigureFieldsView = ({
   });
 
   const onFieldCopy = useCallback(
-    (event?: KeyboardEvent | null, options?: { duplicate?: boolean }) => {
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
-      const { duplicate = false } = options ?? {};
+      const { duplicate = false, duplicateAll = false } = options ?? {};
 
       if (lastActiveField) {
         event?.preventDefault();
 
-        if (!duplicate) {
+        if (duplicate) {
-          setFieldClipboard(lastActiveField);
+          const newField: TConfigureFieldsFormSchema['fields'][0] = {
+            ...structuredClone(lastActiveField),
+            nativeId: undefined,
+            formId: nanoid(12),
+            signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+            recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+            pageX: lastActiveField.pageX + 3,
+            pageY: lastActiveField.pageY + 3,
+          };
 
-          toast({
+          append(newField);
-            title: 'Copied field',
+
-            description: 'Copied field to clipboard',
+          return;
+        }
+
+        if (duplicateAll) {
+          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
+
+          pages.forEach((_, index) => {
+            const pageNumber = index + 1;
+
+            if (pageNumber === lastActiveField.pageNumber) {
+              return;
+            }
+
+            const newField: TConfigureFieldsFormSchema['fields'][0] = {
+              ...structuredClone(lastActiveField),
+              nativeId: undefined,
+              formId: nanoid(12),
+              signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+              recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+              pageNumber,
+            };
+
+            append(newField);
           });
 
           return;
         }
 
-        const newField: TConfigureFieldsFormSchema['fields'][0] = {
+        setFieldClipboard(lastActiveField);
-          ...structuredClone(lastActiveField),
-          nativeId: undefined,
-          formId: nanoid(12),
-          signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
-          recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
-          pageX: lastActiveField.pageX + 3,
-          pageY: lastActiveField.pageY + 3,
-        };
 
-        append(newField);
+        toast({
+          title: 'Copied field',
+          description: 'Copied field to clipboard',
+        });
       }
     },
     [append, lastActiveField, selectedRecipient?.email, selectedRecipient?.id, toast],
@@ -533,6 +558,7 @@ export const ConfigureFieldsView = ({
                           onMove={(node) => onFieldMove(node, index)}
                           onRemove={() => remove(index)}
                           onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                          onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
                           onFocus={() => setLastActiveField(field)}
                           onBlur={() => setLastActiveField(null)}
                           onAdvancedSettings={() => {

apps/remix/app/components/tables/templates-table-action-dropdown.tsx

@@ -69,8 +69,6 @@ export const TemplatesTableActionDropdown = ({
     ? `${templateRootPath}/f/${row.folderId}/${row.id}/edit`
     : `${templateRootPath}/${row.id}/edit`;
 
-  
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger data-testid="template-table-action-btn">

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

@@ -400,35 +400,60 @@ export const AddFieldsFormPartial = ({
   );
 
   const onFieldCopy = useCallback(
-    (event?: KeyboardEvent | null, options?: { duplicate?: boolean }) => {
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
-      const { duplicate = false } = options ?? {};
+      const { duplicate = false, duplicateAll = false } = options ?? {};
 
       if (lastActiveField) {
         event?.preventDefault();
 
-        if (!duplicate) {
+        if (duplicate) {
-          setFieldClipboard(lastActiveField);
+          const newField: TAddFieldsFormSchema['fields'][0] = {
+            ...structuredClone(lastActiveField),
+            nativeId: undefined,
+            formId: nanoid(12),
+            signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
+            pageX: lastActiveField.pageX + 3,
+            pageY: lastActiveField.pageY + 3,
+          };
 
-          toast({
+          append(newField);
-            title: 'Copied field',
+
-            description: 'Copied field to clipboard',
+          return;
+        }
+
+        if (duplicateAll) {
+          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
+
+          pages.forEach((_, index) => {
+            const pageNumber = index + 1;
+
+            if (pageNumber === lastActiveField.pageNumber) {
+              return;
+            }
+
+            const newField: TAddFieldsFormSchema['fields'][0] = {
+              ...structuredClone(lastActiveField),
+              nativeId: undefined,
+              formId: nanoid(12),
+              signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
+              pageNumber,
+            };
+
+            append(newField);
           });
 
           return;
         }
 
-        const newField: TAddFieldsFormSchema['fields'][0] = {
+        setFieldClipboard(lastActiveField);
-          ...structuredClone(lastActiveField),
-          formId: nanoid(12),
-          signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
-          pageX: lastActiveField.pageX + 3,
-          pageY: lastActiveField.pageY + 3,
-        };
 
-        append(newField);
+        toast({
+          title: 'Copied field',
+          description: 'Copied field to clipboard',
+        });
       }
     },
-    [append, lastActiveField, selectedSigner?.email, toast],
+    [append, lastActiveField, selectedSigner?.email, selectedSigner?.id, toast],
   );
 
   const onFieldPaste = useCallback(
@@ -641,6 +666,7 @@ export const AddFieldsFormPartial = ({
                       onMove={(options) => onFieldMove(options, index)}
                       onRemove={() => remove(index)}
                       onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                      onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
                       onAdvancedSettings={() => {
                         setCurrentField(field);
                         handleAdvancedSettings();

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

@@ -311,6 +311,7 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
               />
             ))
             .otherwise(() => null)}
+
           {errors.length > 0 && (
             <div className="mt-4">
               <ul>
@@ -323,6 +324,7 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
             </div>
           )}
         </DocumentFlowFormContainerContent>
+
         <DocumentFlowFormContainerFooter className="mt-auto">
           <DocumentFlowFormContainerActions
             goNextLabel={msg`Save`}

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

@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { FieldType } from '@prisma/client';
-import { CopyPlus, Settings2, Trash } from 'lucide-react';
+import { CopyPlus, Settings2, SquareStack, Trash } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
 
@@ -29,6 +31,7 @@ export type FieldItemProps = {
   onMove?: (_node: HTMLElement) => void;
   onRemove?: () => void;
   onDuplicate?: () => void;
+  onDuplicateAllPages?: () => void;
   onAdvancedSettings?: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
@@ -55,15 +58,18 @@ export const FieldItem = ({
   onMove,
   onRemove,
   onDuplicate,
+  onDuplicateAllPages,
+  onAdvancedSettings,
   onFocus,
   onBlur,
-  onAdvancedSettings,
   recipientIndex = 0,
   hasErrors,
   active,
   onFieldActivate,
   onFieldDeactivate,
 }: FieldItemProps) => {
+  const { _ } = useLingui();
+
   const [coords, setCoords] = useState({
     pageX: 0,
     pageY: 0,
@@ -304,6 +310,7 @@ export const FieldItem = ({
           <div className="group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5">
             {advancedField && (
               <button
+                title={_(msg`Advanced settings`)}
                 className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
                 onClick={onAdvancedSettings}
                 onTouchEnd={onAdvancedSettings}
@@ -313,6 +320,7 @@ export const FieldItem = ({
             )}
 
             <button
+              title={_(msg`Duplicate`)}
               className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
               onClick={onDuplicate}
               onTouchEnd={onDuplicate}
@@ -321,6 +329,16 @@ export const FieldItem = ({
             </button>
 
             <button
+              title={_(msg`Duplicate on all pages`)}
+              className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
+              onClick={onDuplicateAllPages}
+              onTouchEnd={onDuplicateAllPages}
+            >
+              <SquareStack className="h-3 w-3" />
+            </button>
+
+            <button
+              title={_(msg`Remove`)}
               className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
               onClick={onRemove}
               onTouchEnd={onRemove}

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

@@ -139,44 +139,64 @@ export const AddTemplateFieldsFormPartial = ({
   );
 
   const onFieldCopy = useCallback(
-    (event?: KeyboardEvent | null, options?: { duplicate?: boolean }) => {
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
-      const { duplicate = false } = options ?? {};
+      const { duplicate = false, duplicateAll = false } = options ?? {};
 
       if (lastActiveField) {
         event?.preventDefault();
 
-        if (!duplicate) {
+        if (duplicate) {
-          setFieldClipboard(lastActiveField);
+          const newField: TAddTemplateFieldsFormSchema['fields'][0] = {
+            ...structuredClone(lastActiveField),
+            nativeId: undefined,
+            formId: nanoid(12),
+            signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
+            signerId: selectedSigner?.id ?? lastActiveField.signerId,
+            signerToken: selectedSigner?.token ?? lastActiveField.signerToken,
+            pageX: lastActiveField.pageX + 3,
+            pageY: lastActiveField.pageY + 3,
+          };
 
-          toast({
+          append(newField);
-            title: 'Copied field',
+
-            description: 'Copied field to clipboard',
+          return;
+        }
+
+        if (duplicateAll) {
+          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
+
+          pages.forEach((_, index) => {
+            const pageNumber = index + 1;
+
+            if (pageNumber === lastActiveField.pageNumber) {
+              return;
+            }
+
+            const newField: TAddTemplateFieldsFormSchema['fields'][0] = {
+              ...structuredClone(lastActiveField),
+              nativeId: undefined,
+              formId: nanoid(12),
+              signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
+              signerId: selectedSigner?.id ?? lastActiveField.signerId,
+              signerToken: selectedSigner?.token ?? lastActiveField.signerToken,
+              pageNumber,
+            };
+
+            append(newField);
           });
 
           return;
         }
 
-        const newField: TAddTemplateFieldsFormSchema['fields'][0] = {
+        setFieldClipboard(lastActiveField);
-          ...structuredClone(lastActiveField),
-          formId: nanoid(12),
-          signerEmail: selectedSigner?.email ?? lastActiveField.signerEmail,
-          signerId: selectedSigner?.id ?? lastActiveField.signerId,
-          signerToken: selectedSigner?.token ?? lastActiveField.signerToken,
-          pageX: lastActiveField.pageX + 3,
-          pageY: lastActiveField.pageY + 3,
-        };
 
-        append(newField);
+        toast({
+          title: 'Copied field',
+          description: 'Copied field to clipboard',
+        });
       }
     },
-    [
+    [append, lastActiveField, selectedSigner?.email, selectedSigner?.id, toast],
-      append,
-      lastActiveField,
-      selectedSigner?.email,
-      selectedSigner?.id,
-      selectedSigner?.token,
-      toast,
-    ],
   );
 
   const onFieldPaste = useCallback(
@@ -543,6 +563,7 @@ export const AddTemplateFieldsFormPartial = ({
                     onMove={(options) => onFieldMove(options, index)}
                     onRemove={() => remove(index)}
                     onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                    onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
                     onAdvancedSettings={() => {
                       setCurrentField(field);
                       handleAdvancedSettings();