@flozy/editor 5.3.8 → 5.4.0

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,10 +18,11 @@ const Divider = props => {
   const {
     theme
   } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const {
-    borderColor = theme?.palette?.primary?.main || '#0F172A',
-    borderWidth = '1px',
-    borderStyle = 'solid'
+    borderColor = theme?.palette?.primary?.main || "#0F172A",
+    borderWidth = "1px",
+    borderStyle = "solid"
   } = element;
   const {
     readOnly
@@ -33,7 +35,7 @@ const Divider = props => {
   } = useEditorContext();
   const [showTool] = useEditorSelection(editor);
   const selected = hoverPath === path.join(",");
-  const width = borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`;
+  const width = borderWidth?.includes("px") ? borderWidth : `${borderWidth}px`;
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -43,16 +45,21 @@ 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",
       style: {
-        top: "-20px",
+        top: "-33px",
         left: 0
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -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',
-            boxShadow: '0px 0px 4px 0px #00000040',
-            borderRadius: '50%',
-            '& svg': {
-              stroke: theme?.palette?.text?.secondary3
+            // 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": {
+              width: '16px',
+              height: '16px'
             },
-            ...hoverStyles
+            // ...hoverStyles,
+            ...classes.buttonMoreOption
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
@@ -103,14 +118,15 @@ const Divider = props => {
     className: `dividerComponent`,
     style: {
       userSelect: "none",
-      position: 'relative'
+      position: "relative"
     },
     contentEditable: false,
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-root element-selector`,
       contentEditable: false,
       style: {
-        zIndex: 1000
+        zIndex: 1000,
+        left: "0%"
       },
       children: /*#__PURE__*/_jsx(DividerToolbar, {
         selected: selected,
@@ -126,7 +142,7 @@ const Divider = props => {
         borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
         backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
         height: borderColor?.includes("linear") ? borderWidth : undefined,
-        marginTop: '15px'
+        marginTop: "15px"
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {

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
+  setOpenNav,
+  topM,
+  classes
 }) => {
   return !isEmpty ? /*#__PURE__*/_jsxs("div", {
     className: "element-toolbar visible-on-hover",
     contentEditable: false,
     style: {
-      top: "0px",
-      right: "0px",
-      left: "auto",
-      margin: "0px"
+      top: "-4px",
+      left: topM ? "35px" : "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,18 +70,34 @@ const ImageContent = props => {
     handleImageClick,
     onTouchEnd,
     path,
-    theme
+    theme,
+    classes
   } = props;
-  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+  return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
     contentEditable: false,
     onClick: () => {
       setOpenSettings(true);
     },
+    sx: {
+      ...classes.emptyThumbBtn
+    },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "image"
     }), "Add Image"]
+  }) : /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      color: "#64748B !important",
+      "& svg": {
+        color: "#64748B"
+      }
+    },
+    component: "button",
+    className: "element-empty-btn",
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "shieldNoAccess"
+    }), "The Content is no longer available."]
   }) : /*#__PURE__*/_jsx(Box, {
     component: "img",
     className: "emb-img",
@@ -155,7 +177,10 @@ const Image = props => {
       }, {
         at: path
       });
-    }
+    },
+    MW: 32,
+    MH: 32,
+    MP: 2
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
@@ -168,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, {
@@ -277,7 +306,9 @@ const Image = props => {
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {
         isEmpty: isEmpty,
         onSettings: onSettings,
-        setOpenNav: setOpenNav
+        setOpenNav: setOpenNav,
+        topM: size.width < 100,
+        classes: classes
       }), /*#__PURE__*/_jsx(ImageContent, {
         ...element,
         readOnly: readOnly,
@@ -285,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",
@@ -301,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,15 +70,31 @@ const VideoPlaceholder = props => {
   const {
     url,
     readOnly,
-    onSettings
+    onSettings,
+    classes
   } = props;
-  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+  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"]
+  }) : /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      color: "#64748B !important",
+      "& svg": {
+        color: "#64748B"
+      }
+    },
+    component: "button",
+    className: "element-empty-btn",
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "shieldNoAccess"
+    }), "The Content is no longer available."]
   }) : /*#__PURE__*/_jsx(VideoContent, {
     ...props
   });
@@ -109,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 {
@@ -255,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/Form/Form.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Transforms } from "slate";
+import { Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -48,7 +49,15 @@ const Form = props => {
     textSize,
     fontFamily,
     textAlign,
-    alignment
+    alignment,
+    fieldFontFamily,
+    fieldFontWeight,
+    fieldTextSize,
+    fieldTextColor,
+    fieldBgColor,
+    fieldBorderColor,
+    fieldBorderWidth,
+    fieldBorderStyle
   } = element;
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
@@ -190,6 +199,24 @@ const Form = props => {
     }, {
       at: path
     });
