@markopolo_ai_inc/markopolo-email-editor 1.0.3

package/src/components/EmailEditor/configs/getColumnsSettings.js

@@ -0,0 +1,246 @@
+const getColumnsSettings = (t) => {
+  const defaultStyles = {
+    desktop: {
+      textAlign: "center",
+      paddingTop: 12,
+      paddingBottom: 12,
+      paddingLeft: 12,
+      paddingRight: 12,
+    },
+    mobile: {},
+  };
+
+  return {
+    full: {
+      columns: 1,
+      type: "full",
+      children: [
+        {
+          name: t("drag_block_here"),
+          width: "100%",
+          styles: defaultStyles,
+          key: "empty",
+        },
+      ],
+    },
+    "1-1": {
+      columns: 2,
+      type: "1-1",
+      children: Array.from({ length: 2 }).map(() => {
+        return {
+          name: t("content"),
+          key: "content",
+          width: "50%",
+          styles: {
+            key: "column",
+            desktop: {
+              backgroundColor: "transparent",
+              paddingTop: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
+              paddingBottom: 0,
+              contentBackground: "transparent",
+            },
+            mobile: {},
+          },
+          children: [
+            {
+              name: t("drag_block_here"),
+              key: "empty",
+              width: "100%",
+              styles: defaultStyles,
+            },
+          ],
+        };
+      }),
+    },
+    "1-1-1": {
+      columns: 3,
+      type: "1-1-1",
+      children: Array.from({ length: 3 }).map(() => {
+        return {
+          name: t("content"),
+          key: "content",
+          width: "33.3%",
+          styles: {
+            key: "column",
+            desktop: {
+              backgroundColor: "transparent",
+              paddingTop: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
+              paddingBottom: 0,
+              contentBackground: "transparent",
+            },
+            mobile: {},
+          },
+          children: [
+            {
+              name: t("drag_block_here"),
+              key: "empty",
+              width: "100%",
+              styles: defaultStyles,
+            },
+          ],
+        };
+      }),
+    },
+    "1-1-1-1": {
+      columns: 4,
+      type: "1-1-1-1",
+      children: Array.from({ length: 4 }).map(() => {
+        return {
+          name: t("content"),
+          key: "content",
+          width: "25%",
+          styles: {
+            key: "column",
+            desktop: {
+              backgroundColor: "transparent",
+              paddingTop: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
+              paddingBottom: 0,
+              contentBackground: "transparent",
+            },
+            mobile: {},
+          },
+          children: [
+            {
+              name: t("drag_block_here"),
+              key: "empty",
+              width: "100%",
+              styles: defaultStyles,
+            },
+          ],
+        };
+      }),
+    },
+    "1-2": {
+      columns: 2,
+      type: "1-2",
+      children: Array.from({ length: 2 }).map((item, index) => {
+        return {
+          name: t("content"),
+          key: "content",
+          width: index === 0 ? "33.3%" : "66.6%",
+          styles: {
+            key: "column",
+            desktop: {
+              backgroundColor: "transparent",
+              paddingTop: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
+              paddingBottom: 0,
+              contentBackground: "transparent",
+            },
+            mobile: {},
+          },
+          children: [
+            {
+              name: t("drag_block_here"),
+              key: "empty",
+              width: "100%",
+              styles: defaultStyles,
+            },
+          ],
+        };
+      }),
+    },
+    "2-1": {
+      columns: 2,
+      type: "2-1",
+      children: Array.from({ length: 2 }).map((item, index) => {
+        return {
+          name: t("content"),
+          key: "content",
+          width: index === 0 ? "66.6%" : "33.3%",
+          styles: {
+            key: "column",
+            desktop: {
+              backgroundColor: "transparent",
+              paddingTop: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
+              paddingBottom: 0,
+              contentBackground: "transparent",
+            },
+            mobile: {},
+          },
+          children: [
+            {
+              name: t("drag_block_here"),
+              key: "empty",
+              width: "100%",
+              styles: defaultStyles,
+            },
+          ],
+        };
+      }),
+    },
+    "2-4-2-4": {
+      columns: 4,
+      type: "2-4-2-4",
+      children: Array.from({ length: 4 }).map((item, index) => {
+        return {
+          name: t("content"),
+          key: "content",
+          width: index % 2 === 0 ? "16.6%" : "33.3%",
+          styles: {
+            key: "column",
+            desktop: {
+              backgroundColor: "transparent",
+              paddingTop: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
+              paddingBottom: 0,
+              contentBackground: "transparent",
+            },
+            mobile: {},
+          },
+          children: [
+            {
+              name: t("drag_block_here"),
+              key: "empty",
+              width: "100%",
+              styles: defaultStyles,
+            },
+          ],
+        };
+      }),
+    },
+    "4-2-4-2": {
+      columns: 4,
+      type: "4-2-4-2",
+      children: Array.from({ length: 4 }).map((item, index) => {
+        return {
+          name: t("content"),
+          key: "content",
+          width: index % 2 === 0 ? "33.3%" : "16.6%",
+          styles: {
+            key: "column",
+            desktop: {
+              backgroundColor: "transparent",
+              paddingTop: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
+              paddingBottom: 0,
+              contentBackground: "transparent",
+            },
+            mobile: {},
+          },
+          children: [
+            {
+              name: t("drag_block_here"),
+              key: "empty",
+              width: "100%",
+              styles: defaultStyles,
+            },
+          ],
+        };
+      }),
+    },
+  };
+};
+
+export default getColumnsSettings;

