@flozy/editor 5.8.5 → 5.8.7

package/dist/Editor/Elements/Table/TableCell.js

@@ -50,6 +50,7 @@ const TableCell = props => {
   const {
     readOnly
   } = customProps;
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const {
     bgColor,
     borderColor,
@@ -247,20 +248,24 @@ const TableCell = props => {
       isDragging: false
     });
   };
-  const tbProps = tableResizing || resizing || over || readOnly ? {
-    ...commonTdProps,
-    contentEditable: false
+  const eventProps = isMobile ? {
+    // mobile events for selection
+    onTouchStart: onMouseDownInCell,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd
   } : {
-    ...commonTdProps,
     onMouseEnter: () => onMouseEnter(path),
     onMouseLeave,
     onMouseDown: onMouseDownInCell,
     onMouseUp,
-    onClick,
-    // mobile events for selection
-    onTouchStart: onMouseDownInCell,
-    onTouchMove: handleTouchMove,
-    onTouchEnd: handleTouchEnd
+    onClick
+  };
+  const tbProps = tableResizing || resizing || over || readOnly ? {
+    ...commonTdProps,
+    contentEditable: false
+  } : {
+    ...commonTdProps,
+    ...eventProps
   };
   const dndProps = {
     id: cellId,

package/dist/Editor/Elements/Title/title.js

@@ -1,12 +1,24 @@
 import React from "react";
+import { Text } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
+const isEmptyTextNode = node => {
+  if (Text.isText(node)) {
+    return !node.text.trim();
+  }
+  return false;
+};
 const Title = props => {
   const {
+    element,
     attributes,
-    children
+    children,
+    customProps
   } = props;
+  const isEmpty = !customProps?.readOnly && isEmptyTextNode(element?.children[0]) ? "empty" : "";
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
+    placeholder: "Title",
+    className: `content-editable ${isEmpty}`,
     style: {
       fontWeight: "bold",
       fontSize: "20px"

package/dist/Editor/Elements/Variables/Style.js

@@ -1,4 +1,4 @@
-const VariableStyles = () => ({
+const VariableStyles = theme => ({
   variablesItem: {
     color: "#2563EB",
     background: "#EEEEEE"
@@ -37,8 +37,34 @@ const VariableStyles = () => ({
     "& .MuiMenuItem-root": {
       color: "#64748B"
     },
+    "& .MuiPaper-root": {
+      borderRadius: '8px',
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      marginTop: '5px',
+      "@media only screen and (max-width: 599px)": {
+        padding: '10px 0px'
+      }
+    },
+    "& .MuiList-root": {
+      padding: '0px'
+    },
+    "& .MuiButtonBase-root": {
+      margin: '6px',
+      borderRadius: '8px',
+      padding: '6px 14px',
+      fontSize: '14px',
+      fontWeight: '400',
+      color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+      "&:hover": {
+        background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
+      },
+      "@media only screen and (max-width: 599px)": {
+        minHeight: '30px',
+        margin: '0px 6px'
+      }
+    },
     "& .Mui-selected": {
-      backgroundColor: "rgba(0, 0, 0, 0.04) !important"
+      backgroundColor: 'unset !important'
     }
   }
 });

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -3,11 +3,15 @@ import { useSlateStatic } from "slate-react";
 import { MenuItem, Select } from "@mui/material";
 import { insertVariables } from "../../utils/variables";
 import VariableStyles from "./Style";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VariableButton = props => {
-  const classes = VariableStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = VariableStyles(theme);
   const editor = useSlateStatic();
   const {
     options
@@ -24,13 +28,14 @@ const VariableButton = props => {
     value: "",
     sx: classes.variableBtn,
     onChange: updateVariable,
-    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
+    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     MenuProps: {
       sx: classes.variableMenuItem,
       PaperProps: {
         style: {
           maxHeight: 300,
-          overflowY: "auto"
+          overflowY: "auto",
+          transformOrigin: 'top left'
         },
         sx: {
           "&::-webkit-scrollbar-track": {
@@ -40,6 +45,14 @@ const VariableButton = props => {
             borderRadius: "16px"
           }
         }
+      },
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'right'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
       }
     },
     children: [/*#__PURE__*/_jsx(MenuItem, {

package/dist/Editor/MiniEditor.js

@@ -11,6 +11,7 @@ import withCommon from "./hooks/withCommon";
 import { serializeToText } from "./utils/serializeToText";
 import "./Editor.css";
 import { EditorProvider } from "./hooks/useMouseMove";
+import { ensureWrappedVariables } from "./helper/ensureWrappedVariables";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MiniEditor = props => {
@@ -36,7 +37,8 @@ const MiniEditor = props => {
     needLayout: false
   }));
   const [isInteracted, setIsInteracted] = useState(false);
-  const [value, setValue] = useState(content);
+  const updatedContent = ensureWrappedVariables(content);
+  const [value, setValue] = useState(ensureWrappedVariables(updatedContent));
   const [deboundedValue] = useDebounce(value, 500);
   const isReadOnly = readOnly === "readonly";
   const customProps = {
@@ -149,7 +151,7 @@ const MiniEditor = props => {
     theme: theme,
     children: /*#__PURE__*/_jsxs(Slate, {
       editor: editor,
-      initialValue: content,
+      initialValue: updatedContent,
       onChange: onChange,
       children: [/*#__PURE__*/_jsx(BasicToolbar, {
         ...props,

package/dist/Editor/Toolbar/PopupTool/AddTemplates.js

@@ -4,6 +4,7 @@ import TemplateCard from "./TemplateCard";
 import FullViewCard from "./FullViewCard";
 import ButtonTemplateCard from "./ButtonTemplatesCard";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const CATEGORIES_SORT_INDEX = {
   Brief: 1,
@@ -46,7 +47,7 @@ const ProgressBar = ({
       alignItems: "center",
       margin: 0,
       padding: 0,
-      height: "50px",
+      height: "300px",
       overflow: "hidden"
     },
     children: /*#__PURE__*/_jsx(CircularProgress, {})
@@ -69,41 +70,49 @@ const AddTemplates = props => {
   const [categories, setCategories] = useState([]);
   const [category, setCategory] = useState("");
   const [templates, setTemplates] = useState([]);
-  const [filteredTemplates, setFilteredTemplates] = useState([]);
   useEffect(() => {
-    getTemplatesList();
+    getCategoryList();
   }, []);
-  const sortCategory = (a, b) => {
-    return (CATEGORIES_SORT_INDEX[a] || Infinity) - (CATEGORIES_SORT_INDEX[b] || Infinity);
+  const getCategoryList = async () => {
+    setLoading(true);
+    const categoryDB = await services("listCategory");
+    if (categoryDB?.data?.Template?.length > 0) {
+      setCategories(categoryDB.data.Template);
+      setCategory(categoryDB.data.Template[0]);
+      getTemplatesList(categoryDB.data.Template[0]);
+    }
+    setLoading(false);
   };
-  const getTemplatesList = async () => {
+  const getTemplatesList = async selectedCategory => {
     setLoading(true);
-    const result = await services("listTemplates", {});
-    const tempList = result?.data?.filter(f => f.type === "Template");
-    const lic = tempList?.reduce((a, b) => {
-      if (a.indexOf(b.category) < 0) {
-        a.push(b.category);
-      }
-      return a;
-    }, []).sort(sortCategory);
-    const ft = tempList?.filter(f => f.category === lic[0]);
-    setTemplates(tempList);
-    setCategories(lic);
-    setCategory(lic[0]);
-    setFilteredTemplates(ft);
+    const result = await services("listTemplates", {
+      category: selectedCategory
+    });
+    setTemplates(result?.data || []);
     setLoading(false);
   };
   const handleChange = (event, newValue) => {
+    setTemplates([]);
     onSearch("");
     setCategory(newValue);
-    setFilteredTemplates(templates.filter(f => f.category === newValue));
+    getTemplatesList(newValue);
   };
-  const onSelectTemplate = card => () => {
+  const onSelectTemplate = card => async () => {
     try {
-      editor.insertNode(JSON.parse(card.content));
+      const {
+        data
+      } = await services("templateContent", {
+        id: card?.id
+      });
+      const content = data?.content;
+      if (content) {
+        editor.insertNode(JSON.parse(content));
+      } else {
+        console.log("No data found");
+      }
       onClose();
     } catch (err) {
-      console.log(err);
+      console.log("Error inserting template content into editor:", err);
     }
   };
   const filterByTitle = f => {
@@ -173,16 +182,16 @@ const AddTemplates = props => {
         data: categories,
         handleChange: handleChange
       })
-    }), /*#__PURE__*/_jsxs(Grid, {
+    }), /*#__PURE__*/_jsx(Grid, {
       container: true,
       spacing: 0,
       className: `${fullScreen ? "fullscreen" : ""}`,
       sx: classes.templateCardsWrpr,
-      children: [/*#__PURE__*/_jsx(ProgressBar, {
+      children: loading ? /*#__PURE__*/_jsx(ProgressBar, {
         loading: loading
-      }), filteredTemplates.filter(filterByTitle).map(m => {
-        return renderTemplate(m);
-      })]
+      }) : /*#__PURE__*/_jsx(_Fragment, {
+        children: templates.filter(filterByTitle).map(renderTemplate)
+      })
     })]
   });
 };

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js

@@ -51,7 +51,8 @@ const alignmentOptions = [{
 }];
 function SelectAlignment({
   editor,
-  classes
+  classes,
+  closeMainPopup
 }) {
   const selected = useMemo(() => {
     return alignmentOptions.find(t => isBlockActive(editor, t.value));
@@ -59,6 +60,7 @@ function SelectAlignment({
   const onChange = (format, option) => {
     if (option.type === "block") {
       toggleBlock(editor, format);
+      closeMainPopup();
     }
   };
   return /*#__PURE__*/_jsx(CustomSelectTool, {

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js

@@ -59,7 +59,7 @@ function SelectFontSize({
           size = value;
         }
       });
-      return parseInt(size);
+      return isNaN(parseInt(size)) ? 14 : parseInt(size);
     } catch (err) {
       return "";
     }

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js

@@ -68,7 +68,8 @@ const listOptions = [{
 }];
 function SelectList({
   editor,
-  classes
+  classes,
+  closeMainPopup
 }) {
   const selectedList = useMemo(() => {
     return listOptions.find(t => isBlockActive(editor, t.value));
@@ -79,6 +80,7 @@ function SelectList({
     } else if (option.type === "accordion") {
       insertAccordion(editor);
     }
+    closeMainPopup();
   };
   return /*#__PURE__*/_jsx(CustomSelectTool, {
     options: listOptions,

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js

@@ -125,7 +125,6 @@ function SelectTypography({
         ...upData
       }
     });
-    closeMainPopup();
   };
   const selectedBlock = useMemo(() => {
     return typographyOptions.find(t => {
@@ -167,6 +166,7 @@ function SelectTypography({
       const [sizeInNumber] = size.split("px");
       updateMarkData(Number(sizeInNumber));
     }
+    closeMainPopup();
   };
   return /*#__PURE__*/_jsx(CustomSelectTool, {
     options: typographyOptions,

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -14,6 +14,7 @@ import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
 import SelectFontSize from "./SelectFontSize";
 import InfinityAITool from "./InfinityAITool";
+import { viewSlateSelection } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -60,13 +61,15 @@ const MiniTextFormat = props => {
           className: "verticalLine"
         }), /*#__PURE__*/_jsx(SelectList, {
           classes: classes,
-          editor: editor
+          editor: editor,
+          closeMainPopup: closeMainPopup
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectAlignment, {
           fontAlign: fontAlign,
           classes: classes,
-          editor: editor
+          editor: editor,
+          closeMainPopup: closeMainPopup
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectFontSize, {
@@ -98,7 +101,10 @@ const MiniTextFormat = props => {
           editor: editor,
           customProps: customProps
         }, link.id), /*#__PURE__*/_jsx(IconButton, {
-          onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
+          onClick: e => {
+            viewSlateSelection();
+            setAnchorEl(document.getElementById("mini-text-editor-wrapper"));
+          },
           className: `textSettingsIcon ${open ? "btnActive" : ""}`,
           children: /*#__PURE__*/_jsx(TextToolIcon, {})
         }), /*#__PURE__*/_jsx(Popper, {

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -416,6 +416,11 @@ const usePopupStyle = theme => ({
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
     },
+    '& .MuiInputBase-root': {
+      '& input': {
+        border: "none !important"
+      }
+    },
     "& svg": {
       width: "20px",
       height: "24px"

package/dist/Editor/Toolbar/PopupTool/TemplateCard.js

@@ -47,7 +47,7 @@ const TemplateCard = props => {
         }), /*#__PURE__*/_jsx(CardMedia, {
           className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
           component: "div",
-          image: m?.thumbnail,
+          image: m?.compressedThum || m?.thumbnail,
           alt: m?.title,
           sx: classes.templateCardMedia
         }), /*#__PURE__*/_jsx(PreviewAndSelect, {

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -14,6 +14,8 @@ import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
 import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
 import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
+import { getPageSettings } from "../../utils/pageSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -31,10 +33,18 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
+  const {
+    element: pageSt
+  } = getPageSettings(editor) || {};
+  const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
   } = useEditorContext();
+  const {
+    activeBreakPoint
+  } = useEditorContext();
+  const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -51,6 +61,8 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
+  let lineSpacingValue = activeMark(editor, 'lineHeight');
+  lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
   const handleColorPicker = type => e => {
     setType(type);
     setAnchorEl(e.currentTarget);
@@ -91,6 +103,13 @@ const TextFormat = props => {
       value
     });
   };
+  const handleLineSpacing = data => {
+    const [[format, value]] = Object.entries(data);
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -360,6 +379,32 @@ const TextFormat = props => {
       xs: 12,
       sx: classes.dividerGrid,
       children: /*#__PURE__*/_jsx(Divider, {})
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: classes.typoLabel,
+        children: "Line Spacing"
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        className: "typo-icons",
+        sx: classes.evenSpace,
+        children: /*#__PURE__*/_jsx(LineSpacing, {
+          value: lineSpacingValue,
+          onChange: handleLineSpacing,
+          data: {
+            key: 'lineHeight'
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      sx: classes.dividerGrid,
+      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -9,6 +9,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import useEditorScroll from "../../hooks/useEditorScroll";
 import { isCarouselSelected } from "../../helper";
+import { hideSlateSelection } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
@@ -83,6 +84,7 @@ const PopupTool = props => {
       setAnchorEl(null);
     } else {
       updateAnchorEl();
+      hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection]);
   useEffect(() => {

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

@@ -1,11 +1,3 @@
-export const defaultFonts = [
-// "EB Garamond",
-"Anton", "DM Serif Text", "Libre Baskerville", "Montserrat", "Open Sans", "Public Sans", "Raleway", "Space Mono", "Great Vibes", "Zeyada", "Allura", "Pinyon Script", "Dancing Script", "Gaegu", "Kite One", "Merriweather"];
-export const otherFonts = ["PoppinsRegular", "PoppinsBold", "Monaco", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door", "Helvetica", "Georgia", "Times New Roman", "Courier New", "Impact"];
-export const googleFontList = ["Roboto", "Noto Sans JP", "Poppins", "Lato", "Inter", "Roboto Condensed", "Roboto Mono", "Oswald", "Noto Sans", "Nunito", "Nunito Sans", "Ubuntu", "Rubik", "Playfair Display", "Noto Sans KR", "Roboto Slab", "PT Sans", "Kanit", "Work Sans", "Lora", "DM Sans", "Mulish", "Quicksand", "Fira Sans", "Noto Sans TC", "Inconsolata", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Karla", "Titillium Web", "Heebo", "Noto Serif", "Nanum Gothic", "Noto Color Emoji", "Agdasima", "Bebas Neue", "Libre Franklin", "Mukta", "Outfit", "Josefin Sans", "Source Code Pro", "Jost", "Space Grotesk", "Hind Siliguri", "Arimo", "Cabin", "Barlow Condensed", "Dosis", "Fira Sans Condensed", "Bitter", "Archivo", "Figtree", "Noto Serif JP", "PT Sans Narrow", "Abel", "Noto Sans SC",
-// "Source Sans 3",
-"Hind",
-// "Exo 2",
-"Teko", "Oxygen", "Cairo", "Crimson Text", "Plus Jakarta Sans", "Overpass", "Pacifico", "Prompt", "Red Hat Display", "Varela Round", "Cormorant Garamond", "Assistant", "Comfortaa", "Lexend", "Signika Negative",
-// "M PLUS Rounded 1c",
-"Fjalla One", "Caveat", "IBM Plex Mono", "Arvo", "Lobster", "Schibsted Grotesk", "Chakra Petch", "Maven Pro", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", 'Titillium Web', ...defaultFonts];
+const otherFonts = ["PoppinsRegular", "PoppinsBold", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door"];
+const mostUsedGoogleFonts = ["Roboto", "Poppins", "Lato", "Inter", "Nunito", "Ubuntu", "Oswald", "Rubik", "Roboto Slab", "PT Sans", "Work Sans", "Lora", "Mulish", "DM Sans", "Fira Sans", "Quicksand", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Libre Franklin", "Bebas Neue", "Cabin", "Titillium Web", "Heebo", "Noto Serif", "Jost", "Source Code Pro", "Josefin Sans", "Dosis", "Fira Sans Condensed", "Archivo", "Noto Serif JP", "Crimson Text", "Cairo", "Pacifico", "Red Hat Display", "Assistant", "Comfortaa", "Lexend", "Fjalla One", "Caveat", "Arvo", "Lobster", "Schibsted Grotesk", "EB Garamond", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", "Plus Jakarta Sans"];
+export const googleFontList = [...mostUsedGoogleFonts, ...otherFonts];

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

@@ -1,7 +1,11 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import WebFont from "webfontloader";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { defaultFonts, googleFontList, otherFonts } from "./FontList";
+import { googleFontList } from "./FontList";
+import CircularProgress from '@mui/material/CircularProgress';
+import Box from "@mui/material/Box";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const FontLoader = props => {
   const {
     otherProps,
@@ -10,14 +14,20 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
+  const [loading, setLoading] = useState(false);
   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");
+        setLoading(false);
         return;
       }
+      if (currentIndex >= hideLoaderOn) {
+        setLoading(false);
+      }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);
       const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
       WebFont.load({
@@ -41,9 +51,9 @@ const FontLoader = props => {
             // Retry loading the same batch
             loadNextBatch();
           } else {
-            console.log(
-              // `Max retries reached for batch: ${batch}. Moving to the next batch.`
-            );
+            // console.log(
+            //   `Max retries reached for batch: ${batch}. Moving to the next batch.`
+            // );
             currentIndex += batchSize;
             retryCount = 0; // Reset retry count for the next batch
             loadNextBatch();
@@ -54,21 +64,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);
+        // console.log(err);
       });
+      // setLoading(true);
     } else {
       function correctFontArray(fontString) {
         let fontsArray = fontString.split(",");
@@ -90,9 +100,25 @@ const FontLoader = props => {
       families = families?.map(font => font?.replace(/\"/g, ""));
       families = families?.map(font => font?.replace(", sans-serif", "")); //This is temporary fix for patch
       families = families.filter(font => googleFontList.includes(font));
+      // setLoading(true);
       loadFontsInBatches(families);
     }
   }, []);
-  return null;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: loading ? /*#__PURE__*/_jsx(Box, {
+      sx: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 99999,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/_jsx(CircularProgress, {})
+    }) : null
+  });
 };
 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": {