@markopolo_ai_inc/markopolo-email-editor 1.0.3

package/src/components/EmailEditor/components/BlockItems/ButtonBlock.js

@@ -0,0 +1,25 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+import RichTextLayout from "../RichText/RichTextLayout";
+import { useMemo } from "react";
+
+const ButtonBlock = (props) => {
+  const { blockItem, index } = props;
+  const { currentItem, previewMode } = useContext(GlobalContext);
+
+  // TODO: border radius not yet implemented
+  const isEdit = currentItem && currentItem.index === index;
+  const styles = previewMode === "desktop" ? blockItem.styles.desktop : { ...blockItem.styles.desktop, ...blockItem.styles.mobile };
+
+  const contentStyles =
+    previewMode === "desktop" ? blockItem.contentStyles?.desktop : { ...blockItem.contentStyles?.desktop, ...blockItem.contentStyles?.mobile };
+
+  const richTextElement = useMemo(() => <RichTextLayout {...props} />, [props]);
+  return (
+    <div style={{ ...contentStyles }}>
+      {isEdit ? richTextElement : <div style={{ ...styles }} dangerouslySetInnerHTML={{ __html: blockItem.text }}></div>}
+    </div>
+  );
+};
+
+export default ButtonBlock;

package/src/components/EmailEditor/components/BlockItems/DividerBlock.js

@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+
+const DividerBlock = ({ blockItem }) => {
+  const { previewMode } = useContext(GlobalContext);
+  const styles = previewMode === "desktop" ? blockItem.styles.desktop : { ...blockItem.styles.desktop, ...blockItem.styles.mobile };
+  const contentStyles =
+    previewMode === "desktop" ? blockItem.contentStyles?.desktop : { ...blockItem.contentStyles?.desktop, ...blockItem.contentStyles?.mobile };
+
+  return (
+    <div className="relative">
+      <div style={{ ...contentStyles }}>
+        <div style={{ ...styles }}></div>
+      </div>
+    </div>
+  );
+};
+
+export default DividerBlock;

package/src/components/EmailEditor/components/BlockItems/HeadingBlock.js

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+import RichTextLayout from "../RichText/RichTextLayout";
+import { useMemo } from "react";
+
+const HeadingBlock = (props) => {
+  const { index, blockItem } = props;
+  const { currentItem, previewMode } = useContext(GlobalContext);
+  const styles = previewMode === "desktop" ? blockItem.styles.desktop : { ...blockItem.styles.desktop, ...blockItem.styles.mobile };
+  const isEdit = currentItem && currentItem.index === index;
+  const richTextElement = useMemo(() => <RichTextLayout {...props} />, [props]);
+
+  return isEdit ? richTextElement : <div style={{ ...styles }} dangerouslySetInnerHTML={{ __html: blockItem.text }}></div>;
+};
+
+export default HeadingBlock;

package/src/components/EmailEditor/components/BlockItems/ImageBlock.js

