@servicetitan/dte-pdf-editor 1.94.0 → 1.95.0

package/dist/utils/field/get-field-max-length.utils.js

@@ -0,0 +1,166 @@
+import { EPSILON, getFieldTextBox, getMaxLines } from './field-text-box.utils';
+import { advanceWrap, INITIAL_WRAP_STATE, } from './text-wrap.utils';
+/**
+ * Typical free-text form entries (names, addresses, emails, short notes) in mixed case.
+ *
+ * Capacity is estimated for this text rather than for a uniform `A-Za-z0-9` alphabet: that one
+ * averages ~0.58em per glyph against ~0.46em here (and ~0.47em for real entries), which is why
+ * the previous estimate under-reported capacity by ~20%. Contains no hyphens or newlines, so
+ * the wrap simulation in `text-wrap.utils` stays exact for it.
+ */
+const TEXT_SAMPLE = 'Jonathan Alexander Smith 1234 Elm Street, Apartment 5B Springfield, IL 62704 ' +
+    'jonathan.smith@example.com Maria Garcia Lopez Estimate #48213 for $1,250.00 ' +
+    'Replace the capacitor and clean the coils. Call before arriving, gate code 4471. ' +
+    'Dana Whitfield, Park Avenue Plumbing ';
+/** Glyphs a user can type into a number field; the capacity is bounded by the widest of them. */
+const NUMBER_GLYPHS = '0123456789.-';
+/** Evenly spaced word-start offsets into the sample that multiline wrapping is averaged over. */
+const MULTILINE_SAMPLE_PHASES = 8;
+/** Hard stop for the search, so a degenerate measurer (zero-width glyphs) can't loop forever. */
+const MAX_CAPACITY = 10000;
+/**
+ * Largest `length` in `[0, max]` for which `fits(length)` holds; `fits` must be monotone
+ * (once a length stops fitting, longer ones don't either) and `fits(0)` is taken as true.
+ */
+export const findLargestFit = (fits, max = MAX_CAPACITY) => {
+    let low = 0;
+    let high = max + 1;
+    for (let probe = 1; probe < high; probe *= 2) {
+        if (!fits(probe)) {
+            high = probe;
+            break;
+        }
+        low = probe;
+    }
+    while (high - low > 1) {
+        const mid = Math.floor((low + high) / 2);
+        if (fits(mid)) {
+            low = mid;
+        }
+        else {
+            high = mid;
+        }
+    }
+    return low;
+};
+/** The sample starting at `start` and wrapping around, repeated to `length` characters. */
+const getSampleText = (start, length) => {
+    const rotated = TEXT_SAMPLE.slice(start) + TEXT_SAMPLE.slice(0, start);
+    return rotated.repeat(Math.ceil(length / rotated.length)).slice(0, length);
+};
+const SAMPLE_WORD_STARTS = Array.from(TEXT_SAMPLE, (char, index) => index).filter(index => {
+    return TEXT_SAMPLE[index] !== ' ' && (index === 0 || TEXT_SAMPLE[index - 1] === ' ');
+});
+const SAMPLE_PHASES = Array.from({ length: MULTILINE_SAMPLE_PHASES }, (_, index) => {
+    return SAMPLE_WORD_STARTS[Math.floor((index * SAMPLE_WORD_STARTS.length) / MULTILINE_SAMPLE_PHASES)];
+});
+const getRemainingWidth = ({ measure, width }, value) => {
+    return Math.max(0, width - measure(value));
+};
+/**
+ * Number inputs only ever hold digits, `.` and `-`, so every value of N characters is at most
+ * N widest-glyphs wide: the room left is a guaranteed fit, not an average.
+ */
+const estimateNumberRoom = (box, value) => {
+    const widestGlyph = Math.max(...Array.from(NUMBER_GLYPHS, glyph => box.measure(glyph)));
+    return Math.floor(getRemainingWidth(box, value) / widestGlyph + EPSILON);
+};
+/** Characters of typical text that fit in the width left: it over the sample's mean glyph. */
+const estimateSingleLineRoom = (box, value) => {
+    const meanGlyphWidth = box.measure(TEXT_SAMPLE) / TEXT_SAMPLE.length;
+    return Math.floor(getRemainingWidth(box, value) / meanGlyphWidth + EPSILON);
+};
+/**
+ * Characters of typical text that fit in the lines left after `value`. Real wrapping is
+ * simulated, so the unused space at the end of each line is accounted for; the result is
+ * averaged over several starting points in the sample because it shifts by a few characters
+ * with where the text begins.
+ */
+const estimateMultilineRoom = (box, value) => {
+    const maxLines = getMaxLines(box);
+    const measureCache = new Map();
+    const measure = text => {
+        let measured = measureCache.get(text);
+        if (measured === undefined) {
+            measured = box.measure(text);
+            measureCache.set(text, measured);
+        }
+        return measured;
+    };
+    const valueState = advanceWrap(INITIAL_WRAP_STATE, value, box.width, measure);
+    if (valueState.lines > maxLines) {
+        return 0;
+    }
+    // typed text goes on after a word, so continue it with a space unless it already ends in one
+    const separator = /(^|[ \n])$/.test(value) ? '' : ' ';
+    const fitsAfterValue = (state, text) => {
+        return advanceWrap(state, text, box.width, measure).lines <= maxLines;
+    };
+    const capacities = SAMPLE_PHASES.map(start => {
+        return findLargestFit(length => {
+            return fitsAfterValue(valueState, separator + getSampleText(start, length));
+        });
+    });
+    return Math.floor(capacities.reduce((sum, value) => sum + value, 0) / capacities.length);
+};
+/**
+ * Highest character count a text box can hold, from rendered text widths: the characters
+ * already in `value` plus how many more fit after it.
+ *
+ * - `number`: guaranteed fit, bounded by the widest of the digits, `.` and `-`
+ * - `single-line`: expected fit for typical text, from the mean glyph width of a sample
+ * - `multiline`: expected fit for typical text, from simulated word wrapping into the
+ *   `floor(height / lineHeight)` lines available
+ *
+ * Narrow text leaves more room than wide text, so the answer moves with what is typed. A
+ * value that already overflows has no room left: the capacity is just its own length.
+ * At least 1; `undefined` when `measure` yields no usable text width, since there is then
+ * no basis for a limit.
+ */
+export const estimateTextCapacity = ({ value = '', ...box }) => {
+    const sampleWidth = box.measure(TEXT_SAMPLE);
+    if (!Number.isFinite(sampleWidth) || sampleWidth <= 0) {
+        return undefined;
+    }
+    let room;
+    switch (box.layout) {
+        case 'number':
+            room = estimateNumberRoom(box, value);
+            break;
+        case 'multiline':
+            room = estimateMultilineRoom(box, value);
+            break;
+        default:
+            room = estimateSingleLineRoom(box, value);
+    }
+    return Number.isNaN(room)
+        ? undefined
+        : Math.max(1, value.length + Math.min(MAX_CAPACITY, room));
+};
+const MAX_LENGTH_CACHE_SIZE = 500;
+const maxLengthCache = new Map();
+/**
+ * Max character count a fillable `text`/`number` field can hold given what is typed in it, so
+ * the counter can say how much room is left. With no `value` it is the field's capacity when
+ * empty. Input is limited by what actually fits, see `fitFieldTextChange`, not by this count.
+ *
+ * See {@link estimateTextCapacity} for how each field kind is measured. Text is measured
+ * with canvas at the field's own font, so it follows family, weight and size.
+ */
+export const getFieldMaxLength = (field, value = '') => {
+    const box = getFieldTextBox(field);
+    if (!box) {
+        return undefined;
+    }
+    const cacheKey = `${box.key}|${value}`;
+    if (maxLengthCache.has(cacheKey)) {
+        return maxLengthCache.get(cacheKey);
+    }
+    const maxLength = estimateTextCapacity({ ...box, value });
+    if (maxLengthCache.size >= MAX_LENGTH_CACHE_SIZE) {
+        maxLengthCache.clear();
+    }
+    maxLengthCache.set(cacheKey, maxLength);
+    return maxLength;
+};
+//# sourceMappingURL=get-field-max-length.utils.js.map

