@flozy/editor 4.0.0 → 4.0.2

package/dist/Editor/ChatEditor.js

@@ -110,12 +110,12 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }));
-  useEffect(() => {
-    setIsExternalUpdate(true);
-    setValue(draftToSlate({
-      data: content
-    }));
-  }, [content]);
+
+  // useEffect(() => {
+  //     setIsExternalUpdate(true);
+  //     setValue(draftToSlate({ data: content }));
+  // }, [content]);
+
   useEffect(() => {
     if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
       const {
@@ -178,14 +178,9 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
-    if (isExternalUpdate) {
-      setIsExternalUpdate(false);
-      return;
-    } else {
-      setValue(newValue);
-      if (!isInteracted) {
-        setIsInteracted(true);
-      }
+    setValue(newValue);
+    if (!isInteracted) {
+      setIsInteracted(true);
     }
   };
   const Element = props => {

package/dist/Editor/CommonEditor.js

@@ -406,13 +406,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   }, [pageBgImage, pageColor]);
   const themeProps = getTheme(selectedTheme);
   const handleCursorScroll = container => {
-    const cursorPosition = window.getSelection()?.getRangeAt(0).getBoundingClientRect();
-    const containerBottom = container.getBoundingClientRect().bottom;
-    if (cursorPosition?.bottom > containerBottom - 250) {
-      container.scrollBy({
-        top: 200,
-        behavior: 'smooth'
-      });
+    try {
+      const cursorPosition = window.getSelection()?.getRangeAt(0).getBoundingClientRect();
+      const containerBottom = container.getBoundingClientRect().bottom;
+      if (cursorPosition?.bottom > containerBottom - 250) {
+        container.scrollBy({
+          top: 200,
+          behavior: "smooth"
+        });
+      }
+    } catch (err) {
+      console.log(err);
     }
   };
   return /*#__PURE__*/_jsx(ThemeContext.Provider, {

package/dist/Editor/Editor.css

@@ -274,7 +274,7 @@ blockquote {
   margin: 12px 0px;
   padding: 0px 5px;
   border: 0px solid #ccc;
-  min-height: 100px;
+  min-height: 211px;
 }
 
 .signature-signed-wrapper {
@@ -338,7 +338,7 @@ blockquote {
 .signature-canvas {
   height: 100%;
   width: 100%;
-  border: 1px solid #0052cc;
+  border: 1px solid #2563EB;
   border-radius: 12px;
 }
 
@@ -371,6 +371,7 @@ blockquote {
 
 .dialog-actions-si .MuiButtonBase-root {
   opacity: 1;
+  padding: 6px 5px 0px 3px !important
 }
 
 .signature-tab {
@@ -381,6 +382,19 @@ blockquote {
   width: 100%;
 }
 
+.signature-tab2 {
+  /* display: flex; */
+  align-items: center;
+  border-width: 0px, 0px, 0px, 0px;
+  border-style: solid;
+  border-color: #2563EB;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  border-radius: 7px;
+  padding: 10px;
+}
+
 .upload-sign-img-wrapper {
   text-align: center;
 }
@@ -446,6 +460,10 @@ blockquote {
   color: #ffffff !important;
   border: 1px solid #2563eb !important;
   width: auto !important;
+  padding: 2px 0px 0px 0px !important;
+  min-width: 89px !important;
+  font-family: Inter, sans-serif;
+  text-transform: none;
 }
 
 .MuiButton-root.primaryBtn.disabled,
@@ -466,6 +484,10 @@ blockquote {
   margin-right: 15px !important;
   color: #2563eb;
   width: auto !important;
+  padding: 2px 0px 0px 0px !important;
+  min-width: 89px !important;
+  font-family: Inter, sans-serif;
+  text-transform: none;
 }
 
 .deleteBtn {
@@ -836,6 +858,17 @@ blockquote {
   text-align: center;
 }
 
+.removeScroll::-webkit-outer-spin-button,
+.removeScroll::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* For Firefox */
+.removeScroll {
+    -moz-appearance: textfield;
+}
+
 .borderInput:focus-visible {
   outline: none !important;
 }
@@ -885,7 +918,7 @@ blockquote {
 }
 
 .sliderInput {
-  width: 66px;
+  width: 30px;
   padding: 2px 10px;
   margin-left: 18px;
   box-shadow: 0px 4px 16px 0px #0000000d;

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

@@ -4,7 +4,7 @@ import Icon from "../../common/Icon";
 // import { TbRotateClockwise } from "react-icons/tb";
 // import { FaRegCircleCheck } from "react-icons/fa6";
 import { IoSend } from "react-icons/io5";
-import React, { forwardRef, useEffect, useRef } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import WaveLoading from "../../common/WaveLoading";
 import CustomSelect from "./CustomSelect";
 import { editContentOptions, newContentOptions, generatedContentOptions } from "./helper";
@@ -50,6 +50,7 @@ function AIInput({
   const classes = Styles(theme);
   const inputRef = useRef();
   const inputWrapperRef = useRef();
+  const [contentHeight, setContentHeight] = useState("100px");
   const refs = useClickOutside({
     onClickOutside,
     omitIds: ["infinity-select-popover"],
@@ -76,23 +77,26 @@ function AIInput({
     }
     onSend("", {});
   };
+  useEffect(() => {
+    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;
+      setContentHeight(height + "px");
+    }
+  }, [refs, generatedText]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
       component: "div",
       sx: classes.aiContainer,
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
         sx: classes.generatedText,
-        children: /*#__PURE__*/_jsx("pre", {
-          style: {
-            whiteSpace: "pre-wrap",
-            wordWrap: "break-word",
-            fontFamily: "inherit",
-            margin: 0
-          },
-          dangerouslySetInnerHTML: {
-            __html: generatedText
-          }
-        })
+        style: {
+          maxHeight: contentHeight
+        },
+        dangerouslySetInnerHTML: {
+          __html: generatedText
+        }
       }) : null, /*#__PURE__*/_jsxs(Box, {
         component: "form",
         sx: classes.aiInputWrapper,

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

@@ -21,12 +21,13 @@ const scrollToAIInput = editor => {
       } else {
         selectionRect = ReactEditor.toDOMRange(editor, getNextLine(editor).at).getBoundingClientRect();
       }
-      const halfOfWrapper = slateWrapper.clientHeight / 2;
-      const selectionScollTop = selectionRect.y + selectionRect.height;
-      if (selectionScollTop > halfOfWrapper) {
-        // scroll to half of the slateWrapper
+      const selectionScrollBottom = selectionRect.bottom;
+
+      // if the cursor or selection top position is greater than 80
+      if (selectionScrollBottom > 80) {
+        // scroll to top of the slateWrapper
         slateWrapper.scrollTo({
-          top: slateWrapper.scrollTop + selectionScollTop - halfOfWrapper,
+          top: slateWrapper.scrollTop + selectionScrollBottom - 80,
           behavior: "smooth"
         });
       }
@@ -149,7 +150,6 @@ function PopoverAIInput({
   const [generatedText, setGeneratedText] = useState("");
   const [inputValue, setInputValue] = useState("");
   const [selectedOption, setSelectedOption] = useState();
-  const targetRef = useRef();
   const classes = Styles();
   const editor = useSlate();
   const onClickOutside = () => {
@@ -259,7 +259,6 @@ function PopoverAIInput({
         ...classes.aiPopper,
         width: editorElement?.offsetWidth || 400
       },
-      ref: targetRef,
       children: ({
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {
@@ -287,7 +286,7 @@ function PopoverAIInput({
       })
     }), openAI ? /*#__PURE__*/_jsx("div", {
       style: {
-        height: targetRef?.current?.clientHeight > 250 ? targetRef?.current?.clientHeight : 250,
+        height: "100vh",
         background: "transparent"
       }
     }) : null]

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

@@ -91,7 +91,6 @@ const Styles = theme => ({
   },
   generatedText: {
     margin: "8px",
-    maxHeight: "100px",
     overflow: "auto",
     fontSize: "inherit"
   },

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -1,4 +1,6 @@
 import React from "react";
+import { Box } from "@mui/material";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
@@ -9,18 +11,27 @@ const AccordionSummary = props => {
   const {
     textColor,
     bgColor,
-    borderColor
+    borderColor,
+    borderRadius,
+    bannerSpacing
   } = element;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Box, {
     className: `accordion-summary-container`,
     ...attributes,
-    style: {
+    sx: {
       width: "100%",
       position: "relative",
       backgroundColor: bgColor,
       border: `1px solid ${borderColor}`,
-      color: textColor
+      color: textColor,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
+      padding: {
+        ...getTRBLBreakPoints(bannerSpacing)
+      }
     },
+    component: "div",
     children: children
   });
 };

package/dist/Editor/Elements/Carousel/CarouselButton.js

@@ -2,6 +2,7 @@ import React from "react";
 import { insertCarousel } from "../../utils/carousel";
 import { Carousal } from "../../common/iconslist";
 import ToolbarIcon from "../../common/ToolbarIcon";
+import { CarouselElementIcon } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselButton = props => {
   const {
@@ -14,7 +15,7 @@ const CarouselButton = props => {
   return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "Carousel",
     onClick: handleClick,
-    icon: /*#__PURE__*/_jsx(Carousal, {}),
+    icon: /*#__PURE__*/_jsx(CarouselElementIcon, {}),
     icoBtnType: icoBtnType
   });
 };

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

@@ -35,7 +35,9 @@ const SingleColorButton = ({
     style: {
       width: "100%",
       display: "flex",
-      padding: padding || "8px"
+      alignItems: "center",
+      padding: padding || "8px 0px",
+      justifyContent: "center"
     },
     children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
       onClick: handleSelect(m),

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

@@ -13,6 +13,7 @@ const ColorPickerStyles = theme => ({
     }
   },
   colorPopper: {
+    marginTop: "20px",
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
       padding: "4px 14px",

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
+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 { jsx as _jsx } from "react/jsx-runtime";
@@ -20,6 +20,9 @@ const LinkPopup = props => {
     open: open,
     className: `dialogComp`,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
+      sx: {
+        padding: "13px 19px 9px 19px"
+      },
       children: /*#__PURE__*/_jsxs("div", {
         style: {
           display: "flex",
@@ -28,8 +31,10 @@ const LinkPopup = props => {
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "h6",
           className: "popupTitle",
-          color: "primary",
-          children: "LINK"
+          sx: {
+            textTransform: "none"
+          },
+          children: "Link"
         }), /*#__PURE__*/_jsx("div", {
           style: {
             display: "flex"
@@ -41,38 +46,84 @@ const LinkPopup = props => {
           })
         })]
       })
+    }), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        width: "auto",
+        // Or set a fixed width like "90%"
+        margin: "0px 20px" // Horizontal margin
+      }
     }), /*#__PURE__*/_jsxs(DialogContent, {
-      children: [/*#__PURE__*/_jsx(Grid, {
+      sx: {
+        padding: "5px 19px 0px 19px"
+      },
+      children: [/*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
         style: {
           paddingTop: "12px"
         },
-        className: classes.titleTypo,
-        children: /*#__PURE__*/_jsx(TextField, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontFamily: 'Inter, sans-serif',
+            fontSize: "14px",
+            marginBottom: "6px"
+          },
+          children: "Title"
+        }), /*#__PURE__*/_jsx(TextField, {
           size: "small",
           fullWidth: true,
           value: linkData?.name,
           name: "name",
           placeholder: "Link Title",
           onChange: handleInputChange,
-          sx: classes.addLinkField
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
+          sx: {
+            '& .MuiOutlinedInput-root': {
+              borderRadius: '8px'
+            },
+            '& .MuiInputBase-input': {
+              color: themeType === "dark" ? "#FFFFFF" : '#000'
+            },
+            '& .MuiInputBase-input::placeholder': {
+              color: '#94A3B8',
+              fontFamily: '"Inter", sans-serif'
+            }
+          }
+          // sx={classes.addLinkField}
+        })]
+      }), /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
         style: {
           paddingTop: "12px"
         },
-        children: /*#__PURE__*/_jsx(TextField, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontFamily: 'Inter, sans-serif',
+            fontSize: "14px",
+            marginBottom: "6px"
+          },
+          children: "URL"
+        }), /*#__PURE__*/_jsx(TextField, {
           size: "small",
           fullWidth: true,
           name: "url",
           value: linkData?.url,
           placeholder: "https://google.com",
           onChange: handleInputChange,
-          sx: classes.addLinkField
-        })
+          sx: {
+            '& .MuiOutlinedInput-root': {
+              borderRadius: '8px'
+            },
+            '& .MuiInputBase-input': {
+              color: themeType === "dark" ? "#FFFFFF" : '#000'
+            },
+            '& .MuiInputBase-input::placeholder': {
+              color: '#94A3B8',
+              fontFamily: '"Inter", sans-serif'
+            }
+          }
+          // sx={classes.addLinkField}
+        })]
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -88,9 +139,10 @@ const LinkPopup = props => {
             }),
             label: /*#__PURE__*/_jsx(Typography, {
               variant: "body1",
-              color: "primary",
               sx: {
-                pl: 1
+                paddingLeft: "0px",
+                fontSize: "14px",
+                fontFamily: '"Inter", sans-serif'
               },
               children: "Open in new tab"
             })

package/dist/Editor/Elements/NewLine/NewLineButton.js

@@ -3,6 +3,7 @@ import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import ToolbarIcon from "../../common/ToolbarIcon";
+import { NewLineElementIcon } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NewLineButton = ({
   icoBtnType
@@ -23,7 +24,7 @@ const NewLineButton = ({
   return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "New Line",
     onClick: onAddNewLine,
-    icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
+    icon: /*#__PURE__*/_jsx(NewLineElementIcon, {
       sx: {
         fill: "#64748B",
         width: "18px",

package/dist/Editor/Elements/Signature/Signature.css

@@ -1,6 +1,6 @@
 .af-signature-popup .MuiTab-root {
     background: #ffffff;
-    border: 1px solid #d3d3d3 !important;
+    border: 1px solid #D3D3D3 !important;
     border-radius: 7px;
     height: 37px;
     min-height: 37px;
@@ -15,10 +15,10 @@
   }
   .af-signature-popup .MuiTab-root.Mui-selected {
     background: #ffffff;
-    border: 1px solid #2563eb !important;
+    border: 1.5px solid #2563EB !important;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
     border-radius: 7px;
-    color: #0f172a !important;
+    color: #000000 !important;
   }
   .af-signature-popup .MuiTabs-indicator {
     display: none;
@@ -60,16 +60,23 @@
     cursor: pointer;
 }
   .upload-wrapper-ui {
-    border: 1px solid #2563eb !important;
-    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important;
+    border: 1px dashed #92B1F5 !important;
+    /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important; */
     border-radius: 7px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     width: 100%;
-    height: 100px;
+    height: 187px;
     top: 0px;
     left: 0px;
     cursor: pointer;
+    background-color: #F8F9FF;
+  }
+
+  .upload-wrapper-ui-text {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    font-family: 'Wavehaus';
   }

package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js

@@ -28,7 +28,7 @@ const UploadSignature = props => {
     });
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: "signature-tab",
+    className: "signature-tab2",
     children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsx("div", {
       className: "upload-sign-img-wrapper",
       children: /*#__PURE__*/_jsx("img", {
@@ -48,6 +48,7 @@ const UploadSignature = props => {
           justifyContent: "center",
           alignItems: "center",
           children: [/*#__PURE__*/_jsx(CloudUpload, {}), /*#__PURE__*/_jsx(Typography, {
+            className: "upload-wrapper-ui-text",
             variant: "h6",
             color: "textSecondary",
             sx: {