@flozy/editor 3.8.9 → 3.9.0

package/dist/Editor/Toolbar/Toolbar.js

@@ -31,7 +31,6 @@ import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
 import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
 import DividerButton from "../Elements/Divider/DividerButton.js";
 import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
-import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const RenderToolbarIcon = props => {
@@ -134,12 +133,6 @@ export const RenderToolbarIcon = props => {
           customProps: customProps,
           icoBtnType: icoBtnType
         }, element.id);
-      case "freegrid":
-        return /*#__PURE__*/_jsx(FreeGridButton, {
-          editor: editor,
-          customProps: customProps,
-          icoBtnType: icoBtnType
-        }, element.id);
       case "newLine":
         return /*#__PURE__*/_jsx(NewLineButton, {
           editor: editor,

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -196,11 +196,6 @@ export const toolbarGroups = [[{
   format: "grid",
   type: "grid",
   group: "elements"
-}, {
-  id: 50,
-  format: "freegrid",
-  type: "freegrid",
-  group: "elements"
 }, {
   id: 41,
   format: "emoji",

package/dist/Editor/common/Icon.js

@@ -7,12 +7,11 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage } from "react-icons/io";
-import { CiGrid32 } from "react-icons/ci";
 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, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -216,12 +215,6 @@ const iconList = {
     }
   }),
   calenderNewIcon: /*#__PURE__*/_jsx(CalendarIconNew, {}),
-  freegrid: /*#__PURE__*/_jsx(CiGrid32, {
-    size: 20,
-    style: {
-      fill: "#64748B"
-    }
-  }),
   text: /*#__PURE__*/_jsx(Text, {}),
   textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
   phone: /*#__PURE__*/_jsx(Phone, {}),

package/dist/Editor/common/MentionsPopup/MentionsListCard.js

@@ -39,7 +39,12 @@ const MentionsListCard = props => {
       },
       alt: name,
       children: /*#__PURE__*/_jsx(Avatar, {
-        src: avatar_filename
+        sx: {
+          background: 'linear-gradient(90deg, #5351FC 0%, #19A9FC 100%)'
+        },
+        alt: name,
+        src: avatar_filename,
+        children: !avatar_filename && name && name.charAt(0).toUpperCase()
       })
     }), /*#__PURE__*/_jsx(Box, {
       sx: {

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

@@ -35,18 +35,14 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
     setOpenAI
   } = useEditorContext();
   useEffect(() => {
-    try {
-      if (target && chars.length > 0) {
-        const domRange = ReactEditor.toDOMRange(editor, target);
-        const rect = domRange?.getBoundingClientRect();
-        setAnchorEl({
-          clientWidth: rect.width,
-          clientHeight: rect.height,
-          getBoundingClientRect: () => rect
-        });
-      }
-    } catch (err) {
-      console.log(err);
+    if (target && chars.length > 0) {
+      const domRange = ReactEditor.toDOMRange(editor, target);
+      const rect = domRange.getBoundingClientRect();
+      setAnchorEl({
+        clientWidth: rect.width,
+        clientHeight: rect.height,
+        getBoundingClientRect: () => rect
+      });
     }
   }, [chars.length, editor, index, target]);
   useEffect(() => {

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

@@ -1,11 +1,10 @@
 import React, { useState } from "react";
-import { useTheme } from "@mui/material";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, IconButton, Tooltip } from "@mui/material";
 import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
-import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
@@ -13,8 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
-  const theme = useTheme();
-  const classes = SectionStyle(theme);
+  const classes = SectionStyle();
   const {
     children,
     element,
@@ -80,32 +78,23 @@ const Section = props => {
       at: path
     });
   };
-  const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
   const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "needHover" : "";
   const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
     backgroundImage: `url(${sectionBackgroundImage})`
   } : {};
-  const edSectionSp = groupByBreakpoint({
-    padding: {
-      ...getTRBLBreakPoints(sectionBannerSpacing)
-    },
-    borderRadius: {
-      ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
-    }
-  }, theme);
-  const edInnerSp = groupByBreakpoint({
-    width: {
-      ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
-    }
-  }, theme);
-  return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
+  return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
     sx: {
       ...classes.root,
       background: sectionBgColor,
       ...sectionBgImage,
-      ...edSectionSp,
+      padding: {
+        ...getTRBLBreakPoints(sectionBannerSpacing)
+      },
+      borderRadius: {
+        ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
+      },
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
       justifyContent: vertical
@@ -114,7 +103,9 @@ const Section = props => {
       className: "ed-section-inner",
       sx: {
         position: "relative",
-        ...edInnerSp
+        width: {
+          ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
+        }
       },
       children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
         ...props

package/dist/Editor/common/Section/styles.js

@@ -1,4 +1,4 @@
-const SectionStyle = theme => ({
+const SectionStyle = () => ({
   root: {
     "&:hover": {
       "& .dh-para": {
@@ -38,11 +38,6 @@ const SectionStyle = theme => ({
       "&.active": {
         opacity: 1
       }
-    },
-    "& .ed-section-inner": {
-      [theme.breakpoints.between("xs", "md")]: {
-        maxWidth: `320px !important`
-      }
     }
   }
 });

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

@@ -10,7 +10,6 @@ import { TableUtil } from "../../utils/table";
 import Icon from "../Icon";
 import EmojiButton from "../../Elements/Emoji/EmojiButton";
 import { insertDivider } from "../../utils/divider";
-import { insertFreeGrid } from "../../utils/freegrid";
 import { Transforms } from "slate";
 import { insertInfinityAI } from "../../utils/infinityAI";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -169,17 +168,6 @@ const ELEMENTS_LIST = [{
   onInsert: editor => {
     insertGrid(editor);
   }
-}, {
-  name: "Free Grid",
-  group: "Elements",
-  desc: "",
-  type: "freegrid",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "freegrid"
-  }),
-  onInsert: editor => {
-    insertFreeGrid(editor);
-  }
 }, {
   name: "Accordion",
   group: "Elements",

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

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React from "react";
 import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
-import { getBreakPointsValue } from "../../../helper/theme";
+import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,11 +23,7 @@ const BannerSpacing = props => {
     lockSpacing = true;
   }
   const [size] = useWindowResize();
-  const pro_value = getBreakPointsValue(val, size?.device);
-  const [value, setValue] = useState(pro_value);
-  useState(() => {
-    setValue(pro_value);
-  }, [pro_value]);
+  const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};
     if (lockSpacing) {
@@ -35,16 +31,13 @@ const BannerSpacing = props => {
         changeAll[m] = e.target.value;
       });
     }
-    const up_value = {
-      ...value,
-      ...changeAll,
-      [e.target.name]: e.target.value
-    };
     onChange({
       [key]: {
         ...getBreakPointsValue(val, null),
         [size?.device]: {
-          ...up_value
+          ...value,
+          ...changeAll,
+          [e.target.name]: e.target.value
         }
       }
     });
@@ -85,10 +78,12 @@ const BannerSpacing = props => {
         component: "input",
         sx: classes.sapcingInput,
         name: "top",
-        value: !lockSpacing ? "" : pro_value?.top,
-        className: "sliderInput",
+        value: !lockSpacing ? "" : getCustomizationValue(value?.top),
+        className: "sliderInput removeScroll",
         disabled: !lockSpacing,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -130,50 +125,54 @@ const BannerSpacing = props => {
             children: [/*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxTop",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "top",
-                value: value?.top,
-                className: "borderInput",
+                value: getCustomizationValue(value?.top),
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.topRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxRight",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "right",
-                value: value?.right,
-                className: "borderInput",
+                value: getCustomizationValue(value?.right),
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxBottom",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "bottom",
-                value: value?.bottom,
-                className: "borderInput",
+                value: getCustomizationValue(value?.bottom),
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxLeft",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "left",
-                className: "borderInput",
-                value: value?.left,
+                className: "borderInput removeScroll",
+                value: getCustomizationValue(value?.left),
                 style: {
                   ...squreStyle.topLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             })]
           })

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

@@ -2,7 +2,7 @@ import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { getBreakPointsValue } from "../../../helper/theme";
+import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -80,11 +80,13 @@ const BorderRadius = props => {
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
-        value: !lockRadius ? "" : value?.topLeft || 0,
-        className: "sliderInput",
+        value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
+        className: "sliderInput removeScroll",
         name: "topLeft",
         disabled: !lockRadius,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -125,10 +127,10 @@ const BorderRadius = props => {
             borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
           children: [/*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topLeft",
-            value: value?.topLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topLeft,
@@ -136,10 +138,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topRight",
-            value: value?.topRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topRight,
@@ -148,10 +150,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomLeft",
-            value: value?.bottomLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomLeft,
@@ -160,10 +162,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomRight",
-            value: value?.bottomRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomRight,

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -6,12 +6,23 @@ const SelectBox = props => {
   const {
     value,
     data,
-    onChange
+    onChange,
+    elementProps
   } = props;
   const {
     key,
     placeholder
   } = data;
+  const [checkedValue, setCheckedValue] = useState(false);
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
+      setCheckedValue(true);
+      isFirstRender.current = false;
+    } else {
+      setCheckedValue(value);
+    }
+  }, [elementProps.element, value]);
   const handleChange = e => {
     onChange({
       [key]: e.target.checked
@@ -26,7 +37,7 @@ const SelectBox = props => {
     children: [/*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: value,
-        checked: value,
+        checked: checkedValue,
         onChange: handleChange
       }),
       label: placeholder

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

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import { Grid, TextField, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Text = props => {
   const {
-    value: pro_value,
+    value,
     data,
     onChange
   } = props;
@@ -13,9 +13,7 @@ const Text = props => {
     placeholder,
     width
   } = data;
-  const [value, setValue] = useState(pro_value);
   const handleChange = e => {
-    setValue(e.target.value);
     onChange({
       [key]: e.target.value
     });

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

@@ -7,7 +7,7 @@ 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";
-export const StyleContent = props => {
+const StyleContent = props => {
   const {
     value,
     renderTabs,
@@ -87,7 +87,7 @@ const StyleBuilder = props => {
       ...data,
       field_type: data?.element
     });
-    if (data?.hasOwnProperty("name")) {
+    if (data?.hasOwnProperty('name')) {
       setElementProps({
         ...elementProps,
         ...data,

package/dist/Editor/common/StyleBuilder/sectionStyle.js

@@ -1,12 +1,4 @@
-const sectionStyle = [{
-  tab: "General",
-  value: "sectionName",
-  fields: [{
-    label: "Section Name",
-    key: "sectionName",
-    type: "text"
-  }]
-}, {
+const gridStyle = [{
   tab: "Colors",
   value: "sectionColors",
   fields: [{
@@ -29,7 +21,6 @@ const sectionStyle = [{
 }, {
   tab: "Padding",
   value: "sectionBannerSpacing",
-  hideOnFGS: true,
   fields: [{
     label: "Padding",
     key: "sectionBannerSpacing",
@@ -46,7 +37,6 @@ const sectionStyle = [{
 }, {
   tab: "Position",
   value: "position",
-  hideOnFGS: true,
   fields: [{
     label: "Set Postion (Vertical & Horizantal)",
     key: "sectionAlignment",
@@ -55,11 +45,10 @@ const sectionStyle = [{
 }, {
   tab: "Size",
   value: "gridSize",
-  hideOnFGS: true,
   fields: [{
     label: "Width Size",
     key: "sectionGridSize",
     type: "gridSize"
   }]
 }];
-export default sectionStyle;
+export default gridStyle;