@servicetitan/dte-unlayer 0.89.0 → 0.91.0

package/src/editor.tsx

@@ -26,6 +26,8 @@ export interface UnlayerEditorProps {
 
     onImage?(file: File): Promise<{ url: string }>;
 
+    onError?(title: string, description?: string): void;
+
     onMessage?(type: string, data: any): void;
 }
 
@@ -88,6 +90,12 @@ export const UnlayerEditor = forwardRef<UnlayerRef, UnlayerEditorProps>((props,
         return () => store.setOnImage();
     }, [props.onImage, store]);
 
+    useEffect(() => {
+        store.setOnError(props.onError);
+
+        return () => store.setOnError();
+    }, [props.onError, store]);
+
     useEffect(() => {
         store.setOnMessage(props.onMessage);
 

package/src/shared/configs.ts

@@ -0,0 +1,5 @@
+export const defaultImageValidation = {
+    maxWidth: 5000,
+    maxHeight: 5000,
+    maxFileSize: 10 * 1024 * 1024, // 10mb
+};

package/src/store.ts

@@ -1,4 +1,5 @@
 import { loadScript } from './loadScript';
+import { defaultImageValidation } from './shared/configs';
 import { UnlayerEditorTwin, UnlayerEventConfig, UnlayerEventRegister } from './shared/const';
 import { unlayerToolsParseTwinKey } from './shared/tools';
 import { unlayerToolsIterate } from './tools';
@@ -46,6 +47,7 @@ export class UnlayerStore {
     private onSnapshotSaveCB?: (snapshot: UnlayerEditorTwin) => void;
     private onReadyCB?: () => void;
     private onImageCB?: (file: File) => Promise<{ url: string }>;
+    private onErrorCB?: (title: string, description?: string) => void;
 
     constructor(readonly props: CreateUnlayerEditorProps) {
         this.props.eSignFieldTypes = ['Signature', 'Initials', 'Date Signed', 'Full Name'];
@@ -129,6 +131,10 @@ export class UnlayerStore {
         this.onImageCB = onImage;
     };
 
+    setOnError = (onError?: UnlayerStore['onErrorCB']) => {
+        this.onErrorCB = onError;
+    };
+
     setOnMessage = (onMessage?: UnlayerStore['onMessageCB']) => {
         this.onMessageCB = onMessage;
     };
@@ -250,22 +256,95 @@ export class UnlayerStore {
                     data,
                 },
             },
-            '*'
+            '*',
         );
     };
 
-    private uploadImage = (data: any, done: (result: any) => void) => {
+    private uploadImage = async (
+        data: { attachments: File[] },
+        done: (result: { progress: number; url?: string }) => void,
+    ) => {
         if (!this.onImageCB) {
             done({ progress: 100 });
             throw new Error('image upload is not implemented');
         }
 
+        if (!data.attachments?.length) {
+            return;
+        }
+
+        const file = data.attachments[0];
+
+        const res = await this.validateImage(file, {
+            ...defaultImageValidation,
+            ...(this.props.imageValidation ?? {}),
+        });
+
+        if (!res.isValid) {
+            this.onErrorCB?.(res.title, res.description);
+            return;
+        }
+
         done({ progress: 0 });
 
-        if (data.attachments?.length) {
-            this.onImageCB(data.attachments[0])
-                .catch(() => ({ url: '' }))
-                .then(({ url }) => done({ progress: 100, url }));
+        try {
+            const { url } = await this.onImageCB(file);
+            done({ progress: 100, url });
+        } catch {
+            this.onErrorCB?.(
+                'Image upload failed',
+                'Something went wrong while uploading the image. Please try again or select another image.',
+            );
+            done({ progress: 100 });
+        }
+    };
+
+    private validateImage = async (
+        file: File,
+        imageValidation: { maxFileSize: number; maxWidth: number; maxHeight: number },
+    ): Promise<{ isValid: boolean; title: string; description: string }> => {
+        const { maxFileSize, maxHeight, maxWidth } = imageValidation;
+
+        if (file.size > maxFileSize) {
+            const maxSizeMB = (maxFileSize / 1024 / 1024).toFixed(2);
+            const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
+            return {
+                isValid: false,
+                title: 'Image size limit reached',
+                description: `This image is ${fileSizeMB}MB, which is above the ${maxSizeMB}MB limit. Please upload a smaller file to continue.`,
+            };
         }
+
+        return new Promise(resolve => {
+            const img = new Image();
+            const objectUrl = URL.createObjectURL(file);
+
+            img.onload = () => {
+                URL.revokeObjectURL(objectUrl);
+                const { height, width } = img;
+
+                if (width > maxWidth || height > maxHeight) {
+                    resolve({
+                        isValid: false,
+                        title: 'Dimension limit reached',
+                        description: `These image dimensions (${width}x${height}px) exceed the ${maxWidth}x${maxHeight}px limit. Please resize the image and try again.`,
+                    });
+                } else {
+                    resolve({ isValid: true, title: '', description: '' });
+                }
+            };
+
+            img.onerror = () => {
+                URL.revokeObjectURL(objectUrl);
+                resolve({
+                    isValid: false,
+                    title: 'The image is broken',
+                    description:
+                        'Looks like this image isn’t valid. Please choose another image and try again.',
+                });
+            };
+
+            img.src = objectUrl;
+        });
     };
 }

package/src/unlayer-interface.tsx

@@ -79,4 +79,9 @@ export interface CreateUnlayerEditorProps {
     hideBodyMenuItem?: boolean;
     enableHTMLEditing?: boolean;
     enableHTMLEditingReadonly?: boolean;
+    imageValidation?: {
+        maxWidth?: number;
+        maxHeight?: number;
+        maxFileSize?: number;
+    }
 }

package/src/unlayer.tsx

@@ -94,6 +94,15 @@ export const hideUnlayerBodyMenuItem = () => {
     `;
 };
 
+export const hideMobileTabletPreview = () => `
+    [data-key="preview-tablet"],
+    [data-key="resolution"],
+    [data-key="dark-mode"],
+    [data-key="preview-desktop"],
+    [data-key="preview-mobile"] {
+        display: none !important;
+    }
+`;
 export const hideUnlayerTools = () => {
     return `
         .blockbuilder-content-tools {
@@ -165,6 +174,7 @@ export const createUnlayerEditor = (
          * @TODO this is workaround for hiding all tools from unlayer sidebar.
          * Will be better to use unlayer functionality for this but it is not implemented yet
          */
+        hideMobileTabletPreview(),
         hideAllTools ? hideUnlayerTools() : '',
         hideContentControls ? hideUnlayerContentsControls() : '',
         hideBodyMenuItem ? hideUnlayerBodyMenuItem() : '',
@@ -239,7 +249,7 @@ export const createUnlayerEditor = (
         displayMode: 'web',
         devices: ['desktop'],
         features: {
-            preview: false,
+            preview: true,
             userUploads: false,
             stockImages: false,
         },