package/src/components/EmailEditor/configs/useDataSource.js

@@ -0,0 +1,19 @@
+import useTranslation from "../translation";
+import getBlockConfigsList from "./getBlockConfigsList";
+import getColumnsSettings from "./getColumnsSettings";
+import getColumnConfigFunc from "./getColumnConfigFunc";
+
+const useDataSource = () => {
+  const { t } = useTranslation();
+  const blockConfigsList = getBlockConfigsList(t);
+  const columnsSetting = getColumnsSettings(t);
+  const getColumnConfig = getColumnConfigFunc(t);
+
+  return {
+    blockConfigsList,
+    columnsSetting,
+    getColumnConfig,
+  };
+};
+
+export default useDataSource;

package/src/components/EmailEditor/index.js

@@ -0,0 +1,93 @@
+import { useReducer, forwardRef, useImperativeHandle } from "react";
+import {
+  GlobalContext,
+  reducer,
+  setBlockList,
+  setActionType,
+  setPreviewMode,
+  setCurrentItem,
+  setBodySettings,
+  setIsDragStart,
+  setSelectionRange,
+  setTextRange,
+  defaultState,
+  setLanguage,
+  setLanguageLibraries,
+} from "./reducers";
+import dataToHtml from "./utils/dataToHTML";
+import Main from "./components/Main";
+import "./assets/App.css";
+
+const EmailEditor = forwardRef(
+  ({ defaultBlockList, defaultBodySettings, language = "en", customLanguageLibraries }, ref) => {
+    const [state, dispatch] = useReducer(reducer, {
+      ...defaultState,
+      blockList: defaultBlockList ? defaultBlockList : defaultState.blockList,
+      bodySettings: defaultBodySettings ? defaultBodySettings : defaultState.bodySettings,
+      languageLibraries: customLanguageLibraries,
+    });
+    useImperativeHandle(ref, () => ({
+      blockList: state.blockList,
+      bodySettings: state.bodySettings,
+      actionType: state.actionType,
+      exportHtml: () =>
+        dataToHtml({
+          bodySettings: state.bodySettings,
+          blockList: state.blockList,
+        }),
+    }));
+
+    return (
+      <GlobalContext.Provider
+        value={{
+          blockList: state.blockList,
+          actionType: state.actionType,
+          previewMode: state.previewMode,
+          currentItem: state.currentItem,
+          bodySettings: state.bodySettings,
+          isDragStart: state.isDragStart,
+          selectionRange: state.selectionRange,
+          textRange: state.textRange,
+          language: state.language,
+          languageLibraries: state.languageLibraries,
+          setIsDragStart: (isDragStart) => {
+            dispatch(setIsDragStart(isDragStart));
+          },
+          setBodySettings: (bodySettings, actionType) => {
+            actionType && dispatch(setActionType(actionType));
+            dispatch(setBodySettings(bodySettings));
+          },
+          setBlockList: (blockList, actionType) => {
+            actionType && dispatch(setActionType(actionType));
+            dispatch(setBlockList(blockList));
+          },
+          setPreviewMode: (previewMode) => {
+            dispatch(setPreviewMode(previewMode));
+          },
+          setCurrentItem: (currentItem) => {
+            dispatch(setCurrentItem(currentItem));
+          },
+          setSelectionRange: (selectionRange) => {
+            dispatch(setSelectionRange(selectionRange));
+          },
+          setTextRange: (textRange) => {
+            dispatch(setTextRange(textRange));
+          },
+          setActionType: (actionType) => {
+            dispatch(setActionType(actionType));
+          },
+          setLanguage: (language) => {
+            dispatch(setLanguage(language));
+          },
+          setLanguageLibraries: (languageLibraries) => {
+            dispatch(setLanguageLibraries(languageLibraries));
+          },
+        }}
+      >
+        <Main language={language} />
+      </GlobalContext.Provider>
+    );
+  }
+);
+
+export default EmailEditor;

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

