@flozy/editor 3.1.8 → 3.1.9

package/dist/Editor/CommonEditor.js

@@ -28,13 +28,11 @@ import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
-import useElement from "./utils/customHooks/useElement";
 import { getTRBLBreakPoints } from "./helper/theme";
 import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
 const Item = /*#__PURE__*/forwardRef(({
   children,
   ...props
@@ -166,19 +164,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     const dom = needBackground ? editorWrapper?.current : editorWrapper?.current.getElementsByClassName("innert-editor-textbox")[0];
     const c = await getThumbnailImage(dom, {
       ...options,
-      allowTaint: true,
-      backgroundColor: null,
-      proxy: "anonymous",
-      useCORS: true,
-      onclone: document => {
-        // hide class
-        for (let hidedeClass of PREVIEW_IMAGE_HIDE_CLASS) {
-          for (let element of document.getElementsByClassName(hidedeClass)) {
-            element.style.display = "none";
-          }
-        }
-        return document;
-      }
+      proxy: `${otherProps?.PAGES_API_HOST}/page/2canvas`
     });
     return c;
   };
@@ -372,7 +358,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [readOnly, isTextSelected]);
   const handleFooterClick = () => {
-    window.open('https://www.flozy.com', '_blank');
+    window.open("https://www.flozy.com", "_blank");
   };
   const editorWrapperStyle = useMemo(() => {
     const style = {
@@ -381,6 +367,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     if (pageBgImage && pageBgImage !== "none") {
       style.backgroundImage = `url(${pageBgImage})`;
       style.backgroundSize = `cover`;
+      style.backgroundRepeat = "repeat";
     } else {
       style.background = pageColor || "";
     }
@@ -406,12 +393,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           initialValue: value,
           onChange: handleEditorChange,
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
-            children: /*#__PURE__*/_jsx(Overlay, {
-              children: /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsxs(Overlay, {
+              children: [/*#__PURE__*/_jsx(Box, {
                 className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
                 style: editorWrapperStyle,
+                ref: editorWrapper,
                 onClick: e => {
                   handleInsertLastElement(e, editor);
                 },
@@ -425,7 +413,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     "data-info": outsideEditorClickLabel,
                     children: /*#__PURE__*/_jsxs(Box, {
                       component: "div",
-                      ref: editorWrapper,
                       className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
                       sx: {
                         backgroundColor: "transparent",
@@ -441,11 +428,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
                       },
                       "data-info": outsideEditorClickLabel,
-                      children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
-                        onDrawerOpen: onDrawerOpen,
-                        theme: theme,
-                        setIsTextSelected: setIsTextSelected
-                      }) : null, /*#__PURE__*/_jsx(Editable, {
+                      children: [/*#__PURE__*/_jsx(Editable, {
                         className: "innert-editor-textbox",
                         readOnly: isReadOnly,
                         renderElement: renderElement,
@@ -473,7 +456,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                       color: "rgb(100, 116, 139)",
                       fontSize: "13px",
                       paddingBottom: hideMiniToolBar ? "0px" : "12px",
-                      cursor: 'pointer'
+                      cursor: "pointer"
                     },
                     align: "center",
                     "data-info": outsideEditorClickLabel,
@@ -481,7 +464,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     children: footer
                   })]
                 })
-              })
+              }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
+                onDrawerOpen: onDrawerOpen,
+                theme: theme,
+                setIsTextSelected: setIsTextSelected
+              }) : null]
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -17,8 +17,10 @@ import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import AppHeaderPopup from "./AppHeaderPopup";
 import { getTRBLBreakPoints } from "../../helper/theme";
+import { handleLinkType } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const drawerWidth = 240;
 function AppHeader(props) {
@@ -263,38 +265,40 @@ function AppHeader(props) {
                   color: textColor
                 },
                 children: /*#__PURE__*/_jsx(MenuIcon, {})
-              }) : null, !isDrawer ? menus.map((item, i) => /*#__PURE__*/_jsx(Button, {
-                component: "a",
-                href: item.url,
-                sx: {
-                  position: "relative",
-                  fontFamily: fontFamily,
-                  textTransform: "none",
-                  fontSize: fontSize || "16px",
-                  color: textColor || "#FFF",
-                  background: bgColor || "none",
-                  "& .m-settings": {
-                    display: "none",
-                    position: "absolute",
-                    top: 0,
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    margin: "auto",
-                    width: "42px",
-                    height: "42px",
-                    background: "#FFF"
-                  },
-                  "&:hover": {
-                    color: textColorHover || textColor || "#FFF",
-                    background: bgColorHover || bgColor || "none",
+              }) : null, !isDrawer ? menus.map((item, i) => {
+                const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
+                return /*#__PURE__*/_createElement(Button, {
+                  ...buttonProps,
+                  key: `${item.url}_${i}_no_drawer`,
+                  sx: {
+                    position: "relative",
+                    fontFamily: fontFamily,
+                    textTransform: "none",
+                    fontSize: fontSize || "16px",
+                    color: textColor || "#FFF",
+                    background: bgColor || "none",
                     "& .m-settings": {
-                      display: "block"
+                      display: "none",
+                      position: "absolute",
+                      top: 0,
+                      bottom: 0,
+                      left: 0,
+                      right: 0,
+                      margin: "auto",
+                      width: "42px",
+                      height: "42px",
+                      background: "#FFF"
+                    },
+                    "&:hover": {
+                      color: textColorHover || textColor || "#FFF",
+                      background: bgColorHover || bgColor || "none",
+                      "& .m-settings": {
+                        display: "block"
+                      }
                     }
                   }
-                },
-                children: item.text
-              }, `${item.url}_${i}_no_drawer`)) : null]
+                }, item.text);
+              }) : null]
             })]
           })
         }), /*#__PURE__*/_jsx("nav", {

package/dist/Editor/Elements/Button/EditorButton.js

@@ -10,8 +10,8 @@ import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
-import { windowVar } from "../../utils/helper";
-import ButtonNavSettings from "./ButtonNavSettings";
+import { handleLinkType, windowVar } from "../../utils/helper";
+import LinkSettings from "../../common/LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -53,9 +53,16 @@ const EditorButton = props => {
   } = element;
   const {
     linkType,
-    redirectOnURLResult
+    redirectOnURLResult,
+    actionTrigger
   } = buttonLink || {};
+  const {
+    onClick
+  } = actionTrigger || {
+    options: []
+  };
   const isTrigger = linkType === "actionTrigger";
+  const refURl = isTrigger ? buttonLink?.url : url;
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   windowVar.lastButtonProps = element;
   const handleTrigger = async () => {
@@ -72,82 +79,7 @@ const EditorButton = props => {
       window.open(refUrl, "_blank").focus();
     }
   };
-  const handleLinkType = (readOnly, openInNewTab) => {
-    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 = handleTrigger;
-        }
-        break;
-      case "page":
-        props.component = "a";
-        const [page, section] = url.split("#");
-        props.href = page === "home" ? `#${section}` : `/${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.onTouchEnd = e => {
-        e.preventDefault();
-        e.stopPropagation();
-        window.open(props.href, props.target);
-      };
-      props.onClick = () => {
-        return false;
-      };
-    }
-    return props;
-  };
-  const buttonProps = handleLinkType(readOnly, openInNewTab);
+  const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
   const onMenuClick = val => () => {
     switch (val) {
       case "edit":
@@ -166,7 +98,7 @@ const EditorButton = props => {
     }
   };
   const Toolbar = () => {
-    const btnProps = handleLinkType(true, true);
+    const btnProps = handleLinkType(refURl, linkType, true, true, handleTrigger);
     return !readOnly ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       style: {
@@ -307,13 +239,27 @@ const EditorButton = props => {
       onClose: onClose,
       onDelete: onMenuClick("delete"),
       customProps: customProps
-    }), openNav ? /*#__PURE__*/_jsx(ButtonNavSettings, {
-      open: openNav,
+    }), openNav ? /*#__PURE__*/_jsx(LinkSettings, {
       handleClose: () => setOpenNav(false),
-      onSave: onSave,
-      customProps: customProps,
-      element: element,
-      editor: editor
+      onSave: ({
+        linkType,
+        navValue,
+        openInNewTab
+      }) => {
+        onSave({
+          buttonLink: {
+            linkType,
+            onClick
+          },
+          url: navValue,
+          openInNewTab
+        });
+        setOpenNav(false);
+      },
+      navType: element?.buttonLink?.linkType,
+      navValue: element?.url,
+      openInNewTab: element?.openInNewTab,
+      customProps: customProps
     }) : null]
   });
 };

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -14,7 +14,10 @@ const ColorPickerStyles = theme => ({
   },
   colorPopper: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.background,
+      '@media only screen and (max-width: 600px)': {
+        marginTop: "-40px"
+      }
     }
   },
   colorButtonSingle: {

package/dist/Editor/Elements/Embed/Image.js

@@ -5,12 +5,14 @@ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
-import { GridSettingsIcon } from "../../common/iconslist";
+import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import Icon from "../../common/Icon";
 import frames from "./Frames";
 import ImageFrame from "./Frames/ImageFrame";
+import LinkSettings from "../../common/LinkSettings";
+import { handleLinkType } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -35,6 +37,7 @@ const Image = ({
     frame = null,
     webAddress,
     isNewTab,
+    linkType,
     framePos
   } = element;
   const {
@@ -52,6 +55,7 @@ const Image = ({
   const [openSetttings, setOpenSettings] = useState(false);
   const path = ReactEditor.findPath(editor, element);
   const [showTool] = useEditorSelection(editor);
+  const [openNav, setOpenNav] = useState(false);
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -86,20 +90,6 @@ const Image = ({
       onLoad(getSize());
     }
   }, []);
-  const handleImageClick = () => {
-    Transforms.select(editor, {
-      anchor: Editor.start(editor, path),
-      focus: Editor.end(editor, path)
-    });
-    if (webAddress) {
-      const refUrl = webAddress ? webAddress.includes("http") ? webAddress : `//${webAddress}` : "Link";
-      if (isNewTab) {
-        window.open(refUrl, "_blank").focus();
-      } else {
-        window.location.href = refUrl;
-      }
-    }
-  };
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -127,7 +117,7 @@ const Image = ({
     onSave(data);
   };
   const ToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar visible-on-hover",
       contentEditable: false,
       style: {
@@ -136,21 +126,43 @@ const Image = ({
         left: "auto",
         margin: "0px"
       },
-      children: /*#__PURE__*/_jsx(Tooltip, {
+      children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Image Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
-      })
-    }) : null;
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Link Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => setOpenNav(true),
+          children: /*#__PURE__*/_jsx(LinkIcon, {})
+        })
+      })]
+    });
   };
   const ImageContent = () => {
+    const {
+      onClick,
+      onTouchEnd
+    } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
+    const handleImageClick = () => {
+      Transforms.select(editor, {
+        anchor: Editor.start(editor, path),
+        focus: Editor.end(editor, path)
+      });
+      if (onClick) {
+        onClick();
+      }
+      if (onTouchEnd) {
+        onTouchEnd();
+      }
+    };
     return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
       component: "button",
       className: "element-empty-btn",
-      onClick: onSettings,
       contentEditable: false,
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: "image"
@@ -173,6 +185,7 @@ const Image = ({
       alt: alt,
       src: url,
       onClick: handleImageClick,
+      onTouchEnd: onTouchEnd,
       "data-path": path.join(","),
       draggable: false
     });
@@ -254,7 +267,25 @@ const Image = ({
     }), /*#__PURE__*/_jsx("span", {
       contentEditable: false,
       children: children
-    })]
+    }), openNav ? /*#__PURE__*/_jsx(LinkSettings, {
+      handleClose: () => setOpenNav(false),
+      onSave: ({
+        linkType,
+        navValue,
+        openInNewTab
+      }) => {
+        onSave({
+          linkType,
+          webAddress: navValue,
+          isNewTab: openInNewTab
+        });
+        setOpenNav(false);
+      },
+      navType: linkType,
+      navValue: webAddress,
+      openInNewTab: isNewTab,
+      customProps: customProps
+    }) : null]
   });
 };
 export default Image;

