@flozy/editor 1.3.4 → 1.3.7

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { Transforms } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { IconButton, Tooltip, Grid } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import SettingsIcon from "@mui/icons-material/Settings";
+import FormElements from "./FormElements";
+import FieldPopup from "./FieldPopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FormField = props => {
+  const {
+    attributes,
+    element,
+    customProps
+  } = props;
+  const {
+    readOnly
+  } = customProps;
+  const {
+    element: elementType,
+    grid,
+    children,
+    ...elementProps
+  } = element;
+  const FormElement = FormElements[elementType];
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const [openSetttings, setOpenSettings] = useState(false);
+  const itemWidth = (grid || 6) / 12 * 100;
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const FieldToolbar = () => {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "",
+      contentEditable: false,
+      style: {
+        position: "absolute",
+        right: "0px",
+        top: "16px",
+        bottom: 0,
+        margin: "auto",
+        height: "42px",
+        zIndex: 101
+      },
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Field Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete Field",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    ...attributes,
+    className: "form-field",
+    style: {
+      position: "relative",
+      width: `${itemWidth}%`
+    },
+    children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
+      fieldProps: elementProps
+    }), openSetttings ? /*#__PURE__*/_jsx(FieldPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose
+    }) : null]
+  });
+};
+export default FormField;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import formStyle from "../../common/StyleBuilder/formStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Form",
+    type: "formStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: formStyle
+  });
+};
+export default FormPopup;

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

@@ -36,7 +36,8 @@ const Grid = props => {
   } = bannerSpacing || {};
   const {
     vertical,
-    horizantal
+    horizantal,
+    flexDirection
   } = alignment || {};
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -119,7 +120,7 @@ const Grid = props => {
     }) : null;
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: `grid-container ${grid}`,
+    className: `grid-container ${grid} element-root`,
     ...attributes,
     style: {
       background: bgColor,
@@ -127,7 +128,11 @@ const Grid = props => {
       backgroundImage: backgroundImage && backgroundImage !== "none" ? `url(${backgroundImage})` : "none",
       border: `1px solid ${borderColor}`
     },
-    children: [!readOnly && /*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
+    children: [!readOnly && /*#__PURE__*/_jsx("div", {
+      className: `element-selector ${selected ? "selected" : ""}`,
+      contentEditable: false,
+      children: /*#__PURE__*/_jsx(GridToolBar, {})
+    }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose,
@@ -139,7 +144,9 @@ const Grid = props => {
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
         paddingBottom: `${bottom}px`,
+        alignItems: horizantal,
         justifyContent: horizantal,
+        flexDirection: flexDirection,
         width: "100%"
       },
       children: children

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Dialog, DialogContent, DialogTitle, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
+import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
 import { insertGrid } from "../../utils/grid";
 import { GridIcon } from "../../common/iconslist";
 import { ImageList, ImageListItem } from "@mui/material";
@@ -33,9 +33,13 @@ const GridButton = props => {
   };
   const handleInsertGrid = item => () => {
     try {
-      let template_content = item ? JSON.parse(item.content) : null;
-      template_content = Array.isArray(template_content) ? template_content : [template_content];
-      insertGrid(editor, template_content);
+      if (item) {
+        let template_content = item ? JSON.parse(item.content) : null;
+        template_content = Array.isArray(template_content) ? template_content : [template_content];
+        insertGrid(editor, template_content);
+      } else {
+        insertGrid(editor);
+      }
       handleClose();
     } catch (err) {
       console.log(err);
@@ -60,7 +64,22 @@ const GridButton = props => {
       onClose: handleClose,
       fullWidth: true,
       children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: "Templates"
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 6,
+            children: "Templates"
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: 6,
+            textAlign: "right",
+            children: /*#__PURE__*/_jsx(Button, {
+              onClick: handleInsertGrid(null),
+              children: "Insert Default Template"
+            })
+          })]
+        })
       }), /*#__PURE__*/_jsx(DialogContent, {
         children: /*#__PURE__*/_jsx(ImageList, {
           variant: "quilted",

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

@@ -89,26 +89,33 @@ const GridItem = props => {
     }
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: `grid-item xs-${grid}`,
+    className: `grid-item xs-${grid} element-root`,
     ...attributes,
     style: {
       display: "flex",
       flexDirection: "column",
       backgroundColor: bgColor,
       alignItems: horizantal,
-      alignContent: vertical,
+      justifyContent: vertical,
       width: `${itemWidth}%`,
       margin: "0px"
     },
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [!readOnly && /*#__PURE__*/_jsx("div", {
+      className: `element-selector ${selected ? "selected" : ""}`,
+      contentEditable: false,
+      children: /*#__PURE__*/_jsx(GridItemToolbar, {})
+    }), /*#__PURE__*/_jsx("div", {
       style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
         paddingLeft: `${left}px`,
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
         paddingBottom: `${bottom}px`
       },
       children: children
-    }), !readOnly && /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
+    }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose

package/dist/Editor/Toolbar/Toolbar.js

@@ -21,6 +21,7 @@ import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
 import CarouselButton from "../Elements/Carousel/CarouselButton";
 import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
 import "./styles.css";
+import FormButton from "../Elements/Form/FormButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
@@ -148,6 +149,11 @@ const Toolbar = props => {
               editor: editor,
               customProps: customProps
             }, element.id);
+          case "form":
+            return /*#__PURE__*/_jsx(FormButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
           default:
             return null;
         }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -151,5 +151,8 @@ const toolbarGroups = [[{
 }, {
   id: 37,
   type: "app-header"
+}, {
+  id: 38,
+  type: "form"
 }]];
 export default toolbarGroups;

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

@@ -1,10 +1,20 @@
 const buttonStyle = [{
-  tab: "Content",
-  value: "content",
+  tab: "General",
+  value: "size",
   fields: [{
     label: "Button Text",
     key: "label",
     type: "text"
+  }, {
+    label: "Text Size",
+    key: "textSize",
+    type: "text",
+    placeholder: "16px or 1em"
+  }, {
+    label: "Text Align",
+    key: "textAlign",
+    type: "textAlign",
+    placeholder: "16px or 1em"
   }]
 }, {
   tab: "Link",
@@ -14,6 +24,22 @@ const buttonStyle = [{
     key: "buttonLink",
     type: "buttonLink"
   }]
+}, {
+  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",

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

@@ -0,0 +1,71 @@
+const fieldStyle = [{
+  tab: "General",
+  value: "general",
+  fields: [{
+    label: "Field Name",
+    key: "name",
+    type: "text"
+  }, {
+    label: "Field Type",
+    key: "element",
+    type: "textOptions",
+    options: [{
+      label: "Textbox",
+      value: "text"
+    }]
+  }, {
+    label: "Placeholder",
+    key: "placeholder",
+    type: "text"
+  }]
+}, {
+  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: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
+}, {
+  tab: "Size",
+  value: "gridSize",
+  fields: [{
+    label: "Grid Size",
+    key: "grid",
+    type: "gridSize"
+  }]
+}];
+export default fieldStyle;

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

@@ -89,6 +89,34 @@ const Alignment = props => {
           })]
         })]
       })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-row-radio-buttons-group-label",
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            children: "Flex Direction"
+          })
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          name: "flexDirection",
+          value: value?.flexDirection || "row",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "row",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Row"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "column",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Column"
+          })]
+        })]
+      })
     })]
   });
 };

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

