@flozy/editor 10.4.0 → 10.4.1

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

@@ -12,7 +12,7 @@ import GuideLines from "./GuideLines";
 import ShadowElement from "./ShadowElement";
 import BoundaryLine from "./GuideLines/BoundaryLine";
 import ContextMenu from "./ContextMenu";
-import VirtualElement from "./VirtualElement";
+// import VirtualElement from "./VirtualElement";
 import { ItemTypes } from "./ElementSettings/settingsConstants";
 import { selectText } from "../../utils/helper";
 import { removeSign } from "./ElementSettings/OtherSettings";
@@ -20,7 +20,7 @@ import useDragging from "../../hooks/useDragging";
 import { dragOverOn } from "../../helper/RnD/focusNode";
 import { focusSelection, clearSelection, clearSelectionOnly } from "../../helper";
 // import { reRenderChildNodes } from "./Utils/gridDropItem";
-import VirtualTextElement from "./VirtualElement/VirtualTextElement";
+import VirtualTextElement, { updateTextHeight } from "./VirtualElement/VirtualTextElement";
 import useAutoScroll from "../../hooks/useAutoScroll";
 import ForceAutoAlignment from "./VirtualElement/ForceAutoAlignment";
 import BoxHeaderAutoAlignment from "./VirtualElement/BoxHeaderAutoAlignment";
