react-edit-to-html 1.2.8 → 1.2.9

package/dist/index.js

@@ -19106,64 +19106,87 @@ function yx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 				}),
 				/* @__PURE__ */ d("div", {
 					className: "space-y-3 pt-3 border-t border-gray-100",
-					children: [/* @__PURE__ */ d("div", {
-						className: "space-y-1",
-						children: [/* @__PURE__ */ d("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ u("label", {
-								className: "text-[10px] font-bold text-slate-400 uppercase tracking-wider",
-								children: "Block Width (%)"
-							}), /* @__PURE__ */ d("span", {
-								className: "text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded",
-								children: [vx(j.style.width), "%"]
-							})]
-						}), /* @__PURE__ */ d("div", {
-							className: "flex items-center space-x-2",
-							children: [/* @__PURE__ */ u("input", {
-								type: "range",
-								min: "10",
-								max: "100",
-								step: "5",
-								value: vx(j.style.width),
-								onChange: (e) => n("width", `${Math.min(100, Math.max(10, parseInt(e.target.value, 10)))}%`),
-								className: "w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
-							}), /* @__PURE__ */ d("span", {
-								className: "text-[10px] font-mono text-slate-500 w-10 text-right",
-								children: [vx(j.style.width), "%"]
-							})]
-						})]
-					}), /* @__PURE__ */ d("div", {
-						className: "grid grid-cols-2 gap-3",
-						children: [/* @__PURE__ */ d("div", {
+					children: [
+						/* @__PURE__ */ d("div", {
 							className: "space-y-1",
-							children: [/* @__PURE__ */ u("label", {
-								className: "text-[10px] font-bold text-slate-400 uppercase block",
-								children: "Bottom Margin"
-							}), /* @__PURE__ */ u("input", {
-								type: "range",
-								min: "0",
-								max: "40",
-								step: "2",
-								value: parseInt(j.style.marginBottom || "0px"),
-								onChange: (e) => n("marginBottom", `${e.target.value}px`),
-								className: "w-full accent-slate-800 h-1 bg-gray-200 rounded-lg"
+							children: [/* @__PURE__ */ d("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ u("label", {
+									className: "text-[10px] font-bold text-slate-400 uppercase tracking-wider",
+									children: "Block Width (%)"
+								}), /* @__PURE__ */ d("span", {
+									className: "text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded",
+									children: [vx(j.style.width), "%"]
+								})]
+							}), /* @__PURE__ */ d("div", {
+								className: "flex items-center space-x-2",
+								children: [/* @__PURE__ */ u("input", {
+									type: "range",
+									min: "10",
+									max: "100",
+									step: "5",
+									value: vx(j.style.width),
+									onChange: (e) => n("width", `${Math.min(100, Math.max(10, parseInt(e.target.value, 10)))}%`),
+									className: "w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+								}), /* @__PURE__ */ d("span", {
+									className: "text-[10px] font-mono text-slate-500 w-10 text-right",
+									children: [vx(j.style.width), "%"]
+								})]
 							})]
-						}), /* @__PURE__ */ d("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ u("label", {
-								className: "text-[10px] font-bold text-slate-400 uppercase block",
-								children: "Padding"
-							}), /* @__PURE__ */ u("input", {
-								type: "range",
-								min: "0",
-								max: "40",
-								step: "2",
-								value: parseInt(j.style.padding || "0px"),
-								onChange: (e) => n("padding", `${e.target.value}px`),
-								className: "w-full accent-slate-800 h-1 bg-gray-200 rounded-lg"
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: [/* @__PURE__ */ d("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ u("label", {
+									className: "text-[10px] font-bold text-slate-400 uppercase block",
+									children: "Bottom Margin"
+								}), /* @__PURE__ */ u("input", {
+									type: "range",
+									min: "0",
+									max: "40",
+									step: "2",
+									value: parseInt(j.style.marginBottom || "0px"),
+									onChange: (e) => n("marginBottom", `${e.target.value}px`),
+									className: "w-full accent-slate-800 h-1 bg-gray-200 rounded-lg"
+								})]
+							}), /* @__PURE__ */ d("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ u("label", {
+									className: "text-[10px] font-bold text-slate-400 uppercase block",
+									children: "Padding"
+								}), /* @__PURE__ */ u("input", {
+									type: "range",
+									min: "0",
+									max: "40",
+									step: "2",
+									value: parseInt(j.style.padding || "0px"),
+									onChange: (e) => n("padding", `${e.target.value}px`),
+									className: "w-full accent-slate-800 h-1 bg-gray-200 rounded-lg"
+								})]
 							})]
