@flozy/editor 3.1.8 → 3.2.0

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -18,6 +18,12 @@ const usePopupStyle = theme => ({
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background
     },
+    "&.textSettings": {
+      '@media only screen and (max-width: 600px)': {
+        margin: "4px !important",
+        marginBottom: "54px !important"
+      }
+    },
     "& .MuiTypography-root": {
       color: theme?.palette?.editor?.textColor
     },
@@ -45,6 +51,12 @@ const usePopupStyle = theme => ({
       "& button": {
         color: theme?.palette?.editor?.textColor
       }
+    },
+    "@media only screen and (max-width: 599px)": {
+      padding: "10px",
+      background: "unset",
+      boxShadow: "unset",
+      border: "none"
     }
   },
   textFormatWrapper: {
@@ -64,6 +76,9 @@ const usePopupStyle = theme => ({
       "& .ele-item-single": {
         paddingLeft: "4px",
         paddingTop: "4px"
+      },
+      "@media only screen and (max-width: 599px)": {
+        width: '330px'
       }
     },
     "&.templates": {
@@ -72,6 +87,9 @@ const usePopupStyle = theme => ({
       "&.fullscreen": {
         width: "100%",
         maxHeight: "fit-content"
+      },
+      "@media only screen and (max-width: 599px)": {
+        width: '330px'
       }
     },
     "& .headerContainer": {},
@@ -124,6 +142,9 @@ const usePopupStyle = theme => ({
           color: theme?.palette?.editor?.activeColor
         }
       }
+    },
+    "@media only screen and (max-width: 599px)": {
+      width: '330px'
     }
   },
   textFormatLabel: {
@@ -391,7 +412,10 @@ const usePopupStyle = theme => ({
   },
   colorPopper: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.background,
+      '@media only screen and (max-width: 600px)': {
+        marginTop: "-40px"
+      }
     }
   },
   fullViewCardMedia: {
@@ -459,7 +483,7 @@ const usePopupStyle = theme => ({
       gap: "4px"
     },
     "& .verticalLine": {
-      borderLeft: "1px solid #E0E0E0",
+      borderLeft: `1px solid ${theme?.palette?.primary?.border8}`,
       minHeight: "20px",
       height: "100%"
     },
@@ -500,10 +524,14 @@ const usePopupStyle = theme => ({
   },
   customSelectPopoverWrapper: {
     "& .MuiPopover-paper": {
-      maxHeight: '140px'
+      maxHeight: '140px',
+      background: theme?.palette?.editor?.background,
+      '@media only screen and (max-width: 600px)': {
+        marginTop: "-40px"
+      }
     },
     "& .customSelectOptionLabel": {
-      color: "black",
+      color: theme?.palette?.editor?.textColor,
       margin: "0px",
       width: "100%",
       justifyContent: "start",
@@ -511,11 +539,13 @@ const usePopupStyle = theme => ({
       fontSize: "14px",
       lineHeight: "1.75 !important",
       fontWeight: 400,
+      background: theme?.palette?.editor?.background,
       "& :hover": {
-        background: "#F0F5FA !important"
+        background: `${theme?.palette?.action?.selected} !important`
       },
       "&.selected": {
-        background: "#F0F5FA !important"
+        color: `${theme?.palette?.primary?.main} !important`,
+        background: `${theme?.palette?.action?.selected} !important`
       }
     },
     "& .menuOptions": {
@@ -528,13 +558,13 @@ const usePopupStyle = theme => ({
       textTransform: "none"
     }
   },
-  mobileMiniTextWrapper: {
-    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-    position: "fixed",
-    bottom: "env(safe-area-inset-bottom)",
-    left: 0,
-    width: "100%"
-  },
+  // mobileMiniTextWrapper: {
+  //   boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+  //   position: "fixed",
+  //   bottom: "env(safe-area-inset-bottom)",
+  //   left: 0,
+  //   width: "100%",
+  // },
   miniFontSizeInput: {
     "& input": {
       fontSize: "14px",

package/dist/Editor/{Elements/Button/ButtonNavSettings → common/LinkSettings}/index.js

@@ -7,7 +7,7 @@ import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 import { FormControl, FormControlLabel, Grid, Radio, RadioGroup } from '@mui/material';
 import { useState } from 'react';
-import ButtonNavSettingsStyles from './style';
+import LinkSettingsStyles from './style';
 import { getNavOptions } from './navOptions';
 import { ScrollTopBottom, SelectPage, TextInput, Trigger } from './NavComponents';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,49 +20,28 @@ const MAP_COMPONENT = {
   scrollTopOrBottom: ScrollTopBottom,
   page: SelectPage
 };
-export default function ButtonNavSettings(props) {
+export default function LinkSettings(props) {
   const {
-    open,
     handleClose,
     onSave,
     customProps,
-    element,
-    editor
+    navType
   } = props;
   const navOptions = getNavOptions(customProps.hideTools);
-  const prevNavType = element?.buttonLink?.linkType;
-  const classes = ButtonNavSettingsStyles();
-  const [nav, setNav] = useState(prevNavType ? navOptions.find(n => n.value === prevNavType) : {
+  const classes = LinkSettingsStyles();
+  const [nav, setNav] = useState(navType ? navOptions.find(n => n.value === navType) : {
     label: "None",
     value: ""
   });
-  const [navValue, setNavValue] = useState(element?.url || "");
-  const [openInNewTab, setOpenInNewTab] = useState(element.openInNewTab || false);
-  const {
-    metadata
-  } = customProps || {
-    metadata: {}
-  };
-  const {
-    buttonLink
-  } = metadata || {
-    actionTrigger: {}
-  };
-  const {
-    actionTrigger
-  } = buttonLink || {};
-  const {
-    onClick
-  } = actionTrigger || {
-    options: []
-  };
+  const [navValue, setNavValue] = useState(props?.navValue || "");
+  const [openInNewTab, setOpenInNewTab] = useState(props.openInNewTab || false);
   const NavSettings = MAP_COMPONENT[nav?.value];
   const onChange = value => {
     setNavValue(value);
   };
   return /*#__PURE__*/_jsxs(Dialog, {
     onClose: handleClose,
-    open: open,
+    open: true,
     sx: classes.dialogContainer,
     fullWidth: true,
     maxWidth: "sm",
@@ -106,7 +85,6 @@ export default function ButtonNavSettings(props) {
             nav: nav,
             onChange: onChange,
             value: navValue,
-            editor: editor,
             openInNewTab: openInNewTab,
             onNewTabChange: () => setOpenInNewTab(prev => !prev),
             services: customProps.services
@@ -121,14 +99,10 @@ export default function ButtonNavSettings(props) {
       }), /*#__PURE__*/_jsx(Button, {
         onClick: () => {
           onSave({
-            buttonLink: {
-              linkType: nav?.value,
-              onClick
-            },
-            url: navValue,
+            linkType: nav?.value,
+            navValue,
             openInNewTab
           });
-          handleClose();
         },
         sx: classes.saveBtn,
         children: "Save"

package/dist/Editor/common/StyleBuilder/embedImageStyle.js

@@ -39,17 +39,20 @@ const embedImageStyle = [{
       value: "RoundedLightB2",
       label: "Rounded Light B2 Frame"
     }]
-  }, {
-    label: "Add web address here",
-    key: "webAddress",
-    type: "text",
-    placeholder: "https://"
-  }, {
-    label: "Open in new tab",
-    key: "isNewTab",
-    type: "selectBox",
-    placeholder: "Open in new tab"
-  }]
+  }
+  // {
+  //   label: "Add web address here",
+  //   key: "webAddress",
+  //   type: "text",
+  //   placeholder: "https://",
+  // },
+  // {
+  //   label: "Open in new tab",
+  //   key: "isNewTab",
+  //   type: "selectBox",
+  //   placeholder: "Open in new tab",
+  // },
+  ]
 }, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
@@ -59,20 +62,21 @@ const embedImageStyle = [{
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
+    label: "Border Color",
+    key: "borderColor",
+    type: "color"
+  }, {
     label: "Border Radius",
     key: "borderRadius",
     type: "borderRadius"
-  }]
-}, {
-  tab: "Border width",
-  value: "borderWidth",
-  fields: [{
-    label: "Border width",
+  }, {
+    label: "Border Width",
     key: "borderWidth",
-    type: "borderWidth"
+    type: "text",
+    placeholder: "1px"
   }]
 }, {
   tab: "Position",
@@ -99,10 +103,6 @@ const embedImageStyle = [{
     label: "Background Color",
     key: "bgColor",
     type: "color"
-  }, {
-    label: "Border Color",
-    key: "borderColor",
-    type: "color"
   }, {
     label: "Box Shadow",
     key: "boxShadow",

package/dist/Editor/common/StyleBuilder/fieldTypes/index.js

@@ -15,12 +15,10 @@ import TextOptions from "./textOptions";
 import SelectBox from "./selectBox";
 import Icons from "./icons";
 import FontSize from "./fontSize";
-import borderWidth from "./borderWidth";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
   borderRadius: BorderRadius,
-  borderWidth: borderWidth,
   color: Color,
   alignment: Alignment,
   backgroundImage: BackgroundImage,

package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography, Tooltip, IconButton } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
+import Settings from "@mui/icons-material/Settings";
+import LinkSettings from "../../LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MenusArray = props => {
@@ -8,7 +10,8 @@ const MenusArray = props => {
     value,
     data,
     elementProps,
-    onChange
+    onChange,
+    customProps
   } = props;
   const {
     key
@@ -18,6 +21,7 @@ const MenusArray = props => {
   } = elementProps || {
     menuStyle: "stacked"
   };
+  const [openNav, setOpenNav] = useState(false);
   const handleChange = index => e => {
     const upValue = [...(value || [])];
     upValue[index] = {
@@ -47,6 +51,17 @@ const MenusArray = props => {
       [e.target.name]: e.target.value
     });
   };
+  const selectedMenu = openNav?.menu || {};
+  const onSave = update => {
+    const upValue = [...(value || [])];
+    upValue[openNav?.index] = {
+      ...(upValue[openNav?.index] || {}),
+      ...update
+    };
+    onChange({
+      [key]: upValue
+    });
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
     xs: 12,
@@ -123,6 +138,16 @@ const MenusArray = props => {
           onChange: handleChange(i),
           size: "small",
           fullWidth: true
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          title: "Link Settings",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: () => setOpenNav({
+              menu: m,
+              index: i
+            }),
+            children: /*#__PURE__*/_jsx(Settings, {})
+          })
         }), /*#__PURE__*/_jsx(Tooltip, {
           title: "Delete Menu",
           arrow: true,
@@ -142,7 +167,25 @@ const MenusArray = props => {
         },
         children: "+ Add"
       })
-    })]
+    }), openNav ? /*#__PURE__*/_jsx(LinkSettings, {
+      handleClose: () => setOpenNav(null),
+      onSave: ({
+        linkType,
+        navValue,
+        openInNewTab
+      }) => {
+        onSave({
+          linkType,
+          url: navValue,
+          target: openInNewTab ? "_blank" : ""
+        });
+        setOpenNav(false);
+      },
+      navType: selectedMenu?.linkType,
+      navValue: selectedMenu?.url,
+      openInNewTab: selectedMenu?.target === "_blank",
+      customProps: customProps
+    }) : null]
   });
 };
 export default MenusArray;

package/dist/Editor/helper/deserialize/index.js

@@ -1,4 +1,22 @@
 import { jsx } from "slate-hyperscript";
+const handleTableCell = (el, children) => {
+  const wrapChild = children?.map(c => {
+    if (typeof c === "string") {
+      return {
+        type: "paragraph",
+        children: [{
+          text: c
+        }],
+        cellBgColor: "#FFFFFF"
+      };
+    }
+    return c;
+  });
+  return {
+    type: "table-cell",
+    overwriteChild: wrapChild
+  };
+};
 const ELEMENT_TAGS = {
   A: el => ({
     type: "link",
@@ -53,11 +71,15 @@ const ELEMENT_TAGS = {
   "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
     type: "paragraph"
   }),
-  TABLE: (el, bodyChildren = []) => {
+  TABLE: (el, children = []) => {
+    const bodyChild = children[0]?.children || [];
+    const firstRowChildren = bodyChild[0]?.children || [];
     return {
       type: "table",
-      rows: bodyChildren?.length,
-      columns: bodyChildren[0]?.children?.length
+      overwriteChild: bodyChild,
+      // we are not having table-body in our json format, just we are wrapping table-row's inside the table
+      rows: bodyChild?.length,
+      columns: firstRowChildren?.length
     };
   },
   THEAD: () => ({
@@ -66,15 +88,11 @@ const ELEMENT_TAGS = {
   TBODY: () => ({
     type: "table-body"
   }),
-  TH: () => ({
-    type: "table-cell"
-  }),
+  TH: handleTableCell,
   TR: () => ({
     type: "table-row"
   }),
-  TD: () => ({
-    type: "table-cell"
-  }),
+  TD: handleTableCell,
   COLGROUP: () => ({
     type: "paragraph"
   }),
@@ -133,8 +151,11 @@ const deserialize = el => {
     return jsx("fragment", {}, children);
   }
   if (ELEMENT_TAGS[nodeName]) {
-    const attrs = ELEMENT_TAGS[nodeName](el, children);
-    return jsx("element", attrs, children);
+    const {
+      overwriteChild,
+      ...attrs
+    } = ELEMENT_TAGS[nodeName](el, children);
+    return jsx("element", attrs, overwriteChild || children);
   }
   if (TEXT_TAGS[nodeName]) {
     const attrs = TEXT_TAGS[nodeName](el);

package/dist/Editor/helper/index.js

@@ -3,10 +3,42 @@ import { rectIntersection, closestCenter } from "@dnd-kit/core";
 import { getQueryStrings } from "../utils/SlateUtilityFunctions";
 import { Node } from "slate";
 const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
+const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
 export const getThumbnailImage = async (dom, options = {}) => {
   try {
-    const canvas = await html2canvas(dom, options);
-    return canvas.toDataURL();
+    const canvas = await html2canvas(dom, {
+      windowWidth: 1440,
+      windowHeight: 768,
+      ...options,
+      backgroundColor: null,
+      allowTaint: true,
+      useCORS: false,
+      scale: 0.5,
+      imageTimeout: 0,
+      onclone: document => {
+        // hide class
+        const sw = document.getElementById("slate-wrapper-scroll-container");
+        sw.style.minHeight = "2000px";
+        const svgFrames = document.querySelectorAll(".image-frame svg");
+        for (let i = 0; i < svgFrames.length; i++) {
+          svgFrames[i].style.width = "100%";
+        }
+        const rectFills = document.getElementsByTagName("rect");
+        for (let i = 0; i < rectFills.length; i++) {
+          const hasURL = rectFills[i]?.getAttribute("fill")?.indexOf("url") > -1;
+          if (hasURL) {
+            rectFills[i].style.fill = "#CCC";
+          }
+        }
+        for (let hidedeClass of PREVIEW_IMAGE_HIDE_CLASS) {
+          for (let element of document.getElementsByClassName(hidedeClass)) {
+            element.style.display = "none";
+          }
+        }
+        return document;
+      }
+    });
+    return canvas.toDataURL("image/jpeg", 0.5);
   } catch (err) {
     console.log(err);
     return null;

package/dist/Editor/plugins/withTable.js

@@ -11,7 +11,7 @@ const withTable = editor => {
     if (arg.reverse) {
       const table = new TableUtil(editor);
       const cellsSelected = table.isCellSelected(editor.selection);
-      if (cellsSelected) {
+      if (cellsSelected && cellsSelected.length > 1) {
         cellsSelected.forEach(cellPath => {
           Transforms.removeNodes(editor, {
             at: cellPath

package/dist/Editor/utils/events.js

@@ -125,7 +125,9 @@ export const escapeEvent = props => {
     const parentNodes = parentPath.filter(m => m.length).map(m => Node.get(editor, m));
     const ele = isListItem(editor);
     const eleType = ele[0]?.type;
-    if (parentNodes.length === 2 && parentNodes[1]?.type === "list-item") {
+    const parentLists = parentNodes.filter(p => p.type === "orderedList" || p.type === "unorderedList");
+    if (parentLists?.length === 1) {
+      // if not in nested list
       toggleBlock(editor, "list-item", editor.selection);
     } else if (eleType === "check-list-item") {
       checkListEnterEvent(editor, eleType);

package/dist/Editor/utils/helper.js

@@ -1,6 +1,7 @@
 import { Editor, Node, Transforms, Element } from "slate";
 import { ReactEditor } from "slate-react";
 import insertNewLine from "./insertNewLine";
+import { getDevice } from "../helper/theme";
 export const windowVar = {};
 export const formatDate = (date, format = "MM/DD/YYYY") => {
   if (!date) return "";
@@ -100,10 +101,10 @@ export const getSelectedText = editor => {
 export const isEmptyNode = (editor, children, path) => {
   try {
     const isEmptyText = Node.string(Node.get(editor, path))?.length === 0;
-    const emptyNode = children?.length === 1 && children[0]?.children[0]?.type === undefined && children[0]?.type === "paragraph";
+    const emptyNode = children?.length === 1 && children && children[0]?.children[0]?.type === undefined && children[0]?.type === "paragraph";
     return isEmptyText && emptyNode;
   } catch (err) {
-    console.log(err);
+    // console.log(err);
     return "";
   }
 };
@@ -123,7 +124,7 @@ export const handleInsertLastElement = (event, editor) => {
         offset: 0
       };
       Transforms.insertNodes(editor, {
-        text: ''
+        text: ""
       }, {
         at: path
       });
@@ -202,4 +203,88 @@ export const decodeAndParseBase64 = encodedString => {
   const decodedURLString = decodeURIComponent(decodedString);
   const jsonData = JSON.parse(decodedURLString);
   return jsonData;
+};
+export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
+  const props = {};
+  if (!readOnly) {
+    return {
+      component: "button"
+    };
+  }
+  switch (linkType) {
+    case "webAddress":
+      const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
+      props.component = "a";
+      if (refUrl !== "Link") {
+        props.href = refUrl;
+      }
+      if (openInNewTab) {
+        props.target = "_blank";
+      }
+      break;
+    case "actionTrigger":
+      if (!readOnly) {
+        props.component = "button";
+        props.onClick = () => {};
+      } else {
+        props.component = "button";
+        props.onClick = onClick;
+      }
+      break;
+    case "page":
+      props.component = "a";
+      const [page, section] = url.split("#");
+      const sec = section ? `#${section}` : "";
+      props.href = page === "home" ? sec : `/${url}`;
+      if (openInNewTab) {
+        props.target = "_blank";
+      }
+      break;
+    case "email":
+      props.component = "a";
+      props.href = `mailto:${url}`;
+      break;
+    case "phone":
+      props.component = "a";
+      props.href = `tel:${url}`;
+      break;
+    case "scrollTopOrBottom":
+      props.component = "button";
+      props.onClick = () => {
+        const scrollEle = document.getElementById("slate-wrapper-scroll-container");
+        if (scrollEle) {
+          if (url === "top") {
+            // top of the page
+            scrollEle.scrollTo(0, 0);
+          } else if (url === "bottom") {
+            // bottom of the page
+            scrollEle.scrollTo(0, scrollEle.scrollHeight);
+          }
+        }
+      };
+      break;
+    default:
+      return {};
+  }
+
+  // for iphone fix
+  if (props.component === "a" && props.href) {
+    if (getDevice(window.innerWidth) === "xs") {
+      props.component = "button"; // iphone is opening two tabs, on open in new tab because of a tag.
+    }
+
+    props.onTouchEnd = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (props.target) {
+        window.open(props.href);
+      } else {
+        window.location.href = props.href;
+      }
+    };
+    props.onClick = () => {
+      return false;
+    };
+  }
+  return props;
 };