feat: add text align option to fields (#1610)

## Description

Adds the ability to align text to the left, center or right for relevant
fields.

Previously text was always centered which can be less desirable.

See attached debug document which has left, center and right text
alignments set for fields.

<img width="614" alt="image"
src="https://github.com/user-attachments/assets/361a030e-813d-458b-9c7a-ff4c9fa5e33c"
/>


## Related Issue

N/A

## Changes Made

- Added text align option
- Update the insert in pdf method to support different alignments
- Added a debug mode to field insertion

## Testing Performed

- Ran manual tests using the debug mode

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

@@ -71,21 +71,25 @@ const getDefaultState = (fieldType: FieldType): FieldMeta => {
       return {
         type: 'initials',
         fontSize: 14,
+        textAlign: 'left',
       };
     case FieldType.NAME:
       return {
         type: 'name',
         fontSize: 14,
+        textAlign: 'left',
       };
     case FieldType.EMAIL:
       return {
         type: 'email',
         fontSize: 14,
+        textAlign: 'left',
       };
     case FieldType.DATE:
       return {
         type: 'date',
         fontSize: 14,
+        textAlign: 'left',
       };
     case FieldType.TEXT:
       return {
@@ -97,6 +101,7 @@ const getDefaultState = (fieldType: FieldType): FieldMeta => {
         fontSize: 14,
         required: false,
         readOnly: false,
+        textAlign: 'left',
       };
     case FieldType.NUMBER:
       return {
@@ -110,6 +115,7 @@ const getDefaultState = (fieldType: FieldType): FieldMeta => {
         required: false,
         readOnly: false,
         fontSize: 14,
+        textAlign: 'left',
       };
     case FieldType.RADIO:
       return {

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

@@ -5,6 +5,13 @@ import { validateFields as validateDateFields } from '@documenso/lib/advanced-fi
 import { type TDateFieldMeta as DateFieldMeta } from '@documenso/lib/types/field-meta';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 
 type DateFieldAdvancedSettingsProps = {
   fieldState: DateFieldMeta;
@@ -66,6 +73,27 @@ export const DateFieldAdvancedSettings = ({
           max={96}
         />
       </div>
+
+      <div>
+        <Label>
+          <Trans>Text Align</Trans>
+        </Label>
+
+        <Select
+          value={fieldState.textAlign}
+          onValueChange={(value) => handleInput('textAlign', value)}
+        >
+          <SelectTrigger className="bg-background mt-2">
+            <SelectValue placeholder="Select text align" />
+          </SelectTrigger>
+
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
   );
 };

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

@@ -5,6 +5,13 @@ import { validateFields as validateEmailFields } from '@documenso/lib/advanced-f
 import { type TEmailFieldMeta as EmailFieldMeta } from '@documenso/lib/types/field-meta';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 
 type EmailFieldAdvancedSettingsProps = {
   fieldState: EmailFieldMeta;
@@ -48,6 +55,27 @@ export const EmailFieldAdvancedSettings = ({
           max={96}
         />
       </div>
+
+      <div>
+        <Label>
+          <Trans>Text Align</Trans>
+        </Label>
+
+        <Select
+          value={fieldState.textAlign}
+          onValueChange={(value) => handleInput('textAlign', value)}
+        >
+          <SelectTrigger className="bg-background mt-2">
+            <SelectValue placeholder="Select text align" />
+          </SelectTrigger>
+
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
   );
 };

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

@@ -6,6 +6,8 @@ import { type TInitialsFieldMeta as InitialsFieldMeta } from '@documenso/lib/typ
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../select';
+
 type InitialsFieldAdvancedSettingsProps = {
   fieldState: InitialsFieldMeta;
   handleFieldChange: (key: keyof InitialsFieldMeta, value: string | boolean) => void;
@@ -48,6 +50,27 @@ export const InitialsFieldAdvancedSettings = ({
           max={96}
         />
       </div>
+
+      <div>
+        <Label>
+          <Trans>Text Align</Trans>
+        </Label>
+
+        <Select
+          value={fieldState.textAlign}
+          onValueChange={(value) => handleInput('textAlign', value)}
+        >
+          <SelectTrigger className="bg-background mt-2">
+            <SelectValue placeholder="Select text align" />
+          </SelectTrigger>
+
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
   );
 };

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

@@ -5,6 +5,13 @@ import { validateFields as validateNameFields } from '@documenso/lib/advanced-fi
 import { type TNameFieldMeta as NameFieldMeta } from '@documenso/lib/types/field-meta';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 
 type NameFieldAdvancedSettingsProps = {
   fieldState: NameFieldMeta;
@@ -48,6 +55,27 @@ export const NameFieldAdvancedSettings = ({
           max={96}
         />
       </div>
+
+      <div>
+        <Label>
+          <Trans>Text Align</Trans>
+        </Label>
+
+        <Select
+          value={fieldState.textAlign}
+          onValueChange={(value) => handleInput('textAlign', value)}
+        >
+          <SelectTrigger className="bg-background mt-2">
+            <SelectValue placeholder="Select text align" />
+          </SelectTrigger>
+
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
   );
 };

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

@@ -38,12 +38,12 @@ export const NumberFieldAdvancedSettings = ({
   const [showValidation, setShowValidation] = useState(false);
 
   const handleInput = (field: keyof NumberFieldMeta, value: string | boolean) => {
-    const userValue = field === 'value' ? value : fieldState.value ?? 0;
+    const userValue = field === 'value' ? value : (fieldState.value ?? 0);
     const userMinValue = field === 'minValue' ? Number(value) : Number(fieldState.minValue ?? 0);
     const userMaxValue = field === 'maxValue' ? Number(value) : Number(fieldState.maxValue ?? 0);
     const readOnly = field === 'readOnly' ? Boolean(value) : Boolean(fieldState.readOnly);
     const required = field === 'required' ? Boolean(value) : Boolean(fieldState.required);
-    const numberFormat = field === 'numberFormat' ? String(value) : fieldState.numberFormat ?? '';
+    const numberFormat = field === 'numberFormat' ? String(value) : (fieldState.numberFormat ?? '');
     const fontSize = field === 'fontSize' ? Number(value) : Number(fieldState.fontSize ?? 14);
 
     const valueErrors = validateNumberField(String(userValue), {
@@ -135,6 +135,27 @@ export const NumberFieldAdvancedSettings = ({
         />
       </div>
 
+      <div>
+        <Label>
+          <Trans>Text Align</Trans>
+        </Label>
+
+        <Select
+          value={fieldState.textAlign}
+          onValueChange={(value) => handleInput('textAlign', value)}
+        >
+          <SelectTrigger className="bg-background mt-2">
+            <SelectValue placeholder="Select text align" />
+          </SelectTrigger>
+
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       <div className="mt-2 flex flex-col gap-4">
         <div className="flex flex-row items-center gap-2">
           <Switch

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

@@ -5,6 +5,13 @@ import { validateTextField } from '@documenso/lib/advanced-fields-validation/val
 import { type TTextFieldMeta as TextFieldMeta } from '@documenso/lib/types/field-meta';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 import { Switch } from '@documenso/ui/primitives/switch';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 
@@ -22,7 +29,7 @@ export const TextFieldAdvancedSettings = ({
   const { _ } = useLingui();
 
   const handleInput = (field: keyof TextFieldMeta, value: string | boolean) => {
-    const text = field === 'text' ? String(value) : fieldState.text ?? '';
+    const text = field === 'text' ? String(value) : (fieldState.text ?? '');
     const limit =
       field === 'characterLimit' ? Number(value) : Number(fieldState.characterLimit ?? 0);
     const fontSize = field === 'fontSize' ? Number(value) : Number(fieldState.fontSize ?? 14);
@@ -112,6 +119,27 @@ export const TextFieldAdvancedSettings = ({
         />
       </div>
 
+      <div>
+        <Label>
+          <Trans>Text Align</Trans>
+        </Label>
+
+        <Select
+          value={fieldState.textAlign}
+          onValueChange={(value) => handleInput('textAlign', value)}
+        >
+          <SelectTrigger className="bg-background mt-2">
+            <SelectValue placeholder="Select text align" />
+          </SelectTrigger>
+
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       <div className="mt-4 flex flex-col gap-4">
         <div className="flex flex-row items-center gap-2">
           <Switch