@flozy/editor 5.8.8 → 5.8.9

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,7 +1,9 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import WebFont from "webfontloader";
+import { Backdrop, CircularProgress } from "@mui/material";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { defaultFonts, googleFontList, otherFonts } from "./FontList";
+import { googleFontList } from "./FontList";
+import { jsx as _jsx } from "react/jsx-runtime";
 const FontLoader = props => {
   const {
     otherProps,
@@ -10,14 +12,20 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
+  const [loader, setLoader] = useState(true);
   const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
     let retryCount = 0;
+    let hideLoaderOn = 30;
     function loadNextBatch() {
       if (currentIndex >= families?.length) {
         // console.log("All fonts have been loaded");
+        setLoader(false);
         return;
       }
+      if (currentIndex >= hideLoaderOn) {
+        setLoader(false);
+      }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);
       const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
       WebFont.load({
@@ -54,21 +62,21 @@ const FontLoader = props => {
     loadNextBatch();
   };
   useEffect(() => {
-    let families = [...otherFonts, ...defaultFonts];
+    let families = [...googleFontList];
     if (!readOnly) {
       otherProps?.services("listGoogleFont", []).then(data => {
-        families = [...families, ...(data?.data || [])];
-        const filteredfamilies = families?.filter(font => !font?.includes("Material"));
+        families = [...(data?.data || [])];
         setFontFamilies({
           id: 1,
           format: "fontFamily",
           type: "fontfamilydropdown",
-          options: filteredfamilies || []
+          options: families || []
         });
         loadFontsInBatches(families);
       }).catch(err => {
         // console.log(err);
       });
+      // setLoading(true);
     } else {
       function correctFontArray(fontString) {
         let fontsArray = fontString.split(",");
@@ -93,6 +101,15 @@ const FontLoader = props => {
       loadFontsInBatches(families);
     }
   }, []);
-  return null;
+  return /*#__PURE__*/_jsx(Backdrop, {
+    open: loader,
+    sx: {
+      color: "#fff",
+      zIndex: theme => theme.zIndex.drawer + 1 // Ensure it's above other UI elements
+    },
+    children: /*#__PURE__*/_jsx(CircularProgress, {
+      color: "inherit"
+    })
+  });
 };
 export default FontLoader;

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -62,6 +62,7 @@ const FormSettings = props => {
       MuiAccordion: {
         styleOverrides: {
           root: {
+            background: theme?.palette?.editor?.miniToolBarBackground,
             "& .MuiAccordionSummary-root": {
               flexDirection: "row-reverse",
               "& .MuiSvgIcon-root": {

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

@@ -9,17 +9,23 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange
+    onChange,
+    show
   } = props;
   const classes = useSwitchViewport();
   const {
+    setSelectedElement,
     setActiveBreakPoint
   } = useEditorContext();
   useEffect(() => {
-    console.log(breakpoint);
+    // to reset selection on viewport changes - FS-6589
+    setSelectedElement({});
   }, [breakpoint]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.root,
+    style: {
+      display: show ? "block" : "none"
+    },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Desktop View",
       children: /*#__PURE__*/_jsx(IconButton, {

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

@@ -2,36 +2,34 @@ import React, { useRef, useState } from "react";
 import { useTheme } from "@mui/material";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, IconButton, Popper, Tooltip } from "@mui/material";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
-import DragHandle from "../DnD/DragHandleButton";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+// import DragHandle from "../DnD/DragHandleButton";
+// import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
 import useWindowResize from "../../hooks/useWindowResize";
 import { SectionSettingIcon } from "../iconListV2";
+
+// const list_types = ["orderedList", "unorderedList"];
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const Toolbar = ({
-  fromPopper,
   readOnly,
   showTool,
-  onSettings
+  onSettings,
+  isSectionFullWidth
 }) => {
   return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: `element-toolbar no-border-button hr section-tw sectionIcon`,
     contentEditable: false,
-    style: fromPopper ? {
-      position: "unset",
-      marginLeft: "28px",
-      paddingTop: "4px",
-      marginRight: "10px",
-      height: "100%"
-    } : {
-      left: "-28px",
-      top: "1px"
+    sx: {
+      left: isSectionFullWidth ? "0px" : "-28px",
+      top: isSectionFullWidth ? "-28px" : "1px",
+      "&:hover": {
+        backgroundColor: "rgba(0,0,0,0.5)"
+      }
     },
     children: /*#__PURE__*/_jsx(Tooltip, {
       title: "Section Settings",
@@ -42,7 +40,6 @@ const Toolbar = ({
     })
   }) : null;
 };
-const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const themeReact = useTheme();
   const theme = props?.theme;
@@ -56,7 +53,8 @@ const Section = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
-  const [showTool] = useEditorSelection(editor);
+  // const [isHovering, setIsHovering] = useState(false);
+  const [size] = useWindowResize();
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     sectionBgColor,
@@ -73,41 +71,11 @@ const Section = props => {
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
   const anchorEl = useRef(null);
-  const popperEl = useRef(null);
-  const [size] = useWindowResize();
+  // const popperEl = useRef(null);
+  // const [showTool] = useEditorSelection(editor);
   const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
-  const [isHovering, setIsHovering] = useState(false);
-  const onMouseEnter = () => {
-    setIsHovering(true);
-  };
-  const onMouseLeave = () => {
-    setIsHovering(false);
-  };
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  const onDelete = () => {
-    Transforms.removeNodes(editor, {
-      at: path
-    });
-  };
-  const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
-  const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "" : "";
+  const isFreeGrid = element?.children[0]?.type === "freegrid";
+  const needHover = false;
   let tempProps = {};
   if (element?.type === "temp") {
     tempProps = {
@@ -131,6 +99,38 @@ const Section = props => {
       ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
     }
   }, themeReact);
+
+  // const onMouseEnter = () => {
+  //   setIsHovering(true);
+  // };
+
+  // const onMouseLeave = () => {
+  //   setIsHovering(false);
+  // };
+
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,
@@ -145,9 +145,10 @@ const Section = props => {
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
       justifyContent: vertical
-    },
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
+    }
+    // onMouseEnter={onMouseEnter}
+    // onMouseLeave={onMouseLeave}
+    ,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
@@ -155,41 +156,11 @@ const Section = props => {
         ...edInnerSp
       },
       ref: anchorEl,
-      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
-        open: isHovering && isSectionFullWidth,
-        anchorEl: anchorEl?.current,
-        placement: "top-start",
-        sx: {
-          zIndex: 9999
-        },
-        disablePortal: true,
-        ref: popperEl,
-        className: "sectionPopper",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            bgcolor: "background.paper",
-            height: "30px",
-            position: "relative",
-            background: theme?.palette?.type === "dark" ? theme?.palette?.editor?.miniToolBarBackground : "#F6F6F6"
-          },
-          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-            ...props,
-            fromPopper: true
-          }) : null, /*#__PURE__*/_jsx(Toolbar, {
-            fromPopper: true,
-            readOnly: readOnly,
-            showTool: showTool,
-            onSettings: onSettings
-          })]
-        })
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-          ...props
-        }) : null, /*#__PURE__*/_jsx(Toolbar, {
-          readOnly: readOnly,
-          showTool: showTool,
-          onSettings: onSettings
-        })]
+      children: [/*#__PURE__*/_jsx(Toolbar, {
+        isSectionFullWidth: isSectionFullWidth,
+        readOnly: readOnly,
+        showTool: false,
+        onSettings: onSettings
       }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {

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

@@ -73,6 +73,11 @@ const BackgroundImage = props => {
             children: "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/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,7 +16,10 @@ const RenderCard = ({
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       position: 'relative',
-      padding: "10px"
+      padding: "10px",
+      '& .MuiCheckbox-root svg': {
+        fill: 'unset !important'
+      }
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
@@ -81,6 +85,9 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
+  const {
+    theme
+  } = useEditorContext();
   const activeCard = value === selectedCard;
   const handleChange = e => {
     if (selectedCard === data?.value) {
@@ -99,7 +106,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/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);
@@ -99,6 +103,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",

package/dist/Editor/common/iconslist.js

@@ -1654,13 +1654,12 @@ export const CsvIcon = () => /*#__PURE__*/_jsxs("svg", {
     fill: "white"
   })]
 });
-export const CloseIcon = props => /*#__PURE__*/_jsxs("svg", {
+export const CloseIcon = () => /*#__PURE__*/_jsxs("svg", {
   width: "20",
   height: "20",
   viewBox: "0 0 20 20",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
-  ...(props || {}),
   children: [/*#__PURE__*/_jsx("path", {
     d: "M14.1245 5.875L5.87493 14.1246",
     stroke: "#64748B",

package/dist/Editor/commonStyle.js

@@ -51,18 +51,17 @@ const useCommonStyle = theme => ({
       },
       "& .MuiPaper-root": {
         border: `unset !important`,
-        borderRadius: '0px',
-        height: 'fit-content'
+        borderRadius: "0px",
+        height: "fit-content",
+        padding: "2px"
       },
       "& p": {
         marginBottom: "7px",
         marginTop: "4px"
       },
-      "& .MuiPaper-root": {
-        border: 'unset !important',
-        borderRadius: '0px',
-        height: 'fit-content',
-        padding: '2px'
+      "& p": {
+        marginBottom: "7px",
+        marginTop: "4px"
       },
       "& .muiIconsListParent": {
         "& svg": {
@@ -76,15 +75,12 @@ const useCommonStyle = theme => ({
         },
         "&::-webkit-scrollbar-thumb": {
           background: `${theme?.palette?.editor?.brainPopupScroll} !important`
-        },
-        "&::-webkit-scrollbar-track": {
-          visibility: "hidden"
         }
       },
       "& .MuiGrid-root>.MuiGrid-item": {
         paddingRight: "0px !important",
         fontFamily: "Inter, sans-serif",
-        height: 'fit-content'
+        height: "fit-content"
       },
       "& .MuiInputBase-root": {
         borderRadius: "10px",
@@ -145,11 +141,11 @@ const useCommonStyle = theme => ({
           borderRadius: "10px",
           width: "46px !important",
           marginLeft: "10px",
-          height: '36px !important'
+          height: "36px !important"
         }
       },
-      '& .MuiFormHelperText-root': {
-        margin: '4px 0px 0px 0px',
+      "& .MuiFormHelperText-root": {
+        margin: "4px 0px 0px 0px",
         color: theme?.palette?.editor?.closeButtonSvgStroke,
         fontFamily: "Inter, sans-serif"
       }
@@ -405,14 +401,14 @@ const useCommonStyle = theme => ({
       padding: "8px 12px",
       fontSize: "12px",
       color: theme?.palette?.editor?.menuOptionTextColor,
-      fontWeight: '500',
+      fontWeight: "500",
       fontFamily: "Inter, sans-serif",
-      minHeight: '36px',
+      minHeight: "36px",
       "&:hover": {
         backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
       }
     },
-    '& .Mui-selected': {
+    "& .Mui-selected": {
       background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
     },
     "& .MuiListSubheader-root": {
@@ -421,16 +417,16 @@ const useCommonStyle = theme => ({
       fontSize: "12px"
     },
     "& .MuiPaper-root": {
-      borderRadius: '8px',
-      padding: '0px',
+      borderRadius: "8px",
+      padding: "0px",
       background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
     },
-    '& .MuiButtonBase-root': {
-      margin: '4px',
-      borderRadius: '6px'
+    "& .MuiButtonBase-root": {
+      margin: "4px",
+      borderRadius: "6px"
     },
-    '& .MuiList-root': {
-      padding: '0px'
+    "& .MuiList-root": {
+      padding: "0px"
     }
   },
   datePicker: {
@@ -475,27 +471,27 @@ const useCommonStyle = theme => ({
       }
     }
   },
-  pageSettingPopUpRoot: {
-    padding: "16px 8px 16px 10px!important",
-    height: "100%"
-  },
   buttonMoreOption: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    padding: '4px !important',
-    '& svg': {
-      width: '18px !important',
-      height: '18px !important',
-      '& path': {
+    padding: "4px !important",
+    "& svg": {
+      width: "18px !important",
+      height: "18px !important",
+      "& path": {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
   },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    '& svg': {
-      '& path': {
+    "& svg": {
+      "& path": {
         fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -503,11 +499,11 @@ const useCommonStyle = theme => ({
   buttonMoreOption3: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    padding: '5px !important',
-    '& svg': {
-      width: '16px !important',
-      height: '16px !important',
-      '& path': {
+    padding: "5px !important",
+    "& svg": {
+      width: "16px !important",
+      height: "16px !important",
+      "& path": {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -515,37 +511,37 @@ const useCommonStyle = theme => ({
   resizeButton: {
     background: theme?.palette?.editor?.aiInputBackground,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
-    padding: '5px !important',
-    borderRadius: '50% !important',
-    '& svg': {
-      width: '18px',
-      height: '18px',
-      '& path': {
+    padding: "5px !important",
+    borderRadius: "50% !important",
+    "& svg": {
+      width: "18px",
+      height: "18px",
+      "& path": {
         fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
       }
     },
-    '&:hover': {
+    "&:hover": {
       background: theme?.palette?.editor?.aiInputBackground
     }
   },
   gradientFillBtn: {
     background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
-    textTransform: 'math-auto !important',
-    color: '#FFFFFF !important',
-    padding: '0px 12px !important',
-    height: '32px',
-    borderRadius: '8px',
-    fontWeight: '500',
-    fontSize: '14px'
+    textTransform: "math-auto !important",
+    color: "#FFFFFF !important",
+    padding: "0px 12px !important",
+    height: "32px",
+    borderRadius: "8px",
+    fontWeight: "500",
+    fontSize: "14px"
   },
   emptyThumbBtn: {
     background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
     color: `${theme?.palette?.editor?.textColor} !important`,
-    fontSize: '14px !important',
-    '& svg': {
-      width: '20px !important',
-      height: '20px !important',
-      '& path': {
+    fontSize: "14px !important",
+    "& svg": {
+      width: "20px !important",
+      height: "20px !important",
+      "& path": {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }

package/dist/Editor/helper/deserialize/index.js

@@ -90,9 +90,18 @@ const ELEMENT_TAGS = {
     type: "image",
     url: el.getAttribute("src")
   }),
-  LI: () => ({
-    type: "list-item"
-  }),
+  LI: el => {
+    const checkListItem = el.querySelector(".check-list-item");
+    if (checkListItem) {
+      return {
+        type: "check-list-item",
+        checked: checkListItem?.dataset?.checked === "true"
+      };
+    }
+    return {
+      type: "list-item"
+    };
+  },
   UL: () => ({
     type: "unorderedList"
   }),
@@ -109,7 +118,7 @@ const ELEMENT_TAGS = {
   "GOOGLE-SHEETS-HTML-ORIGIN": paragraphType,
   TABLE: (el, children = []) => {
     try {
-      const bodyChild = children || [];
+      const bodyChild = (children || [])?.filter(f => f !== null);
       const firstRowChildren = bodyChild[0]?.children || [];
       return {
         type: "table",
@@ -129,7 +138,11 @@ const ELEMENT_TAGS = {
   }),
   TD: handleTableCell,
   COLGROUP: paragraphType,
-  COL: paragraphType
+  COL: paragraphType,
+  HR: () => ({
+    type: "divider",
+    borderColor: "#CCC"
+  })
 };
 
 // COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.