@markopolo_ai_inc/markopolo-email-editor 1.0.3

package/src/components/EmailEditor/translation/index.js

@@ -0,0 +1,39 @@
+import zh from "./zh";
+import en from "./en";
+import { useContext } from "react";
+import { GlobalContext } from "../reducers";
+
+const useTranslation = () => {
+  const { language, languageLibraries } = useContext(GlobalContext);
+  let langLibraries = { zh, en };
+
+  if (languageLibraries) {
+    langLibraries = {
+      ...langLibraries,
+      ...languageLibraries,
+      zh: {
+        ...zh,
+        ...(langLibraries["zh"] || {}),
+      },
+      en: {
+        ...en,
+        ...(langLibraries["en"] || {}),
+      },
+    };
+  }
+
+  const t = (key, metaTag) => {
+    const langLibrary = langLibraries[language] || {};
+    let translation = langLibrary[key];
+    if (metaTag && metaTag instanceof Object) {
+      Object.keys(metaTag).forEach((key) => {
+        translation = translation.replace(`{{${key}}}`, metaTag[key]);
+      });
+    }
+    return translation || key;
+  };
+
+  return { t };
+};
+
+export default useTranslation;

package/src/components/EmailEditor/translation/zh.js

@@ -0,0 +1,166 @@
+const zh = {
+  drag_block_here: "请将模块拖放到此处",
+  blocks: "模块",
+  photos: "图片",
+  powered_by_pexels: "图片由Pexels提供",
+  loading: "加载中...",
+  content: "内容",
+  body_settings: "邮件主题设置",
+  pre_header: "预标题",
+  pre_header_description: "预标题是在收件箱中查看电子邮件时跟随主题行的简短摘要文本。",
+  confirm: "确认",
+  cancel: "取消",
+  add_blocks: "请添加块",
+
+  // column block
+  column: "列",
+  columns: "列排版",
+  column_settings: "列设置",
+  column_styles: "列样式",
+  column_delete: "删除列",
+  column_delete_desc: "您确定删除多余的{{count}}列吗？",
+
+  //text block
+  text: "文本",
+  text_content: "这是一个文本，点击修改文本",
+  text_settings: "文本设置",
+  text_styles: "文本样式",
+  text_align: "文本对齐方式",
+
+  // heading block
+  heading: "标题",
+  heading_content: "这是一个标题，点击修改标题",
+  heading_settings: "标题设置",
+  heading_type: "标题类型",
+
+  // button block
+  button: "按钮",
+  button_settings: "按钮设置",
+  button_action: "点击按钮触发",
+  button_styles: "按钮样式",
+  button_padding: "按钮内边距",
+
+  // spacer block
+  spacer: "间距",
+  spacer_block: "间距块",
+  spacer_settings: "间距设置",
+  // divider block
+  divider: "分割线",
+  divider_settings: "分割线设置",
+  divider_type: "分割线类型",
+  divider_styles: "分割线样式",
+
+  // image block
+  image: "图片",
+  image_settings: "图片设置",
+  image_action: "点击图片跳转",
+  image_url: "图片URL",
+  image_alt: "图片alt",
+  image_styles: "图片样式",
+  image_source: "图片来源",
+  image_source_url: "输入URL",
+  image_source_upload: "上传图片",
+  image_upload: "上传",
+  image_upload_click: "点击上传",
+
+  // menu block
+  menu: "菜单",
+  menu_settings: "菜单设置",
+  menu_items: "菜单项",
+  menu_item: "菜单项",
+  menu_styles: "菜单样式",
+  add_new_item: "添加新项",
+  label: "标签",
+  page: "页面",
+  url: "链接地址",
+  target: "打开方式",
+  same_tab: "当前窗口",
+  new_tab: "新窗口",
+  separator: "分隔符",
+  letter_spacing: "字间距",
+  link_color: "链接颜色",
+
+  // social link block
+  social_link: "社交链接",
+  add_social_link: "添加社交链接",
+  social_link_size: "社交链接大小",
+  social_links: "社交链接",
+  social_link_settings: "社交链接设置",
+
+  // colors
+  content_background_color: "内容背景颜色",
+  background_color: "背景颜色",
+  text_color: "文本颜色",
+  email_theme_background_color: "邮件主题色",
+  font_color: "字体颜色",
+  button_color: "按钮颜色",
+  divider_color: "分割线颜色",
+
+  // styles
+  action_type: "按钮类型",
+  top: "上",
+  right: "右",
+  left: "左",
+  bottom: "下",
+  line_height: "行高",
+  link: "超链接",
+  link_url: "超链接URL",
+  padding_settings: "内边距设置",
+  width_auto: "宽度自适应",
+  width: "宽度",
+  height: "高度",
+  font_size: "字体大小",
+  font_family: "字体",
+  align: "对齐方式",
+  solid: "实线",
+  dotted: "虚线（点）",
+  dashed: "虚线（破折号）",
+  spacing: "间距",
+
+  // Dashboard / export
+  export_html: "导出html",
+  export_json: "导出JSON",
+  language_zh: "中文",
+
+  // Export validation modal
+  export_validation_title: "导出前校验",
+  export_validation_issues_found: "导出前发现以下问题",
+  export_validation_errors: "错误",
+  export_validation_warnings: "警告",
+  export_validation_info: "提示",
+  export_anyway: "仍要导出",
+  validation_body_content_width_invalid: "邮件内容宽度必须为正数。",
+  validation_body_background_color_missing: "主题背景色未设置。",
+  validation_body_text_color_missing: "主题文字颜色未设置。",
+  validation_body_font_family_missing: "主题字体未设置。",
+  validation_image_empty_src: "图片地址为空，图片将无法显示。",
+  validation_image_invalid_src: "图片地址格式无效。",
+  validation_image_empty_alt: "图片未设置 alt 文本，建议添加以提升可访问性。",
+  validation_button_empty_link: "按钮链接为空，将导出为 href=\"https://\"。",
+  validation_button_invalid_link: "按钮链接格式无效。",
+  validation_menu_empty_label: "菜单项标签为空，将显示为「链接」。",
+  validation_menu_empty_url: "菜单项链接为空，将导出为 href=\"#\"。",
+  validation_menu_invalid_url: "菜单项链接格式无效。",
+  validation_menu_no_items: "菜单块没有任何项。",
+  validation_social_empty_link: "社交链接地址为空，将导出为 href=\"https://\"。",
+  validation_social_invalid_link: "社交链接地址格式无效。",
+  validation_social_empty_icon: "社交链接图标地址为空，图标将无法显示。",
+  validation_social_invalid_icon: "社交链接图标地址格式无效。",
+  validation_social_no_links: "社交链接块没有任何链接。",
+
+  // Rich text tooltips
+  tooltip_bold: "加粗",
+  tooltip_italic: "斜体",
+  tooltip_underline: "下划线",
+  tooltip_strikethrough: "删除线",
+  tooltip_align_left: "居左",
+  tooltip_align_center: "居中",
+  tooltip_align_right: "居右",
+  tooltip_ordered_list: "有序列表",
+  tooltip_unordered_list: "无序列表",
+  tooltip_link: "超链接",
+  tooltip_remove_link: "删除超链接",
+  add_link_modal_title: "添加超链接",
+};
+
+export default zh;

