@flozy/editor 1.3.7 → 1.4.0

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"];

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 {

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,17 @@ function AppHeader(props) {
     appLogo,
     menus,
     bgColor,
-    menuStyle
+    menuStyle,
+    bannerSpacing,
+    fontSize,
+    fontFamily
   } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
   const {
     window
   } = props;
@@ -53,16 +63,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 +125,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 +150,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 +208,12 @@ 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"
+              color: "#fff",
+              fontFamily: fontFamily,
+              textTransform: "none",
+              fontSize: fontSize || "16px"
             },
             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,10 @@
 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 } from "@mui/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";
@@ -30,7 +33,8 @@ const EditorButton = props => {
     borderColor,
     buttonLink,
     textSize,
-    textAlign
+    textAlign,
+    fontFamily
   } = element;
   const {
     linkType,
@@ -136,7 +140,8 @@ const EditorButton = props => {
           paddingTop: `${top || 8}px`,
           paddingBottom: `${bottom || 8}px`,
           color: `${textColor || "#FFFFFF"}`,
-          fontSize: textSize || "inherit"
+          fontSize: textSize || "inherit",
+          fontFamily: fontFamily || "PoppinsRegular"
         },
         onClick: onClick,
         children: label || "My Button"
@@ -148,13 +153,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/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,
@@ -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: {

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

@@ -3,7 +3,6 @@ import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,28 +38,21 @@ const GridItem = props => {
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
   const GridItemToolbar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "grid-item-toolbar",
       style: {
         top: "0px"
       },
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Grid Settings",
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Grid Item Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete Grid",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDelete,
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
-      })]
+      })
     }) : null;
   };
   const onSettings = () => {
@@ -118,7 +110,8 @@ const GridItem = props => {
     }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,
       onSave: onSave,
-      onClose: onClose
+      onClose: onClose,
+      onDelete: onDelete
     }) : null]
   });
 };

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

@@ -6,7 +6,8 @@ const GridItemPopup = props => {
   const {
     element,
     onSave,
-    onClose
+    onClose,
+    onDelete
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: "Grid Item",
@@ -14,7 +15,8 @@ const GridItemPopup = props => {
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: gridItemStyle
+    renderTabs: gridItemStyle,
+    onDelete: onDelete
   });
 };
 export default GridItemPopup;

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

@@ -7,6 +7,7 @@ const GridPopup = props => {
     element,
     onSave,
     onClose,
+    onDelete,
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
@@ -16,7 +17,8 @@ const GridPopup = props => {
     onSave: onSave,
     onClose: onClose,
     renderTabs: gridStyle,
-    customProps: customProps
+    customProps: customProps,
+    onDelete: onDelete
   });
 };
 export default GridPopup;

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

@@ -5,6 +5,7 @@ import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";
 import usePopupStyle from "./PopupToolStyle";