package/dist/utils/field/get-field-max-length.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-field-max-length.utils.js","sourceRoot":"","sources":["../../../src/utils/field/get-field-max-length.utils.ts"],"names":[],"mappings":"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"}

package/dist/utils/field/index.d.ts

@@ -5,8 +5,10 @@ export * from './field-drag.utils';
 export * from './field-placeholder-text.utils';
 export * from './field-reading-order.utils';
 export * from './field-resize.utils';
+export * from './fit-field-text.utils';
 export * from './get-field-bounds-style.utils';
 export * from './get-field-font-size.utils';
+export * from './get-field-max-length.utils';
 export * from './get-field-text-clip.utils';
 export * from './get-field-type-option.utils';
 export * from './get-field-typography.utils';

package/dist/utils/field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}

package/dist/utils/field/index.js

@@ -5,8 +5,10 @@ export * from './field-drag.utils';
 export * from './field-placeholder-text.utils';
 export * from './field-reading-order.utils';
 export * from './field-resize.utils';
+export * from './fit-field-text.utils';
 export * from './get-field-bounds-style.utils';
 export * from './get-field-font-size.utils';
+export * from './get-field-max-length.utils';
 export * from './get-field-text-clip.utils';
 export * from './get-field-type-option.utils';
 export * from './get-field-typography.utils';

