Add PageBreak Support to Template Elements and Enhance TemplatePreview Resizing

- Added 'PageBreak' to the list of template elements in schema.js, allowing for better document structuring.
- Updated TemplatePreview component to dynamically adjust the size of preview wrappers based on content dimensions, improving visual presentation and user experience.

src/codemirror/fcTemplateLang/schema.js

@@ -77,6 +77,7 @@ const allTags = [
   'Text',
   'Bold',
   'Divider',
+  'PageBreak',
   'ProgressBar',
   'Barcode',
   'DateTime',
@@ -93,7 +94,7 @@ export const fcTemplateElements = allTags.map((name) => {
     el.attributes = ['format', 'barcodeWidth', ...styleAttrs]
   } else if (name === 'Row') {
     el.attributes = ['type', ...styleAttrs]
-  } else if (name === 'Divider') {
+  } else if (name === 'Divider' || name === 'PageBreak') {
     el.children = []
   }
 

src/components/Dashboard/common/TemplatePreview.jsx

@@ -56,22 +56,31 @@ const TemplatePreview = ({
       return
     }
 
+    const wrappers = doc.querySelectorAll('.previewWrapper')
+    wrappers.forEach((wrapper) => {
+      const page = wrapper.querySelector('.previewDocument')
+      if (!page) {
+        return
+      }
+      const pageVisual = page.getBoundingClientRect()
+      if (pageVisual.width <= 0 && pageVisual.height <= 0) {
+        return
+      }
+      wrapper.style.width = `${pageVisual.width}px`
+      wrapper.style.height = `${pageVisual.height}px`
+    })
+
     const documentEl =
+      doc.querySelector('.previewPages') ||
       doc.querySelector('.previewDocument') ||
       doc.querySelector('.previewWrapper') ||
       doc.body
     const container = doc.querySelector('.previewContainer')
-    const wrapper = doc.querySelector('.previewWrapper')
     const visual = documentEl.getBoundingClientRect()
     if (visual.width <= 0 && visual.height <= 0) {
       return
     }
 
-    if (wrapper) {
-      wrapper.style.width = `${visual.width}px`
-      wrapper.style.height = `${visual.height}px`
-    }
-
     let padX = 0
     let padY = 0
     if (container) {
@@ -125,8 +134,9 @@ const TemplatePreview = ({
 
     const doc = iframeRef.current?.contentDocument
     const observed =
-      doc?.querySelector('.previewDocument') ||
+      doc?.querySelector('.previewPages') ||
       doc?.querySelector('.previewContainer') ||
+      doc?.querySelector('.previewDocument') ||
       doc?.body
     if (observed && typeof ResizeObserver === 'function') {
       const observer = new ResizeObserver(() => {