@flozy/editor 1.3.5 → 1.3.7

package/dist/Editor/CommonEditor.js

@@ -184,7 +184,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const isReadOnly = readOnly === "readonly";
   const customProps = {
     ...(otherProps || {}),
-    readOnly: isReadOnly
+    readOnly: isReadOnly,
+    page_id: id
   };
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {

package/dist/Editor/Editor.css

@@ -396,6 +396,15 @@ blockquote {
   width: auto !important;
 }
 @media (max-width: 480px) {
+  body {
+    padding: 0px !important;
+  }
+  .app-logo {
+    justify-content: end;
+  }
+  .editor-t-wrapper {
+    padding: 0px 0px !important;
+  }
   .toolbar {
     display: flex;
     flex-wrap: nowrap;
@@ -405,9 +414,32 @@ blockquote {
   .toolbar-grp1 > div {
     display: flex;
   }
+  .grid-container > div {
+    flex-direction: column !important;
+  }
   .grid-item {
     width: 100% !important;
   }
+  .grid-item > div {
+    text-align: center;
+  }
+  .page-builder .editor-wrapper {
+    max-width: 100% !important;
+    margin-top: 0px !important;
+    padding: 0px !important;
+  }
+  .embed {
+    justify-content: center;
+  }
+  .embed img {
+    object-fit: contain;
+  }
+  form .form-field {
+    width: 100% !important;
+  }
+  .form-btn-wrpr {
+    justify-content: center !important;
+  }
 }
 
 .editorTabs {
@@ -476,11 +508,11 @@ blockquote {
   position: absolute;
   width: calc(100% + 16px);
   height: calc(100% + 16px);
-  border: 4px solid #2684ff;
+  border: 4px dotted #2684ff;
   display: none;
   pointer-events: none;
-  top: -12px;
-  left: -12px;
+  top: -8px;
+  left: -8px;
   z-index: 100;
 }
 
@@ -502,4 +534,4 @@ blockquote {
 
 .empty-carousel-wrapper .grid-item-toolbar {
   left: 0px;
-}
+}

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

@@ -160,6 +160,7 @@ function AppHeader(props) {
               sm: "block"
             }
           },
+          className: "app-logo",
           children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
             alt: `${appTitle} Logo`,
             style: {

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

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

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

@@ -0,0 +1,268 @@
+import React, { useState, useRef } from "react";
+import { Transforms } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } 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 FormPopup from "./FormPopup";
+import ButtonPopup from "../Button/ButtonPopup";
+import { formField } from "../../utils/formfield";
+import { formSubmit } from "../../service/formSubmit";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Form = props => {
+  const {
+    attributes,
+    children,
+    element,
+    customProps
+  } = props;
+  const {
+    readOnly,
+    page_id
+  } = customProps;
+  const {
+    buttonProps,
+    textColor,
+    formName
+  } = element;
+  const btnR = buttonProps?.borderRadius || {};
+  const btnSpacing = buttonProps?.bannerSpacing || {};
+  const btnAlign = buttonProps?.alignment || {};
+  const btnM = buttonProps?.marginSpacing || {};
+  const editor = useSlateStatic();
+  const formEle = useRef();
+  const [openSetttings, setOpenSettings] = useState(false);
+  const [editButton, setEditButton] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const path = ReactEditor.findPath(editor, element);
+  const btnBorderStyle = buttonProps?.borderColor?.indexOf("linear") >= 0 ? {
+    borderImageSource: buttonProps?.borderColor,
+    borderImageSlice: 1
+  } : {
+    borderColor: buttonProps?.borderColor || "none"
+  };
+  const handleSubmit = async (event, test = false) => {
+    if (event) {
+      event.preventDefault();
+    }
+    if ((readOnly || test) && formEle && formEle?.current) {
+      const formData = new FormData(formEle?.current);
+      setLoading(true);
+      let params = {
+        page_id: page_id
+      };
+      for (let pair of formData.entries()) {
+        params = {
+          ...params,
+          [pair[0]]: pair[1]
+        };
+      }
+      const result = await formSubmit(params);
+      console.log(result);
+      setLoading(false);
+    }
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const path = ReactEditor.findPath(editor, element);
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onAddFormField = () => {
+    try {
+      Transforms.insertNodes(editor, {
+        ...formField()
+      }, {
+        at: [...path, children.length]
+      });
+    } catch (err) {
+      console.log(err, "Add Field Error in Form Builder");
+    }
+  };
+  const onDelete = () => {
+    if (path) {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+  };
+  const onSaveButtonSettings = data => {
+    onSave({
+      buttonProps: {
+        ...data
+      }
+    });
+    onCloseButtonSettings();
+  };
+  const onCloseButtonSettings = () => {
+    setAnchorEl(null);
+    setEditButton(false);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const onMenuClick = menuName => () => {
+    switch (menuName) {
+      case "edit":
+        setEditButton(true);
+        break;
+      case "close":
+        setEditButton(false);
+        break;
+      case "test":
+        // test submit form
+        handleSubmit(null, true);
+        break;
+      default:
+        return;
+    }
+  };
+  const onSubmitClick = e => {
+    if (readOnly) {
+      // submit the form
+    } else {
+      setAnchorEl(e.currentTarget);
+    }
+  };
+  const FormToolbar = () => {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "",
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Form Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Add Form Field",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onAddFormField,
+          children: /*#__PURE__*/_jsx(AddIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete Form",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
+      })]
+    });
+  };
+  console.log(element);
+  return /*#__PURE__*/_jsxs("div", {
+    ...attributes,
+    className: "form-wrapper element-root",
+    style: {
+      border: !readOnly ? "1px dotted red" : "none",
+      padding: "10px"
+    },
+    children: [!readOnly && /*#__PURE__*/_jsx(FormToolbar, {}), /*#__PURE__*/_jsxs("form", {
+      id: `form_${formName}`,
+      onSubmit: handleSubmit,
+      style: {
+        color: textColor || "#FFF"
+      },
+      ref: formEle,
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        spacing: 2,
+        children: [children, /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          className: "form-btn-wrpr",
+          contentEditable: false,
+          style: {
+            display: "flex",
+            flex: 1,
+            justifyContent: btnAlign?.horizantal || "start",
+            alignItems: btnAlign?.vertical || "start",
+            marginLeft: "0px"
+          },
+          children: /*#__PURE__*/_jsx("button", {
+            onClick: onSubmitClick,
+            disabled: loading,
+            style: {
+              background: buttonProps?.bgColor || "rgb(30, 75, 122)",
+              borderWidth: "1px",
+              borderBlockStyle: "solid",
+              ...btnBorderStyle,
+              borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
+              paddingLeft: `${btnSpacing?.left || 8}px`,
+              paddingRight: `${btnSpacing?.right || 8}px`,
+              paddingTop: `${btnSpacing?.top || 8}px`,
+              paddingBottom: `${btnSpacing?.bottom || 8}px`,
+              marginLeft: `${btnM?.left || 0}px`,
+              marginRight: `${btnM?.right || 0}px`,
+              marginTop: `${btnM?.top || 0}px`,
+              marginBottom: `${btnM?.bottom || 0}px`,
+              color: `${buttonProps?.textColor || "#FFFFFF"}`,
+              fontSize: buttonProps?.textSize || "inherit",
+              height: "fit-content"
+            },
+            children: buttonProps?.label || "Submit"
+          })
+        })]
+      }), loading && /*#__PURE__*/_jsx("div", {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          background: "rgba(255,255,255,0.5)"
+        },
+        children: /*#__PURE__*/_jsx(CircularProgress, {
+          style: {
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            margin: "auto"
+          }
+        })
+      })]
+    }), openSetttings ? /*#__PURE__*/_jsx(FormPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose
+    }) : null, /*#__PURE__*/_jsxs(Menu, {
+      className: "editor-btn-options",
+      open: anchorEl !== null,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
+        onClick: onMenuClick("edit"),
+        children: "Settings"
+      }), /*#__PURE__*/_jsx(MenuItem, {
+        onClick: onMenuClick("test"),
+        children: "Test Submit Form"
+      })]
+    }), editButton && /*#__PURE__*/_jsx(ButtonPopup, {
+      element: buttonProps || {},
+      onSave: onSaveButtonSettings,
+      onClose: onCloseButtonSettings,
+      customProps: customProps
+    })]
+  });
+};
+export default Form;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { useSlateStatic } from "slate-react";
+import { IconButton, Tooltip } from "@mui/material";
+import FeedIcon from "@mui/icons-material/Feed";
+import { insertForm } from "../../utils/form";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormButton = props => {
+  const editor = useSlateStatic();
+  const onClick = () => {
+    insertForm(editor);
+  };
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: "Form",
+    arrow: true,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      onClick: onClick,
+      children: /*#__PURE__*/_jsx(FeedIcon, {})
+    })
+  });
+};
+export default FormButton;

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormText = props => {
+  const {
+    fieldProps
+  } = props;
+  const {
+    borderColor,
+    bannerSpacing,
+    borderRadius
+  } = fieldProps;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
+  console.log(fieldProps);
+  const onChange = e => {
+    e.preventDefault();
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 12,
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx("input", {
+      ...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`
+      }
+    })
+  });
+};
+export default FormText;

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

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

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/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,15 +1,11 @@
 const buttonStyle = [{
-  tab: "Content",
-  value: "content",
+  tab: "General",
+  value: "size",
   fields: [{
     label: "Button Text",
     key: "label",
     type: "text"
-  }]
-}, {
-  tab: "Size & Alignment",
-  value: "size",
-  fields: [{
+  }, {
     label: "Text Size",
     key: "textSize",
     type: "text",
@@ -28,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/index.js

@@ -11,6 +11,8 @@ 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,
@@ -24,6 +26,8 @@ const FieldMap = {
   menusArray: MenusArray,
   buttonLink: ButtonLink,
   saveAsTemplate: SaveAsTemplate,
-  textAlign: TextAlign
+  textAlign: TextAlign,
+  textOptions: TextOptions,
+  selectBox: SelectBox
 };
 export default FieldMap;

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/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;

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

@@ -0,0 +1,82 @@
+const formStyle = [{
+  tab: "General",
+  value: "general",
+  fields: [{
+    label: "Form Name",
+    key: "formName",
+    type: "text"
+  }, {
+    label: "Send Form to Email",
+    key: "email",
+    type: "text",
+    placeholder: "Enter Email to send the response..."
+  }, {
+    label: "Save Response",
+    key: "saveResponse",
+    type: "selectBox",
+    placeholder: "Save Response"
+  }]
+}, {
+  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: "Background",
+  value: "backgroundImage",
+  fields: [{
+    label: "URL",
+    key: "backgroundImage",
+    type: "text"
+  }, {
+    label: "Background Image",
+    key: "backgroundImage",
+    type: "backgroundImage"
+  }]
+}, {
+  tab: "Save As Template",
+  value: "saveAsTemplate",
+  needActions: false,
+  fields: [{
+    label: "Template Image",
+    key: "saveAsTemplate",
+    type: "saveAsTemplate"
+  }]
+}];
+export default formStyle;

package/dist/Editor/service/formSubmit.js

@@ -0,0 +1,16 @@
+export const formSubmit = async formData => {
+  try {
+    const response = await fetch(`/form/submit`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(formData)
+    });
+    const result = await response.json();
+    return result.data;
+  } catch (err) {
+    console.log(err);
+    return err;
+  }
+};

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -26,6 +26,8 @@ import DrawerMenu from "../Elements/DrawerMenu/DrawerMenu";
 import AppHeader from "../Elements/AppHeader/AppHeader";
 import PageSettings from "../Elements/PageSettings/PageSettings";
 import Title from "../Elements/Title/title";
+import Form from "../Elements/Form/Form";
+import FormField from "../Elements/Form/FormField";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -369,6 +371,14 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Title, {
         ...props
       });
+    case "form":
+      return /*#__PURE__*/_jsx(Form, {
+        ...props
+      });
+    case "form-field":
+      return /*#__PURE__*/_jsx(FormField, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,

package/dist/Editor/utils/form.js

@@ -0,0 +1,24 @@
+import { Transforms } from "slate";
+import { formField } from "./formfield";
+export const insertForm = (editor, item) => {
+  const grid = !item ? {
+    type: "form",
+    grid: "container",
+    formName: `form_${new Date().getTime()}`,
+    props: {
+      onSubmit: null
+    },
+    children: [{
+      ...formField()
+    }, {
+      text: ""
+    }]
+  } : item;
+  const {
+    selection
+  } = editor;
+  Transforms.insertNodes(editor, grid, {
+    at: selection.focus.path
+  });
+  Transforms.move(editor);
+};

package/dist/Editor/utils/formfield.js

@@ -0,0 +1,20 @@
+import { Transforms } from "slate";
+export const formField = () => {
+  return {
+    type: "form-field",
+    grid: 6,
+    element: "text",
+    name: `field_${new Date().getTime()}`,
+    placeholder: "Placeholder...",
+    children: [{
+      text: ""
+    }],
+    bgColor: "rgba(255, 255, 255, 0)"
+  };
+};
+export const insertGridItem = editor => {
+  Transforms.insertNodes(editor, {
+    ...formField()
+  });
+  Transforms.move(editor);
+};

package/package.json

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