@markopolo_ai_inc/markopolo-email-editor 1.0.3

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

@@ -0,0 +1,281 @@
+import { useContext, useCallback, useEffect } from "react";
+import { GlobalContext } from "../../reducers";
+import { throttle, deepClone } from "../../utils/helpers";
+
+import LeftSideBar from "../LeftSideBar";
+import Preview from "../Preview";
+import RightSetting from "../RightSetting";
+import useTranslation from "../../translation";
+import useDataSource from "../../configs/useDataSource";
+
+const Main = ({ language }) => {
+  const { blockList, setBlockList, currentItem, setCurrentItem, setIsDragStart, setLanguage } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { getColumnConfig } = useDataSource();
+
+  const defaultContentConfig = {
+    name: t("drag_block_here"),
+    key: "empty",
+    width: "100%",
+    styles: {
+      desktop: {
+        backgroundColor: "transparent",
+        paddingTop: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingBottom: 0,
+      },
+      mobile: {},
+    },
+  };
+
+  useEffect(() => {
+    setLanguage(language);
+  }, [language, setLanguage]);
+
+  // Deselect current item
+  const blurCurrentItem = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setCurrentItem(null);
+  };
+  const clearLabelStyles = () => {
+    const dragLabelElements = document.getElementsByClassName("block-drag-label-content");
+    Array.from(dragLabelElements).forEach((item) => {
+      item.children[0].style.visibility = "hidden";
+    });
+  };
+
+  const clearContentLabelStyles = () => {
+    const dragContentLabelElements = document.getElementsByClassName("block-content-drag-label-content");
+    Array.from(dragContentLabelElements).forEach((item) => {
+      item.children[0].style.visibility = "hidden";
+    });
+  };
+
+  // throttle() returns a new function reference; deps are intentionally minimal
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onDragOver = useCallback(
+    throttle((event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      let { index } = event.target.dataset;
+      switch (event.target.dataset.type) {
+        case "empty-block":
+          clearLabelStyles();
+          clearContentLabelStyles();
+          event.target.style.border = "1px dashed #2faade";
+          break;
+
+        case "drag-over-column":
+          clearContentLabelStyles();
+          const dragLabelElements = document.getElementsByClassName("block-drag-label-content");
+          Array.from(dragLabelElements).forEach((item) => {
+            if (Number(item.dataset.index) === Number(index)) {
+              item.children[0].style.visibility = "visible";
+            } else {
+              item.children[0].style.visibility = "hidden";
+            }
+          });
+          break;
+
+        case "block-item-move":
+          clearLabelStyles();
+          const dragBlockItemElements = document.getElementsByClassName("block-content-drag-label-content");
+          Array.from(dragBlockItemElements).forEach((item) => {
+            if (item.dataset.index === index) {
+              item.children[0].style.visibility = "visible";
+            } else {
+              item.children[0].style.visibility = "hidden";
+            }
+          });
+          break;
+
+        case "empty-block-item":
+          clearLabelStyles();
+          clearContentLabelStyles();
+          const parentNode = event.target.parentNode;
+          parentNode && parentNode.classList.contains("block-empty-content") && (parentNode.style.outlineStyle = "solid");
+          break;
+        default:
+          clearLabelStyles();
+          clearContentLabelStyles();
+          break;
+      }
+    }, 30),
+    []
+  );
+
+  const onDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const { type } = event.target.dataset;
+    setIsDragStart(false);
+    switch (type) {
+      // First time adding an element
+      case "empty-block":
+        const newCurrentItem = currentItem.data.key !== "column" ? getColumnConfig(currentItem.data) : getColumnConfig();
+        setBlockList([newCurrentItem], "add");
+        setCurrentItem({ data: newCurrentItem, type: "edit", index: 0 });
+        break;
+      case "empty-block-item":
+        clearEmptyContentStyles();
+        const { index } = event.target.dataset;
+        const newBlockList = deepClone(blockList);
+        const indexArr = index.split("-");
+        const blockIndex = indexArr[0];
+        const itemIndex = indexArr[1];
+        newBlockList[blockIndex].children[itemIndex].children = [currentItem.data];
+        if (currentItem.type === "move") {
+          // Remove original element; if children becomes empty after removal, add empty content
+          const { index: oldIndex } = currentItem;
+          const oldIndexArr = oldIndex.split("-");
+          const oldBlockIndex = oldIndexArr[0];
+          const oldItemIndex = oldIndexArr[1];
+          const oldItem = newBlockList[oldBlockIndex].children[oldItemIndex];
+          if (oldItem.children.length === 1) {
+            newBlockList[oldBlockIndex].children[oldItemIndex].children = [defaultContentConfig];
+          } else {
+            newBlockList[oldBlockIndex].children[oldItemIndex].children = oldItem.children.filter((item, index) => index !== Number(oldIndexArr[2]));
+          }
+        }
+        setCurrentItem({ ...currentItem, type: "edit", index });
+        setBlockList([...newBlockList], "move");
+        break;
+      case "drag-over-column":
+        {
+          const { position, index } = event.target.dataset;
+          const newBlockList = deepClone(blockList);
+          let newCurrentItem = deepClone(currentItem);
+          if (currentItem.type === "add") {
+            newBlockList.splice(index, 0, currentItem.data);
+            newCurrentItem = { ...currentItem, type: "edit", index };
+          } else if (currentItem.type === "move") {
+            const moveItem = newBlockList.splice(currentItem.index, 1)[0];
+            newBlockList.splice(index, 0, moveItem);
+            newCurrentItem = { ...currentItem, type: "edit", index: position === "top" ? Number(index) : index - 1 };
+          }
+          setCurrentItem({ ...newCurrentItem });
+          setBlockList([...newBlockList], "move");
+        }
+
+        setTimeout(() => {
+          const dragLabelElements = document.getElementsByClassName("block-drag-label-content");
+          Array.from(dragLabelElements).forEach((item) => {
+            item.children[0].style.visibility = "hidden";
+          });
+        }, 30);
+
+        break;
+      case "block-item-move":
+        {
+          const { position, index } = event.target.dataset;
+          const newBlockList = deepClone(blockList);
+          const indexArr = index.split("-");
+          const blockIndex = indexArr[0];
+          const contentIndex = indexArr[1];
+          const itemIndex = indexArr[2];
+          const blockItem = newBlockList[blockIndex].children[contentIndex].children;
+          let newCurrentItem = deepClone(currentItem);
+          if (currentItem.type === "add") {
+            blockItem.splice(itemIndex, 0, currentItem.data);
+            newCurrentItem = { ...currentItem, type: "edit", index };
+          }
+          if (currentItem.type === "move") {
+            const oldIndexArr = currentItem.index.split("-");
+            const oldBlockIndex = oldIndexArr[0];
+            const oldContentIndex = oldIndexArr[1];
+            const oldItemIndex = oldIndexArr[2];
+            const oldItem = newBlockList[oldBlockIndex].children[oldContentIndex].children;
+            // Move currentItem.data: may move within current oldItem or to another oldItem
+            if (oldBlockIndex === blockIndex && oldContentIndex === contentIndex) {
+              // Moving within the same block item
+
+              if (oldItemIndex < itemIndex) {
+                const moveItem = oldItem.splice(oldItemIndex, 1)[0];
+                blockItem.splice(position === "top" ? Number(itemIndex) : itemIndex - 1, 0, moveItem);
+                newCurrentItem = {
+                  ...currentItem,
+                  type: "edit",
+                  index: `${blockIndex}-${contentIndex}-${position === "top" ? Number(itemIndex) : itemIndex - 1}`,
+                };
+              } else {
+                const moveItem = oldItem.splice(oldItemIndex, 1)[0];
+                blockItem.splice(position === "top" ? Number(itemIndex) : itemIndex, 0, moveItem);
+                newCurrentItem = {
+                  ...currentItem,
+                  type: "edit",
+                  index: `${blockIndex}-${contentIndex}-${position === "top" ? Number(itemIndex) : itemIndex}`,
+                };
+              }
+            } else {
+              // Moving to a different block item: add to new block item and remove from old; if old children becomes empty, add empty content
+              const moveItem = oldItem.splice(oldItemIndex, 1)[0];
+              blockItem.splice(position === "top" ? Number(itemIndex) : itemIndex, 0, moveItem);
+
+              if (oldItem.length === 0) {
+                newBlockList[oldBlockIndex].children[oldContentIndex].children = [defaultContentConfig];
+              }
+              newCurrentItem = {
+                ...currentItem,
+                type: "edit",
+                index: `${blockIndex}-${contentIndex}-${position === "top" ? Number(itemIndex) : itemIndex}`,
+              };
+            }
+          }
+          setCurrentItem({ ...newCurrentItem });
+          setBlockList([...newBlockList], "move");
+        }
+        setTimeout(() => {
+          const dragBlockItemElements = document.getElementsByClassName("block-content-drag-label-content");
+          Array.from(dragBlockItemElements).forEach((item) => {
+            item.children[0].style.visibility = "hidden";
+          });
+        }, 30);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const clearEmptyContentStyles = () => {
+    document.querySelectorAll(".block-empty-content").forEach((item) => {
+      item.style.outlineStyle = "";
+    });
+  };
+
+  const clearStyles = () => {
+    clearLabelStyles();
+    clearContentLabelStyles();
+    clearEmptyContentStyles();
+  };
+
+  const onDragLeave = (event) =>
+    setTimeout(() => {
+      switch (event.target.dataset.type) {
+        case "empty-block":
+          event.target.style.border = "";
+          break;
+        case "empty-block-item":
+          event.target.parentNode && (event.target.parentNode.style.outlineStyle = "");
+          break;
+        case "drag-over-column":
+        default:
+          break;
+      }
+    }, 50);
+
+  return (
+    <>
+      <div className="email-editor" onDragOver={onDragOver} onDrop={onDrop} onDragLeave={onDragLeave}>
+        <div className="email-editor-main" onClick={blurCurrentItem}>
+          <LeftSideBar clearStyles={clearStyles} />
+          <Preview clearStyles={clearStyles} />
+          <RightSetting />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Main;

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

@@ -0,0 +1,97 @@
+import { Fragment, useContext, useEffect } from "react";
+import { GlobalContext } from "../../reducers";
+import Column from "../Column";
+import { throttle } from "../../utils/helpers";
+import Header from "../Header";
+import useTranslation from "../../translation";
+
+const Preview = (props) => {
+  const { clearStyles } = props;
+  const { t } = useTranslation();
+  const { previewMode, bodySettings, blockList, setSelectionRange } =
+    useContext(GlobalContext);
+
+  useEffect(() => {
+    const onSelectionChange = throttle(() => {
+      try {
+        const section = window.getSelection();
+        if (section) {
+          // section node !== document
+          const range = section.getRangeAt(0);
+          setSelectionRange(range);
+        }
+      } catch (error) {
+        console.warn(error);
+      }
+    }, 100);
+
+    document.addEventListener("selectionchange", onSelectionChange);
+
+    return () => {
+      document.removeEventListener("selectionchange", onSelectionChange);
+    };
+  }, [setSelectionRange]);
+
+  const preventDefault = (event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <div className="preview-main">
+      <Header />
+      <div className="default-scrollbar" id="preview">
+        <div
+          className="preview-content"
+          style={{
+            width: previewMode === "desktop" ? "100%" : 364,
+            ...bodySettings.styles,
+          }}
+        >
+          <div
+            className="margin-auto"
+            style={{ maxWidth: "100%", width: "100%" }}
+          >
+            {blockList.length ? (
+              <>
+                {blockList.map((block, index) => {
+                  return (
+                    <Fragment key={index}>
+                      <Column
+                        block={block}
+                        blockIndex={index}
+                        clearStyles={clearStyles}
+                      />
+                    </Fragment>
+                  );
+                })}
+                <div
+                  className="relative block-drag-label-content"
+                  data-index={blockList.length}
+                  data-position="bottom"
+                >
+                  <div className="absolute block-move-bottom">
+                    <span className="block-tools-drag_here">
+                      {t("drag_block_here")}
+                    </span>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div
+                data-name="dragEmpty"
+                className="start-to-add"
+                style={{ width: bodySettings.contentWidth, maxWidth: "100%" }}
+                data-type="empty-block"
+                onDragOver={preventDefault}
+              >
+                {t("add_blocks")}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Preview;

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

@@ -0,0 +1,37 @@
+import { useMemo, useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBold } 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 Bold = ({ modifyText, setTextContent }) => {
+  const { selectionRange } = useContext(GlobalContext);
+  const { getSelectionNode } = useSection();
+  const { t } = useTranslation();
+
+  const node = useMemo(() => {
+    if (selectionRange) {
+      return getSelectionNode(selectionRange.commonAncestorContainer, "b");
+    } else {
+      return null;
+    }
+  }, [selectionRange, getSelectionNode]);
+
+  return (
+    <button
+      className={classNames("rich-text-tools-button ", node && "rich-text-tools-button-active")}
+      title={t("tooltip_bold")}
+      onClick={() => {
+        modifyText("bold", false, null);
+        setTextContent();
+      }}
+    >
+      <FontAwesomeIcon icon={faBold} className="rich-text-tools-button-icon" />
+    </button>
+  );
+};
+
+export default Bold;

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

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { Popover } from "antd";
+import { ChromePicker } from "react-color";
+
+const FontColor = ({ modifyText, setTextContent }) => {
+  const [color, setColor] = useState("#000");
+  const [open, setOpen] = useState(false);
+
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+  };
+
+  return (
+    <Popover
+      zIndex={1070}
+      content={
+        <div className="select-none">
+          <ChromePicker
+            color={color}
+            style={{ boxShadow: "none" }}
+            onChange={(color) => {
+              setColor(color.hex);
+              modifyText("ForeColor", false, color.hex);
+            }}
+          />
+        </div>
+      }
+      trigger="click"
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+      <button className="rich_text-font_color">
+        <div className="rich_text-font_color-content" style={{ background: color }}></div>
+      </button>
+    </Popover>
+  );
+};
+
+export default FontColor;

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

@@ -0,0 +1,36 @@
+import { useMemo, useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faListOl } 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 InsertOrderedList = ({ modifyText, setTextContent }) => {
+  const { selectionRange } = useContext(GlobalContext);
+  const { getSelectionNode } = useSection();
+  const { t } = useTranslation();
+
+  const node = useMemo(() => {
+    if (selectionRange) {
+      return getSelectionNode(selectionRange.commonAncestorContainer, "ol");
+    } else {
+      return null;
+    }
+  }, [selectionRange, getSelectionNode]);
+
+  return (
+    <button
+      className={classNames("rich-text-tools-button ", node && "rich-text-tools-button-active")}
+      title={t("tooltip_ordered_list")}
+      onClick={() => {
+        modifyText("insertOrderedList", false, null);
+        setTextContent();
+      }}
+    >
+      <FontAwesomeIcon icon={faListOl} className="rich-text-tools-button-icon" />
+    </button>
+  );
+};
+
+export default InsertOrderedList;

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

@@ -0,0 +1,36 @@
+import { useMemo, useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faListUl } 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 InsertUnorderedList = ({ modifyText, setTextContent }) => {
+  const { selectionRange } = useContext(GlobalContext);
+  const { getSelectionNode } = useSection();
+  const { t } = useTranslation();
+
+  const node = useMemo(() => {
+    if (selectionRange) {
+      return getSelectionNode(selectionRange.commonAncestorContainer, "ul");
+    } else {
+      return null;
+    }
+  }, [selectionRange, getSelectionNode]);
+
+  return (
+    <button
+      className={classNames("rich-text-tools-button ", node && "rich-text-tools-button-active")}
+      title={t("tooltip_unordered_list")}
+      onClick={() => {
+        modifyText("insertUnorderedList", false, null);
+        setTextContent();
+      }}
+    >
+      <FontAwesomeIcon icon={faListUl} className="rich-text-tools-button-icon" />
+    </button>
+  );
+};
+
+export default InsertUnorderedList;

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

@@ -0,0 +1,36 @@
+import { useMemo, useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faItalic } 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 Italic = ({ modifyText, setTextContent }) => {
+  const { selectionRange } = useContext(GlobalContext);
+  const { getSelectionNode } = useSection();
+  const { t } = useTranslation();
+
+  const node = useMemo(() => {
+    if (selectionRange) {
+      return getSelectionNode(selectionRange.commonAncestorContainer, "i");
+    } else {
+      return null;
+    }
+  }, [selectionRange, getSelectionNode]);
+
+  return (
+    <button
+      className={classNames("rich-text-tools-button ", node && "rich-text-tools-button-active")}
+      title={t("tooltip_italic")}
+      onClick={() => {
+        modifyText("italic", false, null);
+        setTextContent();
+      }}
+    >
+      <FontAwesomeIcon icon={faItalic} className="rich-text-tools-button-icon" />
+    </button>
+  );
+};
+
+export default Italic;

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

@@ -0,0 +1,99 @@
+import { useMemo, useContext, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
+import useSection from "../../utils/useSection";
+import classNames from "../../utils/classNames";
+import { GlobalContext } from "../../reducers";
+import { Modal, Input } from "antd";
+import useTranslation from "../../translation";
+
+const Link = ({ modifyText, setTextContent }) => {
+  const { selectionRange } = useContext(GlobalContext);
+  const { t } = useTranslation();
+  const { getSelectionNode } = useSection();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [inputConfig, setInputConfig] = useState({
+    value: "",
+    range: null,
+  });
+
+  const node = useMemo(() => {
+    if (selectionRange) {
+      return getSelectionNode(selectionRange.commonAncestorContainer, "a");
+    } else {
+      return null;
+    }
+  }, [selectionRange, getSelectionNode]);
+
+  const addLink = () => {
+    const { range, value, rangeIsLink } = inputConfig;
+    if (rangeIsLink) {
+      range.commonAncestorContainer.parentNode.href = value;
+    } else {
+      let link = document.createElement("a");
+      link.target = "_black";
+      link.href = value;
+      // Wrap selected text with <a> tag
+      range.surroundContents(link);
+    }
+
+    setTextContent();
+    closeModal();
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setInputConfig({ value: "", range: null });
+  };
+
+  const addLinkTag = () => {
+    let selection = window.getSelection();
+    let range = selection.getRangeAt(0);
+    const rangeParentNode = range.commonAncestorContainer.parentNode;
+    const rangeIsLink = rangeParentNode.nodeName === "A";
+    const newInputConfig = { ...inputConfig, range };
+    if (rangeIsLink) {
+      newInputConfig.rangeIsLink = true;
+      newInputConfig.value = rangeParentNode.href.replace("https://", "");
+    }
+    setInputConfig(newInputConfig);
+    setIsModalOpen(true);
+    setTextContent();
+  };
+
+  return (
+    <>
+      <button className={classNames("rich-text-tools-button ", node && "rich-text-tools-button-active")} title={t("tooltip_link")} onClick={addLinkTag}>
+        <FontAwesomeIcon icon={faLink} className="rich-text-tools-button-icon" />
+      </button>
+      <button
+        className={classNames("rich-text-tools-button")}
+        title={t("tooltip_remove_link")}
+        onClick={() => {
+          modifyText("unlink", false, null);
+          setTextContent();
+        }}
+      >
+        <FontAwesomeIcon icon={faUnlink} className="rich-text-tools-button-icon" />
+      </button>
+      <Modal
+        title={t("add_link_modal_title")}
+        open={isModalOpen}
+        zIndex={1100}
+        onOk={addLink}
+        onCancel={closeModal}
+        okText={t("confirm")}
+        cancelText={t("cancel")}
+        wrapClassName="ee-modal-dark"
+      >
+        <Input
+          addonBefore="https://"
+          value={inputConfig.value.replace("https://", "")}
+          onChange={(event) => setInputConfig({ ...inputConfig, value: "https://" + event.target.value })}
+        />
+      </Modal>
+    </>
+  );
+};
+
+export default Link;