@flozy/editor 1.8.2 → 1.8.4

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

@@ -1,7 +1,7 @@
 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 { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import BackupIcon from "@mui/icons-material/Backup";
 import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
@@ -11,6 +11,7 @@ import { formField } from "../../utils/formfield";
 import { formSubmit } from "../../service/formSubmit";
 import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
 import Workflow from "./Workflow";
+import { getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Form = props => {
@@ -39,12 +40,6 @@ const Form = props => {
     fontFamily,
     textAlign
   } = element;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     topLeft,
     topRight,
@@ -237,20 +232,20 @@ const Form = props => {
     },
     onMouseOver: onMouseOver,
     onMouseLeave: onMouseLeave,
-    children: [/*#__PURE__*/_jsxs("form", {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      component: "form",
       id: `${formName}`,
       onSubmit: handleSubmit,
-      style: {
+      sx: {
         color: textColor || "#FFF",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
         borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
-        paddingLeft: `${left}px`,
-        paddingRight: `${right}px`,
-        paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         position: "relative"
       },
       ref: formEle,
@@ -279,23 +274,22 @@ const Form = props => {
               justifyContent: btnAlign?.horizantal || "start",
               alignItems: btnAlign?.vertical || "start"
             },
-            children: /*#__PURE__*/_jsx("button", {
+            children: /*#__PURE__*/_jsx(Box, {
+              component: "button",
               onClick: onSubmitClick,
               disabled: loading,
-              style: {
+              sx: {
                 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`,
+                padding: {
+                  ...getTRBLBreakPoints(btnSpacing)
+                },
+                margin: {
+                  ...getTRBLBreakPoints(btnM)
+                },
                 color: `${buttonProps?.textColor || "#FFFFFF"}`,
                 fontSize: buttonProps?.textSize || "inherit",
                 height: "fit-content",

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { getTRBLBreakPoints } from "../../../helper/theme";
+import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormText = props => {
   const {
@@ -16,12 +18,6 @@ const FormText = props => {
     lockSpacing,
     ...rest
   } = fieldProps;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     topLeft,
     topRight,
@@ -37,16 +33,16 @@ const FormText = props => {
       display: "flex"
     },
     contentEditable: false,
-    children: /*#__PURE__*/_jsx("input", {
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "input",
       ...rest,
       onChange: onChange,
-      style: {
+      sx: {
         width: "100%",
         border: `1px solid ${borderColor || "#FFF"}`,
-        paddingLeft: `${left || 8}px`,
-        paddingRight: `${right || 8}px`,
-        paddingTop: `${top || 8}px`,
-        paddingBottom: `${bottom || 8}px`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         height: height || "auto",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { Box } from "@mui/material";
+import { getTRBLBreakPoints } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormTextArea = props => {
   const {
@@ -15,12 +17,6 @@ const FormTextArea = props => {
     bgColor,
     ...rest
   } = fieldProps;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     topLeft,
     topRight,
@@ -36,16 +32,16 @@ const FormTextArea = props => {
       display: "flex"
     },
     contentEditable: false,
-    children: /*#__PURE__*/_jsx("textarea", {
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "textarea",
       ...rest,
       onChange: onChange,
-      style: {
+      sx: {
         width: "100%",
         border: `1px solid ${borderColor || "#FFF"}`,
-        paddingLeft: `${left || 8}px`,
-        paddingRight: `${right || 8}px`,
-        paddingTop: `${top || 8}px`,
-        paddingBottom: `${bottom || 8}px`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         height: height || "150px",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",

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

@@ -12,6 +12,7 @@ import GridPopup from "./GridPopup";
 import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,15 +42,8 @@ const Grid = props => {
     borderWidth,
     borderColor,
     borderStyle,
-    borderRadius,
-    gridSize
+    borderRadius
   } = element;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     vertical,
     horizantal,
@@ -267,11 +261,7 @@ const Grid = props => {
       borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
       borderStyle: borderStyle || "solid"
     },
-    "data-path": path.join(",")
-    // sx={{
-    //   width: `${((gridSize || 12) / 12) * 100}%`,
-    // }}
-    ,
+    "data-path": path.join(","),
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {
         position: "absolute",
@@ -305,15 +295,13 @@ const Grid = props => {
       onDelete: onDelete,
       customProps: customProps
     }) : null, /*#__PURE__*/_jsx(GridContainer, {
-      item: true,
-      xs: 12,
+      container: true,
       className: "grid-c-wrpr",
-      style: {
+      sx: {
         display: "flex",
-        paddingLeft: `${left}px`,
-        paddingRight: `${right}px`,
-        paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         alignItems: vertical || "start",
         justifyContent: horizantal || "start",
         flexDirection: flexDirection || "row",

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

@@ -6,6 +6,7 @@ import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItem = props => {
@@ -24,7 +25,6 @@ const GridItem = props => {
     bannerSpacing,
     bgColor,
     alignment,
-    gridHeight,
     borderRadius,
     borderStyle,
     borderWidth,
@@ -35,12 +35,6 @@ const GridItem = props => {
     textColor,
     animation
   } = element;
-  const {
-    left,
-    top,
-    right,
-    bottom
-  } = bannerSpacing || {};
   const {
     vertical,
     horizantal,
@@ -53,7 +47,6 @@ const GridItem = props => {
     bottomRight
   } = borderRadius || {};
   const editor = useSlateStatic();
-  const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
   const {
     hoverPath
@@ -104,11 +97,13 @@ const GridItem = props => {
   };
   return /*#__PURE__*/_jsxs(Item, {
     item: true,
-    xs: grid,
     component: "div",
-    className: `grid-item xs-${grid} element-root gi-top-wrpr content-editable`,
+    className: `grid-item element-root gi-top-wrpr content-editable`,
     ...attributes,
     sx: {
+      width: {
+        ...getBreakPointsValue(grid, null, "overrideGridSize", true)
+      },
       display: "flex",
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",
@@ -118,15 +113,12 @@ const GridItem = props => {
       borderStyle: borderStyle || "solid",
       alignItems: horizantal,
       justifyContent: vertical,
-      width: `${itemWidth}%`,
-      marginLeft: `${margin?.left || 0}px`,
-      marginRight: `${margin?.right || 0}px`,
-      marginTop: `${margin?.top || 0}px`,
-      marginBottom: `${margin?.bottom || 0}px`,
+      margin: {
+        ...getTRBLBreakPoints(margin)
+      },
       "&:hover": {
         background: `${bgColorHover || bgColor || "transparent"}`
-      },
-      height: "100%"
+      }
     },
     "data-path": path.join(","),
     style: {
@@ -159,13 +151,11 @@ const GridItem = props => {
       sx: {
         display: "flex",
         flexDirection: flexDirection || "column",
-        paddingLeft: `${left}px`,
-        paddingRight: `${right}px`,
-        paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`,
-        justifyContent: vertical,
-        height: gridHeight || "100%",
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         width: "100%",
+        height: "100%",
         color: textColor || "#000",
         "&:hover": {
           borderColor: borderColorHover || borderColor || "transparent"

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

@@ -31,8 +31,13 @@ const carousel_item = itemNo => ({
           }]
         }]
       }],
-      bgColor: "rgba(185, 179, 179, 0)",
       lockSpacing: true,
+      borderRadius: {
+        topLeft: 8,
+        topRight: 8,
+        bottomRight: 8,
+        bottomLeft: 8
+      },
       bannerSpacing: {
         top: 16,
         left: 16,
@@ -41,9 +46,10 @@ const carousel_item = itemNo => ({
         undefined: 16
       },
       alignment: {
-        horizantal: "center"
+        horizontal: "center"
       }
     }],
+    bgColor: "#ECF4FF",
     alignment: {
       flexDirection: "row"
     },
@@ -53,8 +59,7 @@ const carousel_item = itemNo => ({
       left: "16",
       right: "16",
       bottom: "16"
-    },
-    bgColor: "#ECF4FF"
+    }
   }]
 });
 export default carousel_item;

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

@@ -3,7 +3,7 @@ const default_grid = [{
   grid: "container",
   children: [{
     type: "grid-item",
-    grid: 12,
+    grid: 6,
     children: [{
       type: "alignLeft",
       children: [{
@@ -63,7 +63,7 @@ const default_grid = [{
     }
   }, {
     type: "grid-item",
-    grid: 12,
+    grid: 6,
     children: [{
       type: "alignLeft",
       children: [{

package/dist/Editor/Elements/List/CheckList.js

@@ -2,8 +2,8 @@ import React from "react";
 import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
 import { Transforms } from "slate";
 import { Checkbox, FormControlLabel } from "@mui/material";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import Icon from "../../common/Icon";
+import CheckListStyle from "./CheckListStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const CheckList = ({
@@ -14,6 +14,7 @@ const CheckList = ({
 }) => {
   const editor = useSlateStatic();
   const readOnly = useReadOnly();
+  const classes = CheckListStyle();
   const {
     checked
   } = element;
@@ -38,8 +39,13 @@ const CheckList = ({
       className: "checkbox-edit",
       children: [/*#__PURE__*/_jsx(FormControlLabel, {
         control: /*#__PURE__*/_jsx(Checkbox, {
-          icon: /*#__PURE__*/_jsx(CheckCircleOutlineIcon, {}),
-          checkedIcon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: "checkListButton"
+          }),
+          checkedIcon: /*#__PURE__*/_jsx(Icon, {
+            icon: "checkListButtonActive"
+          }),
+          sx: classes.checkBoxHover,
           checked: checked,
           onChange: handleCheck
         })

package/dist/Editor/Elements/List/CheckListStyles.js

@@ -0,0 +1,12 @@
+const CheckListStyle = () => ({
+  checkBoxHover: {
+    "&:hover": {
+      "& svg": {
+        "& rect": {
+          stroke: "#2563EB"
+        }
+      }
+    }
+  }
+});
+export default CheckListStyle;

package/dist/Editor/Elements/SimpleText.js

@@ -18,7 +18,6 @@ const SimpleTextStyle = ({
       position: "absolute",
       zIndex: -1,
       left: "0px",
-      paddingLeft: "4px",
       top: "-1px",
       bottom: 0,
       margin: "auto",

package/dist/Editor/Elements/Table/Table.js

@@ -176,7 +176,9 @@ const Table = props => {
     style: {
       minWidth: "100%",
       maxWidth: "100%",
-      position: "relative"
+      position: "relative",
+      overflowX: "auto",
+      overflowY: "hidden"
     },
     children: [/*#__PURE__*/_jsx(TableComp, {
       sx: classes.table,

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -92,8 +92,10 @@ const TopBanner = props => {
       ...props,
       classes: classes
     }) : null, /*#__PURE__*/_jsx("span", {
+      className: "hidden-children",
       style: {
-        display: "none"
+        display: "none",
+        height: "0px"
       },
       children: children
     })]

package/dist/Editor/Elements/Variables/Style.js

@@ -0,0 +1,12 @@
+const VariableStyles = () => ({
+  variablesItem: {
+    color: "#2563EB",
+    background: "#EEEEEE"
+  },
+  variableSelectBtn: {
+    height: "31px",
+    borderRadius: "10px",
+    marginLeft: "8px"
+  }
+});
+export default VariableStyles;

package/dist/Editor/Elements/Variables/Variable.js

@@ -0,0 +1,27 @@
+import React from "react";
+import VariableStyles from "./Style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Variables = props => {
+  const classes = VariableStyles();
+  const {
+    attributes,
+    element,
+    children
+  } = props;
+  const {
+    name
+  } = element;
+  return /*#__PURE__*/_jsxs("span", {
+    ...attributes,
+    contentEditable: false,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: `variables-item`,
+      style: classes.variablesItem,
+      children: `{{${name}}}`
+    }), /*#__PURE__*/_jsx("span", {
+      children: children
+    })]
+  });
+};
+export default Variables;

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { useSlateStatic } from "slate-react";
+import { MenuItem, Select } from "@mui/material";
+import { insertVariables } from "../../utils/variables";
+import VariableStyles from "./Style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const VariableButton = props => {
+  const classes = VariableStyles();
+  const editor = useSlateStatic();
+  const {
+    options
+  } = props;
+  const updateVariable = e => {
+    insertVariables(editor, {
+      name: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsxs(Select, {
+    labelId: "variable-selection",
+    id: "variable-selection-mini",
+    displayEmpty: true,
+    value: '',
+    sx: classes.variableSelectBtn,
+    onChange: updateVariable,
+    children: [/*#__PURE__*/_jsx(MenuItem, {
+      value: "",
+      children: /*#__PURE__*/_jsx("em", {
+        children: "Variables"
+      })
+    }), (options || []).map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
+      value: item.key,
+      children: item.label
+    }, `mini-edit-sele-${index}`))]
+  });
+};
+VariableButton.defaultProps = {
+  options: []
+};
+export default VariableButton;

package/dist/Editor/IframeEditor.js

@@ -0,0 +1,36 @@
+import React from "react";
+import CommonEditor from "./CommonEditor";
+import useWindowMessage from "./hooks/useWindowMessage";
+import { jsx as _jsx } from "react/jsx-runtime";
+const IframeEditor = () => {
+  const [message, sendMessage] = useWindowMessage({
+    type: "editorProps"
+  });
+  const device = {
+    label: "Mobile",
+    breakpoint: "sm",
+    width: 425
+  };
+  const onSave = (a, b) => {
+    sendMessage({
+      type: "Editor:onSave",
+      payload: {
+        a,
+        b
+      }
+    });
+  };
+  if (message?.id && message?.content_status) {
+    return /*#__PURE__*/_jsx(CommonEditor, {
+      ...message,
+      isIframe: true,
+      onSave: onSave,
+      device: device
+    });
+  } else {
+    return /*#__PURE__*/_jsx("div", {
+      children: "Waiting to receive data"
+    });
+  }
+};
+export default IframeEditor;

package/dist/Editor/MiniEditor.js

@@ -10,21 +10,16 @@ import withCommon from "./hooks/withCommon";
 import "./Editor.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const initialValue = [{
-  type: "paragraph",
-  children: [{
-    text: ""
-  }]
-}];
 const MiniEditor = props => {
   const {
     id,
-    // content,
+    content,
+    handleEditorChange,
     // onSave,
     // editor: collaborativeEditor,
     readOnly,
     miniEditorPlaceholder,
-    toolbars,
+    className,
     otherProps
   } = props;
   const {
@@ -104,10 +99,12 @@ const MiniEditor = props => {
   }, []);
   return /*#__PURE__*/_jsxs(Slate, {
     editor: editor,
-    initialValue: initialValue,
+    initialValue: content,
+    onChange: handleEditorChange,
     children: [/*#__PURE__*/_jsx(BasicToolbar, {
-      toolbars: toolbars || []
+      ...props
     }), /*#__PURE__*/_jsx(Editable, {
+      className: className || "mini-editor-cls",
       renderElement: renderElement,
       renderLeaf: renderLeaf,
       onKeyDown: onKeyDown

package/dist/Editor/Styles/EditorStyles.js

@@ -7,7 +7,15 @@ const editorStyles = ({
     position: "relative",
     padding: "0px",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    "*": {
+      boxSizing: "border-box"
+    },
+    "&.iframe-editor": {
+      "& .mini-tool-wrpr-ei": {
+        display: "none"
+      }
+    }
   },
   slateWrapper: {
     paddingTop: "0px",
@@ -109,7 +117,7 @@ const editorStyles = ({
           display: "none"
         }
       },
-      "&:before": {
+      "&.needHover:before": {
         content: '" "',
         position: "absolute",
         width: "calc(100% - 2px)",
@@ -168,14 +176,14 @@ const editorStyles = ({
         }
       }
     },
+    "& .carousel-item": {
+      padding: "12px 32px"
+    },
     "& .slick-arrow": {
       borderRadius: "50%",
-      backgroundColor: "#FFF",
+      backgroundColor: "#F8FAFF",
       textAlign: "center",
-      "& svg": {
-        width: "16px",
-        height: "16px"
-      }
+      border: "1px solid #CFD8F5"
     }
   }
 });