@flozy/editor 1.9.5 → 1.9.7

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/fieldStyle.js

@@ -13,6 +13,9 @@ const fieldStyle = [{
     options: [{
       label: "Textbox",
       value: "text"
+    }, {
+      label: "Email",
+      value: "email"
     }, {
       label: "TextArea",
       value: "textArea"

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);
@@ -73,7 +82,8 @@ const StyleBuilder = props => {
   const onElementPropsChange = data => {
     setElementProps({
       ...elementProps,
-      ...data
+      ...data,
+      name: data?.element === "email" ? "field_email" : data?.name
     });
   };
   const handleSave = () => {
@@ -90,6 +100,7 @@ const StyleBuilder = props => {
     style: {
       zIndex: "1300"
     },
+    sx: classes.sideBarDrawer,
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
@@ -159,4 +170,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/helper/theme.js

@@ -37,6 +37,12 @@ const overrides = {
   },
   overrideGridSize: val => {
     return `${(val || 8) / 12 * 100}%`;
+  },
+  overrideReSize: val => {
+    return `${val?.widthInPercent || 100}%`;
+  },
+  overrideReSizeH: val => {
+    return `${val?.height}px`;
   }
 };
 export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {

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/customHooks/useResize.js

@@ -1,10 +1,13 @@
 import { useState } from "react";
+import { getBreakPointsValue, getDevice } from "../../helper/theme";
 const useResize = ({
   parentDOM,
-  size: defaultSize,
+  size: allSize,
   isGrid,
   onChange
 }) => {
+  const device = getDevice(window.innerWidth);
+  const defaultSize = getBreakPointsValue(allSize);
   const {
     width,
     height
@@ -36,17 +39,21 @@ const useResize = ({
     document.removeEventListener("pointermove", onMouseMove);
     document.removeEventListener("pointerup", onMouseUp);
     if (onChange) {
-      onChange(latest);
+      onChange({
+        ...getBreakPointsValue(allSize),
+        [device]: latest
+      });
     }
     setResizing(false);
   };
   const onMouseMove = e => {
     setSize(currentSize => {
       const calcWidth = (currentSize.width || width) + e.movementX;
+      const cWP = calcWidth / width * 100;
       const calc = {
         width: calcWidth,
         height: (parseInt(currentSize.height) || height) + e.movementY,
-        widthInPercent: calcWidth / width * 100
+        widthInPercent: cWP > 100 ? 100 : cWP
       };
       latest = calc;
       return calc;

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.7",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"