@flozy/editor 2.1.8 → 3.1.0

package/dist/Editor/CommonEditor.js

@@ -371,6 +371,21 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       return true;
     }
   }, [readOnly, isTextSelected]);
+  const handleFooterClick = () => {
+    window.open('https://www.flozy.com', '_blank');
+  };
+  const editorWrapperStyle = useMemo(() => {
+    const style = {
+      color: pageTextColor || ""
+    };
+    if (pageBgImage && pageBgImage !== "none") {
+      style.backgroundImage = `url(${pageBgImage})`;
+      style.backgroundSize = `cover`;
+    } else {
+      style.background = pageColor || "";
+    }
+    return style;
+  }, [pageBgImage, pageColor]);
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -396,10 +411,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
-                style: {
-                  background: pageColor || "",
-                  color: pageTextColor || ""
-                },
+                style: editorWrapperStyle,
                 onClick: e => {
                   handleInsertLastElement(e, editor);
                 },
@@ -460,10 +472,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     sx: {
                       color: "rgb(100, 116, 139)",
                       fontSize: "13px",
-                      paddingBottom: hideMiniToolBar ? "0px" : "12px"
+                      paddingBottom: hideMiniToolBar ? "0px" : "12px",
+                      cursor: 'pointer'
                     },
                     align: "center",
                     "data-info": outsideEditorClickLabel,
