@markopolo_ai_inc/markopolo-email-editor 1.0.3

package/src/components/EmailEditor/components/RichText/RichTextLayout.js

@@ -0,0 +1,53 @@
+import { useContext, useRef, useEffect } from "react";
+import { GlobalContext } from "../../reducers";
+import classNames from "../../utils/classNames";
+import { deepClone } from "../../utils/helpers";
+import RichText from "../RichText";
+
+const RichTextLayout = ({ index, blockItem }) => {
+  const { currentItem, previewMode, blockList, setBlockList, setCurrentItem, isDragStart } = useContext(GlobalContext);
+
+  const richTextRef = useRef(null);
+
+  const isEdit = currentItem && currentItem.index === index;
+  const styles = previewMode === "desktop" ? blockItem.styles.desktop : { ...blockItem.styles.desktop, ...blockItem.styles.mobile };
+
+  useEffect(() => {
+    if (isEdit) {
+      richTextRef.current.focus();
+    }
+  }, [isEdit]);
+
+  const setTextContent = (event) => {
+    const indexArray = index.split("-");
+    let newBlockList = deepClone(blockList);
+    let newCurrentItem = deepClone(currentItem);
+    newCurrentItem.data.text = event.target.innerHTML;
+    newBlockList[indexArray[0]].children[indexArray[1]].children[indexArray[2]].text = event.target.innerHTML;
+    setBlockList(newBlockList);
+    setCurrentItem({ ...newCurrentItem });
+  };
+
+  const preventDefault = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  return (
+    <div className="relative">
+      {isEdit && blockItem && !isDragStart && <RichText textBlock={richTextRef} index={index} styles={styles} />}
+      <div
+        className={classNames(isEdit && "text-block", "text-content_editable")}
+        onClick={preventDefault}
+        onInput={setTextContent}
+        style={styles}
+        contentEditable={isEdit}
+        suppressContentEditableWarning
+        ref={richTextRef}
+        dangerouslySetInnerHTML={{ __html: blockItem.text }}
+      ></div>
+    </div>
+  );
+};
+
+export default RichTextLayout;

package/src/components/EmailEditor/components/RichText/Strikethrough.js

@@ -0,0 +1,36 @@
+import { useMemo, useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faStrikethrough } from "@fortawesome/free-solid-svg-icons";
+import useSection from "../../utils/useSection";
+import classNames from "../../utils/classNames";
+import { GlobalContext } from "../../reducers";
+import useTranslation from "../../translation";
+
+const Strikethrough = ({ modifyText, setTextContent }) => {
+  const { selectionRange } = useContext(GlobalContext);
+  const { getSelectionNode } = useSection();
+  const { t } = useTranslation();
+
+  const node = useMemo(() => {
+    if (selectionRange) {
+      return getSelectionNode(selectionRange.commonAncestorContainer, "strike");
+    } else {
+      return null;
+    }
+  }, [selectionRange, getSelectionNode]);
+
+  return (
+    <button
+      className={classNames("rich-text-tools-button ", node && "rich-text-tools-button-active")}
+      title={t("tooltip_strikethrough")}
+      onClick={() => {
+        modifyText("strikethrough", false, null);
+        setTextContent();
+      }}
+    >
+      <FontAwesomeIcon icon={faStrikethrough} className="rich-text-tools-button-icon" />
+    </button>
+  );
+};
+
+export default Strikethrough;

package/src/components/EmailEditor/components/RichText/TextAlign.js

