@flozy/editor 4.6.2 → 4.6.3

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

@@ -71,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsxs(RadioGroup, {
+          children: /*#__PURE__*/_jsx(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,16 +84,7 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "after",
-              label: "After",
-              onChange: () => {
-                setSchedule("after");
-              },
-              control: /*#__PURE__*/_jsx(Radio, {
-                size: "small"
-              })
-            })]
+            })
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -47,7 +47,8 @@ const FreeGrid = props => {
   } = element;
   const {
     readOnly,
-    customSX
+    customSX,
+    hideTools
   } = customProps;
   const {
     updated_at,
@@ -206,6 +207,33 @@ const FreeGrid = props => {
           at: [...insertAt]
         });
         break;
+      case "addSignature":
+        Transforms.insertNodes(editor, [{
+          type: "freegridItem",
+          childType: "signature",
+          children: [{
+            type: "signature",
+            children: [{
+              text: ""
+            }],
+            data: {
+              name: "",
+              email: "",
+              date: ""
+            }
+          }],
+          gridArea: "3 / 1 / 4 / 2",
+          left: 50,
+          marginTop: 0,
+          top: 0,
+          width: 217,
+          height: 173,
+          width_xs: 217,
+          height_xs: 173
+        }], {
+          at: [...insertAt]
+        });
+        break;
       case "addImage":
         Transforms.insertNodes(editor, [{
           type: "freegridItem",
@@ -315,6 +343,26 @@ const FreeGrid = props => {
           at: [...insertAt]
         });
         break;
+      case "addDivider":
+        Transforms.insertNodes(editor, [{
+          type: "freegridItem",
+          childType: "divider",
+          children: [{
+            type: "divider",
+            children: [{
+              text: ""
+            }]
+          }],
+          gridArea: "3 / 1 / 4 / 2",
+          left: 50,
+          marginTop: 0,
+          top: 0,
+          width: 170,
+          height: 30
+        }], {
+          at: [...insertAt]
+        });
+        break;
       default:
     }
     // focus on newly added element
@@ -357,6 +405,7 @@ const FreeGrid = props => {
       Transforms.removeNodes(editor, {
         at: Path.parent(path)
       });
+      setSelectedElement({});
     } catch (err) {
       console.log(err);
     }
@@ -386,6 +435,7 @@ const FreeGrid = props => {
       ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
     }
   }, theme);
+  const sectionTypeOptions = (itemOptions?.section || []).filter(f => (hideTools || []).indexOf(f) === -1);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
     className: `
@@ -413,7 +463,7 @@ const FreeGrid = props => {
       bottomLeft: false,
       bottomRight: false
     },
-    actions: itemOptions?.section || [],
+    actions: sectionTypeOptions,
     type: "parent",
     optionsProps: {
       placement: "right",
@@ -434,7 +484,8 @@ const FreeGrid = props => {
         placement: "left",
         title: "Add Element",
         props: {
-          handleClick: handleAddElementClick
+          handleClick: handleAddElementClick,
+          hideTools: hideTools || []
         }
       },
       more: {
@@ -474,6 +525,8 @@ const FreeGrid = props => {
         backgroundSize: "cover"
       },
       "data-path": path.join("|"),
+      "data-dragoverid": path.join("|"),
+      "data-dragovertype": "parent",
       style: {
         "--cols": `100%`,
         "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`

package/dist/Editor/Elements/FreeGrid/FreeGridBox.js