@@ -0,0 +1,173 @@
+import { createContext } from "react";
+
+const SET_BLOCK_LIST = "SET_BLOCK_LIST";
+const SET_IS_DRAG_START = "SET_IS_DRAG_START";
+const SET_ACTION_TYPE = "SET_ACTION_TYPE";
+const SET_PREVIEW_MODE = "SET_PREVIEW_MODE";
+const SET_CURRENT_ITEM = "SET_CURRENT_ITEM";
+const SET_BODY_SETTINGS = "SET_BODY_SETTINGS";
+const SET_SELECTION_RANGE = "SET_SELECTION_RANGE";
+const SET_TEXT_RANGE = "SET_TEXT_RANGE";
+const SET_LANGUAGE = "SET_LANGUAGE";
+const SET_LANGUAGE_LIBRARIES = "SET_LANGUAGE_LIBRARIES";
+
+export const setTextRange = (textRange) => {
+  return {
+    type: SET_TEXT_RANGE,
+    textRange: textRange,
+  };
+};
+
+export const setSelectionRange = (selectionRange) => {
+  return {
+    type: SET_SELECTION_RANGE,
+    selectionRange: selectionRange,
+  };
+};
+
+export const setBlockList = (blockList) => {
+  return {
+    type: SET_BLOCK_LIST,
+    blockList: blockList,
+  };
+};
+
+export const setIsDragStart = (isDragStart) => {
+  return {
+    type: SET_IS_DRAG_START,
+    isDragStart: isDragStart,
+  };
+};
+
+export const setActionType = (actionType) => {
+  return {
+    type: SET_ACTION_TYPE,
+    actionType: actionType,
+  };
+};
+
+export const setPreviewMode = (previewMode) => {
+  return {
+    type: SET_PREVIEW_MODE,
+    previewMode: previewMode,
+  };
+};
+
+export const setCurrentItem = (currentItem) => {
+  return {
+    type: SET_CURRENT_ITEM,
+    currentItem: currentItem,
+  };
+};
+
+export const setBodySettings = (bodySettings) => {
+  return {
+    type: SET_BODY_SETTINGS,
+    bodySettings: bodySettings,
+  };
+};
+
+export const setLanguage = (language) => {
+  return {
+    type: SET_LANGUAGE,
+    language: language,
+  };
+};
+
+export const setLanguageLibraries = (languageLibraries) => {
+  return {
+    type: SET_LANGUAGE_LIBRARIES,
+    languageLibraries: languageLibraries,
+  };
+};
+
+export const defaultLanguage = "en";
+export const defaultBlockList = [];
+export const defaultIsDragStart = false;
+export const defaultActionType = "firstRender"; // firstRender, add, move, delete,edit, set_history_${index}, edit_${Date.now()}
+export const defaultPreviewMode = "desktop";
+export const defaultCurrentItem = null;
+export const defaultBodySettings = {
+  preHeader: "",
+  contentWidth: 600,
+  styles: {
+    backgroundColor: "#f5f5f5",
+    color: "#152b2a",
+    fontFamily: "Arial",
+  },
+};
+export const defaultSelectionRange = null;
+export const textRange = null;
+export const defaultLanguageLibraries = {};
+
+export const defaultState = {
+  blockList: defaultBlockList,
+  isDragStart: defaultIsDragStart,
+  actionType: defaultActionType,
+  previewMode: defaultPreviewMode,
+  currentItem: defaultCurrentItem,
+  bodySettings: defaultBodySettings,
+  selectionRange: defaultSelectionRange,
+  textRange: textRange,
+  language: defaultLanguage,
+  languageLibraries: defaultLanguageLibraries,
+};
+
+export const GlobalContext = createContext();
+
+export function reducer(state, action) {
+  switch (action.type) {
+    case SET_BLOCK_LIST:
+      return {
+        ...state,
+        blockList: action.blockList,
+      };
+    case SET_IS_DRAG_START:
+      return {
+        ...state,
+        isDragStart: action.isDragStart,
+      };
+    case SET_ACTION_TYPE:
+      return {
+        ...state,
+        actionType: action.actionType,
+      };
+    case SET_PREVIEW_MODE:
+      return {
+        ...state,
+        previewMode: action.previewMode,
+      };
+    case SET_CURRENT_ITEM:
+      return {
+        ...state,
+        currentItem: action.currentItem,
+      };
+    case SET_BODY_SETTINGS:
+      return {
+        ...state,
+        bodySettings: action.bodySettings,
+      };
+    case SET_SELECTION_RANGE:
+      return {
+        ...state,
+        selectionRange: action.selectionRange,
+      };
+    case SET_TEXT_RANGE:
+      return {
+        ...state,
+        textRange: action.textRange,
+      };
+    case SET_LANGUAGE:
+      return {
+        ...state,
+        language: action.language,
+      };
+    case SET_LANGUAGE_LIBRARIES:
+      return {
+        ...state,
+        languageLibraries: action.languageLibraries,
+      };
+    default:
+      return state;
+  }
+}

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

