@markopolo_ai_inc/markopolo-email-editor 1.0.3

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

@@ -0,0 +1,243 @@
+import { useState, useContext, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faDesktop,
+  faMobileAlt,
+  faUndo,
+  faRedo,
+  faEye,
+  faTabletAlt,
+  faTimes,
+} from "@fortawesome/free-solid-svg-icons";
+import classNames from "../../utils/classNames";
+// import { deepClone } from "../../utils/helpers";
+import { GlobalContext } from "../../reducers";
+import { Drawer } from "antd";
+import dataToHtml from "../../utils/dataToHTML";
+import { deepClone } from "../../utils/helpers";
+
+const Header = () => {
+  const {
+    previewMode,
+    setPreviewMode,
+    bodySettings,
+    blockList,
+    actionType,
+    setBlockList,
+    setBodySettings,
+  } = useContext(GlobalContext);
+  const [modalPreview, setModalPreview] = useState(previewMode);
+  const [blockListHistory, setBlockListHistory] = useState({
+    histories: [],
+    index: 0,
+  });
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
+  const { histories, index } = blockListHistory;
+
+  useEffect(() => {
+    // Do not add to history on first render
+    const newBlockList = deepClone(blockList);
+    const newBodySettings = deepClone(bodySettings);
+    if (actionType === "firstRender") {
+      setBlockListHistory({
+        histories: [
+          {
+            blockList: newBlockList,
+            bodySettings: newBodySettings,
+          },
+        ],
+        index: 0,
+      });
+    } else if (!actionType.includes("set_history")) {
+      let newHistories = deepClone(histories);
+
+      newHistories = newHistories.slice(0, index + 1);
+      newHistories.push({
+        blockList: newBlockList,
+        bodySettings: newBodySettings,
+      });
+
+      setBlockListHistory({
+        histories: newHistories,
+        index: index + 1,
+      });
+    }
+  // Intentionally omit actionType, histories, index to avoid effect loop on history update
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [blockList, bodySettings]);
+
+  const closeModal = () => {
+    setIsPreviewModalOpen(false);
+  };
+
+  const openModal = () => {
+    setIsPreviewModalOpen(true);
+  };
+
+  const prevHistory = () => {
+    if (histories[index - 1]) {
+      const newHistories = deepClone(histories[index - 1]);
+      setBlockListHistory({ ...blockListHistory, index: index - 1 });
+      setBlockList(newHistories.blockList, `set_history_${index - 1}`);
+      setBodySettings(newHistories.bodySettings);
+    }
+  };
+
+  const nextHistory = () => {
+    if (histories[index + 1]) {
+      const newHistories = deepClone(histories[index + 1]);
+      setBlockListHistory({ ...blockListHistory, index: index + 1 });
+      setBlockList(newHistories.blockList, `set_history_${index + 1}`);
+      setBodySettings(newHistories.bodySettings);
+    }
+  };
+
+  return (
+    <>
+      <div className="header">
+        <div className="header-box">
+          <FontAwesomeIcon
+            icon={faEye}
+            onClick={openModal}
+            className={classNames(
+              "header-icon-small",
+              isPreviewModalOpen === "desktop" && "header-icon_active",
+              isPreviewModalOpen !== "desktop" && "header-icon_disabled"
+            )}
+          />
+          <FontAwesomeIcon
+            onClick={() => setPreviewMode("desktop")}
+            icon={faDesktop}
+            className={classNames(
+              "header-icon-small",
+              previewMode === "desktop" && "header-icon_active",
+              previewMode !== "desktop" && "header-icon_disabled"
+            )}
+          />
+          <FontAwesomeIcon
+            icon={faMobileAlt}
+            onClick={() => setPreviewMode("mobile")}
+            className={classNames(
+              "header-icon-small",
+              previewMode === "mobile" && "header-icon_active",
+              previewMode !== "mobile" && "header-icon_disabled"
+            )}
+          />
+        </div>
+        <div className="header-box text-center"></div>
+        <div className="header-box text-right">
+          <FontAwesomeIcon
+            onClick={prevHistory}
+            icon={faUndo}
+            className={classNames(
+              "header-icon-history",
+              histories[index - 1] && "header-icon-history_active",
+              !histories[index - 1] && "header-icon-history_disabled"
+            )}
+          />
+          <FontAwesomeIcon
+            onClick={nextHistory}
+            icon={faRedo}
+            className={classNames(
+              "header-icon-history",
+              histories[index + 1] && "header-icon-history_active",
+              !histories[index + 1] && "header-icon-history_disabled"
+            )}
+          />
+        </div>
+      </div>
+
+      <Drawer
+        className="ee-preview-drawer"
+        title={
+          <div className="flex justify-between">
+            <div className="header-box text-center"></div>
+            <div className="header-box text-center">
+              <FontAwesomeIcon
+                onClick={() => {
+                  setModalPreview("desktop");
+                  setPreviewMode("desktop");
+                }}
+                icon={faDesktop}
+                className={classNames(
+                  "header-icon",
+                  modalPreview === "desktop" && "header-icon_active",
+                  modalPreview !== "desktop" && "header-icon_disabled"
+                )}
+              />
+              <FontAwesomeIcon
+                icon={faTabletAlt}
+                onClick={() => {
+                  setModalPreview("tablet");
+                }}
+                className={classNames(
+                  "header-icon",
+                  modalPreview === "tablet" && "header-icon_active",
+                  modalPreview !== "tablet" && "header-icon_disabled"
+                )}
+              />
+              <FontAwesomeIcon
+                icon={faMobileAlt}
+                onClick={() => {
+                  setModalPreview("mobile");
+                  setPreviewMode("mobile");
+                }}
+                className={classNames(
+                  "header-icon",
+                  modalPreview === "mobile" && "header-icon_active",
+                  modalPreview !== "mobile" && "header-icon_disabled"
+                )}
+              />
+            </div>
+            <div className="header-box text-right">
+              <div onClick={closeModal} className="header-drawer-close">
+                <FontAwesomeIcon icon={faTimes} className="text-sm" />
+              </div>
+            </div>
+          </div>
+        }
+        open={isPreviewModalOpen}
+        zIndex={1100}
+        closable={false}
+        onCancel={closeModal}
+        footer={false}
+        width="100vw"
+        style={{
+          top: 0,
+          bottom: 0,
+          padding: 0,
+          height: "100%",
+        }}
+      >
+        <div
+          className="header-drawer-body"
+          style={{
+            width:
+              (modalPreview === "desktop" && "100%") ||
+              (modalPreview === "tablet" && 768) ||
+              (modalPreview === "mobile" && 364),
+          }}
+        >
+          <div className="header-drawer-head">
+            <div className="header-drawer-head-item"></div>
+            <div className="header-drawer-head-item"></div>
+            <div className="header-drawer-head-item"></div>
+          </div>
+          <div className="header-drawer-content">
+            <iframe
+              src={
+                "data:text/html," +
+                encodeURIComponent(dataToHtml({ bodySettings, blockList }))
+              }
+              title="preview"
+              scrolling="no"
+              className="header-drawer-iframe"
+            ></iframe>
+          </div>
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,253 @@
+import { useContext } from "react";
+import { motion } from "framer-motion";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  faColumns,
+  faMinusSquare,
+  faHeading,
+  faFont,
+  faGripLines,
+  faImage,
+  faShareAltSquare,
+  faArrowsAltV,
+  faBars,
+} from "@fortawesome/free-solid-svg-icons";
+import { GlobalContext } from "../../reducers";
+import { deepClone } from "../../utils/helpers";
+
+import useDataSource from "../../configs/useDataSource";
+
+const LeftSideBar = (props) => {
+  const { clearStyles } = props;
+  const { setCurrentItem, setIsDragStart, blockList, setActionType } =
+    useContext(GlobalContext);
+  const { blockConfigsList } = useDataSource();
+
+  // const sidebarTabsList = [
+  //   { name: t("blocks"), icon: faCubes, key: "blocks" },
+  //   { name: t("photos"), icon: faImages, key: "photos" },
+  // ];
+  // const [photos, setPhotos] = useState({
+  //   list: null,
+  //   pagination: 1,
+  //   query: "",
+  //   isLoading: true,
+  //   scrollLoading: false,
+  // });
+
+  const icons = {
+    column: faColumns,
+    text: faFont,
+    heading: faHeading,
+    button: faMinusSquare,
+    divider: faGripLines,
+    spacer: faArrowsAltV,
+    menu: faBars,
+    image: faImage,
+    social_link: faShareAltSquare,
+  };
+
+  const dragEnd = (event) => {
+    event.target.style.border = "";
+    event.target.children[0] &&
+      event.target.children[0].classList.remove("sidebar-block-move");
+    setTimeout(() => {
+      setIsDragStart(false);
+      clearStyles();
+    }, 50);
+  };
+
+  const dragStart = (item) => (event) => {
+    setCurrentItem({
+      data: deepClone(item),
+      type: "add",
+      index: blockList.length + 1,
+    });
+    setIsDragStart(true);
+    event.target.style.border = "1px dashed #ccc";
+    event.target.children[0] &&
+      event.target.children[0].classList.add("sidebar-block-move");
+    setActionType("add");
+  };
+
+  const blocksElement = () => {
+    return (
+      <motion.div
+        className="side-bar-blocks"
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 10 }}
+        transition={{ duration: 0.3 }}
+        key="blocks"
+      >
+        <div className="side-bar-blocks-container">
+          {blockConfigsList.map((item) => {
+            return (
+              <div
+                className="side-bar-blocks-item"
+                data-block_type="header"
+                draggable="true"
+                key={item.key}
+                onDragEnd={dragEnd}
+                onDragStart={dragStart(item)}
+              >
+                <div className="sidebar-block">
+                  <FontAwesomeIcon
+                    icon={icons[item.key]}
+                    className="sidebar-block-icon"
+                  />
+                  <div className="sidebar-block-text">{item.name}</div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </motion.div>
+    );
+  };
+
+  // Uncomment to restore Pexels photos tab.
+  // const searchPhotos = (value) => {
+  //   setPhotos({ ...photos, list: [], isLoading: true });
+  //   fetchPhotos(1, "40", value).then((response) =>
+  //     setPhotos({
+  //       ...photos,
+  //       list: response.photos,
+  //       isLoading: false,
+  //       query: value,
+  //       pagination: 1,
+  //     })
+  //   );
+  // };
+  // const photosElement = () => {
+  //   const imageBlock = blockConfigsList.find(({ key }) => key === "image");
+  //   let leftHeight = 0;
+  //   let rightHeight = 0;
+  //   let leftPhotos = [];
+  //   let rightPhotos = [];
+  //   if (!photos.list) {
+  //     fetchPhotos(photos.pagination, "20", photos.query).then((response) =>
+  //       setPhotos({
+  //         ...photos,
+  //         list: response.photos,
+  //         isLoading: false,
+  //         scrollLoading: false,
+  //       })
+  //     );
+  //   } else {
+  //     photos.list.forEach((item) => {
+  //       const { height, width } = item;
+  //       const imageHeight = (200 / width) * height;
+  //       if (leftHeight <= rightHeight) {
+  //         leftPhotos.push(item);
+  //         leftHeight += imageHeight;
+  //       } else {
+  //         rightPhotos.push(item);
+  //         rightHeight += imageHeight;
+  //       }
+  //     });
+  //   }
+  //   const openPexels = () => window.open("https://www.pexels.com");
+  //   return (
+  //     <motion.div
+  //       className="photo-container"
+  //       initial={{ opacity: 0, y: -10 }}
+  //       animate={{ opacity: 1, y: 0 }}
+  //       exit={{ opacity: 0, y: 10 }}
+  //       transition={{ duration: 0.3 }}
+  //       key="photos"
+  //     >
+  //       <div className="margin-bottom-12">
+  //         <Input.Search onSearch={searchPhotos} loading={photos.isLoading || photos.scrollLoading} />
+  //         <div className="pexels-link" onClick={openPexels}>{t("powered_by_pexels")}</div>
+  //       </div>
+  //       <div className="photos-body">
+  //         <div className="photos-container default-scrollbar" style={{ overflowAnchor: "none" }}
+  //           onScroll={(event) => {
+  //             let scrollBottom = event.target.scrollHeight - event.target.offsetHeight - event.target.scrollTop;
+  //             if (scrollBottom < 20 && !photos.scrollLoading) {
+  //               setPhotos({ ...photos, scrollLoading: true });
+  //               setTimeout(async () => {
+  //                 const response = await fetchPhotos(photos.pagination + 1, "20", photos.query);
+  //                 event.target.scrollTop = event.target.scrollTop - 50;
+  //                 setPhotos({
+  //                   ...photos,
+  //                   pagination: photos.pagination + 1,
+  //                   list: photos.list.concat(response.photos),
+  //                   scrollLoading: false,
+  //                   isLoading: false,
+  //                 });
+  //               }, 1000);
+  //             }
+  //           }}
+  //         >
+  //           <div>
+  //             {leftPhotos.map((image, index) => (
+  //               <motion.div key={index} initial={{ y: -index * 100, opacity: 0 }} animate={{ y: 0, opacity: 1 }}
+  //                 draggable onDragEnd={dragEnd}
+  //                 onDragStart={dragStart({ ...imageBlock, src: image.src.large, alt: image.alt })}
+  //                 className="photo-item">
+  //                 <img src={image.src.large} alt={image.alt} className="width-full" />
+  //               </motion.div>
+  //             ))}
+  //           </div>
+  //           <div>
+  //             {rightPhotos.map((image, index) => (
+  //               <motion.div key={index} initial={{ y: -index * 100, opacity: 0 }} animate={{ y: 0, opacity: 1 }}
+  //                 draggable onDragEnd={dragEnd}
+  //                 onDragStart={dragStart({ ...imageBlock, src: image.src.large, alt: image.alt })}
+  //                 className="photo-item">
+  //                 <img src={image.src.large} alt={image.alt} className="width-full" />
+  //               </motion.div>
+  //             ))}
+  //           </div>
+  //         </div>
+  //         {photos.scrollLoading && <div className="scroll-loading-context">{t("loading")}</div>}
+  //         {photos.isLoading && <div className="loading-spinner"><Spin /></div>}
+  //       </div>
+  //     </motion.div>
+  //   );
+  // };
+
+  return (
+    <div className="side-bar">
+      {/* Tabs bar hidden: always show blocks. Uncomment to restore Blocks/Photos tabs.
+      <div className="side-bar-tabs">
+        {sidebarTabsList.map((item) => {
+          const { key, icon, name } = item;
+          return (
+            <div
+              onClick={() => {
+                if (key !== currentSideBarKey) {
+                  setCurrentSideBarKey(key);
+                  setPhotos({ list: null, pagination: 1, isLoading: true, scrollLoading: false, query: "" });
+                }
+              }}
+              className={classNames(
+                currentSideBarKey === key ? "side-bar-tab-item-active" : "side-bar-tab-item",
+                "side-bar-item-default"
+              )}
+              key={key}
+            >
+              <FontAwesomeIcon icon={icon} className="text-18" />
+              <div className="side-bar-icon-title">{name}</div>
+            </div>
+          );
+        })}
+      </div>
+      */}
+      <div className="side-bar-content">
+        {/* Always show blocks; tabs removed. Uncomment below to restore tab switching.
+        <AnimatePresence mode="wait">
+          {currentSideBarKey === "blocks" && blocksElement()}
+          {currentSideBarKey === "photos" && photosElement()}
+        </AnimatePresence>
+        */}
+        {blocksElement()}
+      </div>
+    </div>
+  );
+};
+
+export default LeftSideBar;