@flozy/editor 4.7.9 → 4.8.1

package/dist/Editor/CommonEditor.js

@@ -314,7 +314,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     site_id: site_id,
     page_title: page_title,
     isIframe: isIframe,
-    onDrawerOpen: onDrawerOpen
+    onDrawerOpen: onDrawerOpen,
+    ICON_API: "https://assets.agenciflow.com"
   };
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {

package/dist/Editor/Editor.css

@@ -1220,4 +1220,17 @@ blockquote {
 
 .dividerComponent:hover .divider-settings {
   display: block;
+}
+
+@media (max-width: 899px) {
+  .MuiPopover-root {
+    z-index: 1302 !important;
+}
+}
+
+.settingsHeader {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  font-family: Inter, sans-serif;
+  text-transform: uppercase;
 }

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -129,7 +129,6 @@ function AppHeader(props) {
     }
   };
   const drawer = /*#__PURE__*/_jsxs(Box, {
-    onClick: handleDrawerToggle,
     sx: {
       textAlign: "center"
     },
@@ -139,6 +138,7 @@ function AppHeader(props) {
         my: 2,
         color: textColor
       },
+      onClick: closeDrawer,
       children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
         alt: `${appTitle} Logo`,
         style: {
@@ -150,16 +150,20 @@ function AppHeader(props) {
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
       children: menus.map((item, i) => {
         const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
+        const onButtonClick = e => {
+          closeDrawer();
+          setTimeout(() => {
+            buttonProps?.onClick(e);
+          }, 200);
+        };
         const onTouchEnd = e => {
           if (buttonProps?.onTouchEnd) {
-            buttonProps?.onTouchEnd(e);
-            closeDrawer();
+            onButtonClick(e);
           }
         };
         const onClick = e => {
           if (buttonProps?.onClick) {
-            buttonProps?.onClick(e);
-            closeDrawer();
+            onButtonClick(e);
           }
         };
         const props = {
@@ -171,6 +175,9 @@ function AppHeader(props) {
           disablePadding: true,
           children: /*#__PURE__*/_jsx(ListItemButton, {
             ...props,
+            component: "button",
+            href: "" // to avoid <a> tag
+            ,
             sx: {
               textAlign: "center"
             },

package/dist/Editor/Elements/Emoji/EmojiPicker.js

@@ -6,14 +6,16 @@ const EmojiPicker = props => {
   const {
     onEmojiSelect,
     onClose,
-    theme = 'light'
+    theme = 'light',
+    ...rest
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Picker, {
       data: data,
       onEmojiSelect: onEmojiSelect,
       onClickOutside: onClose,
-      theme: theme
+      theme: theme,
+      ...rest
     })
   });
 };

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

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Transforms } from "slate";
+import { Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -48,7 +49,15 @@ const Form = props => {
     textSize,
     fontFamily,
     textAlign,
-    alignment
+    alignment,
+    fieldFontFamily,
+    fieldFontWeight,
+    fieldTextSize,
+    fieldTextColor,
+    fieldBgColor,
+    fieldBorderColor,
+    fieldBorderWidth,
+    fieldBorderStyle
   } = element;
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
@@ -190,6 +199,24 @@ const Form = props => {
     }, {
       at: path
     });
+    // adding form field style to the current form node 
+    const currentNode = Node.get(editor, path);
+    if (currentNode) {
+      currentNode.children.forEach((item, index) => {
+        Transforms.setNodes(editor, {
+          bgColor: data?.fieldBgColor ? data?.fieldBgColor : "rgba(255, 255, 255, 1)",
+          borderColor: data?.fieldBorderColor ? data?.fieldBorderColor : "#ccc",
+          borderStyle: data?.fieldBorderStyle ? data?.fieldBorderStyle : "",
+          borderWidth: data?.fieldBorderWidth ? data?.fieldBorderWidth : "",
+          textColor: data?.fieldTextColor ? data?.fieldTextColor : "",
+          fontFamily: data?.fieldFontFamily ? data?.fieldFontFamily : "",
+          textSize: data?.fieldTextSize ? data?.fieldTextSize : "",
+          fontWeight: data?.fieldFontWeight ? data?.fieldFontWeight : ""
+        }, {
+          at: [...path, index]
+        });
+      });
+    }
     onClose();
   };
   const onClose = () => {
@@ -198,7 +225,16 @@ const Form = props => {
   const onAddFormField = () => {
     try {
       Transforms.insertNodes(editor, {
-        ...formField()
+        ...formField({
+          fontFamily: fieldFontFamily,
+          fontWeight: fieldFontWeight,
+          textSize: fieldTextSize,
+          textColor: fieldTextColor,
+          bgColor: fieldBgColor,
+          borderColor: fieldBorderColor,
+          borderWidth: fieldBorderWidth,
+          borderStyle: fieldBorderStyle
+        })
       }, {
         at: [...path, children.length]
       });

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

@@ -16,6 +16,9 @@ const FormCheckbox = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -46,7 +49,10 @@ const FormCheckbox = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormDate = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -47,7 +50,10 @@ const FormDate = props => {
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent",
-        paddingRight: '85px !important'
+        paddingRight: '85px !important',
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormEmail = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -47,7 +50,10 @@ const FormEmail = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormNumbers = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -63,7 +66,10 @@ const FormNumbers = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormRadioButton = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -46,7 +49,10 @@ const FormRadioButton = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormText = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -45,7 +48,10 @@ const FormText = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontSize: textSize || "inherit",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -15,6 +15,9 @@ const FormTextArea = props => {
     borderColor,
     textColor,
     bgColor,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -45,7 +48,9 @@ const FormTextArea = props => {
         borderStyle: borderStyle || "solid",
         color: `${textColor || "#000"} !important`,
         background: `${bgColor || "transparent"} !important`,
-        fontSize: '14px'
+        fontSize: textSize || "14px",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -1,7 +1,8 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
-import formStyle from "../../common/StyleBuilder/formStyle";
+import { formStyle } from "../../common/StyleBuilder/formStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const FormPopup = props => {
   const {
     element,
@@ -9,14 +10,16 @@ const FormPopup = props => {
     onClose,
     customProps
   } = props;
-  return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Form",
-    type: "formStyle",
-    element: element,
-    onSave: onSave,
-    onClose: onClose,
-    renderTabs: formStyle,
-    customProps: customProps
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(StyleBuilder, {
+      title: "Form",
+      type: "formStyle",
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      renderTabs: formStyle,
+      customProps: customProps
+    })
   });
 };
 export default FormPopup;

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

@@ -144,8 +144,27 @@ const FreeGridItem = props => {
   };
   const onAddFormField = () => {
     try {
+      const {
+        fieldFontFamily,
+        fieldFontWeight,
+        fieldTextSize,
+        fieldTextColor,
+        fieldBgColor,
+        fieldBorderColor,
+        fieldBorderWidth,
+        fieldBorderStyle
+      } = element?.children[0];
       Transforms.insertNodes(editor, {
-        ...formField()
+        ...formField({
+          fontFamily: fieldFontFamily ? fieldFontFamily : "",
+          fontWeight: fieldFontWeight ? fieldFontWeight : "",
+          textSize: fieldTextSize ? fieldTextSize : "",
+          textColor: fieldTextColor ? fieldTextColor : "",
+          bgColor: fieldBgColor ? fieldBgColor : "",
+          borderColor: fieldBorderColor ? fieldBorderColor : "",
+          borderWidth: fieldBorderWidth ? fieldBorderWidth : "",
+          borderStyle: fieldBorderStyle ? fieldBorderStyle : ""
+        })
       }, {
         at: [...path, 0, 0]
       });

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

@@ -62,7 +62,8 @@ const GridItem = props => {
     textColor,
     animation,
     cellGHeight,
-    xsHidden
+    xsHidden,
+    forceFullWidth
   } = element;
   const {
     vertical,
@@ -105,13 +106,17 @@ const GridItem = props => {
   const getBorderColor = () => {
     return borderColor || "transparent";
   };
+
+  // getting Grid Item Width value
+  const gridWidthBreakPointsValue = getBreakPointsValue(grid, null, "overrideGridSize", true);
   const getBRProps = groupByBreakpoint({
     display: {
       xs: xsHidden ? "none" : "inline-block",
       lg: "inline-block"
     },
     width: {
-      ...getBreakPointsValue(grid, null, "overrideGridSize", true)
+      ...getBreakPointsValue(grid, null, "overrideGridSize", true),
+      xs: forceFullWidth ? "100%" : gridWidthBreakPointsValue?.xs
     },
     height: {
       ...getBreakPointsValue(cellGHeight || "auto")

package/dist/Editor/Elements/Link/Link.js

@@ -81,7 +81,6 @@ const Link = props => {
     const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
     const navType = getLinkType(linkType, urlPath);
     const hideOpenLink = navType === "page" || !navType;
-    console.log("linkType", linkType, navType, hideOpenLink);
     return selected && focused ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       contentEditable: false,
@@ -117,7 +116,6 @@ const Link = props => {
     }) : null;
   };
   const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
-  console.log("buttonProps===>", buttonProps);
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
     children: [/*#__PURE__*/_jsx(Box, {

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -84,7 +84,8 @@ const FontLoader = props => {
       });
       let families = Array.from(fontSet);
       families = correctFontArray(families.join(", "));
-      families = families.map(font => font.replace(/\"/g, ""));
+      families = families?.map(font => font?.replace(/\"/g, ""));
+      families = families?.map(font => font?.replace(", sans-serif", "")); //This is temporary fix for patch
       loadFontsInBatches(families);
     }
   }, []);

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -1,10 +1,12 @@
 import React from "react";
 import { Transforms, Node } from "slate";
-import { Box } from "@mui/material";
+import { Accordion, AccordionDetails, AccordionSummary, Box, createTheme, ThemeProvider, Typography } from "@mui/material";
 import { StyleContent } from "../../../StyleBuilder";
-import formStyle from "../../../StyleBuilder/formStyle";
+import { formStyle } from "../../../StyleBuilder/formStyle";
 import { ReactEditor } from "slate-react";
+import { ExpandMoreOutlined } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormSettings = props => {
   const {
     editor,
@@ -14,7 +16,10 @@ const FormSettings = props => {
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
   const element = Node.get(editor, element_path);
-  const styleMaps = formStyle?.filter(f => !f?.hideOnFGS);
+  const styleMaps = formStyle;
+  const {
+    hideTools
+  } = customProps || {};
   const onChange = data => {
     const currentPath = ReactEditor.findPath(editor, element);
     const updateData = {
@@ -26,23 +31,150 @@ const FormSettings = props => {
     }, {
       at: [...currentPath, 0]
     });
+    // adding form field style to the current form node
+    const currentNode = Node.get(editor, element_path);
+    if (currentNode) {
+      currentNode?.children[0]?.children?.forEach((item, index) => {
+        Transforms.setNodes(editor, {
+          bgColor: data?.fieldBgColor ? data?.fieldBgColor : item?.bgColor,
+          borderColor: data?.fieldBorderColor ? data?.fieldBorderColor : item?.borderColor,
+          borderStyle: data?.fieldBorderStyle ? data?.fieldBorderStyle : item?.borderStyle,
+          borderWidth: data?.fieldBorderWidth ? data?.fieldBorderWidth : item?.borderWidth,
+          textColor: data?.fieldTextColor ? data?.fieldTextColor : item?.textColor,
+          fontFamily: data?.fieldFontFamily ? data?.fieldFontFamily : item?.fontFamily,
+          textSize: data?.fieldTextSize ? data?.fieldTextSize : item?.textSize,
+          fontWeight: data?.fieldFontWeight ? data?.fieldFontWeight : item?.fontWeight
+        }, {
+          at: [...currentPath, 0, index]
+        });
+      });
+    }
   };
   const handleClose = () => {
     console.log("close");
   };
+  const muiTheme = createTheme({
+    components: {
+      MuiAccordion: {
+        styleOverrides: {
+          root: {
+            padding: "0px",
+            "&.Mui-expanded": {
+              margin: "0"
+            }
+          }
+        },
+        defaultProps: {
+          elevation: 0
+        }
+      }
+    }
+  });
   return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "item-w",
     children: styleMaps?.map((m, i) => {
-      return /*#__PURE__*/_jsx(StyleContent, {
-        renderTabs: styleMaps,
-        value: m.value,
-        element: element,
-        customElement: element?.children?.[0] || null,
-        onChange: onChange,
-        customProps: customProps,
-        handleClose: handleClose
-      }, `tab_${m.value}_$${i}`);
+      if (m?.hasChildrenTabs) {
+        return /*#__PURE__*/_jsx(ThemeProvider, {
+          theme: muiTheme,
+          children: /*#__PURE__*/_jsxs(Accordion, {
+            defaultExpanded: true,
+            children: [/*#__PURE__*/_jsx(AccordionSummary, {
+              expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+              sx: {
+                padding: "0px"
+              },
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "h3",
+                className: "settingsHeader",
+                color: "primary",
+                style: {
+                  fontSize: "14px !important",
+                  fontWeight: "400"
+                },
+                children: m?.tab
+              })
+            }), /*#__PURE__*/_jsx(AccordionDetails, {
+              sx: {
+                padding: "5px"
+              },
+              children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
+                return /*#__PURE__*/_jsx(ThemeProvider, {
+                  theme: muiTheme,
+                  children: /*#__PURE__*/_jsxs(Accordion, {
+                    defaultExpanded: true,
+                    children: [/*#__PURE__*/_jsx(AccordionSummary, {
+                      expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+                      sx: {
+                        padding: "0px"
+                      },
+                      children: /*#__PURE__*/_jsx(Typography, {
+                        variant: "h3",
+                        className: "settingsHeader",
+                        color: "primary",
+                        style: {
+                          fontSize: "14px !important",
+                          fontWeight: "400"
+                        },
+                        children: field?.tab
+                      })
+                    }), /*#__PURE__*/_jsx(AccordionDetails, {
+                      sx: {
+                        padding: "0px"
+                      },
+                      children: /*#__PURE__*/_jsx(StyleContent, {
+                        renderTabs: [field],
+                        value: field.value,
+                        element: element,
+                        onChange: onChange,
+                        customElement: element?.children?.[0] || null,
+                        customProps: customProps,
+                        handleClose: handleClose
+                      }, `tab_${field.value}_${index}`)
+                    })]
+                  }, `accordion_${index}`)
+                }, index);
+              })
+            })]
+          }, `accordion_${i}`)
+        }, i);
+      } else {
+        return /*#__PURE__*/_jsx(ThemeProvider, {
+          theme: muiTheme,
+          children: /*#__PURE__*/_jsxs(Accordion, {
+            defaultExpanded: true,
+            children: [/*#__PURE__*/_jsx(AccordionSummary, {
+              expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+              sx: {
+                padding: "0px"
+              },
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "h3",
+                className: "settingsHeader",
+                color: "primary",
+                style: {
+                  fontSize: "14px !important",
+                  fontWeight: "400"
+                },
+                children: m?.tab
+              })
+            }), /*#__PURE__*/_jsx(AccordionDetails, {
+              sx: {
+                padding: "0px"
+              },
+              children: /*#__PURE__*/_jsx(StyleContent, {
+                renderTabs: styleMaps,
+                value: m.value,
+                element: element,
+                customElement: element?.children?.[0] || null,
+                onChange: onChange,
+                customProps: customProps,
+                handleClose: handleClose
+              }, `tab_${m.value}_$${i}`)
+            })]
+          }, `accordion_${i}`)
+        }, i);
+      }
     })
   });
 };

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

@@ -171,14 +171,10 @@ const RnD = props => {
               anchorEl: rndRef?.current
             });
           }
-          focusSelection(editor, {
-            path
-          });
+          // focusSelection(editor, { path });temporary fix for scroll issue
           break;
         case 2:
-          focusSelection(editor, {
-            path
-          });
+          // focusSelection(editor, { path });temporary fix for scroll issue
           setSelectedElement({
             path: str_path,
             enable: EDIT_MODES.includes(childType) ? 2 : 1,

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

@@ -5,6 +5,8 @@ import useWindowResize from "../../../hooks/useWindowResize";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
 import { useSlate } from "slate-react";
+
+// hideMetaDataOptions -- pass true to hide metadata option in select field 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -26,7 +28,8 @@ const TextOptions = props => {
     options,
     renderOption,
     width,
-    webFont = false
+    webFont = false,
+    hideMetaDataOptions = false
   } = data;
   const {
     fontFamilies
@@ -35,7 +38,7 @@ const TextOptions = props => {
   const [size] = useWindowResize();
   const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
   const metaDataMappingOptions = metaMappings?.boards || [];
-  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
+  const updatedOption = !hideMetaDataOptions && elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
   const handleChange = (e, d) => {
     if (isBreakpoint) {
       onChange({

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

@@ -1,38 +1,187 @@
-import { fontOptions } from "../../utils/font";
+import { fontOptions, fontWeightOptions } from "../../utils/font";
 import Icon from "../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
-const formStyle = [{
-  tab: "General",
-  value: "general",
+export const formStyle = [{
+  tab: "Form Settings",
+  value: "FormSetting",
+  hasChildrenTabs: true,
   fields: [{
-    label: "Form Name",
-    key: "formName",
-    type: "text"
+    tab: "General",
+    value: "general",
+    fields: [{
+      label: "Form Name",
+      key: "formName",
+      type: "text"
+    }, {
+      label: "Send Form to Email",
+      key: "email",
+      type: "text",
+      placeholder: "Enter Email to send the response..."
+    }, {
+      label: "Save Response",
+      key: "saveResponse",
+      type: "selectBox",
+      placeholder: "Save Response"
+    }]
   }, {
-    label: "Send Form to Email",
-    key: "email",
-    type: "text",
-    placeholder: "Enter Email to send the response..."
+    tab: "Form Title",
+    value: "formTitle",
+    fields: [{
+      label: "Title",
+      key: "formTitle",
+      type: "text"
+    }, {
+      label: "Font Family",
+      key: "fontFamily",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      options: fontOptions,
+      webFont: true,
+      width: 7,
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          style: {
+            fontFamily: option.value
+          },
+          children: option.text
+        });
+      }
+    }, {
+      label: "Font Size",
+      key: "textSize",
+      type: "fontSize",
+      width: 5,
+      placeholder: "16px"
+    }, {
+      label: "Text Align",
+      key: "textAlign",
+      type: "textAlign",
+      placeholder: "16px or 1em"
+    }]
+  }, {
+    tab: "Banner Spacing",
+    value: "bannerSpacing",
+    fields: [{
+      label: "Banner Spacing",
+      key: "bannerSpacing",
+      type: "bannerSpacing"
+    }]
+  }, {
+    tab: "Border",
+    value: "border",
+    fields: [{
+      label: "Border Radius",
+      key: "borderRadius",
+      type: "borderRadius"
+    }, {
+      label: "Border Width",
+      key: "borderWidth",
+      type: "text",
+      placeholder: "1px"
+    }, {
+      label: "Border Style",
+      key: "borderStyle",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      options: [{
+        text: "Solid",
+        value: "solid"
+      }, {
+        text: "Dotted",
+        value: "dotted"
+      }, {
+        text: "Dashed",
+        value: "dashed"
+      }],
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          children: option.text
+        });
+      }
+    }]
+  }, {
+    tab: "Colors",
+    value: "colors",
+    fields: [{
+      label: "Text Color",
+      key: "textColor",
+      type: "color",
+      needPreview: true
+    }, {
+      label: "Background Color",
+      key: "bgColor",
+      type: "color"
+    }, {
+      label: "Border Color",
+      key: "borderColor",
+      type: "color"
+    }]
+  }, {
+    tab: "Position",
+    value: "position",
+    fields: [{
+      label: "Set Postion (Vertical & Horizantal)",
+      key: "alignment",
+      type: "alignment"
+    }]
+  }, {
+    tab: "Background",
+    value: "backgroundImage",
+    fields: [{
+      label: "URL",
+      key: "backgroundImage",
+      type: "text"
+    }, {
+      label: "Background Image",
+      key: "backgroundImage",
+      type: "backgroundImage"
+    }]
+  }, {
+    tab: "Add to Boards",
+    value: "metadatamapping",
+    fields: [{
+      label: "Add response to contacts board",
+      key: "metadatamapping",
+      type: "metadatamapping",
+      compType: "card",
+      content: "By default, form responses are added as separate cards on the default contact board.",
+      value: "mappingToContactBoard",
+      infoIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: "info"
+      })
+    }, {
+      label: "Create a separate board",
+      key: "metadatamapping",
+      type: "metadatamapping",
+      compType: "card",
+      content: "By default, form responses are added as separate cards on a new board (Contact Us).",
+      value: "mappingToSeparateBoard",
+      infoIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: "info"
+      })
+    }]
   }, {
-    label: "Save Response",
-    key: "saveResponse",
-    type: "selectBox",
-    placeholder: "Save Response"
+    tab: "Save As Template",
+    value: "saveAsTemplate",
+    needActions: false,
+    hideOnFGS: true,
+    fields: [{
+      label: "Template Image",
+      key: "saveAsTemplate",
+      type: "saveAsTemplate"
+    }]
   }]
 }, {
-  tab: "Form Title",
-  value: "formTitle",
+  tab: "Field Settings",
+  value: "FieldSetting",
+  hasChildrenTabs: false,
   fields: [{
-    label: "Title",
-    key: "formTitle",
-    type: "text"
-  }, {
     label: "Font Family",
-    key: "fontFamily",
+    key: "fieldFontFamily",
     type: "textOptions",
+    hideMetaDataOptions: true,
     options: fontOptions,
     webFont: true,
-    width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
         style: {
@@ -41,42 +190,52 @@ const formStyle = [{
         children: option.text
       });
     }
+  }, {
+    label: "Font Weight",
+    key: "fieldFontWeight",
+    type: "textOptions",
+    width: 5,
+    options: fontWeightOptions,
+    hideMetaDataOptions: true,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontWeight: option.value
+        },
+        children: option.text
+      });
+    }
   }, {
     label: "Font Size",
-    key: "textSize",
+    key: "fieldTextSize",
     type: "fontSize",
     width: 5,
     placeholder: "16px"
   }, {
-    label: "Text Align",
-    key: "textAlign",
-    type: "textAlign",
-    placeholder: "16px or 1em"
-  }]
-}, {
-  tab: "Banner Spacing",
-  value: "bannerSpacing",
-  fields: [{
-    label: "Banner Spacing",
-    key: "bannerSpacing",
-    type: "bannerSpacing"
-  }]
-}, {
-  tab: "Border",
-  value: "border",
-  fields: [{
-    label: "Border Radius",
-    key: "borderRadius",
-    type: "borderRadius"
+    label: "Text Color",
+    key: "fieldTextColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background Color",
+    key: "fieldBgColor",
+    type: "color"
+  }, {
+    label: "Border Color",
+    key: "fieldBorderColor",
+    type: "color"
   }, {
     label: "Border Width",
-    key: "borderWidth",
+    key: "fieldBorderWidth",
     type: "text",
+    width: 5,
     placeholder: "1px"
   }, {
     label: "Border Style",
-    key: "borderStyle",
+    key: "fieldBorderStyle",
     type: "textOptions",
+    hideMetaDataOptions: true,
+    width: 5,
     options: [{
       text: "Solid",
       value: "solid"
@@ -93,76 +252,4 @@ const formStyle = [{
       });
     }
   }]
-}, {
-  tab: "Colors",
-  value: "colors",
-  fields: [{
-    label: "Text Color",
-    key: "textColor",
-    type: "color",
-    needPreview: true
-  }, {
-    label: "Background Color",
-    key: "bgColor",
-    type: "color"
-  }, {
-    label: "Border Color",
-    key: "borderColor",
-    type: "color"
-  }]
-}, {
-  tab: "Position",
-  value: "position",
-  fields: [{
-    label: "Set Postion (Vertical & Horizantal)",
-    key: "alignment",
-    type: "alignment"
-  }]
-}, {
-  tab: "Background",
-  value: "backgroundImage",
-  fields: [{
-    label: "URL",
-    key: "backgroundImage",
-    type: "text"
-  }, {
-    label: "Background Image",
-    key: "backgroundImage",
-    type: "backgroundImage"
-  }]
-}, {
-  tab: "Add to Boards",
-  value: "metadatamapping",
-  fields: [{
-    label: "Add response to contacts board",
-    key: "metadatamapping",
-    type: "metadatamapping",
-    compType: "card",
-    content: "By default, form responses are added as separate cards on the default contact board.",
-    value: "mappingToContactBoard",
-    infoIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: "info"
-    })
-  }, {
-    label: "Create a separate board",
-    key: "metadatamapping",
-    type: "metadatamapping",
-    compType: "card",
-    content: "By default, form responses are added as separate cards on a new board (Contact Us).",
-    value: "mappingToSeparateBoard",
-    infoIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: "info"
-    })
-  }]
-}, {
-  tab: "Save As Template",
-  value: "saveAsTemplate",
-  needActions: false,
-  hideOnFGS: true,
-  fields: [{
-    label: "Template Image",
-    key: "saveAsTemplate",
-    type: "saveAsTemplate"
-  }]
-}];
-export default formStyle;
+}];

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

@@ -79,6 +79,11 @@ const gridItemStyle = [{
     label: "Width Size",
     key: "grid",
     type: "gridSize"
+  }, {
+    label: "Force Full Width on Mobile",
+    key: "forceFullWidth",
+    type: "selectBox",
+    placeholder: "Force Full Width on Mobile"
   }, {
     label: "Height",
     key: "cellGHeight",

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

@@ -1,12 +1,31 @@
 import React, { useEffect, useState } from "react";
-import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer } from "@mui/material";
+import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer, Accordion, AccordionSummary, AccordionDetails, createTheme } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { ThemeProvider } from "@mui/material/styles";
+import { ExpandMoreOutlined, Height } from "@mui/icons-material";
 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 muiTheme = createTheme({
+  components: {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          padding: "0px",
+          "&.Mui-expanded": {
+            margin: "0"
+          }
+        }
+      },
+      defaultProps: {
+        elevation: 0
+      }
+    }
+  }
+});
 export const StyleContent = props => {
   const {
     value,
@@ -73,6 +92,9 @@ const StyleBuilder = props => {
   } = tabVal || {
     needActions: true
   };
+  const {
+    hideTools
+  } = customProps || {};
   useEffect(() => {
     if (customProps?.onDrawerOpen) {
       customProps?.onDrawerOpen(true);
@@ -140,17 +162,108 @@ const StyleBuilder = props => {
       }), /*#__PURE__*/_jsx(DialogContent, {
         sx: {
           maxHeight: isMobile ? `500px` : `${window.innerHeight - 125}px`,
-          padding: "8px"
+          padding: "0px"
         },
         children: renderTabs.map((m, i) => {
-          return /*#__PURE__*/_jsx(StyleContent, {
-            renderTabs: renderTabs,
-            value: m.value,
-            element: elementProps,
-            onChange: onElementPropsChange,
-            customProps: customProps,
-            handleClose: handleClose
-          }, `tab_${m.value}_$${i}`);
+          if (m?.hasChildrenTabs) {
+            return /*#__PURE__*/_jsx(ThemeProvider, {
+              theme: muiTheme,
+              children: /*#__PURE__*/_jsxs(Accordion, {
+                defaultExpanded: true,
+                children: [/*#__PURE__*/_jsx(AccordionSummary, {
+                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+                  sx: {
+                    padding: "0px"
+                  },
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    variant: "h3",
+                    className: "settingsHeader",
+                    color: "primary",
+                    style: {
+                      fontSize: "14px !important",
+                      fontWeight: "400"
+                    },
+                    children: m?.tab
+                  })
+                }), /*#__PURE__*/_jsx(AccordionDetails, {
+                  sx: {
+                    padding: "5px"
+                  },
+                  children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
+                    return /*#__PURE__*/_jsx(ThemeProvider, {
+                      theme: muiTheme,
+                      children: /*#__PURE__*/_jsxs(Accordion, {
+                        defaultExpanded: true,
+                        children: [/*#__PURE__*/_jsx(AccordionSummary, {
+                          expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+                          sx: {
+                            padding: "0px"
+                          },
+                          children: /*#__PURE__*/_jsx(Typography, {
+                            variant: "h3",
+                            className: "settingsHeader",
+                            color: "primary",
+                            style: {
+                              fontSize: "14px !important",
+                              fontWeight: "400"
+                            },
+                            children: field?.tab
+                          })
+                        }), /*#__PURE__*/_jsx(AccordionDetails, {
+                          sx: {
+                            padding: "0px"
+                          },
+                          children: /*#__PURE__*/_jsx(StyleContent, {
+                            renderTabs: [field],
+                            value: field.value,
+                            element: elementProps,
+                            onChange: onElementPropsChange,
+                            customProps: customProps,
+                            handleClose: handleClose
+                          }, `tab_${field.value}_${index}`)
+                        })]
+                      }, `accordion_${index}`)
+                    }, index);
+                  })
+                })]
+              }, `accordion_${i}`)
+            }, i);
+          } else {
+            return /*#__PURE__*/_jsx(ThemeProvider, {
+              theme: muiTheme,
+              children: /*#__PURE__*/_jsxs(Accordion, {
+                defaultExpanded: true,
+                children: [/*#__PURE__*/_jsx(AccordionSummary, {
+                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+                  sx: {
+                    padding: "0px"
+                  },
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    variant: "h3",
+                    className: "settingsHeader",
+                    color: "primary",
+                    style: {
+                      fontSize: "14px !important",
+                      fontWeight: "400"
+                    },
+                    children: m?.tab
+                  })
+                }), /*#__PURE__*/_jsx(AccordionDetails, {
+                  sx: {
+                    padding: "0px"
+                  },
+                  children: /*#__PURE__*/_jsx(StyleContent, {
+                    renderTabs: renderTabs,
+                    value: m.value,
+                    element: elementProps,
+                    onChange: onElementPropsChange,
+                    customProps: customProps,
+                    handleClose: handleClose
+                  }, `tab_${m.value}_$${i}`)
+                })]
+              }, `accordion_${i}`)
+            }, i);
+          }
         })
       }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {
         sx: {

package/dist/Editor/utils/font.js

@@ -60,7 +60,14 @@ export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
   };
 });
 export const headingMap = {
-  "headingOne": "32px",
-  "headingTwo": "24px",
-  "headingThree": "19px"
-};
+  headingOne: "32px",
+  headingTwo: "24px",
+  headingThree: "19px"
+};
+export const fontWeightOptions = [{
+  text: "Bold",
+  value: "500"
+}, {
+  text: "Bolder",
+  value: "600"
+}];