package/dist/utils/field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}

package/dist/utils/field/text-wrap.utils.d.ts

@@ -0,0 +1,26 @@
+/** Returns the rendered width of `text` in pixels for one fixed font. */
+export type TextMeasurer = (text: string) => number;
+/** Where text wrapping has got to: the line being filled, and how wide it is so far. */
+export interface WrapState {
+    lines: number;
+    lineWidth: number;
+}
+/** An empty box still occupies one line. */
+export declare const INITIAL_WRAP_STATE: WrapState;
+/**
+ * Continues laying out `text` after `state` in a box `maxWidth` wide, simulating browser layout
+ * for `white-space: pre-wrap; overflow-wrap: break-word` (the multiline fillable textarea):
+ *
+ * - `\n` forces a line break; a trailing `\n` still opens a line, as in a textarea
+ * - words wrap at spaces; runs of spaces are preserved and hang past the edge instead of wrapping
+ * - a word wider than a whole line is broken between characters (code points)
+ *
+ * `text` must start at a word boundary of the text already laid out, i.e. not continue a word.
+ *
+ * Not modelled: break opportunities after hyphens and other punctuation, which only ever let
+ * browsers pack lines more tightly, so the line count is never optimistic.
+ */
+export declare const advanceWrap: (state: WrapState, text: string, maxWidth: number, measure: TextMeasurer) => WrapState;
+/** Counts the lines `text` occupies in a box `maxWidth` wide; see {@link advanceWrap}. */
+export declare const countWrappedLines: (text: string, maxWidth: number, measure: TextMeasurer) => number;
+//# sourceMappingURL=text-wrap.utils.d.ts.map

package/dist/utils/field/text-wrap.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-wrap.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/field/text-wrap.utils.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpD,wFAAwF;AACxF,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,4CAA4C;AAC5C,eAAO,MAAM,kBAAkB,EAAE,SAAsC,CAAC;AAExE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GACpB,OAAO,SAAS,EAChB,MAAM,MAAM,EACZ,UAAU,MAAM,EAChB,SAAS,YAAY,KACtB,SAsCF,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,iBAAiB,GAC1B,MAAM,MAAM,EACZ,UAAU,MAAM,EAChB,SAAS,YAAY,KACtB,MAEF,CAAC"}

package/dist/utils/field/text-wrap.utils.js

@@ -0,0 +1,53 @@
+/** An empty box still occupies one line. */
+export const INITIAL_WRAP_STATE = { lines: 1, lineWidth: 0 };
+/**
+ * Continues laying out `text` after `state` in a box `maxWidth` wide, simulating browser layout
+ * for `white-space: pre-wrap; overflow-wrap: break-word` (the multiline fillable textarea):
+ *
+ * - `\n` forces a line break; a trailing `\n` still opens a line, as in a textarea
+ * - words wrap at spaces; runs of spaces are preserved and hang past the edge instead of wrapping
+ * - a word wider than a whole line is broken between characters (code points)
+ *
+ * `text` must start at a word boundary of the text already laid out, i.e. not continue a word.
+ *
+ * Not modelled: break opportunities after hyphens and other punctuation, which only ever let
+ * browsers pack lines more tightly, so the line count is never optimistic.
+ */
+export const advanceWrap = (state, text, maxWidth, measure) => {
+    var _a;
+    let { lineWidth, lines } = state;
+    for (const token of (_a = text.replace(/\r\n?/g, '\n').match(/\n| +|[^ \n]+/g)) !== null && _a !== void 0 ? _a : []) {
+        if (token === '\n') {
+            lines += 1;
+            lineWidth = 0;
+            continue;
+        }
+        const tokenWidth = measure(token);
+        if (token[0] === ' ' || lineWidth + tokenWidth <= maxWidth) {
+            lineWidth += tokenWidth;
+            continue;
+        }
+        if (lineWidth > 0) {
+            lines += 1;
+            lineWidth = 0;
+        }
+        if (tokenWidth <= maxWidth) {
+            lineWidth = tokenWidth;
+            continue;
+        }
+        for (const char of token) {
+            const charWidth = measure(char);
+            if (lineWidth > 0 && lineWidth + charWidth > maxWidth) {
+                lines += 1;
+                lineWidth = 0;
+            }
+            lineWidth += charWidth;
+        }
+    }
+    return { lines, lineWidth };
+};
+/** Counts the lines `text` occupies in a box `maxWidth` wide; see {@link advanceWrap}. */
+export const countWrappedLines = (text, maxWidth, measure) => {
+    return advanceWrap(INITIAL_WRAP_STATE, text, maxWidth, measure).lines;
+};
+//# sourceMappingURL=text-wrap.utils.js.map

