@flozy/editor 1.5.5 → 1.5.7

package/dist/Editor/Editor.css

@@ -124,20 +124,25 @@ blockquote {
   z-index: 1000;
 }
 
+.element-toolbar button:first-child {
+  margin-right: 2px;
+}
+
 .grid-container-toolbar button,
 .grid-item-toolbar button,
 .element-toolbar button {
-  background-color: #fff;
-  border: 1px solid rgb(37, 99, 235, 0.23);
+  border-radius: 10px;
+border: 1px solid rgba(37, 99, 235, 0.32);
+background: #FFF;
+box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
+
+  /* background-color: #2684ff; */
+  /* color: #FFFFFF; */
   font-size: 12px;
-  border-radius: 0px;
-  margin-bottom: 0px;
-  width: 24px;
-  height: 24px;
-  padding: 16px;
-  margin-bottom: 4px;
-  color: #64748B;
-  border-radius: 50%;
+  margin-bottom: 2px;
+  width: 36px;
+  height: 36px;
+  padding: 6px;
 }
 .grid-container-toolbar button:hover,
 .grid-item-toolbar button:hover,

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

@@ -7,6 +7,7 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import AccordionBtnPopup from "./AccordionBtnPopup";
 import { IconButton, Tooltip } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
+import { GridSettingsIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Accordion = props => {
@@ -48,7 +49,7 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Delete",

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

@@ -4,6 +4,7 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionTitlePopup from "./AccordionTitlePopup";
 import { IconButton, Tooltip } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
+import { GridSettingsIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
@@ -37,7 +38,7 @@ const AccordionSummary = props => {
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       })
     }) : null;

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

