@flozy/editor 1.9.4 → 1.9.6

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -1,4 +1,4 @@
-const usePopupStyle = () => ({
+const usePopupStyle = theme => ({
   popupWrapper: {
     boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
     zIndex: 1300,
@@ -14,6 +14,37 @@ const usePopupStyle = () => ({
     },
     "&.xs": {
       transform: "none !important"
+    },
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .MuiTypography-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiInputBase-root": {
+      color: theme?.palette?.editor?.textColor,
+      "& svg": {
+        color: theme?.palette?.editor?.textColor
+      },
+      "&.MuiOutlinedInput-root:hover": {
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${theme?.palette?.editor?.textColor}`
+        }
+      }
+    },
+    "& .MuiCheckbox-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.borderColor}`
+    },
+    "& button": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .buttonsWrpr": {
+      "& button": {
+        color: theme?.palette?.editor?.textColor
+      }
     }
   },
   textFormatWrapper: {
@@ -37,7 +68,7 @@ const usePopupStyle = () => ({
       marginBottom: "20px"
     },
     "& .MuiOutlinedInput-notchedOutline": {
-      border: "1px solid #ECECEC"
+      border: `1px solid ${theme?.palette?.editor?.borderColor}`
     },
     "& .MuiOutlinedInput-root": {
       boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
@@ -70,6 +101,16 @@ const usePopupStyle = () => ({
         fontSize: "14px",
         color: "#64748B"
       }
+    },
+    "& .MuiTab-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& button": {
+      "&:hover": {
+        "& span": {
+          color: theme?.palette?.editor?.activeColor
+        }
+      }
     }
   },
   textFormatLabel: {
@@ -187,25 +228,40 @@ const usePopupStyle = () => ({
     marginTop: "8px",
     textTransform: "capitalize",
     "&.active": {
-      background: "rgba(45,66,91,0.1)"
+      backgroundColor: theme?.palette?.editor?.background,
+      border: `1px solid transparent`,
+      color: theme?.palette?.editor?.activeColor
     }
   },
   btnGroup: {
-    backgroundColor: "#fff",
+    backgroundColor: theme?.palette?.editor?.background,
     "& button": {
+      backgroundColor: theme?.palette?.editor?.background,
       marginRight: "0px",
-      color: "#64748B",
-      border: "1px solid #ECECEC",
+      color: theme?.palette?.editor?.textColor,
+      borderColor: theme?.palette?.editor?.borderColor,
       textTransform: "capitalize",
+      marginBottom: "0px",
+      "&:hover": {
+        color: theme?.palette?.editor?.borderColor,
+        background: theme?.palette?.editor?.background
+      },
       "&.active": {
-        backgroundColor: "#ECECEC"
+        background: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.activeColor
       },
       "&.no-hover": {
-        border: "1px solid #ECECEC"
+        border: `1px solid ${theme?.palette?.editor?.borderColor}`
+      }
+    }
+  },
+  allColor: {
+    "& .buttonsWrpr": {
+      "& button": {
+        color: theme?.palette?.editor?.textColor
       }
     }
   },
-  allColor: {},
   allColorInner: {
     "& .buttonsWrpr": {
       "& button": {
@@ -269,6 +325,54 @@ const usePopupStyle = () => ({
     "& svg": {
       color: "#CCC"
     }
+  },
+  textOptions: {
+    backgroundColor: theme?.palette?.editor?.background,
+    color: theme?.palette?.editor?.textColor
+  },
+  textSize: {
+    "& .textFontArrows": {
+      "& svg": {
+        stroke: theme?.palette?.editor?.textColor
+      }
+    }
+  },
+  closeBtn: {
+    backgroundColor: theme?.palette?.editor?.background,
+    color: theme?.palette?.editor?.textColor
+  },
+  colorPickerPopup: {
+    "& .MuiPaper-root": {
+      overflow: "auto",
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .popup_tabs": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .popup_tabs-header": {
+      backgroundColor: theme?.palette?.editor?.background,
+      "& .popup_tabs-header-label-active": {
+        color: theme?.palette?.editor?.activeColor,
+        backgroundColor: theme?.palette?.editor?.background
+      }
+    },
+    "& .colorpicker": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .color-picker-panel": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .input_rgba": {
+      "& input": {
+        backgroundColor: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.textColor
+      }
+    }
+  },
+  colorPopper: {
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    }
   }
 });
 export default usePopupStyle;

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -131,6 +131,7 @@ const TextFormat = props => {
         xs: 12,
         sx: classes.textFormatField,
         children: /*#__PURE__*/_jsx(Dropdown, {
+          classes: classes,
           ...fontFamily,
           editor: editor
         })
@@ -151,6 +152,7 @@ const TextFormat = props => {
           xs: 12,
           sx: classes.textFormatField,
           children: /*#__PURE__*/_jsx(Dropdown, {
+            classes: classes,
             ...fontWeight,
             editor: editor,
             width: "100%"
@@ -169,6 +171,7 @@ const TextFormat = props => {
           xs: 12,
           sx: classes.textFormatCG,
           children: /*#__PURE__*/_jsx(TextSize, {
+            classes: classes,
             format: "fontSize",
             activeMark: activeMark,
             editor: editor,

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -11,7 +11,10 @@ import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = props => {
-  const classes = usePopupStyle();
+  const {
+    theme
+  } = props;
+  const classes = usePopupStyle(theme);
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const editor = useSlate();

package/dist/Editor/common/ColorPickerButton.js

@@ -9,7 +9,8 @@ const ColorPickerButton = props => {
   const {
     value,
     onSave,
-    defaultColors = []
+    defaultColors = [],
+    classes
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -46,14 +47,11 @@ const ColorPickerButton = props => {
         horizontal: "center"
       },
       onClose: handleClose,
-      sx: {
-        "& .MuiPaper-root": {
-          overflow: "auto"
-        }
-      },
+      sx: classes.colorPickerPopup,
       children: /*#__PURE__*/_jsx(Grid, {
         container: true,
-        padding: 2,
+        padding: 0,
+        className: "ed-cp-wrpr",
         children: /*#__PURE__*/_jsxs(Grid, {
           item: true,
           xs: 12,
@@ -68,7 +66,7 @@ const ColorPickerButton = props => {
             style: {
               display: "flex",
               justifyContent: "end",
-              marginTop: "16px"
+              margin: "8px"
             },
             children: [/*#__PURE__*/_jsx(Button, {
               onClick: handleClose,

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -5,6 +5,7 @@ import ChooseAssets from "./Options/ChooseAssets";
 import AddLink from "./Options/AddLink";
 import Icon from "../Icon";
 import ImageSelectorStyles from "./Styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,7 +21,10 @@ const TAB_SHOW = {
   Document: ["addLink", "upload"]
 };
 const ImageSelector = props => {
-  const classes = ImageSelectorStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = ImageSelectorStyles(theme);
   const {
     value,
     onClose,
@@ -49,10 +53,7 @@ const ImageSelector = props => {
     sx: classes.dialogWrapper,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
       children: /*#__PURE__*/_jsxs(Typography, {
-        sx: {
-          fontSize: "16px",
-          fontWeight: 500
-        },
+        sx: classes.titleTypo,
         children: ["Add ", title]
       })
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {

package/dist/Editor/common/ImageSelector/Styles.js

@@ -1,28 +1,32 @@
-const ImageSelectorStyles = () => ({
+const ImageSelectorStyles = theme => ({
   root: {},
   tabs: {
     "& button": {
       fontSize: "12px",
       fontWeight: "500",
       textTransform: "capitalize",
-      minHeight: '40px',
-      padding: '10px',
-      marginRight: '24px',
+      minHeight: "40px",
+      padding: "10px",
+      marginRight: "24px",
+      borderRadius: "7px",
+      marginBottom: "12px",
+      color: theme?.palette?.editor?.textColor,
       "&.hidden": {
         display: "none"
       },
       "&.active": {
-        backgroundColor: "#FFF",
-        border: '1px solid #2563EB',
-        borderRadius: '7px',
-        '& svg': {
-          '& path': {
-            stroke: '#2563EB'
+        backgroundColor: theme?.palette?.editor?.background,
+        border: `1px solid ${theme?.palette?.editor?.activeColor}`,
+        "& svg": {
+          "& path": {
+            stroke: theme?.palette?.editor?.activeColor
           }
         }
       },
       "&:hover": {
-        backgroundColor: "#ECECEC"
+        backgroundColor: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.activeColor,
+        border: `1px solid ${theme?.palette?.editor?.activeColor}`
       },
       "& svg": {
         marginRight: "8px",
@@ -31,22 +35,23 @@ const ImageSelectorStyles = () => ({
       }
     },
     "& .MuiTabs-indicator": {
-      display: 'none'
+      display: "none"
     }
   },
   tab: {},
   imsRightWrpr: {
     height: "300px",
     overflow: "auto",
-    backgroundColor: "#fff",
+    backgroundColor: theme?.palette?.editor?.background,
     padding: "0 8px",
     "& .MuiFormHelperText-root": {
       marginLeft: "0px"
     }
   },
   dialogWrapper: {
-    '& .MuiDialog-paper': {
-      borderRadius: '12px'
+    "& .MuiDialog-paper": {
+      borderRadius: "12px",
+      backgroundColor: theme?.palette?.editor?.background
     },
     "& .primaryBtn": {
       background: "#2563eb !important",
@@ -73,54 +78,63 @@ const ImageSelectorStyles = () => ({
       marginRight: "8px !important"
     }
   },
+  titleTypo: {
+    fontSize: "16px",
+    fontWeight: 500,
+    color: theme?.palette?.editor?.textColor
+  },
   addLinkField: {
     "& .MuiOutlinedInput-input": {
-      fontSize: '12px',
-      fontWeight: 500
+      fontSize: "12px",
+      fontWeight: 500,
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiFormHelperText-root": {
+      color: theme?.palette?.editor?.textColor
     },
-    '& .MuiOutlinedInput-root': {
-      boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)',
-      borderRadius: '7px',
-      '& fieldset': {
-        borderColor: '#D8DDE1'
+    "& .MuiOutlinedInput-root": {
+      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
+      borderRadius: "7px",
+      "& fieldset": {
+        borderColor: "#D8DDE1"
       },
-      '&:hover fieldset': {
-        borderColor: '#64748B'
+      "&:hover fieldset": {
+        borderColor: "#64748B"
       },
-      '&.Mui-focused fieldset': {
-        borderColor: '#2563EB'
+      "&.Mui-focused fieldset": {
+        borderColor: "#2563EB"
       },
-      '& .MuiFormLabel-root': {}
+      "& .MuiFormLabel-root": {}
     }
   },
   addLinkBtn: {
-    borderRadius: '5px',
+    borderRadius: "5px",
     background: "#E7EDF7",
-    width: '20px',
-    height: '20px',
-    '& svg': {
-      width: '16px',
-      height: '16px'
+    width: "20px",
+    height: "20px",
+    "& svg": {
+      width: "16px",
+      height: "16px"
     }
   },
   closeBtn: {
-    background: '#F4F6F9',
-    color: '#64748B',
-    fontSize: '14px',
+    backgroundColor: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 22px',
-    textTransform: 'none',
-    border: '1px solid #D8DDE1',
-    '&:hover': {
-      border: '1px solid #64748B'
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "&:hover": {
+      border: "1px solid #64748B"
     }
   },
   saveBtn: {
-    background: '#2563EB',
-    fontSize: '14px',
+    background: "#2563EB",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 24px',
-    textTransform: 'none'
+    padding: "4px 24px",
+    textTransform: "none"
   }
 });
 export default ImageSelectorStyles;

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -1,25 +1,25 @@
-const UploadStyles = () => ({
+const UploadStyles = theme => ({
   uploadContainer: {
-    border: '1px solid #2563EB',
-    padding: '10px',
+    border: "1px solid #2563EB",
+    padding: "10px",
     borderRadius: "7px",
-    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)"
   },
   uploadField: {
     width: "100%",
-    backgroundSize: "contain",
+    backgroundSize: "100% auto",
     backgroundRepeat: "no-repeat",
     backgroundPosition: "center",
     height: "250px",
     position: "relative",
-    backgroundColor: "#EFF4FF",
+    backgroundColor: theme?.palette?.editor?.background,
     borderRadius: "9px",
-    border: '1px dashed #2563EB'
+    border: "1px dashed #2563EB"
   },
   uploadIcon: {
-    '& svg': {
-      '& path': {
-        stroke: '#2563EB'
+    "& svg": {
+      "& path": {
+        stroke: "#2563EB"
       }
     }
   }

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -1,8 +1,7 @@
-const usePopupStyles = () => ({
+const usePopupStyles = theme => ({
   root: {
     position: "absolute",
     zIndex: 1300,
-    background: "white",
     borderRadius: "10px",
     padding: "0px",
     boxShadow: "0 4px 10px rgba(0,0,0,.2)",
@@ -15,7 +14,14 @@ const usePopupStyles = () => ({
     overflow: "auto",
     padding: "8px",
     margin: "0px",
-    borderRadius: "10px"
+    borderRadius: "10px",
+    backgroundColor: theme?.palette?.editor?.background,
+    "& .MuiTypography-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& button": {
+      color: theme?.palette?.editor?.textColor
+    }
   },
   groupHeader: {
     padding: "10px 8px",
@@ -29,11 +35,15 @@ const usePopupStyles = () => ({
     cursor: "pointer",
     background: "transparent",
     borderRadius: "10px",
+    border: `1px solid transparent`,
+    "& .MuiTypography-root": {
+      color: theme?.palette?.editor?.textColor
+    },
     "&.active": {
-      background: "rgba(55, 53, 47, 0.08)"
+      border: `1px solid ${theme?.palette?.editor?.activeColor}`
     },
     "&:hover": {
-      background: "rgba(55, 53, 47, 0.08)"
+      border: `1px solid ${theme?.palette?.editor?.activeColor}`
     },
     "&.renderComp": {
       padding: "0px",
@@ -53,8 +63,7 @@ const usePopupStyles = () => ({
         span: {
           padding: "8px",
           fontSize: "14px",
-          fontWeight: "500",
-          color: "rgba(0, 0, 0, 0.87)"
+          fontWeight: "500"
         }
       }
     }

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

@@ -13,11 +13,8 @@ const POPUP_LIST_TYPES = {
   elements: ElementListCard
 };
 const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
-  const classes = usePopupStyle();
-  const papperRef = useRef(null);
-  const buttonRef = useRef(null);
-  const editor = useSlateStatic();
   const {
+    theme,
     index,
     target,
     chars,
@@ -25,6 +22,10 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
     setMentions,
     type
   } = props;
+  const classes = usePopupStyle(theme);
+  const papperRef = useRef(null);
+  const buttonRef = useRef(null);
+  const editor = useSlateStatic();
   const ListElement = POPUP_LIST_TYPES[type] || null;
   const [anchorEl, setAnchorEl] = useState(null);
   let open = Boolean(anchorEl);

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

@@ -3,6 +3,7 @@ import { Grid, Button, Typography } from "@mui/material";
 import ImageSelector from "../../ImageSelector/ImageSelector";
 import UploadStyles from "../../ImageSelector/UploadStyles";
 import Icon from "../../Icon";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BackgroundImage = props => {
@@ -17,7 +18,10 @@ const BackgroundImage = props => {
   } = data;
   const [base64, setBase64] = useState(value);
   const [open, setOpen] = useState(false);
-  const classes = UploadStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = UploadStyles(theme);
   const onRemoveBG = () => {
     setBase64(null);
     onChange({

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Checkbox, FormControlLabel, Grid, Slider, Typography } from "@mui/material";
+import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
 import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
@@ -11,7 +11,8 @@ const BannerSpacing = props => {
     value: val,
     data,
     onChange,
-    elementProps
+    elementProps,
+    classes
   } = props;
   const {
     key
@@ -23,7 +24,6 @@ const BannerSpacing = props => {
   }
   const [size] = useWindowResize();
   const value = getBreakPointsValue(val, size?.device);
-  console.log(value, val, size?.device);
   const handleChange = e => {
     let changeAll = {};
     if (lockSpacing) {
@@ -74,7 +74,9 @@ const BannerSpacing = props => {
         max: 100,
         name: "top",
         onChange: handleChange
-      }), /*#__PURE__*/_jsx("input", {
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "input",
+        sx: classes.sapcingInput,
         name: "top",
         value: !lockSpacing ? "" : value?.top || 0,
         className: "sliderInput",

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Typography, Slider, FormControlLabel, Checkbox } from "@mui/material";
+import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,7 +9,8 @@ const BorderRadius = props => {
     value,
     data,
     onChange,
-    elementProps
+    elementProps,
+    classes
   } = props;
   let {
     lockRadius
@@ -66,7 +67,9 @@ const BorderRadius = props => {
         valueLabelDisplay: "auto",
         max: 100,
         onChange: handleChange
-      }), /*#__PURE__*/_jsx("input", {
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: classes.sapcingInput,
+        component: "input",
         value: !lockRadius ? "" : value?.topLeft || 0,
         className: "sliderInput",
         disabled: !lockRadius,

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

@@ -7,7 +7,8 @@ const Color = props => {
   const {
     value,
     data,
-    onChange
+    onChange,
+    classes
   } = props;
   const {
     key,
@@ -42,6 +43,7 @@ const Color = props => {
         startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
           position: "start",
           children: /*#__PURE__*/_jsx(ColorPickerButton, {
+            classes: classes,
             value: value,
             onSave: onSave
           })

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

@@ -10,7 +10,8 @@ const TextOptions = props => {
     value: val,
     data,
     onChange,
-    elementProps
+    elementProps,
+    classes
   } = props;
   const {
     key,
@@ -60,6 +61,7 @@ const TextOptions = props => {
         style: {
           marginBottom: "16px"
         },
+        sx: classes.textOptions,
         children: options.map(m => {
           return /*#__PURE__*/_jsx(MenuItem, {
             value: m.value,