package/dist/utils/field/text-wrap.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-wrap.utils.js","sourceRoot":"","sources":["../../../src/utils/field/text-wrap.utils.ts"],"names":[],"mappings":"AASA,4CAA4C;AAC5C,MAAM,CAAC,MAAM,kBAAkB,GAAc,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC;AAExE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACvB,KAAgB,EAChB,IAAY,EACZ,QAAgB,EAChB,OAAqB,EACZ,EAAE;;IACX,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEjC,KAAK,MAAM,KAAK,IAAI,MAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,mCAAI,EAAE,EAAE,CAAC;QAC7E,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACjB,KAAK,IAAI,CAAC,CAAC;YACX,SAAS,GAAG,CAAC,CAAC;YACd,SAAS;QACb,CAAC;QAED,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAElC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,SAAS,GAAG,UAAU,IAAI,QAAQ,EAAE,CAAC;YACzD,SAAS,IAAI,UAAU,CAAC;YACxB,SAAS;QACb,CAAC;QAED,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC;YACX,SAAS,GAAG,CAAC,CAAC;QAClB,CAAC;QAED,IAAI,UAAU,IAAI,QAAQ,EAAE,CAAC;YACzB,SAAS,GAAG,UAAU,CAAC;YACvB,SAAS;QACb,CAAC;QAED,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACvB,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,SAAS,GAAG,CAAC,IAAI,SAAS,GAAG,SAAS,GAAG,QAAQ,EAAE,CAAC;gBACpD,KAAK,IAAI,CAAC,CAAC;gBACX,SAAS,GAAG,CAAC,CAAC;YAClB,CAAC;YACD,SAAS,IAAI,SAAS,CAAC;QAC3B,CAAC;IACL,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAChC,CAAC,CAAC;AAEF,0FAA0F;AAC1F,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC7B,IAAY,EACZ,QAAgB,EAChB,OAAqB,EACf,EAAE;IACR,OAAO,WAAW,CAAC,kBAAkB,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC;AAC1E,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-pdf-editor",
-  "version": "1.94.0",
+  "version": "1.95.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

package/src/components/pdf-fields-overlay/pdf-overlay-field-fillable.tsx

@@ -3,12 +3,14 @@ import { v4 as uuidv4 } from 'uuid';
 import { type PdfField } from '../../interface/types';
 import {
     getDropdownFieldItems,
+    getFieldMaxLength,
     getFieldPlaceholderText,
     getFieldTextClipClassName,
     getFillablePaintedLabel,
     getTodayDateInputValue,
     isRadioDefaultSelected,
 } from '../../utils';
