@flozy/editor 5.7.2 → 5.7.4

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/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 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,12 +14,14 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
+  const [loading, setLoading] = useState(false);
   const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
     let retryCount = 0;
     function loadNextBatch() {
       if (currentIndex >= families?.length) {
-        // console.log("All fonts have been loaded");
+        console.log("All fonts have been loaded");
+        setLoading(false);
         return;
       }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);
@@ -27,7 +33,7 @@ const FontLoader = props => {
         classes: false,
         timeout: 2000,
         active: () => {
-          // console.log(`Fonts loaded successfully: ${batch}`);
+          console.log(`Fonts loaded successfully: ${batch}`);
           currentIndex += batchSize;
           retryCount = 0; // Reset retry count for the next batch
           loadNextBatch();
@@ -37,13 +43,13 @@ const FontLoader = props => {
 
           if (retryCount < maxRetries) {
             retryCount++;
-            // console.log(`Retrying batch (${retryCount}/${maxRetries})...`);
+            console.log(`Retrying batch (${retryCount}/${maxRetries})...`);
             // 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();
@@ -67,8 +73,9 @@ const FontLoader = props => {
         });
         loadFontsInBatches(families);
       }).catch(err => {
-        console.log(err);
+        // console.log(err);
       });
+      setLoading(true);
     } else {
       function correctFontArray(fontString) {
         let fontsArray = fontString.split(",");
@@ -90,9 +97,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": {

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

@@ -3,24 +3,35 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
 import useSwitchViewport from "./styles";
 import { useEffect } from "react";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 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, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -30,6 +41,7 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${breakpoint === "xs" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("xs");
           onChange("xs");
         },
         children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})

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

@@ -147,6 +147,7 @@ export function onDropItem(props, parentClass) {
     newPath = moveTo;
     const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
     const cCalx = isContainerElement(editor, moveTo, props, appenBp);
+
     // const posX = parseInt(
     //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
     // );

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/StyleBuilder/fieldTypes/index.js

@@ -18,6 +18,7 @@ import FontSize from "./fontSize";
 import SelectSwitch from "./selectSwitch";
 import CardsMapping from "./card";
 import MetaDataMapping from "./metaDataMapping";
+import LineSpacing from "./lineSpacing";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -38,6 +39,7 @@ const FieldMap = {
   fontSize: FontSize,
   selectSwitch: SelectSwitch,
   card: CardsMapping,
-  metadatamapping: MetaDataMapping
+  metadatamapping: MetaDataMapping,
+  lineSpacing: LineSpacing
 };
 export default FieldMap;

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

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Grid, Slider, Typography, Box } from "@mui/material";
+import { getBreakPointsValue } from "../../../helper/theme";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const LineSpacing = props => {
+  const {
+    value: val,
+    data,
+    onChange
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const {
+    key
+  } = data;
+  const [size] = useWindowResize();
+  const pro_value = getBreakPointsValue(val, size?.device);
+  const [value, setValue] = useState(pro_value);
+  let breakpointValue = getBreakPointsValue(val, null);
+  breakpointValue = typeof breakpointValue['lg'] === 'object' ? breakpointValue['lg'] : breakpointValue;
+  useState(() => {
+    setValue(pro_value);
+  }, [pro_value]);
+  const handleChange = e => {
+    onChange({
+      [key]: {
+        ...breakpointValue,
+        [size?.device]: e.target.value
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      style: {
+        fontSize: "14px",
+        fontWeight: 500
+      },
+      children: data?.label
+    }), /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      wrap: "nowrap",
+      className: "sld-wrpr",
+      children: [/*#__PURE__*/_jsx(Slider, {
+        className: "spacingSlider",
+        defaultValue: value || 1.43,
+        "aria-label": "Default",
+        valueLabelDisplay: "auto",
+        min: 0.5,
+        max: 3.0,
+        step: 0.1,
+        name: "lineHeight",
+        onChange: handleChange
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "input",
+        sx: {
+          background: theme?.palette?.editor?.background,
+          color: theme?.palette?.editor?.textColor
+        },
+        name: "lineHeight",
+        value: pro_value,
+        className: "sliderInput",
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0",
+        disabled: true,
+        defaultValue: pro_value || 1.43
+      })]
+    })]
+  });
+};
+export default LineSpacing;

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

