@flozy/editor 5.3.3 → 5.3.5

package/dist/Editor/Editor.css

@@ -31,7 +31,7 @@ blockquote {
   border-left: 3px solid transparent;
   margin-left: 0;
   margin-right: 0;
-  padding-left: 10px;
+  /* padding-left: 10px; */
   margin: 0px;
 }
 
@@ -225,9 +225,13 @@ blockquote {
   background-color: #0052cc;
   padding: 8px 12px;
   color: #ffffff;
-  font-weight: bold;
+  font-weight: 600;
+  font-size: 14px;
   opacity: 1;
   border-radius: 32px;
+  text-transform: math-auto;
+  height: 36px;
+  padding: 0px 12px;
 }
 
 .signature-btn-container button:hover {
@@ -358,6 +362,10 @@ blockquote {
   stroke: #2563eb;
 }
 
+.brushIcon:hover {
+  background: unset;
+}
+
 .react-datepicker__input-container {
   display: flex !important;
   align-items: center;
@@ -491,6 +499,14 @@ blockquote {
   text-transform: none;
 }
 
+.MuiButton-root.primaryBtn:disabled {
+  background: #eee !important;
+  box-shadow: none !important;
+  color: #ccc !important;
+  border: 1px solid #ccc !important;
+  cursor: not-allowed;
+}
+
 .MuiButton-root.primaryBtn.disabled,
 .MuiButton-root.secondaryBtn.disabled {
   background: #eee;
@@ -516,7 +532,7 @@ blockquote {
 }
 
 .deleteBtn {
-  background: #ffffff;
+  background: #d32f2f ;
   border: 1px solid #d32f2f !important;
   box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
   border-radius: 8px !important;
@@ -526,6 +542,7 @@ blockquote {
   margin-right: 15px !important;
   color: #d32f2f;
   width: auto !important;
+  text-transform: capitalize !important;
 }
 
 @media (max-width: 480px) {
@@ -663,7 +680,8 @@ blockquote {
 }
 
 .resize-br.img-resizer {
-  bottom: 8px;
+  bottom: 10px;
+  right: 5px;
 }
 
 .visible-on-hover {
@@ -1023,11 +1041,11 @@ blockquote {
   width: 200px;
   cursor: pointer;
   color: #464646;
-  background-color: #fff;
+  /* background-color: #fff; */
   padding: 4px 6px;
   border-radius: 12px;
   span {
-    text-transform: capitalize;
+    text-transform: math-auto;
   }
   @media only screen and (max-width: 599px) {
   background-color: unset;
@@ -1049,7 +1067,7 @@ blockquote {
 }
 
 .textFontArrows .MuiIconButton-root {
-  padding: 2px;
+  padding: 0px;
 }
 
 .tools-drawer .MuiTypography-root {
@@ -1297,3 +1315,8 @@ blockquote {
   background: rgba(35, 131, 226, 0.35) !important;
   color: inherit;
 }
+
+.gradientFillBtn {
+  background: linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important;
+  text-transform: math-auto !important;
+}

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

@@ -6,7 +6,8 @@ import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const accordionBtnStyleKeys = {
@@ -78,6 +79,10 @@ const Accordion = props => {
     textColor,
     bgColor
   } = element;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const onToggle = () => {
     setToggle(!toggle);
   };
@@ -97,6 +102,7 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
+          sx: classes.buttonMoreOption,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -105,6 +111,7 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onDelete,
+          sx: classes.buttonMoreOption2,
           children: /*#__PURE__*/_jsx(DeleteIcon, {})
         })
       })]

package/dist/Editor/Elements/Button/EditorButton.js

@@ -162,7 +162,8 @@ const EditorButton = props => {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
                 marginBottom: "0px !important",
-                ...classes.buttonMoreOption
+                ...classes.buttonMoreOption,
+                ...classes.buttonMoreOption3
               },
               ...btnProps,
               children: /*#__PURE__*/_jsx(Icon, {

package/dist/Editor/Elements/Divider/Divider.js

@@ -5,6 +5,7 @@ import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import DividerPopup from "./DividerPopup";
 import { Transforms } from "slate";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
@@ -17,6 +18,7 @@ const Divider = props => {
   const {
     theme
   } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const {
     borderColor = theme?.palette?.primary?.main || "#0F172A",
     borderWidth = "1px",
@@ -43,11 +45,16 @@ const Divider = props => {
     showTool,
     onSettings
   }) => {
-    const hoverStyles = readOnly ? {
-      "&.MuiIconButton-root:hover": {
-        background: theme?.palette?.type === "dark" ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
-      }
-    } : {};
+    // const hoverStyles = readOnly
+    //   ? {
+    //       "&.MuiIconButton-root:hover": {
+    //         background:
+    //           theme?.palette?.type === "dark"
+    //             ? `${theme?.palette?.greyshades?.light8} !important`
+    //             : `${theme?.palette?.containers?.card} !important`,
+    //       },
+    //     }
+    //   : {};
     return /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "divider-settings",
@@ -61,14 +68,22 @@ const Divider = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           sx: {
-            background: theme?.palette?.type === "dark" ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
-            border: theme?.palette?.type === "dark" ? "1px solid #E4E8EB33" : "none",
+            // background:
+            //   theme?.palette?.type === "dark"
+            //     ? theme?.palette?.greyshades?.light8
+            //     : theme?.palette?.containers?.card,
+            // border:
+            //   theme?.palette?.type === "dark"
+            //     ? "1px solid #E4E8EB33"
+            //     : "none",
             boxShadow: "0px 0px 4px 0px #00000040",
             borderRadius: "50%",
             "& svg": {
-              stroke: theme?.palette?.text?.secondary3
+              width: '16px',
+              height: '16px'
             },
-            ...hoverStyles
+            // ...hoverStyles,
+            ...classes.buttonMoreOption
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})

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

@@ -14,28 +14,33 @@ import ImageFrame from "./Frames/ImageFrame";
 import LinkSettings from "../../common/LinkSettings";
 import { handleLinkType } from "../../utils/helper";
 import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
+import useCommonStyle from "../../commonStyle";
+import SettingsIcon from "../../assets/svg/SettingsIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ToolBar = ({
   isEmpty,
   onSettings,
   setOpenNav,
-  topM
+  topM,
+  classes
 }) => {
   return !isEmpty ? /*#__PURE__*/_jsxs("div", {
     className: "element-toolbar visible-on-hover",
     contentEditable: false,
     style: {
-      top: "-5px",
+      top: "-4px",
       left: topM ? "35px" : "0px",
-      margin: "0px"
+      margin: "0px",
+      gap: '3px'
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Image Settings",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
         onClick: onSettings,
-        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+        sx: classes.buttonMoreOption,
+        children: /*#__PURE__*/_jsx(SettingsIcon, {})
       })
     }), /*#__PURE__*/_jsx(Tooltip, {
       title: "Link Settings",
@@ -43,6 +48,7 @@ const ToolBar = ({
       children: /*#__PURE__*/_jsx(IconButton, {
         className: "last-btn",
         onClick: () => setOpenNav(true),
+        sx: classes.buttonMoreOption,
         children: /*#__PURE__*/_jsx(LinkIcon, {})
       })
     })]
@@ -64,7 +70,8 @@ const ImageContent = props => {
     handleImageClick,
     onTouchEnd,
     path,
-    theme
+    theme,
+    classes
   } = props;
   return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
@@ -73,6 +80,9 @@ const ImageContent = props => {
     onClick: () => {
       setOpenSettings(true);
     },
+    sx: {
+      ...classes.emptyThumbBtn
+    },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "image"
     }), "Add Image"]
@@ -183,6 +193,10 @@ const Image = props => {
     onClick,
     onTouchEnd
   } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const classes = useCommonStyle(appTheme);
   const handleImageClick = () => {
     try {
       Transforms.select(editor, {
@@ -293,7 +307,8 @@ const Image = props => {
         isEmpty: isEmpty,
         onSettings: onSettings,
         setOpenNav: setOpenNav,
-        topM: size.width < 100
+        topM: size.width < 100,
+        classes: classes
       }), /*#__PURE__*/_jsx(ImageContent, {
         ...element,
         readOnly: readOnly,
@@ -301,7 +316,8 @@ const Image = props => {
         handleImageClick: handleImageClick,
         onTouchEnd: onTouchEnd,
         path: path,
-        theme: theme
+        theme: theme,
+        classes: classes
       }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",
@@ -317,11 +333,14 @@ const Image = props => {
           handleImageClick: handleImageClick
         })
       }) : null, selected && !readOnly && url && /*#__PURE__*/_jsx(IconButton, {
-        onPointerDown: onMouseDown,
-        style: {
-          opacity: 1,
-          background: "#FFF"
-        },
+        onPointerDown: onMouseDown
+        // style={{
+        //   opacity: 1,
+        //   // background: "#FFF",
+        //   // ...classes.resizeButton
+        // }}
+        ,
+        sx: classes.resizeButton,
         className: "resize-br visible-on-hover img-resizer",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]

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

@@ -11,6 +11,8 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
 import { getEmbedURL } from "../../helper";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VideoContent = props => {
@@ -68,12 +70,16 @@ const VideoPlaceholder = props => {
   const {
     url,
     readOnly,
-    onSettings
+    onSettings,
+    classes
   } = props;
   return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
     onClick: onSettings,
+    sx: {
+      ...classes.emptyThumbBtn
+    },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "video"
     }), "Embed Video or Other"]
@@ -121,6 +127,10 @@ const Video = ({
   } = alignment || {};
   const path = ReactEditor.findPath(editor, element);
   const hasAspect = url && aspectRatio !== "custom" && aspectRatio;
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const classes = useCommonStyle(appTheme);
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -267,7 +277,8 @@ const Video = ({
         videoSX: videoSX,
         url: url,
         readOnly: readOnly,
-        resizing: resizing
+        resizing: resizing,
+        classes: classes
       }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {

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

@@ -61,6 +61,7 @@ const GridItemToolbar = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
+          sx: classes.groupIcons,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -69,6 +70,7 @@ const GridItemToolbar = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onAddColumn,
+          sx: classes.groupIcons2,
           children: /*#__PURE__*/_jsx(AddIcon, {})
         })
       })]

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

@@ -112,6 +112,50 @@ const GridStyles = (theme, appTheme) => ({
       background: appTheme?.palette?.editor?.background,
       color: appTheme?.palette?.editor?.textColor
     }
+  },
+  groupIcons: {
+    background: appTheme?.palette?.editor?.aiInputBackground,
+    border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '5px !important',
+    borderRadius: '50% !important',
+    '& svg': {
+      width: '18px',
+      height: '18px',
+      '& path': {
+        stroke: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    },
+    '&:hover': {
+      background: `${appTheme?.palette?.editor?.aiInputBackground} !important`,
+      border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
+      '& svg': {
+        '& path': {
+          stroke: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    }
+  },
+  groupIcons2: {
+    background: appTheme?.palette?.editor?.aiInputBackground,
+    border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '5px !important',
+    borderRadius: '50% !important',
+    '& svg': {
+      width: '18px',
+      height: '18px',
+      '& path': {
+        fill: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    },
+    '&:hover': {
+      background: `${appTheme?.palette?.editor?.aiInputBackground} !important`,
+      border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
+      '& svg': {
+        '& path': {
+          fill: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    }
   }
 });
 export default GridStyles;

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

@@ -26,6 +26,7 @@ const PageSettingsButton = props => {
       element: element?.pageProps || {},
       path
     });
+    console.log("OPen setting :".openSetttings, path, element?.pageProps);
   };
   const onSave = data => {
     try {

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

@@ -147,7 +147,7 @@ const SignaturePopup = props => {
         style: {
           width: "fit-content"
         },
-        children: "Sign Here"
+        children: "Sign here"
       })]
     }), /*#__PURE__*/_jsx(Dialog, {
       className: `${className} dialogComp`,
@@ -294,7 +294,7 @@ const SignaturePopup = props => {
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "46px"
+                    minWidth: "49px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedBy",
@@ -420,7 +420,7 @@ const SignaturePopup = props => {
                 xs: 12,
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "46px"
+                    minWidth: "49px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
@@ -492,7 +492,7 @@ const SignaturePopup = props => {
                     return /*#__PURE__*/_jsx(IconButton, {
                       onClick: onBrushSize(m),
                       disableRipple: true,
-                      className: brush.size === m ? "activeBrush" : "",
+                      className: `${brush.size === m ? "activeBrush" : ""} brushIcon`,
                       children: /*#__PURE__*/_jsx("span", {
                         style: {
                           width: 17 + m,

package/dist/Editor/MiniEditor.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState, useEffect } from "react";
-import { createEditor } from "slate";
+import { createEditor, Range } from "slate";
 import { Slate, Editable } from "slate-react";
 import { useDebounce } from "use-debounce";
 import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
@@ -115,6 +115,20 @@ const MiniEditor = props => {
         event,
         editor
       });
+    } else if (event.key === "Backspace") {
+      const {
+        selection
+      } = editor;
+      event.preventDefault();
+      if (selection) {
+        if (!Range.isCollapsed(selection)) {
+          editor.deleteFragment();
+        } else {
+          editor.deleteBackward({
+            unit: "character"
+          });
+        }
+      }
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const renderElement = useCallback(props => {

package/dist/Editor/Styles/EditorStyles.js

@@ -129,7 +129,8 @@ const editorStyles = ({
       }
     },
     "& .accordion-summary-collapse-btn": {
-      padding: "4px"
+      padding: "4px",
+      width: '5px'
     },
     "& .workflow-icon-btn": {
       pointerEvents: "none",
@@ -238,6 +239,7 @@ const editorStyles = ({
       }
     },
     "& .section-tw": {
+      background: 'transparent !important',
       "& button": {
         padding: "2px",
         borderRadius: "0px",

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

@@ -42,7 +42,9 @@ const FontFamilyAutocomplete = ({
     },
     value: value || options?.[0],
     className: "editor-dd",
-    sx: classes.autoCompleteaFontFamily,
+    sx: {
+      ...classes.autoCompleteaFontFamily
+    },
     onChange: (e, newValue) => changeMarkData(e, newValue, format),
     getOptionLabel: option => {
       return option;
@@ -58,6 +60,13 @@ const FontFamilyAutocomplete = ({
         children: option
       });
     },
+    slotProps: {
+      popper: {
+        sx: {
+          ...classes.fontFamilyListOptions
+        }
+      }
+    },
     popupIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     renderInput: params => /*#__PURE__*/_jsx(TextField, {
       sx: {
@@ -67,6 +76,13 @@ const FontFamilyAutocomplete = ({
       },
       ...params
     })
+    // componentsProps={{
+    //     clearIndicator: {
+    //       style: { display: 'none' },
+    //     },
+    //   }}
+    ,
+    disableClearable: true
   });
 };
 export default FontFamilyAutocomplete;

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

@@ -2,10 +2,12 @@ import React, { useEffect, useRef, useState } from "react";
 import { TextField, IconButton } from "@mui/material";
 import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
 import { headingMap, sizeMap } from "../../utils/font.js";
-import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
+import ExpandLessRoundedIcon from "@mui/icons-material/ExpandLessRounded";
+import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
 import { getBreakPointsValue } from "../../helper/theme.js";
 import useWindowResize from "../../hooks/useWindowResize.js";
 import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
+import { TextSizeDownArrow, TextSizeUpArrow } from "../../common/iconListV2.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -106,11 +108,11 @@ const TextSize = ({
           children: [/*#__PURE__*/_jsx(IconButton, {
             onClick: onIncreaseSize,
             size: "small",
-            children: /*#__PURE__*/_jsx(TextPlusIcon, {})
+            children: /*#__PURE__*/_jsx(TextSizeUpArrow, {})
           }), /*#__PURE__*/_jsx(IconButton, {
             onClick: onDecreaseSize,
             size: "small",
-            children: /*#__PURE__*/_jsx(TextMinusIcon, {})
+            children: /*#__PURE__*/_jsx(TextSizeDownArrow, {})
           })]
         })
       }