@@ -0,0 +1,58 @@
+import { useMemo, useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAlignLeft, faAlignCenter, faAlignRight } from "@fortawesome/free-solid-svg-icons";
+import useSection from "../../utils/useSection";
+import classNames from "../../utils/classNames";
+import { GlobalContext } from "../../reducers";
+import useTranslation from "../../translation";
+
+const TextAlign = ({ modifyText, setTextContent }) => {
+  const { selectionRange } = useContext(GlobalContext);
+  const { getSectionStyle } = useSection();
+  const { t } = useTranslation();
+
+  const textAlign = useMemo(() => {
+    if (selectionRange) {
+      return getSectionStyle(selectionRange.commonAncestorContainer, "textAlign");
+    } else {
+      return null;
+    }
+  }, [selectionRange, getSectionStyle]);
+
+  return (
+    <>
+      <button
+        className={classNames("rich-text-tools-button ", textAlign === "left" && "rich-text-tools-button-active")}
+        title={t("tooltip_align_left")}
+        onClick={() => {
+          modifyText("justifyLeft", false, null);
+          setTextContent();
+        }}
+      >
+        <FontAwesomeIcon icon={faAlignLeft} className="rich-text-tools-button-icon" />
+      </button>
+      <button
+        className={classNames("rich-text-tools-button ", textAlign === "center" && "rich-text-tools-button-active")}
+        title={t("tooltip_align_center")}
+        onClick={() => {
+          modifyText("justifyCenter", false, null);
+          setTextContent();
+        }}
+      >
+        <FontAwesomeIcon icon={faAlignCenter} className="rich-text-tools-button-icon" />
+      </button>
+      <button
+        className={classNames("rich-text-tools-button ", textAlign === "right" && "rich-text-tools-button-active")}
+        title={t("tooltip_align_right")}
+        onClick={() => {
+          modifyText("justifyRight", false, null);
+          setTextContent();
+        }}
+      >
+        <FontAwesomeIcon icon={faAlignRight} className="rich-text-tools-button-icon" />
+      </button>
+    </>
+  );
+};
+
+export default TextAlign;

package/src/components/EmailEditor/components/RichText/Underline.js

@@ -0,0 +1,36 @@
+import { useMemo, useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUnderline } from "@fortawesome/free-solid-svg-icons";
+import useSection from "../../utils/useSection";
+import classNames from "../../utils/classNames";
+import { GlobalContext } from "../../reducers";
+import useTranslation from "../../translation";
+
+const Underline = ({ modifyText, setTextContent }) => {
+  const { selectionRange } = useContext(GlobalContext);
+  const { getSelectionNode } = useSection();
+  const { t } = useTranslation();
+
+  const node = useMemo(() => {
+    if (selectionRange) {
+      return getSelectionNode(selectionRange.commonAncestorContainer, "u");
+    } else {
+      return null;
+    }
+  }, [selectionRange, getSelectionNode]);
+
+  return (
+    <button
+      className={classNames("rich-text-tools-button ", node && "rich-text-tools-button-active")}
+      title={t("tooltip_underline")}
+      onClick={() => {
+        modifyText("underline", false, null);
+        setTextContent();
+      }}
+    >
+      <FontAwesomeIcon icon={faUnderline} className="rich-text-tools-button-icon" />
+    </button>
+  );
+};
+
+export default Underline;

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

