@flozy/editor 1.9.0 → 1.9.2

package/dist/Editor/Editor.css

@@ -1,3 +1,11 @@
+.editor-wrapper {
+  font-family: "Inter", sans-serif;
+  color: #0f172a;
+  line-height: 1.43;
+  font-weight: 400;
+  letter-spacing: 0.01071em;
+}
+
 .editor-t-wrapper {
   font-family: "PoppinsRegular", "Helvetica", "Arial", sans-serif;
   position: relative;
@@ -222,6 +230,7 @@ blockquote {
   color: #ffffff;
   font-weight: bold;
   opacity: 1;
+  border-radius: 32px;
 }
 
 .signature-btn-container button:hover {

package/dist/Editor/Elements/Attachments/Attachments.js

@@ -55,6 +55,8 @@ const Attachments = props => {
           className: "pdf-i"
         }) : type === "xls" ? /*#__PURE__*/_jsx(Icon, {
           icon: "excelIcon"
+        }) : type === "csv" ? /*#__PURE__*/_jsx(Icon, {
+          icon: "csvIcon"
         }) : /*#__PURE__*/_jsx(TextSnippetIcon, {
           className: "doc-i"
         })

package/dist/Editor/Elements/Divider/Divider.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Divider = props => {
+  const {
+    attributes,
+    children
+  } = props;
+  return /*#__PURE__*/_jsxs("div", {
+    ...attributes,
+    className: "dividerComponent",
+    contentEditable: "false",
+    style: {
+      userSelect: "none"
+    },
+    children: [/*#__PURE__*/_jsx("hr", {
+      contentEditable: "false",
+      className: "editorDivider",
+      style: {
+        userSelect: "none"
+      }
+    }), /*#__PURE__*/_jsx("span", {
+      style: {
+        display: "none"
+      },
+      children: children
+    })]
+  });
+};
+export default Divider;

package/dist/Editor/Elements/Divider/DividerButton.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { insertDivider } from "../../utils/divider";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DividerButton = props => {
+  const {
+    editor,
+    icoBtnType
+  } = props;
+  const handleClick = () => {
+    insertDivider(editor);
+  };
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
+    title: "Divider",
+    onClick: handleClick,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "divider"
+    }),
+    icoBtnType: icoBtnType
+  });
+};
+export default DividerButton;

package/dist/Editor/Elements/Embed/Embed.css