+import useFormat from "../../utils/customHooks/useFormat";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = () => {
@@ -17,7 +18,9 @@ const PopupTool = () => {
   } = editor;
   const open = Boolean(anchorEl);
   const id = open ? "popup-edit-tool" : "";
+  console.log(useFormat(editor, null));
   useEffect(() => {
+    console.log(selection, inFocus);
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {

package/dist/Editor/assets/fonts/poppins/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/Editor/common/StyleBuilder/appHeaderStyle.js

@@ -1,7 +1,14 @@
+import { fontOptions } from "../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
 const appHeaderStyle = [{
   tab: "Logo",
   value: "appLogo",
   fields: [{
+    label: "App Title",
+    key: "appTitle",
+    type: "text",
+    placeholder: "Leave Empty, If only Logo"
+  }, {
     label: "App Logo URL",
     key: "appLogo",
     type: "text"
@@ -11,12 +18,26 @@ const appHeaderStyle = [{
     type: "backgroundImage"
   }]
 }, {
-  tab: "Title",
-  value: "appTitle",
+  tab: "General",
+  value: "general",
   fields: [{
-    label: "App Title",
-    key: "appTitle",
-    type: "text"
+    label: "Menu Font Size",
+    key: "fontSize",
+    type: "text",
+    placeholder: "16px"
+  }, {
+    label: "Menu Font Family",
+    key: "fontFamily",
+    type: "textOptions",
+    options: fontOptions,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Menus",

package/dist/Editor/common/StyleBuilder/buttonStyle.js

@@ -1,3 +1,5 @@
+import { fontOptions } from "../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
 const buttonStyle = [{
   tab: "General",
   value: "size",
@@ -6,10 +8,23 @@ const buttonStyle = [{
     key: "label",
     type: "text"
   }, {
-    label: "Text Size",
+    label: "Font Size",
     key: "textSize",
     type: "text",
     placeholder: "16px or 1em"
+  }, {
+    label: "Font Family",
+    key: "fontFamily",
+    type: "textOptions",
+    options: fontOptions,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }, {
     label: "Text Align",
     key: "textAlign",

package/dist/Editor/common/StyleBuilder/embedImageStyle.js

@@ -1,4 +1,16 @@
 const embedImageStyle = [{
+  tab: "URL",
+  value: "url",
+  fields: [{
+    label: "URL",
+    key: "url",
+    type: "text"
+  }, {
+    label: "File",
+    key: "url",
+    type: "backgroundImage"
+  }]
+}, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{
@@ -39,18 +51,6 @@ const embedImageStyle = [{
     key: "borderColor",
     type: "color"
   }]
-}, {
-  tab: "URL",
-  value: "url",
-  fields: [{
-    label: "URL",
-    key: "url",
-    type: "text"
-  }, {
-    label: "File",
-    key: "url",
-    type: "backgroundImage"
-  }]
 }, {
   tab: "Size",
   value: "elementSize",

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -86,7 +86,8 @@ const BackgroundImage = props => {
         height: "100px",
         backgroundPosition: "center",
         backgroundSize: "contain",
-        backgroundRepeat: "no-repeat"
+        backgroundRepeat: "no-repeat",
+        backgroundColor: "rgba(0,0,0,0.5)"
       }
     })]
   });

package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
+import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography, Tooltip, IconButton } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MenusArray = props => {
@@ -60,7 +61,7 @@ const MenusArray = props => {
             variant: "body1",
             color: "textSecondary",
             sx: {
-              fontSize: '14px'
+              fontSize: "14px"
             },
             children: "Menu Variant"
           })
@@ -88,15 +89,18 @@ const MenusArray = props => {
       return /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
+        style: {
+          display: "flex",
+          alignItems: "center"
+        },
         children: [/*#__PURE__*/_jsx(TextField, {
           name: "text",
           type: "text",
           value: m.text,
           onChange: handleChange(i),
           size: "small",
-          fullWidth: true,
           sx: {
-            mb: 2
+            mb: 0
           }
         }), /*#__PURE__*/_jsx(TextField, {
           name: "url",
@@ -105,11 +109,13 @@ const MenusArray = props => {
           onChange: handleChange(i),
           size: "small",
           fullWidth: true
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: onDelete(i),
-          color: "error",
-          className: "deleteBtn",
-          children: "Delete"
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          title: "Delete Menu",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onDelete(i),
+            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+          })
         })]
       }, `add-m-${i}`);
     }), /*#__PURE__*/_jsx(Grid, {

package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js

@@ -3,17 +3,15 @@ import { Grid, MenuItem, Select } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TextOptions = props => {
   const {
+    value,
     data,
-    onChange,
-    elementProps
+    onChange
   } = props;
   const {
     key,
-    options
+    options,
+    renderOption
   } = data;
-  const {
-    element: elementType
-  } = elementProps;
   const handleChange = e => {
     onChange({
       [key]: e.target.value
@@ -29,14 +27,14 @@ const TextOptions = props => {
       },
       children: /*#__PURE__*/_jsx(Select, {
         onChange: handleChange,
-        value: elementType,
+        value: value || options[0]?.value,
         placeholder: data?.label,
         fullWidth: true,
         size: "small",
         children: options.map(m => {
           return /*#__PURE__*/_jsx(MenuItem, {
             value: m.value,
-            children: m.label
+            children: renderOption ? renderOption(m) : m.label || m.text
           }, `${key}_${m.value}`);
         })
       })

package/dist/Editor/common/StyleBuilder/formButtonStyle.js

@@ -0,0 +1,93 @@
+import { fontOptions } from "../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
+const formButtonStyle = [{
+  tab: "General",
+  value: "size",
+  fields: [{
+    label: "Button Text",
+    key: "label",
+    type: "text"
+  }, {
+    label: "Font Size",
+    key: "textSize",
+    type: "text",
+    placeholder: "16px or 1em"
+  }, {
+    label: "Font Family",
+    key: "fontFamily",
+    type: "textOptions",
+    options: fontOptions,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
+  }, {
+    label: "Text Align",
+    key: "textAlign",
+    type: "textAlign",
+    placeholder: "16px or 1em"
+  }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
+}, {
+  tab: "Margin Spacing",
+  value: "marginSpacing",
+  fields: [{
+    label: "Margin Spacing",
+    key: "marginSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Save As Template",
+  value: "saveAsTemplate",
+  needActions: false,
+  fields: [{
+    label: "Template Image",
+    key: "saveAsTemplate",
+    type: "saveAsTemplate"
+  }]
+}];
+export default formButtonStyle;

package/dist/Editor/common/StyleBuilder/gridStyle.js

@@ -1,4 +1,13 @@
 const gridStyle = [{
+  tab: "General",
+  value: "general",
+  fields: [{
+    label: "Section ID",
+    key: "id",
+    type: "text",
+    placeholder: "Id should be unique for the page..."
+  }]
+}, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{

package/dist/Editor/font.css

@@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'PoppinsRegular';
+    src: url('./assets/fonts/poppins/Poppins-Regular.ttf');
+}
+
+@font-face {
+    font-family: 'PoppinsBold';
+    src: url('./assets/fonts/poppins/Poppins-Bold.ttf');
+}

package/dist/Editor/service/formSubmit.js

@@ -1,6 +1,6 @@
-export const formSubmit = async formData => {
+export const formSubmit = async (formData, props) => {
   try {
-    const response = await fetch(`/form/submit`, {
+    const response = await fetch(`${props.PAGES_API_HOST}/form/submit`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -99,7 +99,7 @@ export const activeMark = (editor, format) => {
     color: "#000000",
     bgColor: "#FFFFFF",
     fontSize: "normal",
-    fontFamily: "sans"
+    fontFamily: "PoppinsRegular"
   };
   try {
     const marks = Editor.marks(editor);

package/dist/Editor/utils/customHooks/useFormat.js

@@ -1,16 +1,23 @@
-import { useEffect, useState } from 'react';
-import { Editor, Element } from 'slate';
+import { useEffect, useState } from "react";
+import { Editor, Element } from "slate";
 
 // This hook returns if the node in the current selection matches the format passed to it.
 const useFormat = (editor, format) => {
   const [isFormat, setIsFormat] = useState(false);
+  const matchFormat = n => {
+    if (format) {
+      return n.type === format;
+    } else {
+      return true;
+    }
+  };
   useEffect(() => {
     if (editor.selection) {
       // It matches at the editor.selection location by default, so if null handle it seperately.
       const [node] = Editor.nodes(editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === format
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && matchFormat(n)
       });
-      setIsFormat(!!node);
+      setIsFormat(format ? !!node : node);
     } else {
       setIsFormat(false);
     }

package/dist/Editor/utils/font.js

@@ -5,6 +5,8 @@ export const sizeMap = {
   huge: "40px"
 };
 export const fontFamilyMap = {
+  PoppinsRegular: "PoppinsRegular",
+  PoppinsBold: "PoppinsBold",
   sans: "Helvetica,Arial, sans serif",
   serif: "Georgia, Times New Roaman,serif",
   monospace: "Monaco, Courier New,monospace",
@@ -29,7 +31,7 @@ export const fontFamilyMap = {
   pinyon: "'Pinyon Script', cursive",
   muellerhoff: "'Herr Von Muellerhoff', cursive",
   dawning: "'Dawning of a New Day', cursive",
-  //New Font Added for Type Signature
+  // New Font Added for Type Signature
   comingsoon: "'Coming Soon', cursive",
   dancingScript: "'Dancing Script', cursive",
   engagement: "'Engagement', cursive",

package/package.json

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