@markopolo_ai_inc/markopolo-email-editor 1.0.3

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

@@ -0,0 +1,241 @@
+import { useContext, useState } from "react";
+import { GlobalContext } from "../../reducers";
+import classNames from "../../utils/classNames";
+import { Modal, Tabs } from "antd";
+
+import { deepClone } from "../../utils/helpers";
+import ColorPicker from "../ColorPicker";
+import PaddingSettings from "./PaddingSettings";
+import useStyleLayout from "../../utils/useStyleLayout";
+import useDataSource from "../../configs/useDataSource";
+import useTranslation from "../../translation";
+
+const ColumnStyleSettings = () => {
+  const { currentItem, previewMode } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentColumnType, setCurrentColumnType] = useState(null);
+  const { findStyleItem, cardItemElement, updateItemStyles, colorChange, paddingChange } = useStyleLayout();
+  const { columnsSetting } = useDataSource();
+
+  const columnChange = (type) => () => {
+    if (currentItem.data.children.length > columnsSetting[type].children.length) {
+      setIsModalOpen(true);
+      setCurrentColumnType(type);
+      return;
+    }
+    const newColumnConfig = columnsSetting[type];
+    const newData = {
+      ...currentItem.data,
+      ...newColumnConfig,
+      children: newColumnConfig.children.map((item, index) => {
+        let newItem = item;
+        if (currentItem.data.children[index]) {
+          newItem = { ...currentItem.data.children[index], width: item.width };
+        }
+        return { ...newItem };
+      }),
+    };
+    updateItemStyles(newData);
+  };
+
+  const handleOk = () => {
+    const newColumnConfig = columnsSetting[currentColumnType];
+    const newData = {
+      ...currentItem.data,
+      ...newColumnConfig,
+      children: newColumnConfig.children.map((item, index) => {
+        let newItem = item;
+        if (currentItem.data.children[index]) {
+          newItem = { ...currentItem.data.children[index], width: item.width };
+        }
+        return { ...newItem };
+      }),
+    };
+    updateItemStyles(newData);
+    setIsModalOpen(false);
+    setCurrentColumnType(null);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  const columnList = [
+    {
+      key: "full",
+      widths: ["100%"],
+    },
+    {
+      key: "1-1",
+      widths: ["50%", "50%"],
+    },
+    {
+      key: "1-1-1",
+      widths: ["33.33%", "33.33%", "33.33%"],
+    },
+    {
+      key: "1-1-1-1",
+      widths: ["25%", "25%", "25%", "25%"],
+    },
+    {
+      key: "1-2",
+      widths: ["33.33%", "66.66%"],
+    },
+    {
+      key: "2-1",
+      widths: ["66.66%", "33.33%"],
+    },
+    {
+      key: "2-4-2-4",
+      widths: ["16.66%", "33.33%", "16.66%", "33.33%"],
+    },
+    {
+      key: "4-2-4-2",
+      widths: ["33.33%", "16.66%", "33.33%", "16.66%"],
+    },
+  ];
+
+  const changeColumnList = (key, index) => (value) => {
+    const newData = deepClone(currentItem.data);
+    newData.children[index].styles[previewMode][key] = value;
+    updateItemStyles(newData);
+  };
+
+  const changePaddingStyle = (index) => (padding) => {
+    const newData = deepClone(currentItem.data);
+    newData.children[index].styles[previewMode] = {
+      ...newData.children[index].styles[previewMode],
+      ...padding,
+    };
+    updateItemStyles(newData);
+  };
+
+  const columnListElement = () => {
+    return (
+      <>
+        <div className="right-setting-block-item-title"> {t("columns")}</div>
+        <div>
+          {columnList.map((item, index) => {
+            return (
+              <div
+                className={classNames(currentItem.data.type === item.key ? "column-item-active" : "column-item-un_active", "column-item")}
+                key={index}
+                onClick={columnChange(item.key)}
+              >
+                {item.widths.map((width, index) => {
+                  const isLast = index === item.widths.length - 1;
+                  return (
+                    <span
+                      key={index}
+                      style={{ width }}
+                      className={classNames(
+                        isLast ? "" : "column-item-border-right",
+                        currentItem.data.type === item.key ? "column-item-active" : "column-item-un_active",
+                        "height-full"
+                      )}
+                    ></span>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </>
+    );
+  };
+
+  const columnContentElement = () => {
+    return (
+      <>
+        <div className="right-setting-block-item-title"> {t("column_settings")}</div>
+        <Tabs
+          defaultActiveKey="1"
+          animated={{
+            inkBar: true,
+            tabPane: true,
+          }}
+          items={currentItem.data.children.map((item, index) => {
+            const key = index + 1;
+            const backgroundColor = findStyleItem(item.styles, "backgroundColor");
+            return {
+              label: `${t("column")} ${key}`,
+              key: key,
+              children: (
+                <>
+                  {cardItemElement(
+                    t("content_background_color"),
+                    <ColorPicker color={backgroundColor} setColor={({ hex }) => changeColumnList("backgroundColor", index)(hex)} />
+                  )}
+                  <PaddingSettings
+                    padding={{
+                      paddingTop: findStyleItem(item.styles, "paddingTop"),
+                      paddingRight: findStyleItem(item.styles, "paddingRight"),
+                      paddingLeft: findStyleItem(item.styles, "paddingLeft"),
+                      paddingBottom: findStyleItem(item.styles, "paddingBottom"),
+                    }}
+                    setPadding={changePaddingStyle(index)}
+                  />
+                </>
+              ),
+            };
+          })}
+        />
+      </>
+    );
+  };
+
+  const columnStylesElement = () => {
+    const backgroundColor = findStyleItem(currentItem.data.styles, "backgroundColor");
+    const contentBackground = findStyleItem(currentItem.data.styles, "contentBackground");
+    return (
+      <>
+        <div className="right-setting-block-item-title"> {t("column_styles")}</div>
+        {cardItemElement(t("background_color"), <ColorPicker color={backgroundColor} setColor={colorChange("backgroundColor")} />)}
+        {cardItemElement(t("content_background_color"), <ColorPicker color={contentBackground} setColor={colorChange("contentBackground")} />)}
+        <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}
+        />
+      </>
+    );
+  };
+
+  return (
+    <>
+      <div className="margin-y-30">
+        {columnListElement()}
+        {columnContentElement()}
+        {columnStylesElement()}
+      </div>
+      <Modal
+        title={t("column_delete")}
+        open={isModalOpen}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        width={400}
+        okText={t("confirm")}
+        cancelText={t("cancel")}
+        wrapClassName="ee-modal-dark"
+      >
+        <p
+          className="margin-y-30"
+          dangerouslySetInnerHTML={{
+            __html: t("column_delete_desc", {
+              count: `<span class="column-modal-context">
+              ${currentColumnType ? currentItem.data.children.length - columnsSetting[currentColumnType].children.length : 0}
+            </span>`,
+            }),
+          }}
+        ></p>
+      </Modal>
+    </>
+  );
+};
+
+export default ColumnStyleSettings;

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

@@ -0,0 +1,111 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+import classNames from "../../utils/classNames";
+import { InputNumber, Select, Slider } from "antd";
+import { deepClone } from "../../utils/helpers";
+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 DividerStyleSettings = () => {
+  const { currentItem, previewMode } = useContext(GlobalContext);
+  const { t } = useTranslation();
+
+  const { findStyleItem, cardItemElement, colorChange, updateItemStyles, inputChange } = useLayout();
+
+  const updateContentStylesPadding = (padding) => {
+    const newData = deepClone(currentItem.data);
+    newData.contentStyles[previewMode] = {
+      ...newData.contentStyles[previewMode],
+      ...padding,
+    };
+    updateItemStyles(newData);
+  };
+
+  const updateContentTextAlign = (textAlign) => {
+    const newData = deepClone(currentItem.data);
+    newData.contentStyles[previewMode] = {
+      ...newData.contentStyles[previewMode],
+      textAlign,
+    };
+    updateItemStyles(newData);
+  };
+
+  const dividerStyleSettings = () => {
+    const textAlign = findStyleItem(currentItem.data.contentStyles, "textAlign");
+    const width = findStyleItem(currentItem.data.styles, "width");
+    const borderTopColor = findStyleItem(currentItem.data.styles, "borderTopColor");
+    const borderTopWidth = findStyleItem(currentItem.data.styles, "borderTopWidth");
+    const borderTopStyle = findStyleItem(currentItem.data.styles, "borderTopStyle");
+    const dividerType = [
+      { label: t("solid"), value: "solid" },
+      { label: t("dotted"), value: "dotted" },
+      { label: t("dashed"), value: "dashed" },
+    ];
+
+    return (
+      <>
+        <div className="right-setting-block-item-title"> {t("divider_styles")}</div>
+        {cardItemElement(
+          t("divider_type"),
+          <Select
+            className="input-width"
+            value={borderTopStyle}
+            onChange={inputChange("borderTopStyle")}
+            getPopupContainer={() => document.querySelector(".right-settings") || document.body}
+          >
+            {dividerType.map((item) => (
+              <Select.Option key={item.value} value={item.value}>
+                {item.label}
+              </Select.Option>
+            ))}
+          </Select>
+        )}
+        {cardItemElement(
+          t("height"),
+          <InputNumber min={0} className="input-width" addonAfter="px" value={borderTopWidth} onChange={inputChange("borderTopWidth")} />
+        )}
+        {cardItemElement(t("divider_color"), <ColorPicker color={borderTopColor} setColor={colorChange("borderTopColor")} />)}
+        <div className="card-item-title">{t("width")}</div>
+        <Slider value={Number(width.replace("%", ""))} onChange={(value) => inputChange("width")(value + "%")} />
+        {cardItemElement(
+          t("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={() => updateContentTextAlign(value)}
+                >
+                  <FontAwesomeIcon icon={icon} className="tag-style-size" />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <div className="card-item-title"> {t("padding_settings")}</div>
+        <PaddingSettings
+          padding={{
+            paddingTop: findStyleItem(currentItem.data.contentStyles, "paddingTop"),
+            paddingRight: findStyleItem(currentItem.data.contentStyles, "paddingRight"),
+            paddingLeft: findStyleItem(currentItem.data.contentStyles, "paddingLeft"),
+            paddingBottom: findStyleItem(currentItem.data.contentStyles, "paddingBottom"),
+          }}
+          setPadding={updateContentStylesPadding}
+        />
+      </>
+    );
+  };
+  return <div className="margin-y-30">{dividerStyleSettings()}</div>;
+};
+
+export default DividerStyleSettings;

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

@@ -0,0 +1,162 @@
+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 HeadingStyleSettings = () => {
+  const { currentItem } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { findStyleItem, cardItemElement, colorChange, paddingChange, otherStylesChange, inputChange, updateItemStyles } = 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 headingTypeChange = (type) => () => {
+    let fontSize = currentItem.data.styles.desktop.fontSize;
+    switch (type) {
+      case "h1":
+        fontSize = 22;
+        break;
+      case "h2":
+        fontSize = 20;
+        break;
+      case "h3":
+        fontSize = 18;
+        break;
+      case "h4":
+        fontSize = 16;
+        break;
+      default:
+        break;
+    }
+    let newConfig = {
+      ...currentItem.data,
+      type,
+      styles: {
+        ...currentItem.data.styles,
+        desktop: {
+          ...currentItem.data.styles.desktop,
+          fontSize,
+        },
+      },
+    };
+    updateItemStyles(newConfig);
+  };
+
+  const textStylesElement = () => {
+    const { type } = currentItem.data;
+    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("heading_type"),
+          <div className="flex justify-center items-center">
+            {[
+              { name: "H1", value: "h1" },
+              { name: "H2", value: "h2" },
+              { name: "H3", value: "h3" },
+              { name: "H4", value: "h4" },
+            ].map(({ name, value }) => {
+              return (
+                <div
+                  key={value}
+                  className={classNames(type === value ? "align-style-item-active" : "align-style-item-un_active", "align-style-item")}
+                  onClick={headingTypeChange(value)}
+                >
+                  {name}
+                </div>
+              );
+            })}
+          </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 HeadingStyleSettings;