@flozy/editor 1.3.5 → 1.4.0

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

@@ -0,0 +1,289 @@
+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 BackupIcon from "@mui/icons-material/Backup";
+import FormPopup from "./FormPopup";
+import ButtonPopup from "../Button/ButtonPopup";
+import { formField } from "../../utils/formfield";
+import { formSubmit } from "../../service/formSubmit";
+import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
+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 response = {};
+      for (let pair of formData.entries()) {
+        response = {
+          ...response,
+          [pair[0]]: pair[1]
+        };
+      }
+      let params = {
+        page_id: page_id,
+        form_id: `${formName}`,
+        response,
+        form_data: {
+          email: element?.email,
+          save_response: element?.saveResponse
+        }
+      };
+      await formSubmit(params, customProps);
+      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, {})
+        })
+      })]
+    });
+  };
+  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: `${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",
+            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",
+              fontFamily: buttonProps?.fontFamily || "PoppinsRegular"
+            },
+            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, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
+      className: "editor-btn-options",
+      open: anchorEl !== null,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      children: [/*#__PURE__*/_jsx(MenuItem, {
+        onClick: onMenuClick("edit"),
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Button Settings",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          })
+        })
+      }), /*#__PURE__*/_jsx(MenuItem, {
+        onClick: onMenuClick("test"),
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "Test Submit",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            children: /*#__PURE__*/_jsx(BackupIcon, {})
+          })
+        })
+      })]
+    }) : null, editButton && /*#__PURE__*/_jsx(ButtonPopup, {
+      element: buttonProps || {},
+      onSave: onSaveButtonSettings,
+      onClose: onCloseButtonSettings,
+      customProps: customProps,
+      style: formButtonStyle,
+      styleName: "formButtonStyle"
+    })]
+  });
+};
+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/Elements/Grid/Grid.js

@@ -4,7 +4,6 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
 import { IconButton, Tooltip } 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 { jsx as _jsx } from "react/jsx-runtime";
@@ -21,6 +20,7 @@ const Grid = props => {
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const {
+    id,
     grid,
     bannerSpacing,
     bgColor,
@@ -109,19 +109,16 @@ const Grid = props => {
           onClick: onAddGridItem,
           children: /*#__PURE__*/_jsx(AddIcon, {})
         })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete Grid",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDelete,
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
       })]
     }) : null;
   };
+  const sectionId = id ? {
+    id
+  } : {};
   return /*#__PURE__*/_jsxs("div", {
     className: `grid-container ${grid} element-root`,
     ...attributes,
+    ...sectionId,
     style: {
       background: bgColor,
       alignContent: vertical,
@@ -136,6 +133,7 @@ const Grid = props => {
       element: element,
       onSave: onSave,
       onClose: onClose,
+      onDelete: onDelete,
       customProps: customProps
     }) : null, /*#__PURE__*/_jsx("div", {
       style: {

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

@@ -3,7 +3,6 @@ import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,28 +38,21 @@ const GridItem = props => {
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
   const GridItemToolbar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "grid-item-toolbar",
       style: {
         top: "0px"
       },
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Grid Settings",
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Grid Item Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(SettingsIcon, {})
         })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete Grid",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDelete,
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
-      })]
+      })
     }) : null;
   };
   const onSettings = () => {
@@ -118,7 +110,8 @@ const GridItem = props => {
     }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,
       onSave: onSave,
-      onClose: onClose
+      onClose: onClose,
+      onDelete: onDelete
     }) : null]
   });
 };

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

@@ -6,7 +6,8 @@ const GridItemPopup = props => {
   const {
     element,
     onSave,
-    onClose
+    onClose,
+    onDelete
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: "Grid Item",
@@ -14,7 +15,8 @@ const GridItemPopup = props => {
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: gridItemStyle
+    renderTabs: gridItemStyle,
+    onDelete: onDelete
   });
 };
 export default GridItemPopup;

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

@@ -7,6 +7,7 @@ const GridPopup = props => {
     element,
     onSave,
     onClose,
+    onDelete,
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
@@ -16,7 +17,8 @@ const GridPopup = props => {
     onSave: onSave,
     onClose: onClose,
     renderTabs: gridStyle,
-    customProps: customProps
+    customProps: customProps,
+    onDelete: onDelete
   });
 };
 export default GridPopup;

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

@@ -5,6 +5,7 @@ import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";
 import usePopupStyle from "./PopupToolStyle";
+import useFormat from "../../utils/customHooks/useFormat";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = () => {
@@ -17,7 +18,9 @@ const PopupTool = () => {
   } = editor;
   const open = Boolean(anchorEl);
   const id = open ? "popup-edit-tool" : "";
+  console.log(useFormat(editor, null));
   useEffect(() => {
+    console.log(selection, inFocus);
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {

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;