@servicetitan/dte-pdf-editor 1.47.0 → 1.49.0

package/dist/components/display-conditions/display-condition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-condition.d.ts","sourceRoot":"","sources":["../../../src/components/display-conditions/display-condition.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAyB,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAE9F,UAAU,qBACN,SAAQ,IAAI,CACR,0BAA0B,EACxB,gBAAgB,GAChB,oBAAoB,GACpB,yBAAyB,GACzB,OAAO,GACP,cAAc,GACd,qBAAqB,GACrB,QAAQ,CACb;IACD,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAqCtD,CAAC"}
+{"version":3,"file":"display-condition.d.ts","sourceRoot":"","sources":["../../../src/components/display-conditions/display-condition.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAyB,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAE9F,UAAU,qBACN,SAAQ,IAAI,CACR,0BAA0B,EACxB,gBAAgB,GAChB,oBAAoB,GACpB,yBAAyB,GACzB,OAAO,GACP,cAAc,GACd,qBAAqB,GACrB,QAAQ,CACb;IACD,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAoEtD,CAAC"}

package/dist/components/display-conditions/display-condition.js

@@ -1,10 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@servicetitan/anvil2';
+import { Button, Flex, Text } from '@servicetitan/anvil2';
 import PlusIcon from '@servicetitan/anvil2/assets/icons/material/round/add.svg';
+import DeleteIcon from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
+import EditIcon from '@servicetitan/anvil2/assets/icons/material/round/edit.svg';
 import { Fragment, useState } from 'react';
 import { DisplayConditionModal } from './display-condition-modal';
 export const DisplayCondition = ({ documentFields, formFieldsByFormId, formFieldsLoadingFormId, forms, initialState, onRequestFormFields, onSave, schema, }) => {
+    var _a, _b, _c, _d;
     const [open, setOpen] = useState(false);
-    return (_jsxs(Fragment, { children: [_jsx(Button, { appearance: "secondary", className: "full-width", icon: PlusIcon, onClick: () => setOpen(true), children: "Add Display Condition" }), open && (_jsx(DisplayConditionModal, { onClose: () => setOpen(false), onSave: state => onSave({ displayCondition: state !== null && state !== void 0 ? state : undefined }), documentFields: documentFields, formFieldsByFormId: formFieldsByFormId, formFieldsLoadingFormId: formFieldsLoadingFormId, forms: forms, initialState: initialState, onRequestFormFields: onRequestFormFields, schema: schema }))] }));
+    const conditionCount = (_d = (_c = (_b = (_a = initialState === null || initialState === void 0 ? void 0 : initialState.groups) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.conditions) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
+    return (_jsxs(Fragment, { children: [conditionCount === 0 ? (_jsx(Button, { appearance: "secondary", className: "full-width", icon: PlusIcon, onClick: () => setOpen(true), children: "Add Display Condition" })) : (_jsxs(Flex, { gap: 2, justifyContent: "space-between", alignItems: "center", className: "bordered-paper", children: [_jsxs(Flex, { direction: "column", children: [_jsx(Text, { children: (initialState === null || initialState === void 0 ? void 0 : initialState.behavior) === 'show'
+                                    ? 'Show condition configured'
+                                    : 'Hide condition configured' }), _jsx(Text, { size: "small", subdued: true, variant: "body", children: conditionCount === 1
+                                    ? '1 condition is currently applied'
+                                    : `${conditionCount} conditions are currently applied` })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Button, { size: "small", icon: EditIcon, onClick: () => setOpen(true) }), _jsx(Button, { size: "small", icon: DeleteIcon, onClick: () => onSave({ displayCondition: undefined }) })] })] })), open && (_jsx(DisplayConditionModal, { onClose: () => setOpen(false), onSave: state => onSave({ displayCondition: state !== null && state !== void 0 ? state : undefined }), documentFields: documentFields, formFieldsByFormId: formFieldsByFormId, formFieldsLoadingFormId: formFieldsLoadingFormId, forms: forms, initialState: initialState, onRequestFormFields: onRequestFormFields, schema: schema }))] }));
 };
 //# sourceMappingURL=display-condition.js.map

package/dist/components/display-conditions/display-condition.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-condition.js","sourceRoot":"","sources":["../../../src/components/display-conditions/display-condition.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,QAAQ,MAAM,0DAA0D,CAAC;AAChF,OAAO,EAAM,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,qBAAqB,EAA8B,MAAM,2BAA2B,CAAC;AAgB9F,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EACxD,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACvB,KAAK,EACL,YAAY,EACZ,mBAAmB,EACnB,MAAM,EACN,MAAM,GACT,EAAE,EAAE;IACD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACH,MAAC,QAAQ,eACL,KAAC,MAAM,IACH,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,sCAGvB,EACR,IAAI,IAAI,CACL,KAAC,qBAAqB,IAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,gBAAgB,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,EAAE,CAAC,EACjE,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE,kBAAkB,EACtC,uBAAuB,EAAE,uBAAuB,EAChD,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,mBAAmB,EACxC,MAAM,EAAE,MAAM,GAChB,CACL,IACM,CACd,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"display-condition.js","sourceRoot":"","sources":["../../../src/components/display-conditions/display-condition.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,QAAQ,MAAM,0DAA0D,CAAC;AAChF,OAAO,UAAU,MAAM,6DAA6D,CAAC;AACrF,OAAO,QAAQ,MAAM,2DAA2D,CAAC;AACjF,OAAO,EAAM,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,qBAAqB,EAA8B,MAAM,2BAA2B,CAAC;AAgB9F,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EACxD,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACvB,KAAK,EACL,YAAY,EACZ,mBAAmB,EACnB,MAAM,EACN,MAAM,GACT,EAAE,EAAE;;IACD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,MAAA,MAAA,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,0CAAG,CAAC,CAAC,0CAAE,UAAU,0CAAE,MAAM,mCAAI,CAAC,CAAC;IAE1E,OAAO,CACH,MAAC,QAAQ,eACJ,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,KAAC,MAAM,IACH,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,sCAGvB,CACZ,CAAC,CAAC,CAAC,CACA,MAAC,IAAI,IACD,GAAG,EAAE,CAAC,EACN,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,gBAAgB,aAE1B,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,aACpB,KAAC,IAAI,cACA,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,MAAK,MAAM;oCAC9B,CAAC,CAAC,2BAA2B;oCAC7B,CAAC,CAAC,2BAA2B,GAC9B,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAC,MAAM,YACpC,cAAc,KAAK,CAAC;oCACjB,CAAC,CAAC,kCAAkC;oCACpC,CAAC,CAAC,GAAG,cAAc,mCAAmC,GACvD,IACJ,EACP,MAAC,IAAI,IAAC,GAAG,EAAE,CAAC,aACR,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAI,EACrE,KAAC,MAAM,IACH,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,GACxD,IACC,IACJ,CACV,EACA,IAAI,IAAI,CACL,KAAC,qBAAqB,IAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,gBAAgB,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,EAAE,CAAC,EACjE,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE,kBAAkB,EACtC,uBAAuB,EAAE,uBAAuB,EAChD,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,mBAAmB,EACxC,MAAM,EAAE,MAAM,GAChB,CACL,IACM,CACd,CAAC;AACN,CAAC,CAAC"}

package/dist/components/pdf-view/pdf-view-data-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pdf-view-data-model.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-data-model.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGlE,UAAU,qBAAqB;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAGtD,CAAC"}
+{"version":3,"file":"pdf-view-data-model.d.ts","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-data-model.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGlE,UAAU,qBAAqB;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CActD,CAAC"}

package/dist/components/pdf-view/pdf-view-data-model.js

@@ -1,7 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { resolvePdfDataValues } from '../../utils';
+import { nl2br, resolvePdfDataValues } from '../../utils';
 export const PdfViewDataModel = ({ data, field }) => {
     const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
-    return _jsx("div", { className: "dte-pdf-field-value", children: resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : '' });
+    /*
+     * Mirrors Unlayer's `{{ field | safe | nl2br }}` as
+     * conversion. The `__html` key and `dangerouslySetInnerHTML` are mandated by React's API.
+     */
+    return (_jsx("div", { className: "dte-pdf-field-value", 
+        // eslint-disable-next-line react/no-danger, @typescript-eslint/naming-convention
+        dangerouslySetInnerHTML: { __html: nl2br(resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : '') } }));
 };
 //# sourceMappingURL=pdf-view-data-model.js.map

package/dist/components/pdf-view/pdf-view-data-model.js.map

@@ -1 +1 @@
-{"version":3,"file":"pdf-view-data-model.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-data-model.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAOnD,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/E,OAAO,cAAK,SAAS,EAAC,qBAAqB,YAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,EAAE,GAAO,CAAC;AAC5E,CAAC,CAAC"}
+{"version":3,"file":"pdf-view-data-model.js","sourceRoot":"","sources":["../../../src/components/pdf-view/pdf-view-data-model.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAO1D,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/E;;;OAGG;IACH,OAAO,CACH,cACI,SAAS,EAAC,qBAAqB;QAC/B,iFAAiF;QACjF,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,EAAE,CAAC,EAAE,GACjE,CACL,CAAC;AACN,CAAC,CAAC"}

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

@@ -1,3 +1,4 @@
 export * from './date.utils';
 export * from './number.utils';
+export * from './schema.utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/utils/shared/index.js

@@ -1,3 +1,4 @@
 export * from './date.utils';
 export * from './number.utils';
+export * from './schema.utils';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/utils/shared/schema.utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * React/HTML equivalent of the Nunjucks `nl2br` filter used by Unlayer's
+ * `{{ field | safe | nl2br }}` template. Replaces every `\r\n` or `\n` with `<br />\n`,
+ * keeping the original newline so the rendered HTML source still wraps in dev tools.
+ */
+export declare const nl2br: (value: string) => string;
+//# sourceMappingURL=schema.utils.d.ts.map

package/dist/utils/shared/schema.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/shared/schema.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,KAAG,MAErC,CAAC"}

package/dist/utils/shared/schema.utils.js

@@ -0,0 +1,9 @@
+/**
+ * React/HTML equivalent of the Nunjucks `nl2br` filter used by Unlayer's
+ * `{{ field | safe | nl2br }}` template. Replaces every `\r\n` or `\n` with `<br />\n`,
+ * keeping the original newline so the rendered HTML source still wraps in dev tools.
+ */
+export const nl2br = (value) => {
+    return value.replace(/\r\n|\n/g, '<br />\n');
+};
+//# sourceMappingURL=schema.utils.js.map

package/dist/utils/shared/schema.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.utils.js","sourceRoot":"","sources":["../../../src/utils/shared/schema.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3C,OAAO,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AACjD,CAAC,CAAC"}

package/package.json

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

package/src/components/display-conditions/display-condition.tsx

@@ -1,5 +1,7 @@
-import { Button } from '@servicetitan/anvil2';
+import { Button, Flex, Text } from '@servicetitan/anvil2';
 import PlusIcon from '@servicetitan/anvil2/assets/icons/material/round/add.svg';
+import DeleteIcon from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
+import EditIcon from '@servicetitan/anvil2/assets/icons/material/round/edit.svg';
 import { FC, Fragment, useState } from 'react';
 import { PdfField } from '../../interface/types';
 import { DisplayConditionModal, DisplayConditionModalProps } from './display-condition-modal';
@@ -29,17 +31,48 @@ export const DisplayCondition: FC<DisplayConditionProps> = ({
     schema,
 }) => {
     const [open, setOpen] = useState(false);
+    const conditionCount = initialState?.groups?.[0]?.conditions?.length ?? 0;
 
     return (
         <Fragment>
-            <Button
-                appearance="secondary"
-                className="full-width"
-                icon={PlusIcon}
-                onClick={() => setOpen(true)}
-            >
-                Add Display Condition
-            </Button>
+            {conditionCount === 0 ? (
+                <Button
+                    appearance="secondary"
+                    className="full-width"
+                    icon={PlusIcon}
+                    onClick={() => setOpen(true)}
+                >
+                    Add Display Condition
+                </Button>
+            ) : (
+                <Flex
+                    gap={2}
+                    justifyContent="space-between"
+                    alignItems="center"
+                    className="bordered-paper"
+                >
+                    <Flex direction="column">
+                        <Text>
+                            {initialState?.behavior === 'show'
+                                ? 'Show condition configured'
+                                : 'Hide condition configured'}
+                        </Text>
+                        <Text size="small" subdued variant="body">
+                            {conditionCount === 1
+                                ? '1 condition is currently applied'
+                                : `${conditionCount} conditions are currently applied`}
+                        </Text>
+                    </Flex>
+                    <Flex gap={2}>
+                        <Button size="small" icon={EditIcon} onClick={() => setOpen(true)} />
+                        <Button
+                            size="small"
+                            icon={DeleteIcon}
+                            onClick={() => onSave({ displayCondition: undefined })}
+                        />
+                    </Flex>
+                </Flex>
+            )}
             {open && (
                 <DisplayConditionModal
                     onClose={() => setOpen(false)}

package/src/components/pdf-view/pdf-view-data-model.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { DataModelValues, PdfField } from '../../interface/types';
-import { resolvePdfDataValues } from '../../utils';
+import { nl2br, resolvePdfDataValues } from '../../utils';
 
 interface PdfViewDataModelProps {
     field: PdfField;
@@ -9,5 +9,16 @@ interface PdfViewDataModelProps {
 
 export const PdfViewDataModel: FC<PdfViewDataModelProps> = ({ data, field }) => {
     const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
-    return <div className="dte-pdf-field-value">{resolvedValue ?? ''}</div>;
+
+    /*
+     * Mirrors Unlayer's `{{ field | safe | nl2br }}` as
+     * conversion. The `__html` key and `dangerouslySetInnerHTML` are mandated by React's API.
+     */
+    return (
+        <div
+            className="dte-pdf-field-value"
+            // eslint-disable-next-line react/no-danger, @typescript-eslint/naming-convention
+            dangerouslySetInnerHTML={{ __html: nl2br(resolvedValue ?? '') }}
+        />
+    );
 };

package/src/styles/generic.css

@@ -7,3 +7,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.bordered-paper {
+    padding: 12px;
+    background-color: var(--color-neutral-0);
+    border: 1px solid var(--border-color);
+    border-radius: 0.375rem;
+}

package/src/utils/shared/index.ts

@@ -1,2 +1,3 @@
 export * from './date.utils';
 export * from './number.utils';
+export * from './schema.utils';

package/src/utils/shared/schema.utils.ts

@@ -0,0 +1,8 @@
+/**
+ * React/HTML equivalent of the Nunjucks `nl2br` filter used by Unlayer's
+ * `{{ field | safe | nl2br }}` template. Replaces every `\r\n` or `\n` with `<br />\n`,
+ * keeping the original newline so the rendered HTML source still wraps in dev tools.
+ */
+export const nl2br = (value: string): string => {
+    return value.replace(/\r\n|\n/g, '<br />\n');
+};