@@ -0,0 +1,28 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faImage } from "@fortawesome/free-solid-svg-icons";
+
+const ImageBlock = ({ blockItem }) => {
+  const { src, alt } = blockItem;
+  const { previewMode } = useContext(GlobalContext);
+  const styles = previewMode === "desktop" ? blockItem.styles.desktop : { ...blockItem.styles.desktop, ...blockItem.styles.mobile };
+  const contentStyles =
+    previewMode === "desktop" ? blockItem.contentStyles?.desktop : { ...blockItem.contentStyles?.desktop, ...blockItem.contentStyles?.mobile };
+
+  return (
+    <div className="relative">
+      <div style={{ ...contentStyles }}>
+        {src ? (
+          <img src={src} style={styles} alt={alt} className="inline-block" />
+        ) : (
+          <div className="empty-image" style={{ ...styles, width: styles.width === "auto" ? "100%" : styles.width }}>
+            <FontAwesomeIcon icon={faImage} className="empty-image-icon" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ImageBlock;

package/src/components/EmailEditor/components/BlockItems/MenuBlock.js

@@ -0,0 +1,52 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+
+const MenuBlock = ({ blockItem }) => {
+  const { previewMode } = useContext(GlobalContext);
+  const { list = [], separator = " | " } = blockItem;
+  const styles = previewMode === "desktop" ? blockItem.styles.desktop : { ...blockItem.styles.desktop, ...blockItem.styles.mobile };
+  const contentStyles =
+    previewMode === "desktop" ? blockItem.contentStyles?.desktop : { ...blockItem.contentStyles?.desktop, ...blockItem.contentStyles?.mobile };
+
+  const linkStyle = {
+    fontSize: styles.fontSize != null ? `${styles.fontSize}px` : "14px",
+    fontFamily: styles.fontFamily || "sans-serif",
+    color: styles.linkColor || styles.color || "#2faade",
+    fontWeight: styles.fontWeight || "normal",
+    letterSpacing: styles.letterSpacing != null ? `${styles.letterSpacing}px` : "0px",
+    textDecoration: "none",
+    paddingLeft: styles.paddingLeft != null ? `${styles.paddingLeft}px` : "8px",
+    paddingRight: styles.paddingRight != null ? `${styles.paddingRight}px` : "8px",
+    paddingTop: styles.paddingTop != null ? `${styles.paddingTop}px` : "4px",
+    paddingBottom: styles.paddingBottom != null ? `${styles.paddingBottom}px` : "4px",
+  };
+
+  const separatorStyle = {
+    fontSize: styles.fontSize != null ? `${styles.fontSize}px` : "14px",
+    color: styles.color || "#333",
+    paddingLeft: 4,
+    paddingRight: 4,
+  };
+
+  return (
+    <div className="relative">
+      <div style={{ ...contentStyles, display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: contentStyles.textAlign || "center" }}>
+        {list.map((item, index) => (
+          <span key={index} style={{ display: "inline-flex", alignItems: "center" }}>
+            {index > 0 && <span style={separatorStyle}>{separator}</span>}
+            <a
+              href={item.url ? (item.url.startsWith("http") ? item.url : `https://${item.url}`) : "#"}
+              target={item.target === "_blank" ? "_blank" : "_self"}
+              rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
+              style={linkStyle}
+            >
+              {item.label || "Link"}
+            </a>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MenuBlock;

package/src/components/EmailEditor/components/BlockItems/SocialLinkBlocks.js

@@ -0,0 +1,26 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+
+const SocialLinkBlocks = ({ blockItem }) => {
+  const { previewMode } = useContext(GlobalContext);
+  const { list, imageWidth } = blockItem;
+  const styles = previewMode === "desktop" ? blockItem.styles.desktop : { ...blockItem.styles.desktop, ...blockItem.styles.mobile };
+  const contentStyles =
+    previewMode === "desktop" ? blockItem.contentStyles?.desktop : { ...blockItem.contentStyles?.desktop, ...blockItem.contentStyles?.mobile };
+  return (
+    <div className="relative">
+      <div style={contentStyles}>
+        {list.map((socialLinkItem, index) => {
+          const { image, title } = socialLinkItem;
+          return (
+            <div key={index} style={{ ...styles, display: "inline-block" }}>
+              <img src={image} alt={title} style={{ width: imageWidth }} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default SocialLinkBlocks;

package/src/components/EmailEditor/components/BlockItems/SpacerBlock.js

@@ -0,0 +1,23 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+
+const SpacerBlock = ({ blockItem }) => {
+  const { previewMode } = useContext(GlobalContext);
+  const styles = previewMode === "desktop" ? blockItem.styles.desktop : { ...blockItem.styles.desktop, ...blockItem.styles.mobile };
+  const contentStyles =
+    previewMode === "desktop" ? blockItem.contentStyles?.desktop : { ...blockItem.contentStyles?.desktop, ...blockItem.contentStyles?.mobile };
+
+  return (
+    <div className="relative" style={{ ...contentStyles }}>
+      <div
+        style={{
+          width: "100%",
+          height: typeof styles.height === "number" ? `${styles.height}px` : styles.height || "16px",
+          display: styles.display || "block",
+        }}
+      />
+    </div>
+  );
+};
+
+export default SpacerBlock;

package/src/components/EmailEditor/components/BlockItems/TextBlock.js

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { GlobalContext } from "../../reducers";
+import RichTextLayout from "../RichText/RichTextLayout";
+import { useMemo } from "react";
+
+const TextBlock = (props) => {
+  const { index, blockItem } = props;
+  const { currentItem, previewMode } = useContext(GlobalContext);
+  const styles = previewMode === "desktop" ? blockItem.styles.desktop : { ...blockItem.styles.desktop, ...blockItem.styles.mobile };
+  const isEdit = currentItem && currentItem.index === index;
+  const richTextElement = useMemo(() => <RichTextLayout {...props} />, [props]);
+
+  return isEdit ? richTextElement : <div style={{ ...styles }} dangerouslySetInnerHTML={{ __html: blockItem.text }}></div>;
+};
+
+export default TextBlock;

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

@@ -0,0 +1,25 @@
+import TextBlock from "./TextBlock";
+import HeadingBlock from "./HeadingBlock";
+import ButtonBlock from "./ButtonBlock";
+import DividerBlock from "./DividerBlock";
+import SpacerBlock from "./SpacerBlock";
+import MenuBlock from "./MenuBlock";
+import ImageBlock from "./ImageBlock";
+import SocialLinkBlocks from "./SocialLinkBlocks";
+
+const BlockItems = ({ blockItem, index }) => {
+  return (
+    <>
+      {blockItem && blockItem.key === "text" && <TextBlock blockItem={blockItem} index={index} />}
+      {blockItem && blockItem.key === "heading" && <HeadingBlock blockItem={blockItem} index={index} />}
+      {blockItem && blockItem.key === "button" && <ButtonBlock blockItem={blockItem} index={index} />}
+      {blockItem && blockItem.key === "divider" && <DividerBlock blockItem={blockItem} index={index} />}
+      {blockItem && blockItem.key === "spacer" && <SpacerBlock blockItem={blockItem} index={index} />}
+      {blockItem && blockItem.key === "menu" && <MenuBlock blockItem={blockItem} index={index} />}
+      {blockItem && blockItem.key === "image" && <ImageBlock blockItem={blockItem} index={index} />}
+      {blockItem && blockItem.key === "social_link" && <SocialLinkBlocks blockItem={blockItem} index={index} />}
+    </>
+  );
+};
+
+export default BlockItems;

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

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { Popover } from "antd";
+import { ChromePicker } from "react-color";
+
+const ColorPicker = ({ color, setColor }) => {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  return (
+    <Popover
+      zIndex={1070}
+      getPopupContainer={() => document.querySelector(".right-settings") || document.body}
+      content={
+        <div className="select-none ee-color-picker-popover">
+          <ChromePicker color={color} style={{ boxShadow: "none" }} onChange={setColor} />
+        </div>
+      }
+      trigger="click"
+      open={popoverOpen}
+      onOpenChange={setPopoverOpen}
+    >
+      <button className="color-picker-button" style={{ background: color }}></button>
+    </Popover>
+  );
+};
+
+export default ColorPicker;

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

@@ -0,0 +1,253 @@
+import { Fragment, useContext } from "react";
+import { GlobalContext } from "../../reducers";
+import classNames from "../../utils/classNames";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowsAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { deepClone } from "../../utils/helpers";
+import BlockItems from "../BlockItems";
+import useTranslation from "../../translation";
+
+const Column = (props) => {
+  const { block, blockIndex, clearStyles } = props;
+  const { t } = useTranslation();
+  const { previewMode, blockList, currentItem, setBlockList, setCurrentItem, setIsDragStart, isDragStart, bodySettings, setActionType } =
+    useContext(GlobalContext);
+
+  let columnStyles = previewMode === "desktop" ? block.styles.desktop : { ...block.styles.desktop, ...block.styles.mobile };
+  const { contentBackground, ...newStyles } = columnStyles;
+
+  const deleteBlock = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const newBlockList = deepClone(blockList);
+    newBlockList.splice(blockIndex, 1);
+    setBlockList(newBlockList, "delete");
+    setCurrentItem(null);
+  };
+
+  const deleteBlockItem = (index) => (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const newBlockList = deepClone(blockList);
+    const indexArr = index.split("-");
+    const blockIndex = indexArr[0];
+    const contentIndex = indexArr[1];
+    const itemIndex = indexArr[2];
+    const item = newBlockList[blockIndex].children[contentIndex].children;
+    item.splice(itemIndex, 1);
+    if (item.length === 0) {
+      item.push({
+        name: t("drag_block_here"),
+        key: "empty",
+        width: "100%",
+        styles: {
+          desktop: {
+            backgroundColor: "transparent",
+            paddingTop: 0,
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingBottom: 0,
+          },
+          mobile: {},
+        },
+      });
+    }
+    setBlockList(newBlockList, "delete");
+    setCurrentItem(null);
+  };
+
+  const dragStart = () => {
+    setIsDragStart(true);
+    setCurrentItem({ ...currentItem, type: "move" });
+    setActionType("move");
+  };
+
+  const dragEnd = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    // Parent onDrop/onDragOver use 30ms delay; delay 50ms here so styles are cleared after blockList/currentItem update
+    setTimeout(() => {
+      event.target.style.border = "";
+      event.target.children[0] && event.target.children[0].classList.remove("sidebar-block-move");
+      setIsDragStart(false);
+      clearStyles();
+    }, 50);
+  };
+
+  const blockItemElement = (item, index) => {
+    const nextIndex = index
+      .split("-")
+      .map((item, itemIndex) => {
+        if (itemIndex === 2) {
+          return Number(item) + 1;
+        } else {
+          return item;
+        }
+      })
+      .join("-");
+    return (
+      <>
+        {item.key === "empty" ? (
+          <div className="block-empty-content p-4 h-32 relative width-full">
+            {isDragStart && currentItem && currentItem.data.key !== "column" && (
+              <div className="block-empty-content-tools" onDragOver={preventDefault} data-index={index} data-type="empty-block-item">
+                {t("drag_block_here")}
+              </div>
+            )}
+            {item.name}
+          </div>
+        ) : (
+          <>
+            <div className="relative block-content-drag-label-content" data-index={index} data-type="block-item">
+              <div className="absolute block-move-top">
+                <span className="block-tools-drag_here">{t("drag_block_here")}</span>
+              </div>
+            </div>
+            <div className="block-item">
+              <div className={classNames("relative", currentItem && currentItem.index === index && "block-item-focus")}>
+                <div
+                  className="block-item-tools"
+                  onDragOver={preventDefault}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setCurrentItem({ data: item, type: "edit", index });
+                    setActionType("edit");
+                  }}
+                >
+                  {isDragStart && currentItem && currentItem.data.key !== "column" && (
+                    <>
+                      <div
+                        className="block-move-content-top"
+                        data-name="dragTools"
+                        data-position="top"
+                        data-index={index}
+                        data-type="block-item-move"
+                      ></div>
+                      <div
+                        className="block-move-content-bottom"
+                        data-name="dragTools"
+                        data-position="bottom"
+                        data-index={nextIndex}
+                        data-type="block-item-move"
+                      ></div>
+                    </>
+                  )}
+                  <span className="absolute block-item-delete" onClick={deleteBlockItem(index)}>
+                    <FontAwesomeIcon icon={faTrash} />
+                  </span>
+                  <span
+                    className="absolute block-item-move current-move-block-arrows"
+                    draggable="true"
+                    onDragEnd={dragEnd}
+                    data-index={index}
+                    onDragStart={dragStart}
+                  >
+                    <FontAwesomeIcon icon={faArrowsAlt} />
+                  </span>
+                </div>
+                <BlockItems blockItem={item} index={index} />
+              </div>
+            </div>
+          </>
+        )}
+      </>
+    );
+  };
+
+  const preventDefault = (event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <>
+      <div className="relative block-drag-label-content" data-index={blockIndex} data-position="top">
+        <div className="absolute block-move-top">
+          <span className="block-tools-drag_here">{t("drag_block_here")}</span>
+        </div>
+        <div
+          className={classNames(
+            "relative block",
+            currentItem && currentItem.index === blockIndex && "block-focus",
+            previewMode === "mobile" && "mobile-block-focus"
+          )}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setCurrentItem({ data: block, type: "edit", index: blockIndex });
+          }}
+        >
+          <div className="hover-visible">
+            <span className="absolute block-delete" onClick={deleteBlock}>
+              <FontAwesomeIcon icon={faTrash} />
+            </span>
+            <span
+              className="absolute block-move current-move-block-arrows"
+              draggable="true"
+              onDragEnd={dragEnd}
+              data-index={blockIndex}
+              onDragStart={dragStart}
+            >
+              <FontAwesomeIcon icon={faArrowsAlt} />
+            </span>
+          </div>
+
+          <div className="width-full height-full absolute" onDragOver={preventDefault}>
+            {isDragStart && currentItem.data.key === "column" && (
+              <>
+                <div
+                  className="block-move-content-top"
+                  data-name="dragTools"
+                  data-type="drag-over-column"
+                  data-position="top"
+                  data-index={blockIndex}
+                ></div>
+                <div
+                  className="block-move-content-bottom"
+                  data-name="dragTools"
+                  data-type="drag-over-column"
+                  data-position="bottom"
+                  data-index={blockIndex + 1}
+                ></div>
+              </>
+            )}
+          </div>
+          <div className="column margin-auto" style={{ ...newStyles, maxWidth: "100%" }}>
+            <div className="block-content" style={{ background: contentBackground, width: bodySettings.contentWidth }} data-index={blockIndex}>
+              {block.children.map((content, index) => {
+                let contentStyles = previewMode === "desktop" ? content.styles.desktop : { ...content.styles.desktop, ...content.styles.mobile };
+                return (
+                  <Fragment key={index}>
+                    <div
+                      id={`block-content-${blockIndex}-${index}`}
+                      style={{ ...contentStyles, width: previewMode === "mobile" ? "100%" : content.width }}
+                    >
+                      {content.children.map((item, itemIndex) => {
+                        const blockItemIndex = `${blockIndex}-${index}-${itemIndex}`;
+                        const isLastKid = itemIndex === content.children.length - 1 && item.key !== "empty";
+                        return (
+                          <Fragment key={itemIndex}>
+                            {blockItemElement(item, blockItemIndex)}
+                            {isLastKid && (
+                              <div className="relative block-content-drag-label-content" data-index={`${blockIndex}-${index}-${itemIndex + 1}`}>
+                                <div className="absolute block-move-bottom">
+                                  <span className="block-tools-drag_here">{t("drag_block_here")}</span>
+                                </div>
+                              </div>
+                            )}
+                          </Fragment>
+                        );
+                      })}
+                    </div>
+                  </Fragment>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Column;