package/dist/Editor/utils/formfield.js

@@ -1,5 +1,5 @@
 import { Transforms } from "slate";
-export const formField = () => {
+export const formField = data => {
   return {
     type: "form-field",
     grid: 6,
@@ -12,14 +12,18 @@ export const formField = () => {
       text: ""
     }],
     field_type: "text",
-    bgColor: "rgba(255, 255, 255, 1)",
-    borderColor: "#ccc",
+    bgColor: data?.bgColor ? data?.bgColor : "rgba(255, 255, 255, 1)",
+    borderColor: data?.borderColor ? data?.borderColor : "#ccc",
     bannerSpacing: {
       left: 16,
       right: 16,
       top: 16,
       bottom: 16
-    }
+    },
+    fontFamily: data?.fontFamily ? data?.fontFamily : "",
+    textSize: data?.textSize ? data?.textSize : "",
+    textColor: data?.textColor ? data?.textColor : "",
+    fontWeight: data?.fontWeight ? data?.fontWeight : "500"
   };
 };
 export const insertGridItem = editor => {

package/dist/Editor/utils/helper.js

@@ -64,7 +64,7 @@ export const getBorderColor = (color, borderWidth = 3) => {
 export const absoluteLink = url => {
   try {
     if (url?.indexOf("://") === -1) {
-      return `//${url}`;
+      return `/${url}`;
     }
     return url;
   } catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.7.9",
+  "version": "4.8.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"