@flozy/editor 1.3.4 → 1.3.7

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -5,7 +5,8 @@ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AccordionBtnPopup from "./AccordionBtnPopup";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } 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 Accordion = props => {
@@ -15,6 +16,9 @@ const Accordion = props => {
     element,
     customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [toggle, setToggle] = useState(false);
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -29,24 +33,42 @@ const Accordion = props => {
     setToggle(!toggle);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
-      className: "grid-container-toolbar",
+    return selected ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar hr",
       contentEditable: false,
       style: {
+        top: "-42px",
         left: "0px",
         display: "flex",
         width: "fit-content"
       },
-      children: /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: onSettings,
-        children: /*#__PURE__*/_jsx(SettingsIcon, {})
-      })
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
+      })]
     }) : null;
   };
   const onSettings = () => {
     setOpenSettings(true);
   };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   const onSave = data => {
     const updateData = {
       ...data
@@ -89,7 +111,7 @@ const Accordion = props => {
         display: toggle ? "block" : "none"
       },
       children: children[1]
-    }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
+    }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose,

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionTitlePopup from "./AccordionTitlePopup";
+import { IconButton, Tooltip } 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";
 const AccordionSummary = props => {
@@ -11,6 +13,9 @@ const AccordionSummary = props => {
     element,
     customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -22,11 +27,18 @@ const AccordionSummary = props => {
   } = element;
   const ToolBar = () => {
     return selected ? /*#__PURE__*/_jsx("div", {
-      className: "grid-container-toolbar",
+      className: "element-toolbar hr",
       contentEditable: false,
-      children: /*#__PURE__*/_jsx("button", {
-        onClick: onSettings,
-        children: "Settings"
+      style: {
+        top: "-42px"
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
       })
     }) : null;
   };
@@ -58,7 +70,7 @@ const AccordionSummary = props => {
       border: `1px solid ${borderColor}`,
       color: textColor
     },
-    children: [children, /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
+    children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
       element: element,
       onSave: onSave,
       onClose: onClose,

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

@@ -129,7 +129,8 @@ function AppHeader(props) {
       component: "nav",
       style: {
         position: "relative",
-        background: bgColor
+        background: bgColor,
+        boxShadow: "none"
       },
       children: /*#__PURE__*/_jsxs(Toolbar, {
         children: [/*#__PURE__*/_jsx(IconButton, {
@@ -159,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/Button/EditorButton.js

@@ -28,7 +28,9 @@ const EditorButton = props => {
     textColor,
     url,
     borderColor,
-    buttonLink
+    buttonLink,
+    textSize,
+    textAlign
   } = element;
   const {
     linkType,
@@ -117,6 +119,9 @@ const EditorButton = props => {
     ...attributes,
     children: [/*#__PURE__*/_jsx("div", {
       className: "editor-btn-wrapper-inner",
+      style: {
+        textAlign: textAlign || "left"
+      },
       children: /*#__PURE__*/_jsx("button", {
         contentEditable: false,
         className: "editor-btn",
@@ -130,7 +135,8 @@ const EditorButton = props => {
           paddingRight: `${right || 8}px`,
           paddingTop: `${top || 8}px`,
           paddingBottom: `${bottom || 8}px`,
-          color: `${textColor || "#FFFFFF"}`
+          color: `${textColor || "#FFFFFF"}`,
+          fontSize: textSize || "inherit"
         },
         onClick: onClick,
         children: label || "My Button"

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -6,8 +6,13 @@ import "./slick-theme.min.css";
 import "./slick.min.css";
 import { PrevArrow, NextArrow } from "./Arrows";
 import { carouselItem } from "../../utils/carouselItem";
+import { IconButton, Tooltip } from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const Empty = ({
   children
 }) => {
@@ -29,7 +34,6 @@ const Carousel = props => {
   const editor = useSlateStatic();
   const selected = useSelected();
   const [edit, setEdit] = useState(false);
-  const [reload, setReload] = useState(new Date().getTime());
   const settings = {
     dots: true,
     infinite: true,
@@ -56,9 +60,6 @@ const Carousel = props => {
   };
   const onEdit = () => {
     setEdit(!edit);
-    if (edit) {
-      setReload(new Date().getTime());
-    }
   };
   const onDelete = () => {
     const path = ReactEditor.findPath(editor, element);
@@ -68,17 +69,32 @@ const Carousel = props => {
   };
   const ToolBar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
-      className: "grid-container-toolbar",
+      className: "element-toolbar hr",
       contentEditable: false,
-      children: [/*#__PURE__*/_jsx("button", {
-        onClick: onEdit,
-        children: edit ? "Save" : "Edit"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onAddSlide,
-        children: "Add Slide"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onDelete,
-        children: "Delete"
+      style: {
+        top: "-42px"
+      },
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: edit ? "Save" : "Edit",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onEdit,
+          children: /*#__PURE__*/_jsx(EditIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Add Slide",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onAddSlide,
+          children: /*#__PURE__*/_jsx(AddIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
@@ -87,15 +103,19 @@ const Carousel = props => {
     className: "sliderBg",
     style: {
       padding: "32px",
-      backgroundColor: "#CCC",
+      backgroundColor: "transparent",
       position: "relative"
     },
     children: [edit ? /*#__PURE__*/_jsx(Empty, {
       children: children
-    }) : /*#__PURE__*/_jsx(Slider, {
+    }) : /*#__PURE__*/_createElement(Slider, {
       ...settings,
-      children: children
-    }, reload), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
+      key: children.length
+    }, children.map((m, i) => {
+      return /*#__PURE__*/_jsx("div", {
+        children: m
+      }, i);
+    })), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
   });
 };
 export default Carousel;

package/dist/Editor/Elements/Embed/Video.js

@@ -7,7 +7,6 @@ import useResize from "../../utils/customHooks/useResize";
 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 EmbedPopup from "./EmbedPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -117,7 +116,7 @@ const Video = ({
         width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
         height: `${size.height}px`
       },
-      children: [/*#__PURE__*/_jsx(ToolBar, {}),
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
       // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
       // So during resize replace the iframe with a simple div
       resizing ? /*#__PURE__*/_jsx("div", {
@@ -141,14 +140,14 @@ const Video = ({
         },
         src: url,
         title: alt
-      }), /*#__PURE__*/_jsx(IconButton, {
+      }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           background: "#FFF"
         },
         className: "resize-br visible-on-hover",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
-      })]
+      }) : null]
     }), children]
   });
 };

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;