@@ -29,6 +29,18 @@ import { useFreeGrid } from "../../Elements/FreeGrid/FreeGrid";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+function getTextElementHeight(textElement) {
+  let totalHeight = 0;
+  if (textElement) {
+    textElement.childNodes.forEach(node => {
+      if (node.textContent.trim()) {
+        const el = node;
+        totalHeight += el.offsetHeight || el.getBoundingClientRect().height;
+      }
+    });
+  }
+  return totalHeight;
+}
 const ITEM_TYPES = ["child", "parent-container"];
 const EDIT_MODES = ["text", "form", "table"];
 const DISABLE_RESIZING = {
@@ -77,7 +89,8 @@ const RnD = props => {
     autoAlign,
     setAutoAlign,
     isBoxHeader,
-    customProps
+    customProps,
+    xsHidden
   } = props;
   const {
     isSelectedElement,
@@ -127,10 +140,11 @@ const RnD = props => {
     isInteracting,
     handleStart,
     handleStop
-  } = useFreeGrid() || {};
+  } = useFreeGrid();
   const {
     translation
   } = customProps;
+  const timerId = useRef(0);
   useEffect(() => {
     if (ITEM_TYPES.includes(type)) {
       if (enable === 1) {
@@ -140,6 +154,24 @@ const RnD = props => {
         setAbsPosition({});
       }
     }
+    const currElement = getCurrentEle();
+    const textElement = currElement?.querySelector(".fgi_type_text");
+    if (breakpoint && textElement && childType === "text" && !enable) {
+      timerId.current = setTimeout(() => {
+        // const { clientHeight } = textElement;
+        const clientHeight = getTextElementHeight(textElement);
+        const {
+          height
+        } = delta || {};
+        const heightDiff = Math.abs(clientHeight - height);
+        if (clientHeight && height && heightDiff >= 5) {
+          updateTextHeight(editor, path, clientHeight, breakpoint);
+          const parentSectionPath = path.slice(0, 2);
+          reRenderChildNodes(editor, parentSectionPath);
+        }
+      }, 200);
+    }
+    return () => clearTimeout(timerId.current);
   }, [enable]);
   const getCurrentEle = () => {
     return positionRef.current?.resizableElement?.current;
@@ -499,7 +531,9 @@ const RnD = props => {
       ref
     }, ".freegrid-container-parent");
     const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
-    reRenderChildNodes(editor, formatParentPath);
+    if (formatParentPath) {
+      reRenderChildNodes(editor, formatParentPath);
+    }
   };
   const onCloseSettings = () => {
     setSelectedElement({
@@ -632,32 +666,34 @@ const RnD = props => {
         "data-dragoverid": str_path,
         "data-dragovertype": type
       }) : null]
-    }, eId), !active && rndRef?.current && open && !isInteracting ? /*#__PURE__*/_jsx(ElementOptions, {
-      id: `opt_ref_${str_path}`,
-      open: open,
-      anchorEl: rndRef?.current,
-      enable: enable,
-      handleAction: handleAction,
-      actions: actions,
-      actionsMap: actionsMap,
-      optionsProps: optionsProps,
-      selectedAction: currentAction,
-      path: str_path,
-      theme: theme,
-      translation: translation,
-      customProps: customProps
-    }) : null, /*#__PURE__*/_jsx(ElementSettings, {
-      open: Boolean(currentAction),
-      currentAction: currentAction,
-      anchorEl: rndRef?.current,
-      placement: "right-start",
-      onClose: onCloseSettings,
-      childType: childType,
-      editor: editor,
-      path: sp,
-      ...settingsProps,
-      elementProps: elementProps,
-      theme: theme
+    }, eId), xsHidden && breakpoint === "xs" ? null : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ElementSettings, {
+        open: Boolean(currentAction),
+        currentAction: currentAction,
+        anchorEl: rndRef?.current,
+        placement: "right-start",
+        onClose: onCloseSettings,
+        childType: childType,
+        editor: editor,
+        path: sp,
+        ...settingsProps,
+        elementProps: elementProps,
+        theme: theme
+      }), !active && rndRef?.current && open && !isInteracting ? /*#__PURE__*/_jsx(ElementOptions, {
+        id: `opt_ref_${str_path}`,
+        open: open,
+        anchorEl: rndRef?.current,
+        enable: enable,
+        handleAction: handleAction,
+        actions: actions,
+        actionsMap: actionsMap,
+        optionsProps: optionsProps,
+        selectedAction: currentAction,
+        path: str_path,
+        theme: theme,
+        translation: translation,
+        customProps: customProps
+      }) : null]
     }), dragInfoOpen ? /*#__PURE__*/_jsx(DragInfo, {
       anchorEl: rndRef?.current,
       open: dragInfoOpen,
@@ -681,14 +717,7 @@ const RnD = props => {
       handleClose: handleClose,
       theme: theme,
       translation: translation
-    }), type === "parent" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualElement, {
-      updated_at: updated_at,
-      path: str_path,
-      editor: editor,
-      sectionElement: sectionElement,
-      sectionCls: `.freegrid-section_${path.join("_")}`,
-      dataSets: dataSets
-    }) : null, childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
+    }), childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
       editor: editor,
       dataSets: dataSets,
       getCurrentEle: getCurrentEle,

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

@@ -1,20 +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 { 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,
-    ...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,45 @@
 const SelectStyles = (theme = {}) => {
   const {
     textColor,
-    background
+    textWeightPopUpBackground,
+    menuOptionSelectedOption
   } = theme?.palette?.editor || {};
   return {
     MenuProps: {
+      disablePortal: true,
+      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

@@ -18,6 +18,17 @@ import SearchButton from "../../Elements/Search/SearchButton";
 import canOpen from "../../helper/canOpen";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{
+  name: "Ask AI to write anything",
+  group: "Infinity AI",
+  desc: "",
+  type: "infinityAI",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "infinityIcon"
+  }),
+  onInsert: editor => {
+    insertInfinityAI(editor);
+  }
+}, {
   name: "Heading 1",
   desc: "",
   group: "Text",
@@ -44,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: "",
@@ -276,17 +341,6 @@ const ELEMENTS_LIST = [{
   onInsert: editor => {
     insertForm(editor);
   }
-}, {
-  name: "Ask AI to write anything",
-  group: "Infinity AI",
-  desc: "",
-  type: "infinityAI",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "infinityIcon"
-  }),
-  onInsert: editor => {
-    insertInfinityAI(editor);
-  }
 }, {
   name: "Dynamic Table",
   group: "Dynamic Table",

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