@flozy/editor 10.1.4 → 10.1.5

package/dist/Editor/common/RnD/Theme/MainThemeProvider.js

@@ -0,0 +1,17 @@
+import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+function MainThemeProvider({
+  children,
+  userSelectedTheme,
+  theme = {}
+}) {
+  const themeVars = extendTheme(userSelectedTheme?.theme?.cssVars || {});
+  return /*#__PURE__*/_jsx(CssVarsProvider, {
+    theme: {
+      ...themeVars,
+      ...theme
+    },
+    children: children
+  });
+}
+export default MainThemeProvider;

package/dist/Editor/common/RnD/Theme/ViewportStimulator.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { useTheme, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
+import { useTheme, createTheme, useMediaQuery } from "@mui/material";
 import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
+import MainThemeProvider from "./MainThemeProvider";
 
 // Custom breakpoints functions
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,13 +60,15 @@ const extendedTheme = (prevTheme, isPrintMode) => createTheme({
   } : getBreakPoints(prevTheme)
 });
 const ViewportStimulator = ({
-  children
+  children,
+  selectedTheme
 }) => {
   const theme = useTheme();
   const isPrintMode = useMediaQuery("print");
   const viewportTheme = extendedTheme(theme, isPrintMode);
-  return /*#__PURE__*/_jsx(ThemeProvider, {
+  return /*#__PURE__*/_jsx(MainThemeProvider, {
     theme: viewportTheme,
+    userSelectedTheme: selectedTheme,
     children: children
   });
 };

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -232,8 +232,7 @@ export function onDropItem(props, parentClass) {
       } else if (moveTo?.length === 2 && autoAlign) {
         // auto align in mobile
         Transforms.setNodes(editor, {
-          xs_updatedOn: null,
-          xs_updatedOn: new Date().getTime()
+          xs_updatedOn: null
         }, {
           at: moveTo
         });

package/dist/Editor/common/RnD/VirtualElement/helper.js

@@ -295,7 +295,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
   const itemsData = [];
   const items = dom.querySelectorAll(domClass);
   const nextItemPathLength = curPath?.split("|").length + 2;
-  let sectionHeight = 12;
+  // let sectionHeight = 12;
   for (let i = 0; i < items.length; i++) {
     const itemRect = items[i]?.getBoundingClientRect();
     if (items[i]?.classList.contains("type_box")) {
@@ -315,9 +315,10 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
           gridArea: calculateGridArea(y)
         }
       });
-      sectionHeight += itemRect?.height;
+      // sectionHeight += itemRect?.height;
     }
   }
+
   if (dom?.classList.contains("type_box") && parentDom) {
     const parentDomRect = parentDom?.getBoundingClientRect();
     const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");

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

@@ -125,8 +125,7 @@ const RnD = props => {
   } = useAutoScroll(10, "slate-wrapper-scroll-container");
   const {
     isInteracting,
-    handleStart,
-    handleStop
+    setIsInteracting
   } = useFreeGrid();
   const {
     translation
@@ -324,7 +323,7 @@ const RnD = props => {
   };
   const onDragStart = e => {
     e.preventDefault();
-    handleStart();
+    setIsInteracting(true);
     if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
       const {
         left,
@@ -426,7 +425,7 @@ const RnD = props => {
     e.preventDefault();
     e.stopPropagation();
     stopAutoScroll();
-    handleStop();
+    setIsInteracting(false);
     if (dragging?.isDragging === 2 && dragging?.position?.strXY && dragging?.dragOver) {
       d.x = e.x;
       d.y = e.y;
@@ -469,7 +468,7 @@ const RnD = props => {
   };
   const onResizeStop = (e, direction, ref, d, position) => {
     e.preventDefault();
-    handleStop();
+    setIsInteracting(false);
     let updatedPosition = {};
     if (type !== "parent") {
       // update element position while resizing, (for free grid box and item)
@@ -558,7 +557,7 @@ const RnD = props => {
       return {
         onResizeStart: e => {
           e.preventDefault();
-          handleStart();
+          setIsInteracting(true);
         },
         onDragStart: onDragStart,
         onDrag: onDrag,

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

@@ -1,6 +1,7 @@
 import { Select as Core } from "@mui/material";
 import SelectStyles from "./styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 function Select(props) {
   const {
@@ -13,6 +14,7 @@ function Select(props) {
   const classes = SelectStyles(theme);
   return /*#__PURE__*/_jsx(Core, {
     MenuProps: classes.MenuProps,
+    IconComponent: KeyboardArrowDownRoundedIcon,
     ...rest,
     children: children
   });

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

@@ -44,6 +44,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/SnackBar/index.js

@@ -0,0 +1,43 @@
+import Snackbar from "@mui/material/Snackbar";
+import Alert from "@mui/material/Alert";
+import { useState } from "react";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SnackbarAlert = ({
+  message,
+  setShowSnackBar,
+  severity = "info"
+}) => {
+  const [open, setOpen] = useState(!!message);
+  const {
+    theme
+  } = useEditorContext();
+  return /*#__PURE__*/_jsx(Snackbar, {
+    open: open,
+    autoHideDuration: 3000,
+    onClose: () => {
+      setOpen(false);
+      setShowSnackBar(false);
+    },
+    anchorOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    children: /*#__PURE__*/_jsx(Alert, {
+      severity: severity,
+      onClose: () => {
+        setOpen(false);
+        setShowSnackBar(false);
+      },
+      sx: {
+        background: theme?.palette?.primary?.gradientBtn,
+        color: "#FFFFFF",
+        "& .MuiAlert-icon": {
+          color: "#FFFFFF"
+        }
+      },
+      children: message
+    })
+  });
+};
+export default SnackbarAlert;

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}`);