@flozy/editor 10.3.2 → 10.3.3

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

@@ -1,22 +1,59 @@
-import { Select as Core } from "@mui/material";
+import { Select as Core, MenuItem, Typography } from "@mui/material";
 import SelectStyles from "./styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function Select(props) {
   const {
     children,
+    value,
+    onChange,
+    options,
+    label,
+    labelProps,
+    showDefault,
+    translation,
     ...rest
   } = props;
   const {
     theme
   } = useEditorContext();
   const classes = SelectStyles(theme);
-  return /*#__PURE__*/_jsx(Core, {
-    MenuProps: classes.MenuProps,
-    IconComponent: KeyboardArrowDownRoundedIcon,
-    ...rest,
-    children: children
+  const menuOptions = showDefault ? [{
+    label: "None",
+    value: ""
+  }, ...(options || [])] : options;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [label ? /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      sx: {
+        paddingBottom: "4px"
+      },
+      ...(labelProps || {}),
+      children: label
+    }) : null, /*#__PURE__*/_jsx(Core, {
+      size: "small",
+      fullWidth: true,
+      defaultValue: "",
+      value: value || "",
+      onChange: onChange,
+      sx: classes.select,
+      MenuProps: classes.MenuProps,
+      IconComponent: KeyboardArrowDownRoundedIcon,
+      displayEmpty: true,
+      ...rest,
+      children: menuOptions?.map((option, i) => {
+        return /*#__PURE__*/_jsx(MenuItem, {
+          value: option.value,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            children: translation(option.label)
+          })
+        }, i);
+      })
+    })]
   });
 }
 export default Select;

package/dist/Editor/common/Select/styles.js

@@ -1,16 +1,44 @@
 const SelectStyles = (theme = {}) => {
   const {
     textColor,
-    background
+    textWeightPopUpBackground,
+    menuOptionSelectedOption
   } = theme?.palette?.editor || {};
   return {
     MenuProps: {
+      sx: {
+        zIndex: "1302 !important"
+      },
       PaperProps: {
         sx: {
+          background: textWeightPopUpBackground,
           color: textColor,
-          background
+          borderRadius: "8px",
+          marginTop: "2px",
+          "& li": {
+            padding: "6px 16px",
+            margin: "5px !important",
+            borderRadius: "4px !important"
+          },
+          "& .MuiList-root": {
+            padding: "0px"
+          },
+          "& .MuiTypography-root": {
+            fontSize: "12px !important",
+            fontWeight: 500,
+            fontFamily: "'Inter',sans-serif"
+          },
+          "& .Mui-selected": {
+            background: menuOptionSelectedOption,
+            color: textColor
+          }
         }
       }
+    },
+    select: {
+      "& .MuiSelect-icon": {
+        color: "#64748B !important"
+      }
     }
   };
 };

package/dist/Editor/common/Shorthands/elements.js

@@ -55,6 +55,60 @@ const ELEMENTS_LIST = [{
     icon: "headingThree"
   }),
   onInsert: editor => toggleBlock(editor, "headingThree", false)
+}, {
+  name: "Heading 4",
+  desc: "",
+  group: "Text",
+  type: "headingFour",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingFour"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingFour", false)
+}, {
+  name: "Heading 5",
+  desc: "",
+  group: "Text",
+  type: "headingFive",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingFive"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingFive", false)
+}, {
+  name: "Heading 6",
+  desc: "",
+  group: "Text",
+  type: "headingSix",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "headingSix"
+  }),
+  onInsert: editor => toggleBlock(editor, "headingSix", false)
+}, {
+  name: "Paragraph 1",
+  desc: "",
+  group: "Text",
+  type: "paragraphOne",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "paragraphOne"
+  }),
+  onInsert: editor => toggleBlock(editor, "paragraphOne", false)
+}, {
+  name: "Paragraph 2",
+  desc: "",
+  group: "Text",
+  type: "paragraphTwo",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "paragraphTwo"
+  }),
+  onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
+}, {
+  name: "Paragraph 3",
+  desc: "",
+  group: "Text",
+  type: "paragraphThree",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "paragraphThree"
+  }),
+  onInsert: editor => toggleBlock(editor, "paragraphThree", false)
 }, {
   name: "Quote",
   desc: "",

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

@@ -8,11 +8,11 @@ const accordionTitleBtnStyle = [{
     needPreview: true,
     hideGradient: true
   }, {
-    label: "Accordion Background Color",
+    label: "Background Color",
     key: "accordionBgColor",
     type: "color"
   }, {
-    label: "Accordion Border Color",
+    label: "Border Color",
     key: "accordionBorderColor",
     type: "color"
   }]

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

@@ -6,6 +6,10 @@ const embedVideoStyle = [{
     label: "URL",
     key: "url",
     type: "text"
+  }, {
+    label: "File",
+    key: "url",
+    type: "embedUpload"
   }]
 }, {
   tab: "Aspect Ratio",

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

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+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 EmbedUpload = props => {
+  const {
+    value,
+    data,
+    customProps,
+    onChange
+  } = props;
+  const {
+    translation
+  } = customProps;
+  const {
+    key
+  } = data;
+  const [base64, setBase64] = useState(value);
+  const [open, setOpen] = useState(false);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = UploadStyles(theme);
+  const onRemoveBG = () => {
+    setBase64(null);
+    onChange({
+      [key]: "none"
+    });
+  };
+  const handleClick = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const onSelectImage = img => {
+    setBase64(img);
+    onChange({
+      [key]: img
+    });
+    handleClose();
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      sx: {
+        fontSize: "14px",
+        fontWeight: "500",
+        marginBottom: "8px"
+      },
+      children: translation("Upload Video")
+    }), /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      sx: classes.uploadContainer,
+      children: /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: classes.uploadField,
+        children: /*#__PURE__*/_jsx(Grid, {
+          className: "uploadImageSection",
+          children: base64 ? /*#__PURE__*/_jsxs(Grid, {
+            justifyItems: "center",
+            alignItems: "center",
+            children: [/*#__PURE__*/_jsx(Typography, {
+              style: {
+                padding: "8px",
+                fontSize: "8px",
+                color: theme?.palette?.editor?.textColor,
+                textAlign: "center"
+              },
+              children: base64
+            }), /*#__PURE__*/_jsx(Grid, {
+              className: "removeImageText",
+              onClick: onRemoveBG,
+              children: translation("REMOVE")
+            })]
+          }) : /*#__PURE__*/_jsx(Grid, {
+            className: "uploadImageText",
+            children: /*#__PURE__*/_jsxs(Button, {
+              component: "label",
+              variant: "text",
+              style: {
+                background: "none"
+              },
+              onClick: handleClick,
+              sx: classes.uploadIcon,
+              children: [/*#__PURE__*/_jsx(Icon, {
+                icon: "fileUpload"
+              }), /*#__PURE__*/_jsx("span", {
+                style: {
+                  paddingLeft: "8px"
+                },
+                children: translation("Upload a Video")
+              })]
+            })
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(ImageSelector, {
+      open: open,
+      title: "Video",
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage
+    })]
+  });
+};
+export default EmbedUpload;

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"
           }
         },