@pdfme/ui 3.1.3-dev.2 → 3.1.3-dev.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "3.1.3-dev.2",
+  "version": "3.1.3-dev.3",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/class.ts

@@ -89,10 +89,10 @@ export abstract class BaseUIClass {
     this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
     this.options = options;
     this.size = {
-      height: this.domContainer!.clientHeight || window.innerHeight,
-      width: this.domContainer!.clientWidth || window.innerWidth,
+      height: this.domContainer.clientHeight || window.innerHeight,
+      width: this.domContainer.clientWidth || window.innerWidth,
     };
-    this.resizeObserver.observe(this.domContainer!);
+    this.resizeObserver.observe(this.domContainer);
 
     const { lang, font } = options;
     if (lang) {

package/src/components/Designer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, useContext, useCallback } from 'react';
+import React, { useRef, useState, useContext, useCallback } from 'react';
 import {
   ZOOM,
   Template,
@@ -49,6 +49,7 @@ const TemplateEditor = ({
   const [pageCursor, setPageCursor] = useState(0);
   const [zoomLevel, setZoomLevel] = useState(1);
   const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [prevTemplate, setPrevTemplate] = useState<Template | null>(null);
 
   const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
 
@@ -148,10 +149,6 @@ const TemplateEditor = ({
     }
   }, []);
 
-  useEffect(() => {
-    updateTemplate(template);
-  }, [template, updateTemplate]);
-
   const addSchema = () => {
     const propPanel = (Object.values(pluginsRegistry)[0] as Plugin<Schema>)?.propPanel;
 
@@ -183,6 +180,11 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     setHoveringSchemaId(id);
   };
 
+  if (prevTemplate !== template) {
+    setPrevTemplate(template);
+    void updateTemplate(template);
+  }
+
   const sizeExcSidebar = {
     width: sidebarOpen ? size.width - SIDEBAR_WIDTH : size.width,
     height: size.height,