+                    onClick: handleFooterClick,
                     children: footer
                   })]
                 })

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -299,6 +299,7 @@ function AppHeader(props) {
           })
         }), /*#__PURE__*/_jsx("nav", {
           children: /*#__PURE__*/_jsx(Drawer, {
+            anchor: isLogoRight ? "right" : "left",
             container: container,
             variant: "temporary",
             open: mobileOpen,

package/dist/Editor/Elements/Color Picker/defaultColors.js

@@ -1 +1,4 @@
-export const colors = ["#292D32", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"];
+export const colors = ["#292D32", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"
+// "#E6E6E6",
+// "#BEBEBE"
+];

package/dist/Editor/Elements/Embed/EmbedPopup.js

@@ -13,7 +13,7 @@ const EmbedPopup = props => {
     onDelete
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: format === "image" ? "Image" : "Video",
+    title: format === "image" ? "Image" : "Embed",
     type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
     element: element,
     onSave: onSave,

package/dist/Editor/Elements/Embed/Frames/ImageFrame.js

@@ -6,6 +6,7 @@ import ContinuousSlider from "./Slider";
 import frames from ".";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import { CloseIcon } from "../../../common/iconslist";
+import FramesStyles from "./Styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -49,6 +50,10 @@ const ImageFrame = props => {
     setSelectedPath
   } = useEditorContext();
   const open = selectedPath === id && Boolean(anchorEl);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = FramesStyles(theme);
   useEffect(() => {
     if (imageRef?.current && !readOnly) {
       setDOM(dom);
@@ -112,18 +117,9 @@ const ImageFrame = props => {
       },
       placement: "top",
       children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          width: 200,
-          padding: "0px 16px",
-          boxShadow: "5px 5px 5px 1px rgb(0,0,0,0.07)",
-          border: "1px solid rgba(0,0,0,0.07)",
-          borderRadius: "12px",
-          backgroundColor: "#FFF",
-          marginBottom: "8px",
-          position: "relative",
-          paddingRight: "48px"
-        },
+        sx: classes?.sliderContainer,
         children: [/*#__PURE__*/_jsx(ContinuousSlider, {
+          classes: classes,
           val: scale,
           onChange: onScaleChange,
           min: 50,

package/dist/Editor/Elements/Embed/Frames/Slider.js

@@ -6,6 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ContinuousSlider = props => {
   const {
+    classes,
     val,
     min,
     max,
@@ -20,22 +21,45 @@ const ContinuousSlider = props => {
     spacing: 2,
     direction: "row",
     sx: {
-      mb: 0
+      mb: 0,
+      ml: '8px'
     },
     alignItems: "center",
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: "div",
-      children: "-"
-    }), /*#__PURE__*/_jsx(Slider, {
+    children: [/*#__PURE__*/_jsx(Slider, {
       "aria-label": "Volume",
       value: value,
       onChange: handleChange,
       min: min,
       step: 1,
-      max: max
-    }), /*#__PURE__*/_jsx(Typography, {
+      max: max,
+      sx: {
+        height: 6,
+        '& .MuiSlider-thumb': {
+          width: 16,
+          height: 16,
+          background: 'linear-gradient(180deg, #4D61FF 0%, #2C92FF 100%)'
+        },
+        '& .MuiSlider-thumb::after': {
+          position: 'absolute',
+          content: '""',
+          borderRadius: '50%',
+          width: 18,
+          height: 18,
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          border: '2px solid #fff',
+          boxShadow: '0px 4px 4px 0px #0000001A'
+        },
+        '& .MuiSlider-track': {
+          border: '1px solid #2563EB',
+          background: '#2563EB'
+        }
+      }
+    }), /*#__PURE__*/_jsxs(Typography, {
+      sx: classes?.sliderText,
       variant: "div",
-      children: "+"
+      children: [value, "%"]
     })]
   });
 };

package/dist/Editor/Elements/Embed/Frames/Styles.js

@@ -0,0 +1,26 @@
+const FramesStyles = theme => ({
+  sliderContainer: {
+    width: 200,
+    padding: "0px 16px",
+    boxShadow: "5px 5px 5px 1px rgb(0,0,0,0.07)",
+    border: "1px solid rgba(0,0,0,0.07)",
+    borderRadius: "23px",
+    backgroundColor: theme?.palette?.editor?.background,
+    marginBottom: "8px",
+    position: "relative",
+    paddingRight: "30px"
+  },
+  sliderText: {
+    fontSize: "12px",
+    fontWeight: 600,
+    padding: "0px 4px",
+    color: theme?.palette?.editor?.textColor,
+    borderRadius: "22px",
+    minWidth: "50px",
+    display: "block",
+    textAlign: "center",
+    border: `1px solid ${theme?.palette?.primary?.border13}`,
+    boxShadow: '0px 4px 16px 0px #0000000D'
+  }
+});
+export default FramesStyles;

package/dist/Editor/Elements/EmbedScript/Code.js

@@ -1,17 +1,18 @@
 import React, { useEffect, useRef } from "react";
+
+// const sanitize = (input) => {
+//   const doc = new DOMParser().parseFromString(input, "text/html");
+//   for (const elm of doc.querySelectorAll("*")) {
+//     for (const attrib of elm.attributes) {
+//       if (attrib.name.startsWith("on")) {
+//         elm.removeAttribute(attrib.name);
+//       }
+//     }
+//   }
+//   return doc.body.innerHTML;
+// };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const sanitize = input => {
-  const doc = new DOMParser().parseFromString(input, "text/html");
-  for (const elm of doc.querySelectorAll("*")) {
-    for (const attrib of elm.attributes) {
-      if (attrib.name.startsWith("on")) {
-        elm.removeAttribute(attrib.name);
-      }
-    }
-  }
-  return doc.body.innerHTML;
-};
 const Code = props => {
   const codeRef = useRef();
   const {

package/dist/Editor/Elements/Form/FormElements/validations.js

@@ -1,7 +1,6 @@
-import { bool } from "prop-types";
 export const validationMethods = {
   isEmail: value => {
-    const regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+    const regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; //eslint-disable-line 
     const result = regex.test(String(value).toLowerCase());
     if (result) {
       let domain = String(value).toLowerCase().split('@')[1];

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -10,7 +10,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const PageSettingsButton = props => {
   const {
     customProps,
-    icoBtnType
+    icoBtnType,
+    from
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -40,7 +41,10 @@ const PageSettingsButton = props => {
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
+    children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(PageSettings, {
+      onClick: onSettings,
+      className: "removeDefaultSvgCls"
+    }) : /*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Page Settings",
       onClick: onSettings,
       icon: /*#__PURE__*/_jsx(PageSettings, {}),

package/dist/Editor/Styles/EditorStyles.js

@@ -206,8 +206,9 @@ const editorStyles = ({
         padding: "2px",
         borderRadius: "0px",
         "& svg": {
-          width: "16px",
-          height: "16px"
+          width: "17px",
+          height: "18px",
+          marginTop: '-1px'
         }
       }
     },

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { TextField, IconButton } from "@mui/material";
-import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
-import { sizeMap } from "../../utils/font.js";
+import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
+import { headingMap, sizeMap } from "../../utils/font.js";
 import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
 import { getBreakPointsValue } from "../../helper/theme.js";
 import useWindowResize from "../../hooks/useWindowResize.js";
@@ -46,7 +46,12 @@ const TextSize = ({
   };
   const getSizeVal = () => {
     try {
-      const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      Object.entries(headingMap).forEach(([format, value]) => {
+        if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
+          size = value;
+        }
+      });
       return parseInt(size);
     } catch (err) {
       return "";

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -9,6 +9,7 @@ import miniToolbarStyles from "./Styles";
 import usePopupStyle from "../PopupTool/PopupToolStyle";
 import PopperHeader from "../PopupTool/PopperHeader";
 import { getSelectedText } from "../../utils/helper";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -44,6 +45,9 @@ const MiniToolbar = props => {
     hideTools
   } = customProps;
   const UPDATED_MENU_OPTIONS = MENU_OPTIONS.filter(f => (hideTools || [])?.indexOf(f.type) === -1);
+  const {
+    popupType
+  } = useEditorContext();
   useEffect(() => {
     if (popper) {
       setPopper(null);
@@ -73,13 +77,21 @@ const MiniToolbar = props => {
         label,
         icon: Icon
       }) => {
+        const isDisabled = popupType === type; // for textFormat type
+
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
           children: /*#__PURE__*/_jsx(IconButton, {
             className: type === popper ? "active" : "",
             onClick: handleClick(type),
-            children: /*#__PURE__*/_jsx(Icon, {})
+            disabled: isDisabled,
+            children: /*#__PURE__*/_jsx(Icon, {
+              from: "miniToolBar",
+              icoBtnType: "mini",
+              customProps: customProps,
+              editor: editor
+            })
           })
         }, `mini_tool_btn_${type}`);
       })

package/dist/Editor/Toolbar/Mini/Options/Options.js

@@ -1,6 +1,7 @@
 import TextIcon from "../../../assets/svg/TextIcon";
 import AddElementIcon from "../../../assets/svg/AddElementIcon";
 import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
+import PageSettingsButton from "../../../Elements/PageSettings/PageSettingsButton";
 const MENU_OPTIONS = [{
   type: "textFormat",
   icon: TextIcon,
@@ -13,5 +14,9 @@ const MENU_OPTIONS = [{
   type: "addTemplate",
   icon: AddTemplateIcon,
   label: "Add Template"
+}, {
+  type: "pageSettings",
+  icon: PageSettingsButton,
+  label: "Page Settings"
 }];
 export default MENU_OPTIONS;

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -34,6 +34,9 @@ const miniToolbarStyles = theme => ({
         "& svg": {
           stroke: theme?.palette?.editor?.svgStroke
         },
+        "& .removeDefaultSvgCls": {
+          stroke: "none !important"
+        },
         "&.active": {
           "& svg": {
             stroke: theme?.palette?.editor?.activeColor

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

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from "react";
+import { activeMark, addMarkData, isBlockActive } from "../../../utils/SlateUtilityFunctions";
+import { Button, IconButton, Popover, TextField } from "@mui/material";
+import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
+import { headingMap, sizeMap } from "../../../utils/font";
+import { useDebounce } from "use-debounce";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const fontSizeOptions = [16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
+function SelectFontSize({
+  editor,
+  classes
+}) {
+  const format = "fontSize";
+  const [fontSize, setFontSize] = useState();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const containerRef = useRef();
+  const [size] = useWindowResize();
+  const val = activeMark(editor, format);
+  const value = getBreakPointsValue(val, size?.device);
+  const [deboundedValue] = useDebounce(fontSize, 500);
+  const updateMarkData = newVal => {
+    let upData = {
+      ...getBreakPointsValue(val),
+      [size?.device]: `${newVal}px`
+    };
+
+    // if desktop update to all other devices
+    // to avoid default normal size
+    if (size?.device === "lg") {
+      upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
+        a[b] = `${newVal}px`;
+        return a;
+      }, {});
+    }
+    addMarkData(editor, {
+      format,
+      value: {
+        ...upData
+      }
+    });
+  };
+  const onChangeSize = value => {
+    if (value) {
+      let inc = parseInt(value);
+      inc = inc > 200 ? 200 : inc;
+      updateMarkData(inc);
+    } else {
+      setFontSize(null);
+    }
+  };
+  useEffect(() => {
+    if (deboundedValue) {
+      onChangeSize(deboundedValue);
+    }
+  }, [deboundedValue]);
+  const getSizeVal = () => {
+    try {
+      let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      Object.entries(headingMap).forEach(([format, value]) => {
+        if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
+          size = value;
+        }
+      });
+      return parseInt(size);
+    } catch (err) {
+      return "";
+    }
+  };
+  useEffect(() => {
+    setFontSize(getSizeVal());
+  }, [value]);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    style: {
+      display: "flex",
+      alignItems: "center"
+    },
+    children: [/*#__PURE__*/_jsx(TextField, {
+      sx: classes?.miniFontSizeInput,
+      value: fontSize,
+      onChange: e => setFontSize(e.target.value),
+      size: "small"
+    }), /*#__PURE__*/_jsx(IconButton, {
+      onClick: e => {
+        e.preventDefault();
+        setAnchorEl(containerRef.current);
+      },
+      children: /*#__PURE__*/_jsx(DownArrowIcon, {})
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: () => setAnchorEl(null),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      sx: classes.customSelectPopoverWrapper,
+      children: fontSizeOptions.map((s, i) => {
+        return /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Button, {
+            className: `customSelectOptionLabel ${fontSize === s ? "selected" : ""}`,
+            onClick: () => {
+              setFontSize(s);
+            },
+            children: s
+          })
+        }, i);
+      })
+    })]
+  });
+}
+export default SelectFontSize;

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

@@ -12,6 +12,7 @@ import useWindowResize from "../../../hooks/useWindowResize";
 import PopperHeader from "../PopperHeader";
 import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
+import SelectFontSize from "./SelectFontSize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -64,6 +65,11 @@ const MiniTextFormat = props => {
           editor: editor
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
+        }), /*#__PURE__*/_jsx(SelectFontSize, {
+          classes: classes,
+          editor: editor
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine mr-1"
         }), fontStyle?.map((m, i) => {
           return /*#__PURE__*/_jsx(MarkButton, {
             editor: editor,
@@ -102,7 +108,6 @@ const MiniTextFormat = props => {
             TransitionProps
           }) => /*#__PURE__*/_jsx(Fade, {
             ...TransitionProps,
-            timeout: 350,
             children: /*#__PURE__*/_jsxs(Paper, {
               style: {
                 borderRadius: "10px"

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

@@ -499,6 +499,9 @@ const usePopupStyle = theme => ({
     }
   },
   customSelectPopoverWrapper: {
+    "& .MuiPopover-paper": {
+      maxHeight: '140px'
+    },
     "& .customSelectOptionLabel": {
       color: "black",
       margin: "0px",
@@ -506,6 +509,8 @@ const usePopupStyle = theme => ({
       justifyContent: "start",
       paddingRight: "20px",
       fontSize: "14px",
+      lineHeight: "1.75 !important",
+      fontWeight: 400,
       "& :hover": {
         background: "#F0F5FA !important"
       },
@@ -529,6 +534,16 @@ const usePopupStyle = theme => ({
     bottom: "env(safe-area-inset-bottom)",
     left: 0,
     width: "100%"
+  },
+  miniFontSizeInput: {
+    "& input": {
+      fontSize: "14px",
+      width: "16px",
+      padding: "8px 4px"
+    },
+    "& fieldset": {
+      border: "none !important"
+    }
   }
 });
 export default usePopupStyle;

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

@@ -7,6 +7,7 @@ import useDrag from "../../hooks/useDrag";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
 import MiniTextFormat from "./MiniTextFormat";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const PopupTool = props => {
@@ -15,6 +16,9 @@ const PopupTool = props => {
     setIsTextSelected
   } = props;
   const classes = usePopupStyle(theme);
+  const {
+    setPopupType
+  } = useEditorContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const editor = useSlate();
@@ -32,10 +36,12 @@ const PopupTool = props => {
       const isCellsSelected = table.isCellSelected(editor.selection);
       if (!isCellsSelected) {
         setOpen(true);
+        setPopupType("textFormat");
         setIsTextSelected(true);
       }
     } else if (!anchorEl) {
       setOpen(false);
+      setPopupType("");
       setIsTextSelected(false);
     }
   }, [event, anchorEl]);
@@ -65,6 +71,7 @@ const PopupTool = props => {
   const handleClose = () => {
     setAnchorEl(null);
     setOpen(false);
+    setPopupType("");
   };
   return open ? /*#__PURE__*/_jsx(_Fragment, {
     children: size.device === "xs" ? /*#__PURE__*/_jsx("div", {
@@ -86,7 +93,6 @@ const PopupTool = props => {
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {
         ...TransitionProps,
-        timeout: 350,
         children: /*#__PURE__*/_jsx(Paper, {
           style: {
             borderRadius: "10px"

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -243,9 +243,11 @@ export const toolbarGroups = [[{
   format: "form",
   type: "form",
   group: "elements"
-}, {
-  id: 33,
-  format: "pageSettings",
-  type: "page-settings",
-  group: "elements"
-}]];
+}
+// {
+//   id: 33,
+//   format: "pageSettings",
+//   type: "page-settings",
+//   group: "elements",
+// },
+]];

package/dist/Editor/common/ColorPickerButton.js

@@ -10,7 +10,8 @@ const ColorPickerButton = props => {
     value,
     onSave,
     defaultColors = [],
-    classes = {}
+    classes = {},
+    recentColors = []
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -25,6 +26,9 @@ const ColorPickerButton = props => {
   const handleClose = () => {
     setAnchorEl(null);
   };
+  const handleColorChange = color => {
+    setColor(color);
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
@@ -59,8 +63,8 @@ const ColorPickerButton = props => {
             children: /*#__PURE__*/_jsx(ColorPickerTool, {
               gradient: true,
               value: color,
-              onChange: setColor,
-              defaultColors: defaultColors || []
+              onChange: handleColorChange,
+              defaultColors: [...recentColors, ...defaultColors] || []
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,10 +14,32 @@ const Color = props => {
     key,
     label
   } = data;
+  const [recentColors, setRecentColors] = useState({});
+  useEffect(() => {
+    const storedColors = JSON.parse(localStorage.getItem('recentColors'));
+    if (storedColors) {
+      setRecentColors(storedColors);
+    }
+  }, []);
   const onSave = color => {
     onChange({
       [key]: color
     });
+    let updatedColors = [];
+    if (recentColors[key]) {
+      updatedColors = [color, ...recentColors[key]?.filter(c => c !== color)];
+    } else {
+      updatedColors?.unshift(color);
+    }
+    if (updatedColors?.length > 10) {
+      updatedColors?.pop();
+    }
+    updatedColors = {
+      ...recentColors,
+      [key]: updatedColors
+    };
+    setRecentColors(updatedColors);
+    localStorage.setItem('recentColors', JSON.stringify(updatedColors));
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
@@ -45,7 +67,8 @@ const Color = props => {
           children: /*#__PURE__*/_jsx(ColorPickerButton, {
             classes: classes,
             value: value,
-            onSave: onSave
+            onSave: onSave,
+            recentColors: recentColors[key]
           })
         })
       }

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

@@ -30,7 +30,7 @@ const tableStyle = [{
     key: "col.entireBgColor",
     type: "color"
   }, {
-    label: "Selected Column Background",
+    label: "Selected Cell Background",
     key: "col.bgColor",
     type: "color"
   }, {

package/dist/Editor/common/ToolbarIcon.js

@@ -17,7 +17,7 @@ const ToolbarIcon = props => {
         children: /*#__PURE__*/_jsx(Typography, {
           sx: {
             fontSize: '14px',
-            fontWeight: 500
+            fontWeight: 400
           },
           children: title
         })
@@ -27,7 +27,7 @@ const ToolbarIcon = props => {
         children: /*#__PURE__*/_jsx(Typography, {
           sx: {
             fontSize: '14px',
-            fontWeight: 500
+            fontWeight: 400
           },
           children: title
         })

package/dist/Editor/common/iconslist.js

@@ -855,30 +855,35 @@ export const Carousal = props => /*#__PURE__*/_jsxs("svg", {
     fill: "#64748B"
   })]
 });
-export const PageSettings = props => /*#__PURE__*/_jsxs("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "17",
-  height: "17",
-  viewBox: "0 0 17 17",
+export const PageSettings = (props = {}) => /*#__PURE__*/_jsxs("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
   fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
   children: [/*#__PURE__*/_jsx("path", {
-    d: "M11.4648 3.24464C11.7617 3.24464 12.0024 2.9352 12.0024 2.55347C12.0024 2.17175 11.7617 1.8623 11.4648 1.8623C11.1679 1.8623 10.9272 2.17175 10.9272 2.55347C10.9272 2.9352 11.1679 3.24464 11.4648 3.24464Z",
-    fill: "#64748B"
+    d: "M13.2386 0.535156H2.76091C2.30289 0.535814 1.86383 0.718051 1.53996 1.04192C1.2161 1.36578 1.03386 1.80485 1.0332 2.26286V11.7453C1.03386 12.2033 1.2161 12.6424 1.53996 12.9663C1.86383 13.2901 2.30289 13.4724 2.76091 13.473H4.29405C4.30918 13.5774 4.3571 13.6743 4.43089 13.7497L5.23503 14.5539C5.3155 14.6344 5.42114 14.6849 5.53434 14.6969C5.64753 14.7089 5.76143 14.6818 5.85704 14.62L6.42979 14.2498C6.5507 14.308 6.67481 14.3594 6.80151 14.4036L6.94482 15.0704C6.96871 15.1816 7.02999 15.2813 7.11846 15.3528C7.20692 15.4243 7.31722 15.4634 7.43099 15.4635H8.56852C8.68229 15.4634 8.79259 15.4243 8.88105 15.3528C8.96952 15.2813 9.0308 15.1816 9.05469 15.0704L9.198 14.4036C9.32471 14.3594 9.44881 14.308 9.56972 14.2498L10.1425 14.62C10.2381 14.6818 10.352 14.7089 10.4652 14.6969C10.5784 14.6849 10.684 14.6344 10.7645 14.5539L11.5686 13.7497C11.6424 13.6743 11.6903 13.5774 11.7055 13.473H13.2386C13.6966 13.4724 14.1357 13.2901 14.4595 12.9663C14.7834 12.6424 14.9657 12.2033 14.9663 11.7453V2.26286C14.9657 1.80485 14.7834 1.36578 14.4595 1.04192C14.1357 0.718051 13.6966 0.535814 13.2386 0.535156ZM2.76091 1.53038H13.2386C13.4328 1.53051 13.6191 1.60772 13.7564 1.74506C13.8937 1.8824 13.971 2.06864 13.9711 2.26286V3.52082H2.02842V2.26286C2.02856 2.06864 2.10577 1.8824 2.24311 1.74506C2.38045 1.60772 2.56668 1.53051 2.76091 1.53038ZM10.345 13.5656L9.8643 13.2546C9.78643 13.2042 9.696 13.1765 9.60323 13.1747C9.51047 13.173 9.41906 13.1972 9.33932 13.2446C9.12471 13.3725 8.89275 13.4687 8.65063 13.5303C8.56076 13.553 8.47904 13.6005 8.41468 13.6672C8.35032 13.7339 8.30588 13.8173 8.28638 13.908L8.16596 14.4683H7.83355L7.71313 13.908C7.69363 13.8173 7.64919 13.7339 7.58483 13.6672C7.52047 13.6005 7.43875 13.553 7.34888 13.5303C7.10676 13.4687 6.8748 13.3725 6.66019 13.2446C6.58045 13.1972 6.48904 13.173 6.39628 13.1747C6.30351 13.1765 6.21308 13.2042 6.13521 13.2546L5.65452 13.5656L5.41915 13.3302L5.73015 12.8495C5.78059 12.7717 5.80825 12.6812 5.81001 12.5885C5.81177 12.4957 5.78755 12.4043 5.7401 12.3246C5.61223 12.1099 5.51603 11.878 5.45448 11.6359C5.4317 11.546 5.38428 11.4643 5.31754 11.3999C5.25081 11.3355 5.16743 11.2911 5.07679 11.2716L4.51648 11.1512V10.8188L5.07679 10.6984C5.16743 10.6789 5.25081 10.6344 5.31754 10.5701C5.38428 10.5057 5.4317 10.424 5.45448 10.3341C5.51603 10.092 5.61223 9.86003 5.7401 9.64542C5.78755 9.56568 5.81177 9.47427 5.81001 9.38151C5.80825 9.28874 5.78059 9.19831 5.73015 9.12044L5.41915 8.63975L5.65452 8.40438L6.13521 8.71538C6.21308 8.76582 6.30351 8.79348 6.39628 8.79524C6.48904 8.797 6.58045 8.77278 6.66019 8.72533C6.8748 8.59746 7.10676 8.50126 7.34888 8.43971C7.43875 8.41693 7.52047 8.36951 7.58483 8.30277C7.64919 8.23604 7.69363 8.15266 7.71313 8.06202L7.83355 7.50171H8.16596L8.28638 8.06202C8.30588 8.15266 8.35032 8.23604 8.41468 8.30277C8.47904 8.36951 8.56076 8.41693 8.65063 8.43971C8.89275 8.50126 9.12471 8.59746 9.33932 8.72533C9.41906 8.77278 9.51047 8.797 9.60323 8.79524C9.696 8.79348 9.78643 8.76582 9.8643 8.71538L10.345 8.40438L10.5804 8.63975L10.2694 9.12044C10.2189 9.19831 10.1913 9.28874 10.1895 9.38151C10.1877 9.47427 10.212 9.56568 10.2594 9.64542C10.3873 9.86003 10.4835 10.092 10.545 10.3341C10.5678 10.424 10.6152 10.5057 10.682 10.5701C10.7487 10.6344 10.8321 10.6789 10.9227 10.6984L11.483 10.8188V11.1512L10.9227 11.2716C10.8321 11.2911 10.7487 11.3355 10.682 11.3999C10.6152 11.4643 10.5678 11.546 10.545 11.6359C10.4835 11.878 10.3873 12.1099 10.2594 12.3246C10.212 12.4043 10.1877 12.4957 10.1895 12.5885C10.1913 12.6812 10.2189 12.7717 10.2694 12.8495L10.5804 13.3302L10.345 13.5656ZM11.7132 12.4001L11.7055 13.473C11.7493 13.3735 11.385 12.2838 11.4198 12.1832L12.0866 12.0399C12.1979 12.016 12.2975 11.9547 12.3691 11.8663C12.4406 11.7778 12.4797 11.6675 12.4797 11.5538V10.4162C12.4797 10.3025 12.4406 10.1921 12.3691 10.1037C12.2975 10.0152 12.1979 9.95394 12.0866 9.93005L11.4198 9.78674C11.3756 9.66004 11.3243 9.53593 11.2661 9.41502L11.6363 8.84227C11.6981 8.74666 11.7252 8.63276 11.7132 8.51957C11.7011 8.40637 11.6506 8.30073 11.5701 8.22026L10.766 7.41612C10.6855 7.33561 10.5799 7.28512 10.4667 7.27307C10.3535 7.26103 10.2396 7.28816 10.144 7.34994L9.57121 7.72016C9.4503 7.66194 9.3262 7.61061 9.1995 7.5664L9.05618 6.8996C9.03229 6.78837 8.97101 6.68869 8.88255 6.61716C8.79408 6.54563 8.68378 6.50657 8.57002 6.50649H7.43099C7.31722 6.50657 7.20692 6.54563 7.11846 6.61716C7.02999 6.68869 6.96871 6.78837 6.94482 6.8996L6.80151 7.5664C6.67481 7.61061 6.5507 7.66194 6.42979 7.72016L5.85704 7.35243C5.76143 7.29065 5.64753 7.26352 5.53434 7.27556C5.42114 7.28761 5.3155 7.3381 5.23503 7.41861L4.43089 8.22026C4.35038 8.30073 4.29989 8.40637 4.28784 8.51957C4.2758 8.63276 4.30293 8.74666 4.36471 8.84227L4.73493 9.41502C4.67671 9.53593 4.62538 9.66004 4.58117 9.78674L3.91437 9.93005C3.80314 9.95394 3.70346 10.0152 3.63193 10.1037C3.5604 10.1921 3.52134 10.3025 3.52126 10.4162V11.5538C3.52134 11.6675 3.5604 11.7778 3.63193 11.8663C3.70346 11.9547 3.80314 12.016 3.91437 12.0399L4.58117 12.1832C4.616 12.2828 4.25026 13.3775 4.29405 13.473V12.5C4.19775 12.5001 2.57072 12.4591 2.48171 12.4224C2.3927 12.3856 2.3118 12.3317 2.24364 12.2637C2.17548 12.1956 2.12138 12.1148 2.08446 12.0259C2.04753 11.937 2.02849 11.8416 2.02842 11.7453V4.51604H13.9711V11.7453C13.971 11.9396 13.8937 12.1258 13.7564 12.2631C13.6191 12.4005 11.9074 12.4 11.7132 12.4001Z",
+    fill: "#64748A"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M13.1328 3.24464C13.4297 3.24464 13.6704 2.9352 13.6704 2.55347C13.6704 2.17175 13.4297 1.8623 13.1328 1.8623C12.8359 1.8623 12.5952 2.17175 12.5952 2.55347C12.5952 2.9352 12.8359 3.24464 13.1328 3.24464Z",
-    fill: "#64748B"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M14.8013 3.24464C15.0982 3.24464 15.3388 2.9352 15.3388 2.55347C15.3388 2.17175 15.0982 1.8623 14.8013 1.8623C14.5044 1.8623 14.2637 2.17175 14.2637 2.55347C14.2637 2.9352 14.5044 3.24464 14.8013 3.24464Z",
-    fill: "#64748B"
+    d: "M4.29405 13.473H2.76091C2.30289 13.4724 1.86383 13.2901 1.53996 12.9663C1.2161 12.6424 1.03386 12.2033 1.0332 11.7453V2.26286C1.03386 1.80485 1.2161 1.36578 1.53996 1.04192C1.86383 0.718051 2.30289 0.535814 2.76091 0.535156H13.2386C13.6966 0.535814 14.1357 0.718051 14.4595 1.04192C14.7834 1.36578 14.9657 1.80485 14.9663 2.26286V11.7453C14.9657 12.2033 14.7834 12.6424 14.4595 12.9663C14.1357 13.2901 13.6966 13.4724 13.2386 13.473H11.7055M4.29405 13.473C4.30918 13.5774 4.3571 13.6743 4.43089 13.7497L5.23503 14.5539C5.3155 14.6344 5.42114 14.6849 5.53434 14.6969C5.64753 14.7089 5.76143 14.6818 5.85704 14.62L6.42979 14.2498C6.5507 14.308 6.67481 14.3594 6.80151 14.4036L6.94482 15.0704C6.96871 15.1816 7.02999 15.2813 7.11846 15.3528C7.20692 15.4243 7.31722 15.4634 7.43099 15.4635H8.56852C8.68229 15.4634 8.79259 15.4243 8.88105 15.3528C8.96952 15.2813 9.0308 15.1816 9.05469 15.0704L9.198 14.4036C9.32471 14.3594 9.44881 14.308 9.56972 14.2498L10.1425 14.62C10.2381 14.6818 10.352 14.7089 10.4652 14.6969C10.5784 14.6849 10.684 14.6344 10.7645 14.5539L11.5686 13.7497C11.6424 13.6743 11.6903 13.5774 11.7055 13.473M4.29405 13.473C4.25026 13.3775 4.616 12.2828 4.58117 12.1832L3.91437 12.0399C3.80314 12.016 3.70346 11.9547 3.63193 11.8663C3.5604 11.7778 3.52134 11.6675 3.52126 11.5538V10.4162C3.52134 10.3025 3.5604 10.1921 3.63193 10.1037C3.70346 10.0152 3.80314 9.95394 3.91437 9.93005L4.58117 9.78674C4.62538 9.66004 4.67671 9.53593 4.73493 9.41502L4.36471 8.84227C4.30293 8.74666 4.2758 8.63276 4.28784 8.51957C4.29989 8.40637 4.35038 8.30073 4.43089 8.22026L5.23503 7.41861C5.3155 7.3381 5.42114 7.28761 5.53434 7.27556C5.64753 7.26352 5.76143 7.29065 5.85704 7.35243L6.42979 7.72016C6.5507 7.66194 6.67481 7.61061 6.80151 7.5664L6.94482 6.8996C6.96871 6.78837 7.02999 6.68869 7.11846 6.61716C7.20692 6.54563 7.31722 6.50657 7.43099 6.50649H8.57002C8.68378 6.50657 8.79408 6.54563 8.88255 6.61716C8.97101 6.68869 9.03229 6.78837 9.05618 6.8996L9.1995 7.5664C9.3262 7.61061 9.4503 7.66194 9.57121 7.72016L10.144 7.34994C10.2396 7.28816 10.3535 7.26103 10.4667 7.27307C10.5799 7.28512 10.6855 7.33561 10.766 7.41612L11.5701 8.22026C11.6506 8.30073 11.7011 8.40637 11.7132 8.51957C11.7252 8.63276 11.6981 8.74666 11.6363 8.84227L11.2661 9.41502C11.3243 9.53593 11.3756 9.66004 11.4198 9.78674L12.0866 9.93005C12.1979 9.95394 12.2975 10.0152 12.3691 10.1037C12.4406 10.1921 12.4797 10.3025 12.4797 10.4162V11.5538C12.4797 11.6675 12.4406 11.7778 12.3691 11.8663C12.2975 11.9547 12.1979 12.016 12.0866 12.0399L11.4198 12.1832C11.385 12.2838 11.7493 13.3735 11.7055 13.473M4.29405 13.473V12.5C4.19775 12.5001 2.57072 12.4591 2.48171 12.4224C2.3927 12.3856 2.3118 12.3317 2.24364 12.2637C2.17548 12.1956 2.12138 12.1148 2.08446 12.0259C2.04753 11.937 2.02849 11.8416 2.02842 11.7453V4.51604H13.9711V11.7453C13.971 11.9396 13.8937 12.1258 13.7564 12.2631C13.6191 12.4005 11.9074 12.4 11.7132 12.4001L11.7055 13.473M2.76091 1.53038H13.2386C13.4328 1.53051 13.6191 1.60772 13.7564 1.74506C13.8937 1.8824 13.971 2.06864 13.9711 2.26286V3.52082H2.02842V2.26286C2.02856 2.06864 2.10577 1.8824 2.24311 1.74506C2.38045 1.60772 2.56668 1.53051 2.76091 1.53038ZM10.345 13.5656L9.8643 13.2546C9.78643 13.2042 9.696 13.1765 9.60323 13.1747C9.51047 13.173 9.41906 13.1972 9.33932 13.2446C9.12471 13.3725 8.89275 13.4687 8.65063 13.5303C8.56076 13.553 8.47904 13.6005 8.41468 13.6672C8.35032 13.7339 8.30588 13.8173 8.28638 13.908L8.16596 14.4683H7.83355L7.71313 13.908C7.69363 13.8173 7.64919 13.7339 7.58483 13.6672C7.52047 13.6005 7.43875 13.553 7.34888 13.5303C7.10676 13.4687 6.8748 13.3725 6.66019 13.2446C6.58045 13.1972 6.48904 13.173 6.39628 13.1747C6.30351 13.1765 6.21308 13.2042 6.13521 13.2546L5.65452 13.5656L5.41915 13.3302L5.73015 12.8495C5.78059 12.7717 5.80825 12.6812 5.81001 12.5885C5.81177 12.4957 5.78755 12.4043 5.7401 12.3246C5.61223 12.1099 5.51603 11.878 5.45448 11.6359C5.4317 11.546 5.38428 11.4643 5.31754 11.3999C5.25081 11.3355 5.16743 11.2911 5.07679 11.2716L4.51648 11.1512V10.8188L5.07679 10.6984C5.16743 10.6789 5.25081 10.6344 5.31754 10.5701C5.38428 10.5057 5.4317 10.424 5.45448 10.3341C5.51603 10.092 5.61223 9.86003 5.7401 9.64542C5.78755 9.56568 5.81177 9.47427 5.81001 9.38151C5.80825 9.28874 5.78059 9.19831 5.73015 9.12044L5.41915 8.63975L5.65452 8.40438L6.13521 8.71538C6.21308 8.76582 6.30351 8.79348 6.39628 8.79524C6.48904 8.797 6.58045 8.77278 6.66019 8.72533C6.8748 8.59746 7.10676 8.50126 7.34888 8.43971C7.43875 8.41693 7.52047 8.36951 7.58483 8.30277C7.64919 8.23604 7.69363 8.15266 7.71313 8.06202L7.83355 7.50171H8.16596L8.28638 8.06202C8.30588 8.15266 8.35032 8.23604 8.41468 8.30277C8.47904 8.36951 8.56076 8.41693 8.65063 8.43971C8.89275 8.50126 9.12471 8.59746 9.33932 8.72533C9.41906 8.77278 9.51047 8.797 9.60323 8.79524C9.696 8.79348 9.78643 8.76582 9.8643 8.71538L10.345 8.40438L10.5804 8.63975L10.2694 9.12044C10.2189 9.19831 10.1913 9.28874 10.1895 9.38151C10.1877 9.47427 10.212 9.56568 10.2594 9.64542C10.3873 9.86003 10.4835 10.092 10.545 10.3341C10.5678 10.424 10.6152 10.5057 10.682 10.5701C10.7487 10.6344 10.8321 10.6789 10.9227 10.6984L11.483 10.8188V11.1512L10.9227 11.2716C10.8321 11.2911 10.7487 11.3355 10.682 11.3999C10.6152 11.4643 10.5678 11.546 10.545 11.6359C10.4835 11.878 10.3873 12.1099 10.2594 12.3246C10.212 12.4043 10.1877 12.4957 10.1895 12.5885C10.1913 12.6812 10.2189 12.7717 10.2694 12.8495L10.5804 13.3302L10.345 13.5656Z",
+    stroke: "white",
+    strokeWidth: "0.1"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M15.2764 0H1.72357C0.773218 0 0 0.994052 0 2.21598V14.784C0 16.0059 0.773218 17 1.72357 17H15.2764C16.2268 17 17 16.0059 17 14.784V2.21598C17 0.994052 16.2268 0 15.2764 0ZM16.0936 14.784C16.0936 15.3634 15.727 15.8347 15.2764 15.8347H1.72357C1.27299 15.8347 0.90638 15.3634 0.90638 14.784V5.10695H16.0936V14.784ZM16.0936 3.94163H0.90638V2.21598C0.90638 1.63659 1.27299 1.16531 1.72357 1.16531H15.2764C15.727 1.16531 16.0936 1.63659 16.0936 2.21598V3.94163Z",
-    fill: "#64748B"
+    d: "M3.52105 3.02257C3.79587 3.02257 4.01866 2.79978 4.01866 2.52495C4.01866 2.25013 3.79587 2.02734 3.52105 2.02734C3.24623 2.02734 3.02344 2.25013 3.02344 2.52495C3.02344 2.79978 3.24623 3.02257 3.52105 3.02257Z",
+    fill: "#64748A",
+    stroke: "white",
+    strokeWidth: "0.1"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M4.23227 11.9736H4.38555C4.48603 11.9736 4.57397 12.0387 4.60576 12.134C4.63533 12.2226 4.6709 12.3085 4.71206 12.3911C4.75688 12.4811 4.7408 12.5892 4.66973 12.6602L4.56156 12.7684C4.47084 12.8591 4.47087 13.0062 4.56161 13.0969L4.90307 13.4382C4.99379 13.5288 5.14081 13.5288 5.23149 13.4381L5.33948 13.3301C5.41056 13.259 5.51867 13.2429 5.60864 13.2878C5.69133 13.329 5.7773 13.3646 5.86603 13.3942C5.96133 13.426 6.0264 13.514 6.0264 13.6144V13.7677C6.0264 13.896 6.13038 14 6.25867 14H6.74133C6.86961 14 6.9736 13.896 6.9736 13.7677V13.6144C6.9736 13.514 7.03865 13.426 7.13397 13.3942C7.2227 13.3646 7.30867 13.329 7.39136 13.2878C7.48133 13.2429 7.58943 13.259 7.66052 13.3301L7.76851 13.4381C7.85919 13.5288 8.00621 13.5288 8.09693 13.4382L8.43839 13.0969C8.52913 13.0062 8.52916 12.8591 8.43844 12.7684L8.33027 12.6602C8.25919 12.5891 8.2431 12.4811 8.28793 12.3911C8.3291 12.3085 8.36467 12.2226 8.39424 12.134C8.42603 12.0387 8.51397 11.9736 8.61444 11.9736H8.76773C8.89601 11.9736 9 11.8696 9 11.7413V11.2587C9 11.1304 8.89639 11.0264 8.76812 11.0264C8.71867 11.0264 8.66581 11.0264 8.61441 11.0264C8.51394 11.0264 8.42603 10.9613 8.39424 10.866C8.36464 10.7773 8.32902 10.6913 8.2878 10.6086C8.24294 10.5187 8.25903 10.4106 8.33012 10.3395L8.43844 10.2312C8.52916 10.1404 8.52913 9.99334 8.43839 9.90263L8.09693 9.5614C8.00621 9.47075 7.85919 9.47077 7.76851 9.56145L7.66023 9.66972C7.58916 9.7408 7.48108 9.75688 7.39111 9.71206C7.30849 9.67089 7.22261 9.63533 7.13398 9.60576C7.03867 9.57397 6.9736 9.48603 6.9736 9.38555V9.23226C6.9736 9.10398 6.86961 9 6.74133 9H6.25867C6.13038 9 6.0264 9.10398 6.0264 9.23226V9.38555C6.0264 9.48603 5.96133 9.57397 5.86602 9.60576C5.77738 9.63533 5.69151 9.6709 5.60889 9.71206C5.51893 9.75688 5.41085 9.7408 5.33977 9.66972L5.23149 9.56145C5.14081 9.47077 4.99379 9.47075 4.90307 9.5614L4.56161 9.90263C4.47087 9.99334 4.47084 10.1404 4.56156 10.2312L4.66988 10.3395C4.74096 10.4106 4.75704 10.5187 4.7122 10.6086C4.67097 10.6913 4.63536 10.7773 4.60576 10.866C4.57397 10.9613 4.48603 11.0264 4.38555 11.0264H4.23226C4.10398 11.0264 4 11.1304 4 11.2587V11.7413C4 11.8696 4.10398 11.9736 4.23227 11.9736ZM6.49999 10.4122C7.10075 10.4122 7.58775 10.8993 7.58775 11.5C7.58775 12.1007 7.10075 12.5878 6.49999 12.5878C5.89925 12.5878 5.41224 12.1007 5.41224 11.5C5.41224 10.8993 5.89925 10.4122 6.49999 10.4122Z",
-    fill: "#64748B"
+    d: "M5.01421 3.02257C5.28904 3.02257 5.51182 2.79978 5.51182 2.52495C5.51182 2.25013 5.28904 2.02734 5.01421 2.02734C4.73939 2.02734 4.5166 2.25013 4.5166 2.52495C4.5166 2.79978 4.73939 3.02257 5.01421 3.02257Z",
+    fill: "#64748A",
+    stroke: "white",
+    strokeWidth: "0.1"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M9.22082 9.41013H9.3411C9.40267 9.41013 9.45738 9.45007 9.4772 9.50961C9.50102 9.58075 9.52981 9.65038 9.56274 9.7164C9.59069 9.77248 9.58022 9.83939 9.53673 9.88296L9.45187 9.96782C9.36581 10.054 9.36589 10.1942 9.45195 10.2801L9.71978 10.548C9.80586 10.6339 9.94588 10.6339 10.0321 10.5478L10.1168 10.4631C10.1602 10.4197 10.2273 10.4094 10.2834 10.4372C10.3497 10.4702 10.4192 10.499 10.4904 10.5228C10.5498 10.5427 10.5898 10.5974 10.5898 10.6589V10.7792C10.5898 10.901 10.6889 11 10.8107 11H11.1894C11.3111 11 11.4102 10.901 11.4102 10.7792V10.6589C11.4102 10.5974 11.4501 10.5427 11.5096 10.5228C11.5806 10.4991 11.6503 10.4703 11.7165 10.4372C11.7727 10.4094 11.8397 10.4197 11.8832 10.4631L11.9679 10.5478C12.0541 10.634 12.1942 10.6339 12.2801 10.548L12.5481 10.2801C12.5898 10.2384 12.6128 10.1831 12.6128 10.124C12.6128 10.065 12.5898 10.0096 12.5481 9.96782L12.4632 9.88296C12.4197 9.83939 12.4093 9.77248 12.4373 9.71625C12.4706 9.64933 12.4993 9.57984 12.5227 9.50961C12.5425 9.45007 12.5973 9.41013 12.6589 9.41013H12.7792C12.901 9.41013 13 9.31111 13 9.18931V8.81069C13 8.68891 12.9011 8.58987 12.7795 8.58987H12.6588C12.5973 8.58987 12.5425 8.54993 12.5227 8.49039C12.4992 8.42001 12.4704 8.35038 12.4371 8.28345C12.4092 8.22722 12.4196 8.16031 12.4631 8.11674L12.5481 8.03174C12.5898 7.98999 12.6128 7.93467 12.6128 7.87558C12.6128 7.8165 12.5898 7.76117 12.5481 7.71942L12.2801 7.45173C12.1939 7.36537 12.0538 7.36552 11.9679 7.45173L11.883 7.53674C11.8393 7.58045 11.7724 7.59085 11.7163 7.56267C11.6498 7.52951 11.5803 7.50086 11.5096 7.47721C11.4501 7.45746 11.4102 7.40275 11.4102 7.34111V7.22082C11.4102 7.09904 11.3111 7 11.1894 7H10.8107C10.6889 7 10.5898 7.09904 10.5898 7.22082V7.34111C10.5898 7.40275 10.5499 7.45746 10.4904 7.47721C10.4195 7.50086 10.35 7.52965 10.2836 7.56267C10.2276 7.591 10.1607 7.58045 10.117 7.53674L10.0321 7.45173C9.94603 7.36582 9.80586 7.36582 9.71978 7.45173L9.45195 7.71942C9.4102 7.76103 9.38721 7.8165 9.38721 7.87558C9.38721 7.93452 9.4102 7.98999 9.45187 8.03174L9.53689 8.11674C9.58037 8.16031 9.59084 8.22722 9.56281 8.28345C9.5295 8.35037 9.5007 8.42001 9.4772 8.49039C9.45738 8.54993 9.40267 8.58987 9.3411 8.58987H9.22082C9.09903 8.58987 9 8.68891 9 8.81069V9.18931C9 9.31111 9.09903 9.41013 9.22082 9.41013ZM11 8.18517C11.4493 8.18517 11.8148 8.55068 11.8148 9C11.8148 9.44932 11.4493 9.81483 11 9.81483C10.5506 9.81483 10.1851 9.44932 10.1851 9C10.1851 8.55068 10.5506 8.18517 11 8.18517Z",
-    fill: "#64748B"
+    d: "M7.99972 8.99414C7.60605 8.99414 7.22122 9.11088 6.89389 9.32959C6.56656 9.5483 6.31144 9.85917 6.16079 10.2229C6.01014 10.5866 5.97072 10.9868 6.04752 11.3729C6.12433 11.759 6.3139 12.1137 6.59227 12.392C6.87063 12.6704 7.2253 12.86 7.61141 12.9368C7.99751 13.0136 8.39773 12.9742 8.76143 12.8235C9.12514 12.6729 9.436 12.4177 9.65472 12.0904C9.87343 11.7631 9.99017 11.3783 9.99017 10.9846C9.99017 10.4567 9.78046 9.95041 9.40718 9.57713C9.0339 9.20385 8.52762 8.99414 7.99972 8.99414ZM7.99972 11.9798C7.80289 11.9798 7.61047 11.9214 7.44681 11.8121C7.28314 11.7027 7.15558 11.5473 7.08026 11.3654C7.00493 11.1836 6.98522 10.9835 7.02362 10.7904C7.06202 10.5974 7.15681 10.42 7.29599 10.2809C7.43518 10.1417 7.61251 10.0469 7.80556 10.0085C7.99862 9.97008 8.19872 9.98979 8.38058 10.0651C8.56243 10.1404 8.71786 10.268 8.82722 10.4317C8.93658 10.5953 8.99494 10.7877 8.99494 10.9846C8.99494 11.2485 8.89009 11.5017 8.70345 11.6883C8.51681 11.875 8.26367 11.9798 7.99972 11.9798Z",
+    fill: "#64748A",
+    stroke: "white",
+    strokeWidth: "0.1"
   })]
 });
 export const TextLeftAlign = props => /*#__PURE__*/_jsxs("svg", {

package/dist/Editor/commonStyle.js

@@ -39,7 +39,22 @@ const useCommonStyle = theme => ({
       }
     },
     "& .colorpicker": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.background,
+      "& .default-color-panel": {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, 20px)",
+        gridGap: "3px",
+        justifyContent: "space-between",
+        margin: "14px -16px 0px -16px",
+        padding: "2px 16px 0px 16px",
+        overflow: "auto",
+        maxHeight: "105px",
+        "& .default-color-panel_item": {
+          height: '20px',
+          width: '20px',
+          border: '1px solid #E2E8F0'
+        }
+      }
     },
     "& .color-picker-panel": {
       backgroundColor: theme?.palette?.editor?.background

package/dist/Editor/hooks/useMouseMove.js

@@ -26,6 +26,8 @@ export const EditorProvider = ({
   const [drop, setDrop] = useState(0);
   const [selectedPath, setSelectedPath] = useState(null);
   const path = event?.target?.getAttribute("data-path");
+  const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
+
   const onDrop = () => {
     setDrop(drop + 1);
   };
@@ -48,7 +50,9 @@ export const EditorProvider = ({
       drop,
       theme: theme,
       selectedPath: selectedPath,
-      setSelectedPath: setSelectedPath
+      setSelectedPath: setSelectedPath,
+      popupType,
+      setPopupType
     },
     children: children
   });

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -319,11 +319,15 @@ export const getBlock = props => {
         children: children
       });
     case "list-item":
+      const firstChildren = element.children[0] || {};
       return /*#__PURE__*/_jsx("li", {
         ...attributes,
         ...element.attr,
         className: `content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "List",
+        style: {
+          color: firstChildren?.color
+        },
         children: children
       });
     case "orderedList":

package/dist/Editor/utils/embed.js

@@ -26,7 +26,7 @@ export const createEmbedNode = (type, {
   alignment: {
     horizantal: "center"
   },
-  objectFit: type === "image" ? true : false
+  objectFit: false
 });
 export const insertEmbed = (editor, embedData, format) => {
   try {

package/dist/Editor/utils/font.js

@@ -58,4 +58,9 @@ export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
     text: fontFamilyMap[m],
     value: m
   };
-});
+});
+export const headingMap = {
+  "headingOne": "32px",
+  "headingTwo": "24px",
+  "headingThree": "19px"
+};

package/package.json

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