+    // adding form field style to the current form node 
+    const currentNode = Node.get(editor, path);
+    if (currentNode) {
+      currentNode.children.forEach((item, index) => {
+        Transforms.setNodes(editor, {
+          bgColor: data?.fieldBgColor ? data?.fieldBgColor : "rgba(255, 255, 255, 1)",
+          borderColor: data?.fieldBorderColor ? data?.fieldBorderColor : "#ccc",
+          borderStyle: data?.fieldBorderStyle ? data?.fieldBorderStyle : "",
+          borderWidth: data?.fieldBorderWidth ? data?.fieldBorderWidth : "",
+          textColor: data?.fieldTextColor ? data?.fieldTextColor : "",
+          fontFamily: data?.fieldFontFamily ? data?.fieldFontFamily : "",
+          textSize: data?.fieldTextSize ? data?.fieldTextSize : "",
+          fontWeight: data?.fieldFontWeight ? data?.fieldFontWeight : ""
+        }, {
+          at: [...path, index]
+        });
+      });
+    }
     onClose();
   };
   const onClose = () => {
@@ -198,7 +225,16 @@ const Form = props => {
   const onAddFormField = () => {
     try {
       Transforms.insertNodes(editor, {
-        ...formField()
+        ...formField({
+          fontFamily: fieldFontFamily,
+          fontWeight: fieldFontWeight,
+          textSize: fieldTextSize,
+          textColor: fieldTextColor,
+          bgColor: fieldBgColor,
+          borderColor: fieldBorderColor,
+          borderWidth: fieldBorderWidth,
+          borderStyle: fieldBorderStyle
+        })
       }, {
         at: [...path, children.length]
       });
@@ -366,6 +402,7 @@ const Form = props => {
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
         position: "relative",
+        lineHeight: 1.43,
         ...formSX
       },
       ref: formEle,

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

@@ -16,6 +16,9 @@ const FormCheckbox = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -46,7 +49,10 @@ const FormCheckbox = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormDate = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -47,7 +50,10 @@ const FormDate = props => {
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent",
-        paddingRight: '85px !important'
+        paddingRight: '85px !important',
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormEmail = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -47,7 +50,10 @@ const FormEmail = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormNumbers = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -63,7 +66,10 @@ const FormNumbers = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormRadioButton = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -46,7 +49,10 @@ const FormRadioButton = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -16,6 +16,9 @@ const FormText = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -45,7 +48,10 @@ const FormText = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontSize: textSize || "inherit",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

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

@@ -15,6 +15,9 @@ const FormTextArea = props => {
     borderColor,
     textColor,
     bgColor,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -45,7 +48,9 @@ const FormTextArea = props => {
         borderStyle: borderStyle || "solid",
         color: `${textColor || "#000"} !important`,
         background: `${bgColor || "transparent"} !important`,
-        fontSize: '14px'
+        fontSize: textSize || "14px",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormPopup.js

@@ -1,7 +1,8 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
-import formStyle from "../../common/StyleBuilder/formStyle";
+import { formStyle } from "../../common/StyleBuilder/formStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const FormPopup = props => {
   const {
     element,
@@ -9,14 +10,16 @@ const FormPopup = props => {
     onClose,
     customProps
   } = props;
-  return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Form",
-    type: "formStyle",
-    element: element,
-    onSave: onSave,
-    onClose: onClose,
-    renderTabs: formStyle,
-    customProps: customProps
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(StyleBuilder, {
+      title: "Form",
+      type: "formStyle",
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      renderTabs: formStyle,
+      customProps: customProps
+    })
   });
 };
 export default FormPopup;

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -276,7 +276,7 @@ const FreeGrid = props => {
           ...insertFreeGridItem("table", {
             ...DEFAULT_TABLE_NODE()
           }, {
-            height: 130,
+            height: 150,
             width: 400
           })
         }], {

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -144,8 +144,27 @@ const FreeGridItem = props => {
   };
   const onAddFormField = () => {
     try {
+      const {
+        fieldFontFamily,
+        fieldFontWeight,
+        fieldTextSize,
+        fieldTextColor,
+        fieldBgColor,
+        fieldBorderColor,
+        fieldBorderWidth,
+        fieldBorderStyle
+      } = element?.children[0];
       Transforms.insertNodes(editor, {
-        ...formField()
+        ...formField({
+          fontFamily: fieldFontFamily ? fieldFontFamily : "",
+          fontWeight: fieldFontWeight ? fieldFontWeight : "",
+          textSize: fieldTextSize ? fieldTextSize : "",
+          textColor: fieldTextColor ? fieldTextColor : "",
+          bgColor: fieldBgColor ? fieldBgColor : "",
+          borderColor: fieldBorderColor ? fieldBorderColor : "",
+          borderWidth: fieldBorderWidth ? fieldBorderWidth : "",
+          borderStyle: fieldBorderStyle ? fieldBorderStyle : ""
+        })
       }, {
         at: [...path, 0, 0]
       });

package/dist/Editor/Elements/FreeGrid/breakpointConstants.js

@@ -47,22 +47,22 @@ export function wrapThemeBreakpoints(sxProp, prop, theme) {
     const formatedSxProp = Object.keys(sxProp).reduce((a, b) => {
       switch (b) {
         case "md":
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["md"] || sxProp["lg"]
           };
           break;
         case "sm":
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["sm"] || sxProp["lg"]
           };
           break;
         case "xs":
-          a[theme.breakpoints.between("xs", "md")] = {
+          a[theme?.breakpoints?.between("xs", "md")] = {
             [prop]: sxProp["xs"] || sxProp["lg"]
           };
           break;
         default:
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["lg"]
           };
       }

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -171,6 +171,7 @@ const useFreeGridStyles = ({
           height: "100%",
           "& .signature-container": {
             height: "100%",
+            LineHeight: 1.43,
             "& .signature-btn-container": {
               height: "100%",
               display: "flex",
@@ -318,7 +319,7 @@ const useFreeGridStyles = ({
         "& .element-toolbar": {
           display: "none"
         },
-        [theme.breakpoints.between("xs", "md")]: {
+        [theme?.breakpoints?.between("xs", "md")]: {
           marginLeft: `calc((100% - 320px) * 0.5)`
         }
       },