-						})]
-					})]
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "flex items-center justify-between p-3 bg-slate-50 border border-gray-200 rounded-xl select-none mt-2",
+							children: [/* @__PURE__ */ d("div", {
+								className: "space-y-0.5",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-xs font-bold text-slate-700 block",
+									children: "Page Break Before"
+								}), /* @__PURE__ */ u("span", {
+									className: "text-[9px] text-slate-400",
+									children: "Force new page before this block"
+								})]
+							}), /* @__PURE__ */ u("button", {
+								type: "button",
+								onClick: () => {
+									n("pageBreakBefore", j.style.pageBreakBefore === "always" || j.style.pageBreakBefore === !0 ? "auto" : "always");
+								},
+								className: `w-10 h-6 flex items-center rounded-full p-1 transition-colors duration-150 ${j.style.pageBreakBefore === "always" || j.style.pageBreakBefore === !0 ? "bg-orange-600 justify-end" : "bg-slate-300 justify-start"}`,
+								children: /* @__PURE__ */ u("span", { className: "bg-white w-4 h-4 rounded-full shadow-md" })
+							})]
+						})
+					]
 				}),
 				oe && j.tableInfo && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
 					className: "space-y-3 pt-3 border-t border-gray-100",
@@ -19675,7 +19698,7 @@ function Tx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 			a.splice(s, 0, o), t(a);
 		}
 		c(null);
