@flozy/editor 1.3.7 → 1.4.1

package/dist/Editor/CommonEditor.js

@@ -12,10 +12,11 @@ import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
 import { mentionsEvent, commands } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
-import "./Editor.css";
 import { serialize } from "./utils/serializer";
 import { getThumbnailImage } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
+import "./font.css";
+import "./Editor.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -74,13 +75,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     pageProps
   } = pageSettings || {};
   const {
-    bannerSpacing
+    bannerSpacing,
+    pageBgImage,
+    pageColor
   } = pageProps || {
     bannerSpacing: {
-      left: 8,
-      right: 8,
-      top: 8,
-      bottom: 8
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
     }
   };
   useEffect(() => {
@@ -256,7 +259,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
             className: "editor-wrapper",
             style: {
               border: "1px solid #f3f3f3",
-              background: pageProps?.pageColor || defaultBG || "#FFF",
+              backgroundImage: pageBgImage ? `url(${pageBgImage})` : "none",
+              backgroundColor: pageColor || defaultBG || "#FFF",
               color: pageProps?.color || "#000",
               paddingLeft: `${bannerSpacing?.left}px`,
               paddingRight: `${bannerSpacing?.right}px`,

package/dist/Editor/Editor.css

@@ -1,5 +1,10 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
+.editor-t-wrapper {
+  font-family: "PoppinsRegular", "Helvetica", "Arial", sans-serif;
+}
+.editor-t-wrapper strong,
+.editor-t-wrapper strong * {
+  font-family: "PoppinsBold", "Helvetica", "Arial", sans-serif;
+}
 .ml-1 {
   margin-left: 10px;
 }
@@ -33,8 +38,9 @@ blockquote {
 .editor-wrapper .btnActive {
   opacity: 1;
 }
+
 .editor-wrapper {
-  font-family: "Helvetica", "Arial", sans-serif;
+
   background: #ffffff;
   min-height: 400px;
   height: fit-content;
@@ -102,11 +108,11 @@ blockquote {
 }
 
 .grid-container-toolbar {
-  right: -52px;
+  right: -32px;
 }
 
 .grid-item-toolbar {
-  left: -52px;
+  left: -32px;
 }
 
 .element-toolbar {
@@ -119,16 +125,22 @@ blockquote {
 .grid-container-toolbar button,
 .grid-item-toolbar button,
 .element-toolbar button {
-  /* margin-right: 8px;
-    background-color: rgba(0, 0, 0, 0.8);
-    color: #FFF; */
-  /* margin-left: 8px; */
-  background-color: rgb(255 255 255);
-  color: #64748b;
+  background-color: #2684ff;
+  color: #FFFFFF;
+  border: 1px solid transparent;
   font-size: 12px;
-  border-radius: 4px;
-  border: 1px solid #64748b;
-  margin-bottom: 6px;
+  border-radius: 0px;
+  margin-bottom: 0px;
+  width: 24px;
+  height: 24px;
+  padding: 12px;
+}
+.grid-container-toolbar button:hover,
+.grid-item-toolbar button:hover,
+.element-toolbar button:hover {
+  background-color: #FFFFFF;
+  color: #2684ff;
+  border: 1px solid #2684ff;
 }
 
 .grid-item {
@@ -481,7 +493,7 @@ blockquote {
   left: 0;
   right: 0;
   bottom: 0;
-  top: auto;
+  top: 0;
   width: fit-content;
   height: fit-content;
   margin: auto;
@@ -521,7 +533,7 @@ blockquote {
 }
 
 .element-toolbar button {
-  margin-right: 6px;
+  margin-right: 0px;
 }
 
 .empty-carousel-wrapper .element-selector {
@@ -534,4 +546,4 @@ blockquote {
 
 .empty-carousel-wrapper .grid-item-toolbar {
   left: 0px;
-}
+}

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

@@ -18,6 +18,7 @@ import Button from "@mui/material/Button";
 import SettingsIcon from "@mui/icons-material/Settings";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AppHeaderPopup from "./AppHeaderPopup";
+import { Tooltip } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const drawerWidth = 240;
@@ -33,8 +34,20 @@ function AppHeader(props) {
     appLogo,
     menus,
     bgColor,
-    menuStyle
+    bgColorHover,
+    textColor,
+    textColorHover,
+    menuStyle,
+    bannerSpacing,
+    fontSize,
+    fontFamily
   } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
   const {
     window
   } = props;
@@ -53,16 +66,24 @@ function AppHeader(props) {
       className: "element-toolbar",
       contentEditable: false,
       style: {
-        top: "-38px"
+        top: "-24px"
       },
-      children: [/*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: onSettings,
-        children: /*#__PURE__*/_jsx(SettingsIcon, {})
-      }), /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: onDelete,
-        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "App Header Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete App Header",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
@@ -107,6 +128,8 @@ function AppHeader(props) {
       children: menus.map(item => /*#__PURE__*/_jsx(ListItem, {
         disablePadding: true,
         children: /*#__PURE__*/_jsx(ListItemButton, {
+          component: "a",
+          href: item.url,
           sx: {
             textAlign: "center"
           },
@@ -130,7 +153,11 @@ function AppHeader(props) {
       style: {
         position: "relative",
         background: bgColor,
-        boxShadow: "none"
+        boxShadow: "none",
+        paddingLeft: `${left}px`,
+        paddingRight: `${right}px`,
+        paddingTop: `${top}px`,
+        paddingBottom: `${bottom}px`
       },
       children: /*#__PURE__*/_jsxs(Toolbar, {
         children: [/*#__PURE__*/_jsx(IconButton, {
@@ -184,9 +211,17 @@ function AppHeader(props) {
             children: /*#__PURE__*/_jsx(MenuIcon, {})
           }) : null, !isDrawer ? menus.map(item => /*#__PURE__*/_jsx(Button, {
             component: "a",
-            href: item.href,
+            href: item.url,
             sx: {
-              color: "#fff"
+              fontFamily: fontFamily,
+              textTransform: "none",
+              fontSize: fontSize || "16px",
+              color: textColor || "#FFF",
+              background: bgColor || "none",
+              "&:hover": {
+                color: textColorHover || textColor || "#FFF",
+                background: bgColorHover || bgColor || "none"
+              }
             },
             children: item.text
           }, item)) : null]

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

@@ -7,15 +7,17 @@ const ButtonPopup = props => {
     element,
     onSave,
     customProps,
-    onClose
+    onClose,
+    style,
+    styleName
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: "Button",
-    type: "buttonStyle",
+    type: styleName ? "" : "buttonStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: buttonStyle,
+    renderTabs: style ? style : buttonStyle,
     customProps: customProps
   });
 };

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

@@ -1,7 +1,11 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Menu, MenuItem } from "@mui/material";
+import { IconButton, Menu, MenuItem, Tooltip, Box } from "@mui/material";
+import * as fIcons from "@mui/icons-material";
+import SettingsIcon from "@mui/icons-material/Settings";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import DeleteIcon from "@mui/icons-material/Delete";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,7 +14,8 @@ const EditorButton = props => {
   const {
     attributes,
     element,
-    customProps
+    customProps,
+    children
   } = props;
   const {
     readOnly,
@@ -30,7 +35,12 @@ const EditorButton = props => {
     borderColor,
     buttonLink,
     textSize,
-    textAlign
+    textAlign,
+    fontFamily,
+    textColorHover,
+    bgColorHover,
+    buttonIcon,
+    iconPosition
   } = element;
   const {
     linkType,
@@ -48,6 +58,7 @@ const EditorButton = props => {
     right,
     bottom
   } = bannerSpacing || {};
+  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   const onClick = async e => {
     if (readOnly) {
       if (metadata?.buttonLink?.handler) {
@@ -117,15 +128,19 @@ const EditorButton = props => {
   return /*#__PURE__*/_jsxs("div", {
     className: "editor-btn-wrapper",
     ...attributes,
+    style: {
+      display: "inline"
+    },
     children: [/*#__PURE__*/_jsx("div", {
       className: "editor-btn-wrapper-inner",
       style: {
-        textAlign: textAlign || "left"
+        textAlign: textAlign || "left",
+        display: "inline"
       },
-      children: /*#__PURE__*/_jsx("button", {
-        contentEditable: false,
-        className: "editor-btn",
-        style: {
+      contentEditable: false,
+      children: /*#__PURE__*/_jsxs(Box, {
+        component: "button",
+        sx: {
           background: bgColor || "rgb(30, 75, 122)",
           borderWidth: "1px",
           borderBlockStyle: "solid",
@@ -136,11 +151,34 @@ const EditorButton = props => {
           paddingTop: `${top || 8}px`,
           paddingBottom: `${bottom || 8}px`,
           color: `${textColor || "#FFFFFF"}`,
-          fontSize: textSize || "inherit"
+          fontSize: textSize || "inherit",
+          fontFamily: fontFamily || "PoppinsRegular",
+          display: "inline-flex",
+          alignItems: "center",
+          "&:hover": {
+            color: `${textColorHover || textColor || "#FFFFFF"}`,
+            background: bgColorHover || bgColor || "rgb(30, 75, 122)"
+          }
         },
         onClick: onClick,
-        children: label || "My Button"
+        children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
+          style: {
+            paddingLeft: "4px",
+            paddingRight: "4px"
+          }
+        }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
+          style: {
+            paddingLeft: "4px",
+            paddingRight: "4px"
+          }
+        })]
       })
+    }), /*#__PURE__*/_jsx("div", {
+      contentEditable: true,
+      style: {
+        display: "inline"
+      },
+      children: children
     }), /*#__PURE__*/_jsxs(Menu, {
       className: "editor-btn-options",
       open: anchorEl !== null,
@@ -148,13 +186,31 @@ const EditorButton = props => {
       onClose: handleClose,
       children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
         onClick: onMenuClick("edit"),
-        children: "Edit"
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Settings",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          })
+        })
       }), /*#__PURE__*/_jsx(MenuItem, {
+        title: "Open Link",
+        arrow: true,
         onClick: onMenuClick("open"),
-        children: "Open"
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+          })
+        })
       }), !readOnly && /*#__PURE__*/_jsx(MenuItem, {
+        title: "Delete",
+        arrow: true,
         onClick: onMenuClick("delete"),
-        children: "Delete"
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+          })
+        })
       })]
     }), edit && /*#__PURE__*/_jsx(ButtonPopup, {
       element: element,

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -25,10 +25,12 @@ const ChipText = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  return /*#__PURE__*/_jsx("span", {
+  return /*#__PURE__*/_jsx("button", {
     ...attributes,
     className: "editor-chip-text",
+    contentEditable: false,
     style: {
+      display: "inline",
       paddingLeft: `${left}px`,
       paddingRight: `${right}px`,
       paddingTop: `${top}px`,
@@ -38,7 +40,10 @@ const ChipText = props => {
       background: bgColor || "#CCC",
       color: textColor
     },
-    children: children
+    children: /*#__PURE__*/_jsx("div", {
+      contentEditable: true,
+      children: children
+    })
   });
 };
 export default ChipText;

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

@@ -6,9 +6,7 @@ import useResize from "../../utils/customHooks/useResize";
 import { insertImageText } from "../../utils/imageText";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import SettingsIcon from "@mui/icons-material/Settings";
-import AddIcon from "@mui/icons-material/Add";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -112,31 +110,17 @@ const Image = ({
     insertImageText(editor, [...path, 1]);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar",
       contentEditable: false,
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Add Text",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onAddText,
-          children: /*#__PURE__*/_jsx(AddIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Image Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDelete,
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
-      })]
+      })
     }) : null;
   };
   const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
@@ -177,7 +161,7 @@ const Image = ({
         alt: alt,
         src: url,
         onClick: handleImageClick
-      }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
+      }), selected && !readOnly && size.width > 300 && size.height > 300 && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           opacity: 1,

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

@@ -54,14 +54,14 @@ const Video = ({
       className: "element-toolbar visible-on-hover",
       contentEditable: false,
       children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
+        title: "Video Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete",
+        title: "Delete Video",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onDelete,

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

@@ -5,10 +5,12 @@ import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mu
 import DeleteIcon from "@mui/icons-material/Delete";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AddIcon from "@mui/icons-material/Add";
+import BackupIcon from "@mui/icons-material/Backup";
 import FormPopup from "./FormPopup";
 import ButtonPopup from "../Button/ButtonPopup";
 import { formField } from "../../utils/formfield";
 import { formSubmit } from "../../service/formSubmit";
+import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Form = props => {
@@ -51,17 +53,23 @@ const Form = props => {
     if ((readOnly || test) && formEle && formEle?.current) {
       const formData = new FormData(formEle?.current);
       setLoading(true);
-      let params = {
-        page_id: page_id
-      };
+      let response = {};
       for (let pair of formData.entries()) {
-        params = {
-          ...params,
+        response = {
+          ...response,
           [pair[0]]: pair[1]
         };
       }
-      const result = await formSubmit(params);
-      console.log(result);
+      let params = {
+        page_id: page_id,
+        form_id: `${formName}`,
+        response,
+        form_data: {
+          email: element?.email,
+          save_response: element?.saveResponse
+        }
+      };
+      await formSubmit(params, customProps);
       setLoading(false);
     }
   };
@@ -168,7 +176,6 @@ const Form = props => {
       })]
     });
   };
-  console.log(element);
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "form-wrapper element-root",
@@ -177,7 +184,7 @@ const Form = props => {
       padding: "10px"
     },
     children: [!readOnly && /*#__PURE__*/_jsx(FormToolbar, {}), /*#__PURE__*/_jsxs("form", {
-      id: `form_${formName}`,
+      id: `${formName}`,
       onSubmit: handleSubmit,
       style: {
         color: textColor || "#FFF"
@@ -192,7 +199,6 @@ const Form = props => {
           contentEditable: false,
           style: {
             display: "flex",
-            flex: 1,
             justifyContent: btnAlign?.horizantal || "start",
             alignItems: btnAlign?.vertical || "start",
             marginLeft: "0px"
@@ -216,7 +222,8 @@ const Form = props => {
               marginBottom: `${btnM?.bottom || 0}px`,
               color: `${buttonProps?.textColor || "#FFFFFF"}`,
               fontSize: buttonProps?.textSize || "inherit",
-              height: "fit-content"
+              height: "fit-content",
+              fontFamily: buttonProps?.fontFamily || "PoppinsRegular"
             },
             children: buttonProps?.label || "Submit"
           })
@@ -245,23 +252,37 @@ const Form = props => {
       element: element,
       onSave: onSave,
       onClose: onClose
-    }) : null, /*#__PURE__*/_jsxs(Menu, {
+    }) : null, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
       className: "editor-btn-options",
       open: anchorEl !== null,
       anchorEl: anchorEl,
       onClose: handleClose,
-      children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
+      children: [/*#__PURE__*/_jsx(MenuItem, {
         onClick: onMenuClick("edit"),
-        children: "Settings"
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Button Settings",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          })
+        })
       }), /*#__PURE__*/_jsx(MenuItem, {
         onClick: onMenuClick("test"),
-        children: "Test Submit Form"
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Test Submit",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(BackupIcon, {})
+          })
+        })
       })]
-    }), editButton && /*#__PURE__*/_jsx(ButtonPopup, {
+    }) : null, editButton && /*#__PURE__*/_jsx(ButtonPopup, {
       element: buttonProps || {},
       onSave: onSaveButtonSettings,
       onClose: onCloseButtonSettings,
-      customProps: customProps
+      customProps: customProps,
+      style: formButtonStyle,
+      styleName: "formButtonStyle"
     })]
   });
 };

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

@@ -4,7 +4,6 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
 import { IconButton, Tooltip } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AddIcon from "@mui/icons-material/Add";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,6 +20,7 @@ const Grid = props => {
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const {
+    id,
     grid,
     bannerSpacing,
     bgColor,
@@ -53,7 +53,7 @@ const Grid = props => {
       Transforms.insertNodes(editor, [{
         ...gridItem()
       }], {
-        at: insertPath
+        at: [...path, children.length]
       });
       // new line
       Transforms.insertNodes(editor, [{
@@ -109,19 +109,16 @@ const Grid = props => {
           onClick: onAddGridItem,
           children: /*#__PURE__*/_jsx(AddIcon, {})
         })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete Grid",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDelete,
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
       })]
     }) : null;
   };
+  const sectionId = id ? {
+    id
+  } : {};
   return /*#__PURE__*/_jsxs("div", {
     className: `grid-container ${grid} element-root`,
     ...attributes,
+    ...sectionId,
     style: {
       background: bgColor,
       alignContent: vertical,
@@ -136,6 +133,7 @@ const Grid = props => {
       element: element,
       onSave: onSave,
       onClose: onClose,
+      onDelete: onDelete,
       customProps: customProps
     }) : null, /*#__PURE__*/_jsx("div", {
       style: {