content text

src/pages/setting/Setting.tsx

@@ -106,7 +106,9 @@ const Setting: FC = () => {
         setIsSaveProcessing(true)
 
         try {
+            console.log('🔥 [Setting] Data before export:', JSON.stringify(data, null, 2));
             const html = await exportPersonalityToHTML(data)
+            console.log('🔥 [Setting] HTML exported successfully, length:', html.length);
 
             setIsCapturingScreenshot(true)
             const screenshotFile = await capturePersonalityScreenshot(templateName)

src/pages/setting/personality/utils/ExportHTML.ts

@@ -23,6 +23,10 @@ import {
 export const exportPersonalityToHTML = async (
   data: PersonalityDataType
 ): Promise<string> => {
+  console.log(
+    "🔥 [ExportHTML] Starting export with data:",
+    JSON.stringify(data, null, 2)
+  );
   // Helper functions
   const getHorizontalAlign = (alignment?: HorizontalAlignment) => {
     switch (alignment) {
@@ -50,7 +54,11 @@ export const exportPersonalityToHTML = async (
 
   // Render TextRenderer equivalent
   const renderTexts = (texts: TextType[]) => {
-    if (!texts || texts.length === 0) return "";
+    console.log("🔥 [ExportHTML] renderTexts called with:", texts);
+    if (!texts || texts.length === 0) {
+      console.log("🔥 [ExportHTML] No texts to render");
+      return "";
+    }
 
     return texts
       .map(
@@ -76,7 +84,11 @@ export const exportPersonalityToHTML = async (
 
   // Render ButtonRenderer equivalent
   const renderButtons = (buttons: ButtonType[]) => {
-    if (!buttons || buttons.length === 0) return "";
+    console.log("🔥 [ExportHTML] renderButtons called with:", buttons);
+    if (!buttons || buttons.length === 0) {
+      console.log("🔥 [ExportHTML] No buttons to render");
+      return "";
+    }
 
     return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
       <tbody>
@@ -143,7 +155,11 @@ export const exportPersonalityToHTML = async (
 
   // Render ImageRenderer equivalent
   const renderImages = (images: ImageType[]) => {
-    if (!images || images.length === 0) return "";
+    console.log("🔥 [ExportHTML] renderImages called with:", images);
+    if (!images || images.length === 0) {
+      console.log("🔥 [ExportHTML] No images to render");
+      return "";
+    }
 
     const shouldUseBackgroundImage = (imageSize: ImageSize) => {
       return (
@@ -245,7 +261,11 @@ export const exportPersonalityToHTML = async (
 
   // Render SocialRenderer equivalent
   const renderSocials = (socials: SocialType[]) => {
-    if (!socials || socials.length === 0) return "";
+    console.log("🔥 [ExportHTML] renderSocials called with:", socials);
+    if (!socials || socials.length === 0) {
+      console.log("🔥 [ExportHTML] No socials to render");
+      return "";
+    }
 
     const getIconSize = (size: SocialIconSize) => {
       switch (size) {
@@ -352,9 +372,15 @@ export const exportPersonalityToHTML = async (
   const renderSection = (
     section: SectionType,
     sectionHeight: string,
-    paddingTop = "",
-    isContentSection = false
+    paddingTop = ""
   ) => {
+    console.log(`🔥 [ExportHTML] Rendering section:`, {
+      columnsCount: section.columnsCount,
+      itemsLength: section.items?.length || 0,
+      sectionHeight,
+      items: section.items,
+    });
+
     if (section.columnsCount > 0) {
       return `<tr>
         ${paddingTop ? `<td style="padding-top: ${paddingTop};">` : "<td>"}
@@ -378,6 +404,18 @@ export const exportPersonalityToHTML = async (
                             const hasSocials =
                               item?.socials && item.socials.length > 0;
 
+                            console.log(
+                              `🔥 [ExportHTML] Item ${index} content check:`,
+                              {
+                                hasButtons,
+                                hasTexts,
+                                hasImages,
+                                hasSocials,
+                                sectionHeight,
+                                item: item,
+                              }
+                            );
+
                             let result = `<td style="width: ${
                               100 / section.columnsCount
                             }%; height: ${sectionHeight}; background-color: ${
@@ -415,6 +453,11 @@ export const exportPersonalityToHTML = async (
                                 )}" style="padding: 8px;">
                                   ${renderImages(item?.images || [])}
                                   ${renderSocials(item?.socials || [])}
+                                  ${
+                                    sectionHeight === "246px"
+                                      ? '<div style="margin: 0 0 10px 0; text-align: right; color: #888; font-size: 14px;">{{content}}</div>'
+                                      : ""
+                                  }
                                   ${renderButtons(item.buttons)}
                                 </td>
                               </tr>`;
@@ -438,8 +481,11 @@ export const exportPersonalityToHTML = async (
                                 ${renderImages(item?.images || [])}
                                 ${renderSocials(item?.socials || [])}
                                 ${
-                                  isContentSection
-                                    ? '<div style="margin: 0; text-align: right;">{{content}}</div>'
+                                  sectionHeight === "246px" &&
+                                  !hasTexts &&
+                                  !hasImages &&
+                                  !hasSocials
+                                    ? '<div style="margin: 0; text-align: right; color: #888; font-size: 14px;">{{content}}</div>'
                                     : ""
                                 }
                               </td>
@@ -458,6 +504,18 @@ export const exportPersonalityToHTML = async (
                               </tr>`;
                                 }
                               }
+                            } else {
+                              // اگر هیچ محتوایی نداریم و content section است
+                              console.log(
+                                "🔥 [ExportHTML] Empty content section detected, adding {{content}} placeholder"
+                              );
+                              if (sectionHeight === "246px") {
+                                result += `<tr>
+                              <td width="100%" height="230" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
+                                <div style="margin: 0; text-align: right; color: #888; font-size: 14px;">{{content}}</div>
+                              </td>
+                            </tr>`;
+                              }
                             }
 
                             result += `</tbody>
@@ -516,12 +574,13 @@ export const exportPersonalityToHTML = async (
     <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
       <tbody>
         ${renderSection(data.header, "123px")}
-        ${renderSection(data.content, "246px", "", true)}
+        ${renderSection(data.content, "246px", "")}
         ${renderSection(data.footer, "123px", "")}
       </tbody>
     </table>
   </div>`;
 
+  console.log("🔥 [ExportHTML] Final HTML generated:", html);
   return html;
 };
 

src/pages/setting/personality/utils/screenshotHelper.ts

@@ -20,7 +20,7 @@ const convertImagesToDataUrl = async (element: HTMLElement): Promise<void> => {
           const tempImg = new Image();
           tempImg.crossOrigin = "anonymous";
 
-          await new Promise((resolve, reject) => {
+          await new Promise((resolve) => {
             tempImg.onload = () => {
               canvas.width = tempImg.width;
               canvas.height = tempImg.height;