@flozy/editor 5.3.7 → 5.3.8

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -6,8 +6,7 @@ import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
-import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import useCommonStyle from "../../commonStyle";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const accordionBtnStyleKeys = {
@@ -79,10 +78,6 @@ const Accordion = props => {
     textColor,
     bgColor
   } = element;
-  const {
-    theme
-  } = useEditorContext();
-  const classes = useCommonStyle(theme);
   const onToggle = () => {
     setToggle(!toggle);
   };
@@ -102,7 +97,6 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
-          sx: classes.buttonMoreOption,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -111,7 +105,6 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onDelete,
-          sx: classes.buttonMoreOption2,
           children: /*#__PURE__*/_jsx(DeleteIcon, {})
         })
       })]

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

@@ -250,10 +250,10 @@ function AppHeader(props) {
               },
               sx: {
                 mr: 2,
-                [theme?.breakpoints?.up("sm")]: {
+                [theme.breakpoints.up("sm")]: {
                   display: "none"
                 },
-                [theme?.breakpoints.between("xs", "md")]: {
+                [theme.breakpoints.between("xs", "md")]: {
                   display: "block"
                 }
               },
@@ -272,10 +272,10 @@ function AppHeader(props) {
               },
               sx: {
                 flexGrow: 1,
-                [theme?.breakpoints?.up("sm")]: {
+                [theme.breakpoints.up("sm")]: {
                   display: "block"
                 },
-                [theme?.breakpoints?.between("xs", "md")]: {
+                [theme.breakpoints.between("xs", "md")]: {
                   display: "none"
                 },
                 "& img": {
@@ -293,10 +293,10 @@ function AppHeader(props) {
               }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                [theme?.breakpoints?.up("sm")]: {
+                [theme.breakpoints.up("sm")]: {
                   display: "block"
                 },
-                [theme?.breakpoints?.between("xs", "md")]: {
+                [theme.breakpoints.between("xs", "md")]: {
                   display: "none"
                 }
               },

package/dist/Editor/Elements/Button/EditorButton.js

@@ -11,7 +11,6 @@ import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,7 +36,6 @@ const EditorButton = props => {
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
   const [openMoreOptions, setOpenMoreOptions] = useState(false);
-  const classes = useCommonStyle(appTheme);
   const {
     label,
     bgColor,
@@ -138,7 +136,6 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("edit"),
-            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "pagesSettings"
             })
@@ -148,7 +145,6 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("nav"),
-            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "link"
             })
@@ -161,9 +157,7 @@ const EditorButton = props => {
               sx: {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
-                marginBottom: "0px !important",
-                ...classes.buttonMoreOption,
-                ...classes.buttonMoreOption3
+                marginBottom: "0px !important"
               },
               ...btnProps,
               children: /*#__PURE__*/_jsx(Icon, {
@@ -265,12 +259,11 @@ const EditorButton = props => {
             ...btnSp,
             borderStyle: borderStyle || "solid",
             color: `${textColor || "#FFFFFF"}`,
-            fontSize: textSize || "12px",
+            fontSize: textSize || "inherit",
             fontFamily: fontFamily || "PoppinsRegular",
             display: "inline-flex",
             alignItems: "center",
             position: "relative",
-            lineHeight: 1.43,
             "& .element-toolbar": {
               display: "none"
             },

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Node, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import { Tooltip, IconButton, Box } from "@mui/material";
+import { Tooltip, IconButton } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,7 +37,7 @@ const CarouselItem = props => {
       className: "element-toolbar hr",
       style: {
         top: "0px",
-        left: "0px"
+        right: "28px"
       },
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -53,7 +53,7 @@ const CarouselItem = props => {
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     className: "carousel-item",
-    children: /*#__PURE__*/_jsxs(Box, {
+    children: /*#__PURE__*/_jsxs("div", {
       className: "carousel-item-inner",
       style: {
         minHeight: "50px",
@@ -61,14 +61,6 @@ const CarouselItem = props => {
         justifyContent: "center",
         alignItems: "center"
       },
-      sx: {
-        "& .ico-grp-ss": {
-          position: "absolute",
-          top: "0px",
-          right: "0px",
-          display: "flex"
-        }
-      },
       children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
     })
   });

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Box, IconButton, Popover } from "@mui/material";
-import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
 import ColorPicker from "./colorPicker.svg";
@@ -46,7 +46,7 @@ const SingleColorButton = ({
       id: `in_${id}`,
       onClick: handleMore,
       className: "more-btn-cbs",
-      children: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {})
+      children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
     }) : null]
   }, `ci_bs_row_${index}}`);
 };
@@ -82,7 +82,7 @@ export const AllColors = props => {
         children: /*#__PURE__*/_jsx(Box, {
           className: "buttonsWrpr",
           style: {
-            padding: "5px"
+            padding: "8px"
           },
           children: all.map((m, i) => {
             return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -109,13 +109,11 @@ const ColorButtons = props => {
     forMiniTool,
     openColorTool,
     onClose,
-    onColorPickerClick,
-    defaultColors = []
+    onColorPickerClick
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
-  const firstRow = defaultColors?.length ? defaultColors : row1;
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -133,7 +131,7 @@ const ColorButtons = props => {
     sx: classes.colorButtons,
     children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
       className: "buttonsWrpr first",
-      children: [firstRow].map((m, i) => {
+      children: [row1].map((m, i) => {
         return /*#__PURE__*/_jsx(SingleColorButton, {
           id: `p1_${id}`,
           crs: m,

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -9,17 +9,13 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       marginRight: "8px",
-      border: "unset"
+      border: "1px solid #ccc"
     }
   },
   colorPopper: {
     marginTop: "20px",
-    borderRadius: "7px !important",
     "& .MuiPaper-root": {
-      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
-      borderRadius: "7px !important",
-      padding: "0px 5px",
+      backgroundColor: theme?.palette?.editor?.background,
       '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }
@@ -58,7 +54,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       margin: "0px 4px",
-      border: "unset"
+      border: "1px solid #ccc"
     }
   },
   colorPickerIcon: {

package/dist/Editor/Elements/Color Picker/defaultColors.js

@@ -1,4 +1,4 @@
-export const colors = ["#000000", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"
+export const colors = ["#292D32", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"
 // "#E6E6E6",
-// "#BEBEBE",
+// "#BEBEBE"
 ];

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

@@ -5,7 +5,6 @@ import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import DividerPopup from "./DividerPopup";
 import { Transforms } from "slate";
-import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
@@ -18,11 +17,10 @@ const Divider = props => {
   const {
     theme
   } = useEditorContext();
-  const classes = useCommonStyle(theme);
   const {
-    borderColor = theme?.palette?.primary?.main || "#0F172A",
-    borderWidth = "1px",
-    borderStyle = "solid"
+    borderColor = theme?.palette?.primary?.main || '#0F172A',
+    borderWidth = '1px',
+    borderStyle = 'solid'
   } = element;
   const {
     readOnly
@@ -35,7 +33,7 @@ const Divider = props => {
   } = useEditorContext();
   const [showTool] = useEditorSelection(editor);
   const selected = hoverPath === path.join(",");
-  const width = borderWidth?.includes("px") ? borderWidth : `${borderWidth}px`;
+  const width = borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`;
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -45,21 +43,16 @@ const Divider = props => {
     showTool,
     onSettings
   }) => {
-    // const hoverStyles = readOnly
-    //   ? {
-    //       "&.MuiIconButton-root:hover": {
-    //         background:
-    //           theme?.palette?.type === "dark"
-    //             ? `${theme?.palette?.greyshades?.light8} !important`
-    //             : `${theme?.palette?.containers?.card} !important`,
-    //       },
-    //     }
-    //   : {};
+    const hoverStyles = readOnly ? {
+      '&.MuiIconButton-root:hover': {
+        background: theme?.palette?.type === 'dark' ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
+      }
+    } : {};
     return /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "divider-settings",
       style: {
-        top: "-33px",
+        top: "-20px",
         left: 0
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -68,22 +61,14 @@ const Divider = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           sx: {
-            // background:
-            //   theme?.palette?.type === "dark"
-            //     ? theme?.palette?.greyshades?.light8
-            //     : theme?.palette?.containers?.card,
-            // border:
-            //   theme?.palette?.type === "dark"
-            //     ? "1px solid #E4E8EB33"
-            //     : "none",
-            boxShadow: "0px 0px 4px 0px #00000040",
-            borderRadius: "50%",
-            "& svg": {
-              width: '16px',
-              height: '16px'
+            background: theme?.palette?.type === 'dark' ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
+            border: theme?.palette?.type === 'dark' ? '1px solid #E4E8EB33' : 'none',
+            boxShadow: '0px 0px 4px 0px #00000040',
+            borderRadius: '50%',
+            '& svg': {
+              stroke: theme?.palette?.text?.secondary3
             },
-            // ...hoverStyles,
-            ...classes.buttonMoreOption
+            ...hoverStyles
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
@@ -118,15 +103,14 @@ const Divider = props => {
     className: `dividerComponent`,
     style: {
       userSelect: "none",
-      position: "relative"
+      position: 'relative'
     },
     contentEditable: false,
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-root element-selector`,
       contentEditable: false,
       style: {
-        zIndex: 1000,
-        left: "0%"
+        zIndex: 1000
       },
       children: /*#__PURE__*/_jsx(DividerToolbar, {
         selected: selected,
@@ -142,7 +126,7 @@ const Divider = props => {
         borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
         backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
         height: borderColor?.includes("linear") ? borderWidth : undefined,
-        marginTop: "15px"
+        marginTop: '15px'
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {

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

@@ -14,33 +14,28 @@ import ImageFrame from "./Frames/ImageFrame";
 import LinkSettings from "../../common/LinkSettings";
 import { handleLinkType } from "../../utils/helper";
 import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
-import useCommonStyle from "../../commonStyle";
-import SettingsIcon from "../../assets/svg/SettingsIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ToolBar = ({
   isEmpty,
   onSettings,
-  setOpenNav,
-  topM,
-  classes
+  setOpenNav
 }) => {
   return !isEmpty ? /*#__PURE__*/_jsxs("div", {
     className: "element-toolbar visible-on-hover",
     contentEditable: false,
     style: {
-      top: "-4px",
-      left: topM ? "35px" : "0px",
-      margin: "0px",
-      gap: '3px'
+      top: "0px",
+      right: "0px",
+      left: "auto",
+      margin: "0px"
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Image Settings",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
         onClick: onSettings,
-        sx: classes.buttonMoreOption,
-        children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
       })
     }), /*#__PURE__*/_jsx(Tooltip, {
       title: "Link Settings",
@@ -48,7 +43,6 @@ const ToolBar = ({
       children: /*#__PURE__*/_jsx(IconButton, {
         className: "last-btn",
         onClick: () => setOpenNav(true),
-        sx: classes.buttonMoreOption,
         children: /*#__PURE__*/_jsx(LinkIcon, {})
       })
     })]
@@ -70,34 +64,18 @@ const ImageContent = props => {
     handleImageClick,
     onTouchEnd,
     path,
-    theme,
-    classes
+    theme
   } = props;
-  return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
+  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
     contentEditable: false,
     onClick: () => {
       setOpenSettings(true);
     },
-    sx: {
-      ...classes.emptyThumbBtn
-    },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "image"
     }), "Add Image"]
-  }) : /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      color: "#64748B !important",
-      "& svg": {
-        color: "#64748B"
-      }
-    },
-    component: "button",
-    className: "element-empty-btn",
-    children: [/*#__PURE__*/_jsx(Icon, {
-      icon: "shieldNoAccess"
-    }), "The Content is no longer available."]
   }) : /*#__PURE__*/_jsx(Box, {
     component: "img",
     className: "emb-img",
@@ -177,10 +155,7 @@ const Image = props => {
       }, {
         at: path
       });
-    },
-    MW: 32,
-    MH: 32,
-    MP: 2
+    }
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
@@ -193,10 +168,6 @@ const Image = props => {
     onClick,
     onTouchEnd
   } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
-  const {
-    theme: appTheme
-  } = useEditorContext();
-  const classes = useCommonStyle(appTheme);
   const handleImageClick = () => {
     try {
       Transforms.select(editor, {
@@ -306,9 +277,7 @@ const Image = props => {
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {
         isEmpty: isEmpty,
         onSettings: onSettings,
-        setOpenNav: setOpenNav,
-        topM: size.width < 100,
-        classes: classes
+        setOpenNav: setOpenNav
       }), /*#__PURE__*/_jsx(ImageContent, {
         ...element,
         readOnly: readOnly,
@@ -316,8 +285,7 @@ const Image = props => {
         handleImageClick: handleImageClick,
         onTouchEnd: onTouchEnd,
         path: path,
-        theme: theme,
-        classes: classes
+        theme: theme
       }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",
@@ -333,14 +301,11 @@ const Image = props => {
           handleImageClick: handleImageClick
         })
       }) : null, selected && !readOnly && url && /*#__PURE__*/_jsx(IconButton, {
-        onPointerDown: onMouseDown
-        // style={{
-        //   opacity: 1,
-        //   // background: "#FFF",
-        //   // ...classes.resizeButton
-        // }}
-        ,
-        sx: classes.resizeButton,
+        onPointerDown: onMouseDown,
+        style: {
+          opacity: 1,
+          background: "#FFF"
+        },
         className: "resize-br visible-on-hover img-resizer",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]

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

@@ -11,8 +11,6 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
 import { getEmbedURL } from "../../helper";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VideoContent = props => {
@@ -70,31 +68,15 @@ const VideoPlaceholder = props => {
   const {
     url,
     readOnly,
-    onSettings,
-    classes
+    onSettings
   } = props;
-  return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
+  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
     onClick: onSettings,
-    sx: {
-      ...classes.emptyThumbBtn
-    },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "video"
     }), "Embed Video or Other"]
-  }) : /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      color: "#64748B !important",
-      "& svg": {
-        color: "#64748B"
-      }
-    },
-    component: "button",
-    className: "element-empty-btn",
-    children: [/*#__PURE__*/_jsx(Icon, {
-      icon: "shieldNoAccess"
-    }), "The Content is no longer available."]
   }) : /*#__PURE__*/_jsx(VideoContent, {
     ...props
   });
@@ -127,10 +109,6 @@ const Video = ({
   } = alignment || {};
   const path = ReactEditor.findPath(editor, element);
   const hasAspect = url && aspectRatio !== "custom" && aspectRatio;
-  const {
-    theme: appTheme
-  } = useEditorContext();
-  const classes = useCommonStyle(appTheme);
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -277,8 +255,7 @@ const Video = ({
         videoSX: videoSX,
         url: url,
         readOnly: readOnly,
-        resizing: resizing,
-        classes: classes
+        resizing: resizing
       }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {

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

@@ -1,6 +1,5 @@
 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";
@@ -49,15 +48,7 @@ const Form = props => {
     textSize,
     fontFamily,
     textAlign,
-    alignment,
-    fieldFontFamily,
-    fieldFontWeight,
-    fieldTextSize,
-    fieldTextColor,
-    fieldBgColor,
-    fieldBorderColor,
-    fieldBorderWidth,
-    fieldBorderStyle
+    alignment
   } = element;
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
@@ -199,24 +190,6 @@ 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 = () => {
@@ -225,16 +198,7 @@ const Form = props => {
   const onAddFormField = () => {
     try {
       Transforms.insertNodes(editor, {
-        ...formField({
-          fontFamily: fieldFontFamily,
-          fontWeight: fieldFontWeight,
-          textSize: fieldTextSize,
-          textColor: fieldTextColor,
-          bgColor: fieldBgColor,
-          borderColor: fieldBorderColor,
-          borderWidth: fieldBorderWidth,
-          borderStyle: fieldBorderStyle
-        })
+        ...formField()
       }, {
         at: [...path, children.length]
       });
@@ -402,7 +366,6 @@ const Form = props => {
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
         position: "relative",
-        lineHeight: 1.43,
         ...formSX
       },
       ref: formEle,