-	};
+	}, ne = 1123, re = Math.max(1, Math.ceil(g / ne));
 	return /* @__PURE__ */ u("div", {
 		ref: _,
 		className: `flex-1 overflow-auto p-8 flex justify-center items-start outline-none transition-all ${h ? "cursor-grab active:cursor-grabbing" : "cursor-default"}`,
@@ -19691,8 +19714,8 @@ function Tx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 			className: "transition-transform duration-75 ease-out select-none",
 			children: /* @__PURE__ */ d("div", {
 				ref: v,
-				style: { height: `${g}px` },
-				className: "w-[794px] min-h-[1123px] bg-white shadow-lg border border-gray-300/80 px-[60px] py-[60px] flex flex-col relative canvas-editor-area",
+				style: { minHeight: `${Math.max(1123, re * ne)}px` },
+				className: "w-[794px] bg-white shadow-lg border border-gray-300/80 px-[60px] py-[60px] flex flex-col relative canvas-editor-area",
 				onDragOver: (e) => e.preventDefault(),
 				onDrop: (n) => {
 					if (n.preventDefault(), n.stopPropagation(), l) E(e.length);
@@ -19705,192 +19728,224 @@ function Tx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 						}
 					}
 				},
-				children: [e.length === 0 ? /* @__PURE__ */ d("div", {
-					className: "flex-1 border-2 border-dashed border-gray-200 rounded-2xl flex flex-col items-center justify-center p-8 text-center text-slate-400",
-					children: [
-						/* @__PURE__ */ u(ex, { className: "h-10 w-10 mb-3 animate-bounce text-slate-350" }),
-						/* @__PURE__ */ u("span", {
-							className: "font-bold text-sm text-slate-600 block",
-							children: "Drag & Drop Editor Canvas"
-						}),
-						/* @__PURE__ */ u("p", {
-							className: "text-xs text-slate-400 mt-1 max-w-sm",
-							children: "Select elements from the sidebar tabs (Text, Tables, Images) and drag them here to assemble your template structure."
-						})
-					]
-				}) : wx(e).map((a) => {
-					var o;
-					let s = a.blocks.length > 1;
-					return /* @__PURE__ */ u("div", {
-						className: `group/row ${a.blocks.some((e) => e.style.position === "absolute") ? "" : "relative"} border border-transparent rounded-lg hover:border-slate-200/60 p-1 mb-2 ${s ? ((o = a.blocks[0]) == null || (o = o.style) == null ? void 0 : o.flexDirection) === "column" ? "flex flex-col gap-2" : "flex flex-row gap-4" : ""}`,
-						children: a.blocks.map((a) => {
-							var o, l, f, p;
-							let m = n === a.id, h = D(D({}, a.style), yb(a.style.customCss || ""));
-							return /* @__PURE__ */ d("div", {
-								draggable: !0,
-								onDragStart: (t) => {
-									let n = e.findIndex((e) => e.id === a.id);
-									te(t, n);
-								},
-								onDragOver: (t) => {
-									t.preventDefault(), c(e.findIndex((e) => e.id === a.id));
-								},
-								onDrop: (t) => {
-									let n = e.findIndex((e) => e.id === a.id);
-									A(t, n);
-								},
-								onClick: (e) => {
-									e.stopPropagation(), r(a.id), i("styles");
-								},
-								style: {
-									width: a.style.position === "absolute" ? "100%" : a.style.width || (s ? "48%" : "100%"),
-									height: a.style.position === "absolute" ? a.style.height || "100%" : void 0,
-									position: a.style.position,
-									top: a.style.top,
-									left: a.style.left,
-									zIndex: a.style.zIndex ? parseInt(a.style.zIndex) : void 0
-								},
-								className: `group/block relative p-0.5 rounded-xl border border-transparent transition-all duration-150 cursor-pointer ${m ? "bg-orange-50/20 border-orange-500 shadow-sm ring-2 ring-orange-500/10" : "hover:bg-slate-50/30 hover:border-gray-200"} ${a.style.position === "absolute" ? "!absolute !inset-0 !m-auto" : ""}`,
-								children: [m && /* @__PURE__ */ d("div", {
-									className: "absolute -top-3.5 right-3 bg-orange-600 text-white rounded-lg px-2 py-0.5 text-[10px] font-bold flex items-center space-x-1.5 shadow-md z-30 select-none",
-									children: [
-										/* @__PURE__ */ u("button", {
-											onClick: () => {
-												w(e.findIndex((e) => e.id === a.id), "up");
-											},
-											className: "hover:text-slate-350",
-											title: "Move Up",
-											children: /* @__PURE__ */ u(Hb, { className: "h-3 w-3" })
-										}),
-										/* @__PURE__ */ u("button", {
-											onClick: () => {
-												w(e.findIndex((e) => e.id === a.id), "down");
-											},
-											className: "hover:text-slate-350",
-											title: "Move Down",
-											children: /* @__PURE__ */ u(Vb, { className: "h-3 w-3" })
-										}),
-										/* @__PURE__ */ u("div", { className: "h-3 w-[1px] bg-slate-700" }),
-										/* @__PURE__ */ u("button", {
-											onClick: (e) => C(a.id, e),
-											className: "hover:text-slate-350",
-											title: "Duplicate block",
-											children: /* @__PURE__ */ u(Gb, { className: "h-3 w-3" })
-										}),
-										/* @__PURE__ */ u("button", {
-											onClick: (e) => T(a.id, e),
-											className: "hover:text-red-400 text-red-300",
-											title: "Delete block",
-											children: /* @__PURE__ */ u(lx, { className: "h-3 w-3" })
-										})
-									]
-								}), a.type === "table" ? /* @__PURE__ */ u("div", {
-									className: "overflow-x-auto w-full select-none",
-									children: /* @__PURE__ */ d("table", {
-										style: h,
-										className: "w-full border-collapse",
-										children: [/* @__PURE__ */ u("thead", { children: /* @__PURE__ */ u("tr", { children: (o = a.tableInfo) == null ? void 0 : o.columns.filter((e) => e.enabled !== !1).map((e, t) => /* @__PURE__ */ u("th", {
-											className: "border border-slate-200 px-2.5 py-1 text-slate-700 text-left bg-slate-50 font-sans",
-											children: e.columnName || ""
-										}, t)) }) }), /* @__PURE__ */ u("tbody", { children: ((l = a.tableInfo) != null && l.mockRows && a.tableInfo.mockRows.length > 0 ? a.tableInfo.mockRows : [{}]).map((e, t) => {
-											var n;
-											return /* @__PURE__ */ u("tr", {
-												className: "bg-slate-50/10 border-b border-slate-100 hover:bg-slate-50/20",
-												children: (n = a.tableInfo) == null ? void 0 : n.columns.filter((e) => e.enabled !== !1).map((t, n) => {
-													let r = e && typeof e == "object" && e[t.columnName] || t.placeholder;
-													if (t.loop && t.columns && t.columns.length > 0) {
-														let e = t.columns.filter((e) => e.enabled !== !1);
-														return /* @__PURE__ */ u("td", {
-															className: "border border-slate-200 p-2 align-top bg-slate-50/20",
-															children: /* @__PURE__ */ d("div", {
-																className: "w-full overflow-x-auto space-y-1",
-																children: [/* @__PURE__ */ d("div", {
-																	className: "flex items-center justify-between text-[9px] font-semibold text-slate-500",
-																	children: [/* @__PURE__ */ d("span", { children: ["Sub-table: ", t.columnName] }), /* @__PURE__ */ u("span", {
-																		className: "px-1.5 py-0.5 bg-slate-200 text-slate-600 rounded text-[8px]",
-																		children: "loop = true"
+				children: [
+					Array.from({ length: Math.max(0, re - 1) }).map((e, t) => {
+						let n = t + 2, r = (t + 1) * ne;
+						return /* @__PURE__ */ u("div", {
+							style: { top: `${r}px` },
+							className: "absolute left-0 right-0 z-30 pointer-events-none flex items-center justify-center border-b-2 border-dashed border-orange-400/80 bg-orange-50/10 text-orange-600 text-[10px] font-bold py-1 select-none",
+							children: /* @__PURE__ */ u("span", {
+								className: "bg-orange-100/90 text-orange-700 border border-orange-300/80 px-2.5 py-0.5 rounded-full shadow-xs flex items-center space-x-1 font-mono",
+								children: /* @__PURE__ */ d("span", { children: [
+									"📄 Page ",
+									n,
+									" Break (A4 - ",
+									r,
+									"px)"
+								] })
+							})
+						}, t);
+					}),
+					e.length === 0 ? /* @__PURE__ */ d("div", {
+						className: "flex-1 border-2 border-dashed border-gray-200 rounded-2xl flex flex-col items-center justify-center p-8 text-center text-slate-400",
+						children: [
+							/* @__PURE__ */ u(ex, { className: "h-10 w-10 mb-3 animate-bounce text-slate-350" }),
+							/* @__PURE__ */ u("span", {
+								className: "font-bold text-sm text-slate-600 block",
+								children: "Drag & Drop Editor Canvas"
+							}),
+							/* @__PURE__ */ u("p", {
+								className: "text-xs text-slate-400 mt-1 max-w-sm",
+								children: "Select elements from the sidebar tabs (Text, Tables, Images) and drag them here to assemble your template structure."
+							})
+						]
+					}) : wx(e).map((a) => {
+						var o;
+						let s = a.blocks.length > 1;
+						return /* @__PURE__ */ u("div", {
+							style: D({
+								pageBreakInside: "avoid",
+								breakInside: "avoid"
+							}, a.blocks.some((e) => e.style.pageBreakBefore === "always" || e.style.pageBreakBefore === !0) ? {
+								pageBreakBefore: "always",
+								breakBefore: "page"
+							} : {}),
+							className: `group/row ${a.blocks.some((e) => e.style.position === "absolute") ? "" : "relative"} border border-transparent rounded-lg hover:border-slate-200/60 p-1 mb-2 ${s ? ((o = a.blocks[0]) == null || (o = o.style) == null ? void 0 : o.flexDirection) === "column" ? "flex flex-col gap-2" : "flex flex-row gap-4" : ""}`,
+							children: a.blocks.map((a) => {
+								var o, l, f, p;
+								let m = n === a.id, h = D(D({}, a.style), yb(a.style.customCss || ""));
+								return /* @__PURE__ */ d("div", {
+									draggable: !0,
+									onDragStart: (t) => {
+										let n = e.findIndex((e) => e.id === a.id);
+										te(t, n);
+									},
+									onDragOver: (t) => {
+										t.preventDefault(), c(e.findIndex((e) => e.id === a.id));
+									},
+									onDrop: (t) => {
+										let n = e.findIndex((e) => e.id === a.id);
+										A(t, n);
+									},
+									onClick: (e) => {
+										e.stopPropagation(), r(a.id), i("styles");
+									},
+									style: D({
+										pageBreakInside: "avoid",
+										breakInside: "avoid",
+										width: a.style.position === "absolute" ? "100%" : a.style.width || (s ? "48%" : "100%"),
+										height: a.style.position === "absolute" ? a.style.height || "100%" : void 0,
+										position: a.style.position,
+										top: a.style.top,
+										left: a.style.left,
+										zIndex: a.style.zIndex ? parseInt(a.style.zIndex) : void 0
+									}, a.style.pageBreakBefore === "always" || a.style.pageBreakBefore === !0 ? {
+										pageBreakBefore: "always",
+										breakBefore: "page"
+									} : {}),
+									className: `group/block relative p-0.5 rounded-xl border border-transparent transition-all duration-150 cursor-pointer ${m ? "bg-orange-50/20 border-orange-500 shadow-sm ring-2 ring-orange-500/10" : "hover:bg-slate-50/30 hover:border-gray-200"} ${a.style.position === "absolute" ? "!absolute !inset-0 !m-auto" : ""}`,
+									children: [m && /* @__PURE__ */ d("div", {
+										className: "absolute -top-3.5 right-3 bg-orange-600 text-white rounded-lg px-2 py-0.5 text-[10px] font-bold flex items-center space-x-1.5 shadow-md z-30 select-none",
+										children: [
+											/* @__PURE__ */ u("button", {
+												onClick: () => {
+													w(e.findIndex((e) => e.id === a.id), "up");
+												},
+												className: "hover:text-slate-350",
+												title: "Move Up",
+												children: /* @__PURE__ */ u(Hb, { className: "h-3 w-3" })
+											}),
+											/* @__PURE__ */ u("button", {
+												onClick: () => {
+													w(e.findIndex((e) => e.id === a.id), "down");
+												},
+												className: "hover:text-slate-350",
+												title: "Move Down",
+												children: /* @__PURE__ */ u(Vb, { className: "h-3 w-3" })
+											}),
+											/* @__PURE__ */ u("div", { className: "h-3 w-[1px] bg-slate-700" }),
+											/* @__PURE__ */ u("button", {
+												onClick: (e) => C(a.id, e),
+												className: "hover:text-slate-350",
+												title: "Duplicate block",
+												children: /* @__PURE__ */ u(Gb, { className: "h-3 w-3" })
+											}),
+											/* @__PURE__ */ u("button", {
+												onClick: (e) => T(a.id, e),
+												className: "hover:text-red-400 text-red-300",
+												title: "Delete block",
+												children: /* @__PURE__ */ u(lx, { className: "h-3 w-3" })
+											})
+										]
+									}), a.type === "table" ? /* @__PURE__ */ u("div", {
+										className: "overflow-x-auto w-full select-none",
+										children: /* @__PURE__ */ d("table", {
+											style: h,
+											className: "w-full border-collapse",
+											children: [/* @__PURE__ */ u("thead", { children: /* @__PURE__ */ u("tr", { children: (o = a.tableInfo) == null ? void 0 : o.columns.filter((e) => e.enabled !== !1).map((e, t) => /* @__PURE__ */ u("th", {
+												className: "border border-slate-200 px-2.5 py-1 text-slate-700 text-left bg-slate-50 font-sans",
+												children: e.columnName || ""
+											}, t)) }) }), /* @__PURE__ */ u("tbody", { children: ((l = a.tableInfo) != null && l.mockRows && a.tableInfo.mockRows.length > 0 ? a.tableInfo.mockRows : [{}]).map((e, t) => {
+												var n;
+												return /* @__PURE__ */ u("tr", {
+													className: "bg-slate-50/10 border-b border-slate-100 hover:bg-slate-50/20",
+													children: (n = a.tableInfo) == null ? void 0 : n.columns.filter((e) => e.enabled !== !1).map((t, n) => {
+														let r = e && typeof e == "object" && e[t.columnName] || t.placeholder;
+														if (t.loop && t.columns && t.columns.length > 0) {
+															let e = t.columns.filter((e) => e.enabled !== !1);
+															return /* @__PURE__ */ u("td", {
+																className: "border border-slate-200 p-2 align-top bg-slate-50/20",
+																children: /* @__PURE__ */ d("div", {
+																	className: "w-full overflow-x-auto space-y-1",
+																	children: [/* @__PURE__ */ d("div", {
+																		className: "flex items-center justify-between text-[9px] font-semibold text-slate-500",
+																		children: [/* @__PURE__ */ d("span", { children: ["Sub-table: ", t.columnName] }), /* @__PURE__ */ u("span", {
+																			className: "px-1.5 py-0.5 bg-slate-200 text-slate-600 rounded text-[8px]",
+																			children: "loop = true"
+																		})]
+																	}), /* @__PURE__ */ d("table", {
+																		className: "w-full border-collapse border border-slate-200 rounded text-xs bg-white",
+																		children: [/* @__PURE__ */ u("thead", { children: /* @__PURE__ */ u("tr", { children: e.map((e, t) => /* @__PURE__ */ u("th", {
+																			className: "border border-slate-200 px-2 py-1 text-slate-700 text-left bg-slate-100/80 font-sans font-semibold text-[10px]",
+																			children: e.columnName
+																		}, t)) }) }), /* @__PURE__ */ u("tbody", { children: /* @__PURE__ */ u("tr", {
+																			className: "bg-slate-50/30",
+																			children: e.map((e, t) => /* @__PURE__ */ u(Cx, {
+																				blockId: a.id,
+																				colIdx: t,
+																				placeholder: e.placeholder,
+																				onUpdate: (e) => O(a.id, n, e, t),
+																				onDrop: (e) => ee(e, a.id, n, t)
+																			}, t))
+																		}) })]
 																	})]
-																}), /* @__PURE__ */ d("table", {
-																	className: "w-full border-collapse border border-slate-200 rounded text-xs bg-white",
-																	children: [/* @__PURE__ */ u("thead", { children: /* @__PURE__ */ u("tr", { children: e.map((e, t) => /* @__PURE__ */ u("th", {
-																		className: "border border-slate-200 px-2 py-1 text-slate-700 text-left bg-slate-100/80 font-sans font-semibold text-[10px]",
-																		children: e.columnName
-																	}, t)) }) }), /* @__PURE__ */ u("tbody", { children: /* @__PURE__ */ u("tr", {
-																		className: "bg-slate-50/30",
-																		children: e.map((e, t) => /* @__PURE__ */ u(Cx, {
-																			blockId: a.id,
-																			colIdx: t,
-																			placeholder: e.placeholder,
-																			onUpdate: (e) => O(a.id, n, e, t),
-																			onDrop: (e) => ee(e, a.id, n, t)
-																		}, t))
-																	}) })]
-																})]
-															})
+																})
+															}, n);
+														}
+														return /* @__PURE__ */ u(Cx, {
+															blockId: a.id,
+															colIdx: n,
+															placeholder: r,
+															onUpdate: (e) => O(a.id, n, e),
+															onDrop: (e) => ee(e, a.id, n)
 														}, n);
-													}
-													return /* @__PURE__ */ u(Cx, {
-														blockId: a.id,
-														colIdx: n,
-														placeholder: r,
-														onUpdate: (e) => O(a.id, n, e),
-														onDrop: (e) => ee(e, a.id, n)
-													}, n);
-												})
-											}, t);
-										}) })]
-									})
-								}) : a.type === "image" ? /* @__PURE__ */ u("div", {
-									style: {
-										textAlign: h.textAlign || "left",
-										width: "100%",
-										marginBottom: h.marginBottom,
-										padding: h.padding,
-										backgroundColor: h.backgroundColor
-									},
-									className: "w-full select-none",
-									children: /* @__PURE__ */ u("div", {
+													})
+												}, t);
+											}) })]
+										})
+									}) : a.type === "image" ? /* @__PURE__ */ u("div", {
 										style: {
-											width: s ? "100%" : a.style.width && a.style.width.endsWith("%") ? a.style.width : "100%",
-											display: "inline-block",
-											textAlign: h.textAlign || "left"
+											textAlign: h.textAlign || "left",
+											width: "100%",
+											marginBottom: h.marginBottom,
+											padding: h.padding,
+											backgroundColor: h.backgroundColor
 										},
-										children: ((f = a.imageInfo) == null ? void 0 : f.imageType) === "barcode" ? /* @__PURE__ */ u("div", {
-											style: {
-												width: a.style.imageWidth || (a.style.width && a.style.width.endsWith("px") ? a.style.width : "100%"),
-												height: a.style.height || a.style.minHeight || "70px",
-												marginLeft: h.textAlign === "center" || h.textAlign === "right" ? "auto" : "0",
-												marginRight: h.textAlign === "center" ? "auto" : h.textAlign === "right" ? "0" : "auto"
-											},
-											className: "border border-dashed border-slate-200 p-2 bg-slate-50/5 rounded-lg flex items-center justify-center overflow-hidden",
-											dangerouslySetInnerHTML: { __html: bb(a.imageInfo.barcodeValue || "SHIP-99201") }
-										}) : /* @__PURE__ */ u("img", {
-											src: ((p = a.imageInfo) == null ? void 0 : p.url) || "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==",
+										className: "w-full select-none",
+										children: /* @__PURE__ */ u("div", {
 											style: {
-												width: a.style.imageWidth || (a.style.width && a.style.width.endsWith("px") ? a.style.width : "100%"),
-												height: "auto",
-												maxHeight: a.style.height || "300px",
-												objectFit: a.style.objectFit || "contain",
-												opacity: a.style.opacity || "1",
-												display: "block",
-												marginLeft: h.textAlign === "center" || h.textAlign === "right" ? "auto" : "0",
-												marginRight: h.textAlign === "center" ? "auto" : h.textAlign === "right" ? "0" : "auto"
+												width: s ? "100%" : a.style.width && a.style.width.endsWith("%") ? a.style.width : "100%",
+												display: "inline-block",
+												textAlign: h.textAlign || "left"
 											},
-											alt: "graphic content"
+											children: ((f = a.imageInfo) == null ? void 0 : f.imageType) === "barcode" ? /* @__PURE__ */ u("div", {
+												style: {
+													width: a.style.imageWidth || (a.style.width && a.style.width.endsWith("px") ? a.style.width : "100%"),
+													height: a.style.height || a.style.minHeight || "70px",
+													marginLeft: h.textAlign === "center" || h.textAlign === "right" ? "auto" : "0",
+													marginRight: h.textAlign === "center" ? "auto" : h.textAlign === "right" ? "0" : "auto"
+												},
+												className: "border border-dashed border-slate-200 p-2 bg-slate-50/5 rounded-lg flex items-center justify-center overflow-hidden",
+												dangerouslySetInnerHTML: { __html: bb(a.imageInfo.barcodeValue || "SHIP-99201") }
+											}) : /* @__PURE__ */ u("img", {
+												src: ((p = a.imageInfo) == null ? void 0 : p.url) || "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==",
+												style: {
+													width: a.style.imageWidth || (a.style.width && a.style.width.endsWith("px") ? a.style.width : "100%"),
+													height: "auto",
+													maxHeight: a.style.height || "300px",
+													objectFit: a.style.objectFit || "contain",
+													opacity: a.style.opacity || "1",
+													display: "block",
+													marginLeft: h.textAlign === "center" || h.textAlign === "right" ? "auto" : "0",
+													marginRight: h.textAlign === "center" ? "auto" : h.textAlign === "right" ? "0" : "auto"
+												},
+												alt: "graphic content"
+											})
 										})
-									})
-								}) : /* @__PURE__ */ u(Sx, {
-									block: a,
-									onUpdate: (e) => {
-										t((t) => t.map((t) => t.id === a.id ? D(D({}, t), {}, { content: e }) : t));
-									},
-									onSelect: () => r(a.id),
-									onDrop: (e) => k(e, a.id)
-								})]
-							}, a.id);
-						})
-					}, a.id);
-				}), s !== null && /* @__PURE__ */ u("div", { className: "h-[2px] bg-orange-500 rounded my-1 shadow-md animate-pulse" })]
+									}) : /* @__PURE__ */ u(Sx, {
+										block: a,
+										onUpdate: (e) => {
+											t((t) => t.map((t) => t.id === a.id ? D(D({}, t), {}, { content: e }) : t));
+										},
+										onSelect: () => r(a.id),
+										onDrop: (e) => k(e, a.id)
+									})]
+								}, a.id);
+							})
+						}, a.id);
+					}),
+					s !== null && /* @__PURE__ */ u("div", { className: "h-[2px] bg-orange-500 rounded my-1 shadow-md animate-pulse" })
+				]
 			})
 		})
 	});
@@ -20396,7 +20451,7 @@ function jx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 			end: Se
 		};
 	}, Ct = (e = !1) => {
-		let t = "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"utf-8\">\n  <title>Exported HTML Template</title>\n  <style>\n    @page {\n      size: A4 portrait;\n      margin: 0;\n    }\n    * {\n      box-sizing: border-box;\n    }\n    html, body {\n      margin: 0;\n      padding: 0;\n      background-color: #f8fafc;\n      font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      color: #1e293b;\n      -webkit-print-color-adjust: exact;\n      print-color-adjust: exact;\n    }\n    .paper-sheet {\n      width: 794px;\n      min-height: 1123px;\n      margin: 20px auto;\n      padding: 60px;\n      background-color: #ffffff;\n      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n      box-sizing: border-box;\n      position: relative;\n    }\n    .row-container {\n      display: flex;\n      flex-wrap: wrap;\n      width: 100%;\n      align-items: stretch;\n      margin-bottom: 8px;\n    }\n    .block-container {\n      box-sizing: border-box;\n      page-break-inside: avoid;\n      break-inside: avoid;\n    }\n    h1, h2, h3, h4, h5, h6, p {\n      margin: 0;\n      padding: 0;\n    }\n    table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n    th {\n      background-color: #f1f5f9;\n      color: #334155;\n      border: 1px solid #e2e8f0;\n      padding: 6px 8px;\n      font-weight: 600;\n      text-align: left;\n    }\n    td {\n      border: 1px solid #e2e8f0;\n      padding: 6px 8px;\n      color: #475569;\n    }\n    tr:nth-child(even) {\n      background-color: #f8fafc;\n    }\n    span[data-placeholder] {\n      background-color: #f1f5f9;\n      color: #1e293b;\n      border: 1px solid #e2e8f0;\n      padding: 1px 4px;\n      border-radius: 3px;\n      font-weight: 600;\n      display: inline-flex;\n      font-size: inherit;\n    }\n    @media print {\n      html, body {\n        background-color: #ffffff !important;\n      }\n      .paper-sheet {\n        width: 100% !important;\n        max-width: 100% !important;\n        min-height: 100% !important;\n        margin: 0 !important;\n        padding: 60px !important;\n        box-shadow: none !important;\n        border: none !important;\n        background-color: #ffffff !important;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div class=\"paper-sheet\">\n";
+		let t = "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"utf-8\">\n  <title>Exported HTML Template</title>\n  <style>\n    @page {\n      size: A4 portrait;\n      margin: 0;\n    }\n    * {\n      box-sizing: border-box;\n    }\n    html, body {\n      margin: 0;\n      padding: 0;\n      background-color: #f8fafc;\n      font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      color: #1e293b;\n      -webkit-print-color-adjust: exact;\n      print-color-adjust: exact;\n    }\n    .paper-sheet {\n      width: 794px;\n      min-height: 1123px;\n      margin: 20px auto;\n      padding: 60px;\n      background-color: #ffffff;\n      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n      box-sizing: border-box;\n      position: relative;\n    }\n    .row-container {\n      display: flex;\n      flex-wrap: wrap;\n      width: 100%;\n      align-items: stretch;\n      margin-bottom: 8px;\n      page-break-inside: avoid !important;\n      break-inside: avoid !important;\n      break-inside: avoid-page !important;\n    }\n    .block-container {\n      box-sizing: border-box;\n      page-break-inside: avoid !important;\n      break-inside: avoid !important;\n      break-inside: avoid-page !important;\n    }\n    h1, h2, h3, h4, h5, h6, p {\n      margin: 0;\n      padding: 0;\n    }\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      page-break-inside: auto;\n    }\n    tr {\n      page-break-inside: avoid !important;\n      break-inside: avoid !important;\n      break-inside: avoid-page !important;\n    }\n    th {\n      background-color: #f1f5f9;\n      color: #334155;\n      border: 1px solid #e2e8f0;\n      padding: 6px 8px;\n      font-weight: 600;\n      text-align: left;\n    }\n    td {\n      border: 1px solid #e2e8f0;\n      padding: 6px 8px;\n      color: #475569;\n    }\n    tr:nth-child(even) {\n      background-color: #f8fafc;\n    }\n    img, svg {\n      page-break-inside: avoid !important;\n      break-inside: avoid !important;\n      break-inside: avoid-page !important;\n    }\n    .page-break-before {\n      page-break-before: always !important;\n      break-before: page !important;\n    }\n    span[data-placeholder] {\n      background-color: #f1f5f9;\n      color: #1e293b;\n      border: 1px solid #e2e8f0;\n      padding: 1px 4px;\n      border-radius: 3px;\n      font-weight: 600;\n      display: inline-flex;\n      font-size: inherit;\n    }\n    @media print {\n      html, body {\n        background-color: #ffffff !important;\n      }\n      .paper-sheet {\n        width: 100% !important;\n        max-width: 100% !important;\n        min-height: 100% !important;\n        margin: 0 !important;\n        padding: 60px !important;\n        box-shadow: none !important;\n        border: none !important;\n        background-color: #ffffff !important;\n      }\n    }\n  </style>\n</head>\n<body>\n  <div class=\"paper-sheet\">\n";
 		return kx(L).forEach((n) => {
 			let r = n.blocks.length > 1;
 			if (r) {