@@ -6,7 +6,7 @@
 
 .embed img {
   width: 100%;
-  height: 100%
+  height: auto
 }
 .embed iframe {
   width: 100%;
@@ -83,3 +83,8 @@
 .link-embed-wrapper-hover-container:hover .link-embed-wrapper {
   padding-top: 24px;
 }
+
+.editorDivider {
+  border-width: 1px 0 0;
+  border-color: rgba(55, 53, 47, .1607843137254902);
+}

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

@@ -25,7 +25,8 @@ const Image = ({
     bgColor,
     borderColor,
     borderRadius,
-    boxShadow
+    boxShadow,
+    width: oldWidth
   } = element;
   const {
     readOnly
@@ -39,14 +40,26 @@ const Image = ({
   const {
     vertical,
     horizantal
-  } = alignment || {};
+  } = typeof alignment === "object" ? alignment : {
+    horizantal: alignment,
+    vertical: "center"
+  };
   const editor = useSlateStatic();
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const path = ReactEditor.findPath(editor, element);
+  const getSize = () => {
+    if (element?.size === undefined) {
+      return {
+        widthInPercent: parseInt(oldWidth)
+      };
+    } else {
+      return element?.size || {};
+    }
+  };
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
-    size: element?.size,
+    size: getSize(),
     onChange: uSize => {
       Transforms.setNodes(editor, {
         size: uSize
@@ -65,7 +78,7 @@ const Image = ({
     if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, element);
       setParentDOM(dom);
-      onLoad(element?.size || {});
+      onLoad(getSize());
     }
   }, []);
   const handleImageClick = () => {
@@ -165,8 +178,8 @@ const Image = ({
       className: "embed-image-wrpr",
       style: {
         position: "relative",
-        width: `${width}`,
-        height: `${size.height}px`
+        width: `${width}`
+        // height: `${size.height}px`,
       },
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,

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

@@ -6,6 +6,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import SettingsIcon from "@mui/icons-material/Settings";
 import FormElements from "./FormElements";
 import FieldPopup from "./FieldPopup";
+import { getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormField = props => {
@@ -83,11 +84,13 @@ const FormField = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
-    xs: grid,
     ...attributes,
     className: "form-field",
-    style: {
-      position: "relative"
+    sx: {
+      position: "relative",
+      width: {
+        ...getBreakPointsValue(grid, null, "overrideGridSize", true)
+      }
     },
     children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
       fieldProps: elementProps

package/dist/Editor/Styles/EditorStyles.js

@@ -97,7 +97,6 @@ const editorStyles = ({
       justifyContent: "center",
       alignItems: "center",
       position: "relative",
-      padding: "0px 12px",
       "&:hover": {
         "& .ed-section-inner": {
           "& .element-toolbar.ss": {

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -8,6 +8,7 @@ import AddTemplates from "../PopupTool/AddTemplates";
 import miniToolbarStyles from "./Styles";
 import usePopupStyle from "../PopupTool/PopupToolStyle";
 import PopperHeader from "../PopupTool/PopperHeader";
+import { getSelectedText } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -34,6 +35,7 @@ const MiniToolbar = props => {
   const [popper, setPopper] = useState(null);
   const [anchorEl, setAnchorEl] = useState(null);
   const [fullScreen, setFullScreen] = useState(false);
+  const [search, setSearch] = useState("");
   const PopupComponent = POPUP_TYPES[popper] || null;
   const open = Boolean(PopupComponent);
   const DialogComp = !fullScreen ? Popper : Dialog;
@@ -47,8 +49,10 @@ const MiniToolbar = props => {
     }
   }, [editor.selection]);
   const handleClick = type => e => {
-    setPopper(type);
-    setAnchorEl(e.currentTarget);
+    if (getSelectedText(editor)?.length === 0) {
+      setPopper(type);
+      setAnchorEl(e.currentTarget);
+    }
   };
   const onClose = () => {
     setPopper(null);
@@ -57,6 +61,9 @@ const MiniToolbar = props => {
   const toggleFullscreen = () => {
     setFullScreen(!fullScreen);
   };
+  const onSearch = e => {
+    setSearch(e?.target?.value || "");
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
@@ -96,14 +103,18 @@ const MiniToolbar = props => {
           onClose: onClose,
           needFullscreen: FULLSCREEN_POPUP[popper],
           fullScreen: fullScreen,
-          toggleFullscreen: toggleFullscreen
+          toggleFullscreen: toggleFullscreen,
+          search: search,
+          onSearch: onSearch
         }), /*#__PURE__*/_jsx(PopupComponent, {
           classes: popupStyles,
           editor: editor,
           customProps: customProps,
           fullScreen: fullScreen,
           setPopper: setPopper,
-          onClose: onClose
+          onClose: onClose,
+          search: search,
+          onSearch: onSearch
         })]
       }) : null
     })]

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box, CircularProgress } from "@mui/material";
+import { Grid, Tabs, Tab, CircularProgress } from "@mui/material";
+import TemplateCard from "./TemplateCard";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Categories = props => {
@@ -47,7 +48,9 @@ const AddTemplates = props => {
     editor,
     fullScreen,
     customProps,
-    onClose
+    onClose,
+    search,
+    onSearch
   } = props;
   const {
     services
@@ -78,6 +81,7 @@ const AddTemplates = props => {
     setLoading(false);
   };
   const handleChange = (event, newValue) => {
+    onSearch("");
     setCategory(newValue);
     setFilteredTemplates(templates.filter(f => f.category === newValue));
   };
@@ -89,6 +93,13 @@ const AddTemplates = props => {
       console.log(err);
     }
   };
+  const filterByTitle = f => {
+    if (!search) {
+      return true;
+    } else {
+      return f.title.toLowerCase().includes(search);
+    }
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     className: `templates ${fullScreen ? "fullscreen" : ""}`,
@@ -109,32 +120,13 @@ const AddTemplates = props => {
       sx: classes.templateCardsWrpr,
       children: [/*#__PURE__*/_jsx(ProgressBar, {
         loading: loading
-      }), filteredTemplates.map(m => {
-        return /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 4,
-          children: /*#__PURE__*/_jsxs(Card, {
-            sx: classes.templateCard,
-            onClick: onSelectTemplate(m),
-            children: [/*#__PURE__*/_jsxs(Box, {
-              sx: classes.templateCardMediaWrpr,
-              children: [/*#__PURE__*/_jsx("div", {
-                className: "img-loader-wrapper"
-              }), /*#__PURE__*/_jsx(CardMedia, {
-                className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
-                component: "div",
-                image: m?.thumbnail,
-                alt: m?.title,
-                sx: classes.templateCardMedia
-              })]
-            }), /*#__PURE__*/_jsx(CardContent, {
-              style: {
-                height: "30px"
-              },
-              children: m?.title
-            })]
-          })
-        }, `template_${m.id}`);
+      }), filteredTemplates.filter(filterByTitle).map(m => {
+        return /*#__PURE__*/_jsx(TemplateCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: m,
+          fullScreen: fullScreen
+        }, `template_Card_${m.id}_popup`);
       })]
     })]
   });

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

@@ -1,10 +1,27 @@
 import React from "react";
-import { Grid, Typography, IconButton, Tooltip } from "@mui/material";
+import { Grid, Typography, IconButton, Tooltip, TextField } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
+import { Search } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const SearchBox = props => {
+  const {
+    search,
+    classes,
+    handleChange
+  } = props;
+  return /*#__PURE__*/_jsx(TextField, {
+    sx: classes.searchBox,
+    size: "small",
+    InputProps: {
+      startAdornment: /*#__PURE__*/_jsx(Search, {})
+    },
+    value: search,
+    onChange: handleChange
+  });
+};
 const PopperHeader = props => {
   const {
     title,
@@ -12,7 +29,9 @@ const PopperHeader = props => {
     onClose,
     needFullscreen,
     fullScreen,
-    toggleFullscreen
+    toggleFullscreen,
+    search,
+    onSearch
   } = props;
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
@@ -42,7 +61,11 @@ const PopperHeader = props => {
       }), /*#__PURE__*/_jsxs(Grid, {
         sx: classes.textFormatLabel,
         justifyContent: "end",
-        children: [needFullscreen ? /*#__PURE__*/_jsx(Tooltip, {
+        children: [needFullscreen ? /*#__PURE__*/_jsx(SearchBox, {
+          classes: classes,
+          search: search,
+          handleChange: onSearch
+        }) : null, needFullscreen ? /*#__PURE__*/_jsx(Tooltip, {
           title: "Toggle Fullscreen",
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {

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

@@ -5,6 +5,7 @@ const usePopupStyle = () => ({
     marginBottom: "12px !important",
     border: "1px solid #E0E0E0",
     borderRadius: "10px",
+    maxWidth: "100%",
     "&.fullscreen": {
       marginBottom: "0px !important",
       "& .papper-wrpr": {
@@ -23,6 +24,7 @@ const usePopupStyle = () => ({
     overflow: "auto",
     "&.templates": {
       width: "500px",
+      maxWidth: "100%",
       "&.fullscreen": {
         width: "100%",
         maxHeight: "fit-content"
@@ -144,12 +146,16 @@ const usePopupStyle = () => ({
     position: "relative",
     padding: "4px",
     margin: "8px",
+    marginBottom: "0px",
     border: "1px solid rgba(0, 0, 0, 0.1)",
     borderRadius: "10px",
     backgroundColor: "#FEFEFE",
     overflow: "hidden",
     "&:hover": {
-      border: "1px solid #2563EB"
+      border: "1px solid #2563EB",
+      "& .template-card-action": {
+        display: "flex"
+      }
     },
     "& .img-loader-wrapper": {
       position: "absolute",
@@ -172,6 +178,10 @@ const usePopupStyle = () => ({
       height: `${window.innerHeight - 300}px`
     }
   },
+  templateCardTitle: {
+    fontSize: "12px",
+    padding: "6px 8px"
+  },
   pageWidthBtn: {
     color: "#64748B",
     marginTop: "8px",
@@ -221,6 +231,44 @@ const usePopupStyle = () => ({
   defaultBtn: {
     color: "#0F172A",
     textTransform: "none"
+  },
+  templateCardBtnGrp: {
+    display: "none",
+    position: "absolute",
+    flexDirection: "column",
+    left: 0,
+    bottom: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1,
+    width: "100%",
+    background: "linear-gradient(180deg, #0F172A00, #0f172ae0 96%)",
+    padding: "10px",
+    boxSizing: "border-box",
+    "& .blueBtn": {
+      background: "#2563EB !important",
+      borderRadius: "7px",
+      padding: "7px 15px",
+      color: "#FFF",
+      width: "100px",
+      marginBottom: "10px"
+    },
+    "& .outlineBtn": {
+      border: "1px solid #D7DBEC",
+      borderRadius: "7px",
+      padding: "7px 15px",
+      color: "#FFF",
+      width: "100px"
+    }
+  },
+  searchBox: {
+    marginRight: "12px",
+    "& input": {
+      padding: "6px 12px"
+    },
+    "& svg": {
+      color: "#CCC"
+    }
   }
 });
 export default usePopupStyle;

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { Grid, Card, CardMedia, CardContent, Box, Button } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PreviewAndSelect = props => {
+  const {
+    classes,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsxs(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    children: [/*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    }), /*#__PURE__*/_jsx(Button, {
+      href: data?.previewLink,
+      target: "_blank",
+      className: "outlineBtn",
+      children: "Preview"
+    })]
+  });
+};
+const TemplateCard = props => {
+  const {
+    classes,
+    m,
+    onSelectTemplate,
+    fullScreen
+  } = props;
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 4,
+    style: {
+      minWidth: "150px",
+      minHeight: "200px"
+    },
+    children: /*#__PURE__*/_jsxs(Card, {
+      sx: classes.templateCard,
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: classes.templateCardMediaWrpr,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "img-loader-wrapper"
+        }), /*#__PURE__*/_jsx(CardMedia, {
+          className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.templateCardMedia
+        }), /*#__PURE__*/_jsx(PreviewAndSelect, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
+      }), /*#__PURE__*/_jsx(CardContent, {
+        sx: classes.templateCardTitle,
+        children: m?.title
+      })]
+    })
+  }, `template_${m.id}`);
+};
+export default TemplateCard;

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Popper, Fade, Paper, Popover } from "@mui/material";
+import { Popper, Fade, Paper } from "@mui/material";
 import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";

package/dist/Editor/Toolbar/Toolbar.js

@@ -29,6 +29,7 @@ import "./styles.css";
 import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
 import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
 import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
+import DividerButton from "../Elements/Divider/DividerButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const RenderToolbarIcon = props => {
@@ -199,6 +200,12 @@ export const RenderToolbarIcon = props => {
           customProps: customProps,
           icoBtnType: icoBtnType
         }, element.id);
+      case "divider":
+        return /*#__PURE__*/_jsx(DividerButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
       default:
         return null;
     }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -180,6 +180,11 @@ export const toolbarGroups = [[{
   id: 42,
   type: "table",
   group: "elements"
+}, {
+  id: 48,
+  format: "divider",
+  type: "divider",
+  group: "elements"
 }], [{
   id: 28,
   format: "grid",

package/dist/Editor/common/Icon.js

@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -194,7 +194,9 @@ const iconList = {
   rightArrow: /*#__PURE__*/_jsx(RightArrow, {}),
   checkListButton: /*#__PURE__*/_jsx(CheckListButton, {}),
   checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
-  excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {})
+  excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {}),
+  csvIcon: /*#__PURE__*/_jsx(CsvIcon, {}),
+  divider: /*#__PURE__*/_jsx(DividerIcon, {})
 };
 const Icon = props => {
   const {

package/dist/Editor/common/Shorthands/elements.js

@@ -9,6 +9,8 @@ import { toggleBlock } from "../../utils/SlateUtilityFunctions";
 import { TableUtil } from "../../utils/table";
 import Icon from "../Icon";
 import EmojiButton from "../../Elements/Emoji/EmojiButton";
+import DividerButton from "../../Elements/Divider/DividerButton";
+import { insertDivider } from "../../utils/divider";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{
   name: "Heading 1",
@@ -134,6 +136,17 @@ const ELEMENTS_LIST = [{
     const table = new TableUtil(editor);
     table.insertTable(3, 3);
   }
+}, {
+  name: "Divider",
+  group: "Elements",
+  desc: "",
+  type: "divider",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "divider"
+  }),
+  onInsert: editor => {
+    insertDivider(editor);
+  }
 }, {
   name: "Grid",
   group: "Elements",

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

@@ -23,6 +23,7 @@ const BannerSpacing = props => {
   }
   const [size] = useWindowResize();
   const value = getBreakPointsValue(val, size?.device);
+  console.log(value, val, size?.device);
   const handleChange = e => {
     let changeAll = {};
     if (lockSpacing) {

package/dist/Editor/common/iconslist.js

@@ -1648,4 +1648,29 @@ export const ExcelIcon = () => /*#__PURE__*/_jsx("svg", {
       })
     })
   })
+});
+export const CsvIcon = () => /*#__PURE__*/_jsxs("svg", {
+  width: "32",
+  height: "32",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("rect", {
+    width: "32",
+    height: "32",
+    rx: "3.69038",
+    fill: "#E0E0E0"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M26.1095 9.38475H20.3567V3.63197C20.3567 3.51461 20.3101 3.40205 20.2271 3.31906C20.1441 3.23608 20.0315 3.18945 19.9142 3.18945H7.52358C7.40621 3.18945 7.29366 3.23608 7.21067 3.31906C7.12768 3.40205 7.08105 3.51461 7.08105 3.63197V16.0226C7.08105 16.1399 7.12768 16.2525 7.21067 16.3355C7.29366 16.4185 7.40621 16.4651 7.52358 16.4651H19.4716V23.5454H7.52358C7.40621 23.5454 7.29366 23.5921 7.21067 23.6751C7.12768 23.758 7.08105 23.8706 7.08105 23.988V27.5281C7.08105 27.6455 7.12768 27.7581 7.21067 27.841C7.29366 27.924 7.40621 27.9707 7.52358 27.9707H26.1095C26.2268 27.9707 26.3394 27.924 26.4224 27.841C26.5054 27.7581 26.552 27.6455 26.552 27.5281V9.82728C26.552 9.70991 26.5054 9.59735 26.4224 9.51437C26.3394 9.43138 26.2268 9.38475 26.1095 9.38475Z",
+    fill: "white"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M19.9118 15.5752H5.75112C5.50672 15.5752 5.30859 15.7733 5.30859 16.0177V23.9831C5.30859 24.2275 5.50672 24.4256 5.75112 24.4256H19.9118C20.1562 24.4256 20.3543 24.2275 20.3543 23.9831V16.0177C20.3543 15.7733 20.1562 15.5752 19.9118 15.5752Z",
+    fill: "#66BB6A"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M26.4208 9.5098L20.2255 3.3145C20.1636 3.25209 20.0845 3.20953 19.9983 3.19224C19.9121 3.17495 19.8228 3.18372 19.7416 3.21742C19.6604 3.25113 19.5911 3.30824 19.5425 3.38149C19.4939 3.45474 19.4682 3.54079 19.4688 3.62869V9.82399C19.4688 9.94135 19.5154 10.0539 19.5984 10.1369C19.6814 10.2199 19.7939 10.2665 19.9113 10.2665H26.1066C26.1945 10.267 26.2805 10.2413 26.3538 10.1928C26.427 10.1442 26.4841 10.0749 26.5178 9.99369C26.5515 9.91251 26.5603 9.82313 26.543 9.73695C26.5257 9.65077 26.4832 9.5717 26.4208 9.5098Z",
+    fill: "#E0E0E0"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.1788 20.5847H10.9753C10.9475 20.8284 10.8559 21.0604 10.7098 21.2573C10.5697 21.4397 10.3875 21.5855 10.1788 21.6821C9.9552 21.7844 9.71217 21.8373 9.46631 21.837C9.23734 21.8459 9.00918 21.805 8.79756 21.7171C8.58593 21.6293 8.39588 21.4965 8.24052 21.3281C7.91249 20.9659 7.74073 20.4888 7.7626 20.0006C7.74301 19.5143 7.91093 19.039 8.23167 18.673C8.37983 18.5042 8.56321 18.37 8.76889 18.2797C8.97456 18.1895 9.19753 18.1455 9.42206 18.1508C9.64785 18.1457 9.87206 18.1898 10.0791 18.2799C10.2862 18.3701 10.4712 18.5042 10.6213 18.673C10.8099 18.8938 10.9313 19.1641 10.9709 19.4518H10.1788C10.1395 19.2957 10.0472 19.158 9.91768 19.0624C9.77323 18.9681 9.60336 18.9202 9.43091 18.9252C9.30533 18.9217 9.18061 18.9471 9.06632 18.9992C8.95203 19.0514 8.8512 19.129 8.77155 19.2261C8.59958 19.4467 8.51173 19.7212 8.52374 20.0006C8.51183 20.2814 8.60313 20.5569 8.7804 20.775C8.86139 20.8714 8.96321 20.9482 9.07819 20.9996C9.19317 21.0509 9.31832 21.0755 9.44418 21.0715C9.6028 21.0807 9.76013 21.0382 9.89257 20.9505C10.025 20.8627 10.1254 20.7344 10.1788 20.5847ZM11.6612 20.7174H12.3914C12.4223 20.8647 12.507 20.9953 12.6289 21.0836C12.7507 21.1719 12.9011 21.2118 13.0507 21.1954C13.1892 21.2025 13.3261 21.1636 13.4402 21.0847C13.4868 21.0509 13.5244 21.0062 13.5499 20.9546C13.5753 20.9029 13.5878 20.8458 13.5862 20.7882C13.5903 20.7117 13.5686 20.636 13.5244 20.5734C13.4803 20.5108 13.4163 20.4649 13.3428 20.4431C13.3103 20.4431 13.1628 20.3988 12.9003 20.3103C12.6226 20.2507 12.3565 20.146 12.1126 20.0006C11.9949 19.9147 11.9001 19.8011 11.8368 19.6699C11.7735 19.5387 11.7436 19.3938 11.7497 19.2483C11.7437 19.1007 11.7703 18.9535 11.8277 18.8174C11.8851 18.6812 11.9718 18.5594 12.0816 18.4606C12.3279 18.2522 12.6446 18.1461 12.9667 18.1641C13.2843 18.152 13.5966 18.2488 13.8517 18.4385C13.9632 18.52 14.0542 18.6265 14.1172 18.7494C14.1802 18.8724 14.2135 19.0083 14.2146 19.1465H13.4756C13.452 19.036 13.3871 18.9387 13.2941 18.8745C13.2012 18.8103 13.0872 18.7842 12.9755 18.8013C12.8543 18.7955 12.7346 18.8297 12.6348 18.8987C12.5939 18.9286 12.5609 18.968 12.5386 19.0135C12.5162 19.0589 12.5052 19.1091 12.5064 19.1598C12.5032 19.2161 12.5165 19.2721 12.5448 19.3209C12.5732 19.3697 12.6152 19.4091 12.6657 19.4341C12.8434 19.5084 13.029 19.5619 13.2189 19.5934C13.4646 19.6346 13.7013 19.7184 13.9181 19.8413C14.0591 19.9314 14.1741 20.0568 14.2517 20.205C14.3293 20.3533 14.3669 20.5192 14.3606 20.6865C14.3679 20.8731 14.3255 21.0584 14.2376 21.2233C14.1498 21.3881 14.0196 21.5266 13.8605 21.6246C13.61 21.7706 13.3227 21.8412 13.033 21.8282C12.8135 21.8476 12.5925 21.8121 12.3901 21.7248C12.1877 21.6375 12.0102 21.5012 11.8736 21.3281C11.7519 21.146 11.6787 20.9358 11.6612 20.7174ZM16.0466 21.7706L14.719 18.2305H15.5111L16.3741 20.6201L17.1131 18.2305H17.8875L16.7148 21.7706H16.0466Z",
+    fill: "white"
+  })]
 });

package/dist/Editor/helper/theme.js

@@ -13,6 +13,9 @@ export const getDevice = width => {
   }
 };
 const copyAllLg = (value, ot) => {
+  if (value && value["lg"] !== undefined) {
+    return value;
+  }
   return BREAKPOINTS_DEVICES.reduce((a, b) => {
     return {
       ...a,
@@ -42,7 +45,12 @@ export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) =>
       if (typeof value !== "object") {
         return value;
       }
-      return value ? value[breakpoint] || value["lg"] : value;
+      if (value && value["lg"] === undefined) {
+        let val = copyAllLg(value, ot);
+        return val ? val[breakpoint] || val["lg"] : val;
+      } else {
+        return value ? value[breakpoint] || value["lg"] : value;
+      }
     } else if (typeof value === "object") {
       return !breakpoint && value["lg"] ? !ov ? value : overrideValues(value, ot) : value[breakpoint] || copyAllLg(value, ot);
     } else {

package/dist/Editor/hooks/useIntersection.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+const useIntersection = (element, rootMargin, threshold) => {
+  const [isVisible, setState] = useState(false);
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setState(entry.isIntersecting);
+    }, {
+      rootMargin,
+      threshold
+    });
+    element?.current && observer.observe(element.current);
+    return () => {
+      if (element && element?.current) {
+        observer.unobserve(element.current);
+      }
+    };
+  }, [element?.current]);
+  return isVisible;
+};
+export default useIntersection;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -38,6 +38,7 @@ import Attachments from "../Elements/Attachments/Attachments";
 import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
 import insertNewLine from "./insertNewLine";
+import Divider from "../Elements/Divider/Divider";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -491,6 +492,7 @@ export const getBlock = props => {
     case "docs":
     case "pdf":
     case "xls":
+    case "csv":
       return /*#__PURE__*/_jsx(Attachments, {
         ...props
       });
@@ -506,6 +508,10 @@ export const getBlock = props => {
         },
         children: children
       });
+    case "divider":
+      return /*#__PURE__*/_jsx(Divider, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/dist/Editor/utils/attachments.js

@@ -24,7 +24,7 @@ export const insertAttachments = (editor, data) => {
     if (url) {
       const attachmentsNode = createAttachmentsNode({
         ...data,
-        type: docType?.includes("pdf") ? "pdf" : docType?.includes("doc") || docType?.includes("page") ? "docs" : docType?.includes("xls") || docType?.includes("numbers") ? "xls" : "docs"
+        type: docType?.includes("pdf") ? "pdf" : docType?.includes("doc") || docType?.includes("page") ? "docs" : docType?.includes("xls") || docType?.includes("numbers") ? "xls" : docType?.includes("csv") ? "csv" : "docs"
       });
       Transforms.insertNodes(editor, [attachmentsNode]);
       insertNewLine(editor);

package/dist/Editor/utils/divider.js

@@ -0,0 +1,12 @@
+import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
+export const insertDivider = editor => {
+  const divider = {
+    type: "divider",
+    children: [{
+      text: ""
+    }]
+  };
+  Transforms.insertNodes(editor, divider);
+  insertNewLine(editor);
+};

package/dist/Editor/utils/gridItem.js

@@ -10,6 +10,12 @@ export const gridItem = (props = {}) => {
       }]
     }],
     bgColor: "rgba(255, 255, 255, 0)",
+    bannerSpacing: {
+      left: 8,
+      right: 8,
+      top: 8,
+      bottom: 8
+    },
     ...(props || {})
   };
 };

package/dist/Editor/utils/helper.js

@@ -1,3 +1,4 @@
+import { Editor } from "slate";
 export const formatDate = (date, format = "MM/DD/YYYY") => {
   if (!date) return "";
   var d = new Date(date),
@@ -71,4 +72,13 @@ export const isTextSelected = selection => {
     console.log(err);
     return false;
   }
+};
+export const getSelectedText = editor => {
+  try {
+    console.log("Q1", Editor.string(editor, editor?.selection));
+    return Editor.string(editor, editor?.selection);
+  } catch (err) {
+    console.log(err);
+    return '';
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -22,7 +22,9 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "analytics": "^0.8.11",
     "animate.css": "^4.1.1",
+    "countries-and-timezones": "^3.6.0",
     "emoji-mart": "^5.5.2",
     "html2canvas": "^1.4.1",
     "husky": "^8.0.3",