@flozy/editor 3.2.7 → 3.2.9

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/Embed/Frames/DarkFrame.js

@@ -8,7 +8,8 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -41,7 +42,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
         fill: `url(#imageSource_${id})`,
         ref: imageRef,
         style: {
-          cursor: "move"
+          cursor: readOnly ? "pointer" : "move"
         }
       })
     }), /*#__PURE__*/_jsxs("defs", {

package/dist/Editor/Elements/Embed/Frames/ImageFrame.js

@@ -16,7 +16,8 @@ const ImageFrame = props => {
     id,
     framePos,
     onChange,
-    readOnly
+    readOnly,
+    handleImageClick
   } = props;
   const svgRef = useRef();
   const [dom, setDOM] = useState(null);
@@ -75,6 +76,8 @@ const ImageFrame = props => {
     if (!readOnly) {
       setSelectedPath(id);
       setAnchorEl(svgRef?.current);
+    } else {
+      handleImageClick();
     }
   };
   const onClose = () => {

package/dist/Editor/Elements/Embed/Frames/InstaFrame.js

@@ -8,7 +8,8 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -98,7 +99,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
       strokeWidth: "5",
       fill: `url(#imageSource_${id})`,
       style: {
-        cursor: "move"
+        cursor: readOnly ? "pointer" : "move"
       },
       ref: imageRef
     }), /*#__PURE__*/_jsx("defs", {

package/dist/Editor/Elements/Embed/Frames/InstaFrameDark.js

@@ -8,7 +8,8 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -98,7 +99,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
       fill: `url(#imageSource_${id})`,
       ref: imageRef,
       style: {
-        cursor: "move"
+        cursor: readOnly ? "pointer" : "move"
       }
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {

package/dist/Editor/Elements/Embed/Frames/LiteFrame.js

@@ -8,7 +8,8 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -44,7 +45,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
         fill: `url(#imageSource_${id})`,
         ref: imageRef,
         style: {
-          cursor: "move"
+          cursor: readOnly ? "pointer" : "move"
         }
       })
     }), /*#__PURE__*/_jsxs("defs", {

package/dist/Editor/Elements/Embed/Frames/RoundedDark.js

@@ -8,7 +8,8 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -42,7 +43,7 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
         fill: `url(#imageSource_${id})`,
         ref: imageRef,
         style: {
-          cursor: "move"
+          cursor: readOnly ? "pointer" : "move"
         }
       })
     }), /*#__PURE__*/_jsxs("defs", {

package/dist/Editor/Elements/Embed/Frames/RoundedLight.js

@@ -8,7 +8,8 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -39,7 +40,7 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
       fill: `url(#imageSource_${id})`,
       ref: imageRef,
       style: {
-        cursor: "move"
+        cursor: readOnly ? "pointer" : "move"
       }
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {

package/dist/Editor/Elements/Embed/Frames/RoundedLightB2.js

@@ -8,7 +8,8 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -39,7 +40,7 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
       fill: `url(#imageSource_${id})`,
       ref: imageRef,
       style: {
-        cursor: "move"
+        cursor: readOnly ? "pointer" : "move"
       }
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {

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

@@ -15,6 +15,90 @@ 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 ToolBar = ({
+  isEmpty,
+  onSettings,
+  setOpenNav
+}) => {
+  return !isEmpty ? /*#__PURE__*/_jsxs("div", {
+    className: "element-toolbar visible-on-hover",
+    contentEditable: false,
+    style: {
+      top: "0px",
+      right: "0px",
+      left: "auto",
+      margin: "0px"
+    },
+    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 = ({
+  readOnly,
+  setOpenSettings,
+  element,
+  handleImageClick,
+  onTouchEnd,
+  path
+}) => {
+  const {
+    alt,
+    url,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    boxShadow,
+    frame = null,
+    objectFit,
+    webAddress
+  } = element;
+  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+    component: "button",
+    className: "element-empty-btn",
+    contentEditable: false,
+    onClick: () => {
+      setOpenSettings(true);
+    },
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "image"
+    }), "Add Image"]
+  }) : /*#__PURE__*/_jsx(Box, {
+    component: "img",
+    className: "emb-img",
+    sx: {
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
+      objectFit: "cover",
+      boxShadow: boxShadow || "none",
+      height: objectFit ? "100%" : "auto",
+      opacity: frame ? 0 : 1,
+      cursor: webAddress ? "pointer" : "",
+      border: `1px solid ${borderColor}`,
+      borderWidth: `${borderWidth}`?.includes("px") ? borderWidth : `${borderWidth}px`
+    },
+    alt: alt,
+    src: url,
+    onClick: handleImageClick,
+    onTouchEnd: onTouchEnd // for mobile
+    ,
+    "data-path": path.join(","),
+    draggable: false
+  });
+};
 const Image = ({
   attributes,
   element,
@@ -23,14 +107,9 @@ const Image = ({
 }) => {
   const {
     url,
-    alt,
     bannerSpacing,
     alignment,
     bgColor,
-    borderColor,
-    borderRadius,
-    borderWidth,
-    boxShadow,
     width: oldWidth,
     xsHidden,
     objectFit,
@@ -132,67 +211,6 @@ const Image = ({
   const onPosChange = data => {
     onSave(data);
   };
-  const ToolBar = () => {
-    return !isEmpty ? /*#__PURE__*/_jsxs("div", {
-      className: "element-toolbar visible-on-hover",
-      contentEditable: false,
-      style: {
-        top: "0px",
-        right: "0px",
-        left: "auto",
-        margin: "0px"
-      },
-      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",
-      contentEditable: false,
-      onClick: () => {
-        setOpenSettings(true);
-      },
-      children: [/*#__PURE__*/_jsx(Icon, {
-        icon: "image"
-      }), "Add Image"]
-    }) : /*#__PURE__*/_jsx(Box, {
-      component: "img",
-      className: "emb-img",
-      sx: {
-        borderRadius: {
-          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-        },
-        objectFit: "cover",
-        boxShadow: boxShadow || "none",
-        height: objectFit ? "100%" : "auto",
-        opacity: frame ? 0 : 1,
-        cursor: webAddress ? "pointer" : "",
-        border: `1px solid ${borderColor}`,
-        borderWidth: `${borderWidth}`?.includes('px') ? borderWidth : `${borderWidth}px`
-      },
-      alt: alt,
-      src: url,
-      onClick: handleImageClick,
-      onTouchEnd: onTouchEnd,
-      "data-path": path.join(","),
-      draggable: false
-    });
-  };
   const getWidth = () => {
     if (resizing) {
       return {
@@ -246,7 +264,18 @@ const Image = ({
         position: "relative",
         ...getWidth()
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {
+        isEmpty: isEmpty,
+        onSettings: onSettings,
+        setOpenNav: setOpenNav
+      }), /*#__PURE__*/_jsx(ImageContent, {
+        readOnly: readOnly,
+        setOpenSettings: setOpenSettings,
+        element: element,
+        handleImageClick: handleImageClick,
+        onTouchEnd: onTouchEnd,
+        path: path
+      }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",
         "data-path": path.join(","),
@@ -256,7 +285,8 @@ const Image = ({
           href: url,
           id: path.join(","),
           onChange: onPosChange,
-          readOnly: readOnly
+          readOnly: readOnly,
+          handleImageClick: handleImageClick
         })
       }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,

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/Grid/Grid.js

@@ -22,6 +22,58 @@ const GridSettingsPoupComp = {
   section: SectionPopup,
   grid: GridPopup
 };
+const GridToolBar = ({
+  selected,
+  showTool,
+  onSettings,
+  onAddGridItem,
+  onAddSection,
+  onMoveSection,
+  path
+}) => {
+  return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
+    className: "grid-container-toolbar",
+    contentEditable: false,
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Grid Settings",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onSettings,
+        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Add Grid Item",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onAddGridItem,
+        children: /*#__PURE__*/_jsx(GridAddGridIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Duplicate",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onAddSection(),
+        children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
+      })
+    }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Move Up",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onMoveSection("up"),
+          children: /*#__PURE__*/_jsx(ArrowUpwardIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Move Down",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onMoveSection("down"),
+          children: /*#__PURE__*/_jsx(ArrowDownwardIcon, {})
+        })
+      })]
+    }) : null]
+  }) : null;
+};
 const Grid = props => {
   const {
     attributes,
@@ -211,50 +263,6 @@ const Grid = props => {
       })]
     }) : null;
   };
