@flozy/editor 5.8.5 → 5.8.6

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

@@ -41,9 +41,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();
@@ -67,7 +67,7 @@ const FontLoader = props => {
         });
         loadFontsInBatches(families);
       }).catch(err => {
-        console.log(err);
+        // console.log(err);
       });
     } else {
       function correctFontArray(fontString) {

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

@@ -3,6 +3,7 @@ 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 => {
@@ -11,6 +12,9 @@ const SwitchViewport = props => {
     onChange
   } = props;
   const classes = useSwitchViewport();
+  const {
+    setActiveBreakPoint
+  } = useEditorContext();
   useEffect(() => {
     console.log(breakpoint);
   }, [breakpoint]);
@@ -21,6 +25,7 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -30,6 +35,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/Section/index.js

@@ -13,6 +13,35 @@ import { SectionSettingIcon } from "../iconListV2";
 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
+}) => {
+  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"
+    },
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: "Section Settings",
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onSettings,
+        children: /*#__PURE__*/_jsx(SectionSettingIcon, {})
+      })
+    })
+  }) : null;
+};
 const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const themeReact = useTheme();
@@ -57,32 +86,6 @@ const Section = props => {
   const onSettings = () => {
     setOpenSettings(true);
   };
-  const Toolbar = ({
-    fromPopper
-  }) => {
-    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"
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Section Settings",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SectionSettingIcon, {})
-        })
-      })
-    }) : null;
-  };
   const onSave = data => {
     const updateData = {
       ...data
@@ -167,19 +170,26 @@ const Section = props => {
             bgcolor: "background.paper",
             height: "30px",
             position: "relative",
-            background: theme?.palette?.type === 'dark' ? theme?.palette?.editor?.miniToolBarBackground : '#F6F6F6'
+            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
+            fromPopper: true,
+            readOnly: readOnly,
+            showTool: showTool,
+            onSettings: onSettings
           })]
         })
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
           ...props
-        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {
+          readOnly: readOnly,
+          showTool: showTool,
+          onSettings: onSettings
+        })]
       }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {

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

@@ -11,9 +11,6 @@ const SectionStyle = (themeReact, theme) => ({
       "& .sectionIcon": {
         opacity: 1
       },
-      '& .dividerIcon': {
-        opacity: 1
-      },
       "& .sectionPopper": {
         opacity: 1
       }
@@ -55,18 +52,6 @@ const SectionStyle = (themeReact, theme) => ({
         opacity: 1
       }
     },
-    "& .dividerIcon": {
-      opacity: 0,
-      padding: "0px",
-      background: "transparent",
-      border: "none",
-      width: "20px",
-      height: "20px",
-      "& button": {
-        boxShadow: "none",
-        background: "transparent"
-      }
-    },
     "& .ed-section-inner": {
       [themeReact.breakpoints.between("xs", "md")]: {
         maxWidth: `320px !important`,

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

@@ -49,6 +49,11 @@ const useCommonStyle = theme => ({
         fontWeight: "500",
         fontFamily: "Inter, sans-serif"
       },
+      "& .MuiPaper-root": {
+        border: `unset !important`,
+        borderRadius: '0px',
+        height: 'fit-content'
+      },
       "& p": {
         marginBottom: "7px",
         marginTop: "4px"

package/dist/Editor/helper/ensureWrappedVariables.js

@@ -0,0 +1,28 @@
+export const ensureWrappedVariables = content => {
+  return content.map(node => {
+    if (node.children) {
+      return {
+        ...node,
+        children: node.children.reduce((result, child, index, arr) => {
+          if (child.type === "variables") {
+            if (index === 0 || !arr[index - 1].text || arr[index - 1].text.trim() === "") {
+              result.push({
+                text: ""
+              });
+            }
+            result.push(child);
+            if (index === arr.length - 1 || !arr[index + 1]?.text || arr[index + 1]?.text.trim() === "") {
+              result.push({
+                text: ""
+              });
+            }
+          } else {
+            result.push(child);
+          }
+          return result;
+        }, [])
+      };
+    }
+    return node;
+  });
+};

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/utils/SlateUtilityFunctions.js

@@ -173,10 +173,9 @@ export const getMarked = (leaf, children, theme) => {
   if (leaf.highlight) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
-        color: "inherit"
+        color: "inherit",
+        background: "var(--slate-highlight-bg)"
       },
-      className: "slate-highlight" // while opening AI, we will use this element to highlight the selection. (PopoverAIInput.js)
-      ,
       children: children
     });
   }
@@ -314,7 +313,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 +374,9 @@ export const getBlock = props => {
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
+        style: {
+          lineHeight: 1.43
+        },
         className: "listItemMargin",
         type: "1",
         ...attributes,
@@ -381,6 +384,9 @@ export const getBlock = props => {
       });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
+        style: {
+          lineHeight: 1.43
+        },
         className: "listItemMargin",
         ...attributes,
         children: children

package/dist/Editor/utils/customHooks/useTableResize.js

@@ -43,7 +43,8 @@ const useTableResize = ({
       minWidth
     } = minMaxProps || {};
     setSize(currentSize => {
-      const calcWidth = currentSize?.width + e.movementX;
+      const width = currentSize?.width || parentDOM?.clientWidth;
+      const calcWidth = width + e.movementX;
       return {
         width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
         height: currentSize.height + e.movementY,