@flozy/editor 4.0.2 → 4.0.3

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

@@ -1,15 +1,11 @@
-import React, { useContext, useState } from "react";
-import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
+import React, { useState } from "react";
+import { Box, IconButton, Popover } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
 import ColorPicker from "./colorPicker.svg";
-import { ThemeContext } from "../../CommonEditor";
-import { useSlateStatic } from "slate-react";
-import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 let c = [];
 const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
   if (i % 7 === 0) {
@@ -36,7 +32,7 @@ const SingleColorButton = ({
       width: "100%",
       display: "flex",
       alignItems: "center",
-      padding: padding || "8px 0px",
+      padding: padding || "8px",
       justifyContent: "center"
     },
     children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
@@ -113,17 +109,11 @@ const ColorButtons = props => {
     forMiniTool,
     openColorTool,
     onClose,
-    onColorPickerClick,
-    disableEditTheme
+    onColorPickerClick
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
-  const theme = useTheme();
-  const editor = useSlateStatic();
-  const {
-    setOpenTheme
-  } = useContext(ThemeContext);
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -136,7 +126,6 @@ const ColorButtons = props => {
   const handleSelect = color => () => {
     onSelect(color);
   };
-  const colorVars = theme?.vars?.colors || {};
   return /*#__PURE__*/_jsxs(Box, {
     component: "span",
     sx: classes.colorButtons,
@@ -153,7 +142,7 @@ const ColorButtons = props => {
           activeColor: activeColor
         }, `si_btn_row1_${m}_${i}`);
       })
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), /*#__PURE__*/_jsxs(Popover, {
       open: open || openColorTool,
       anchorEl: anchorEl || openColorTool,
       onClose: handleClose,
@@ -167,39 +156,9 @@ const ColorButtons = props => {
       },
       sx: classes.colorPopper,
       className: "colorPopper",
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
         sx: classes.colorButtonsInner,
-        children: [Object.values(colorVars)?.length ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(Box, {
-            component: "div",
-            className: "singleColorTitleWrapper",
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle2",
-              children: "Theme colour"
-            }), disableEditTheme ? null : /*#__PURE__*/_jsx("div", {
-              className: "editBtn",
-              onClick: () => {
-                Transforms.deselect(editor, {
-                  at: editor.selection
-                });
-                setOpenTheme("editThemeColor");
-              },
-              children: "Edit"
-            })]
-          }), /*#__PURE__*/_jsx(SingleColorButton, {
-            crs: Object.values(colorVars),
-            handleSelect: handleSelect,
-            classes: classes,
-            activeColor: activeColor
-          })]
-        }) : null, /*#__PURE__*/_jsx(Box, {
-          component: "div",
-          className: "singleColorTitleWrapper",
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle2",
-            children: "Custom colour"
-          })
-        }), restRows.map((m, i) => {
+        children: restRows.map((m, i) => {
           return /*#__PURE__*/_jsx(SingleColorButton, {
             id: `p2_${id}`,
             crs: m,
@@ -208,18 +167,14 @@ const ColorButtons = props => {
             classes: classes,
             activeColor: activeColor
           }, `si_btn_${m}_${i}`);
-        }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
-          onClick: onColorPickerClick,
-          style: {
-            alignSelf: "start",
-            margin: "6px"
-          },
-          children: /*#__PURE__*/_jsx("img", {
-            src: ColorPicker,
-            alt: "color wheel"
-          })
-        }) : null]
-      })
+        })
+      }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
+        onClick: onColorPickerClick,
+        children: /*#__PURE__*/_jsx("img", {
+          src: ColorPicker,
+          alt: "color wheel"
+        })
+      }) : null]
     })]
   });
 };

package/dist/Editor/Elements/Color Picker/ColorPicker.css

@@ -60,28 +60,4 @@
   padding: 0 15px !important;
   width: 60px !important;
   flex-shrink: 0;
-}
-
-
-.singleColorTitleWrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-  width: 100%;
-  border-bottom: 1px solid #DCE4EC;
-}
-
-.singleColorTitleWrapper .MuiTypography-root {
-  font-weight: 600;
-}
-
-.singleColorTitleWrapper .editBtn {
-  text-transform: none;
-  color: #2563EB;
-  text-decoration: underline;
-  padding: 0px;
-  min-width: unset;
-  cursor: pointer;
-  font-size: 14px;
-}
+}

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

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
 import { Transforms } from "slate";
+import ColorPickerTool from "react-gcolor-picker";
 import { IconButton, Tooltip, Box, Popover } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import ColorButtons from "./ColorButtons";
@@ -8,7 +9,6 @@ import ColorPickerStyles from "./Styles";
 import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import CustomColorPicker from "../../common/CustomColorPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -95,10 +95,10 @@ const ColorPicker = props => {
         horizontal: "top"
       },
       sx: classes.colorPickerPopup,