-  const GridToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
-      className: "grid-container-toolbar",
-      contentEditable: false,
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Grid Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Add Grid Item",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onAddGridItem,
-          children: /*#__PURE__*/_jsx(GridAddGridIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Duplicate",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onAddSection(),
-          children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
-        })
-      }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: "Move Up",
-          arrow: true,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: onMoveSection("up"),
-            children: /*#__PURE__*/_jsx(ArrowUpwardIcon, {})
-          })
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: "Move Down",
-          arrow: true,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: onMoveSection("down"),
-            children: /*#__PURE__*/_jsx(ArrowDownwardIcon, {})
-          })
-        })]
-      }) : null]
-    }) : null;
-  };
   const sectionId = id ? {
     id
   } : {};
@@ -312,7 +320,15 @@ const Grid = props => {
       }), /*#__PURE__*/_jsx("div", {
         className: "element-selector-dots br",
         children: " "
-      }), /*#__PURE__*/_jsx(GridToolBar, {})]
+      }), /*#__PURE__*/_jsx(GridToolBar, {
+        selected: selected,
+        showTool: showTool,
+        onSettings: onSettings,
+        onAddGridItem: onAddGridItem,
+        onAddSection: onAddSection,
+        onMoveSection: onMoveSection,
+        path: path
+      })]
     }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
       element: element,
       onSave: onSave,