@@ -25,6 +25,10 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
+  }, {
+    label: "Line Spacing",
+    key: "lineHeight",
+    type: "lineSpacing"
   }]
 }, {
   tab: "Max Width",

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

@@ -49,16 +49,16 @@ const useCommonStyle = theme => ({
         fontWeight: "500",
         fontFamily: "Inter, sans-serif"
       },
-      "& p": {
-        marginBottom: "7px",
-        marginTop: "4px"
-      },
       "& .MuiPaper-root": {
-        border: 'unset !important',
+        border: `unset !important`,
         borderRadius: '0px',
         height: 'fit-content',
         padding: '2px'
       },
+      "& p": {
+        marginBottom: "7px",
+        marginTop: "4px"
+      },
       "& .muiIconsListParent": {
         "& svg": {
           color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
@@ -71,9 +71,6 @@ const useCommonStyle = theme => ({
         },
         "&::-webkit-scrollbar-thumb": {
           background: `${theme?.palette?.editor?.brainPopupScroll} !important`
-        },
-        "&::-webkit-scrollbar-track": {
-          visibility: "hidden"
         }
       },
       "& .MuiGrid-root>.MuiGrid-item": {
@@ -470,10 +467,6 @@ 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`,
@@ -486,6 +479,10 @@ const useCommonStyle = theme => ({
       }
     }
   },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,

package/dist/Editor/helper/index.js

@@ -337,14 +337,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
     return !isEdit;
   } catch (err) {
     console.log(err);

package/dist/Editor/helper/theme.js

@@ -161,4 +161,27 @@ export const groupByBreakpoint = (styleProps, theme) => {
     }
   };
 };
-export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getBreakpointLineSpacing = (value, breakpoint) => {
+  try {
+    const values = getBreakPointsValue(value, breakpoint);
+    const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
+      if (values[b] || values["lg"]) {
+        const value = values[b] || values["lg"];
+        return {
+          ...a,
+          [b]: value
+        };
+      } else {
+        return a;
+      }
+    }, {});
+    if (breakpoint) {
+      return value[breakpoint] || value["lg"] || value;
+    } else {
+      return cssVal["lg"];
+    }
+  } catch (err) {
+    // console.log(err);
+  }
+};

package/dist/Editor/hooks/useMouseMove.js

@@ -35,6 +35,7 @@ export const EditorProvider = ({
     path: null
   });
   const [fontFamilies, setFontFamilies] = useState({});
+  const [activeBreakPoint, setActiveBreakPoint] = useState("");
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -97,8 +98,10 @@ export const EditorProvider = ({
     setOpenAI,
     updateDragging,
     fontFamilies,
-    setFontFamilies
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
+    setFontFamilies,
+    activeBreakPoint,
+    setActiveBreakPoint
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/plugins/withLayout.js

@@ -39,7 +39,7 @@ const withLayout = editor => {
           const title = {
             type: "title",
             children: [{
-              text: "Untitled"
+              text: ""
             }]
           };
           Transforms.insertNodes(editor, title, {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -314,7 +314,8 @@ export const getBlock = props => {
           borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
           margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
           width: element?.bgColor ? "calc(100% - 16px)" : "100%",
-          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
+          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
+          lineHeight: 1.43
         },
         children: children
       });
@@ -374,6 +375,9 @@ export const getBlock = props => {
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
+        style: {
+          lineHeight: 1.43
+        },
         className: "listItemMargin",
         type: "1",
         ...attributes,
@@ -381,6 +385,9 @@ export const getBlock = props => {
       });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
+        style: {
+          lineHeight: 1.43
+        },
         className: "listItemMargin",
         ...attributes,
         children: children

package/dist/Editor/utils/button.js

@@ -20,10 +20,10 @@ export const insertButton = editor => {
       bottomRight: 30
     },
     bannerSpacing: {
-      left: 16,
-      top: 8,
-      right: 16,
-      bottom: 8
+      left: 24,
+      top: 10,
+      right: 24,
+      bottom: 10
     },
     ...(windowVar.lastButtonProps || {})
   };

package/dist/Editor/utils/draftToSlate.js

@@ -82,7 +82,8 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
 };
 export const draftToSlate = props => {
   const {
-    data
+    data,
+    needLayout
   } = props;
   if (data?.blocks && data?.blocks?.length > 0) {
     const converted = data?.blocks?.reduce((a, b) => {
@@ -104,7 +105,7 @@ export const draftToSlate = props => {
     return data;
   } else {
     return [{
-      type: "paragraph",
+      type: needLayout ? "title" : "paragraph",
       children: [{
         text: ""
       }]