@@ -190,6 +190,8 @@ const FreeGridBox = props => {
       ...attributes,
       className: "fgi_type_box freegrid-container-parent",
       "data-path": path.join("|"),
+      "data-dragoverid": path.join("|"),
+      "data-dragovertype": "parent",
       style: {
         "--height": `${height}px`,
         "--cols": `100%`,

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -28,7 +28,8 @@ const FreeGridItem = props => {
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
-    readOnly
+    readOnly,
+    hideTools
   } = customProps;
   const {
     updated_at,
@@ -211,17 +212,20 @@ const FreeGridItem = props => {
         break;
     }
   };
+  const itemTypeOptions = (itemOptions[childType] || itemOptions?.default).filter(f => (hideTools || []).indexOf(f) === -1);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_item_${path.join("|")}_${updated_at}_${breakpoint}`,
     className: `freegrid-item path-${path.length} breakpoint-${breakpoint}`,
     editor: editor,
     path: path,
-    actions: itemOptions[childType] || itemOptions?.default,
+    actions: itemTypeOptions,
     settingsProps: {
       settings: "freegridItem",
       onChange: onChangeSettings,
-      customProps
+      customProps,
+      onlyPopup: true // for signature popup in DnD
     },
+
     style: {
       "--left": `${left || 0}px`,
       "--marginTop": `${marginTop || 0}px`,

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -39,15 +39,29 @@ const FREE_GRID_ELEMENTS = [{
   actionType: "addAppHeader",
   label: "App Header",
   icon: "appHeader"
+}, {
+  actionType: "addSignature",
+  label: "Signature",
+  icon: "signature"
+}, {
+  actionType: "addDivider",
+  label: "Divider",
+  icon: "divider"
 }];
 const AddElement = props => {
   const {
-    handleClick
+    handleClick,
+    hideTools
   } = props;
+  const ADD_ELEMENTS = FREE_GRID_ELEMENTS.filter(f => (hideTools || []).indexOf(f.actionType) === -1);
   return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      maxHeight: "500px",
+      overflowY: 'auto'
+    },
     children: /*#__PURE__*/_jsx(List, {
       className: "item-list-wrpr",
-      children: FREE_GRID_ELEMENTS.map(m => {
+      children: ADD_ELEMENTS.map(m => {
         return /*#__PURE__*/_jsxs(ListItemButton, {
           className: "item-wrapper",
           onClick: handleClick(m.actionType),

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -7,8 +7,11 @@ const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
 const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
 const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
 const embedScriptOptions = ["embedScript", "saveAsTemplate", "close"];
-const sectionOptions = ["addElement", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
+const sectionOptions = ["addElementInSection", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
 const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
+const signatureOptions = ["signatureSettings", "saveAsTemplate", "close"];
+const signOptions = ["removeSign", "saveAsTemplate", "close"];
+const dividerOptions = ["settings", "saveAsTemplate", "close"];
 const itemOptions = {
   default: commonOptions,
   text: textOptions,
@@ -20,6 +23,9 @@ const itemOptions = {
   section: sectionOptions,
   table: tableOptions,
   embedScript: embedScriptOptions,
-  video: videoOptions
+  video: videoOptions,
+  signature: signatureOptions,
+  sign: signOptions,
+  divider: dividerOptions
 };
 export default itemOptions;

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -20,6 +20,9 @@ const useFreeGridStyles = ({
         marginLeft: `calc((100% - ${MAX_DEVICE_WIDTH}px) * 0.5)`,
         "&.active-drag": {
           pointerEvents: "none",
+          "& *": {
+            pointerEvents: "none"
+          },
           zIndex: "9999 !important"
         },
         "&.inactive-drag": {
@@ -43,7 +46,7 @@ const useFreeGridStyles = ({
         },
         "&.enable-1, &.enable-2": {
           "&.type_text": {
-            // height: "fit-content !important",
+            minHeight: "fit-content !important",
             // for dark theme
             // pages needs no color
             "&.no-color": {
@@ -160,6 +163,51 @@ const useFreeGridStyles = ({
             }
           }
         },
+        "& .fgi_type_signature": {
+          height: "100%",
+          "& .signature-container": {
+            height: "100%",
+            "& .signature-btn-container": {
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              "& .sign-placeholder": {
+                display: "flex",
+                // remove hidden sign placeholder
+                width: "100%",
+                background: theme?.palette?.editor?.background,
+                flexGrow: 1
+              },
+              "& button": {
+                margin: "6px 0px"
+              }
+            }
+          }
+        },
+        "& .fgi_type_sign": {
+          width: "100%",
+          height: "100%",
+          "& .signature-signed-wrapper": {
+            width: "100%",
+            height: "100%",
+            "& .signature-signed-span": {
+              width: "100%",
+              height: "100%",
+              "& .signed-btn": {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+                "& img": {
+                  width: "100% !important",
+                  maxWidth: "none !important",
+                  height: "70% !important",
+                  flexGrow: 1
+                }
+              }
+            }
+          }
+        },
         "& .fgi_type_box": {
           display: "grid",
           width: "100%",
@@ -169,9 +217,26 @@ const useFreeGridStyles = ({
           "& .freegrid-item": {
             marginLeft: "0px"
             // pointerEvents: "none",
+          },
+
+          "&.rnd-dragOver": {
+            outline: "2px solid #116dff",
+            "&:before": {
+              content: '"Attach to Box"',
+              position: "absolute",
+              top: "-36px",
+              left: 0,
+              right: 0,
+              margin: "0px auto",
+              width: "fit-content",
+              background: "#116dff",
+              padding: "8px 12px",
+              color: "#FFF",
+              fontSize: "14px",
+              borderRadius: "7px"
+            }
           }
         },
-
         "& .fgi_type_form": {
           "& .form-field": {
             "& input": {
@@ -252,6 +317,22 @@ const useFreeGridStyles = ({
         [theme.breakpoints.between("xs", "md")]: {
           marginLeft: `calc((100% - 320px) * 0.5)`
         }
+      },
+      "&.rnd-dragOver": {
+        "&:before": {
+          content: '"Attact to this Section"',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          margin: "0px auto",
+          width: "fit-content",
+          background: "#116dff",
+          padding: "8px 12px",
+          color: "#FFF",
+          fontSize: "14px",
+          borderRadius: "7px"
+        }
       }
     }
   },

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment } from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment, Box } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -11,6 +11,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { validationMethods } from "../Form/FormElements/validations";
 import { CalenderDownIconSignature, CalenderIconSignature } from "../../common/iconListV2";
 import ColorPickerButton from "../../common/ColorPickerButton";
+import { SignaturePlaceholderIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -24,7 +25,8 @@ const SignaturePopup = props => {
     onSave,
     onClear,
     customProps,
-    className
+    className,
+    onlyPopup
   } = props;
   const {
     readOnly,
@@ -52,6 +54,9 @@ const SignaturePopup = props => {
   };
   const handleClose = () => {
     setOpen(false);
+    if (props.handleClose) {
+      props.handleClose();
+    }
   };
   const handleSave = async () => {
     await customProps?.services("workFlowAction", {
@@ -125,16 +130,28 @@ const SignaturePopup = props => {
     isEmpty = signedData?.signature === "" && signedData?.signedText === "" || signedData?.signedBy === "" || signedData?.signedByEmail === "";
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [onlyPopup ? null : /*#__PURE__*/_jsxs("div", {
       className: `signature-btn-container`,
-      children: /*#__PURE__*/_jsx(Button, {
-        contentEditable: false,
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "sign-placeholder",
+        children: [/*#__PURE__*/_jsx(SignaturePlaceholderIcon, {}), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          style: {
+            color: "#A2B0B9"
+          },
+          children: "Your sign will be placed here"
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
         onClick: handleOpen,
+        style: {
+          width: "fit-content"
+        },
         children: "Sign Here"
-      })
+      })]
     }), /*#__PURE__*/_jsx(Dialog, {
       className: `${className} dialogComp`,
-      open: open,
+      open: onlyPopup || open,
       onClose: handleClose,
       fullWidth: true,
       PaperProps: {

package/dist/Editor/Elements/Signature/Signed.js

@@ -47,7 +47,7 @@ const Signed = props => {
         src: signature,
         alt: "signature",
         style: {
-          width: "200px",
+          maxWidth: "200px",
           height: "auto",
           marginBottom: "4px"
         }

package/dist/Editor/Elements/SimpleText/index.js

@@ -6,6 +6,7 @@ import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const SimpleText = props => {
@@ -47,20 +48,18 @@ const SimpleText = props => {
     sx: classes.root,
     key: `para_${path.join("|")}`
   }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
-    className: "placeholder-simple-text",
     contentEditable: false,
-    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs("span", {
-      className: "placeholder-simple-text-default",
-      contentEditable: false,
-      children: ["Type", " ", /*#__PURE__*/_jsx("span", {
+    className: "placeholder-simple-text",
+    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: ["Type ", /*#__PURE__*/_jsx("span", {
+        contentEditable: false,
         style: {
-          backgroundColor: "#F2F6FA",
+          backgroundColor: '#F2F6FA',
           padding: "0px 2px",
           borderRadius: "2px"
         },
-        contentEditable: false,
         children: "/"
-      }), " ", "to browse elements"]
+      }), " to browse elements"]
     }) : "" : ""
   }));
 };

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

@@ -23,7 +23,7 @@ const TableRow = props => {
   return /*#__PURE__*/_jsx("tr", {
     ...attributes,
     style: {
-      background: bgColor,
+      backgroundColor: bgColor,
       border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
     },
     children: children

package/dist/Editor/Styles/EditorStyles.js

@@ -215,7 +215,7 @@ const editorStyles = ({
     },
     "& .content-editable.empty": {
       "&:after": {
-        color: placeHolderColor
+        color: theme?.palette?.type === "dark" ? "#99A5B6" : placeHolderColor
       }
     },
     "& .checkbox-edit": {
@@ -286,7 +286,7 @@ const editorStyles = ({
       }
     },
     "& ::selection": {
-      color: "black",
+      color: "inherit",
       background: "#EAEBFE"
     }
   },

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -123,8 +123,7 @@ const MiniToolbar = props => {
         label,
         icon: Icon
       }) => {
-        const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
-
+        const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false;
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,

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

@@ -1,22 +1,28 @@
 import React from "react";
-import { Box, Card, CardMedia, Grid } from "@mui/material";
-
-// const Select = (props) => {
-//     const { classes, data, onSelectTemplate } = props;
-//     return (
-//         <Box
-//             className="template-card-action"
-//             component={"div"}
-//             sx={classes.templateCardBtnGrp}
-//             style={{ padding: 0, background: "transparent"}}
-//         >
-//             <Button className="blueBtn" onClick={onSelectTemplate(data)}>
-//                 Select
-//             </Button>
-//         </Box>
-//     );
-// };
+import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = props => {
+  const {
+    classes,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      padding: 0,
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
 const ButtonTemplateCard = props => {
   const {
     classes,
@@ -28,19 +34,19 @@ const ButtonTemplateCard = props => {
     xs: 3,
     children: /*#__PURE__*/_jsx(Card, {
       sx: classes.paperOverrides,
-      children: /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsxs(Box, {
         sx: classes.buttonCardMediaWrpr,
-        onClick: onSelectTemplate(m),
-        children: /*#__PURE__*/_jsx("div", {
-          className: "img-wrapper",
-          children: /*#__PURE__*/_jsx(CardMedia, {
-            className: `template-card-media`,
-            component: "div",
-            image: m?.thumbnail,
-            alt: m?.title,
-            sx: classes.buttonCardMedia
-          })
-        })
+        children: [/*#__PURE__*/_jsx(CardMedia, {
+          className: `template-card-media`,
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.buttonCardMedia
+        }), /*#__PURE__*/_jsx(Select, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
       })
     })
   }, `template_${m.id}`);

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

@@ -1,22 +1,27 @@
 import React from "react";
-import { Box, Card, CardMedia, Grid } from "@mui/material";
-
-// const Select = (props) => {
-//     const { classes, data, onSelectTemplate } = props;
-//     return (
-//         <Box
-//             className="template-card-action"
-//             component={"div"}
-//             sx={classes.templateCardBtnGrp}
-//             style={{background: "transparent"}}
-//         >
-//             <Button className="blueBtn" onClick={onSelectTemplate(data)}>
-//                 Select
-//             </Button>
-//         </Box>
-//     );
-// };
+import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Select = props => {
+  const {
+    classes,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
 const FullViewCard = props => {
   const {
     classes,
@@ -30,19 +35,19 @@ const FullViewCard = props => {
     children: /*#__PURE__*/_jsx(Card, {
       sx: classes.paperOverrides,
       className: "paperOverrides",
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: classes.fullViewCardMediaWrpr,
-        onClick: onSelectTemplate(m),
-        children: /*#__PURE__*/_jsx("div", {
-          className: "img-wrapper",
-          children: /*#__PURE__*/_jsx(CardMedia, {
-            component: "div",
-            image: m?.thumbnail,
-            alt: m?.title,
-            sx: classes.fullViewCardMedia,
-            className: height
-          })
-        })
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: classes.buttonCardMediaWrpr,
+        children: [/*#__PURE__*/_jsx(CardMedia, {
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.fullViewCardMedia,
+          className: height
+        }), /*#__PURE__*/_jsx(Select, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
       })
     })
   }, `template_${m.id}`);