@flozy/editor 4.1.5 → 4.1.8

package/dist/Editor/ChatEditor.js

@@ -248,6 +248,16 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       restVal
     });
   };
+  const handlePaste = event => {
+    const items = event.clipboardData.items;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.startsWith("image/")) {
+        event.preventDefault(); // Prevent the default paste behavior
+        return; // Exit early to keep the editor empty
+      }
+    }
+  };
+
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -267,7 +277,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         placeholder: "Start typing ...",
         spellCheck: true,
         onBlur: handleBlur,
-        onKeyDown: onKeyDown
+        onKeyDown: onKeyDown,
+        onPaste: handlePaste
       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
         ref: mentionsRef,
         mentions: mentions,

package/dist/Editor/Editor.css

@@ -559,6 +559,14 @@ blockquote {
   .app-drawer-btn {
     color: #000;
   }
+
+  .dialog-actions-si {
+    display: block !important;
+  }
+  
+  .dialog-actions-si .actionBtn {
+    margin-top: 24px;
+  }
 }
 
 .editorTabs {

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

@@ -81,7 +81,7 @@ function AIInput({
     const selectWrapper = refs?.length ? refs[1]?.current : null;
     const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
     if (selectWrapper && slateWrapper) {
-      const height = slateWrapper.offsetHeight - selectWrapper.offsetHeight - 80;
+      const height = slateWrapper.offsetHeight - selectWrapper.offsetHeight - 170;
       setContentHeight(height + "px");
     }
   }, [refs, generatedText]);

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Styles from "./Styles";
 import { Fade, Paper, Popper } from "@mui/material";
@@ -11,9 +11,14 @@ import { VoiceToText } from "./VoiceToText";
 import deserialize from "../../helper/deserialize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const getInputWidth = selectedElement => {
+  const sectionElementWidth = selectedElement?.anchorEl || document.querySelector(".ed-section-inner");
+  const MIN_WIDTH = 400;
+  return sectionElementWidth?.offsetWidth || MIN_WIDTH;
+};
 const scrollToAIInput = editor => {
-  try {
-    setTimeout(() => {
+  setTimeout(() => {
+    try {
       const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
       let selectionRect;
       if (getSelectedText(editor)) {
@@ -28,10 +33,10 @@ const scrollToAIInput = editor => {
         // scroll to top of the slateWrapper
         slateWrapper.scrollBy(0, cursorViewPortPosition - 80);
       }
-    }, 200);
-  } catch (err) {
-    console.log(err);
-  }
+    } catch (err) {
+      console.log(err);
+    }
+  }, 200);
 };
 const insertText = (editor, text, options) => {
   const parsed = new DOMParser().parseFromString(text, "text/html");
@@ -94,7 +99,7 @@ const getNextLine = editor => {
     return null;
   }
 };
-const updateAnchorEl = (setAnchorEl, editor, openAI) => {
+const updateAnchorEl = (setAnchorEl, editor, openAI, selectedElement) => {
   try {
     if (!editor.selection) {
       return;
@@ -123,8 +128,9 @@ const updateAnchorEl = (setAnchorEl, editor, openAI) => {
 
       const getBoundingClientRect = () => {
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
-        const editorEle = document.querySelector(".ed-section-inner")?.getBoundingClientRect();
         const caretPos = caret.getBoundingClientRect();
+        const sectionEle = selectedElement?.anchorEl || document.querySelector(".ed-section-inner");
+        const selectedSectionRect = sectionEle?.getBoundingClientRect();
         const isAIInputReachTop = caretPos.height + caretPos.y <= editorContainer.y;
         const yValue = isAIInputReachTop ? "-500" : caretPos.y; // -500 is to hide the AI input if the toolbar reached the top
 
@@ -134,9 +140,9 @@ const updateAnchorEl = (setAnchorEl, editor, openAI) => {
           top: yValue,
           right: caretPos.right,
           bottom: caretPos.bottom,
-          x: editorEle.x,
-          left: editorEle.left,
-          width: editorEle.width
+          x: selectedSectionRect.x,
+          left: selectedSectionRect.left,
+          width: selectedSectionRect.width
         };
       };
       setAnchorEl({
@@ -155,7 +161,8 @@ function PopoverAIInput({
   } = otherProps;
   const {
     openAI,
-    setOpenAI
+    setOpenAI,
+    selectedElement
   } = useEditorContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -174,9 +181,8 @@ function PopoverAIInput({
     ReactEditor.focus(editor);
     Transforms.deselect(editor);
   };
-  const editorElement = document.querySelector(".ed-section-inner");
   useEffect(() => {
-    updateAnchorEl(setAnchorEl, editor, openAI);
+    updateAnchorEl(setAnchorEl, editor, openAI, selectedElement);
   }, [openAI, editor.selection]);
   useEffect(() => {
     if (openAI) {
@@ -269,7 +275,7 @@ function PopoverAIInput({
       placement: "bottom-start",
       sx: {
         ...classes.aiPopper,
-        width: editorElement?.offsetWidth || 400
+        width: getInputWidth(selectedElement)
       },
       children: ({
         TransitionProps

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

@@ -95,7 +95,8 @@ const Styles = theme => ({
   generatedText: {
     margin: "8px",
     overflow: "auto",
-    fontSize: "inherit"
+    fontSize: "inherit",
+    color: `${theme?.palette?.editor?.textColor} !important`
   },
   customSelectWrapper: {
     width: "fit-content",

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

@@ -37,14 +37,14 @@ const FormTextArea = props => {
           ...getTRBLBreakPoints(bannerSpacing)
         },
         height: height || "150px",
-        borderColor: borderColor || "transparent",
+        borderColor: `${borderColor || "transparent"} !important`,
         borderWidth: borderWidth || "1px",
         borderRadius: {
           ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
         },
         borderStyle: borderStyle || "solid",
-        color: textColor || "#000",
-        background: bgColor || "transparent",
+        color: `${textColor || "#000"} !important`,
+        background: `${bgColor || "transparent"} !important`,
         fontSize: '14px'
       }
     })

package/dist/Editor/Elements/Link/LinkPopup.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Divider } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import LinkPopupStyles from "./LinkPopupStyles";
+import { getEditorTheme } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkPopup = props => {
@@ -12,10 +14,13 @@ const LinkPopup = props => {
     handleInsertLink
   } = props;
   const themeType = localStorage.getItem("themeType");
+  const classes = LinkPopupStyles(themeType);
+  const themeStyle = getEditorTheme(themeType);
   return /*#__PURE__*/_jsxs(Dialog, {
     fullWidth: true,
     open: open,
     className: `dialogComp`,
+    sx: classes.dialogRoot,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
       sx: {
         padding: "13px 19px 9px 19px"
@@ -38,7 +43,9 @@ const LinkPopup = props => {
           },
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: handleClose,
-            className: "close-popupbtn",
+            sx: {
+              color: themeStyle?.editor?.svgStroke
+            },
             children: /*#__PURE__*/_jsx(CloseIcon, {})
           })
         })]

package/dist/Editor/Elements/Link/LinkPopupStyles.js

@@ -1,28 +1,40 @@
-const LinkPopupStyles = themeType => ({
-  addLinkField: {
-    "& .MuiOutlinedInput-input": {
-      fontSize: "12px",
-      fontWeight: 500,
-      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
-    },
-    "& .MuiFormHelperText-root": {
-      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
-    },
-    "& .MuiOutlinedInput-root": {
-      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
-      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important",
-      borderRadius: "7px",
-      "& fieldset": {
-        borderColor: "#D8DDE1"
+import { getEditorTheme } from "../../utils/helper";
+const LinkPopupStyles = themeType => {
+  const themeStyle = getEditorTheme(themeType);
+  return {
+    addLinkField: {
+      "& .MuiOutlinedInput-input": {
+        fontSize: "12px",
+        fontWeight: 500,
+        color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
       },
-      "&:hover fieldset": {
-        borderColor: "#64748B"
+      "& .MuiFormHelperText-root": {
+        color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
       },
-      "&.Mui-focused fieldset": {
-        borderColor: "#2563EB"
+      "& .MuiOutlinedInput-root": {
+        boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
+        color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important",
+        borderRadius: "7px",
+        "& fieldset": {
+          borderColor: "#D8DDE1"
+        },
+        "&:hover fieldset": {
+          borderColor: "#64748B"
+        },
+        "&.Mui-focused fieldset": {
+          borderColor: "#2563EB"
+        },
+        "& .MuiFormLabel-root": {}
+      }
+    },
+    dialogRoot: {
+      "& .MuiPaper-root": {
+        background: `${themeStyle?.editor?.background} !important`
       },
-      "& .MuiFormLabel-root": {}
+      "& .MuiTypography-root": {
+        color: `${themeStyle?.editor?.color} !important`
+      }
     }
-  }
-});
+  };
+};
 export default LinkPopupStyles;

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

@@ -10,6 +10,7 @@ import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { validationMethods } from "../Form/FormElements/validations";
 import { CalenderDownIconSignature, CalenderIconSignature } from "../../common/iconListV2";
+import ColorPickerButton from "../../common/ColorPickerButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -96,10 +97,10 @@ const SignaturePopup = props => {
       size: val
     });
   };
-  const onBrushColor = e => {
+  const onBrushColor = color => {
     setBrush({
       ...brush,
-      color: e.target.value
+      color
     });
   };
   const onUploadDone = data => {
@@ -138,9 +139,8 @@ const SignaturePopup = props => {
       fullWidth: true,
       PaperProps: {
         sx: {
-          borderRadius: '8px',
+          borderRadius: "8px",
           boxShadow: "0px 4px 10px 0px #00000029",
-          overflowY: tab === 0 ? "hidden" : "auto",
           maxWidth: "560px",
           ...classes.signaturePopup
         }
@@ -264,14 +264,15 @@ const SignaturePopup = props => {
               sx: {
                 pt: 2
               },
-              spacing: 1,
+              spacing: 2,
               style: {
                 display: "flex",
                 justifyContent: "space-between"
               },
               children: [/*#__PURE__*/_jsxs(Grid, {
                 item: true,
-                xs: 6,
+                xs: 12,
+                sm: 6,
                 style: {
                   display: "flex",
                   alignItems: "center",
@@ -279,8 +280,8 @@ const SignaturePopup = props => {
                   fontFamily: '"Inter", sans-serif"'
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
-                  style: {
-                    marginRight: "8px"
+                  sx: {
+                    minWidth: "46px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedBy",
@@ -303,20 +304,20 @@ const SignaturePopup = props => {
                     size: "small",
                     onChange: onChange,
                     sx: {
-                      '& .MuiOutlinedInput-root': {
-                        borderRadius: '10px',
-                        '& fieldset': {
+                      "& .MuiOutlinedInput-root": {
+                        borderRadius: "10px",
+                        "& fieldset": {
                           borderColor: "1px solid #D8DDE1"
                         }
                         // '&:hover fieldset': {
-                        //   borderColor: 'yourHoverColor', 
+                        //   borderColor: 'yourHoverColor',
                         // },
                         // '&.Mui-focused fieldset': {
                         //   borderColor: 'yourFocusedColor',
                         // },
                       },
 
-                      '& .MuiInputBase-input::placeholder': {
+                      "& .MuiInputBase-input::placeholder": {
                         fontFamily: '"Inter", sans-serif"',
                         fontSize: "14px"
                       }
@@ -325,16 +326,16 @@ const SignaturePopup = props => {
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
                 item: true,
-                xs: 6,
+                xs: 12,
+                sm: 6,
                 style: {
                   display: "flex",
                   alignItems: "center"
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
-                  style: {
-                    marginRight: "8px"
+                  sx: {
+                    minWidth: "46px"
                   },
-                  xs: 2,
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedOn",
                     style: {
@@ -350,6 +351,7 @@ const SignaturePopup = props => {
                     e?.stopPropagation();
                   },
                   xs: 12,
+                  sx: classes.datePicker,
                   children: /*#__PURE__*/_jsx(DatePicker, {
                     selected: signedData.signedOn,
                     onChange: date => {
@@ -416,16 +418,16 @@ const SignaturePopup = props => {
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
                 item: true,
-                xs: 12,
                 style: {
                   display: "flex",
                   alignItems: "center"
                 },
+                xs: 12,
+                sm: 6,
                 children: [/*#__PURE__*/_jsx(Grid, {
-                  style: {
-                    marginRight: "6px"
+                  sx: {
+                    minWidth: "46px"
                   },
-                  xs: 1,
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
                     style: {
@@ -438,7 +440,6 @@ const SignaturePopup = props => {
                 }), /*#__PURE__*/_jsx(Grid, {
                   container: true,
                   item: true,
-                  xs: 11,
                   children: /*#__PURE__*/_jsx(TextField, {
                     fullWidth: true,
                     id: "signedByEmail",
@@ -447,20 +448,20 @@ const SignaturePopup = props => {
                     size: "small",
                     onChange: onChange,
                     sx: {
-                      '& .MuiOutlinedInput-root': {
-                        borderRadius: '10px',
-                        '& fieldset': {
+                      "& .MuiOutlinedInput-root": {
+                        borderRadius: "10px",
+                        "& fieldset": {
                           borderColor: "1px solid #D8DDE1"
                         }
                         // '&:hover fieldset': {
-                        //   borderColor: 'yourHoverColor', 
+                        //   borderColor: 'yourHoverColor',
                         // },
                         // '&.Mui-focused fieldset': {
                         //   borderColor: 'yourFocusedColor',
                         // },
                       },
 
-                      '& .MuiInputBase-input::placeholder': {
+                      "& .MuiInputBase-input::placeholder": {
                         fontFamily: '"Inter", sans-serif"',
                         fontSize: "14px"
                       }
@@ -488,14 +489,13 @@ const SignaturePopup = props => {
                   container: true,
                   alignItems: "center",
                   sx: {
-                    display: 'flex'
+                    display: "flex"
                   },
-                  children: [/*#__PURE__*/_jsx("input", {
-                    type: "color",
-                    className: "brushcolorpic signColorPicker",
-                    onChange: onBrushColor,
-                    size: "4",
-                    value: brush?.color
+                  children: [/*#__PURE__*/_jsx(ColorPickerButton, {
+                    classes: classes,
+                    value: brush.color,
+                    onSave: onBrushColor,
+                    recentColors: []
                   }), /*#__PURE__*/_jsx("span", {
                     style: {
                       marginLeft: "10px",
@@ -535,11 +535,11 @@ const SignaturePopup = props => {
             }) : null, /*#__PURE__*/_jsxs(_Fragment, {
               children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
-                className: "secondaryBtn",
-                children: "Clear"
+                className: "secondaryBtn actionBtn",
+                children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
-                className: `primaryBtn ${isEmpty ? "disabled" : ""}`,
+                className: `primaryBtn actionBtn ${isEmpty ? "disabled" : ""}`,
                 disabled: isEmpty,
                 children: "Save"
               })]

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

@@ -511,16 +511,16 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
-    padding: '5px',
+    padding: "5px",
     position: "relative",
     margin: "8px",
     height: "50px",
-    '& .img-wrapper': {
+    "& .img-wrapper": {
       "&:hover": {
-        padding: '0px 2px 0px 2px',
-        backgroundColor: '#E9F3FE',
-        border: '1px solid #2563EB40',
-        borderRadius: '5px',
+        padding: "0px 2px 0px 2px",
+        backgroundColor: "#E9F3FE",
+        border: "1px solid #2563EB40",
+        borderRadius: "5px",
         // height: "100%",
         margin: "0px"
         // "& .template-card-action": {
@@ -590,7 +590,7 @@ const usePopupStyle = theme => ({
       // minWidth: "130px",
       border: "1px solid #E4E8EB",
       maxHeight: "140px",
-      background: theme?.palette?.editor?.background,
+      background: `${theme?.palette?.editor?.background} !important`,
       // overflowY: "hidden",
       padding: "6px 12px 6px 0px",
       overflowY: "scroll",
@@ -613,8 +613,8 @@ const usePopupStyle = theme => ({
         background: `${theme?.palette?.action?.selected} !important`
       },
       "&.selected": {
-        color: `${theme?.palette?.primary?.main} !important`,
-        background: `${theme?.palette?.action?.selected} !important`
+        color: `#2563EB !important`,
+        background: `#E9F3FE !important`
       }
     },
     "& .menuOptions": {
@@ -645,16 +645,16 @@ const usePopupStyle = theme => ({
     }
   },
   fullViewCardMediaWrpr: {
-    padding: '5px',
+    padding: "5px",
     position: "relative",
     margin: "8px",
     height: "140px",
-    '& .img-wrapper': {
+    "& .img-wrapper": {
       "&:hover": {
-        padding: '0px 2px 0px 2px',
-        backgroundColor: '#E9F3FE',
-        border: '1px solid #2563EB40',
-        borderRadius: '5px',
+        padding: "0px 2px 0px 2px",
+        backgroundColor: "#E9F3FE",
+        border: "1px solid #2563EB40",
+        borderRadius: "5px",
         margin: "0px"
       }
     }

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

@@ -24,6 +24,7 @@ const FontLoader = props => {
         google: {
           families: [...batchWithWeights]
         },
+        classes: false,
         active: () => {
           console.log(`Fonts loaded successfully: ${batch}`);
           currentIndex += batchSize;

package/dist/Editor/common/Icon.js

@@ -1,19 +1,19 @@
 import React from "react";
 import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdAdd, MdArrowForward, MdOutlinePermMedia, MdFormatAlignJustify } from "react-icons/md";
-import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsCodeSlash } from "react-icons/bs";
+import { BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsCodeSlash } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { CiGrid32 } from "react-icons/ci";
-import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, AppHeader, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
+import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, AppHeader, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon } from "./iconListV2";
-import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
+import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon } from "./iconListV2";
+import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
 import SettingsIcon from "../assets/svg/SettingsIcon";
 import UndoIcon from "../assets/svg/UndoIcon";
 import RedoIcon from "../assets/svg/RedoIcon";
@@ -46,15 +46,12 @@ const iconList = {
   underline: /*#__PURE__*/_jsx(UnderlineTextFormatIcon, {
     size: 20
   }),
-  headingOne: /*#__PURE__*/_jsx(BsTypeH1, {
+  headingOne: /*#__PURE__*/_jsx(H1, {}),
+  headingTwo: /*#__PURE__*/_jsx(H2, {
     size: 18,
     fill: "#64748B"
   }),
-  headingTwo: /*#__PURE__*/_jsx(BsTypeH2, {
-    size: 18,
-    fill: "#64748B"
-  }),
-  headingThree: /*#__PURE__*/_jsx(BsTypeH3, {
+  headingThree: /*#__PURE__*/_jsx(H3, {
     size: 18,
     fill: "#64748B"
   }),
@@ -227,7 +224,7 @@ const iconList = {
       fill: "#64748B"
     }
   }),
-  calenderNewIcon: /*#__PURE__*/_jsx(CalendarIconNew, {}),
+  calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
   freegrid: /*#__PURE__*/_jsx(CiGrid32, {
     size: 20,
     style: {

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js

@@ -25,8 +25,22 @@ const Settings = props => {
     children: /*#__PURE__*/_jsx(Popper, {
       open: open,
       anchorEl: anchorEl,
-      placement: placement,
+      placement: "auto-start",
       sx: classes.root,
+      modifiers: [{
+        name: "flip",
+        enabled: true,
+        options: {
+          altBoundary: true,
+          rootBoundary: "viewport"
+        }
+      }, {
+        name: "preventOverflow",
+        enabled: true,
+        options: {
+          padding: 8
+        }
+      }],
       children: /*#__PURE__*/_jsxs(Paper, {
         className: "papper-root",
         children: [/*#__PURE__*/_jsxs(Typography, {

package/dist/Editor/common/iconListV2.js

@@ -1,24 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const ImageElementIcon = props => /*#__PURE__*/_jsxs("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
+  width: "14",
+  height: "14",
+  viewBox: "0 0 14 14",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   children: [/*#__PURE__*/_jsx("path", {
-    d: "M5.9987 14.6663H9.9987C13.332 14.6663 14.6654 13.333 14.6654 9.99967V5.99967C14.6654 2.66634 13.332 1.33301 9.9987 1.33301H5.9987C2.66536 1.33301 1.33203 2.66634 1.33203 5.99967V9.99967C1.33203 13.333 2.66536 14.6663 5.9987 14.6663Z",
-    stroke: "#0F172A",
+    d: "M5.2 13H8.8C11.8 13 13 11.8 13 8.8V5.2C13 2.2 11.8 1 8.8 1H5.2C2.2 1 1 2.2 1 5.2V8.8C1 11.8 2.2 13 5.2 13Z",
+    stroke: "#64748B",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M6.0013 6.66667C6.73768 6.66667 7.33464 6.06971 7.33464 5.33333C7.33464 4.59695 6.73768 4 6.0013 4C5.26492 4 4.66797 4.59695 4.66797 5.33333C4.66797 6.06971 5.26492 6.66667 6.0013 6.66667Z",
-    stroke: "#0F172A",
+    d: "M5.2 5.80039C5.86274 5.80039 6.4 5.26313 6.4 4.60039C6.4 3.93765 5.86274 3.40039 5.2 3.40039C4.53726 3.40039 4 3.93765 4 4.60039C4 5.26313 4.53726 5.80039 5.2 5.80039Z",
+    stroke: "#64748B",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M1.78125 12.633L5.06792 10.4264C5.59458 10.073 6.35458 10.113 6.82792 10.5197L7.04792 10.713C7.56792 11.1597 8.40792 11.1597 8.92792 10.713L11.7012 8.33305C12.2212 7.88638 13.0613 7.88638 13.5813 8.33305L14.6679 9.26638",
-    stroke: "#0F172A",
+    d: "M1.40186 11.1695L4.35986 9.18355C4.83386 8.86555 5.51786 8.90155 5.94386 9.26755L6.14185 9.44155C6.60985 9.84355 7.36586 9.84355 7.83386 9.44155L10.3299 7.29955C10.7979 6.89755 11.5539 6.89755 12.0219 7.29955L12.9999 8.13955",
+    stroke: "#64748B",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   })]
@@ -840,4 +840,71 @@ export const CloseIconImageUpload = () => {
       strokeLinejoin: "round"
     })]
   });
-};
+};
+export function H1() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "14",
+    height: "11",
+    viewBox: "0 0 14 11",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M0.884943 11V0.818182H3.03764V5.01918H7.40767V0.818182H9.5554V11H7.40767V6.79403H3.03764V11H0.884943ZM13.4482 5.18182V11H12.218V6.34943H12.1839L10.8516 7.18466V6.09375L12.2919 5.18182H13.4482Z",
+      fill: "#64748B"
+    })
+  });
+}
+export function H2() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "11",
+    viewBox: "0 0 16 11",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M0.884943 11V0.818182H3.03764V5.01918H7.40767V0.818182H9.5554V11H7.40767V6.79403H3.03764V11H0.884943ZM10.9169 11V10.1136L12.9879 8.19602C13.1641 8.02557 13.3118 7.87216 13.4311 7.7358C13.5523 7.59943 13.6442 7.46591 13.7067 7.33523C13.7692 7.20265 13.8004 7.05966 13.8004 6.90625C13.8004 6.7358 13.7616 6.58902 13.6839 6.46591C13.6063 6.34091 13.5002 6.24527 13.3658 6.17898C13.2313 6.1108 13.0788 6.0767 12.9084 6.0767C12.7304 6.0767 12.575 6.11269 12.4425 6.18466C12.3099 6.25663 12.2076 6.35985 12.1357 6.49432C12.0637 6.62879 12.0277 6.78883 12.0277 6.97443H10.8601C10.8601 6.59375 10.9463 6.26326 11.1186 5.98295C11.291 5.70265 11.5324 5.4858 11.843 5.33239C12.1536 5.17898 12.5116 5.10227 12.9169 5.10227C13.3336 5.10227 13.6963 5.17614 14.005 5.32386C14.3156 5.4697 14.5571 5.67235 14.7294 5.93182C14.9018 6.19129 14.9879 6.48864 14.9879 6.82386C14.9879 7.04356 14.9444 7.26042 14.8572 7.47443C14.772 7.68845 14.6196 7.92614 14.3999 8.1875C14.1802 8.44697 13.8705 8.75852 13.4709 9.12216L12.6214 9.95455V9.99432H15.0646V11H10.9169Z",
+      fill: "#64748B"
+    })
+  });
+}
+export function H3() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "16",
+    height: "12",
+    viewBox: "0 0 16 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M0.884943 11V0.818182H3.03764V5.01918H7.40767V0.818182H9.5554V11H7.40767V6.79403H3.03764V11H0.884943ZM13.0675 11.0795C12.6432 11.0795 12.2654 11.0066 11.9339 10.8608C11.6044 10.7131 11.344 10.5104 11.1527 10.2528C10.9633 9.99337 10.8658 9.69413 10.8601 9.35511H12.0987C12.1063 9.49716 12.1527 9.62216 12.2379 9.73011C12.325 9.83617 12.4406 9.91856 12.5845 9.97727C12.7285 10.036 12.8904 10.0653 13.0703 10.0653C13.2578 10.0653 13.4235 10.0322 13.5675 9.96591C13.7114 9.89962 13.8241 9.80777 13.9055 9.69034C13.987 9.57292 14.0277 9.4375 14.0277 9.28409C14.0277 9.12879 13.9841 8.99148 13.897 8.87216C13.8118 8.75095 13.6887 8.65625 13.5277 8.58807C13.3686 8.51989 13.1792 8.4858 12.9595 8.4858H12.4169V7.58239H12.9595C13.1451 7.58239 13.3089 7.55019 13.451 7.4858C13.5949 7.4214 13.7067 7.33239 13.7862 7.21875C13.8658 7.10322 13.9055 6.96875 13.9055 6.81534C13.9055 6.66951 13.8705 6.54167 13.8004 6.43182C13.7322 6.32008 13.6357 6.23295 13.5107 6.17045C13.3875 6.10795 13.2436 6.0767 13.0788 6.0767C12.9122 6.0767 12.7597 6.10701 12.6214 6.16761C12.4832 6.22633 12.3724 6.31061 12.2891 6.42045C12.2057 6.5303 12.1612 6.65909 12.1555 6.80682H10.9766C10.9822 6.47159 11.0779 6.17614 11.2635 5.92045C11.4491 5.66477 11.6991 5.46496 12.0135 5.32102C12.3298 5.17519 12.6868 5.10227 13.0845 5.10227C13.486 5.10227 13.8374 5.17519 14.1385 5.32102C14.4396 5.46686 14.6735 5.66383 14.8402 5.91193C15.0088 6.15814 15.0921 6.43466 15.0902 6.74148C15.0921 7.06723 14.9908 7.33902 14.7862 7.55682C14.5836 7.77462 14.3194 7.91288 13.9936 7.97159V8.01705C14.4216 8.07197 14.7474 8.22064 14.9709 8.46307C15.1963 8.7036 15.308 9.00473 15.3061 9.36648C15.308 9.69792 15.2124 9.99242 15.0192 10.25C14.8279 10.5076 14.5637 10.7102 14.2266 10.858C13.8894 11.0057 13.5031 11.0795 13.0675 11.0795Z",
+      fill: "#64748B"
+    })
+  });
+}
+export function CalendlyIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "12",
+    height: "14",
+    viewBox: "0 0 12 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("rect", {
+      x: "0.5",
+      y: "2.5",
+      width: "11",
+      height: "11",
+      rx: "1.5",
+      stroke: "#64748B"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M3 1L3 4",
+      stroke: "#64748B",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M9 1L9 4",
+      stroke: "#64748B",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M8.10369 7.0554H7.43892C7.41335 6.91335 7.36577 6.78835 7.29616 6.6804C7.22656 6.57244 7.14134 6.48082 7.04048 6.40554C6.93963 6.33026 6.8267 6.27344 6.7017 6.23509C6.57813 6.19673 6.44673 6.17756 6.30753 6.17756C6.05611 6.17756 5.83097 6.24077 5.6321 6.36719C5.43466 6.49361 5.27841 6.67898 5.16335 6.9233C5.04972 7.16761 4.9929 7.46591 4.9929 7.81818C4.9929 8.1733 5.04972 8.47301 5.16335 8.71733C5.27841 8.96165 5.43537 9.14631 5.63423 9.27131C5.8331 9.39631 6.05682 9.45881 6.3054 9.45881C6.44318 9.45881 6.57386 9.44034 6.69744 9.40341C6.82244 9.36506 6.93537 9.30895 7.03622 9.23509C7.13707 9.16122 7.2223 9.07102 7.2919 8.96449C7.36293 8.85653 7.41193 8.73295 7.43892 8.59375L8.10369 8.59588C8.06818 8.81037 7.99929 9.00781 7.89702 9.18821C7.79616 9.36719 7.66619 9.52202 7.5071 9.6527C7.34943 9.78196 7.16903 9.8821 6.96591 9.95312C6.76278 10.0241 6.54119 10.0597 6.30114 10.0597C5.9233 10.0597 5.58665 9.97017 5.29119 9.79119C4.99574 9.6108 4.76278 9.35298 4.59233 9.01776C4.4233 8.68253 4.33878 8.28267 4.33878 7.81818C4.33878 7.35227 4.42401 6.95241 4.59446 6.61861C4.76491 6.28338 4.99787 6.02628 5.29332 5.8473C5.58878 5.6669 5.92472 5.5767 6.30114 5.5767C6.53267 5.5767 6.74858 5.61009 6.94886 5.67685C7.15057 5.74219 7.33168 5.83878 7.49219 5.96662C7.6527 6.09304 7.78551 6.24787 7.89062 6.43111C7.99574 6.61293 8.06676 6.82102 8.10369 7.0554Z",
+      fill: "#64748B"
+    })]
+  });
+}

package/dist/Editor/commonStyle.js

@@ -50,9 +50,9 @@ const useCommonStyle = theme => ({
         overflow: "auto",
         maxHeight: "105px",
         "& .default-color-panel_item": {
-          height: '20px',
-          width: '20px',
-          border: '1px solid #E2E8F0'
+          height: "20px",
+          width: "20px",
+          border: "1px solid #E2E8F0"
         }
       }
     },
@@ -109,6 +109,11 @@ const useCommonStyle = theme => ({
     "& .MuiPopover-root": {
       backgroundColor: theme?.palette?.editor?.background
     }
+  },
+  datePicker: {
+    "& .react-datepicker-wrapper": {
+      width: "100%"
+    }
   }
 });
 export default useCommonStyle;

package/dist/Editor/utils/helper.js

@@ -446,4 +446,28 @@ export const isFreeGridFragment = fragments => {
   } else {
     return false;
   }
+};
+export const editorThemeStyle = {
+  light: {
+    editor: {
+      textColor: "#000000",
+      background: "#FFFFFF",
+      svgStroke: "#64748B",
+      borderColor: "#D8DDE1",
+      activeColor: "#2563EB",
+      svgStrokeDisabled: "#64748B4D"
+    }
+  },
+  dark: {
+    editor: {
+      textColor: "#FFFFFF",
+      background: "#141720",
+      svgStroke: "#64748B",
+      borderColor: "#64748B",
+      activeColor: "#2563EB"
+    }
+  }
+};
+export const getEditorTheme = (themeType = "light") => {
+  return editorThemeStyle[themeType] || {};
 };

package/package.json

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