@markopolo_ai_inc/markopolo-email-editor 1.0.3

package/src/components/EmailEditor/components/StyleSettings/SpacerStyleSettings.js

@@ -0,0 +1,38 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+import { InputNumber } from "antd";
+import useLayout from "../../utils/useStyleLayout";
+import useTranslation from "../../translation";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowsAltV } from "@fortawesome/free-solid-svg-icons";
+
+const SpacerStyleSettings = () => {
+  const { currentItem } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { findStyleItem, cardItemElement, inputChange } = useLayout();
+
+  const height = findStyleItem(currentItem.data.styles, "height");
+  const heightNum = typeof height === "number" ? height : parseInt(height, 10) || 16;
+
+  return (
+    <div className="margin-y-30">
+      <div className="right-setting-block-item-title">{t("spacer_block")}</div>
+      {cardItemElement(
+        <span className="flex items-center gap-2">
+          <FontAwesomeIcon icon={faArrowsAltV} className="tag-style-size" />
+          {t("height")}
+        </span>,
+        <InputNumber
+          min={0}
+          max={500}
+          className="input-width"
+          addonAfter="px"
+          value={heightNum}
+          onChange={(value) => inputChange("height")(value ?? 0)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default SpacerStyleSettings;

package/src/components/EmailEditor/components/StyleSettings/TextStyleSettings.js

@@ -0,0 +1,108 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+import classNames from "../../utils/classNames";
+import { InputNumber, Select } from "antd";
+
+import ColorPicker from "../ColorPicker";
+import PaddingSettings from "./PaddingSettings";
+import useLayout from "../../utils/useStyleLayout";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAlignCenter, faAlignLeft, faAlignRight, faAlignJustify } from "@fortawesome/free-solid-svg-icons";
+import useTranslation from "../../translation";
+
+const TextStyleSettings = () => {
+  const { currentItem } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { findStyleItem, cardItemElement, colorChange, paddingChange, otherStylesChange, inputChange } = useLayout();
+
+  const PaddingStylesElement = () => {
+    return (
+      <>
+        <div className="right-setting-block-item-title">{t("padding_settings")}</div>
+        <PaddingSettings
+          padding={{
+            paddingTop: findStyleItem(currentItem.data.styles, "paddingTop"),
+            paddingRight: findStyleItem(currentItem.data.styles, "paddingRight"),
+            paddingLeft: findStyleItem(currentItem.data.styles, "paddingLeft"),
+            paddingBottom: findStyleItem(currentItem.data.styles, "paddingBottom"),
+          }}
+          setPadding={paddingChange}
+        />
+      </>
+    );
+  };
+
+  const textStylesElement = () => {
+    const color = findStyleItem(currentItem.data.styles, "color");
+    const textAlign = findStyleItem(currentItem.data.styles, "textAlign");
+    const fontFamily = findStyleItem(currentItem.data.styles, "fontFamily");
+    const fontSize = findStyleItem(currentItem.data.styles, "fontSize");
+    const lineHeight = findStyleItem(currentItem.data.styles, "lineHeight");
+    const fontFamilyList = ["sans-serif", "Arial", "Verdana", "Times New Roman", "Garamond", "Georgia", "Courier New", "cursive"];
+
+    return (
+      <>
+        <div className="right-setting-block-item-title">{t("text_styles")}</div>
+        {cardItemElement(t("font_color"), <ColorPicker color={color} setColor={colorChange("color")} />)}
+        {cardItemElement(
+          t("text_align"),
+          <div className="flex justify-center items-center">
+            {[
+              { icon: faAlignLeft, value: "left" },
+              { icon: faAlignCenter, value: "center" },
+              { icon: faAlignRight, value: "right" },
+              { icon: faAlignJustify, value: "justify" },
+            ].map(({ icon, value }) => {
+              return (
+                <div
+                  key={value}
+                  className={classNames(textAlign === value ? "align-style-item-active" : "align-style-item-un_active", "align-style-item")}
+                  onClick={() => otherStylesChange("textAlign", value)}
+                >
+                  <FontAwesomeIcon icon={icon} className="tag-style-size" />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {cardItemElement(
+          t("font_family"),
+          <Select
+            className="input-width"
+            value={fontFamily}
+            onChange={inputChange("fontFamily")}
+            getPopupContainer={() => document.querySelector(".right-settings") || document.body}
+          >
+            {fontFamilyList.map((item) => (
+              <Select.Option key={item} value={item}>
+                {item}
+              </Select.Option>
+            ))}
+          </Select>
+        )}
+        {cardItemElement(
+          t("font_size"),
+          <InputNumber min={0} className="input-width" addonAfter="px" value={fontSize} onChange={inputChange("fontSize")} />
+        )}
+        {cardItemElement(
+          t("line_height"),
+          <InputNumber
+            className="input-width"
+            addonAfter="%"
+            min={0}
+            value={Number(lineHeight.replace("%", ""))}
+            onChange={(value) => inputChange("lineHeight")(value + "%")}
+          />
+        )}
+      </>
+    );
+  };
+  return (
+    <div className="margin-y-30">
+      {textStylesElement()}
+      {PaddingStylesElement()}
+    </div>
+  );
+};
+
+export default TextStyleSettings;

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

@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+
+import ColumnStyleSettings from "./ColumnStyleSettings";
+import TextStyleSettings from "./TextStyleSettings";
+import HeadingStyleSettings from "./HeadingStyleSettings";
+import ButtonStyleSettings from "./ButtonStyleSettings";
+import DividerStyleSettings from "./DividerStyleSettings";
+import SpacerStyleSettings from "./SpacerStyleSettings";
+import MenuStyleSettings from "./MenuStyleSettings";
+import ImageStyleSettings from "./ImageStyleSettings";
+import SocialLinkSettings from "./SocialLinkSettings";
+
+const StyleSettings = () => {
+  const { currentItem } = useContext(GlobalContext);
+
+  return (
+    <>
+      {currentItem?.data.key === "column" && <ColumnStyleSettings />}
+      {currentItem?.data.key === "text" && <TextStyleSettings />}
+      {currentItem?.data.key === "heading" && <HeadingStyleSettings />}
+      {currentItem?.data.key === "button" && <ButtonStyleSettings />}
+      {currentItem?.data.key === "divider" && <DividerStyleSettings />}
+      {currentItem?.data.key === "spacer" && <SpacerStyleSettings />}
+      {currentItem?.data.key === "menu" && <MenuStyleSettings />}
+      {currentItem?.data.key === "image" && <ImageStyleSettings />}
+      {currentItem?.data.key === "social_link" && <SocialLinkSettings />}
+    </>
+  );
+};
+
+export default StyleSettings;

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

@@ -0,0 +1,263 @@
+const getBlockConfigsList = (t) => {
+  return [
+    {
+      name: t("column"),
+      key: "column",
+      type: "full",
+      styles: {
+        key: "column",
+        desktop: {
+          backgroundColor: "transparent",
+          paddingTop: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingBottom: 0,
+          contentBackground: "#fff",
+        },
+        mobile: {},
+      },
+      children: [
+        {
+          name: t("content"),
+          key: "content",
+          width: "100%",
+          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: {
+                desktop: {
+                  backgroundColor: "transparent",
+                  paddingTop: 0,
+                  paddingLeft: 0,
+                  paddingRight: 0,
+                  paddingBottom: 0,
+                },
+                mobile: {},
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: t("text"),
+      key: "text",
+      text: t("text_content"),
+      styles: {
+        desktop: {
+          fontSize: 14,
+          fontFamily: "sans-serif",
+          color: undefined,
+          lineHeight: "140%",
+          paddingTop: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          paddingRight: 12,
+          textAlign: "left",
+        },
+        mobile: {},
+      },
+    },
+    {
+      name: t("heading"),
+      key: "heading",
+      text: t("heading_content"),
+      type: "h1",
+      styles: {
+        desktop: {
+          fontSize: 22,
+          lineHeight: "140%",
+          fontFamily: "sans-serif",
+          color: undefined,
+          paddingTop: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          paddingRight: 12,
+          textAlign: "left",
+          fontWeight: "bold",
+        },
+        mobile: {},
+      },
+    },
+    {
+      name: t("button"),
+      key: "button",
+      text: t("button"),
+      type: "link",
+      linkURL: "",
+      contentStyles: {
+        desktop: {
+          textAlign: "center",
+          paddingTop: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          paddingRight: 12,
+        },
+        mobile: {},
+      },
+      styles: {
+        desktop: {
+          width: "auto",
+          fontSize: 12,
+          lineHeight: "140%",
+          borderRadius: 4,
+          fontFamily: "sans-serif",
+          paddingTop: 10,
+          paddingBottom: 10,
+          paddingLeft: 20,
+          paddingRight: 20,
+          backgroundColor: "#2faade",
+          color: "#fff",
+          display: "inline-block",
+        },
+        mobile: {},
+      },
+    },
+    {
+      name: t("spacer"),
+      key: "spacer",
+      contentStyles: {
+        desktop: {
+          paddingTop: 0,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+        },
+        mobile: {},
+      },
+      styles: {
+        desktop: {
+          height: 16,
+          width: "100%",
+          display: "block",
+        },
+        mobile: {},
+      },
+    },
+    {
+      name: t("divider"),
+      key: "divider",
+      contentStyles: {
+        desktop: {
+          paddingTop: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          paddingRight: 12,
+          textAlign: "center",
+        },
+        mobile: {},
+      },
+      styles: {
+        desktop: {
+          width: "100%",
+          borderTopStyle: "solid",
+          borderTopColor: "#ccc",
+          borderTopWidth: 1,
+          display: "inline-block",
+          verticalAlign: "middle",
+        },
+        mobile: {},
+      },
+    },
+    {
+      name: t("image"),
+      key: "image",
+      src: "",
+      alt: "Image",
+      type: "link",
+      linkURL: "",
+      contentStyles: {
+        desktop: {
+          paddingTop: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          paddingRight: 12,
+          textAlign: "center",
+        },
+        mobile: {},
+      },
+      styles: {
+        desktop: {
+          width: "auto",
+        },
+        mobile: {},
+      },
+    },
+    {
+      name: t("menu"),
+      key: "menu",
+      list: [
+        { label: "Page", url: "", target: "_self" },
+        { label: "Page", url: "", target: "_self" },
+      ],
+      separator: " | ",
+      contentStyles: {
+        desktop: {
+          paddingTop: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          paddingRight: 12,
+          textAlign: "center",
+        },
+        mobile: {},
+      },
+      styles: {
+        desktop: {
+          fontSize: 14,
+          fontFamily: "sans-serif",
+          color: "#333333",
+          linkColor: "#2faade",
+          paddingTop: 5,
+          paddingBottom: 5,
+          paddingLeft: 15,
+          paddingRight: 15,
+          textAlign: "center",
+          letterSpacing: 0,
+          fontWeight: "normal",
+        },
+        mobile: {},
+      },
+    },
+    {
+      name: t("social_link"),
+      key: "social_link",
+      list: [
+        { image: "https://s.magecdn.com/social/tc-facebook.svg", title: "Facebook", linkURL: "" },
+        { image: "https://s.magecdn.com/social/tc-instagram.svg", title: "Instagram", linkURL: "" },
+        { image: "https://s.magecdn.com/social/tc-tiktok.svg", title: "TikTok", linkURL: "" },
+        { image: "https://s.magecdn.com/social/tc-x.svg", title: "Twitter", linkURL: "" },
+      ],
+      imageWidth: 32,
+      contentStyles: {
+        desktop: {
+          paddingTop: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          paddingRight: 12,
+          textAlign: "left",
+        },
+        mobile: {},
+      },
+      styles: {
+        desktop: { paddingTop: 4, paddingBottom: 4, paddingLeft: 6, paddingRight: 6 },
+        mobile: {},
+      },
+    },
+  ];
+};
+
+export default getBlockConfigsList;

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

@@ -0,0 +1,59 @@
+const getColumnConfigFunc = (t) => {
+  return (item) => {
+    const contentConfig = {
+      name: t("drag_block_here"),
+      key: "empty",
+      width: "100%",
+      styles: {
+        desktop: {
+          backgroundColor: "transparent",
+          paddingTop: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingBottom: 0,
+        },
+        mobile: {},
+      },
+    };
+
+    return {
+      name: t("column"),
+      key: "column",
+      type: "full",
+      styles: {
+        key: "column",
+        desktop: {
+          backgroundColor: "transparent",
+          paddingTop: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingBottom: 0,
+          contentBackground: "#fff",
+        },
+        mobile: {},
+      },
+      children: [
+        {
+          name: t("content"),
+          key: "content",
+          width: "100%",
+          styles: {
+            key: "column",
+            desktop: {
+              backgroundColor: "transparent",
+              paddingTop: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
+              paddingBottom: 0,
+              contentBackground: "transparent",
+            },
+            mobile: {},
+          },
+          children: [item ? item : contentConfig],
+        },
+      ],
+    };
+  };
+};
+
+export default getColumnConfigFunc;