@flozy/editor 4.9.5 → 4.9.7

package/dist/Editor/ChatEditor.js

@@ -1,9 +1,8 @@
 import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { Editable, Slate, ReactEditor } from 'slate-react';
 import { createEditor, Transforms, Editor } from 'slate';
-import { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
-import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
+import { getBlock, getMarked, serializeMentions } from "./utils/chatEditor/SlateUtilityFunctions";
 import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
 import { commands, mentionsEvent } from "./utils/events";
 import { insertEmoji } from "./utils/emoji";
@@ -15,6 +14,7 @@ import Shorthands from "./common/Shorthands";
 import usePopupStyle from "./Toolbar/PopupTool/PopupToolStyle";
 import { EditorProvider } from "./hooks/useMouseMove";
 import decorators from "./utils/Decorators";
+import { useDebouncedCallback } from "use-debounce";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
@@ -42,8 +42,18 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [isInteracted, setIsInteracted] = useState(false);
   const [value, setValue] = useState(convertedContent);
-  const [loadedValue] = useState(value);
-  const [deboundedValue] = useDebounce(value, 500);
+  const debouncedValue = useRef(value);
+  const debounced = useDebouncedCallback(
+  // function
+  value => {
+    const {
+      value: strVal,
+      ...restVal
+    } = getOnSaveData(value);
+    onSave(strVal, restVal);
+  },
+  // delay in ms
+  500);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
       needLayout,
@@ -63,7 +73,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       const {
         value: strVal,
         ...restVal
-      } = getOnSaveData(value);
+      } = getOnSaveData(debouncedValue?.current);
       onsubmit(false, {
         strVal,
         restVal
@@ -99,7 +109,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const newValue = draftToSlate({
           data: content
         });
-        setValue(newValue);
+        debounced(newValue);
+
         // setTimeout(() => {
         if (editor.children.length === 0) {
           Transforms.insertNodes(editor, newValue);
@@ -112,27 +123,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }));
-
-  // useEffect(() => {
-  //     setIsExternalUpdate(true);
-  //     setValue(draftToSlate({ data: content }));
-  // }, [content]);
-
-  useEffect(() => {
-    if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(deboundedValue);
-      onSave(strVal, restVal);
-    }
-  }, [deboundedValue]);
   const getOnSaveData = val => {
     const text = serializeToText(val);
+    const mentions = serializeMentions(val);
     const title = val?.find(f => f.type === "title");
     return {
       value: JSON.stringify(val),
       text: text,
+      mentions: mentions,
       title: serializeToText(title?.children) || "Untitled"
     };
   };
@@ -180,15 +178,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
-    const value_txt = serializeToText(value);
-    if (!value_txt) {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(newValue);
-      onSave(strVal, restVal);
-    }
-    setValue(newValue);
+    debounced(newValue);
+    debouncedValue.current = newValue;
     if (!isInteracted) {
       setIsInteracted(true);
     }