package/dist/Editor/Elements/Grid/GridItem.js

@@ -10,6 +10,29 @@ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { isEmptyNode } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridItemToolbar = ({
+  selected,
+  showTool,
+  onSettings
+}) => {
+  return selected && !showTool ? /*#__PURE__*/_jsx("div", {
+    contentEditable: false,
+    className: "grid-item-toolbar",
+    style: {
+      top: "-14px",
+      left: "-14px"
+    },
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: "Grid Item Settings",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: onSettings,
+        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+      })
+    })
+  }) : null;
+};
 const GridItem = props => {
   const {
     attributes,
@@ -51,25 +74,6 @@ const GridItem = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const isEmpty = !readOnly && isEmptyNode(editor, element?.children, path) ? "empty" : "";
-  const GridItemToolbar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
-      contentEditable: false,
-      className: "grid-item-toolbar",
-      style: {
-        top: "-14px",
-        left: "-14px"
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Grid Item Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      })
-    }) : null;
-  };
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -153,7 +157,11 @@ const GridItem = props => {
       }), /*#__PURE__*/_jsx("div", {
         className: "element-selector-dots br",
         children: " "
-      }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
+      }), /*#__PURE__*/_jsx(GridItemToolbar, {
+        selected: selected,
+        showTool: showTool,
+        onSettings: onSettings
+      })]
     }), /*#__PURE__*/_jsx(Box, {
       className: `gi-inner-cw ${animation || ""} content-editable ${isEmpty} np`,
       component: "div",

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/plugins/withHTML.js

@@ -83,6 +83,17 @@ const withHtml = editor => {
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
+      const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
+      if (isGoogleSheet) {
+        const table = parsed.body.querySelector("table");
+        const colGrp = table.querySelector("colgroup");
+        if (colGrp) {
+          colGrp.remove();
+        }
+        const fragment = deserialize(table);
+        Transforms.insertFragment(editor, [fragment]);
+        return;
+      }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
       Transforms.insertFragment(editor, formattedFragment);

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.7",
+  "version": "3.2.9",
   "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": [