export html
This commit is contained in:
hamid zarghami
@@ -53,6 +53,19 @@ export const exportPersonalityToHTML = async (
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to get text alignment for email
|
||||
const getTextAlignment = (alignment?: HorizontalAlignment) => {
|
||||
switch (alignment) {
|
||||
case HorizontalAlignment.LEFT:
|
||||
return "left";
|
||||
case HorizontalAlignment.RIGHT:
|
||||
return "right";
|
||||
case HorizontalAlignment.CENTER:
|
||||
default:
|
||||
return "center";
|
||||
}
|
||||
};
|
||||
|
||||
// Render TextRenderer equivalent
|
||||
const renderTexts = (texts: TextType[]) => {
|
||||
console.log("🔥 [ExportHTML] renderTexts called with:", texts);
|
||||
@@ -67,9 +80,13 @@ export const exportPersonalityToHTML = async (
|
||||
`<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="${textItem.alignment || "right"}" style="color: ${
|
||||
textItem.color || "#000000"
|
||||
}; font-size: ${textItem.fontSize || 14}px; font-weight: ${
|
||||
<td align="${getTextAlignment(
|
||||
textItem.alignment
|
||||
)}" style="text-align: ${getTextAlignment(
|
||||
textItem.alignment
|
||||
)}; color: ${textItem.color || "#000000"}; font-size: ${
|
||||
textItem.fontSize || 14
|
||||
}px; font-weight: ${
|
||||
textItem.fontWeight || 400
|
||||
}; line-height: 1.4; padding-bottom: ${
|
||||
textIndex < (texts?.length || 0) - 1 ? "4px" : "0"
|
||||
@@ -367,11 +384,46 @@ export const exportPersonalityToHTML = async (
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to generate border style for sections
|
||||
const generateBorderStyle = (border?: {
|
||||
width?: string;
|
||||
color?: string;
|
||||
style?: string;
|
||||
sides?: string[];
|
||||
}) => {
|
||||
if (!border || border.style === "none") {
|
||||
return "";
|
||||
}
|
||||
|
||||
const {
|
||||
width = "0px",
|
||||
color = "#E5E7EB",
|
||||
style = "solid",
|
||||
sides = [],
|
||||
} = border;
|
||||
|
||||
// اگر width صفر باشد یا تعریف نشده باشد، border نمایش نده
|
||||
if (!width || width === "0px") {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (sides.length === 0 || sides.length === 4) {
|
||||
return `border: ${width} ${style} ${color};`;
|
||||
}
|
||||
|
||||
// Generate individual border sides
|
||||
const borderStyles: string[] = [];
|
||||
sides.forEach((side) => {
|
||||
borderStyles.push(`border-${side}: ${width} ${style} ${color}`);
|
||||
});
|
||||
|
||||
return borderStyles.join("; ") + ";";
|
||||
};
|
||||
|
||||
// Render section equivalent (HeaderSection, ContentSection, FooterSection)
|
||||
const renderSection = (
|
||||
section: SectionType & { name?: string; isContent?: boolean },
|
||||
sectionHeight: string,
|
||||
paddingTop = ""
|
||||
sectionHeight: string
|
||||
) => {
|
||||
console.log(`🔥 [ExportHTML] Rendering section:`, {
|
||||
columnsCount: section.columnsCount,
|
||||
@@ -381,13 +433,21 @@ export const exportPersonalityToHTML = async (
|
||||
});
|
||||
|
||||
if (section.columnsCount > 0) {
|
||||
return `<tr>
|
||||
${paddingTop ? `<td style="padding-top: ${paddingTop};">` : "<td>"}
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
return `<tr style="margin: 0; padding: 0;">
|
||||
<td style="margin: 0; padding: 0; vertical-align: top; border-spacing: 0;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; ${generateBorderStyle(
|
||||
section.border
|
||||
)}">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 0px; border-radius: 24px;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;">
|
||||
<td style="padding: ${
|
||||
section.padding || "0px"
|
||||
}; margin: 0; border-radius: 24px; vertical-align: top; ${generateBorderStyle(
|
||||
section.border
|
||||
)}">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed; border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; ${generateBorderStyle(
|
||||
section.border
|
||||
)}">
|
||||
<tbody>
|
||||
<tr>
|
||||
${Array.from(
|
||||
@@ -432,7 +492,9 @@ export const exportPersonalityToHTML = async (
|
||||
};`
|
||||
: ""
|
||||
} padding: 0; vertical-align: top; border-radius: 8px; position: relative;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; height: ${sectionHeight};">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; height: ${sectionHeight}; ${generateBorderStyle(
|
||||
section.border
|
||||
)}">
|
||||
<tbody>`;
|
||||
|
||||
// اگر محتوایی وجود دارد (متن، دکمه، تصویر، یا شبکه اجتماعی)
|
||||
@@ -449,7 +511,11 @@ export const exportPersonalityToHTML = async (
|
||||
item.buttons[0]
|
||||
)}" valign="${getButtonVerticalAlign(
|
||||
item.buttons[0]
|
||||
)}" style="padding: 8px;">
|
||||
)}" style="padding: 8px; text-align: ${getButtonHorizontalAlign(
|
||||
item.buttons[0]
|
||||
)}; vertical-align: ${getButtonVerticalAlign(
|
||||
item.buttons[0]
|
||||
)}; ${generateBorderStyle(section.border)}">
|
||||
${renderImages(item?.images || [])}
|
||||
${renderSocials(item?.socials || [])}
|
||||
${
|
||||
@@ -475,8 +541,22 @@ export const exportPersonalityToHTML = async (
|
||||
30
|
||||
).toString();
|
||||
|
||||
const textAlignment = hasTexts
|
||||
? getTextAlignment(item.texts[0]?.alignment)
|
||||
: "center";
|
||||
const textVerticalAlignment =
|
||||
hasTexts && item.texts[0]?.verticalAlignment
|
||||
? item.texts[0].verticalAlignment === "top"
|
||||
? "top"
|
||||
: item.texts[0].verticalAlignment ===
|
||||
"bottom"
|
||||
? "bottom"
|
||||
: "middle"
|
||||
: "middle";
|
||||
result += `<tr>
|
||||
<td width="100%" height="${mainHeight}" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
|
||||
<td width="100%" height="${mainHeight}" align="${textAlignment}" valign="${textVerticalAlignment}" style="padding: 20px; text-align: ${textAlignment}; vertical-align: ${textVerticalAlignment}; font-size: 15px; line-height: 1.8; ${generateBorderStyle(
|
||||
section.border
|
||||
)}">
|
||||
${renderTexts(item?.texts || [])}
|
||||
${renderImages(item?.images || [])}
|
||||
${renderSocials(item?.socials || [])}
|
||||
@@ -498,7 +578,11 @@ export const exportPersonalityToHTML = async (
|
||||
item.buttons[0]
|
||||
)}" valign="${getButtonVerticalAlign(
|
||||
item.buttons[0]
|
||||
)}" style="padding: 0 8px 8px 8px;">
|
||||
)}" style="padding: 0 8px 8px 8px; text-align: ${getButtonHorizontalAlign(
|
||||
item.buttons[0]
|
||||
)}; vertical-align: ${getButtonVerticalAlign(
|
||||
item.buttons[0]
|
||||
)}; ${generateBorderStyle(section.border)}">
|
||||
${renderButtons(item.buttons)}
|
||||
</td>
|
||||
</tr>`;
|
||||
@@ -522,7 +606,9 @@ export const exportPersonalityToHTML = async (
|
||||
30
|
||||
);
|
||||
result += `<tr>
|
||||
<td width="100%" height="${emptyHeight}" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
|
||||
<td width="100%" height="${emptyHeight}" style="padding: 20px; text-align: right; vertical-align: top; font-size: 15px; line-height: 1.8; ${generateBorderStyle(
|
||||
section.border
|
||||
)}">
|
||||
<div style="margin: 0; text-align: right; color: #888; font-size: 14px;">{{content}}</div>
|
||||
</td>
|
||||
</tr>`;
|
||||
@@ -570,13 +656,17 @@ export const exportPersonalityToHTML = async (
|
||||
? Math.max(sectionHeightNumber + 40, 286)
|
||||
: sectionHeight;
|
||||
|
||||
return `<tr>
|
||||
${paddingTop ? `<td style="padding-top: ${paddingTop};">` : "<td>"}
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
return `<tr style="margin: 0; padding: 0;">
|
||||
<td style="margin: 0; padding: 0; vertical-align: top; border-spacing: 0;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; ${generateBorderStyle(
|
||||
section.border
|
||||
)}">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="height: ${displayHeight}; border-radius: 24px; text-align: right; vertical-align: middle; padding: 0px;">
|
||||
<div style="color: #888; font-size: 14px; margin-bottom: 8px;">
|
||||
<td style="height: ${displayHeight}; margin: 0; border-radius: 24px; text-align: right; vertical-align: middle; padding: ${
|
||||
section.padding || "0px"
|
||||
}; ${generateBorderStyle(section.border)}">
|
||||
<div style="color: #888; font-size: 14px; margin: 0; padding: 0;">
|
||||
${emptyMessage}
|
||||
</div>
|
||||
</td>
|
||||
@@ -639,8 +729,8 @@ export const exportPersonalityToHTML = async (
|
||||
isContent: sectionData.isContent,
|
||||
});
|
||||
|
||||
// Pass the complete section data for rendering
|
||||
const renderedSection = renderSection(sectionData, height, "");
|
||||
// Pass the complete section data for rendering with no spacing
|
||||
const renderedSection = renderSection(sectionData, height);
|
||||
console.log(
|
||||
`🔥 [ExportHTML] Section ${sectionKey} rendered, HTML length:`,
|
||||
renderedSection.length
|
||||
@@ -660,7 +750,7 @@ export const exportPersonalityToHTML = async (
|
||||
);
|
||||
|
||||
const html = `<div style="max-width: 600px; margin: 0 auto; direction: rtl;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;">
|
||||
<tbody>
|
||||
${sectionsHtml}
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user