+import { CharLimitIndicator } from '../shared';
 import { AddHandle } from './add-handle';
 
 interface PdfOverlayFieldFillableProps {
@@ -130,14 +132,20 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
         case 'number': {
             const defaultNumberValue = field.default?.type === 'number' ? field.default.value : '';
             return (
-                <input
-                    key={defaultNumberValue}
-                    type="number"
-                    readOnly
-                    defaultValue={defaultNumberValue}
-                    className={`dte-pdf-field-fillable ${clipClassName}`}
-                    placeholder={placeholderText}
-                />
+                <Fragment>
+                    <input
+                        key={defaultNumberValue}
+                        type="number"
+                        readOnly
+                        defaultValue={defaultNumberValue}
+                        className={`dte-pdf-field-fillable ${clipClassName}`}
+                        placeholder={placeholderText}
+                    />
+                    <CharLimitIndicator
+                        maxLength={getFieldMaxLength(field, String(defaultNumberValue))}
+                        value={String(defaultNumberValue)}
+                    />
+                </Fragment>
             );
         }
 
@@ -166,27 +174,32 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
 
         default: {
             const defaultTextValue = field.default?.type === 'text' ? field.default.value : '';
-            if (field.multiline) {
-                return (
-                    <textarea
-                        key={defaultTextValue}
-                        readOnly
-                        defaultValue={defaultTextValue}
-                        style={{ font: 'inherit', lineHeight: 'inherit', outline: 'none' }}
-                        placeholder={placeholderText}
-                        className={`dte-pdf-field-fillable ${clipClassName}`}
-                    />
-                );
-            }
             return (
-                <input
-                    key={defaultTextValue}
-                    type="text"
-                    readOnly
-                    defaultValue={defaultTextValue}
-                    placeholder={placeholderText}
-                    className={`dte-pdf-field-fillable ${clipClassName}`}
-                />
+                <Fragment>
+                    {field.multiline ? (
+                        <textarea
+                            key={defaultTextValue}
+                            readOnly
+                            defaultValue={defaultTextValue}
+                            style={{ font: 'inherit', lineHeight: 'inherit', outline: 'none' }}
+                            placeholder={placeholderText}
+                            className={`dte-pdf-field-fillable ${clipClassName}`}
+                        />
+                    ) : (
+                        <input
+                            key={defaultTextValue}
+                            type="text"
+                            readOnly
+                            defaultValue={defaultTextValue}
+                            placeholder={placeholderText}
+                            className={`dte-pdf-field-fillable ${clipClassName}`}
+                        />
+                    )}
+                    <CharLimitIndicator
+                        maxLength={getFieldMaxLength(field, defaultTextValue)}
+                        value={defaultTextValue}
+                    />
+                </Fragment>
             );
         }
     }