package/dist/Editor/Elements/Form/Form.js

@@ -300,7 +300,7 @@ const Form = props => {
             children: formTitle
           }), children, /*#__PURE__*/_jsx(Grid, {
             item: true,
-            xs: buttonProps?.grid || 6,
+            ...buttonProps?.grid,
             className: "form-btn-wrpr",
             contentEditable: false,
             style: {

package/dist/Editor/Styles/EditorStyles.js

@@ -20,11 +20,15 @@ const editorStyles = ({
     "& .mobileMiniTextWrapper": {
       boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
       position: "fixed",
-      bottom: 0,
+      bottom: "env(safe-area-inset-bottom)",
       left: 0,
       width: "100%",
       zIndex: 99999,
-      background: "white"
+      backgroundColor: theme?.palette?.editor?.background,
+      color: theme?.palette?.editor?.textColor,
+      "& .MuiOutlinedInput-input": {
+        color: theme?.palette?.editor?.textColor
+      }
     }
   },
   slateWrapper: {

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js

@@ -7,7 +7,7 @@ import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme"
 import { headingMap, sizeMap } from "../../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const fontSizeOptions = [16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
+const fontSizeOptions = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
 function SelectFontSize({
   editor,
   classes

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -103,7 +103,7 @@ const MiniTextFormat = props => {
           transition: true,
           placement: "bottom-end",
           sx: classes.popupWrapper,
-          className: `tools-drawer ${size?.device}`,
+          className: `tools-drawer ${size?.device} textSettings`,
           children: ({
             TransitionProps
           }) => /*#__PURE__*/_jsx(Fade, {

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
     },
@@ -391,7 +397,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 +468,7 @@ const usePopupStyle = theme => ({
       gap: "4px"
     },
     "& .verticalLine": {
-      borderLeft: "1px solid #E0E0E0",
+      borderLeft: `1px solid ${theme?.palette?.primary?.border8}`,
       minHeight: "20px",
       height: "100%"
     },
@@ -500,10 +509,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 +524,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 +543,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",

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;
 };

package/dist/Editor/utils/insertAppHeader.js

@@ -13,24 +13,28 @@ export const createAppHeaderNode = ({
       appLogo: "none",
       menus: menus || [{
         type: "menu",
-        url: "/",
-        target: "_blank",
-        text: "Home"
+        url: "home",
+        target: "",
+        text: "Home",
+        linkType: "page"
       }, {
         type: "menu",
-        url: "/wireframe2",
-        target: "_blank",
-        text: "Wireframe"
+        url: "wireframe2",
+        target: "",
+        text: "Wireframe",
+        linkType: "page"
       }, {
         type: "menu",
         url: "https://www.google.com",
-        target: "_blank",
-        text: "Work"
+        target: "",
+        text: "Work",
+        linkType: "webAddress"
       }, {
         type: "menu",
         url: "https://www.google.com",
-        target: "_blank",
-        text: "Contact"
+        target: "",
+        text: "Contact",
+        linkType: "webAddress"
       }],
       menuStyle: "stacked",
       children: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"