@@ -0,0 +1,210 @@
+import { useEffect, useRef, useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDown, faExpandAlt, faCompressAlt } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import { GlobalContext } from "../../reducers";
+import { deepClone } from "../../utils/helpers";
+import { motion } from "framer-motion";
+
+import Bold from "./Bold";
+import Italic from "./Italic";
+import Underline from "./Underline";
+import Strikethrough from "./Strikethrough";
+import InsertOrderedList from "./InsertOrderedList";
+import InsertUnorderedList from "./InsertUnorderedList";
+import Link from "./Link";
+import TextAlign from "./TextAlign";
+import FontColor from "./FontColor";
+
+const RichText = ({ index, textBlock, styles }) => {
+  const { blockList, setBlockList, currentItem, setCurrentItem } = useContext(GlobalContext);
+  const richTextRef = useRef(null);
+  const [isHidden, setIsHidden] = useState(false);
+
+  useEffect(() => {
+    if (richTextRef.current) {
+      var viewportOffset = richTextRef.current.parentNode?.getBoundingClientRect();
+      const preview = document.querySelector("#preview");
+      const previewOffset = preview.getBoundingClientRect();
+      if (viewportOffset.top - 190 < 0) {
+        richTextRef.current.style.bottom = "auto";
+        richTextRef.current.style.top = "110%";
+      } else {
+        richTextRef.current.style.bottom = "110%";
+        richTextRef.current.style.top = "auto";
+      }
+      if (viewportOffset.left + 375 > previewOffset.left + previewOffset.width) {
+        richTextRef.current.style.left = "auto";
+        richTextRef.current.style.right = "0";
+      } else {
+        richTextRef.current.style.left = "0";
+        richTextRef.current.style.right = "auto";
+      }
+    }
+  }, []);
+
+  const modifyText = (command, defaultUi, value) => {
+    document.execCommand(command, defaultUi, value);
+  };
+
+  const fontSizeList = [
+    "8px",
+    "10px",
+    "12px",
+    "14px",
+    "16px",
+    "18px",
+    "20px",
+    "22px",
+    "24px",
+    "26px",
+    "28px",
+    "30px",
+    "32px",
+    "34px",
+    "36px",
+    "38px",
+    "40px",
+    "44px",
+    "48px",
+    "72px",
+  ];
+
+  const fontname_configs = ["sans-serif", "Arial", "Verdana", "Times New Roman", "Garamond", "Georgia", "Courier New", "cursive"];
+
+  const setTextContent = () => {
+    const indexArray = index.split("-");
+    let newBlockList = deepClone(blockList);
+    let newCurrentItem = deepClone(currentItem);
+    newCurrentItem.data.text = textBlock.current.innerHTML;
+    newBlockList[indexArray[0]].children[indexArray[1]].children[indexArray[2]].text = textBlock.current.innerHTML;
+    setCurrentItem({ ...newCurrentItem });
+    setBlockList(newBlockList);
+  };
+
+  const selectElement = (selectList, defaultValue, type, onChange) => {
+    const hideOptions = () => {
+      const options = document.querySelector(`#richText-options-${type}-${index}`);
+      const mask = document.querySelector(`#richText-mask-${type}-${index}`);
+      options.style.animation = "leave 0.2s linear";
+      setTimeout(() => {
+        options.style.display = "none";
+        mask.style.display = "none";
+      }, 100);
+    };
+
+    const showOptions = () => {
+      const options = document.querySelector(`#richText-options-${type}-${index}`);
+      const mask = document.querySelector(`#richText-mask-${type}-${index}`);
+      options.style.display = "block";
+      mask.style.display = "block";
+      options.style.animation = "move 0.2s linear";
+    };
+    return (
+      <div className="richText-select">
+        <div
+          className="richText-select-select"
+          onClick={(event) => {
+            event.stopPropagation();
+            const options = document.querySelector(`#richText-options-${type}-${index}`);
+            if (options.style.display === "block") {
+              hideOptions();
+            } else {
+              showOptions();
+            }
+          }}
+        >
+          <span className="richText-select-value" id={`richText-select-value-${type}-${index}`}>
+            {defaultValue}
+          </span>
+          <FontAwesomeIcon icon={faAngleDown} className="richText-select-icon" />
+        </div>
+        <div className="richText-mask" id={`richText-mask-${type}-${index}`} onClick={hideOptions}></div>
+        <div className="richText-select-option" id={`richText-options-${type}-${index}`}>
+          {selectList.map((item) => {
+            return (
+              <div
+                className="richText-select-option_item"
+                key={item}
+                onClick={() => {
+                  const currentValueDom = document.querySelector(`#richText-select-value-${type}-${index}`);
+                  currentValueDom.innerHTML = item;
+                  hideOptions();
+                  onChange && onChange(item);
+                  setTextContent();
+                }}
+              >
+                {item}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  const editFontSize = (item) => {
+    document.execCommand("fontSize", 0, "7");
+    var fontElements = document.getElementsByTagName("font");
+    for (var idx = 0, len = fontElements.length; idx < len; ++idx) {
+      if (fontElements[idx].size === "7") {
+        fontElements[idx].removeAttribute("size");
+        fontElements[idx].style.fontSize = item;
+      }
+    }
+  };
+
+  const editFontName = (item) => {
+    modifyText("fontName", false, item);
+  };
+
+  return (
+    <div
+      className="rich-text"
+      ref={richTextRef}
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }}
+    >
+      <motion.div
+        className="rich-text-tools"
+        initial={{ scale: 0, x: 0 }}
+        animate={{ scale: 1, x: 0 }}
+        style={{ width: isHidden ? "auto" : "375px" }}
+      >
+        <div className="rich-text-tools-body items-center">
+          {!isHidden && (
+            <>
+              {selectElement(fontSizeList, styles.fontSize + "px", "fontSize", editFontSize)}
+              {selectElement(fontname_configs, styles.fontFamily, "fontName", editFontName)}
+              {/* Font color */}
+              <FontColor modifyText={modifyText} setTextContent={setTextContent} />
+              {/* Bold */}
+              <Bold modifyText={modifyText} setTextContent={setTextContent} />
+              {/* Italic */}
+              <Italic modifyText={modifyText} setTextContent={setTextContent} />
+              {/* Underline */}
+              <Underline modifyText={modifyText} setTextContent={setTextContent} />
+              {/* Strikethrough */}
+              <Strikethrough modifyText={modifyText} setTextContent={setTextContent} />
+              {/* Ordered list */}
+              <InsertOrderedList modifyText={modifyText} setTextContent={setTextContent} />
+              {/* Unordered list */}
+              <InsertUnorderedList modifyText={modifyText} setTextContent={setTextContent} />
+              {/* Link */}
+              <Link modifyText={modifyText} setTextContent={setTextContent} />
+              {/* Text align */}
+              <TextAlign modifyText={modifyText} setTextContent={setTextContent} />
+            </>
+          )}
+          <button className="rich-text-tools-button" onClick={() => setIsHidden(!isHidden)}>
+            {<FontAwesomeIcon icon={isHidden ? faExpandAlt : faCompressAlt} className="rich-text-tools-button-icon" />}
+          </button>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default RichText;

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

@@ -0,0 +1,126 @@
+import { useContext } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import ColorPicker from "../ColorPicker";
+import { GlobalContext } from "../../reducers";
+import { InputNumber, Input } from "antd";
+import StyleSettings from "../StyleSettings";
+import useLayout from "../../utils/useStyleLayout";
+import useTranslation from "../../translation";
+
+const RightSetting = () => {
+  const { currentItem, isDragStart, bodySettings, setBodySettings } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { cardItemElement } = useLayout();
+  const blockTitle = () => {
+    let title = "Block";
+    const type = currentItem?.data.key;
+    switch (type) {
+      case "text":
+        title = t("text_settings");
+        break;
+      case "column":
+        title = t("column_settings");
+        break;
+      case "heading":
+        title = t("heading_settings");
+        break;
+      case "button":
+        title = t("button_settings");
+        break;
+      case "divider":
+        title = t("divider_settings");
+        break;
+      case "spacer":
+        title = t("spacer_settings");
+        break;
+      case "menu":
+        title = t("menu_settings");
+        break;
+      case "image":
+        title = t("image_settings");
+        break;
+      case "social_link":
+        title = t("social_link_settings");
+        break;
+      default:
+        break;
+    }
+    return title;
+  };
+
+  const colorChange = (key) => (color) => {
+    setBodySettings({ ...bodySettings, styles: { ...bodySettings.styles, [key]: color.hex } }, "set_body_settings");
+  };
+
+  const themeElement = () => {
+    return (
+      <>
+        <div className="subject-settings">{t("body_settings")}</div>
+        <div className="margin-top-32">
+          {cardItemElement(t("text_color"), <ColorPicker color={bodySettings.styles.color} setColor={colorChange("color")} />)}
+          {cardItemElement(
+            t("email_theme_background_color"),
+            <ColorPicker color={bodySettings.styles.backgroundColor} setColor={colorChange("backgroundColor")} />
+          )}
+          {cardItemElement(
+            t("line_height"),
+            <InputNumber
+              className="input-width"
+              addonAfter="px"
+              min={0}
+              max={900}
+              value={Number(bodySettings.contentWidth)}
+              onChange={(value) => setBodySettings({ ...bodySettings, contentWidth: value }, "set_body_settings")}
+            />
+          )}
+          <div>
+            <div className="pre_header">{t("pre_header")}</div>
+            <Input
+              className="margin-top-12"
+              value={bodySettings.preHeader}
+              onChange={(event) => setBodySettings({ ...bodySettings, preHeader: event.target.value }, "set_body_settings")}
+            />
+            <div className="pre_header-desc">{t("pre_header_description")}</div>
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const stopPropagation = (event) => {
+    event.stopPropagation();
+  };
+
+  return (
+    <div className="right-settings default-scrollbar" onClick={stopPropagation}>
+      <AnimatePresence mode="wait">
+        {!isDragStart && currentItem && currentItem.type === "edit" ? (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            transition={{ duration: 0.3 }}
+            key={0}
+          >
+            <h2 className="right-setting-block-title">{blockTitle()}</h2>
+            <div className="margin-top-18">
+              <StyleSettings />
+            </div>
+          </motion.div>
+        ) : (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            transition={{ duration: 0.3 }}
+            key={1}
+          >
+            {themeElement()}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default RightSetting;

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

@@ -0,0 +1,141 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+import classNames from "../../utils/classNames";
+import { InputNumber, Select, Switch, Slider, Input } from "antd";
+
+import ColorPicker from "../ColorPicker";
+import PaddingSettings from "./PaddingSettings";
+import useLayout from "../../utils/useStyleLayout";
+import { deepClone } from "../../utils/helpers";
+import useTranslation from "../../translation";
+
+const ButtonStyleSettings = () => {
+  const { currentItem, previewMode } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { findStyleItem, cardItemElement, colorChange, paddingChange, inputChange, updateItemStyles } = useLayout();
+
+  const buttonActionElement = () => {
+    const { linkURL } = currentItem.data;
+    const linkChange = (event) => {
+      const newValue = event.target.value;
+      const newCurrentItem = deepClone(currentItem);
+      newCurrentItem.data.linkURL = newValue;
+      updateItemStyles(newCurrentItem.data);
+    };
+
+    return (
+      <div>
+        <div className="right-setting-block-item-title">{t("button_action")}</div>
+        {cardItemElement(t("action_type"), <div className="link-tag">{t("link")}</div>)}
+        <div className="card-item-title">{t("link_url")}</div>
+        <div className="margin-top-6">
+          <Input addonBefore="https://" value={linkURL} onChange={linkChange} />
+        </div>
+      </div>
+    );
+  };
+
+  const PaddingStylesElement = () => {
+    const updateContentStylesPadding = (padding) => {
+      const newData = deepClone(currentItem.data);
+      newData.contentStyles[previewMode] = {
+        ...newData.contentStyles[previewMode],
+        ...padding,
+      };
+      updateItemStyles(newData);
+    };
+
+    return (
+      <>
+        <div className="right-setting-block-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}
+        />
+      </>
+    );
+  };
+
+  const textStylesElement = () => {
+    const width = findStyleItem(currentItem.data.styles, "width");
+    const color = findStyleItem(currentItem.data.styles, "color");
+    const fontFamily = findStyleItem(currentItem.data.styles, "fontFamily");
+    const fontSize = findStyleItem(currentItem.data.styles, "fontSize");
+    const lineHeight = findStyleItem(currentItem.data.styles, "lineHeight");
+    const backgroundColor = findStyleItem(currentItem.data.styles, "backgroundColor");
+    const fontFamilyList = ["sans-serif", "Arial", "Verdana", "Times New Roman", "Garamond", "Georgia", "Courier New", "cursive"];
+
+    return (
+      <>
+        <div className="right-setting-block-item-title">{t("button_styles")}</div>
+        {cardItemElement(
+          t("width_auto"),
+          <Switch
+            checked={width === "auto"}
+            className={classNames(width === "auto" ? "switch-active" : "switch-disabled")}
+            onChange={() => {
+              const value = width === "auto" ? "100%" : "auto";
+              inputChange("width")(value);
+            }}
+          />
+        )}
+        {width !== "auto" && <Slider value={Number(width.replace("%", ""))} onChange={(value) => inputChange("width")(value + "%")} />}
+        {cardItemElement(t("font_color"), <ColorPicker color={color} setColor={colorChange("color")} />)}
+        {cardItemElement(t("button_color"), <ColorPicker color={backgroundColor} setColor={colorChange("backgroundColor")} />)}
+        {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 + "%")}
+          />
+        )}
+        <div className="card-item-title">{t("button_padding")}</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}
+        />
+      </>
+    );
+  };
+  return (
+    <div className="margin-y-30">
+      {buttonActionElement()}
+      {textStylesElement()}
+      {PaddingStylesElement()}
+    </div>
+  );
+};
+
+export default ButtonStyleSettings;