@flozy/editor 4.0.3 → 4.0.4

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

@@ -2,7 +2,7 @@
 import React, { useState } from "react";
 import { Transforms, Path, Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
+import { IconButton, Tooltip, Grid as GridContainer, useTheme } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
@@ -13,7 +13,7 @@ import GridPopup from "./GridPopup";
 import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -91,6 +91,7 @@ const getParentEl = (editor, path) => {
   }
 };
 const Grid = props => {
+  const theme = useTheme();
   const {
     attributes,
     children,
@@ -296,6 +297,14 @@ const Grid = props => {
     bottomLeft,
     bottomRight
   } = getBreakPointsValue(borderRadius, size?.device) || {};
+  const gridcwrprProps = groupByBreakpoint({
+    padding: {
+      ...getTRBLBreakPoints(bannerSpacing)
+    },
+    flexWrap: {
+      ...getBreakPointsValue(flexWrap || "wrap")
+    }
+  }, theme);
   return /*#__PURE__*/_jsxs(GridContainer, {
     container: true,
     className: `grid-container ${grid} has-hover element-root dpath`,
@@ -362,16 +371,11 @@ const Grid = props => {
       className: "grid-c-wrpr",
       sx: {
         display: "flex",
-        padding: {
-          ...getTRBLBreakPoints(bannerSpacing)
-        },
+        ...gridcwrprProps,
         alignItems: vertical || "start",
         justifyContent: horizantal || "start",
         flexDirection: flexDirection || "row",
         width: "100%",
-        flexWrap: {
-          ...getBreakPointsValue(flexWrap || "wrap")
-        },
         height: "auto"
       },
       "data-path": path.join(","),

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

@@ -1,13 +1,15 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from "react";
-import { Transforms, Node } from "slate";
+import { useTheme } from "@mui/material";
+import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
+import { groupByBreakpoint, getBreakPointsValue, getBRValue, getTRBLBreakPoints } from "../../helper/theme";
 import { isEmptyNode } from "../../utils/helper";
+import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItemToolbar = ({
@@ -34,6 +36,7 @@ const GridItemToolbar = ({
   }) : null;
 };
 const GridItem = props => {
+  const theme = useTheme();
   const {
     attributes,
     children,
@@ -102,35 +105,44 @@ const GridItem = props => {
   const getBorderColor = () => {
     return borderColor || "transparent";
   };
+  const getBRProps = groupByBreakpoint({
+    display: {
+      xs: xsHidden ? "none" : "inline-block",
+      lg: "inline-block"
+    },
+    width: {
+      ...getBreakPointsValue(grid, null, "overrideGridSize", true)
+    },
+    height: {
+      ...getBreakPointsValue(cellGHeight || "auto")
+    },
+    borderRadius: {
+      ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+    },
+    margin: {
+      ...getTRBLBreakPoints(margin)
+    }
+  }, theme);
+  const giInProps = groupByBreakpoint({
+    padding: {
+      ...getTRBLBreakPoints(bannerSpacing)
+    }
+  }, theme);
   return /*#__PURE__*/_jsxs(Item, {
     item: true,
     component: "div",
     className: `grid-item element-root gi-top-wrpr dpath`,
     ...attributes,
     sx: {
-      width: {
-        ...getBreakPointsValue(grid, null, "overrideGridSize", true)
-      },
-      height: {
-        ...getBreakPointsValue(cellGHeight || "auto")
-      },
-      display: {
-        lg: "flex",
-        xs: xsHidden ? "none" : "flex"
-      },
+      ...getBRProps,
+      display: "flex",
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",
       borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
       borderStyle: borderStyle || "solid",
       alignItems: horizantal,
       justifyContent: vertical,
-      margin: {
-        ...getTRBLBreakPoints(margin)
-      },
       "&:hover": {
         background: `${bgColorHover || bgColor || "transparent"}`
       }
@@ -169,9 +181,7 @@ const GridItem = props => {
       sx: {
         display: "flex",
         flexDirection: flexDirection || "column",
-        padding: {
-          ...getTRBLBreakPoints(bannerSpacing)
-        },
+        ...giInProps,
         width: "100%",
         height: "100%",
         color: textColor || "#000",

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Divider } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -11,11 +11,15 @@ const LinkPopup = props => {
     handleInputChange,
     handleInsertLink
   } = props;
+  const themeType = localStorage.getItem("themeType");
   return /*#__PURE__*/_jsxs(Dialog, {
     fullWidth: true,
     open: open,
     className: `dialogComp`,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
+      sx: {
+        padding: "13px 19px 9px 19px"
+      },
       children: /*#__PURE__*/_jsxs("div", {
         style: {
           display: "flex",
@@ -24,8 +28,10 @@ const LinkPopup = props => {
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "h6",
           className: "popupTitle",
-          color: "primary",
-          children: "LINK"
+          sx: {
+            textTransform: "none"
+          },
+          children: "Link"
         }), /*#__PURE__*/_jsx("div", {
           style: {
             display: "flex"
@@ -37,35 +43,84 @@ const LinkPopup = props => {
           })
         })]
       })
+    }), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        width: "auto",
+        // Or set a fixed width like "90%"
+        margin: "0px 20px" // Horizontal margin
+      }
     }), /*#__PURE__*/_jsxs(DialogContent, {
-      children: [/*#__PURE__*/_jsx(Grid, {
+      sx: {
+        padding: "5px 19px 0px 19px"
+      },
+      children: [/*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
         style: {
           paddingTop: "12px"
         },
-        children: /*#__PURE__*/_jsx(TextField, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontFamily: "Inter, sans-serif",
+            fontSize: "14px",
+            marginBottom: "6px"
+          },
+          children: "Title"
+        }), /*#__PURE__*/_jsx(TextField, {
           size: "small",
           fullWidth: true,
           value: linkData?.name,
           name: "name",
           placeholder: "Link Title",
-          onChange: handleInputChange
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
+          onChange: handleInputChange,
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              borderRadius: "8px"
+            },
+            "& .MuiInputBase-input": {
+              color: themeType === "dark" ? "#FFFFFF" : "#000"
+            },
+            "& .MuiInputBase-input::placeholder": {
+              color: "#94A3B8",
+              fontFamily: '"Inter", sans-serif'
+            }
+          }
+          // sx={classes.addLinkField}
+        })]
+      }), /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
         style: {
           paddingTop: "12px"
         },
-        children: /*#__PURE__*/_jsx(TextField, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontFamily: "Inter, sans-serif",
+            fontSize: "14px",
+            marginBottom: "6px"
+          },
+          children: "URL"
+        }), /*#__PURE__*/_jsx(TextField, {
           size: "small",
           fullWidth: true,
           name: "url",
           value: linkData?.url,
           placeholder: "https://google.com",
-          onChange: handleInputChange
-        })
+          onChange: handleInputChange,
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              borderRadius: "8px"
+            },
+            "& .MuiInputBase-input": {
+              color: themeType === "dark" ? "#FFFFFF" : "#000"
+            },
+            "& .MuiInputBase-input::placeholder": {
+              color: "#94A3B8",
+              fontFamily: '"Inter", sans-serif'
+            }
+          }
+          // sx={classes.addLinkField}
+        })]
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -81,9 +136,10 @@ const LinkPopup = props => {
             }),
             label: /*#__PURE__*/_jsx(Typography, {
               variant: "body1",
-              color: "primary",
               sx: {
-                pl: 1
+                paddingLeft: "0px",
+                fontSize: "14px",
+                fontFamily: '"Inter", sans-serif'
               },
               children: "Open in new tab"
             })

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

