@servicetitan/dte-pdf-editor 1.55.0 → 1.57.0

package/src/styles/pdf-field-overlay.css

@@ -11,38 +11,34 @@
     pointer-events: auto;
 }
 
-.dte-pdf-field {
-    position: absolute;
-    border: 1px dashed #999;
-    display: flex;
-    align-items: center;
-    font-size: var(--typescale-1, 14px);
-    padding: var(--spacing-half, 4px);
-    box-sizing: content-box;
+/* Editor-only chrome. Layout metrics come from getFieldBoundsStyle. */
+.dte-pdf-field-editor {
+    outline: 1px dashed #999;
+    outline-offset: 0;
+    border: none;
     pointer-events: auto;
 }
 
-.dte-pdf-field.--selected {
-    border: 2px solid var(--border-color-active);
+.dte-pdf-field-editor.--selected {
+    outline: 2px solid var(--border-color-active);
     cursor: move;
 }
 
-.dte-pdf-field.--unselected {
+.dte-pdf-field-editor.--unselected {
     cursor: pointer;
 }
 
-.dte-pdf-field.--dragging {
+.dte-pdf-field-editor.--dragging {
     opacity: 0.5;
-    will-change: left, top;
 }
 
-.dte-pdf-field.--colored:not(.--selected) {
-    border-color: var(--border-color-active) !important;
+.dte-pdf-field-editor.--colored:not(.--selected) {
+    outline-color: var(--border-color-active) !important;
     box-shadow: 0 0 2px 0 var(--border-color-active);
 }
 
-.dte-pdf-field.--error {
-    border-color: var(--danger) !important;
+.dte-pdf-field-editor.--error {
+    outline-color: var(--danger) !important;
     box-shadow: 0 0 4px 0 var(--danger);
 }
 
@@ -82,38 +78,95 @@
     height: 20px;
 }
 
-.dte-pdf-field:hover .dte-add-field-button {
+.dte-pdf-field-editor:hover .dte-add-field-button {
     display: block;
 }
 
 .dte-pdf-field-view {
     border: none;
+    outline: none;
     cursor: default;
+    pointer-events: auto;
+}
+
+.dte-pdf-field-content {
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
     overflow: hidden;
+    line-height: 1;
+}
+
+/*
+ * Printed PDF text modes (no ellipsis — hard clip like PdfSharp).
+ */
+.dte-pdf-field-text--single-line {
+    width: 100%;
+    min-width: 0;
+    line-height: 1;
     white-space: nowrap;
-    pointer-events: none;
-    justify-content: left;
-    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
-.dte-pdf-field-value {
-    font-weight: normal;
-    color: #333;
+.dte-pdf-field-text--multiline {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    line-height: 1;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    overflow: hidden;
+}
+
+.dte-pdf-field-text--wrapped {
+    width: 100%;
+    min-width: 0;
+    line-height: 1;
     white-space: normal;
+    overflow-wrap: break-word;
     overflow: hidden;
-    text-overflow: ellipsis;
+}
+
+.dte-pdf-field-value {
+    color: #333;
+    font: inherit;
 }
 
 .dte-pdf-field-fillable {
     width: 100%;
     height: 100%;
+    min-width: 0;
+    min-height: 0;
+    box-sizing: border-box;
     background: inherit;
     border: none;
-    pointer-events: none;
-    margin: var(--spacing-0, 0);
+    padding: var(--spacing-0);
+    margin: var(--spacing-0);
+    line-height: 1;
     font-size: inherit;
 }
 
+.dte-pdf-field-editor .dte-pdf-field-fillable {
+    pointer-events: none;
+}
+
+.dte-pdf-field-view .dte-pdf-field-fillable {
+    pointer-events: auto;
+}
+
+.dte-pdf-field-fillable.dte-pdf-field-text--single-line {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.dte-pdf-field-fillable.dte-pdf-field-text--multiline {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    overflow: hidden;
+    resize: none;
+}
+
 .dte-pdf-field-generic-table {
     padding: var(--spacing-0, 0);
     margin: var(--spacing-0, 0);

package/src/utils/field/__tests__/get-field-bounds-style.utils.test.ts

@@ -0,0 +1,50 @@
+import { FieldTypeEnum, PdfField } from '../../../interface/types';
+import { getFieldBoundsStyle } from '../get-field-bounds-style.utils';
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 10,
+    y: 20,
+    page: 1,
+    label: 'Label',
+    width: 200,
+    height: 25,
+    ...overrides,
+});
+
+describe('getFieldBoundsStyle', () => {
+    const subject = (field: PdfField, options?: Parameters<typeof getFieldBoundsStyle>[1]) =>
+        getFieldBoundsStyle(field, options);
+
+    test('positions the field using page offset and field coordinates', () => {
+        expect(subject(buildField(), { pageOffset: { left: 5, top: 15 } })).toMatchObject({
+            left: 15,
+            top: 35,
+            width: 200,
+            height: 25,
+        });
+    });
+
+    test('matches printed PDF clip rect layout', () => {
+        expect(subject(buildField())).toMatchObject({
+            boxSizing: 'border-box',
+            padding: 0,
+            alignItems: 'flex-start',
+            justifyContent: 'flex-start',
+            overflow: 'hidden',
+            lineHeight: 1,
+        });
+    });
+
+    test('converts font size from points to editor pixels', () => {
+        const style = subject(buildField({ styles: { fontSize: 12 } }));
+        expect(style.fontSize).toBe(`${(12 * 980) / 612}px`);
+    });
+
+    test('omits font size for field types that do not support it', () => {
+        const style = subject(buildField({ type: FieldTypeEnum.eSign, subType: 'signature' }));
+        expect(style.fontSize).toBeUndefined();
+    });
+});

package/src/utils/field/__tests__/get-field-text-clip.utils.test.ts

@@ -0,0 +1,43 @@
+import { FieldTypeEnum, PdfField } from '../../../interface/types';
+import { getFieldTextClipClassName, getFieldTextClipMode } from '../get-field-text-clip.utils';
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 0,
+    y: 0,
+    page: 1,
+    label: 'Label',
+    width: 200,
+    height: 25,
+    ...overrides,
+});
+
+describe('getFieldTextClipMode', () => {
+    const subject = (field: PdfField) => getFieldTextClipMode(field);
+
+    test('uses multiline for multiline fillable fields', () => {
+        expect(subject(buildField({ multiline: true }))).toBe('multiline');
+    });
+
+    test('uses single-line for standard fillable fields', () => {
+        expect(subject(buildField())).toBe('single-line');
+    });
+
+    test('uses wrapped for data model and generic text fields', () => {
+        expect(subject(buildField({ type: FieldTypeEnum.dataModel }))).toBe('wrapped');
+        expect(
+            subject(buildField({ type: FieldTypeEnum.generic, subType: 'text' })),
+        ).toBe('wrapped');
+    });
+});
+
+describe('getFieldTextClipClassName', () => {
+    const subject = (field: PdfField) => getFieldTextClipClassName(field);
+
+    test('maps mode to css class', () => {
+        expect(subject(buildField())).toBe('dte-pdf-field-text--single-line');
+        expect(subject(buildField({ multiline: true }))).toBe('dte-pdf-field-text--multiline');
+    });
+});

package/src/utils/field/__tests__/get-field-typography.utils.test.ts

@@ -0,0 +1,56 @@
+import { FieldTypeEnum, PdfField } from '../../../interface/types';
+import {
+    DEFAULT_FIELD_FONT_FAMILY,
+    DEFAULT_FIELD_FONT_WEIGHT,
+} from '../../../constants/field.constants';
+import { getFieldTypographyStyle } from '../get-field-typography.utils';
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 0,
+    y: 0,
+    page: 1,
+    label: 'Label',
+    width: 200,
+    height: 25,
+    ...overrides,
+});
+
+describe('getFieldTypographyStyle', () => {
+    const subject = (field: PdfField) => getFieldTypographyStyle(field);
+
+    test('applies backend default font family and weight', () => {
+        expect(subject(buildField())).toEqual({
+            fontFamily: DEFAULT_FIELD_FONT_FAMILY,
+            fontWeight: DEFAULT_FIELD_FONT_WEIGHT,
+            fontSize: `${(8 * 980) / 612}px`,
+        });
+    });
+
+    test('uses per-field typography overrides when provided', () => {
+        expect(
+            subject(
+                buildField({
+                    styles: {
+                        fontSize: 12,
+                        fontFamily: 'Times New Roman',
+                        fontWeight: 'bold',
+                    },
+                }),
+            ),
+        ).toEqual({
+            fontFamily: 'Times New Roman',
+            fontWeight: 'bold',
+            fontSize: `${(12 * 980) / 612}px`,
+        });
+    });
+
+    test('omits font size for unsupported field types', () => {
+        expect(subject(buildField({ type: FieldTypeEnum.eSign, subType: 'signature' }))).toEqual({
+            fontFamily: DEFAULT_FIELD_FONT_FAMILY,
+            fontWeight: DEFAULT_FIELD_FONT_WEIGHT,
+        });
+    });
+});

package/src/utils/field/get-field-bounds-style.utils.ts

@@ -0,0 +1,65 @@
+import { CSSProperties } from 'react';
+import { FieldTypeEnum, PdfField, PdfFieldSubType } from '../../interface/types';
+import { getFieldTypographyStyle } from './get-field-typography.utils';
+
+interface FieldBoundsStyleOptions {
+    pageOffset?: { left: number; top: number };
+    backgroundColor?: string;
+    borderColor?: string;
+}
+
+const getFieldTypeSpecificStyle = (field: PdfField): CSSProperties => {
+    if (!field.subType) {
+        return {};
+    }
+    const styles = {
+        [FieldTypeEnum.fillable]: {
+            checkbox: {
+                width: 'unset',
+                height: 'unset',
+            },
+            radio: {
+                width: 'unset',
+                height: 'unset',
+            },
+        },
+    } as Record<FieldTypeEnum, Record<PdfFieldSubType, CSSProperties>>;
+
+    return styles[field.type]?.[field.subType] ?? {};
+};
+
+/**
+ * Shared absolute-position style for PDF field overlays.
+ *
+ * Matches the backend `/conversions/templatetopdf` clip rectangle and
+ * `PdfView` preview: content-box sizing, top-left alignment,
+ * and shared typography (font size / family / weight).
+ */
+export const getFieldBoundsStyle = (
+    field: PdfField,
+    options?: FieldBoundsStyleOptions,
+): CSSProperties => {
+    const { backgroundColor, borderColor, pageOffset = { left: 0, top: 0 } } = options ?? {};
+
+    return {
+        position: 'absolute',
+        left: pageOffset.left + field.x,
+        top: pageOffset.top + field.y,
+        width: field.width,
+        height: field.height,
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        boxSizing: 'content-box',
+        padding: 4,
+        margin: 0,
+        minWidth: 0,
+        minHeight: 0,
+        overflow: 'hidden',
+        lineHeight: 1,
+        ...getFieldTypeSpecificStyle(field),
+        ...getFieldTypographyStyle(field),
+        ...(backgroundColor ? { backgroundColor } : {}),
+        ...(borderColor ? { borderColor } : {}),
+    };
+};

package/src/utils/field/get-field-text-clip.utils.ts

@@ -0,0 +1,31 @@
+import { FieldTypeEnum, PdfField } from '../../interface/types';
+
+export type FieldTextClipMode = 'single-line' | 'multiline' | 'wrapped';
+
+/**
+ * Text layout mode for a field overlay.
+ *
+ * Mirrors the backend PDF renderer:
+ * - single-line: no wrap, hard clip at the field rect (no ellipsis)
+ * - multiline: pre-wrap with word breaks, clip overflow vertically
+ * - wrapped: word-wrap for HTML / long prose blocks
+ */
+export const getFieldTextClipMode = (field: PdfField): FieldTextClipMode => {
+    if (field.type === FieldTypeEnum.fillable && field.multiline) {
+        return 'multiline';
+    }
+
+    if (field.type === FieldTypeEnum.generic && field.subType === 'text') {
+        return 'wrapped';
+    }
+
+    if (field.type === FieldTypeEnum.dataModel || field.type === FieldTypeEnum.forms) {
+        return 'wrapped';
+    }
+
+    return 'single-line';
+};
+
+export const getFieldTextClipClassName = (field: PdfField) => {
+    return `dte-pdf-field-text--${getFieldTextClipMode(field)}`;
+};

package/src/utils/field/get-field-typography.utils.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+import { DEFAULT_FIELD_FONT_FAMILY, DEFAULT_FIELD_FONT_WEIGHT } from '../../constants';
+import { PdfField } from '../../interface/types';
+import { getFieldFontSizeInPixels, supportsFieldFontSize } from './get-field-font-size.utils';
+
+/**
+ * Typography styles for a field overlay, aligned with the backend PDF renderer.
+ *
+ * - fontSize is stored in points on `field.styles.fontSize` and converted to pixels
+ * - fontFamily / fontWeight use backend defaults unless set per field
+ */
+export const getFieldTypographyStyle = (field: PdfField): CSSProperties => {
+    const typography: CSSProperties = {
+        fontFamily: field.styles?.fontFamily ?? DEFAULT_FIELD_FONT_FAMILY,
+        fontWeight: field.styles?.fontWeight ?? DEFAULT_FIELD_FONT_WEIGHT,
+    };
+
+    if (supportsFieldFontSize(field)) {
+        typography.fontSize = `${getFieldFontSizeInPixels(field)}px`;
+    }
+
+    return typography;
+};

package/src/utils/field/index.ts

@@ -4,4 +4,7 @@ export * from './field-coordinates.utils';
 export * from './field-drag.utils';
 export * from './field-placeholder-text.utils';
 export * from './field-resize.utils';
+export * from './get-field-bounds-style.utils';
 export * from './get-field-font-size.utils';
+export * from './get-field-text-clip.utils';
+export * from './get-field-typography.utils';