@flozy/editor 10.2.5 → 10.2.6

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

@@ -6,15 +6,18 @@ const accordionTitleStyle = [{
     key: "textColor",
     type: "color",
     needPreview: true
-  }, {
-    label: "Background Color",
-    key: "bgColor",
-    type: "color"
-  }, {
-    label: "Border Color",
-    key: "borderColor",
-    type: "color"
-  }]
+  }
+  // {
+  //   label: "Background Color",
+  //   key: "bgColor",
+  //   type: "color",
+  // },
+  // {
+  //   label: "Border Color",
+  //   key: "borderColor",
+  //   type: "color",
+  // },
+  ]
 }, {
   tab: "Banner Spacing",
   value: "bannerSpacing",

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

@@ -21,7 +21,8 @@ const buttonStyle = [{
         },
         children: option.text
       });
-    }
+    },
+    themeEnabled: true
   }, {
     label: "Font Size",
     key: "textSize",
@@ -45,7 +46,8 @@ const buttonStyle = [{
   }, {
     label: "Button Color",
     key: "bgColor",
-    type: "color"
+    type: "color",
+    themeEnabled: true
   }, {
     label: "Border Color",
     key: "borderColor",

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

@@ -76,6 +76,11 @@ const BackgroundImage = props => {
             children: translation("REMOVE")
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
+            sx: {
+              padding: 0,
+              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

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

@@ -3,13 +3,13 @@ import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box, IconButton }
 import { squreStyle } from "./radiusStyle";
 import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
+import { useEditorTheme } from "../../../hooks/useEditorTheme";
 import { CheckedBoxCheckIcon } from "../../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
 const BannerSpacing = props => {
   const {
-    value: val,
     data,
     onChange,
     elementProps,
@@ -23,7 +23,17 @@ const BannerSpacing = props => {
     key
   } = data;
   const lockKeyVal = `lock${key}`;
-  let lockSpacing = elementProps[lockKeyVal];
+  const {
+    selectedTheme
+  } = useEditorTheme();
+  const {
+    bannerSpacing,
+    lockbannerSpacing
+  } = selectedTheme?.elementProps?.button || {};
+  const isUserValue = Object.keys(props?.value || {})?.length;
+  const isUserLockedSpacing = typeof elementProps[lockKeyVal] === "boolean";
+  const val = isUserValue ? props?.value : bannerSpacing;
+  let lockSpacing = isUserLockedSpacing ? elementProps[lockKeyVal] : lockbannerSpacing;
   if (lockSpacing === undefined) {
     lockSpacing = true;
   }

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

@@ -3,13 +3,13 @@ import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box, IconButton }
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
+import { useEditorTheme } from "../../../hooks/useEditorTheme";
 import { CheckedBoxCheckIcon } from "../../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
 const BorderRadius = props => {
   const {
-    value: val,
     data,
     onChange,
     elementProps,
@@ -19,16 +19,24 @@ const BorderRadius = props => {
   const {
     translation
   } = customProps;
-  let {
-    lockRadius
-  } = elementProps;
-  if (lockRadius === undefined) {
-    lockRadius = true;
-  }
   const {
     key
   } = data;
   const [size] = useWindowResize();
+  const {
+    selectedTheme
+  } = useEditorTheme();
+  const {
+    borderRadius,
+    lockRadius: themeLockRadius
+  } = selectedTheme?.elementProps?.button || {};
+  const isUserValue = Object.keys(props?.value || {})?.length;
+  const isUserLockedRadius = typeof elementProps?.lockRadius === "boolean";
+  const val = isUserValue ? props?.value : borderRadius;
+  let lockRadius = isUserLockedRadius ? elementProps?.lockRadius : themeLockRadius;
+  if (lockRadius === undefined) {
+    lockRadius = true;
+  }
   const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};

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

@@ -1,6 +1,7 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,14 +16,17 @@ const RenderCard = ({
 }) => {
   return /*#__PURE__*/_jsx(Card, {
     sx: {
-      position: 'relative',
-      padding: "10px"
+      position: "relative",
+      padding: "10px",
+      "& .MuiCheckbox-root svg": {
+        fill: "unset !important"
+      }
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
         sx: {
           padding: 0,
-          marginTop: '3px'
+          marginTop: "3px"
         },
         onChange: handleChange,
         checked: value,
@@ -58,10 +62,10 @@ const RenderCard = ({
         })
       }),
       sx: {
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
         margin: 0
       },
       labelPlacement: "start"
@@ -83,6 +87,9 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
+  const {
+    theme
+  } = useEditorContext();
   const {
     translation
   } = customProps;
@@ -104,7 +111,8 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
+        background: theme?.palette?.editor?.miniToolBarBackground,
+        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

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

@@ -1,14 +1,23 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
+import { getVariableValue } from "../../../helper/theme";
+import { useButtonStyle } from "../../../hooks/useThemeValues";
+
+// const MAP_STYLE_PROPS = {
+//   bgColor: "background-color",
+//   textColor: "color",
+// };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Color = props => {
   const {
-    value,
+    value: val,
     data,
     onChange,
     classes,
+    elementProps,
+    handleClose,
     customProps
   } = props;
   const {
@@ -20,7 +29,22 @@ const Color = props => {
     translation
   } = customProps;
   const [recentColors, setRecentColors] = useState({});
-  const getLable = label === 'Text' ? translation("selectTextColor") : label === 'Background' ? translation("selectBgColor") : translation(label);
+  const {
+    buttonStyle
+  } = useButtonStyle(val, key, elementProps);
+  const newValue = buttonStyle?.color;
+  const {
+    value,
+    inputValue
+  } = useMemo(() => {
+    const isVariable = newValue && newValue.startsWith("var");
+    const inputValue = isVariable ? getVariableValue(newValue) : newValue;
+    return {
+      value: newValue,
+      inputValue: inputValue
+    };
+  }, [buttonStyle?.color]);
+  const getLable = label === "Text" ? translation("selectTextColor") : label === "Background" ? translation("selectBgColor") : translation(label);
   useEffect(() => {
     const storedColors = JSON.parse(localStorage.getItem("recentColors"));
     if (storedColors) {
@@ -58,11 +82,11 @@ const Color = props => {
         fontSize: "14px",
         fontWeight: 500,
         marginBottom: "5px",
-        display: 'flex',
-        alignItems: 'center',
-        '& svg': {
-          width: '20px',
-          height: '20px'
+        display: "flex",
+        alignItems: "center",
+        "& svg": {
+          width: "20px",
+          height: "20px"
         }
       },
       children: [translation(label), data?.infoIcon ? /*#__PURE__*/_jsx(Tooltip, {
@@ -70,14 +94,14 @@ const Color = props => {
         title: translation("noteText"),
         children: /*#__PURE__*/_jsx("span", {
           style: {
-            display: 'inline-block'
+            display: "inline-block"
           },
           children: data?.infoIcon
         })
       }) : null]
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
-      value: value,
+      value: inputValue,
       placeholder: getLable || `${label} ${translation("color code")}`,
       InputLabelProps: {
         shrink: true
@@ -90,6 +114,8 @@ const Color = props => {
             value: value,
             onSave: onSave,
             recentColors: recentColors[key],
+            handleClose: handleClose,
+            disableEditTheme: customProps?.disableEditTheme,
             hideGradient: hideGradient
           })
         })

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

@@ -1,23 +1,30 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { TextField, IconButton, Grid, Typography } from "@mui/material";
 import { sizeMap } from "../../../utils/font.js";
 import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
+import { getElementStyle } from "../../../helper/theme.js";
+import { useSlateStatic } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FontSize = props => {
   const {
-    value,
+    value: val,
     data,
     onChange,
+    elementProps,
     customProps
   } = props;
-  const {
-    translation
-  } = customProps;
   const {
     key,
     width
   } = data;
+  const editor = useSlateStatic();
+  const value = useMemo(() => {
+    return val || getElementStyle(editor, elementProps, "font-size");
+  }, [editor, val]);
+  const {
+    translation
+  } = customProps;
   const handleChange = e => {
     let inc = parseInt(e.target.value) || 16;
     inc = inc > 200 ? 200 : inc;
@@ -28,7 +35,9 @@ const FontSize = props => {
   const getSizeVal = () => {
     try {
       const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
-      return parseInt(size || 16);
+      const defaultSize = 16;
+      const val = parseInt(size || defaultSize);
+      return isNaN(val) ? defaultSize : val;
     } catch (err) {
       return "";
     }
@@ -77,7 +86,7 @@ const FontSize = props => {
         size: "small",
         inputProps: {
           style: {
-            // textAlign: "center", 
+            // textAlign: "center",
             padding: "11px"
           }
         },

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

@@ -53,9 +53,9 @@ const LineSpacing = props => {
         defaultValue: value || 1.43,
         "aria-label": "Default",
         valueLabelDisplay: "auto",
-        min: 0.5,
-        max: 3.0,
-        step: 0.1,
+        min: 0.50,
+        max: 3.00,
+        step: 0.01,
         name: "lineHeight",
         onChange: handleChange
       }), /*#__PURE__*/_jsx(Box, {
@@ -65,15 +65,16 @@ const LineSpacing = props => {
           color: theme?.palette?.editor?.textColor
         },
         name: "lineHeight",
-        value: pro_value,
+        value: pro_value || 1.43,
         className: "sliderInput",
         onChange: handleChange,
         type: "number",
         placeholder: "0",
-        disabled: true,
-        defaultValue: pro_value || 1.43
+        disabled: true
+        // defaultValue={pro_value || 1.43}
       })]
     })]
   });
 };
+
 export default LineSpacing;

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography, Tooltip, IconButton } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import Settings from "@mui/icons-material/Settings";
 import LinkSettings from "../../LinkSettings";
 import { getLinkType } from "../../../utils/helper";
+import SettingsIcon from "../../../assets/svg/SettingsIcon";
+import { DeleteIcon } from "../../../assets/svg/AIIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MenusArray = props => {
@@ -126,6 +126,7 @@ const MenusArray = props => {
           display: "flex",
           alignItems: "center"
         },
+        className: "menu-item-app-header",
         children: [/*#__PURE__*/_jsx(TextField, {
           name: "text",
           type: "text",
@@ -134,7 +135,8 @@ const MenusArray = props => {
           size: "small",
           sx: {
             mb: 0
-          }
+          },
+          className: "text-field1"
         }), /*#__PURE__*/_jsx(TextField, {
           name: "url",
           type: "text",
@@ -142,7 +144,8 @@ const MenusArray = props => {
           onChange: handleChange(i),
           size: "small",
           fullWidth: true,
-          disabled: true
+          disabled: true,
+          className: "text-field1"
         }), /*#__PURE__*/_jsx(Tooltip, {
           title: translation("Link Settings"),
           arrow: true,
@@ -151,14 +154,18 @@ const MenusArray = props => {
               menu: m,
               index: i
             }),
-            children: /*#__PURE__*/_jsx(Settings, {})
+            children: /*#__PURE__*/_jsx(SettingsIcon, {
+              className: "settingsIcon"
+            })
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
           title: translation("Delete Menu"),
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onDelete(i),
-            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+            children: /*#__PURE__*/_jsx(DeleteIcon, {
+              className: "deleteIcon"
+            })
           })
         })]
       }, `add-m-${i}`);

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

@@ -1,13 +1,13 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
-import { getBreakPointsValue } from "../../../helper/theme";
+import { getBreakPointsValue, getElementStyle } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
 import { useSlate } from "slate-react";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 
-// hideMetaDataOptions -- pass true to hide metadata option in select field 
+// hideMetaDataOptions -- pass true to hide metadata option in select field
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -31,14 +31,22 @@ const TextOptions = props => {
     renderOption,
     width,
     webFont = false,
-    hideMetaDataOptions = false
+    hideMetaDataOptions = false,
+    themeEnabled
   } = data;
   const {
     fontFamilies
   } = useEditorContext();
-  const editor = useSlate();
   const [size] = useWindowResize();
-  const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
+  const editor = useSlate();
+  const value = useMemo(() => {
+    const userValue = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
+    if (themeEnabled) {
+      // editor takes a little amount of time to update the new style in element, in that case userValue will be returned
+      return getElementStyle(editor, elementProps, key) || userValue;
+    }
+    return userValue;
+  }, [editor, isBreakpoint, val, size?.device]);
   const metaDataMappingOptions = metaMappings?.boards || [];
   const updatedOption = !hideMetaDataOptions && elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
   const handleChange = (e, d) => {
@@ -117,7 +125,7 @@ const TextOptions = props => {
           editor: editor,
           format: key,
           options: fontFamilies.options,
-          width: '100%',
+          width: "100%",
           onChange: onChange,
           val: value,
           webFont: true

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

@@ -25,13 +25,11 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
-  }
-  // {
-  //   label: "Line Spacing",
-  //   key: "lineHeight",
-  //   type: "lineSpacing",
-  // },
-  ]
+  }, {
+    label: "Line Spacing",
+    key: "lineHeight",
+    type: "lineSpacing"
+  }]
 }, {
   tab: "Max Width",
   value: "maxWidth",

package/dist/Editor/common/SwipeableDrawer/style.js

@@ -6,20 +6,22 @@ const Styles = theme => ({
     "& .MuiDrawer-paper": {
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
-      "& .MuiInputBase-root": {
-        border: `1px solid ${theme?.palette?.editor?.textColor}`,
-        color: theme?.palette?.editor?.textColor
-      },
-      "& .MuiSvgIcon-root": {
-        color: theme?.palette?.editor?.textColor
-      },
-      "& .MuiFormLabel-root": {
-        color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
-      }
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+
+      // "& .MuiInputBase-root": {
+      //   border: `1px solid ${theme?.palette?.editor?.textColor}`,
+      //   color: theme?.palette?.editor?.textColor,
+      // },
+      // "& .MuiSvgIcon-root": {
+      //   color: theme?.palette?.editor?.textColor,
+      // },
+      // "& .MuiFormLabel-root": {
+      //   color: theme?.palette?.editor?.textColor,
+      //   backgroundColor: theme?.palette?.editor?.background,
+      // },
     }
   },
+
   childContainer: {
     padding: "20px",
     "&.emojiDrawer": {

package/dist/Editor/common/Uploader.js

@@ -4,6 +4,7 @@ import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
+import { useEditorContext } from "../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,6 +19,9 @@ const Uploader = props => {
   const [base64, setBase64] = useState(value?.url);
   const [fileName, setFileName] = useState("");
   const [uploading, setUploading] = useState(false);
+  const {
+    theme
+  } = useEditorContext();
   const handleChange = async e => {
     const uFile = e.target.files[0];
     const strImage = await convertBase64(uFile);
@@ -102,6 +106,10 @@ const Uploader = props => {
           className: "uploadImageSection",
           children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
+            sx: {
+              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",