@flozy/editor 1.3.7 → 1.4.1

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",
@@ -24,6 +39,25 @@ const buttonStyle = [{
     key: "buttonLink",
     type: "buttonLink"
   }]
+}, {
+  tab: "Icon",
+  value: "icon",
+  fields: [{
+    label: "Icon Position",
+    key: "iconPosition",
+    type: "textOptions",
+    options: [{
+      value: "start",
+      label: "Start"
+    }, {
+      value: "end",
+      label: "End"
+    }]
+  }, {
+    label: "Button Icons",
+    key: "buttonIcon",
+    type: "icons"
+  }]
 }, {
   tab: "Position",
   value: "position",
@@ -73,6 +107,23 @@ const buttonStyle = [{
     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: "Save As Template",
   value: "saveAsTemplate",

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/alignment.js

@@ -104,7 +104,7 @@ const Alignment = props => {
           row: true,
           "aria-labelledby": "demo-row-radio-buttons-group-label",
           name: "flexDirection",
-          value: value?.flexDirection || "row",
+          value: value?.flexDirection || "column",
           onChange: handleChange,
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "row",

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/icons.js

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
+import * as fIcons from "@mui/icons-material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
+  if (b.indexOf("Outlined") > -1) {
+    a.outlined.push(b);
+  } else if (b.indexOf("Rounded") > -1) {
+    a.rounded.push(b);
+  } else if (b.indexOf("Sharp") > -1) {
+    a.sharp.push(b);
+  } else if (b.indexOf("TwoTone") > -1) {
+    a.tt.push(b);
+  } else {
+    a.filled.push(b);
+  }
+  return a;
+}, {
+  filled: [],
+  outlined: [],
+  rounded: [],
+  tt: [],
+  sharp: []
+});
+const Icons = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const [val, setVal] = useState("");
+  const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
+  const onSelectIcon = ico => () => {
+    onChange({
+      [key]: ico
+    });
+  };
+  const handleChange = e => {
+    const keyVal = e.target.value?.toLowerCase();
+    setVal(keyVal);
+    if (keyVal) {
+      setList(MUIIcons.filled.filter(f => {
+        return f.toLowerCase().indexOf(keyVal) > -1;
+      }).slice(0, 90));
+    } else {
+      setList(MUIIcons.filled.slice(0, 90));
+    }
+  };
+  const SelectedIcon = value ? fIcons[value] : null;
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "12px"
+        },
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 10,
+          children: /*#__PURE__*/_jsx(TextField, {
+            fullWidth: true,
+            size: "small",
+            placeholder: "Search Icons...",
+            value: val,
+            onChange: handleChange
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 2,
+          style: {
+            paddingLeft: "8px"
+          },
+          children: SelectedIcon && /*#__PURE__*/_jsx(SelectedIcon, {})
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      textAlign: "center",
+      style: {
+        maxHeight: "200px",
+        overflowY: "auto"
+      },
+      children: list.map(m => {
+        const Ico = fIcons[m];
+        return /*#__PURE__*/_jsx(Tooltip, {
+          title: m,
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onSelectIcon(m),
+            children: /*#__PURE__*/_jsx(Ico, {})
+          })
+        }, `mui_ico_${m}`);
+      })
+    })]
+  });
+};
+export default Icons;

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

@@ -13,6 +13,7 @@ import SaveAsTemplate from "./saveAsTemplate";
 import TextAlign from "./textAlign";
 import TextOptions from "./textOptions";
 import SelectBox from "./selectBox";
+import Icons from "./icons";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -28,6 +29,7 @@ const FieldMap = {
   saveAsTemplate: SaveAsTemplate,
   textAlign: TextAlign,
   textOptions: TextOptions,
-  selectBox: SelectBox
+  selectBox: SelectBox,
+  icons: Icons
 };
 export default FieldMap;

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

@@ -1,19 +1,18 @@
 import React from "react";
-import { Grid, MenuItem, Select } from "@mui/material";
+import { FormControlLabel, 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 => {
   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
@@ -21,25 +20,31 @@ const TextOptions = props => {
   };
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       style: {
         padding: "10px"
       },
-      children: /*#__PURE__*/_jsx(Select, {
+      children: [/*#__PURE__*/_jsx("label", {
+        style: {
+          marginBottom: "8px",
+          display: "flex"
+        },
+        children: data?.label
+      }), /*#__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/common/StyleBuilder/index.js

@@ -30,7 +30,7 @@ const StyleContent = props => {
       style: {
         marginTop: "12px"
       },
-      children: [...fields].map(m => {
+      children: [...fields].map((m, i) => {
         const FieldComponent = FieldMap[m.type];
         return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
           data: m,
@@ -39,7 +39,7 @@ const StyleContent = props => {
           elementProps: element,
           customProps: customProps,
           handleClose: handleClose
-        }, `ei_stt_tab_${value}_${m.key}`) : null;
+        }, `ei_stt_tab_${value}_${m.key}_${i}`) : null;
       })
     })
   }, value);

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

@@ -7,11 +7,11 @@ const pageSettingsStyle = [{
     type: "color"
   }, {
     label: "Background URL",
-    key: "pageColor",
+    key: "pageBgImage",
     type: "text"
   }, {
     label: "Background Image",
-    key: "pageColor",
+    key: "pageBgImage",
     type: "backgroundImage"
   }, {
     label: "Background",

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);
@@ -166,7 +166,7 @@ export const getMarked = (leaf, children) => {
     });
   }
   if (leaf.fontSize) {
-    const size = sizeMap[leaf.fontSize];
+    const size = sizeMap[leaf.fontSize] || leaf.fontSize;
     children = /*#__PURE__*/_jsx("span", {
       style: {
         fontSize: size

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/dist/Editor/utils/grid.js

@@ -1,13 +1,7 @@
 import { Transforms } from "slate";
-import { gridItem } from "./gridItem";
+import default_grid from "../Elements/Grid/templates/default_grid";
 export const insertGrid = (editor, item) => {
-  const grid = !item ? {
-    type: "grid",
-    grid: "container",
-    children: [{
-      ...gridItem()
-    }]
-  } : item;
+  const grid = !item ? JSON.parse(default_grid) : item;
   const {
     selection
   } = editor;

package/package.json

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