@@ -0,0 +1,166 @@
+const en = {
+  drag_block_here: "Drag block here",
+  blocks: "Blocks",
+  photos: "Photos",
+  powered_by_pexels: "Powered by Pexels",
+  loading: "Loading...",
+  content: "Content",
+  body_settings: "Theme Settings",
+  pre_header: "Pre-header",
+  pre_header_description: "The pre-header is a short summary text that follows the subject line when viewing an email in the inbox.",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  add_blocks: "Add blocks",
+
+  // column block
+  column: "Column",
+  columns: "Columns",
+  column_settings: "Column Settings",
+  column_styles: "Column Styles",
+  column_delete: "Delete Column",
+  column_delete_desc: "Are you sure you want to delete {{count}} extra columns? ",
+
+  // text block
+  text: "Text",
+  text_content: "This is a text, click to edit text",
+  text_settings: "Text Settings",
+  text_styles: "Text Styles",
+  text_align: "Text Align",
+
+  // heading block
+  heading: "Heading",
+  heading_content: "This is a heading, click to edit heading",
+  heading_settings: "Heading Settings",
+  heading_type: "Heading Type",
+
+  // button block
+  button: "Button",
+  button_settings: "Button Settings",
+  button_action: "Button Action",
+  button_styles: "Button Styles",
+  button_padding: "Button Padding",
+
+  // spacer block
+  spacer: "Spacer",
+  spacer_block: "SPACER BLOCK",
+  spacer_settings: "Spacer Settings",
+  // divider block
+  divider: "Divider",
+  divider_settings: "Divider Settings",
+  divider_type: "Divider Type",
+  divider_styles: "Divider Styles",
+
+  // image block
+  image: "Image",
+  image_action: "Image Action",
+  image_url: "Image URL",
+  image_alt: "Image Alt",
+  image_styles: "Image Styles",
+  image_settings: "Image Settings",
+  image_source: "Image source",
+  image_source_url: "Enter URL",
+  image_source_upload: "Upload image",
+  image_upload: "Upload",
+  image_upload_click: "Click to upload",
+
+  // menu block
+  menu: "Menu",
+  menu_settings: "Menu Settings",
+  menu_items: "Menu Items",
+  menu_item: "Menu Item",
+  menu_styles: "Menu Styles",
+  add_new_item: "Add New Item",
+  label: "Label",
+  page: "Page",
+  url: "URL",
+  target: "Target",
+  same_tab: "Same Tab",
+  new_tab: "New Tab",
+  separator: "Separator",
+  letter_spacing: "Letter Spacing",
+  link_color: "Link Color",
+
+  // social link block
+  social_link: "Social Link",
+  social_link_settings: "Social Link Settings",
+  add_social_link: "Add Social Link",
+  social_link_size: "Social Link Size",
+  social_links: "Social Links",
+
+  // colors
+  content_background_color: "Content Background Color",
+  background_color: "Background Color",
+  text_color: "Text Color",
+  email_theme_background_color: "Email Theme Background Color",
+  font_color: "Font Color",
+  button_color: "Button Color",
+  divider_color: "Divider Color",
+
+  //styles
+  action_type: "Action Type",
+  top: "Top",
+  right: "Right",
+  left: "Left",
+  bottom: "Bottom",
+  line_height: "Line Height",
+  link: "Link",
+  link_url: "Link URL",
+  padding_settings: "Padding Settings",
+  width: "Width",
+  height: "Height",
+  width_auto: "Width Auto",
+  font_size: "Font Size",
+  font_family: "Font Family",
+  solid: "Solid",
+  dotted: "Dotted",
+  dashed: "Dashed",
+  align: "Align",
+  spacing: "Spacing",
+
+  // Dashboard / export
+  export_html: "Export HTML",
+  export_json: "Export JSON",
+  language_zh: "中文",
+
+  // Export validation modal
+  export_validation_title: "Export validation",
+  export_validation_issues_found: "Issues found before export",
+  export_validation_errors: "Errors",
+  export_validation_warnings: "Warnings",
+  export_validation_info: "Info",
+  export_anyway: "Export anyway",
+  validation_body_content_width_invalid: "Body content width must be a positive number.",
+  validation_body_background_color_missing: "Theme background color is missing.",
+  validation_body_text_color_missing: "Theme text color is missing.",
+  validation_body_font_family_missing: "Theme font family is missing.",
+  validation_image_empty_src: "Image URL is empty; the image will not display.",
+  validation_image_invalid_src: "Image URL format is invalid.",
+  validation_image_empty_alt: "Image alt text is empty; consider adding for accessibility.",
+  validation_button_empty_link: "Button link URL is empty; will export as href=\"https://\".",
+  validation_button_invalid_link: "Button link URL format is invalid.",
+  validation_menu_empty_label: "Menu item label is empty; will show as \"Link\".",
+  validation_menu_empty_url: "Menu item URL is empty; will export as href=\"#\".",
+  validation_menu_invalid_url: "Menu item URL format is invalid.",
+  validation_menu_no_items: "Menu block has no items.",
+  validation_social_empty_link: "Social link URL is empty; will export as href=\"https://\".",
+  validation_social_invalid_link: "Social link URL format is invalid.",
+  validation_social_empty_icon: "Social link icon URL is empty; icon will not display.",
+  validation_social_invalid_icon: "Social link icon URL format is invalid.",
+  validation_social_no_links: "Social link block has no links.",
+
+  // Rich text tooltips
+  tooltip_bold: "Bold",
+  tooltip_italic: "Italic",
+  tooltip_underline: "Underline",
+  tooltip_strikethrough: "Strikethrough",
+  tooltip_align_left: "Align left",
+  tooltip_align_center: "Align center",
+  tooltip_align_right: "Align right",
+  tooltip_ordered_list: "Ordered list",
+  tooltip_unordered_list: "Unordered list",
+  tooltip_link: "Link",
+  tooltip_remove_link: "Remove link",
+  add_link_modal_title: "Add link",
+};
+
+export default en;