@flozy/editor 1.9.5 → 1.9.7

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = props => {
+  const {
+    classes,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      padding: 0,
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
+const ButtonTemplateCard = props => {
+  const {
+    classes,
+    m,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 3,
+    children: /*#__PURE__*/_jsx(Card, {
+      sx: classes.paperOverrides,
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: classes.buttonCardMediaWrpr,
+        children: [/*#__PURE__*/_jsx(CardMedia, {
+          className: `template-card-media`,
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.buttonCardMedia
+        }), /*#__PURE__*/_jsx(Select, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
+      })
+    })
+  }, `template_${m.id}`);
+};
+export default ButtonTemplateCard;

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = props => {
+  const {
+    classes,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
+const FullViewCard = props => {
+  const {
+    classes,
+    m,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 12,
+    children: /*#__PURE__*/_jsx(Card, {
+      sx: classes.paperOverrides,
+      className: "paperOverrides",
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: classes.buttonCardMediaWrpr,
+        children: [/*#__PURE__*/_jsx(CardMedia, {
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.fullViewCardMedia
+        }), /*#__PURE__*/_jsx(Select, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
+      })
+    })
+  }, `template_${m.id}`);
+};
+export default FullViewCard;

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

@@ -80,6 +80,7 @@ const PopperHeader = props => {
           title: "Close",
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
+            sx: classes.closeBtn,
             className: "close-popupbtn",
             onClick: onClose,
             children: /*#__PURE__*/_jsx(CloseIcon, {})

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,103 @@ 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
+    }
+  },
+  fullViewCardMedia: {
+    width: "100%",
+    height: "130px",
+    backgroundPosition: "left top",
+    backgroundSize: "100% auto",
+    zIndex: 1,
+    position: "relative",
+    "&.fullscreen": {
+      height: "130px"
+    }
+  },
+  buttonCardMedia: {
+    width: "100%",
+    height: "48px",
+    backgroundPosition: "left top",
+    backgroundSize: "contain",
+    zIndex: 1,
+    position: "relative",
+    "&.fullscreen": {
+      height: "48px"
+    }
+  },
+  buttonCardMediaWrpr: {
+    position: "relative",
+    margin: "8px",
+    marginBottom: "0px",
+    "&:hover": {
+      "& .template-card-action": {
+        display: "flex"
+      }
+    },
+    "& .img-loader-wrapper": {
+      position: "absolute",
+      width: "12px",
+      height: "12px",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+      zIndex: 0
+    }
+  },
+  paperOverrides: {
+    "&.MuiPaper-root": {
+      background: "transparent",
+      boxShadow: "none"
+    }
   }
 });
 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"
       }
     }
   }