@@ -228,7 +219,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor
       });
     } else if (event.key === "Enter" && !isMobile) {
-      const isEmpty = value.length === 1 && value[0].type === 'paragraph' && value[0].children.length === 1 && value[0].children[0].text === '';
+      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === 'paragraph' && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === '';
       if (isEmpty) {
         event.preventDefault();
         return;
@@ -237,7 +228,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const {
           value: strVal,
           ...restVal
-        } = getOnSaveData(value);
+        } = getOnSaveData(debouncedValue?.current);
         onsubmit(false, {
           strVal,
           restVal
@@ -251,7 +242,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     const {
       value: strVal,
       ...restVal
-    } = getOnSaveData(value);
+    } = getOnSaveData(debouncedValue?.current);
     onBlur({
       strVal,
       restVal
@@ -272,7 +263,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editor: editor,
     children: /*#__PURE__*/_jsxs(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: debouncedValue?.current,
       onChange: handleEditorChange,
       children: [toolBar && /*#__PURE__*/_jsx(MiniTextFormat, {
         classes: classes,

package/dist/Editor/CommonEditor.js

@@ -26,7 +26,7 @@ import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
-import { getTRBLBreakPoints } from "./helper/theme";
+import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
 import { handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
@@ -130,7 +130,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     pageColor,
     color: pageTextColor,
     pageWidth,
-    maxWidth: pageMaxWidth
+    maxWidth: pageMaxWidth,
+    lineHeight
   } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
@@ -317,6 +318,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onDrawerOpen: onDrawerOpen,
     ICON_API: "https://assets.agenciflow.com"
   };
+  const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
       ...props,
@@ -522,6 +524,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         padding: {
                           ...getTRBLBreakPoints(bannerSpacing)
                         },
+                        lineHeight: lineH,
                         width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
                         height: viewport.h ? `${viewport.h}px` : `100%`,
                         alignSelf: "center",

package/dist/Editor/Editor.css

@@ -399,7 +399,7 @@ blockquote {
   align-items: center;
   border-width: 0px, 0px, 0px, 0px;
   border-style: solid;
-  border-color: #2563EB;
+  border-color: #2563EB66;
   justify-content: center;
   flex-direction: column;
   width: 100%;
@@ -492,9 +492,9 @@ blockquote {
 
 .MuiButton-root.primaryBtn.disabled,
 .MuiButton-root.secondaryBtn.disabled {
-  background: #eee !important;
-  color: #ccc !important;
-  border: 1px solid #ccc !important;
+  background: #eee;
+  color: #ccc;
+  border: 1px solid #ccc;
 }
 
 .MuiButton-root.secondaryBtn {

package/dist/Editor/Elements/AI/AIInput.js

@@ -71,7 +71,6 @@ function AIInput({
   }, [openAI]);
   const isSendBtnDisabled = !inputValue || loading;
   const props = getProps(openAI, generatedText) || {};
-  const fromToolBar = openAI === "fromToolBar";
   const handleSendBtnClick = () => {
     if (isSendBtnDisabled) {
       return;

package/dist/Editor/Elements/Grid/Grid.js

@@ -312,7 +312,7 @@ const Grid = props => {
   return /*#__PURE__*/_jsx(GridProvider, {
     children: /*#__PURE__*/_jsxs(GridContainer, {
       container: true,
-      className: `grid-container ${grid} has-hover element-root dpath ${equalItems ? "equal-cols" : ""}`,
+      className: `grid-container ${grid} has-hover element-root dpath ${equalItems ? "equal-cols" : ""} cc-${element?.children?.length}`,
       ...attributes,
       ...sectionId,
       sx: {

package/dist/Editor/Elements/Grid/Providers/GridProvider.js

@@ -13,12 +13,25 @@ const getAdjacentColumnPath = (editor, currentPath, direction = "next") => {
 
   // Ensure the adjacent index is valid
   if (adjacentIndex < 0 || adjacentIndex >= gridNode.children.length) {
-    return null; // No adjacent column exists in the given direction
+    return {
+      parentPath
+    }; // No adjacent column exists in the given direction
   }
 
-  return [...parentPath, adjacentIndex]; // Return the adjacent column's path
+  return {
+    parentPath: [...parentPath],
+    rightColPath: [...parentPath, adjacentIndex]
+  }; // Return the adjacent column's path
 };
 
+const isSingleColumn = (editor, parentPath) => {
+  try {
+    const gridNode = Node.get(editor, parentPath);
+    return gridNode?.children?.length === 1;
+  } catch (err) {
+    console.log(err);
+  }
+};
 export const GridProvider = ({
   children
 }) => {
@@ -28,7 +41,10 @@ export const GridProvider = ({
   const initColumnWidth = (currentColPath = [], currentMinWidth = 0) => {
     try {
       let right = 0;
-      const rightColPath = getAdjacentColumnPath(editor, currentColPath);
+      const {
+        parentPath,
+        rightColPath
+      } = getAdjacentColumnPath(editor, currentColPath);
       if (rightColPath) {
         const parentPath = Path.parent(rightColPath); // Get the parent grid path
         const gridNode = Node.get(editor, parentPath);
@@ -41,7 +57,8 @@ export const GridProvider = ({
         left: currentMinWidth,
         right,
         rightPath: rightColPath?.join(),
-        rightIndex: rightColPath
+        rightIndex: rightColPath,
+        parentPath: parentPath
       });
     } catch (err) {
       console.log(err);
@@ -56,7 +73,12 @@ export const GridProvider = ({
     // logic to update right column width
     const right = columnWidths?.right - (data?.left - columnWidths?.left);
     const diff = right !== widths?.right;
-    if (right && right > 10 && data?.left > 10 && diff) {
+    if (isSingleColumn(editor, columnWidths?.parentPath) && data?.left <= 100) {
+      setWidths({
+        ...data,
+        right: right
+      });
+    } else if (right && right > 10 && data?.left > 10 && diff) {
       setWidths({
         ...data,
         right: right

package/dist/Editor/Elements/Grid/Styles.js

@@ -23,6 +23,15 @@ const GridStyles = theme => ({
           flexWrap: "wrap"
         }
       },
+      "&.cc-1": {
+        "& .grid-item": {
+          "&:last-child": {
+            "& .col-width-resizer": {
+              display: "block !important"
+            }
+          }
+        }
+      },
       "& .grid-item": {
         minWidth: "var(--minWidth)",
         maxWidth: "var(--minWidth)",

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -516,7 +516,7 @@ const SignaturePopup = props => {
                 children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
-                className: `primaryBtn actionBtn ${isEmpty ? "disabled" : ""}`,
+                className: `primaryBtn actionBtn ${isEmpty ? "disabled disabledSaveBtn" : ""}`,
                 disabled: isEmpty,
                 children: "Save"
               })]

package/dist/Editor/Elements/SimpleText/index.js

@@ -5,6 +5,7 @@ import { getPageSettings } from "../../utils/pageSettings";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
+import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,8 +33,14 @@ const SimpleText = props => {
   const {
     pageColor
   } = pageSt?.pageProps || {};
+  const {
+    activeBreakPoint
+  } = useEditorContext();
+  const lineHeight = element?.children[0]?.lineHeight;
+  const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
+    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF",
+    lineHeight: lineH
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

package/dist/Editor/Elements/SimpleText/style.js

@@ -1,10 +1,12 @@
 import { invertColor } from "../../helper";
 const SimpleTextStyle = ({
-  pageColor
+  pageColor,
+  lineHeight
 }) => ({
   root: {
     position: "relative",
     padding: "0px",
+    lineHeight: lineHeight,
     "& .placeholder-simple-text": {
       color: "#94A3B8",
       background: "transparent",

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Select, MenuItem } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import { fontFamilyMap } from "../../utils/font";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
   classes,
@@ -29,6 +30,7 @@ const Dropdown = ({
       }
     },
     sx: classes.textFormatSelect,
+    IconComponent: KeyboardArrowDownRoundedIcon,
     children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem
     // style={{ fontFamily: item.text }}
     , {

package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js

@@ -3,6 +3,7 @@ import { Autocomplete, TextField } from "@mui/material";
 import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
 import usePopupStyle from "../PopupTool/PopupToolStyle.js";
 import { useEditorContext } from "../../hooks/useMouseMove.js";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 const FontFamilyAutocomplete = ({
   editor,
@@ -57,6 +58,7 @@ const FontFamilyAutocomplete = ({
         children: option
       });
     },
+    popupIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     renderInput: params => /*#__PURE__*/_jsx(TextField, {
       sx: {
         "& .MuiInputBase-root.MuiOutlinedInput-root": {

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

@@ -96,8 +96,29 @@ const usePopupStyle = theme => ({
         width: "100%",
         maxHeight: "fit-content"
       },
+      "& .MuiTab-root": {
+        textTransform: "capitalize",
+        color: "#64748B",
+        borderBottom: `1.5px solid ${theme?.palette?.editor?.deviderBgColor}`
+      },
+      "& .Mui-selected": {
+        color: `${theme?.palette?.editor?.textColor} !important`,
+        fontWeight: "700 !important"
+      },
+      "& .MuiTabs-indicator": {
+        background: "#2563EB"
+      },
+      "& .MuiTabScrollButton-horizontal": {
+        borderBottom: "unset !important"
+      },
       "@media only screen and (max-width: 599px)": {
         width: "330px"
+      },
+      "& .MuiCardContent-root": {
+        color: theme?.palette?.editor?.textColor,
+        fontFamily: "Inter, sans-serif",
+        fontSize: "12px",
+        fontWeight: "500"
       }
     },
     "& .headerContainer": {},
@@ -122,6 +143,38 @@ const usePopupStyle = theme => ({
           fill: theme?.palette?.type === "dark" ? "none" : ""
         }
       },
+      "& .signatureElementIcon": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
+      "& .commonSvgStyle": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
+      "& .commonSvgStyle2": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
+      "& .colorBoxElementIcon": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+          fill: "none"
+        }
+      },
+      "& .gridElementIcon": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+          fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
+      "& .newLineElementIcon": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
       "&:hover": {
         backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
         "& .signatureElementIcon": {
@@ -194,6 +247,11 @@ const usePopupStyle = theme => ({
     },
     "@media only screen and (max-width: 599px)": {
       width: "330px"
+    },
+    "& .textFormatMUIIcon": {
+      "& svg": {
+        color: theme?.palette?.editor?.closeButtonSvgStroke
+      }
     }
   },
   textFormatLabel: {
@@ -290,9 +348,10 @@ const usePopupStyle = theme => ({
   autoCompleteaFontFamily: {
     "& .MuiOutlinedInput-root": {
       borderRadius: "8px",
-      backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+      backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor}`,
       fontSize: "14px",
-      height: "36px"
+      height: "36px",
+      paddingLeft: "15px !important"
     },
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
@@ -470,7 +529,8 @@ const usePopupStyle = theme => ({
     },
     "& .colorPicker": {
       background: theme?.palette?.editor?.inputFieldBgColor,
-      borderRadius: "0px 7px 7px 0px"
+      borderRadius: "0px 7px 7px 0px",
+      padding: "0px"
     },
     "& .vl": {
       background: theme?.palette?.editor?.borderColor,
@@ -511,7 +571,8 @@ const usePopupStyle = theme => ({
     },
     "& .colorPicker": {
       background: theme?.palette?.editor?.inputFieldBgColor,
-      borderRadius: "0px 7px 7px 0px"
+      borderRadius: "0px 7px 7px 0px",
+      padding: "0px"
     },
     "& .vl": {
       background: theme?.palette?.editor?.borderColor,
@@ -696,8 +757,11 @@ const usePopupStyle = theme => ({
       }
     },
     "& .default-color-panel": {
+      gridTemplateColumns: "repeat(auto-fill, 24px)",
       "& .default-color-panel_item": {
-        borderRadius: "50%"
+        borderRadius: "50%",
+        width: "16px",
+        height: "16px"
       }
     }
   },
@@ -818,17 +882,18 @@ const usePopupStyle = theme => ({
     "& .MuiPopover-paper": {
       maxHeight: "140px",
       // minWidth: "130px",
-      border: "1px solid #E4E8EB",
-      background: `${theme?.palette?.editor?.background} !important`,
+      // border: "1px solid #E4E8EB",
+      background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`,
       overflowY: "scroll",
-      padding: "6px 12px 6px 0px",
+      padding: "3px 12px 8px 2px",
+      borderRadius: "8px",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     },
     "& .customSelectOptionLabel": {
       color: theme?.palette?.editor?.textColor || "black",
-      margin: "0px 6px 0px 6px",
+      margin: "6px 6px 0px 6px",
       width: "100%",
       justifyContent: "start",
       paddingRight: "20px",
@@ -841,8 +906,40 @@ const usePopupStyle = theme => ({
         background: `${theme?.palette?.action?.selected} !important`
       },
       "&.selected": {
-        color: `#2563EB !important`,
-        background: `#E9F3FE !important`
+        color: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
+        background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+        "& .orderedListIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          },
+          "& text": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        },
+        "& .bulletedListTextIcon": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`,
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          },
+          "& circle": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        },
+        "& .checkedListTextIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        },
+        "& .accordianIconSvgTextFormat": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+          }
+        },
+        "& .textAlignIconSameStyles": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        }
       }
     },
     "& .menuOptions": {

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();
@@ -35,6 +37,14 @@ const TextFormat = props => {
     fontFamilies,
     theme
   } = useEditorContext();
+  const {
+    element: pageSt
+  } = getPageSettings(editor) || {};
+  const pageSettingLine = pageSt?.pageProps?.lineHeight;
+  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);
@@ -90,6 +102,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,
@@ -125,6 +144,7 @@ const TextFormat = props => {
         item: true,
         xs: 12,
         sx: classes.textFormatField,
+        className: "textFormatMUIIcon",
         children: /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
           classes: classes,
           ...fontFamilies,
@@ -147,6 +167,7 @@ const TextFormat = props => {
           item: true,
           xs: 12,
           sx: classes.textFormatField3,
+          className: "textFormatMUIIcon",
           children: /*#__PURE__*/_jsx(Dropdown, {
             classes: classes,
             ...fontWeight,
@@ -355,6 +376,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/assets/svg/BrainIcon.js

@@ -10,7 +10,7 @@ export const BrainIcon = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsxs("g", {
     clipPath: "url(#clip0_38524_18936)",
     children: [/*#__PURE__*/_jsx("path", {
-      className: "fillPath",
+      className: "fillPath bainIconPathStroke",
       d: "M8.15078 4.96816L8.13029 4.87029C8.38386 4.81721 8.52209 4.75657 8.63932 4.61874C8.76419 4.47191 8.87156 4.23078 9.0309 3.78954C9.18008 3.37931 9.477 2.83417 9.67863 2.56953L9.68049 2.56716L9.95913 2.22351L9.77098 2.15114C9.02297 1.86345 7.9649 2.1139 7.18056 2.77932C6.91016 3.01102 6.6078 3.13199 6.31202 3.13199C5.36057 3.13199 4.49148 3.7083 4.23948 4.47574C4.1991 4.5969 4.13233 4.7171 4.05705 4.81246C3.98542 4.90319 3.89342 4.98771 3.79555 5.01531C3.62366 5.07031 3.42593 5.1997 3.22586 5.38165C3.02645 5.56298 2.83073 5.79102 2.66318 6.03401C2.4955 6.27716 2.35797 6.53246 2.27298 6.76757C2.18918 6.99938 2.16076 7.19973 2.19255 7.34719C2.2265 7.34519 2.28443 7.32746 2.36807 7.29046C2.44437 7.25672 2.53178 7.21212 2.62856 7.16274L2.64553 7.15409C2.74788 7.10189 2.85903 7.04555 2.97138 6.99562L2.97543 6.99393C3.33705 6.85186 3.74456 6.81649 4.47819 6.85317C4.98982 6.87755 5.35003 6.92948 5.58432 7.03013C5.70346 7.08131 5.79666 7.14777 5.85948 7.23568C5.92305 7.32463 5.94928 7.42679 5.94928 7.53756C5.94928 7.64781 5.93113 7.74876 5.88078 7.83259C5.82887 7.91902 5.74927 7.97648 5.64775 8.01001C5.54889 8.04266 5.42788 8.05323 5.28597 8.04848C5.14322 8.0437 4.97315 8.02314 4.77318 7.9893C4.3397 7.9121 3.85733 7.90819 3.43057 7.97852C3.00053 8.04939 2.64177 8.19284 2.43825 8.39636C2.38877 8.44584 2.34382 8.48625 2.30861 8.5179C2.29334 8.53162 2.27991 8.5437 2.26873 8.55416C2.22923 8.5911 2.21196 8.61276 2.20108 8.63766C2.18969 8.66371 2.18117 8.70318 2.18013 8.78163C2.17909 8.86011 2.18545 8.96803 2.19766 9.12675C2.22614 9.50261 2.40977 9.88897 2.67829 10.237C2.94622 10.5842 3.29318 10.8861 3.63599 11.0929L3.63732 11.0937C3.86712 11.2374 4.26565 11.3774 4.64846 11.4678C4.83857 11.5128 5.02103 11.5445 5.17234 11.5584C5.32934 11.5729 5.43578 11.5662 5.48539 11.5476L5.48888 11.5464C5.50877 11.5398 5.52215 11.5341 5.53123 11.529C5.53756 11.5255 5.54155 11.522 5.54155 11.522C5.54232 11.5189 5.54311 11.5108 5.54046 11.4941C5.53501 11.4598 5.51756 11.4069 5.48057 11.3242C5.44424 11.2429 5.39219 11.1394 5.32228 11.0057C5.22585 10.819 5.15568 10.6493 5.11357 10.5004C5.07176 10.3526 5.0556 10.2187 5.0731 10.1054C5.09106 9.98913 5.14554 9.89124 5.2441 9.83112C5.33902 9.77321 5.45988 9.75962 5.59379 9.77636L5.58138 9.87558L5.59185 9.77613C5.87816 9.80627 6.05817 10.0091 6.26638 10.401C6.45393 10.7579 6.6013 10.9891 6.76986 11.1678C6.93718 11.3451 7.13025 11.4759 7.4172 11.6254C7.75872 11.7991 8.04404 11.9042 8.32298 11.9522C8.60107 12 8.87801 11.9919 9.20374 11.9327C9.59177 11.8562 9.91172 11.7189 10.2131 11.4861C10.5162 11.2517 10.8045 10.9175 11.1243 10.4409C11.4482 9.95806 11.7078 9.63684 11.9807 9.41982C12.257 9.20006 12.5414 9.09144 12.9056 9.02234L12.9067 9.02215C13.2505 8.96075 13.5251 8.96093 13.7111 9.05211C13.8081 9.09968 13.8808 9.1719 13.9234 9.26866C13.965 9.36325 13.9747 9.47368 13.9613 9.59437L13.9611 9.59626C13.9423 9.74014 13.911 9.86302 13.7949 9.94852C13.7408 9.98827 13.6743 10.0156 13.5961 10.0375C13.5179 10.0595 13.4221 10.0777 13.3058 10.096C12.9871 10.1502 12.811 10.2047 12.6478 10.3369C12.4784 10.474 12.3162 10.6999 12.0467 11.1226C11.8135 11.4908 11.4566 11.9714 11.2435 12.197L10.9959 12.4611L11.1821 12.5061C11.3684 12.5526 11.6775 12.5885 11.877 12.5885C11.9476 12.5885 12.0248 12.6149 12.094 12.6462C12.1658 12.6786 12.2407 12.7218 12.3099 12.7659C12.4466 12.8531 12.5694 12.9493 12.6165 12.9895C12.7475 13.0935 12.8618 13.2674 13.0107 13.498C13.0214 13.5145 13.0323 13.5314 13.0434 13.5487C13.1918 13.7789 13.3832 14.0758 13.6651 14.4518C13.7867 14.6139 13.8901 14.7545 13.9774 14.8734C14.1155 15.0613 14.2135 15.1947 14.2803 15.2723C14.3019 15.2974 14.3227 15.3217 14.3428 15.345C14.4676 15.4903 14.5634 15.6017 14.6375 15.6834C14.6709 15.7203 14.6991 15.7502 14.7229 15.7739C14.7237 15.7404 14.7238 15.6987 14.7238 15.6472C14.7238 15.388 14.7238 15.2227 14.7191 15.0575C14.7108 14.7647 14.6876 14.4724 14.623 13.6584C14.5997 13.3642 14.5754 13.1381 14.5563 12.9605L14.5546 12.9453C14.5355 12.7675 14.5213 12.6336 14.5204 12.531C14.5196 12.427 14.532 12.3408 14.5767 12.2641C14.6203 12.1893 14.6879 12.1358 14.7673 12.0821L14.7759 12.0763L14.7855 12.0723C15.0673 11.9571 15.4592 11.6735 15.7804 11.2707C16.1008 10.869 16.3435 10.3581 16.3435 9.79034C16.3435 9.13108 16.1414 8.61025 15.7311 8.2071C15.3177 7.80098 14.6839 7.50546 13.8046 7.31877C13.6948 7.29437 13.6035 7.27177 13.531 7.24617C13.4587 7.22059 13.396 7.18907 13.3476 7.14178C13.2466 7.04308 13.2383 6.90516 13.2383 6.74604C13.2383 6.66089 13.2386 6.58267 13.2516 6.5198C13.2659 6.4503 13.298 6.38748 13.367 6.3455C13.4274 6.30883 13.5054 6.29527 13.5925 6.28845C13.6822 6.28142 13.799 6.28072 13.9472 6.28071L13.9486 6.28073C14.8019 6.29328 15.7019 6.6562 16.3527 7.25673L16.7664 7.632L16.8364 7.44304C16.8631 7.36794 16.8926 7.22707 16.9152 7.0585C16.9376 6.89147 16.9524 6.7042 16.9524 6.53903C16.9524 5.53251 16.2956 4.68517 15.0536 4.17164L15.0508 4.17042C14.7885 4.0524 14.446 3.75928 14.2542 3.478L14.2534 3.47678C13.8245 2.82757 13.07 2.47753 12.2527 2.55912C11.6407 2.62452 11.1146 2.83209 10.7529 3.11528C10.391 3.39875 10.203 3.74917 10.2353 4.10628C10.2533 4.28647 10.2791 4.38105 10.3317 4.45193C10.3852 4.52407 10.4767 4.58545 10.6639 4.67002L10.6651 4.67053C10.8035 4.73512 10.9165 4.79374 11.0047 4.85098C11.0922 4.90781 11.1621 4.9675 11.2073 5.03683C11.2549 5.10972 11.2716 5.18788 11.2615 5.27153C11.2518 5.35093 11.2184 5.43164 11.1736 5.51484L11.1728 5.51629C11.0649 5.70885 10.8581 5.79826 10.628 5.80334C10.3981 5.80841 10.1331 5.73106 9.8772 5.57753L9.87591 5.57675C9.78599 5.52094 9.72471 5.48355 9.67419 5.46023C9.62598 5.43796 9.59603 5.43267 9.56948 5.43471C9.54096 5.4369 9.5044 5.44848 9.44456 5.48164C9.38446 5.51495 9.31019 5.56457 9.20579 5.63519M8.15078 4.96816L8.13029 4.87029C8.04094 4.88877 7.96493 4.90747 7.90203 4.93103C7.83866 4.95476 7.78274 4.98556 7.73888 5.03167C7.64936 5.12579 7.63675 5.25572 7.63675 5.40654C7.63675 5.49114 7.63877 5.56615 7.65156 5.62821C7.66507 5.69382 7.69231 5.75368 7.74821 5.79919C7.80034 5.84162 7.86689 5.86262 7.93891 5.87637C8.01179 5.89028 8.10379 5.89899 8.21576 5.90807L8.21719 5.90818C8.40695 5.92082 8.57094 5.91173 8.73098 5.86838C8.89093 5.82506 9.04121 5.74909 9.20579 5.63519M8.15078 4.96816C7.79764 5.04123 7.73675 5.10211 7.73675 5.40654C7.73675 5.74751 7.77329 5.77186 8.22384 5.80839C8.58915 5.83275 8.8327 5.77186 9.14931 5.55267M8.15078 4.96816C8.67439 4.85857 8.80835 4.70026 9.12495 3.82351C9.27108 3.42166 9.56333 2.88586 9.75817 2.63014L10.0573 2.26125L9.92865 5.49179C9.57551 5.27259 9.56333 5.27259 9.14931 5.55267M9.20579 5.63519L9.14931 5.55267ZM9.20579 5.63519L9.14931 5.55267ZM7.7465 1.08895L7.74907 1.08791C8.15549 0.929148 8.66681 0.867521 9.17941 0.897036C9.69237 0.926569 10.2146 1.04782 10.6432 1.26209C10.9113 1.39616 11.0694 1.46248 11.2245 1.48719C11.3786 1.51173 11.5377 1.49646 11.8108 1.44791C12.4159 1.34075 13.0919 1.42932 13.6888 1.65529C14.2848 1.88092 14.8135 2.24803 15.1147 2.70942C15.1732 2.79991 15.2827 2.91115 15.4177 3.01943C15.551 3.12634 15.7028 3.22549 15.8414 3.29495C16.1469 3.43543 16.6416 3.79531 16.9496 4.0787C17.521 4.60659 17.8811 5.17465 18.0266 5.81359C18.1719 6.45157 18.1009 7.14977 17.8291 7.93467C17.6487 8.48813 17.5049 9.18492 17.481 9.7338C17.4071 11.1757 16.9946 12.2107 15.9062 12.8435L15.905 12.8442C15.8839 12.8561 15.8599 12.8824 15.8381 12.9374C15.8164 12.992 15.8009 13.065 15.7906 13.1548C15.7722 13.3162 15.7724 13.5119 15.7727 13.7168C15.7727 13.7409 15.7727 13.765 15.7727 13.7892V13.7919V13.7946V13.7973V13.8V13.8026V13.8053V13.808V13.8108V13.8135V13.8162V13.8189V13.8216V13.8244V13.8271V13.8298V13.8326V13.8353V13.8381V13.8408V13.8436V13.8464V13.8491V13.8519V13.8547V13.8575V13.8603V13.8631V13.8659V13.8687V13.8715V13.8743V13.8771V13.8799V13.8828V13.8856V13.8884V13.8913V13.8941V13.8969V13.8998V13.9026V13.9055V13.9084V13.9112V13.9141V13.917V13.9198V13.9227V13.9256V13.9285V13.9314V13.9343V13.9372V13.9401V13.943V13.9459V13.9488V13.9517V13.9546V13.9575V13.9605V13.9634V13.9663V13.9693V13.9722V13.9751V13.9781V13.981V13.984V13.9869V13.9899V13.9928V13.9958V13.9988V14.0017V14.0047V14.0077V14.0106V14.0136V14.0166V14.0196V14.0226V14.0255V14.0285V14.0315V14.0345V14.0375V14.0405V14.0435V14.0465V14.0495V14.0526V14.0556V14.0586V14.0616V14.0646V14.0676V14.0707V14.0737V14.0767V14.0797V14.0828V14.0858V14.0888V14.0919V14.0949V14.0979V14.101V14.104V14.1071V14.1101V14.1132V14.1162V14.1193V14.1223V14.1254V14.1284V14.1315V14.1346V14.1376V14.1407V14.1437V14.1468V14.1499V14.1529V14.156V14.1591V14.1621V14.1652V14.1683V14.1714V14.1744V14.1775V14.1806V14.1837V14.1867V14.1898V14.1929V14.196V14.1991V14.2022V14.2052V14.2083V14.2114V14.2145V14.2176V14.2207V14.2237V14.2268V14.2299V14.233V14.2361V14.2392V14.2423V14.2454V14.2485V14.2515V14.2546V14.2577V14.2608V14.2639V14.267V14.2701V14.2732V14.2763V14.2794V14.2824V14.2855V14.2886V14.2917V14.2948V14.2979V14.301V14.3041V14.3072V14.3102V14.3133V14.3164V14.3195V14.3226V14.3257V14.3288V14.3318V14.3349V14.338V14.3411V14.3442V14.3473V14.3503V14.3534V14.3565V14.3596V14.3626V14.3657V14.3688V14.3719V14.3749V14.378V14.3811V14.3841V14.3872V14.3903V14.3933V14.3964V14.3995V14.4025V14.4056V14.4086V14.4117V14.4148V14.4178V14.4209V14.4239V14.427V14.43V14.4331V14.4361V14.4391V14.4422V14.4452V14.4483V14.4513V14.4543V14.4574V14.4604V14.4634V14.4664V14.4695V14.4725V14.4755V14.4785V14.4815V14.4845V14.4876V14.4906V14.4936V14.4966V14.4996V14.5026V14.5056V14.5086V14.5115V14.5145V14.5175V14.5205V14.5235V14.5265V14.5294V14.5324V14.5354V14.5383V14.5413V14.5443V14.5472V14.5502V14.5531V14.5561V14.559V14.562V14.5649V14.5679V14.5708V14.5737V14.5766V14.5796V14.5825V14.5854V14.5883V14.5912V14.5941V14.597V14.6V14.6028V14.6057V14.6086V14.6115V14.6144V14.6173V14.6202V14.623V14.6259V14.6288V14.6316V14.6345V14.6373V14.6402V14.643V14.6459V14.6487V14.6515V14.6544V14.6572V14.66V14.6628V14.6656V14.6684V14.6713V14.6741V14.6768V14.6796V14.6824V14.6852V14.688V14.6908V14.6935V14.6963V14.6991V14.7018V14.7046V14.7073V14.71V14.7128V14.7155V14.7182V14.721V14.7237V14.7264V14.7291V14.7318V14.7345V14.7372V14.7399V14.7426V14.7452V14.7479V14.7506V14.7532V14.7559V14.7585V14.7612V14.7638V14.7665V14.7691V14.7717V14.7743V14.7769V14.7796V14.7822V14.7848V14.7873V14.7899V14.7925V14.7951V14.7976V14.8002V14.8028V14.8053V14.8079V14.8104V14.8129V14.8155V14.818V14.8205V14.823V14.8255V14.828V14.8305V14.833V14.8355V14.8379V14.8404V14.8428V14.8453V14.8477V14.8502V14.8526V14.855V14.8575V14.8599V14.8623V14.8647V14.8671V14.8695V14.8718V14.8742V14.8766V14.8789V14.8813V14.8836V14.886V14.8883V14.8906V14.893V14.8953V14.8976V14.8999V14.9022V14.9044V14.9067V14.909V14.9113V14.9135V14.9158V14.918V14.9202V14.9224V14.9247V14.9269V14.9291V14.9313V14.9335V14.9356V14.9378V14.94V14.9421V14.9443V14.9464V14.9486V14.9507V14.9528V14.9549V14.957V14.9591V14.9612V14.9633V14.9653V14.9674V14.9694V14.9715V14.9735V14.9756V14.9776V14.9796V14.9816V14.9836V14.9856V14.9875V14.9895V14.9915V14.9934V14.9954V14.9973V14.9992V15.0012V15.0031V15.005V15.0069V15.0087V15.0106V15.0125V15.0143V15.0162V15.018V15.0199V15.0217V15.0235V15.0253V15.0271V15.0289V15.0307V15.0324V15.0342V15.0359V15.0377V15.0394V15.0411V15.0428V15.0445V15.0462V15.0479V15.0496V15.0513V15.0529V15.0546V15.0562V15.0578V15.0594V15.061V15.0626V15.0642V15.0658V15.0674V15.0689V15.0705V15.072V15.0735V15.0751V15.0766V15.0781V15.0795V15.081V15.0825V15.0839V15.0854V15.0868V15.0883V15.0897V15.0911V15.0925V15.0939V15.0952V15.0966V15.0979V15.0993V15.1006V15.1019V15.1033V15.1046V15.1058V15.1071V15.1084V15.1096V15.1109V15.1121V15.1133V15.1146V15.1158V15.117V15.1181V15.1193V15.1205V15.1216L15.7723 15.1311C15.7548 15.3139 15.7451 15.4912 15.7358 15.662C15.7346 15.6841 15.7334 15.706 15.7322 15.7278C15.7216 15.9175 15.7103 16.0996 15.6874 16.266C15.642 16.5961 15.548 16.8906 15.2946 17.0706L15.2772 17.0829L15.2564 17.0871C14.9498 17.1489 14.6072 16.9897 14.1662 16.6137C13.7207 16.2339 13.1487 15.6098 12.3758 14.6825L12.0736 14.3803L11.8153 14.1776L11.8056 14.1689L11.3424 13.6962C11.0367 13.6504 10.6083 13.493 10.351 13.3337C10.1644 13.2171 10.0176 13.1525 9.80579 13.1142C9.58858 13.0748 9.30168 13.0625 8.83204 13.0564C7.96291 13.0564 7.60385 12.9954 7.18168 12.7907L7.17863 12.7891C6.96587 12.6768 6.81351 12.6184 6.60293 12.593C6.38675 12.5668 6.10658 12.5751 5.63657 12.6057C4.76818 12.655 4.05882 12.5601 3.45333 12.2865C2.8469 12.0124 2.35287 11.5631 1.90689 10.9189C1.85911 10.8489 1.80935 10.779 1.75927 10.7086C1.55336 10.4192 1.336 10.1137 1.17329 9.69286C0.96984 9.16671 0.851706 8.46413 0.91967 7.37584L0.921262 7.36325C1.05912 6.64369 1.22225 6.21487 1.39929 5.90071C1.48763 5.74396 1.57833 5.61771 1.66814 5.50032C1.69665 5.46306 1.72465 5.4272 1.75234 5.39175C1.813 5.31407 1.87214 5.23834 1.93182 5.15396C2.14369 4.85485 2.50488 4.48 2.74851 4.3133C2.85688 4.23916 2.98236 4.12862 3.09433 4.00928C3.20704 3.88915 3.30016 3.76638 3.34875 3.66919L3.34927 3.66818C3.57953 3.22044 4.03078 2.79438 4.53955 2.48106C5.04821 2.1678 5.62966 1.95781 6.12936 1.95781C6.14751 1.95781 6.1801 1.95228 6.22743 1.93709C6.27313 1.92243 6.32676 1.90068 6.3848 1.87311C6.50052 1.81814 6.62839 1.74263 6.73848 1.66166C6.9792 1.472 7.425 1.22497 7.7465 1.08895Z",
       fill: "#64748B"
     }), /*#__PURE__*/_jsx("path", {
@@ -18,7 +18,7 @@ export const BrainIcon = props => /*#__PURE__*/_jsxs("svg", {
       stroke: "",
       strokeWidth: "0.2"
     }), /*#__PURE__*/_jsx("path", {
-      className: "fillPath strokeFill",
+      className: "fillPath strokeFill bainIconPathStroke2",
       d: "M8.65005 8.30277L8.65134 8.30009C8.71231 8.17815 8.8171 8.04195 8.93706 7.91884C9.05729 7.79545 9.19829 7.67951 9.33608 7.6007C9.70633 7.38379 10.1293 7.29924 10.4654 7.33513C10.6332 7.35306 10.787 7.40191 10.9015 7.48718C11.019 7.57471 11.0936 7.70039 11.0936 7.85773C11.0936 8.03108 10.9736 8.19102 10.8269 8.30141C10.6768 8.4144 10.4766 8.49352 10.2751 8.49352C10.0222 8.49352 9.85541 8.55675 9.75341 8.66238C9.65164 8.7678 9.59639 8.93413 9.60785 9.1804L9.60789 9.18165C9.62036 9.54954 9.53563 9.84467 9.357 9.9864C9.26327 10.0608 9.14903 10.0877 9.0282 10.062C8.91098 10.0371 8.79408 9.96427 8.68225 9.85244C8.53166 9.70185 8.47034 9.43321 8.46878 9.15974C8.46718 8.8801 8.5276 8.56701 8.65005 8.30277Z",
       fill: "#64748B",
       stroke: "#64748B",

package/dist/Editor/common/ColorPickerButton.js

@@ -43,9 +43,10 @@ const ColorPickerButton = props => {
         background: value,
         height: "22px",
         minWidth: "22px",
-        borderRadius: "26px",
-        border: "2px solid #E7E7E7"
+        borderRadius: "26px"
+        // border: "2px solid #E7E7E7",
       },
+
       onClick: handleColorPicker
     }), /*#__PURE__*/_jsx(Popover, {
       open: open,

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

@@ -27,20 +27,23 @@ 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();
         },
         inactive: () => {
-          console.log(`Font loading failed for: ${batch}`);
+          // console.log(`Font loading failed for: ${batch}`);
+
           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();
@@ -64,7 +67,7 @@ const FontLoader = props => {
         });
         loadFontsInBatches(families);
       }).catch(err => {
-        console.log(err);
+        // console.log(err);
       });
     } else {
       function correctFontArray(fontString) {

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -18,7 +18,8 @@ const usePopupStyles = theme => ({
         "& button": {
           padding: "0px 0px 0px 6px",
           "& svg": {
-            width: "19px !important"
+            width: "19px !important",
+            paddingRight: "6px"
           }
         },
         "& .active": {
@@ -39,13 +40,23 @@ const usePopupStyles = theme => ({
             borderRadius: "7px",
             "& svg": {
               "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
               }
             },
             "& span": {
               "& .MuiTypography-root": {
                 color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
               }
+            },
+            "& .BrainIcon": {
+              "& .bainIconPathStroke": {
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
+                stroke: "unset !important"
+              },
+              "& .bainIconPathStroke2": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
             }
           },
           "& .MuiCardMedia-root": {
@@ -123,13 +134,7 @@ const usePopupStyles = theme => ({
               "& path": {
                 stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
               }
-            },
-            "& .commonSvgStyle2": {
-              background: "red !important"
             }
-          },
-          "& .renderComp": {
-            backgroundColor: "red !important"
           }
         },
         "&:hover": {
@@ -162,7 +167,7 @@ const usePopupStyles = theme => ({
     marginBottom: "10px",
     fontSize: "14px",
     fontWeight: "bold",
-    borderBottom: "1px solid #DCE4EC"
+    borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor}`
   },
   listItem: {
     cursor: "pointer",

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

@@ -14,7 +14,8 @@ const SwitchViewport = props => {
   } = props;
   const classes = useSwitchViewport();
   const {
-    setSelectedElement
+    setSelectedElement,
+    setActiveBreakPoint
   } = useEditorContext();
   useEffect(() => {
     // to reset selection on viewport changes - FS-6589
@@ -30,6 +31,7 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -39,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/index.js

@@ -14,7 +14,7 @@ import BoundaryLine from "./GuideLines/BoundaryLine";
 import ContextMenu from "./ContextMenu";
 import VirtualElement from "./VirtualElement";
 import { ItemTypes } from "./ElementSettings/settingsConstants";
-import { focusSelection, clearSelection } from "../../helper";
+import { clearSelection } from "../../helper";
 import { selectText } from "../../utils/helper";
 import { removeSign } from "./ElementSettings/OtherSettings";
 import useDragging from "../../hooks/useDragging";

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

@@ -9,7 +9,7 @@ import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../.
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
-import useWindowResize from "../../hooks/useWindowResize";
+// import useWindowResize from "../../hooks/useWindowResize"; //commenting for ui demo if okay remove this comment before dev
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -45,8 +45,11 @@ const Section = props => {
   const path = ReactEditor.findPath(editor, element);
   const anchorEl = useRef(null);
   const popperEl = useRef(null);
-  const [size] = useWindowResize();
-  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
+
+  // const [size] = useWindowResize();
+  // const isSectionFullWidth =
+  //   sectionGridSize && sectionGridSize[size?.device] >= 12;
+
   const [isHovering, setIsHovering] = useState(false);
   const onMouseEnter = () => {
     setIsHovering(true);
@@ -77,6 +80,9 @@ const Section = props => {
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
+          sx: {
+            marginBottom: '25px !important'
+          },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(TuneIcon, {})
         })
@@ -149,11 +155,16 @@ const Section = props => {
       className: "ed-section-inner",
       sx: {
         position: "relative",
-        ...edInnerSp
+        ...edInnerSp,
+        outline: isHovering ? `1px dashed ${theme?.palette?.editor?.inputFieldBorder}` : 'none'
+        // borderRadius: '5px'
       },
+
       ref: anchorEl,
-      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
-        open: isHovering && isSectionFullWidth,
+      children: [isHovering ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering
+        // open={isHovering && isSectionFullWidth}  //commenting for ui demo if okay remove this comment before dev
+        ,
         anchorEl: anchorEl?.current,
         placement: "top-start",
         sx: {
@@ -176,11 +187,7 @@ const Section = props => {
             fromPopper: true
           })]
         })
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-          ...props
-        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
-      }), children]
+      }) : /*#__PURE__*/_jsx(_Fragment, {}), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

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

@@ -134,8 +134,7 @@ const useCommonStyle = theme => ({
           }
         },
         "& .active ": {
-          border: `1px solid #2563EB !important`,
-          background: `${theme?.palette?.editor?.signaturePopUpTabButtonSelectedBg} !important`
+          border: `1px solid #2563EB !important`
         }
       },
       "& .MuiTab-root": {
@@ -181,6 +180,11 @@ const useCommonStyle = theme => ({
           border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !important`
         }
       }
+    },
+    "& .disabledSaveBtn": {
+      background: "#2563EB33 !important",
+      color: theme?.palette?.type === "dark" && "#FFFFFF33 !important",
+      border: "1px solid #2563EB33 !important"
     }
   },
   popupTitle2: {

package/dist/Editor/helper/theme.js

@@ -147,4 +147,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/brains.js

@@ -1,16 +1,42 @@
-import { Transforms } from "slate";
-import insertNewLine from "./insertNewLine";
+import { Editor, Node, Path, Transforms } from "slate";
 export const insertBrain = (editor, data, position) => {
-  const brains = {
-    type: "brains",
-    ...data,
-    children: [{
-      text: ""
-    }]
-  };
-  Transforms.insertNodes(editor, brains, {
-    at: position,
-    select: true
-  });
-  insertNewLine(editor);
+  if (!editor || !data || !position) {
+    console.error("Editor, data, and position are required.");
+    return;
+  }
+  const {
+    selection
+  } = editor;
+  let insertPath = position;
+  if (selection) {
+    const brains = {
+      type: "brains",
+      ...data,
+      children: [{
+        text: ""
+      }]
+    };
+    const [currentNode, currentPath] = Editor.node(editor, selection);
+    const cleanedText = Node.string(currentNode).replace(/\/b(?:rain|r|ra|rai)?/g, "").trim();
+    if (cleanedText) {
+      Transforms.delete(editor, {
+        at: Editor.range(editor, currentPath)
+      });
+      Transforms.insertText(editor, cleanedText, {
+        at: currentPath
+      });
+      const [, parentPath] = Editor.parent(editor, currentPath);
+      insertPath = Path.next(parentPath);
+    }
+    Transforms.insertNodes(editor, brains, {
+      at: insertPath,
+      select: true
+    });
+    Transforms.insertNodes(editor, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    });
+  }
 };

package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js

@@ -15,6 +15,20 @@ const LIST_FORMAT_TYPE = {
   unorderedList: "list-item"
 };
 const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
+export const serializeMentions = node => {
+  try {
+    if (node?.type === 'mention') {
+      return [node.character];
+    }
+    let children = Array.isArray(node) ? node : node?.children;
+    children = children && Array.isArray(children) ? children : [];
+    let mentions = children.map(child => serializeMentions(child)).flat();
+    return mentions.filter(Boolean);
+  } catch (err) {
+    console.log(err);
+    return [];
+  }
+};
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);

package/dist/Editor/utils/events.js

@@ -5,7 +5,6 @@ import { insertAccordion } from "./accordion";
 import { isListItem } from "./helper";
 import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
 import EDITORCMDS from "../common/EditorCmds";
-import { ReactEditor } from "slate-react";
 const HOTKEYS = {
   b: "bold",
   i: "italic",

package/dist/Editor/utils/pageSettings.js

@@ -9,7 +9,13 @@ export const findPageSettings = editor => {
       path: null,
       element: {
         pageProps: {
-          pageWidth: "fixed"
+          pageWidth: "fixed",
+          "lineHeight": {
+            "xs": 1.43,
+            "sm": 1.43,
+            "md": 1.43,
+            "lg": 1.43
+          }
         }
       }
     };
@@ -34,7 +40,13 @@ export const getPageSettings = editor => {
         path: null,
         element: {
           pageProps: {
-            pageWidth: "fixed"
+            pageWidth: "fixed",
+            "lineHeight": {
+              "xs": 1.43,
+              "sm": 1.43,
+              "md": 1.43,
+              "lg": 1.43
+            }
           }
         }
       };

package/dist/Editor/utils/serializeToText.js

@@ -2,6 +2,8 @@ export const serializeToText = node => {
   try {
     if (!node?.type && node?.text) {
       return node?.text;
+    } else if (node?.type === 'mention') {
+      return '@' + node?.character?.name || '';
     }
     let n = Array.isArray(node) ? node : node?.children;
     n = n && Array.isArray(n) ? n : n ? [n] : [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.9.5",
+  "version": "4.9.7",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"