@@ -0,0 +1,28 @@
+const LinkPopupStyles = themeType => ({
+  addLinkField: {
+    "& .MuiOutlinedInput-input": {
+      fontSize: "12px",
+      fontWeight: 500,
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
+    },
+    "& .MuiFormHelperText-root": {
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
+    },
+    "& .MuiOutlinedInput-root": {
+      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important",
+      borderRadius: "7px",
+      "& fieldset": {
+        borderColor: "#D8DDE1"
+      },
+      "&:hover fieldset": {
+        borderColor: "#64748B"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "#2563EB"
+      },
+      "& .MuiFormLabel-root": {}
+    }
+  }
+});
+export default LinkPopupStyles;

package/dist/Editor/Elements/NewLine/NewLineButton.js

@@ -1,8 +1,8 @@
 import React from "react";
-import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import ToolbarIcon from "../../common/ToolbarIcon";
+import { NewLineElementIcon } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NewLineButton = ({
   icoBtnType
@@ -23,7 +23,7 @@ const NewLineButton = ({
   return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "New Line",
     onClick: onAddNewLine,
-    icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
+    icon: /*#__PURE__*/_jsx(NewLineElementIcon, {
       sx: {
         fill: "#64748B",
         width: "18px",

package/dist/Editor/Elements/Signature/Signature.css

@@ -1,6 +1,6 @@
 .af-signature-popup .MuiTab-root {
     background: #ffffff;
-    border: 1px solid #d3d3d3 !important;
+    border: 1px solid #D3D3D3 !important;
     border-radius: 7px;
     height: 37px;
     min-height: 37px;
@@ -15,10 +15,10 @@
   }
   .af-signature-popup .MuiTab-root.Mui-selected {
     background: #ffffff;
-    border: 1px solid #2563eb !important;
+    border: 1.5px solid #2563EB !important;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
     border-radius: 7px;
-    color: #0f172a !important;
+    color: #000000 !important;
   }
   .af-signature-popup .MuiTabs-indicator {
     display: none;
@@ -60,16 +60,23 @@
     cursor: pointer;
 }
   .upload-wrapper-ui {
-    border: 1px solid #2563eb !important;
-    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important;
+    border: 1px dashed #92B1F5 !important;
+    /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important; */
     border-radius: 7px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     width: 100%;
-    height: 100px;
+    height: 187px;
     top: 0px;
     left: 0px;
     cursor: pointer;
+    background-color: #F8F9FF;
+  }
+
+  .upload-wrapper-ui-text {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    font-family: 'Wavehaus';
   }

package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js

@@ -28,7 +28,7 @@ const UploadSignature = props => {
     });
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: "signature-tab",
+    className: "signature-tab2",
     children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsx("div", {
       className: "upload-sign-img-wrapper",
       children: /*#__PURE__*/_jsx("img", {
@@ -48,6 +48,7 @@ const UploadSignature = props => {
           justifyContent: "center",
           alignItems: "center",
           children: [/*#__PURE__*/_jsx(CloudUpload, {}), /*#__PURE__*/_jsx(Typography, {
+            className: "upload-wrapper-ui-text",
             variant: "h6",
             color: "textSecondary",
             sx: {