@flozy/editor 3.1.8 → 3.2.0

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/Editor.css

@@ -931,6 +931,11 @@ blockquote {
   span {
     text-transform: capitalize;
   }
+  @media only screen and (max-width: 599px) {
+  background-color: unset;
+  display: flex;
+  justify-content: center;
+}
 }
 
 .textFontArrows {

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 {
@@ -51,7 +54,8 @@ const Image = ({
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const path = ReactEditor.findPath(editor, element);
-  const [showTool] = useEditorSelection(editor);
+  const [openNav, setOpenNav] = useState(false);
+  const isEmpty = !url && !readOnly;
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -79,27 +83,29 @@ const Image = ({
     selectedPath
   } = useEditorContext();
   const selected = hoverPath === path.join(",") || selectedPath === path?.join(",");
-  useEffect(() => {
-    if (editor && ele && ele[1] !== undefined) {
-      const dom = ReactEditor.toDOMNode(editor, element);
-      setParentDOM(dom);
-      onLoad(getSize());
-    }
-  }, []);
+  const {
+    onClick,
+    onTouchEnd
+  } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
   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;
-      }
+    if (onClick) {
+      onClick();
+    }
+    if (onTouchEnd) {
+      onTouchEnd();
     }
   };
+  useEffect(() => {
+    if (editor && ele && ele[1] !== undefined) {
+      const dom = ReactEditor.toDOMNode(editor, element);
+      setParentDOM(dom);
+      onLoad(getSize());
+    }
+  }, []);
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -127,7 +133,7 @@ const Image = ({
     onSave(data);
   };
   const ToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
+    return !isEmpty ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar visible-on-hover",
       contentEditable: false,
       style: {
@@ -136,22 +142,31 @@ 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, {})
         })
-      })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Link Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => setOpenNav(true),
+          children: /*#__PURE__*/_jsx(LinkIcon, {})
+        })
+      })]
     }) : null;
   };
   const ImageContent = () => {
     return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
       component: "button",
       className: "element-empty-btn",
-      onClick: onSettings,
       contentEditable: false,
+      onClick: () => {
+        setOpenSettings(true);
+      },
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: "image"
       }), "Add Image"]
@@ -168,11 +183,12 @@ const Image = ({
         opacity: frame ? 0 : 1,
         cursor: webAddress ? "pointer" : "",
         border: `1px solid ${borderColor}`,
-        borderWidth: borderWidth?.['borderWidth'] ? borderWidth?.['borderWidth'] : "1px"
+        borderWidth: borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`
       },
       alt: alt,
       src: url,
       onClick: handleImageClick,
+      onTouchEnd: onTouchEnd,
       "data-path": path.join(","),
       draggable: false
     });
@@ -254,7 +270,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, {