@flozy/editor 3.2.8 → 3.3.0

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

@@ -99,6 +99,7 @@ const EditorButton = props => {
   };
   const Toolbar = () => {
     const btnProps = handleLinkType(refURl, linkType, true, true, handleTrigger);
+    const hideOpenLink = linkType === "page" || !linkType;
     return !readOnly ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       style: {
@@ -121,7 +122,7 @@ const EditorButton = props => {
           onClick: onMenuClick("nav"),
           children: /*#__PURE__*/_jsx(LinkIcon, {})
         })
-      }), linkType === "page" ? null : /*#__PURE__*/_jsx(Tooltip, {
+      }), hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
         title: "Open Link",
         arrow: true,
         children: /*#__PURE__*/_jsx(Box, {

package/dist/Editor/Elements/EmbedScript/Code.js

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef } from "react";
+import sanitizeHtml from "sanitize-html";
+import { allowedDomains } from "../../utils/helper";
 
 // const sanitize = (input) => {
 //   const doc = new DOMParser().parseFromString(input, "text/html");
@@ -25,7 +27,14 @@ const Code = props => {
   } = element;
   useEffect(() => {
     if (codeRef?.current) {
-      const slotHtml = document.createRange().createContextualFragment(embedData); // Create a 'tiny' document and parse the html string
+      const clean = sanitizeHtml(embedData, {
+        allowedTags: false,
+        // Allow all tags
+        allowedAttributes: false,
+        // Allow all attributes
+        allowedScriptDomains: allowedDomains
+      });
+      const slotHtml = document.createRange().createContextualFragment(clean); // Create a 'tiny' document and parse the html string
       codeRef.current.innerHTML = ""; // Clear the container
       codeRef.current.appendChild(slotHtml);
     }

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

@@ -40,7 +40,8 @@ const Form = props => {
     formTitle,
     textSize,
     fontFamily,
-    textAlign
+    textAlign,
+    alignment
   } = element;
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
@@ -218,7 +219,8 @@ const Form = props => {
       contentEditable: false,
       style: {
         top: "-42px",
-        left: "0px"
+        left: "0px",
+        textAlign: "left"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Form Settings",
@@ -260,7 +262,8 @@ const Form = props => {
     className: "form-wrapper element-root",
     style: {
       border: !readOnly ? "none" : "none",
-      padding: "10px"
+      padding: "10px",
+      width: "100%"
     },
     onMouseOver: onMouseOver,
     onMouseLeave: onMouseLeave,
@@ -290,6 +293,9 @@ const Form = props => {
         children: /*#__PURE__*/_jsxs(Grid, {
           container: true,
           spacing: 2,
+          sx: {
+            justifyContent: alignment?.horizantal || "start"
+          },
           children: [/*#__PURE__*/_jsx("legend", {
             style: {
               fontSize: `${textSize}px` || "inherit",

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -8,6 +8,7 @@ import "./Signature.css";
 import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../../common/EditorIcons";
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { validationMethods } from "../Form/FormElements/validations";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -25,7 +26,8 @@ const SignaturePopup = props => {
   } = props;
   const {
     readOnly,
-    metadata
+    metadata,
+    isSignerDetailsRequired = false
   } = customProps;
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState(0);
@@ -33,7 +35,9 @@ const SignaturePopup = props => {
   const [signedData, setSignedData] = useState({
     signedOn: new Date(),
     signature: "",
-    signedText: ""
+    signedText: "",
+    signedBy: "",
+    signedByEmail: ""
   });
   const [brush, setBrush] = useState({
     size: 1,
@@ -49,14 +53,22 @@ const SignaturePopup = props => {
     await customProps?.services("workFlowAction", {
       resource_id: customProps?.page_id
     });
-    onSave(signedData);
-    // manual delay
-    setTimeout(() => {
-      if (metadata && metadata?.actionHandler) {
-        metadata?.actionHandler("signed", signedData);
-      }
-      handleClose();
-    }, 0);
+    let isValidEmail = "";
+    if (isSignerDetailsRequired && signedData?.signedByEmail !== "") {
+      isValidEmail = validationMethods?.isEmail(signedData?.signedByEmail);
+    }
+    if (isValidEmail === "Enter valid email address") {
+      alert(isValidEmail);
+    } else {
+      onSave(signedData);
+      // manual delay
+      setTimeout(() => {
+        if (metadata && metadata?.actionHandler) {
+          metadata?.actionHandler("signed", signedData);
+        }
+        handleClose();
+      }, 0);
+    }
   };
   const handleClear = () => {
     onClear();
@@ -99,10 +111,15 @@ const SignaturePopup = props => {
     setSignedData({
       signedOn: new Date(),
       signature: "",
-      signedText: ""
+      signedText: "",
+      signedBy: "",
+      signedByEmail: ""
     });
   };
-  const isEmpty = signedData?.signature === "" && signedData?.signedText === "";
+  let isEmpty = signedData?.signature === "" && signedData?.signedText === "";
+  if (isSignerDetailsRequired) {
+    isEmpty = signedData?.signature === "" && signedData?.signedText === "" || signedData?.signedBy === "" || signedData?.signedByEmail === "";
+  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
       className: `signature-btn-container`,

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -165,15 +165,13 @@ export const toolbarGroups = [[{
   format: "video",
   type: "embed",
   group: "elements"
-},
-// {
-//   id: 49,
-//   lbT: "embedScript",
-//   format: "embedScript",
-//   type: "embedScript",
-//   group: "elements",
-// },
-{
+}, {
+  id: 49,
+  lbT: "embedScript",
+  format: "embedScript",
+  type: "embedScript",
+  group: "elements"
+}, {
   id: 45,
   format: "topbanner",
   type: "topbanner",

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -103,7 +103,7 @@ export const SelectPage = props => {
 };
 export const Trigger = props => {
   return /*#__PURE__*/_jsx(Typography, {
-    variant: "h6",
+    variant: "subtitle1",
     gutterBottom: true,
     children: "Choosing this will trigger the next step"
   });

package/dist/Editor/common/LinkSettings/index.js

@@ -1,17 +1,20 @@
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-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 LinkSettingsStyles from './style';
-import { getNavOptions } from './navOptions';
-import { ScrollTopBottom, SelectPage, TextInput, Trigger } from './NavComponents';
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Select, Typography } from "@mui/material";
+import { useState } from "react";
+import LinkSettingsStyles from "./style";
+import { getNavOptions } from "./navOptions";
+import { ScrollTopBottom, SelectPage, TextInput, Trigger } from "./NavComponents";
+import SwipeableDrawer from "../SwipeableDrawer";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const MAP_COMPONENT = {
   webAddress: TextInput,
   email: TextInput,
@@ -20,6 +23,12 @@ const MAP_COMPONENT = {
   scrollTopOrBottom: ScrollTopBottom,
   page: SelectPage
 };
+function getNav(navType, navOptions) {
+  return navType ? navOptions.find(n => n.value === navType) : {
+    label: "None",
+    value: ""
+  };
+}
 export default function LinkSettings(props) {
   const {
     handleClose,
@@ -27,86 +36,157 @@ export default function LinkSettings(props) {
     customProps,
     navType
   } = props;
+  const {
+    isMobile
+  } = customProps;
   const navOptions = getNavOptions(customProps.hideTools);
   const classes = LinkSettingsStyles();
-  const [nav, setNav] = useState(navType ? navOptions.find(n => n.value === navType) : {
-    label: "None",
-    value: ""
-  });
+  const [nav, setNav] = useState(getNav(navType, navOptions));
   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: true,
-    sx: classes.dialogContainer,
-    fullWidth: true,
-    maxWidth: "sm",
-    children: [/*#__PURE__*/_jsx(DialogTitle, {
-      children: "What do you want to link to?"
-    }), /*#__PURE__*/_jsx(IconButton, {
-      "aria-label": "close",
-      onClick: handleClose,
-      sx: classes.closeIcon,
-      children: /*#__PURE__*/_jsx(CloseIcon, {})
-    }), /*#__PURE__*/_jsx(DialogContent, {
-      dividers: true,
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 6,
-          sx: classes.gridDivider,
-          children: /*#__PURE__*/_jsx(FormControl, {
-            children: /*#__PURE__*/_jsx(RadioGroup, {
-              value: nav?.value,
-              children: navOptions?.map((navOption, i) => {
-                return /*#__PURE__*/_jsx(FormControlLabel, {
-                  value: navOption.value,
-                  control: /*#__PURE__*/_jsx(Radio, {}),
-                  label: navOption.label,
-                  onChange: () => {
-                    setNav(navOption);
-                    setNavValue("");
-                  }
-                }, i);
-              })
+  const onSubmit = () => {
+    onSave({
+      linkType: nav?.value,
+      navValue,
+      openInNewTab
+    });
+  };
+  if (isMobile) {
+    return /*#__PURE__*/_jsxs(SwipeableDrawer, {
+      onClose: handleClose,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "subtitle1",
+        gutterBottom: true,
+        sx: {
+          fontWeight: 600
+        },
+        children: "What do you want to link to?"
+      }), /*#__PURE__*/_jsx(Select, {
+        size: "small",
+        fullWidth: true,
+        value: nav?.value,
+        onChange: e => {
+          const {
+            value
+          } = e.target;
+          const selected = getNav(value, navOptions);
+          setNav(selected);
+          setNavValue("");
+        },
+        displayEmpty: true,
+        children: navOptions.map((navOption, i) => {
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: navOption.value,
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              children: navOption.label
             })
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 6,
-          children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
-            placeholder: nav?.placeholder,
-            nav: nav,
-            onChange: onChange,
-            value: navValue,
-            openInNewTab: openInNewTab,
-            onNewTabChange: () => setOpenInNewTab(prev => !prev),
-            services: customProps.services
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(DialogActions, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        onClick: handleClose,
-        sx: classes.closeBtn,
-        children: "Cancel"
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: () => {
-          onSave({
-            linkType: nav?.value,
-            navValue,
-            openInNewTab
-          });
+          }, i);
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          paddingTop: "14px"
         },
-        sx: classes.saveBtn,
-        children: "Save"
+        children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
+          placeholder: nav?.placeholder,
+          nav: nav,
+          onChange: onChange,
+          value: navValue,
+          openInNewTab: openInNewTab,
+          onNewTabChange: () => setOpenInNewTab(prev => !prev),
+          services: customProps.services
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "div",
+        sx: classes.mobileActionBtns,
+        children: /*#__PURE__*/_jsx(ActionsButtons, {
+          classes: classes,
+          onCancel: handleClose,
+          onSave: onSubmit
+        })
+      })]
+    });
+  } else {
+    return /*#__PURE__*/_jsxs(Dialog, {
+      onClose: handleClose,
+      open: true,
+      sx: classes.dialogContainer,
+      fullWidth: true,
+      maxWidth: "sm",
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: "What do you want to link to?"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": "close",
+        onClick: handleClose,
+        sx: classes.closeIcon,
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        dividers: true,
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          spacing: 2,
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 6,
+            sx: classes.gridDivider,
+            children: /*#__PURE__*/_jsx(FormControl, {
+              children: /*#__PURE__*/_jsx(RadioGroup, {
+                value: nav?.value,
+                children: navOptions?.map((navOption, i) => {
+                  return /*#__PURE__*/_jsx(FormControlLabel, {
+                    value: navOption.value,
+                    control: /*#__PURE__*/_jsx(Radio, {}),
+                    label: navOption.label,
+                    onChange: () => {
+                      setNav(navOption);
+                      setNavValue("");
+                    }
+                  }, i);
+                })
+              })
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 6,
+            children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
+              placeholder: nav?.placeholder,
+              nav: nav,
+              onChange: onChange,
+              value: navValue,
+              openInNewTab: openInNewTab,
+              onNewTabChange: () => setOpenInNewTab(prev => !prev),
+              services: customProps.services
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsx(DialogActions, {
+        children: /*#__PURE__*/_jsx(ActionsButtons, {
+          classes: classes,
+          onCancel: handleClose,
+          onSave: onSubmit
+        })
       })]
+    });
+  }
+}
+function ActionsButtons({
+  classes,
+  onCancel,
+  onSave
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: onCancel,
+      sx: classes.closeBtn,
+      children: "Cancel"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: onSave,
+      sx: classes.saveBtn,
+      children: "Save"
     })]
   });
 }

package/dist/Editor/common/LinkSettings/style.js

@@ -50,6 +50,14 @@ const ButtonNavSettingsStyles = () => ({
   },
   gridDivider: {
     borderRight: "1px solid rgba(0, 0, 0, 0.12)"
+  },
+  mobileActionBtns: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+    paddingTop: "14px",
+    marginTop: "14px",
+    borderTop: theme => `1px solid ${theme.palette.grey[300]}`
   }
 });
 export default ButtonNavSettingsStyles;

package/dist/Editor/common/SwipeableDrawer/index.js

@@ -0,0 +1,34 @@
+import { Box, SwipeableDrawer, Typography } from "@mui/material";
+import DrawerStyles from "./style";
+import { grey } from "@mui/material/colors";
+import { styled } from "@mui/material/styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Puller = styled("div")(({
+  theme
+}) => ({
+  width: 30,
+  height: 6,
+  backgroundColor: theme?.palette?.mode === "light" ? grey[300] : grey[900],
+  borderRadius: 3,
+  margin: "auto",
+  marginTop: "14px"
+}));
+function SwipeableDrawerComponent({
+  open,
+  onClose,
+  children
+}) {
+  const classes = DrawerStyles();
+  return /*#__PURE__*/_jsxs(SwipeableDrawer, {
+    anchor: "bottom",
+    open: true,
+    onClose: onClose,
+    sx: classes.drawerContainer,
+    children: [/*#__PURE__*/_jsx(Puller, {}), /*#__PURE__*/_jsx(Box, {
+      sx: classes.childContainer,
+      children: children
+    })]
+  });
+}
+export default SwipeableDrawerComponent;

package/dist/Editor/common/SwipeableDrawer/style.js

@@ -0,0 +1,12 @@
+const Styles = () => ({
+  drawerContainer: {
+    "& .MuiDrawer-paper": {
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8
+    }
+  },
+  childContainer: {
+    padding: "20px"
+  }
+});
+export default Styles;

package/dist/Editor/utils/helper.js

@@ -296,4 +296,5 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
     };
   }
   return props;
-};
+};
+export const allowedDomains = ["youtube.com", "lemcal.com", "facebook.com", "calendly.com"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.2.8",
+  "version": "3.3.0",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -39,6 +39,7 @@
     "react-scripts": "5.0.1",
     "react-signature-canvas": "^1.0.6",
     "react-slick": "^0.29.0",
+    "sanitize-html": "^2.13.0",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",
     "slate-hyperscript": "^0.100.0",
@@ -63,7 +64,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agmac23/Desktop/surya/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac23/Desktop/surya/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [