@flozy/editor 1.9.5 → 1.9.6

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,

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

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
-import commonStyle from "../../commonStyle";
-import { styled } from "@mui/material/styles";
+import useCommonStyle from "../../commonStyle";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const StyleContent = props => {
@@ -18,6 +18,10 @@ const StyleContent = props => {
   const {
     hideTools
   } = customProps || {};
+  const {
+    theme
+  } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const tabContent = renderTabs.find(f => f.value === value);
   const {
     fields
@@ -37,7 +41,8 @@ const StyleContent = props => {
         onChange: onChange,
         elementProps: element,
         customProps: customProps,
-        handleClose: handleClose
+        handleClose: handleClose,
+        classes: classes
       }, `ei_stt_tab_${value}_${m.key}_${i}`) : null;
     })
   }, value);
@@ -52,6 +57,10 @@ const StyleBuilder = props => {
     onDelete,
     customProps
   } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const [elementProps, setElementProps] = useState(element);
   const [tab] = useState(renderTabs[0]?.value);
   const tabVal = renderTabs?.find(f => f.value === tab);
@@ -90,6 +99,7 @@ const StyleBuilder = props => {
     style: {
       zIndex: "1300"
     },
+    sx: classes.sideBarDrawer,
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
@@ -159,4 +169,4 @@ const StyleBuilder = props => {
 };
 
 // export default StyleBuilder;
-export default styled(StyleBuilder)(commonStyle);
+export default StyleBuilder;

package/dist/Editor/common/iconslist.js

@@ -1183,7 +1183,6 @@ export const TextPlusIcon = props => /*#__PURE__*/_jsx("svg", {
   fill: "none",
   children: /*#__PURE__*/_jsx("path", {
     d: "M1.08203 3.43359L3.51526 1.00036L5.94849 3.43359",
-    stroke: "#64748B",
     strokeLinecap: "round"
   })
 });
@@ -1195,7 +1194,6 @@ export const TextMinusIcon = props => /*#__PURE__*/_jsx("svg", {
   fill: "none",
   children: /*#__PURE__*/_jsx("path", {
     d: "M1 0.805664L3.43323 3.2389L5.86646 0.805664",
-    stroke: "#64748B",
     strokeLinecap: "round"
   })
 });

package/dist/Editor/commonStyle.js

@@ -1,11 +1,55 @@
-const commonStyle = theme => ({
-  "&.dialogComp": {
+const useCommonStyle = theme => ({
+  sideBarDrawer: {
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .MuiTypography-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiInputBase-input": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiCheckbox-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.borderColor}`
+    },
     "& .close-popupbtn": {
-      //   background: theme.palette.containers.bg7,
+      color: theme?.palette?.editor?.textColor
     }
   },
-  ".close-popupbtn": {
-    // background: theme.palette.containers.bg7,
+  sapcingInput: {
+    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
+      }
+    }
   }
 });
-export default commonStyle;
+export default useCommonStyle;

package/dist/Editor/hooks/useMouseMove.js

@@ -2,6 +2,7 @@ import { useEffect, useState, createContext, useContext, useMemo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EditorContext = /*#__PURE__*/createContext();
 export const EditorProvider = ({
+  theme,
   children
 }) => {
   const [event] = useMouseMove();
@@ -27,7 +28,8 @@ export const EditorProvider = ({
     value: {
       ...(value || {}),
       onDrop: onDrop,
-      drop
+      drop,
+      theme: theme
     },
     children: children
   });

package/dist/Editor/utils/draftToSlate.js

@@ -88,7 +88,6 @@ export const draftToSlate = props => {
     const converted = data?.blocks?.reduce((a, b) => {
       if (b?.text !== undefined) {
         const blocks = splitInlineStyleRanges(b?.text, [...b?.inlineStyleRanges, ...b?.entityRanges], data).map(m => {
-          console.log(m);
           return {
             ...m
           };
@@ -100,7 +99,6 @@ export const draftToSlate = props => {
       }
       return a;
     }, []);
-    console.log(converted);
     return converted;
   } else if (data?.length) {
     return data;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"