package/src/components/EmailEditor/utils/classNames.js

@@ -0,0 +1,5 @@
+const classNames = (...classes) => {
+  return classes.filter(Boolean).join(" ");
+};
+
+export default classNames;

package/src/components/EmailEditor/utils/dataToHTML.js

@@ -0,0 +1,323 @@
+const createStyleString = (className, styles) => {
+  const regex = new RegExp(/[A-Z]/g);
+  const kebabCase = (str) => str.replace(regex, (v) => `-${v.toLowerCase()}`);
+
+  let stylesConfig = {
+    className: className,
+    desktop: "",
+    mobile: "",
+  };
+
+  for (let item of Object.entries(styles.desktop)) {
+    if (item[1] && item[0] !== "contentBackground") {
+      stylesConfig.desktop += `${kebabCase(item[0])}:${typeof item[1] === "number" ? item[1] + "px" : item[1]};`;
+    }
+  }
+
+  if (Object.keys(styles.mobile).length) {
+    let mobile = "";
+    for (let item of Object.entries(styles.mobile)) {
+      if (item[1] && item[0] !== "contentBackground") {
+        mobile += `${kebabCase(item[0])}:${typeof item[1] === "number" ? item[1] + "px" : item[1]} !important;`;
+      }
+    }
+
+    stylesConfig.mobile += `@media(max-width:620px){
+    .${className} {
+        ${mobile}
+      }
+    }`;
+  }
+
+  return stylesConfig;
+};
+
+const createStyleTag = (list, styles = "", parentIndex) => {
+  const newBlockList = list.map((item, index) => {
+    let newItem = item;
+    newItem.styleConfig = createStyleString(parentIndex ? `${parentIndex}-${item.key}-${index}` : `${item.key}-${index}`, item.styles);
+
+    if (newItem.contentStyles) {
+      newItem.contentStyleConfig = createStyleString(`${item.key}-content-${index}`, item.contentStyles);
+
+      if (newItem.contentStyleConfig.mobile) {
+        styles += newItem.contentStyleConfig.mobile;
+      }
+    }
+    if (newItem.styleConfig.mobile) {
+      styles += newItem.styleConfig.mobile;
+    }
+
+    if (item.styles.desktop.contentBackground) {
+      newItem.contentStyleConfig = {
+        className: `${item.key}-content-${index}`,
+        desktop: `background-color:${item.styles.desktop.contentBackground};`,
+        mobile: "",
+      };
+    }
+
+    // contentBackground => column content background
+    if (item.styles.mobile.contentBackground) {
+      newItem.contentStyleConfig.mobile = ` @media(max-width:620px){
+        .${newItem.contentStyleConfig.className} {background-color:${item.styles.mobile.contentBackground};}
+        }`;
+      styles += newItem.contentStyleConfig.mobile;
+    }
+
+    if (item.children?.length) {
+      const { newBlockList: childrenList, styles: childrenStyles } = createStyleTag(item.children, styles, index);
+      styles += childrenStyles;
+      newItem.children = childrenList;
+    }
+
+    return {
+      ...newItem,
+    };
+  });
+
+  return {
+    newBlockList: newBlockList,
+    styles: styles,
+  };
+};
+
+const createImageString = (imageConfig) => {
+  return `<div ${imageConfig.contentStyleConfig.mobile ? `class="${imageConfig.contentStyleConfig.className}"` : ""} 
+  style="${imageConfig.contentStyleConfig.desktop}">
+      <img src="${imageConfig.src}" alt="${imageConfig.alt}" style="max-width:100%;${imageConfig.styleConfig.desktop}" 
+      ${imageConfig.styleConfig.mobile ? `class="${imageConfig.styleConfig.className}"` : ""}/> 
+  </div>`;
+};
+
+const createTextString = (textBlock) => {
+  return `<div ${textBlock.styleConfig.mobile ? `class="${textBlock.styleConfig.className}"` : ""} 
+  style="${textBlock.styleConfig.desktop}">${textBlock.text}</div>`;
+};
+
+const createHeaderString = (headerBlock) => {
+  return `<${headerBlock.type} ${headerBlock.styleConfig.mobile ? `class="${headerBlock.styleConfig.className}"` : ""} 
+  style="${headerBlock.styleConfig.desktop}">
+  ${headerBlock.text}
+  </${headerBlock.type}>`;
+};
+
+const createButtonString = (buttonBlock) => {
+  return `<div ${buttonBlock.contentStyleConfig.mobile ? `class="${buttonBlock.contentStyleConfig.className}"` : ""} 
+  style="${buttonBlock.contentStyleConfig.desktop}">
+    <a ${buttonBlock.styleConfig.mobile ? `class="${buttonBlock.styleConfig.className}"` : ""} 
+    style="${buttonBlock.styleConfig.desktop}" target="_black" href="https://${buttonBlock.linkURL}">${buttonBlock.text}</a>
+  </div>`;
+};
+
+const createDividerString = (dividerBLock) => {
+  return `<div ${dividerBLock.contentStyleConfig.mobile ? `class="${dividerBLock.contentStyleConfig.className}"` : ""} 
+  style="${dividerBLock.contentStyleConfig.desktop}">
+    <div ${dividerBLock.styleConfig.mobile ? `class="${dividerBLock.styleConfig.className}"` : ""} 
+    style="${dividerBLock.styleConfig.desktop}"></div>
+  </div>`;
+};
+
+const createSpacerString = (spacerBlock) => {
+  return `<div ${spacerBlock.contentStyleConfig?.mobile ? `class="${spacerBlock.contentStyleConfig.className}"` : ""} 
+  style="${spacerBlock.contentStyleConfig?.desktop || ""}">
+    <div ${spacerBlock.styleConfig?.mobile ? `class="${spacerBlock.styleConfig.className}"` : ""} 
+    style="${spacerBlock.styleConfig?.desktop || ""}"></div>
+  </div>`;
+};
+
+const createMenuString = (menuBlock) => {
+  const items = menuBlock.list || [];
+  const sep = menuBlock.separator != null ? String(menuBlock.separator) : " | ";
+  const linkStyle = menuBlock.styleConfig?.desktop || "";
+  const wrapStyle = menuBlock.contentStyleConfig?.desktop || "";
+  const content = items
+    .map((item) => {
+      const href = item.url ? (item.url.startsWith("http") ? item.url : "https://" + item.url) : "#";
+      const target = item.target === "_blank" ? "_blank" : "_self";
+      const label = item.label || "Link";
+      return `<a target="${target}" href="${href}" style="${linkStyle};text-decoration:none;display:inline-block;">${label}</a>`;
+    })
+    .join(sep);
+  return `<div ${menuBlock.contentStyleConfig?.mobile ? `class="${menuBlock.contentStyleConfig.className}"` : ""} style="${wrapStyle}">${content}</div>`;
+};
+
+const createSocialLinkString = (socialLinkBlock) => {
+  return `<div ${socialLinkBlock.contentStyleConfig.mobile ? `class="${socialLinkBlock.contentStyleConfig.className}"` : ""} 
+  style="${socialLinkBlock.contentStyleConfig.desktop}">
+    ${socialLinkBlock.list
+      .map((socialLinkItem) => {
+        const { image, title, linkURL } = socialLinkItem;
+        return `<a target="_black" href="https://${linkURL}" style="${socialLinkBlock.styleConfig.desktop};display:inline-block;">
+        <img src="${image}" alt="${title}" style="width:${socialLinkBlock.imageWidth}px;" 
+        ${socialLinkBlock.styleConfig.mobile ? `class="${socialLinkBlock.styleConfig.className}"` : ""}/> 
+      </a>`;
+      })
+      .join("")}
+  </div>`;
+};
+
+const blockListToHtml = (blockList, bodySettings) => {
+  let content = "";
+  blockList.forEach((item) => {
+    if (item.key === "column") {
+      content += `<div ${item.styleConfig.mobile ? `class="${item.styleConfig.className}"` : ""} 
+      style="${item.styleConfig.desktop};width:100%;display:block;">
+        <table ${item.contentStyleConfig.mobile ? `class="${item.contentStyleConfig.className}"` : ""} 
+        style="width:100%;max-width:${bodySettings.contentWidth}px;margin:0 auto;${item.contentStyleConfig.desktop}">
+      <tbody><tr>${blockListToHtml(item.children)}</tr></tbody>
+       </table></div>`;
+    }
+
+    if (item.key === "content") {
+      content += `<td ${item.styleConfig.mobile ? `class="${item.styleConfig.className}"` : ""} 
+      style="width:${item.width}; ${item.styleConfig.desktop}">${blockListToHtml(item.children)}</td>`;
+    }
+
+    if (item.key === "text") {
+      content += createTextString(item);
+    }
+
+    if (item.key === "heading") {
+      content += createHeaderString(item);
+    }
+
+    if (item.key === "image") {
+      content += createImageString(item);
+    }
+
+    if (item.key === "button") {
+      content += createButtonString(item);
+    }
+
+    if (item.key === "divider") {
+      content += createDividerString(item);
+    }
+
+    if (item.key === "spacer") {
+      content += createSpacerString(item);
+    }
+
+    if (item.key === "menu") {
+      content += createMenuString(item);
+    }
+
+    if (item.key === "social_link") {
+      content += createSocialLinkString(item);
+    }
+  });
+
+  return content;
+};
+
+const DEFAULT_BODY_SETTINGS = {
+  preHeader: "",
+  contentWidth: 600,
+  styles: {
+    backgroundColor: "#f5f5f5",
+    color: "#152b2a",
+    fontFamily: "Arial",
+  },
+};
+
+const dataToHtml = ({ bodySettings, blockList }) => {
+  let content = "";
+  const { newBlockList, styles } = createStyleTag(blockList);
+  content = blockListToHtml(newBlockList, bodySettings);
+  return `<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>email</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style type="text/css">
+  *{
+    margin: 0;
+    padding: 0;
+    border: none;
+    box-sizing: border-box;
+  }
+
+  html,body {
+    height:100%;
+    overflow-y:auto;
+  }
+
+  table {
+    width: 100%;
+    color:unset;
+  }
+
+  table, tr, td {
+    vertical-align: top;
+    border-collapse: collapse;
+ }
+
+  h1,h2,h3,h4 {
+    display: block;
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+  }
+
+  @media(max-width:620px){
+    td {
+      display:inline-block;
+      width:100% !important;
+    }
+  }
+  ${styles}
+</style>
+  </head>
+  <body>
+  <div style="opacity:0;">${bodySettings.preHeader}</div>
+  <div style="background-color:${bodySettings.styles.backgroundColor};color:${bodySettings.styles.color}; font-family:${bodySettings.styles.fontFamily};"> ${content}</div>
+  </body>
+  </html>`;
+};
+
+/**
+ * Export normalizer: accepts exported template JSON and returns a complete HTML file string.
+ * @param {string|object} input - Template JSON as string or parsed object. Supports:
+ *   - Legacy: array of column blocks (blockList only)
+ *   - Full: { blockList, bodySettings }
+ * @returns {string} Complete HTML document (with doctype, head, styles, body)
+ */
+export function exportNormalizerToHtml(input) {
+  let data = input;
+  if (typeof input === "string") {
+    try {
+      data = JSON.parse(input);
+    } catch (e) {
+      throw new Error("exportNormalizerToHtml: invalid JSON");
+    }
+  }
+  if (data == null) {
+    throw new Error("exportNormalizerToHtml: input is null or undefined");
+  }
+
+  let blockList = [];
+  let bodySettings = { ...DEFAULT_BODY_SETTINGS, styles: { ...DEFAULT_BODY_SETTINGS.styles } };
+
+  if (Array.isArray(data)) {
+    blockList = data;
+  } else if (typeof data === "object") {
+    blockList = Array.isArray(data.blockList) ? data.blockList : [];
+    if (data.bodySettings && typeof data.bodySettings === "object") {
+      bodySettings = {
+        preHeader: data.bodySettings.preHeader != null ? data.bodySettings.preHeader : DEFAULT_BODY_SETTINGS.preHeader,
+        contentWidth: Number(data.bodySettings.contentWidth) || DEFAULT_BODY_SETTINGS.contentWidth,
+        styles: {
+          backgroundColor: data.bodySettings.styles?.backgroundColor ?? DEFAULT_BODY_SETTINGS.styles.backgroundColor,
+          color: data.bodySettings.styles?.color ?? DEFAULT_BODY_SETTINGS.styles.color,
+          fontFamily: data.bodySettings.styles?.fontFamily ?? DEFAULT_BODY_SETTINGS.styles.fontFamily,
+        },
+      };
+    }
+  }
+
+  const html = dataToHtml({ bodySettings, blockList });
+  return `<!DOCTYPE html>\n${html}`;
+}
+
+export default dataToHtml;