package/src/components/pdf-view/pdf-view-fillable.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ChangeEvent, FC, Fragment } from 'react';
 import {
     type DataChangePayload,
     type DataModelValues,
@@ -7,12 +7,15 @@ import {
 } from '../../interface/types';
 import {
     dateToUtcZero,
+    fitFieldTextChange,
     getDropdownFieldItems,
+    getFieldMaxLength,
     getFieldPlaceholderText,
     getFieldTextClipClassName,
     getFillablePaintedLabel,
     toDateInputValue,
 } from '../../utils';
+import { CharLimitIndicator } from '../shared';
 
 interface PdfViewFillableProps {
     field: PdfField;
@@ -43,6 +46,33 @@ const fillableTextStyles = {
     margin: 0,
 } as const;
 
+type FillableTextChangeEvent = ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;
+
+/**
+ * Passes on a text change, cut back to what fits the field. A change that adds only overflow is
+ * dropped; either way the caret stays where the user was typing, as with a native `maxLength`.
+ */
+const applyFittedChange = (
+    field: PdfField,
+    value: string,
+    event: FillableTextChangeEvent,
+    onChange: (value: string) => void,
+) => {
+    const { selectionStart, value: nextValue } = event.target;
+    const fittedValue = fitFieldTextChange(field, value, nextValue);
+
+    if (fittedValue !== value) {
+        onChange(fittedValue);
+    }
+
+    if (fittedValue !== nextValue && selectionStart != null) {
+        const caret = fittedValue.length - (nextValue.length - selectionStart);
+        const input = event.target;
+        // after React has put the fitted value back into the control, which moves the caret
+        queueMicrotask(() => input.setSelectionRange(caret, caret));
+    }
+};
+
 export const FillableTextInput: FC<FillableTextInputProps> = ({
     disabled,
     field,
@@ -50,19 +80,24 @@ export const FillableTextInput: FC<FillableTextInputProps> = ({
     readOnly,
     value,
 }) => {
+    const maxLength = getFieldMaxLength(field, value);
+
     return (
-        <input
-            readOnly={readOnly}
-            type="text"
-            className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
-            style={fillableTextStyles}
-            disabled={disabled}
-            id={field.path}
-            name={field.path}
-            value={value}
-            onChange={e => onChange(e.target.value)}
-            placeholder={getFieldPlaceholderText(field)}
-        />
+        <Fragment>
+            <input
+                readOnly={readOnly}
+                type="text"
+                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                style={fillableTextStyles}
+                disabled={disabled}
+                id={field.path}
+                name={field.path}
+                value={value}
+                onChange={e => applyFittedChange(field, value, e, onChange)}
+                placeholder={getFieldPlaceholderText(field)}
+            />
+            <CharLimitIndicator maxLength={maxLength} value={value} />
+        </Fragment>
     );
 };
 
@@ -73,18 +108,23 @@ export const FillableTextareaInput: FC<FillableTextInputProps> = ({
     readOnly,
     value,
 }) => {
+    const maxLength = getFieldMaxLength(field, value);
+
     return (
-        <textarea
-            readOnly={readOnly}
-            className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
-            style={{ ...fillableTextStyles, resize: 'none' }}
-            disabled={disabled}
-            id={field.path}
-            name={field.path}
-            value={value}
-            onChange={e => onChange(e.target.value)}
-            placeholder={getFieldPlaceholderText(field)}
-        />
+        <Fragment>
+            <textarea
+                readOnly={readOnly}
+                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                style={{ ...fillableTextStyles, resize: 'none' }}
+                disabled={disabled}
+                id={field.path}
+                name={field.path}
+                value={value}
+                onChange={e => applyFittedChange(field, value, e, onChange)}
+                placeholder={getFieldPlaceholderText(field)}
+            />
+            <CharLimitIndicator maxLength={maxLength} value={value} />
+        </Fragment>
     );
 };
 
@@ -193,19 +233,25 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     }
 
     if (field.subType === 'number') {
+        const numberValue = resolvedValue == null ? '' : String(resolvedValue);
+        const maxLength = getFieldMaxLength(field, numberValue);
+
         return (
-            <input
-                readOnly={readOnly}
-                type="number"
-                className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
-                style={fillableTextStyles}
-                disabled={!isFillable}
-                id={field.path}
-                name={field.path}
-                value={resolvedValue ?? ''}
-                onChange={e => handleDataChange(e.target.value)}
-                placeholder={getFieldPlaceholderText(field)}
-            />
+            <Fragment>
+                <input
+                    readOnly={readOnly}
+                    type="number"
+                    className={`dte-pdf-field-fillable ${getFieldTextClipClassName(field)}`}
+                    style={fillableTextStyles}
+                    disabled={!isFillable}
+                    id={field.path}
+                    name={field.path}
+                    value={numberValue}
+                    onChange={e => applyFittedChange(field, numberValue, e, handleDataChange)}
+                    placeholder={getFieldPlaceholderText(field)}
+                />
+                <CharLimitIndicator maxLength={maxLength} value={numberValue} />
+            </Fragment>
         );
     }
 

package/src/components/shared/char-limit-indicator.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+interface CharLimitIndicatorProps {
+    maxLength?: number;
+    value: string;
+}
+
+export const CharLimitIndicator: FC<CharLimitIndicatorProps> = ({ maxLength, value }) => {
+    if (maxLength == null) {
+        return null;
+    }
+
+    const filledCount = value.length;
+
+    return (
+        <span
+            className={`dte-pdf-field-char-count${filledCount >= maxLength ? ' --at-limit' : ''}`}
+            aria-live="polite"
+        >
+            {filledCount}/{maxLength}
+        </span>
+    );
+};

package/src/components/shared/index.ts

@@ -1 +1,2 @@
 export * from './inline-editable';
+export * from './char-limit-indicator';

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

@@ -12,10 +12,10 @@
 }
 
 .dte-pdf-field-error-message {
-    top: 100%;
+    bottom: -4px;
+    transform: translateY(100%);
     min-width: 100px;
     position: absolute;
-    margin-top: var(--spacing-1, 8px);
     color: var(--danger);
     font-size: var(--typescale-small, 10px);
 }
@@ -105,6 +105,13 @@
     }
 }
 
+textarea.dte-pdf-field-fillable,
+input[type='text'].dte-pdf-field-fillable,
+input[type='number'].dte-pdf-field-fillable {
+    font-family: inherit;
+    font-weight: inherit;
+}
+
 .dte-pdf-field-generic-table {
     padding: var(--spacing-0, 0);
     margin: var(--spacing-0, 0);