-      children: /*#__PURE__*/_jsx(CustomColorPicker, {
+      children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: true,
-        onChange: handleFormSubmit,
-        color: activeColor
+        value: activeColor,
+        onChange: handleFormSubmit
       })
     })]
   });

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

@@ -13,11 +13,9 @@ const ColorPickerStyles = theme => ({
     }
   },
   colorPopper: {
-    marginTop: "20px",
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
-      padding: "4px 14px",
-      "@media only screen and (max-width: 600px)": {
+      '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }
     }

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

@@ -71,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsxs(RadioGroup, {
+          children: /*#__PURE__*/_jsx(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,16 +84,7 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "after",
-              label: "After",
-              onChange: () => {
-                setSchedule("after");
-              },
-              control: /*#__PURE__*/_jsx(Radio, {
-                size: "small"
-              })
-            })]
+            })
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,

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

@@ -39,8 +39,7 @@ const UserInputs = props => {
           fontStyleOptions: ['underline'],
           hideLink: true,
           hideTextColor: true
-        },
-        theme: theme
+        }
       })
     })
   });

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

@@ -15,7 +15,6 @@ import { gridItem } from "../../utils/gridItem";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import useWindowResize from "../../hooks/useWindowResize";
-import { useTheme } from "@emotion/react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -92,7 +91,6 @@ const getParentEl = (editor, path) => {
   }
 };
 const Grid = props => {
-  const theme = useTheme();
   const {
     attributes,
     children,

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

@@ -8,7 +8,6 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { isEmptyNode } from "../../utils/helper";
-import { useTheme } from "@emotion/react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItemToolbar = ({
@@ -35,7 +34,6 @@ const GridItemToolbar = ({
   }) : null;
 };
 const GridItem = props => {
-  const theme = useTheme();
   const {
     attributes,
     children,
@@ -121,7 +119,7 @@ const GridItem = props => {
         xs: xsHidden ? "none" : "flex"
       },
       flexDirection: flexDirection || "column",
-      background: bgColor,
+      background: bgColor || "transparent",
       borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
       borderRadius: {

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

@@ -9,7 +9,6 @@ import { removeLink } from "../../utils/link";
 import LinkPopup from "./LinkPopup";
 import "./styles.css";
 import { absoluteLink } from "../../utils/helper";
-import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Link = props => {
@@ -30,9 +29,6 @@ const Link = props => {
   const path = ReactEditor.findPath(editor, element);
   const urlPath = element.url || element.href;
   const absLink = absoluteLink(urlPath);
-  const {
-    theme
-  } = useEditorContext();
   const updateLink = () => {
     Transforms.setNodes(editor, {
       href: linkData?.url,
@@ -111,8 +107,7 @@ const Link = props => {
       linkData: linkData,
       handleClose: handleClose,
       handleInputChange: handleInputChange,
-      handleInsertLink: updateLink,
-      theme: theme
+      handleInsertLink: updateLink
     })]
   });
 };

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

@@ -9,8 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = props => {
   const {
-    editor,
-    theme
+    editor
   } = props;
   const linkInputRef = useRef(null);
   const [showInput, setShowInput] = useState(false);
@@ -78,8 +77,7 @@ const LinkButton = props => {
       linkData: linkData,
       handleClose: handleClose,
       handleInputChange: handleInputChange,
-      handleInsertLink: handleInsertLink,
-      theme: theme
+      handleInsertLink: handleInsertLink
     })]
   });
 };

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

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

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

@@ -3,7 +3,6 @@ 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
@@ -24,7 +23,7 @@ const NewLineButton = ({
   return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "New Line",
     onClick: onAddNewLine,
-    icon: /*#__PURE__*/_jsx(NewLineElementIcon, {
+    icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
       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: 1.5px solid #2563EB !important;
+    border: 1px solid #2563eb !important;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
     border-radius: 7px;
-    color: #000000 !important;
+    color: #0f172a !important;
   }
   .af-signature-popup .MuiTabs-indicator {
     display: none;
@@ -60,23 +60,16 @@
     cursor: pointer;
 }
   .upload-wrapper-ui {
-    border: 1px dashed #92B1F5 !important;
-    /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important; */
+    border: 1px solid #2563eb !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: 187px;
+    height: 100px;
     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-tab2",
+    className: "signature-tab",
     children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsx("div", {
       className: "upload-sign-img-wrapper",
       children: /*#__PURE__*/_jsx("img", {
@@ -48,7 +48,6 @@ const UploadSignature = props => {
           justifyContent: "center",
           alignItems: "center",
           children: [/*#__PURE__*/_jsx(CloudUpload, {}), /*#__PURE__*/_jsx(Typography, {
-            className: "upload-wrapper-ui-text",
             variant: "h6",
             color: "textSecondary",
             sx: {