@@ -10,6 +10,9 @@ import ImageTexts from "./imageTexts";
 import MenusArray from "./menusArray";
 import ButtonLink from "./buttonLink";
 import SaveAsTemplate from "./saveAsTemplate";
+import TextAlign from "./textAlign";
+import TextOptions from "./textOptions";
+import SelectBox from "./selectBox";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -22,6 +25,9 @@ const FieldMap = {
   imageTexts: ImageTexts,
   menusArray: MenusArray,
   buttonLink: ButtonLink,
-  saveAsTemplate: SaveAsTemplate
+  saveAsTemplate: SaveAsTemplate,
+  textAlign: TextAlign,
+  textOptions: TextOptions,
+  selectBox: SelectBox
 };
 export default FieldMap;

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

@@ -81,7 +81,8 @@ const SaveAsTemplate = props => {
         name: "title",
         value: template?.title,
         onChange: onChange,
-        placeholder: "Template Title"
+        placeholder: "Template Title",
+        fullWidth: true
       })
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -104,7 +105,7 @@ const SaveAsTemplate = props => {
       })
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
-      xs: 212,
+      xs: 12,
       children: /*#__PURE__*/_jsx(TextField, {
         fullWidth: true,
         name: "category",

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { Grid, Checkbox, FormControlLabel } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectBox = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key,
+    placeholder
+  } = data;
+  const handleChange = e => {
+    onChange({
+      [key]: e.target.checked
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    padding: 1,
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsx(FormControlLabel, {
+        control: /*#__PURE__*/_jsx(Checkbox, {
+          value: value,
+          onChange: handleChange
+        }),
+        label: placeholder
+      })
+    })
+  });
+};
+export default SelectBox;

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

@@ -9,7 +9,8 @@ const Text = props => {
     onChange
   } = props;
   const {
-    key
+    key,
+    placeholder
   } = data;
   const handleChange = e => {
     onChange({
@@ -29,7 +30,7 @@ const Text = props => {
         variant: "body1",
         color: "textSecondary",
         sx: {
-          fontSize: '14px'
+          fontSize: "14px"
         },
         children: data?.label
       })
@@ -38,6 +39,7 @@ const Text = props => {
       xs: 12,
       children: /*#__PURE__*/_jsx(TextField, {
         name: key,
+        placeholder: placeholder || "",
         type: "text",
         value: value,
         onChange: handleChange,

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TextAlign = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    onChange({
+      [key]: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    style: {
+      paddingTop: "12px"
+    },
+    spacing: 1,
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-row-radio-buttons-group-label",
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            children: "Text Alignment"
+          })
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-row-radio-buttons-group-label",
+          name: "textAlign",
+          value: value || "left",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "left",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Left"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "center",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Center"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "right",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Right"
+          })]
+        })]
+      })
+    })
+  });
+};
+export default TextAlign;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Grid, MenuItem, Select } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextOptions = props => {
+  const {
+    data,
+    onChange,
+    elementProps
+  } = props;
+  const {
+    key,
+    options
+  } = data;
+  const {
+    element: elementType
+  } = elementProps;
+  const handleChange = e => {
+    onChange({
+      [key]: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        padding: "10px"
+      },
+      children: /*#__PURE__*/_jsx(Select, {
+        onChange: handleChange,
+        value: elementType,
+        placeholder: data?.label,
+        fullWidth: true,
+        size: "small",
+        children: options.map(m => {
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: m.value,
+            children: m.label
+          }, `${key}_${m.value}`);
+        })
+      })
+    })
+  });
+};
+export default TextOptions;