feat: copy and paste fields (#1193)

Adds keyboard shortcuts for copying and pasting fields, additionally adds the ability
to duplicate a field via the UI.

apps/web/src/app/(signing)/sign/[token]/number-field.tsx

@@ -216,7 +216,10 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
   let fieldDisplayName = 'Number';
 
   if (parsedFieldMeta?.label) {
-    fieldDisplayName = parsedFieldMeta.label.length > 10 ? parsedFieldMeta.label.substring(0, 10) + '...' : parsedFieldMeta.label;
+    fieldDisplayName =
+      parsedFieldMeta.label.length > 10
+        ? parsedFieldMeta.label.substring(0, 10) + '...'
+        : parsedFieldMeta.label;
   }
 
   const userInputHasErrors = Object.values(errors).some((error) => error.length > 0);
@@ -246,7 +249,7 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
           )}
         >
           <span className="flex items-center justify-center gap-x-1 text-sm">
-            <Hash className='h-4 w-4' /> {fieldDisplayName}
+            <Hash className="h-4 w-4" /> {fieldDisplayName}
           </span>
         </p>
       )}

apps/web/src/app/(signing)/sign/[token]/radio-field.tsx

@@ -172,15 +172,15 @@ export const RadioField = ({ field, recipient, onSignField, onUnsignField }: Rad
         <RadioGroup>
           {values?.map((item, index) => (
             <div key={index} className="flex items-center gap-x-1.5">
-                <RadioGroupItem
-                  className=""
-                  value={item.value}
-                  id={`option-${index}`}
-                  checked={item.value === field.customText}
-                />
-                <Label htmlFor={`option-${index}`}>
-                  {item.value.includes('empty-value-') ? '' : item.value}
-                </Label>
+              <RadioGroupItem
+                className=""
+                value={item.value}
+                id={`option-${index}`}
+                checked={item.value === field.customText}
+              />
+              <Label htmlFor={`option-${index}`}>
+                {item.value.includes('empty-value-') ? '' : item.value}
+              </Label>
             </div>
           ))}
         </RadioGroup>

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -190,7 +190,7 @@ export const SignatureField = ({
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground duration-200 group-hover:text-yellow-300 text-xl">
+        <p className="group-hover:text-primary font-signature text-muted-foreground text-xl duration-200 group-hover:text-yellow-300">
           Signature
         </p>
       )}

apps/web/src/app/(signing)/sign/[token]/text-field.tsx

@@ -279,11 +279,13 @@ export const TextField = ({ field, recipient, onSignField, onUnsignField }: Text
             />
           </div>
 
-          {parsedFieldMeta?.characterLimit !== undefined && parsedFieldMeta?.characterLimit > 0 && !userInputHasErrors && (
-            <div className="text-muted-foreground text-sm">
-              {charactersRemaining} characters remaining
-            </div>
-          )}
+          {parsedFieldMeta?.characterLimit !== undefined &&
+            parsedFieldMeta?.characterLimit > 0 &&
+            !userInputHasErrors && (
+              <div className="text-muted-foreground text-sm">
+                {charactersRemaining} characters remaining
+              </div>
+            )}
 
           {userInputHasErrors && (
             <div className="text-sm">