@flozy/editor 1.4.1 → 1.4.2

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

@@ -40,7 +40,9 @@ function AppHeader(props) {
     menuStyle,
     bannerSpacing,
     fontSize,
-    fontFamily
+    fontFamily,
+    logoFontSize,
+    titleFontFamily
   } = element;
   const {
     left,
@@ -66,7 +68,8 @@ function AppHeader(props) {
       className: "element-toolbar",
       contentEditable: false,
       style: {
-        top: "-24px"
+        top: "-24px",
+        right: "50px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "App Header Settings",
@@ -113,9 +116,9 @@ function AppHeader(props) {
     children: [/*#__PURE__*/_jsx(Typography, {
       variant: "h6",
       sx: {
-        my: 2
+        my: 2,
+        color: textColor
       },
-      color: "primary",
       children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
         alt: `${appTitle} Logo`,
         style: {
@@ -178,7 +181,10 @@ function AppHeader(props) {
           color: "primary",
           style: {
             display: "inline-flex",
-            alignItems: "center"
+            alignItems: "center",
+            color: textColor,
+            fontSize: logoFontSize,
+            fontFamily: titleFontFamily
           },
           sx: {
             flexGrow: 1,

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

@@ -195,13 +195,13 @@ const Form = props => {
         spacing: 2,
         children: [children, /*#__PURE__*/_jsx(Grid, {
           item: true,
+          xs: buttonProps?.grid || 6,
           className: "form-btn-wrpr",
           contentEditable: false,
           style: {
             display: "flex",
             justifyContent: btnAlign?.horizantal || "start",
-            alignItems: btnAlign?.vertical || "start",
-            marginLeft: "0px"
+            alignItems: btnAlign?.vertical || "start"
           },
           children: /*#__PURE__*/_jsx("button", {
             onClick: onSubmitClick,

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { Grid } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormText = props => {
   const {
@@ -8,7 +7,8 @@ const FormText = props => {
   const {
     borderColor,
     bannerSpacing,
-    borderRadius
+    borderRadius,
+    height
   } = fieldProps;
   const {
     left,
@@ -22,13 +22,14 @@ const FormText = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  console.log(fieldProps);
   const onChange = e => {
     e.preventDefault();
   };
-  return /*#__PURE__*/_jsx(Grid, {
-    item: true,
-    xs: 12,
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      display: "flex"
+    },
     contentEditable: false,
     children: /*#__PURE__*/_jsx("input", {
       ...fieldProps,
@@ -40,7 +41,8 @@ const FormText = props => {
         paddingLeft: `${left || 8}px`,
         paddingRight: `${right || 8}px`,
         paddingTop: `${top || 8}px`,
-        paddingBottom: `${bottom || 8}px`
+        paddingBottom: `${bottom || 8}px`,
+        height: height || "auto"
       }
     })
   });

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormTextArea = props => {
+  const {
+    fieldProps
+  } = props;
+  const {
+    borderColor,
+    bannerSpacing,
+    borderRadius,
+    height
+  } = fieldProps;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
+  console.log(fieldProps);
+  const onChange = e => {
+    e.preventDefault();
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      display: "flex"
+    },
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx("textarea", {
+      ...fieldProps,
+      onChange: onChange,
+      style: {
+        width: "100%",
+        border: `1px solid ${borderColor || "#FFF"}`,
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        paddingLeft: `${left || 8}px`,
+        paddingRight: `${right || 8}px`,
+        paddingTop: `${top || 8}px`,
+        paddingBottom: `${bottom || 8}px`,
+        height: height || "150px"
+      }
+    })
+  });
+};
+export default FormTextArea;

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

@@ -1,5 +1,7 @@
 import FormText from "./FormText";
+import FormTextArea from "./FormTextArea";
 const FormElements = {
-  text: FormText
+  text: FormText,
+  textArea: FormTextArea
 };
 export default FormElements;

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

@@ -27,7 +27,6 @@ const FormField = props => {
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const [openSetttings, setOpenSettings] = useState(false);
-  const itemWidth = (grid || 6) / 12 * 100;
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -83,11 +82,11 @@ const FormField = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
+    xs: grid,
     ...attributes,
     className: "form-field",
     style: {
-      position: "relative",
-      width: `${itemWidth}%`
+      position: "relative"
     },
     children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
       fieldProps: elementProps

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,7 +21,17 @@ const GridItem = props => {
     grid,
     bannerSpacing,
     bgColor,
-    alignment
+    alignment,
+    gridHeight,
+    borderRadius,
+    borderStyle,
+    borderWidth,
+    borderColor,
+    margin,
+    textColorHover,
+    bgColorHover,
+    borderColorHover,
+    textColor
   } = element;
   const {
     left,
@@ -82,25 +92,36 @@ const GridItem = props => {
       });
     }
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: `grid-item xs-${grid} element-root`,
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "div",
+    className: `grid-item xs-${grid} element-root gi-top-wrpr`,
     ...attributes,
-    style: {
+    sx: {
       display: "flex",
       flexDirection: flexDirection || "column",
-      backgroundColor: bgColor,
+      backgroundColor: bgColor || "transparent",
       alignItems: horizantal,
       justifyContent: vertical,
       width: `${itemWidth}%`,
-      margin: "0px"
+      marginLeft: `${margin?.left || 0}px`,
+      marginRight: `${margin?.right || 0}px`,
+      marginTop: `${margin?.top || 0}px`,
+      marginBottom: `${margin?.bottom || 0}px`,
+      "&:hover": {
+        background: `${bgColorHover || bgColor || "transparent"}`,
+        "& *": {
+          color: textColorHover || textColor || "#000"
+        }
+      }
     },
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
       children: /*#__PURE__*/_jsx(GridItemToolbar, {})
-    }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsx(Box, {
       className: "gi-inner-cw",
-      style: {
+      component: "div",
+      sx: {
         display: "flex",
         flexDirection: flexDirection || "column",
         width: "100%",
@@ -108,7 +129,16 @@ const GridItem = props => {
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
         paddingBottom: `${bottom}px`,
-        justifyContent: vertical
+        justifyContent: vertical,
+        height: gridHeight || "auto",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: borderRadius || "0px",
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        "&:hover": {
+          borderColor: borderColorHover || borderColor || "transparent"
+        }
       },
       children: children
     }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {

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

@@ -8,6 +8,24 @@ const appHeaderStyle = [{
     key: "appTitle",
     type: "text",
     placeholder: "Leave Empty, If only Logo"
+  }, {
+    label: "Title Font Size",
+    key: "logoFontSize",
+    type: "text",
+    placeholder: "16px"
+  }, {
+    label: "Title Font Family",
+    key: "titleFontFamily",
+    type: "textOptions",
+    options: fontOptions,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }, {
     label: "App Logo URL",
     key: "appLogo",

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

@@ -12,6 +12,9 @@ const fieldStyle = [{
     options: [{
       label: "Textbox",
       value: "text"
+    }, {
+      label: "TextArea",
+      value: "textArea"
     }]
   }, {
     label: "Placeholder",
@@ -19,10 +22,10 @@ const fieldStyle = [{
     type: "text"
   }]
 }, {
-  tab: "Banner Spacing",
+  tab: "Padding",
   value: "bannerSpacing",
   fields: [{
-    label: "Banner Spacing",
+    label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
@@ -66,6 +69,11 @@ const fieldStyle = [{
     label: "Grid Size",
     key: "grid",
     type: "gridSize"
+  }, {
+    label: "Height",
+    key: "height",
+    type: "text",
+    placeholder: "40px"
   }]
 }];
 export default fieldStyle;

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

@@ -41,15 +41,22 @@ const BannerSpacing = props => {
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     padding: 4,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       sx: {
         pb: 2,
         display: "flex",
-        justifyContent: "center"
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center"
       },
-      children: /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("label", {
+        style: {
+          fontSize: "12px"
+        },
+        children: data?.label
+      }), /*#__PURE__*/_jsxs("div", {
         style: {
           width: "100px",
           height: "100px",
@@ -148,7 +155,7 @@ const BannerSpacing = props => {
           onClick: onLockSpacing,
           children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
         })]
-      })
+      })]
     })
   });
 };

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

@@ -42,15 +42,22 @@ const BorderRadius = props => {
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     padding: 4,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       style: {
-        display: "flex"
+        display: "flex",
+        flexDirection: "column"
       },
       justifyContent: "center",
       alignContent: "center",
-      children: /*#__PURE__*/_jsxs("div", {
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx("label", {
+        style: {
+          fontSize: "12px"
+        },
+        children: data?.label
+      }), /*#__PURE__*/_jsxs("div", {
         style: {
           width: "100px",
           height: "100px",
@@ -137,7 +144,7 @@ const BorderRadius = props => {
           onClick: onLockRadius,
           children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
         })]
-      })
+      })]
     })
   });
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControlLabel, Grid, MenuItem, Select } from "@mui/material";
+import { Grid, MenuItem, Select } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TextOptions = props => {

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

@@ -80,6 +80,14 @@ const formButtonStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Size",
+  value: "gridSize",
+  fields: [{
+    label: "Grid Size",
+    key: "grid",
+    type: "gridSize"
+  }]
 }, {
   tab: "Save As Template",
   value: "saveAsTemplate",

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

@@ -1,18 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 const gridItemStyle = [{
-  tab: "Banner Spacing",
+  tab: "Margin",
+  value: "margin",
+  fields: [{
+    label: "Margin",
+    key: "margin",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Padding",
   value: "bannerSpacing",
   fields: [{
-    label: "Banner Spacing",
+    label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
     label: "Border Radius",
     key: "borderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Colors",
@@ -31,6 +67,23 @@ const gridItemStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Text",
+    key: "textColorHover",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColorHover",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColorHover",
+    type: "color"
+  }]
 }, {
   tab: "Position",
   value: "position",
@@ -46,6 +99,11 @@ const gridItemStyle = [{
     label: "Grid Size",
     key: "grid",
     type: "gridSize"
+  }, {
+    label: "Grid Height",
+    key: "gridHeight",
+    type: "text",
+    placeholder: "100px"
   }]
 }];
 export default gridItemStyle;

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 const gridStyle = [{
   tab: "General",
   value: "general",
@@ -8,20 +9,47 @@ const gridStyle = [{
     placeholder: "Id should be unique for the page..."
   }]
 }, {
-  tab: "Banner Spacing",
+  tab: "Padding",
   value: "bannerSpacing",
   fields: [{
-    label: "Banner Spacing",
+    label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
-    label: "Border Radius",
+    label: "Border",
     key: "borderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Colors",

package/dist/Editor/utils/form.js

@@ -8,6 +8,14 @@ export const insertForm = (editor, item) => {
     props: {
       onSubmit: null
     },
+    buttonProps: {
+      bannerSpacing: {
+        left: 12,
+        right: 12,
+        top: 12,
+        bottom: 12
+      }
+    },
     children: [{
       ...formField()
     }, {

package/dist/Editor/utils/formfield.js

@@ -9,7 +9,13 @@ export const formField = () => {
     children: [{
       text: ""
     }],
-    bgColor: "rgba(255, 255, 255, 0)"
+    bgColor: "rgba(255, 255, 255, 0)",
+    bannerSpacing: {
+      left: 16,
+      right: 16,
+      top: 16,
+      bottom: 16
+    }
   };
 };
 export const insertGridItem = editor => {

package/package.json

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