@flozy/editor 10.4.0 → 10.4.1

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { Box } from "@mui/material";
-import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../../helper/theme";
+import { useTheme } from "@emotion/react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormText = props => {
   const {
@@ -19,11 +20,26 @@ const FormText = props => {
     textSize,
     fontFamily,
     fontWeight,
+    marginSpacing,
     ...rest
   } = fieldProps;
   const onChange = e => {
     e.preventDefault();
   };
+  const theme = useTheme();
+  const buttonSX = {
+    ...groupByBreakpoint({
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
+      padding: {
+        ...getTRBLBreakPoints(bannerSpacing)
+      },
+      margin: {
+        ...getTRBLBreakPoints(marginSpacing)
+      }
+    }, theme)
+  };
   return /*#__PURE__*/_jsx("div", {
     style: {
       width: "100%",
@@ -40,16 +56,17 @@ const FormText = props => {
         padding: {
           ...getTRBLBreakPoints(bannerSpacing)
         },
-        height: height || "auto",
-        borderColor: borderColor || "transparent",
+        height: height && `${height} !important`,
+        borderColor: borderColor && `${borderColor} !important`,
         borderWidth: borderWidth || "1px",
         borderRadius: {
           ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
         },
+        ...buttonSX,
         borderStyle: borderStyle || "solid",
-        color: textColor || "#000",
-        background: bgColor || "transparent",
-        fontSize: textSize || "inherit",
+        color: textColor && `${textColor} !important`,
+        background: bgColor && `${bgColor} !important`,
+        fontSize: textSize && `${textSize} !important`,
         fontFamily: fontFamily || "PoppinsRegular",
         fontWeight: `${fontWeight} !important` || "400 !important"
       }

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

@@ -35,12 +35,12 @@ const FormTextArea = props => {
       onChange: onChange,
       sx: {
         width: "100%",
-        border: `1px solid ${borderColor || "#FFF"}`,
+        borderBlockStyle: "solid",
         padding: {
           ...getTRBLBreakPoints(bannerSpacing)
         },
         height: height || "150px",
-        borderColor: `${borderColor || "transparent"} !important`,
+        borderColor: borderColor && `${borderColor} !important`,
         borderWidth: borderWidth || "1px",
         borderRadius: {
           ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)

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

@@ -1,12 +1,15 @@
 import React, { useState } from "react";
-import { Transforms, Node } from "slate";
+import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, useTheme } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import SettingsIcon from "@mui/icons-material/Settings";
 import FormElements from "./FormElements";
 import FieldPopup from "./FieldPopup";
 import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
+import { DeleteIcon } from "../../assets/svg/AIIcons";
+import { SettingsIcon } from "../../assets/svg/TableIcons";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import useCommonStyle from "../../commonStyle";
+import { getNode } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormField = props => {
@@ -33,11 +36,15 @@ const FormField = props => {
   const formPath = path.slice(0, path.length - 1);
   const {
     metadatamapping
-  } = Node?.get(editor, formPath) || {};
+  } = getNode(editor, formPath) || {};
   const updatedElement = {
     ...element,
     metadatamapping
   };
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const classes = useCommonStyle(appTheme);
   const [openSetttings, setOpenSettings] = useState(false);
   const onSettings = () => {
     setOpenSettings(true);
@@ -77,7 +84,6 @@ const FormField = props => {
         top: "24px",
         bottom: 0,
         margin: "auto",
-        height: "42px",
         zIndex: 101
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -110,7 +116,8 @@ const FormField = props => {
     className: "form-field",
     sx: {
       position: "relative",
-      ...fieldSX
+      ...fieldSX,
+      ...classes?.fieldBtnSettings
     },
     children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
       fieldProps: elementProps

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

@@ -9,20 +9,20 @@ const FormStyles = theme => ({
     color: "#94A3B8"
   },
   bodyTextArea: {
-    '& .mini-editor-cls': {
-      padding: '12px',
-      '&:focus-visible': {
-        outline: 'none',
-        border: 'none'
+    "& .mini-editor-cls": {
+      padding: "12px",
+      "&:focus-visible": {
+        outline: "none",
+        border: "none"
       }
     },
     "& .editorWorkflow": {
-      minHeight: '130px',
-      padding: '12px',
+      minHeight: "130px",
+      padding: "12px",
       paddingBottom: 0,
-      '&:focus-visible': {
-        outline: 'none',
-        border: 'none'
+      "&:focus-visible": {
+        outline: "none",
+        border: "none"
       }
     }
   },
@@ -105,7 +105,7 @@ const FormStyles = theme => ({
     padding: "4px 22px",
     textTransform: "none",
     border: "1px solid #D8DDE1",
-    minWidth: '126px',
+    minWidth: "126px",
     "& svg": {
       "& path": {
         stroke: "#64748B"
@@ -169,17 +169,19 @@ const FormStyles = theme => ({
     }
   },
   colorButtonSingle: {
+    border: "1.5px solid #DCE4EC !important",
     "&.active": {
-      "&:before": {
-        content: '" "',
-        position: "absolute",
-        top: "-5px",
-        left: "-5px",
-        width: "calc(100% + 4px)",
-        height: "calc(100% + 4px)",
-        border: "3px solid blue",
-        borderRadius: "50%"
-      }
+      // "&:before": {
+      //   content: '" "',
+      //   position: "absolute",
+      //   top: "-5px",
+      //   left: "-5px",
+      //   width: "calc(100% + 4px)",
+      //   height: "calc(100% + 4px)",
+      //   border: "3px solid blue",
+      //   borderRadius: "50%",
+      // },
+      outline: "2px solid #2563EB"
     }
   },
   colorButtonsInner: {
@@ -249,7 +251,7 @@ const FormStyles = theme => ({
     }
   },
   root: {
-    padding: '10px'
+    padding: "10px"
   }
 });
 export default FormStyles;

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -22,6 +22,8 @@ import { DEFAULT_TABLE_NODE } from "../../utils/table";
 import itemOptions from "./Options/sectionItemOptions";
 import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import { useDebouncedCallback } from "use-debounce";
+import { getNewElementXsValues } from "./helper";
+import updateFormName from "../../utils/updateFormName";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MAX_DEVICE_WIDTH = {
@@ -35,11 +37,15 @@ export const useFreeGrid = () => {
   return useContext(FreeGridContext);
 };
 const FreeGrid = props => {
+  const {
+    theme: appTheme
+  } = useEditorContext();
   const theme = useTheme();
   const breakpoint = useBreakpoints(theme);
   const classes = useFreeGridStyles({
     theme,
-    MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint]
+    MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint],
+    appTheme
   });
   const editor = useSlateStatic();
   const {
@@ -136,8 +142,10 @@ const FreeGrid = props => {
           });
           break;
         case "duplicateSection":
+          const currentNode = Node.get(editor, cur_root_path);
+          const updatedFormNameNode = updateFormName(currentNode);
           Transforms.insertNodes(editor, [{
-            ...JSON.parse(JSON.stringify(Node.get(editor, cur_root_path)))
+            ...JSON.parse(JSON.stringify(updatedFormNameNode))
           }], {
             at: next_path
           });
@@ -176,6 +184,10 @@ const FreeGrid = props => {
   const handleAddElementClick = type => () => {
     const isEmpty = isEmptySection();
     const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
+    const {
+      xsVal,
+      sectionHeightXs
+    } = getNewElementXsValues(type, element?.children);
     switch (type) {
       case "addText":
         Transforms.insertNodes(editor, [{
@@ -192,7 +204,8 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 170,
-          height: 30
+          height: 30,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -210,20 +223,6 @@ const FreeGrid = props => {
               linkType: "webAddress"
             },
             iconPosition: "start",
-            bgColor: "#2563EB",
-            textColor: "#FFF",
-            borderRadius: {
-              topLeft: 30,
-              topRight: 30,
-              bottomLeft: 30,
-              bottomRight: 30
-            },
-            bannerSpacing: {
-              left: 12,
-              top: 12,
-              right: 12,
-              bottom: 12
-            },
             textAlign: "center",
             label: "Get Started"
           }],
@@ -232,7 +231,8 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 143,
-          height: 50
+          height: 50,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -258,8 +258,9 @@ const FreeGrid = props => {
           top: 0,
           width: 217,
           height: 173,
-          width_xs: 217,
-          height_xs: 173
+          // width_xs: 217,
+          // height_xs: 173,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -282,7 +283,8 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 170,
-          height: 80
+          height: 80,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -295,7 +297,8 @@ const FreeGrid = props => {
             images: []
           }), {
             height: 370,
-            width: 650
+            width: 650,
+            ...(xsVal || {})
           })
         }], {
           at: [...insertAt]
@@ -307,7 +310,8 @@ const FreeGrid = props => {
             ...DEFAULT_TABLE_NODE()
           }, {
             height: 150,
-            width: 400
+            width: 400,
+            ...(xsVal || {})
           })
         }], {
           at: [...insertAt]
@@ -331,7 +335,8 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 400,
-          height: 300
+          height: 300,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -343,7 +348,9 @@ const FreeGrid = props => {
             children: [{
               text: ""
             }]
-          }, {}, "freegridBox")
+          }, {
+            ...(xsVal || {})
+          }, "freegridBox")
         }], {
           at: [...insertAt]
         });
@@ -354,7 +361,8 @@ const FreeGrid = props => {
             ...FORM_NODE()
           }, {
             height: 92,
-            width: 400
+            width: 400,
+            ...(xsVal || {})
           })
         }], {
           at: [...insertAt]
@@ -368,7 +376,8 @@ const FreeGrid = props => {
             })
           }, {
             height: 60,
-            width: 400
+            width: 400,
+            ...(xsVal || {})
           })
         }], {
           at: [...insertAt]
@@ -389,19 +398,18 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 170,
-          height: 30
+          height: 30,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
         break;
       default:
     }
-    if (breakpoint === "lg") {
+    if (xsVal) {
       setSelectedElement({});
-
-      // auto align in mobile
       Transforms.setNodes(editor, {
-        xs_updatedOn: null,
+        height_xs: sectionHeightXs,
         updated_at: new Date().getTime()
       }, {
         at: path

package/dist/Editor/Elements/FreeGrid/FreeGridBox.js

@@ -8,7 +8,7 @@ import { onDropItem, ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
 import useBreakpoints from "../../hooks/useBreakpoints";
 import { breakpointValues, formatBreakpointValues } from "./breakpointConstants";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { getBreakPointsValue } from "../../helper/theme";
+import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
 import { bringItemToFB } from "../../helper";
 import itemOptions from "./Options/sectionItemOptions";
@@ -160,6 +160,11 @@ const FreeGridBox = props => {
   const isBoxHeader = useMemo(() => {
     return element?.children?.some(c => c.childType === "appHeader" && !c.xs_updatedOn);
   }, [element]);
+  const boxSp = groupByBreakpoint({
+    borderRadius: {
+      ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
+    }
+  }, theme);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_box_item_${path.join("|")}_${updated_at}_${breakpoint}`,
     className: `freegrid-item path-${path.length} breakpoint-${breakpoint} freegrid-box_${path.join("_")}`,
@@ -226,9 +231,7 @@ const FreeGridBox = props => {
         "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
       },
       sx: {
-        borderRadius: {
-          ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
-        },
+        ...boxSp,
         background: sectionBgColor,
         backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
         borderColor: borderColor || "transparent",

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -320,6 +320,7 @@ const FreeGridItem = props => {
     breakpoint: breakpoint,
     customProps: customProps,
     translation: translation,
+    xsHidden: xsHidden,
     children: /*#__PURE__*/_jsxs(Box, {
       component: "div",
       ...attributes,

package/dist/Editor/Elements/FreeGrid/Options/More.js

@@ -5,12 +5,12 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const More = props => {
   const {
     handleClick,
-    breakpoint,
-    translation
+    translation,
+    breakpoint
   } = props;
   return /*#__PURE__*/_jsx(Box, {
     children: /*#__PURE__*/_jsxs(List, {
-      className: "item-list-wrpr",
+      className: "item-list-wrpr sectionMoreOption",
       children: [/*#__PURE__*/_jsx(ListItemButton, {
         className: "item-wrapper",
         onClick: handleClick("addSection"),
@@ -19,15 +19,15 @@ const More = props => {
         className: "item-wrapper",
         onClick: handleClick("duplicateSection"),
         children: translation?.translation("Duplicate Section")
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("deleteSection"),
-        children: "Delete Section"
       }), breakpoint === "xs" ? /*#__PURE__*/_jsx(ListItemButton, {
         className: "item-wrapper",
         onClick: handleClick("forceAutoAlignment"),
         children: "Force Auto Alignment"
-      }) : null]
+      }) : null, /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("deleteSection"),
+        children: "Delete Section"
+      })]
     })
   });
 };

package/dist/Editor/Elements/FreeGrid/helper.js

@@ -0,0 +1,115 @@
+import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
+import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
+import { RND_ITEMS } from "../../helper";
+export const ELEMENT_CASE = {
+  ADD_TEXT: "addText",
+  ADD_BUTTON: "addButton",
+  ADD_SIGNATURE: "addSignature",
+  ADD_IMAGE: "addImage",
+  ADD_VIDEO: "addVideo",
+  ADD_TABLE: "addTable",
+  ADD_CODE: "addCode",
+  ADD_BOX: "addBox",
+  ADD_FORM: "addForm",
+  ADD_APP_HEADER: "addAppHeader",
+  ADD_DIVIDER: "addDivider"
+};
+const commonXsValues = {
+  top_xs: 0,
+  marginTop_xs: 12,
+  left_xs: 24,
+  width_xs: 272,
+  xs_updatedOn: new Date().getTime()
+};
+const elementXsValues = {
+  [ELEMENT_CASE.ADD_TEXT]: {
+    ...commonXsValues,
+    height_xs: 50
+  },
+  [ELEMENT_CASE.ADD_BUTTON]: {
+    ...commonXsValues,
+    height_xs: 50
+  },
+  [ELEMENT_CASE.ADD_SIGNATURE]: {
+    ...commonXsValues,
+    height_xs: 173
+  },
+  [ELEMENT_CASE.ADD_IMAGE]: {
+    ...commonXsValues,
+    height_xs: 80
+  },
+  [ELEMENT_CASE.ADD_VIDEO]: {
+    ...commonXsValues,
+    height_xs: 300
+  },
+  [ELEMENT_CASE.ADD_TABLE]: {
+    ...commonXsValues,
+    height_xs: 165
+  },
+  [ELEMENT_CASE.ADD_CODE]: {
+    ...commonXsValues,
+    height: 300
+  },
+  [ELEMENT_CASE.ADD_BOX]: {
+    ...commonXsValues,
+    height_xs: 300
+  },
+  [ELEMENT_CASE.ADD_FORM]: {
+    ...commonXsValues,
+    height_xs: 80
+  },
+  [ELEMENT_CASE.ADD_APP_HEADER]: {
+    ...commonXsValues,
+    height_xs: 80
+  },
+  [ELEMENT_CASE.ADD_DIVIDER]: {
+    ...commonXsValues,
+    height_xs: 24
+  }
+};
+export const findMaxYValue = (sectionItems, breakpoint) => {
+  let maxY = 0;
+  sectionItems.forEach(item => {
+    const isHidden = breakpoint === "xs" && item.children.some(c => c.xsHidden);
+    if (item?.type && RND_ITEMS.includes(item.type) && !isHidden) {
+      const {
+        bottom
+      } = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
+      maxY = Math.max(maxY, bottom);
+    }
+  });
+  return maxY;
+};
+export const convertToGridArea = y => {
+  // Calculate grid position
+  const row = Math.floor(y / ROW_HEIGHT) + 1;
+
+  // to calculate difference inside the grid
+  const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
+
+  // Update grid area
+  const gridArea = `${row} / 1 / ${row + 1} / 2`;
+  return {
+    gridArea,
+    marginTop
+  };
+};
+export const getNewElementXsValues = (type, sectionItems) => {
+  const values = elementXsValues[type] || {};
+  const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
+  const {
+    gridArea,
+    marginTop
+  } = convertToGridArea(y);
+  const BUFFER_MARGIN_TOP = 12;
+  const xsVal = {
+    ...values,
+    gridArea_xs: gridArea,
+    marginTop_xs: marginTop + BUFFER_MARGIN_TOP
+  };
+  const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
+  return {
+    xsVal,
+    sectionHeightXs
+  };
+};