fix: various envelope updates

packages/lib/universal/field-renderer/field-generic-items.ts

@@ -153,6 +153,11 @@ export const createFieldHoverInteraction = ({
   const hoverColor = RECIPIENT_COLOR_STYLES[options.color].baseRingHover;
 
   fieldGroup.on('mouseover', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,
@@ -161,6 +166,11 @@ export const createFieldHoverInteraction = ({
   });
 
   fieldGroup.on('mouseout', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,
@@ -169,6 +179,11 @@ export const createFieldHoverInteraction = ({
   });
 
   fieldGroup.on('transformstart', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,
@@ -177,6 +192,11 @@ export const createFieldHoverInteraction = ({
   });
 
   fieldGroup.on('transformend', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,

packages/lib/universal/field-renderer/render-checkbox-field.ts

@@ -63,16 +63,15 @@ export const renderCheckboxFieldElement = (
     const rectWidth = fieldRect.width() * groupScaleX;
     const rectHeight = fieldRect.height() * groupScaleY;
 
-    // Todo: Envelopes - check sorting more than 10
-    // arr.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
-
     const squares = fieldGroup
       .find('.checkbox-square')
-      .sort((a, b) => a.id().localeCompare(b.id()));
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
     const checkmarks = fieldGroup
       .find('.checkbox-checkmark')
-      .sort((a, b) => a.id().localeCompare(b.id()));
-    const text = fieldGroup.find('.checkbox-text').sort((a, b) => a.id().localeCompare(b.id()));
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
+    const text = fieldGroup
+      .find('.checkbox-text')
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
 
     const groupedItems = squares.map((square, i) => ({
       squareElement: square,

packages/lib/universal/field-renderer/render-field.ts

@@ -8,9 +8,9 @@ import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import type { TFieldMetaSchema } from '../../types/field-meta';
 import { renderCheckboxFieldElement } from './render-checkbox-field';
 import { renderDropdownFieldElement } from './render-dropdown-field';
+import { renderGenericTextFieldElement } from './render-generic-text-field';
 import { renderRadioFieldElement } from './render-radio-field';
 import { renderSignatureFieldElement } from './render-signature-field';
-import { renderTextFieldElement } from './render-text-field';
 
 export const MIN_FIELD_HEIGHT_PX = 12;
 export const MIN_FIELD_WIDTH_PX = 36;
@@ -43,9 +43,9 @@ type RenderFieldOptions = {
    *
    * @default 'edit'
    *
-   * - `edit` - The field is rendered in edit mode.
-   * - `sign` - The field is rendered in sign mode. No interactive elements.
-   * - `export` - The field is rendered in export mode. No backgrounds, interactive elements, etc.
+   * - `edit` - The field is rendered in editor page.
+   * - `sign` - The field is rendered for the signing page.
+   * - `export` - The field is rendered for exporting and sealing into the PDF. No backgrounds, interactive elements, etc.
    */
   mode: 'edit' | 'sign' | 'export';
 
@@ -76,10 +76,21 @@ export const renderField = ({
   };
 
   return match(field.type)
-    .with(FieldType.TEXT, () => renderTextFieldElement(field, options))
+    .with(
+      FieldType.INITIALS,
+      FieldType.NAME,
+      FieldType.EMAIL,
+      FieldType.DATE,
+      FieldType.TEXT,
+      FieldType.NUMBER,
+      () => renderGenericTextFieldElement(field, options),
+    )
     .with(FieldType.CHECKBOX, () => renderCheckboxFieldElement(field, options))
     .with(FieldType.RADIO, () => renderRadioFieldElement(field, options))
     .with(FieldType.DROPDOWN, () => renderDropdownFieldElement(field, options))
     .with(FieldType.SIGNATURE, () => renderSignatureFieldElement(field, options))
-    .otherwise(() => renderTextFieldElement(field, options)); // Todo: Envelopes
+    .with(FieldType.FREE_SIGNATURE, () => {
+      throw new Error('Free signature fields are not supported');
+    })
+    .exhaustive();
 };

packages/lib/universal/field-renderer/render-generic-text-field.ts

@@ -12,6 +12,8 @@ import {
 import type { FieldToRender, RenderFieldElementOptions } from './field-renderer';
 import { calculateFieldPosition } from './field-renderer';
 
+const DEFAULT_TEXT_ALIGN = 'left';
+
 const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOptions): Konva.Text => {
   const { pageWidth, pageHeight, mode = 'edit', pageLayer, translations } = options;
 
@@ -31,8 +33,8 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   // Calculate text positioning based on alignment
   const textX = 0;
   const textY = 0;
-  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || 'left';
-  let textVerticalAlign: 'top' | 'middle' | 'bottom' = 'top';
+  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || DEFAULT_TEXT_ALIGN;
+  const textVerticalAlign: 'top' | 'middle' | 'bottom' = 'middle';
   const textFontSize = textMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
   const textPadding = 10;
 
@@ -40,51 +42,33 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
 
   // Handle edit mode.
   if (mode === 'edit') {
-    textToRender = fieldTypeName;
-    textAlign = 'center';
-    textVerticalAlign = 'middle';
-
-    if (textMeta?.label) {
-      textToRender = textMeta.label;
-    } else if (textMeta?.text) {
+    if (textMeta?.text) {
       textToRender = textMeta.text;
-      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
-      }
+    } else if (textMeta?.label) {
+      textToRender = textMeta.label;
+    } else {
+      // Show field name which is centered for the edit mode if no label/text is avaliable.
+      textToRender = fieldTypeName;
+      textAlign = 'center';
     }
   }
 
   // Handle sign mode.
   if (mode === 'sign' || mode === 'export') {
-    textToRender = fieldTypeName;
-    textAlign = 'center';
-    textVerticalAlign = 'middle';
-
-    if (textMeta?.label) {
-      textToRender = textMeta.label;
-    }
-
-    if (textMeta?.text) {
-      textToRender = textMeta.text;
-      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
+    if (!field.inserted) {
+      if (textMeta?.text) {
+        textToRender = textMeta.text;
+      } else if (textMeta?.label) {
+        textToRender = textMeta.label;
+      } else if (mode === 'sign') {
+        // Only show the field name in sign mode if no text/label is avaliable.
+        textToRender = fieldTypeName;
+        textAlign = 'center';
       }
     }
 
     if (field.inserted) {
       textToRender = field.customText;
-      textAlign = textMeta?.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta?.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
-      }
     }
   }
 
@@ -106,7 +90,7 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   return fieldText;
 };
 
-export const renderTextFieldElement = (
+export const renderGenericTextFieldElement = (
   field: FieldToRender,
   options: RenderFieldElementOptions,
 ) => {