@servicetitan/dte-pdf-editor 1.94.0 → 1.95.0

package/src/styles/pdf-field.css

@@ -47,7 +47,8 @@
         background-color: var(--color-neutral-0, #ffffff);
         border-radius: 4px;
         padding: 1px var(--spacing-half, 4px);
-        top: -10px;
+        top: 0;
+        transform: translateY(-50%);
         left: 3px;
         font-size: var(--typescale-small, 10px);
         line-height: 1;
@@ -63,7 +64,27 @@
         }
     }
 
+    .dte-pdf-field-char-count {
+        position: absolute;
+        right: 3px;
+        bottom: 0;
+        transform: translateY(50%);
+        padding: 1px var(--spacing-half, 4px);
+        border-radius: 4px;
+        background-color: var(--color-neutral-0, #ffffff);
+        box-shadow: 0 0 0 1px var(--pdf-field-color);
+        color: var(--pdf-field-color-dark);
+        font-size: var(--typescale-small, 10px);
+        user-select: none;
+
+        &.--at-limit {
+            color: var(--danger, #dc3545);
+            box-shadow: 0 0 0 1px var(--danger, #dc3545);
+        }
+    }
+
     input::placeholder,
+    textarea::placeholder,
     input[type='date'],
     input[type='date']::-webkit-calendar-picker-indicator {
         color: var(--pdf-field-color);

package/src/utils/field/__tests__/fit-field-text.utils.test.ts

@@ -0,0 +1,224 @@
+import { FieldTypeEnum, type PdfField } from '../../../interface/types';
+import { pointsToPixels } from '../../pdf';
+import { fitFieldTextChange } from '../fit-field-text.utils';
+import { countWrappedLines, type TextMeasurer } from '../text-wrap.utils';
+
+/*
+ * A fake canvas with easy arithmetic, whatever the font: `i` is 2px, `W` is 10px, anything else
+ * 5px. A 100px field then holds 50 `i`, 10 `W` or 20 other characters on a line.
+ */
+const glyphWidth = (char: string) => {
+    if (char === 'i') {
+        return 2;
+    }
+    return char === 'W' ? 10 : 5;
+};
+
+const measure: TextMeasurer = text => {
+    return Array.from(text).reduce((sum, char) => sum + glyphWidth(char), 0);
+};
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 0,
+    y: 0,
+    page: 1,
+    label: 'Label',
+    width: 100,
+    height: 25,
+    ...overrides,
+});
+
+/** A textarea 100px wide with room for exactly three lines. */
+const multilineField = () => {
+    return buildField({ multiline: true, height: Math.ceil(3 * pointsToPixels(8)) + 1 });
+};
+
+describe('fitFieldTextChange', () => {
+    let getContext: jest.SpyInstance;
+
+    const subject = (field: PdfField, previous: string, next: string) => {
+        return fitFieldTextChange(field, previous, next);
+    };
+
+    beforeAll(() => {
+        getContext = jest
+            .spyOn(HTMLCanvasElement.prototype, 'getContext')
+            .mockImplementation(() => {
+                return {
+                    font: '',
+                    measureText: (text: string) => ({ width: measure(text) }),
+                } as unknown as RenderingContext;
+            });
+    });
+
+    afterAll(() => {
+        getContext.mockRestore();
+    });
+
+    describe('single-line text', () => {
+        test('accepts text that fits', () => {
+            expect(subject(buildField(), 'abc', 'abcd')).toBe('abcd');
+        });
+
+        test('accepts text that exactly fills the width', () => {
+            expect(subject(buildField(), 'W'.repeat(9), 'W'.repeat(10))).toBe('W'.repeat(10));
+        });
+
+        test('refuses a character that no longer fits', () => {
+            const full = 'W'.repeat(10);
+
+            expect(subject(buildField(), full, `${full}W`)).toBe(full);
+        });
+
+        test('narrow text keeps fitting long after wide text has run out of room', () => {
+            const field = buildField();
+
+            expect(subject(field, 'i'.repeat(49), 'i'.repeat(50))).toBe('i'.repeat(50));
+            expect(subject(field, 'W'.repeat(10), `${'W'.repeat(10)}W`)).toBe('W'.repeat(10));
+        });
+
+        test('a narrow character fits in room a wide one does not', () => {
+            const value = 'W'.repeat(9);
+
+            expect(subject(buildField(), value, `${value}i`)).toBe(`${value}i`);
+            // 10px are free: two of the 5px characters fit, the third does not
+            expect(subject(buildField(), value, `${value}abc`)).toBe(`${value}ab`);
+        });
+
+        test('cuts a paste back to the characters that fit', () => {
+            expect(subject(buildField(), '', 'a'.repeat(50))).toBe('a'.repeat(20));
+        });
+
+        test('cuts the inserted text, never the text that was already there', () => {
+            const previous = 'W'.repeat(9);
+
+            // 'abc' is 15px but only 10px are free: 'ab' goes in, the tail stays untouched
+            expect(subject(buildField(), previous, 'WWWWabcWWWWW')).toBe('WWWWabWWWWW');
+        });
+
+        test('refuses an insert in the middle when nothing of it fits', () => {
+            const previous = 'W'.repeat(10);
+
+            expect(subject(buildField(), previous, 'WWWWWaWWWWW')).toBe(previous);
+        });
+
+        test('refuses a replacement that would make the text overflow', () => {
+            const previous = 'W'.repeat(10);
+
+            // one W selected and replaced by two
+            expect(subject(buildField(), previous, `WW${previous.slice(1)}`)).toBe(previous);
+        });
+
+        test('always allows deleting, even from a value that already overflows', () => {
+            const overflowing = 'W'.repeat(15);
+
+            expect(subject(buildField(), overflowing, 'W'.repeat(14))).toBe('W'.repeat(14));
+            expect(subject(buildField(), overflowing, '')).toBe('');
+        });
+
+        test('never leaves a field impossible to type in: one character always fits', () => {
+            expect(subject(buildField({ width: 3 }), '', 'W')).toBe('W');
+            expect(subject(buildField({ width: 3 }), 'W', 'WW')).toBe('W');
+        });
+
+        test('never splits a surrogate pair when cutting a paste', () => {
+            const result = subject(buildField(), '', '😀'.repeat(30));
+
+            expect(Array.from(result)).toHaveLength(20);
+            expect(result).toHaveLength(40);
+            expect(result).toBe('😀'.repeat(20));
+        });
+
+        test('is fine with an empty value', () => {
+            expect(subject(buildField(), '', '')).toBe('');
+        });
+    });
+
+    describe('number', () => {
+        // 100px field minus the 15px spin button gutter leaves 85px: 17 digits
+        const numberField = () => buildField({ subType: 'number' });
+
+        test('accepts digits up to the room left after the spin button gutter', () => {
+            expect(subject(numberField(), '1'.repeat(16), '1'.repeat(17))).toBe('1'.repeat(17));
+            expect(subject(numberField(), '1'.repeat(17), '1'.repeat(18))).toBe('1'.repeat(17));
+        });
+
+        test('cuts a pasted number to what fits', () => {
+            expect(subject(numberField(), '', '9'.repeat(40))).toBe('9'.repeat(17));
+        });
+
+        test('treats the sign and decimal point as ordinary characters of the width', () => {
+            expect(subject(numberField(), '', '-123.456')).toBe('-123.456');
+        });
+    });
+
+    describe('multiline text', () => {
+        test('accepts text within the lines available', () => {
+            expect(subject(multilineField(), '', 'a'.repeat(60))).toBe('a'.repeat(60));
+        });
+
+        test('refuses text that needs another line', () => {
+            const full = 'a'.repeat(60);
+
+            expect(subject(multilineField(), full, `${full}a`)).toBe(full);
+        });
+
+        test('counts explicit newlines against the lines available', () => {
+            const threeLines = 'a\nb\nc';
+
+            expect(subject(multilineField(), threeLines, `${threeLines}\n`)).toBe(threeLines);
+            expect(subject(multilineField(), 'a\nb', 'a\nb\n')).toBe('a\nb\n');
+        });
+
+        test('lets a blank line through only while there are lines left', () => {
+            expect(subject(multilineField(), 'a\n', 'a\n\n')).toBe('a\n\n');
+            expect(subject(multilineField(), 'a\n\n', 'a\n\n\n')).toBe('a\n\n');
+        });
+
+        test('wraps by words, so a word that no longer fits moves down and can use up the lines', () => {
+            const threeWordLines = `${'a'.repeat(16)} ${'b'.repeat(16)} ${'c'.repeat(16)}`;
+
+            expect(countWrappedLines(threeWordLines, 100, measure)).toBe(3);
+            // only the first three letters of the next word still fit after the last line's 85px
+            expect(
+                subject(multilineField(), threeWordLines, `${threeWordLines} ${'d'.repeat(16)}`),
+            ).toBe(`${threeWordLines} ddd`);
+        });
+
+        test('breaks a word that is longer than a whole line across lines', () => {
+            expect(subject(multilineField(), '', 'a'.repeat(100))).toBe('a'.repeat(60));
+        });
+
+        test('cuts a paste back to the longest text that fits the lines', () => {
+            const paste = 'aaaaaaaaaaaaaaaa '.repeat(10);
+            const result = subject(multilineField(), '', paste);
+
+            expect(paste.startsWith(result)).toBe(true);
+            expect(countWrappedLines(result, 100, measure)).toBeLessThanOrEqual(3);
+            expect(countWrappedLines(paste.slice(0, result.length + 1), 100, measure)).toBe(4);
+        });
+
+        test('cuts the inserted text, never the text that was already there', () => {
+            const previous = 'a\nb\nc';
+            const result = subject(multilineField(), previous, 'a\nX\nY\nZ\nb\nc');
+
+            expect(result.endsWith('b\nc')).toBe(true);
+            expect(countWrappedLines(result, 100, measure)).toBeLessThanOrEqual(3);
+        });
+    });
+
+    describe('fields it does not limit', () => {
+        test.each(['checkbox', 'radio', 'date', 'dropdown'] as const)('%s', subType => {
+            expect(subject(buildField({ subType }), '', 'W'.repeat(100))).toBe('W'.repeat(100));
+        });
+
+        test('non-fillable fields', () => {
+            expect(subject(buildField({ type: FieldTypeEnum.generic }), '', 'W'.repeat(100))).toBe(
+                'W'.repeat(100),
+            );
+        });
+    });
+});