@@ -15,10 +15,10 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 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 { GridSettingsIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const drawerWidth = 240;
@@ -81,10 +81,7 @@ function AppHeader(props) {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
-          style: {
-            marginRight: "4px"
-          },
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Delete App Header",

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

@@ -17,7 +17,8 @@ const ColorPicker = ({
   format,
   editor,
   showHex,
-  title
+  title,
+  rounded
 }) => {
   const [selection, setSelection] = useState();
   const colorPickerRef = useRef(null);
@@ -44,14 +45,23 @@ const ColorPicker = ({
     style: {
       display: "flex",
       alignItems: "center",
-      position: "relative"
+      position: "relative",
+      padding: rounded ? "6px" : "0px"
     },
-    children: [showHex ? /*#__PURE__*/_jsx("div", {
+    children: [rounded ? /*#__PURE__*/_jsx(Button, {
       style: {
-        display: "flex"
+        color: activeColor,
+        opacity: "1",
+        width: "24px",
+        height: "24px",
+        backgroundColor: activeColor,
+        border: "1px solid #ccc",
+        marginRight: "12px"
       },
-      children: activeColor
-    }) : null, /*#__PURE__*/_jsx(Button, {
+      className: showOptions ? "clicked" : "",
+      onClick: toggleOption,
+      title: title
+    }) : /*#__PURE__*/_jsx(Button, {
       style: {
         color: activeColor,
         opacity: "1"
@@ -60,7 +70,12 @@ const ColorPicker = ({
       onClick: toggleOption,
       title: title,
       children: logo[format](activeColor)
-    }), showOptions && /*#__PURE__*/_jsx("div", {
+    }), showHex ? /*#__PURE__*/_jsx("div", {
+      style: {
+        display: "flex"
+      },
+      children: activeColor
+    }) : null, showOptions && /*#__PURE__*/_jsx("div", {
       style: {
         position: "fixed",
         top: 0,
@@ -80,4 +95,7 @@ const ColorPicker = ({
     })]
   });
 };
+ColorPicker.defaultProps = {
+  rounded: false
+};
 export default ColorPicker;

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

@@ -128,7 +128,7 @@ const Embed = ({
           },
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
-            children: [/*#__PURE__*/_jsx(Uploader, {
+            children: [format === "image" ? /*#__PURE__*/_jsx(Uploader, {
               value: formData,
               data: {
                 key: "url"
@@ -136,7 +136,7 @@ const Embed = ({
               customProps: customProps,
               onUploaded: onUploaded,
               disableUpload: format === "video"
-            }), /*#__PURE__*/_jsx(Grid, {
+            }) : null, /*#__PURE__*/_jsx(Grid, {
               item: true,
               xs: 12,
               style: {
@@ -144,7 +144,7 @@ const Embed = ({
               },
               children: /*#__PURE__*/_jsx(TextField, {
                 name: "url",
-                placeholder: "Add image url here",
+                placeholder: `Add ${format} url here`,
                 size: "small",
                 fullWidth: true,
                 onChange: handleChange,

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

@@ -9,7 +9,8 @@ const EmbedPopup = props => {
     onSave,
     onClose,
     customProps,
-    format
+    format,
+    onDelete
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: format === "image" ? "Image" : "Video",
@@ -18,7 +19,8 @@ const EmbedPopup = props => {
     onSave: onSave,
     onClose: onClose,
     renderTabs: format === "image" ? embedImageStyle : embedVideoStyle,
-    customProps: customProps
+    customProps: customProps,
+    onDelete: onDelete
   });
 };
 export default EmbedPopup;

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

@@ -3,10 +3,9 @@ import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
 import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
-import { insertImageText } from "../../utils/imageText";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip } from "@mui/material";
-import SettingsIcon from "@mui/icons-material/Settings";
+import { GridSettingsIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -97,10 +96,11 @@ const Image = ({
   const onClose = () => {
     setOpenSettings(false);
   };
-
-  // const onDelete = () => {
-  //   Transforms.removeNodes(editor, { at: path });
-  // };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
 
   // const onAddText = () => {
   //   Transforms.wrapNodes(editor, {
@@ -119,7 +119,7 @@ const Image = ({
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       })
     }) : null;
@@ -147,7 +147,8 @@ const Image = ({
       onSave: onSave,
       onClose: onClose,
       customProps: customProps,
-      format: "image"
+      format: "image",
+      onDelete: onDelete
     }) : null, /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       style: {

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

@@ -6,8 +6,8 @@ import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
 import { IconButton, Tooltip } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
-import SettingsIcon from "@mui/icons-material/Settings";
 import EmbedPopup from "./EmbedPopup";
+import { GridSettingsIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
@@ -58,7 +58,7 @@ const Video = ({
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Delete Video",
@@ -108,7 +108,8 @@ const Video = ({
       onSave: onSave,
       onClose: onClose,
       customProps: customProps,
-      format: "video"
+      format: "video",
+      onDelete: onDelete
     }) : null, /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       style: {

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

@@ -4,14 +4,11 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
 import { IconButton, Tooltip } from "@mui/material";
-import SettingsIcon from "@mui/icons-material/Settings";
-import AddIcon from "@mui/icons-material/Add";
-import NoteAddIcon from "@mui/icons-material/NoteAdd";
 import CompressIcon from "@mui/icons-material/Compress";
 import { insertGrid } from "../../utils/grid";
 import useDragAndDrop from "../../common/useDragAndDrop";
 import useResize from "../../utils/customHooks/useResize";
-// import { AddGridItemIcon } from "../../common/iconslist";
+import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Grid = props => {
@@ -61,6 +58,7 @@ const Grid = props => {
   } = elSize || {};
   const editor = useSlateStatic();
   const selected = useSelected();
+  // const [selected, setSelected] = useState(false);
   const path = ReactEditor.findPath(editor, element);
   const [parentDOM, setParentDOM] = useState(null);
 
@@ -188,6 +186,17 @@ const Grid = props => {
     onDragEnd,
     onDrop
   });
+
+  // const onMouseOver = (e) => {
+  //   e.stopPropagation();
+  //   setSelected(true);
+  // };
+
+  // const onMouseLeave = (e) => {
+  //   e.stopPropagation();
+  //   setSelected(false);
+  // };
+
   const GridToolBar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
@@ -197,21 +206,21 @@ const Grid = props => {
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Add Grid Item",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onAddGridItem,
-          children: /*#__PURE__*/_jsx(AddIcon, {})
+          children: /*#__PURE__*/_jsx(GridAddGridIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Add Section",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onAddSection(null, true),
-          children: /*#__PURE__*/_jsx(NoteAddIcon, {})
+          children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
         })
       })]
     }) : null;
@@ -234,7 +243,10 @@ const Grid = props => {
       borderWidth: borderWidth || "1px",
       borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
       borderStyle: borderStyle || "solid"
-    },
+    }
+    // onMouseOver={onMouseOver}
+    // onMouseLeave={onMouseLeave}
+    ,
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {
         position: "absolute",

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

@@ -3,7 +3,7 @@ import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
-import SettingsIcon from "@mui/icons-material/Settings";
+import { GridSettingsIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItem = props => {
@@ -50,7 +50,8 @@ const GridItem = props => {
     bottomRight
   } = borderRadius || {};
   const editor = useSlateStatic();
-  const selected = useSelected();
+  // const selected = useSelected();
+  const [selected, setSelected] = useState(false);
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
   const GridItemToolbar = () => {
@@ -66,7 +67,7 @@ const GridItem = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       })
     }) : null;
@@ -97,6 +98,18 @@ const GridItem = props => {
       });
     }
   };
+  const onMouseOver = e => {
+    if (!readOnly) {
+      e.stopPropagation();
+      setSelected(true);
+    }
+  };
+  const onMouseLeave = e => {
+    if (!readOnly) {
+      e.stopPropagation();
+      setSelected(false);
+    }
+  };
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `grid-item xs-${grid} element-root gi-top-wrpr`,
@@ -116,6 +129,8 @@ const GridItem = props => {
         background: `${bgColorHover || bgColor || "transparent"}`
       }
     },
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
     children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,

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

@@ -8,7 +8,7 @@ const usePopupStyle = () => ({
     width: "350px",
     maxheight: "300px",
     overflow: "auto",
-    marginBottom: "12px",
+    // marginBottom: "12px",
     "& .textSettingHeader": {
       borderBottom: "1px solid #DCE4EC",
       padding: "8px 0px 5px",

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

@@ -1,18 +1,16 @@
 import React from "react";
-import { Grid, IconButton, Typography } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import toolbarGroups from "../toolbarGroups";
 import { Dropdown, MarkButton, TextSize, BlockButton } from "../FormatTools";
 import ColorPicker from "../../Elements/Color Picker/ColorPicker";
 import { activeMark } from "../../utils/SlateUtilityFunctions";
-import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
 const TextFormat = props => {
   const {
     classes,
-    editor,
-    onClose
+    editor
   } = props;
   const fontFamily = allTools.find(f => f.format === "fontFamily");
   const fontStyle = allTools.filter(f => f.type === "mark");
@@ -21,31 +19,6 @@ const TextFormat = props => {
     container: true,
     sx: classes.textFormatWrapper,
     children: [/*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      style: {
-        display: "flex"
-      },
-      justifyContent: "space-between",
-      alignItems: "center",
-      className: "textSettingHeader",
-      children: [/*#__PURE__*/_jsx(Typography, {
-        color: "primary",
-        sx: {
-          fontSize: "16px",
-          fontWeight: "700"
-        },
-        children: "TEXT SETTINGS"
-      }), /*#__PURE__*/_jsx(Grid, {
-        sx: classes.textFormatLabel,
-        justifyContent: "end",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          className: "close-popupbtn",
-          onClick: onClose,
-          children: /*#__PURE__*/_jsx(CloseIcon, {})
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       children: [/*#__PURE__*/_jsx(Typography, {
@@ -158,7 +131,8 @@ const TextFormat = props => {
           format: "color",
           activeMark: activeMark,
           editor: editor,
-          showHex: true
+          showHex: true,
+          rounded: true
         })
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
@@ -182,7 +156,8 @@ const TextFormat = props => {
           format: "bgColor",
           activeMark: activeMark,
           editor: editor,
-          showHex: true
+          showHex: true,
+          rounded: true
         })
       })]
     })]

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

@@ -1,13 +1,16 @@
-import React, { useEffect, useState } from "react";
-// import { Popper, Fade, Paper, IconButton, Drawer } from "@mui/material";
-import { Drawer } from "@mui/material";
-// import CloseIcon from "@mui/icons-material/Close";
+import React, { useEffect, useMemo, useState } from "react";
+import { Popper, Fade, Paper, IconButton,
+// Drawer,
+Grid, Typography } from "@mui/material";
+// import { Drawer, Popper } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";
 import usePopupStyle from "./PopupToolStyle";
 import useDrag from "../../hooks/useDrag";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = props => {
   const classes = usePopupStyle();
   const [anchorEl, setAnchorEl] = useState(null);
@@ -17,51 +20,107 @@ const PopupTool = props => {
     selection
   } = editor;
   const open = Boolean(anchorEl);
-  // const id = open ? "popup-edit-tool" : "";
+  const id = open ? "popup-edit-tool" : "";
   const [event] = useDrag();
   useEffect(() => {
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
-      // setAnchorEl(null);
+      setAnchorEl(null);
     } else {
       const domSelection = window.getSelection();
       const domRange = domSelection.getRangeAt(0);
-      const rect = domRange.getBoundingClientRect();
-      if (event === "end") {
-        setAnchorEl({
-          clientWidth: rect.width,
-          clientHeight: rect.height,
-          getBoundingClientRect: () => rect
-        });
+      const {
+        startOffset,
+        endOffset
+      } = domRange || {};
+      if (startOffset !== endOffset) {
+        const rect = domRange.getBoundingClientRect();
+        if (event === "end" && !open && anchorEl === null) {
+          setAnchorEl({
+            clientWidth: rect.width,
+            clientHeight: rect.height,
+            getBoundingClientRect: () => rect
+          });
+        }
       }
     }
   }, [selection, event]);
   const handleClose = () => {
     setAnchorEl(null);
   };
-  return /*#__PURE__*/_jsx(Drawer
-  // id={id}
-  , {
-    open: open,
-    fullWidth: true
-    // disablePortal={false}
-    // anchorEl={anchorEl}
-    // transition
-    // placement="bottom-start"
-    // onMouseDown={(e) => e.preventDefault()}
-    // sx={classes.popupWrapper}
-    ,
-    anchor: "right",
-    hideBackdrop: true
-    // handleClose={handleClose}
-    ,
-    className: "tools-drawer"
-    // variant="persistent"
-    ,
-    children: /*#__PURE__*/_jsx(TextFormat, {
+  const toolTextFormat = useMemo(() => {
+    return /*#__PURE__*/_jsx(TextFormat, {
       editor: editor,
-      classes: classes,
-      onClose: handleClose
+      classes: classes
+    });
+  }, [open]);
+  return /*#__PURE__*/_jsx(Popper, {
+    id: id,
+    open: open,
+    disablePortal: false,
+    anchorEl: anchorEl,
+    transition: true,
+    placement: "auto-end",
+    onMouseDown: e => e.preventDefault(),
+    sx: classes.popupWrapper,
+    className: "tools-drawer",
+    children: ({
+      TransitionProps
+    }) => /*#__PURE__*/_jsx(Fade, {
+      ...TransitionProps,
+      timeout: 350,
+      children: /*#__PURE__*/_jsxs(Paper, {
+        children: [/*#__PURE__*/_jsxs(Grid, {
+          item: true,
+          xs: 12,
+          style: {
+            display: "flex",
+            padding: "12px"
+          },
+          justifyContent: "space-between",
+          alignItems: "center",
+          className: "textSettingHeader",
+          children: [/*#__PURE__*/_jsx(Typography, {
+            color: "primary",
+            sx: {
+              fontSize: "16px",
+              fontWeight: "700",
+              color: "#000"
+            },
+            children: "TEXT SETTINGS"
+          }), /*#__PURE__*/_jsx(Grid, {
+            sx: classes.textFormatLabel,
+            justifyContent: "end",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              className: "close-popupbtn",
+              onClick: handleClose,
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })
+          })]
+        }), toolTextFormat]
+      })
     })
   });
+
+  //   return (
+  //     <Drawer
+  //       // id={id}
+  //       open={open}
+  //       fullWidth
+  //       // disablePortal={false}
+  //       // anchorEl={anchorEl}
+  //       // transition
+  //       // placement="bottom-start"
+  //       // onMouseDown={(e) => e.preventDefault()}
+  //       // sx={classes.popupWrapper}
+  //       anchor="right"
+  //       hideBackdrop
+  //       // handleClose={handleClose}
+  //       className="tools-drawer"
+  //       // variant="persistent"
+  //     >
+  //       <TextFormat editor={editor} classes={classes} onClose={handleClose} />
+  //     </Drawer>
+  //   );
 };
+
 export default PopupTool;

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

@@ -90,16 +90,16 @@ const appHeaderStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text",
+    label: "Text Color",
     key: "textColor",
     type: "color",
-    needPreview: true
+    needPreview: false
   }, {
-    label: "Background",
+    label: "Background Color",
     key: "bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Border Color",
     key: "borderColor",
     type: "color"
   }]
@@ -107,16 +107,16 @@ const appHeaderStyle = [{
   tab: "Hover Colors",
   value: "hoverColors",
   fields: [{
-    label: "Text",
+    label: "Hover Text Color",
     key: "textColorHover",
     type: "color",
-    needPreview: true
+    needPreview: false
   }, {
-    label: "Background",
+    label: "Hover Background Color",
     key: "bgColorHover",
     type: "color"
   }, {
-    label: "Border",
+    label: "Hover Border Color",
     key: "borderColorHover",
     type: "color"
   }]

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

@@ -40,7 +40,7 @@ const BannerSpacing = props => {
     });
   };
   const maxCap = val => {
-    return val > 100 ? 32 : val;
+    return val > 24 ? 24 : val;
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
@@ -69,7 +69,7 @@ const BannerSpacing = props => {
         children: /*#__PURE__*/_jsxs("div", {
           style: {
             width: "100px",
-            height: "100px",
+            height: "50px",
             // border: "1px solid #495efc",
             backgroundColor: "transparent",
             position: "relative",

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

@@ -1,5 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const gridItemStyle = [{
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text Color",
+    key: "textColor",
+    type: "color",
+    needPreview: false
+  }, {
+    label: "Background Color",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border Color",
+    key: "borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Hover Background Color",
+    key: "bgColorHover",
+    type: "color"
+  }, {
+    label: "Hover Border Color",
+    key: "borderColorHover",
+    type: "color"
+  }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
+}, {
   tab: "Margin",
   value: "margin",
   fields: [{
@@ -50,43 +87,6 @@ const gridItemStyle = [{
       });
     }
   }]
-}, {
-  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: "Hover Colors",
-  value: "hoverColors",
-  fields: [{
-    label: "Background",
-    key: "bgColorHover",
-    type: "color"
-  }, {
-    label: "Border",
-    key: "borderColorHover",
-    type: "color"
-  }]
-}, {
-  tab: "Position",
-  value: "position",
-  fields: [{
-    label: "Set Postion (Vertical & Horizantal)",
-    key: "alignment",
-    type: "alignment"
-  }]
 }, {
   tab: "Size",
   value: "gridSize",

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

@@ -3,11 +3,52 @@ const gridStyle = [{
   tab: "General",
   value: "general",
   fields: [{
-    label: "Section ID",
+    label: "Section Name",
     key: "id",
     type: "text",
     placeholder: "Id should be unique for the page..."
   }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text Color",
+    key: "textColor",
+    type: "color",
+    needPreview: false
+  }, {
+    label: "Background Color",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Foreground Color",
+    key: "fgColor",
+    type: "color"
+  }, {
+    label: "Border Color",
+    key: "borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
+}, {
+  tab: "Background",
+  value: "backgroundImage",
+  fields: [{
+    label: "Background Image URL",
+    key: "backgroundImage",
+    type: "text"
+  }, {
+    label: "Background Image",
+    key: "backgroundImage",
+    type: "backgroundImage"
+  }]
 }, {
   tab: "Padding",
   value: "bannerSpacing",
@@ -51,47 +92,6 @@ const gridStyle = [{
       });
     }
   }]
-}, {
-  tab: "Colors",
-  value: "colors",
-  fields: [{
-    label: "Text",
-    key: "textColor",
-    type: "color",
-    needPreview: true
-  }, {
-    label: "Background",
-    key: "bgColor",
-    type: "color"
-  }, {
-    label: "Foreground Color",
-    key: "fgColor",
-    type: "color"
-  }, {
-    label: "Border",
-    key: "borderColor",
-    type: "color"
-  }]
-}, {
-  tab: "Position",
-  value: "position",
-  fields: [{
-    label: "Set Postion (Vertical & Horizantal)",
-    key: "alignment",
-    type: "alignment"
-  }]
-}, {
-  tab: "Background",
-  value: "backgroundImage",
-  fields: [{
-    label: "URL",
-    key: "backgroundImage",
-    type: "text"
-  }, {
-    label: "Background Image",
-    key: "backgroundImage",
-    type: "backgroundImage"
-  }]
 }, {
   tab: "Save As Template",
   value: "saveAsTemplate",

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

@@ -161,8 +161,8 @@ const StyleBuilder = props => {
         })
       }), /*#__PURE__*/_jsx(DialogContent, {
         sx: {
-          p: 0,
-          maxHeight: `${window.innerHeight - 150}px`
+          p: 2,
+          maxHeight: `${window.innerHeight - 125}px`
           // padding: "16px",
         },
         children: renderTabs.map((m, i) => {
@@ -178,7 +178,8 @@ const StyleBuilder = props => {
       }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {
         sx: {
           p: 0,
-          pt: 2
+          pt: 2,
+          justifyContent: "space-between"
         },
         children: [onDelete ? /*#__PURE__*/_jsx(Button, {
           onClick: onDelete,
@@ -186,10 +187,6 @@ const StyleBuilder = props => {
           className: "deleteBtn",
           children: "Delete"
         }) : null, /*#__PURE__*/_jsx(Button, {
-          onClick: onClose,
-          className: "secondaryBtn",
-          children: "Cancel"
-        }), /*#__PURE__*/_jsx(Button, {
           onClick: handleSave,
           className: "primaryBtn",
           children: "Save"

package/dist/Editor/common/iconslist.js

@@ -1289,4 +1289,96 @@ export const DirectionReverseIcon = props => /*#__PURE__*/_jsxs("svg", {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   })]
+});
+export const GridSettingsIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "22",
+  height: "22",
+  viewBox: "0 0 22 22",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75Z",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M1.8335 11.8066V10.1933C1.8335 9.23998 2.61266 8.45165 3.57516 8.45165C5.23433 8.45165 5.91266 7.27832 5.0785 5.83915C4.60183 5.01415 4.886 3.94165 5.72016 3.46498L7.306 2.55748C8.03016 2.12665 8.96516 2.38332 9.396 3.10748L9.49683 3.28165C10.3218 4.72082 11.6785 4.72082 12.5127 3.28165L12.6135 3.10748C13.0443 2.38332 13.9793 2.12665 14.7035 2.55748L16.2893 3.46498C17.1235 3.94165 17.4077 5.01415 16.931 5.83915C16.0968 7.27832 16.7752 8.45165 18.4343 8.45165C19.3877 8.45165 20.176 9.23082 20.176 10.1933V11.8066C20.176 12.76 19.3968 13.5483 18.4343 13.5483C16.7752 13.5483 16.0968 14.7216 16.931 16.1608C17.4077 16.995 17.1235 18.0583 16.2893 18.535L14.7035 19.4425C13.9793 19.8733 13.0443 19.6166 12.6135 18.8925L12.5127 18.7183C11.6877 17.2791 10.331 17.2791 9.49683 18.7183L9.396 18.8925C8.96516 19.6166 8.03016 19.8733 7.306 19.4425L5.72016 18.535C4.886 18.0583 4.60183 16.9858 5.0785 16.1608C5.91266 14.7216 5.23433 13.5483 3.57516 13.5483C2.61266 13.5483 1.8335 12.76 1.8335 11.8066Z",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const GridAddGridIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M6.75 16.5H11.25C15 16.5 16.5 15 16.5 11.25V6.75C16.5 3 15 1.5 11.25 1.5H6.75C3 1.5 1.5 3 1.5 6.75V11.25C1.5 15 3 16.5 6.75 16.5Z",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M1.5 9H16.5",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M6.1875 9V16.125",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M11.8125 16.5V9",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M6.1875 9V1.5",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M11.8125 9.00027V1.90527",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.1733 6.125V14.875",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M5.79834 10.5H14.5483",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
 });

package/package.json

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