@flozy/editor 3.3.2 → 3.3.4

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -7,6 +7,7 @@ import { ReactEditor, useSlate } from "slate-react";
 import { Node, Path, Transforms } from "slate";
 import useWindowResize from "../../hooks/useWindowResize";
 import { MODES } from "./helper";
+import { getSelectedText } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const scrollToAIInput = () => {
@@ -28,14 +29,25 @@ const scrollToAIInput = () => {
     console.log(err);
   }
 };
-const updateAnchorEl = setAnchorEl => {
+const updateAnchorEl = (setAnchorEl, editor) => {
   try {
+    if (!editor.selection) {
+      return;
+    }
     const selection = window.getSelection();
     if (selection.rangeCount) {
-      const domRange = selection.getRangeAt(0);
+      let caret;
+      if (getSelectedText(editor)) {
+        // selected text as caret
+        caret = selection.getRangeAt(0);
+      } else {
+        const focussedNode = Node.get(editor, editor?.selection?.anchor?.path);
+        // foccussed DOM as caret
+        caret = ReactEditor.toDOMNode(editor, focussedNode);
+      }
       const getBoundingClientRect = () => {
         const editorEle = document.querySelector(".ed-section-inner").getBoundingClientRect();
-        const caretPos = domRange.getBoundingClientRect();
+        const caretPos = caret.getBoundingClientRect();
         return {
           y: caretPos.y,
           height: caretPos.height,
@@ -86,7 +98,7 @@ function PopoverAIInput({
   };
   const editorElement = document.querySelector(".ed-section-inner");
   useEffect(() => {
-    updateAnchorEl(setAnchorEl);
+    updateAnchorEl(setAnchorEl, editor);
   }, [openAI, editor.selection]);
   useEffect(() => {
     if (openAI === "fromToolBar") {

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

@@ -24,6 +24,7 @@ const Form = props => {
   } = props;
   const {
     readOnly,
+    site_id,
     page_id,
     onFormSubmit
   } = customProps;
@@ -65,6 +66,13 @@ const Form = props => {
   const getFieldProps = (key = "", val = "") => {
     return element?.children?.find(obj => obj && obj[key] === val);
   };
+  const getFieldData = (key, type, field_type) => {
+    return element?.children?.filter(obj => obj && obj?.hasOwnProperty(key) && obj?.type === type && obj?.[key]?.includes(field_type));
+  };
+  const isMetaDataKey = (data, key) => {
+    let metaData = data?.find(meta => meta?.key === key);
+    return metaData;
+  };
   const handleSubmit = async (event, test = false) => {
     if (event) {
       event.preventDefault();
@@ -74,26 +82,45 @@ const Form = props => {
       setLoading(true);
       let response = {};
       let user_email = "";
+      let meta_data = [];
       const validations = [];
+      let metaFieldDataBoards = getFieldData('element_metadatakey', "form-field", "board");
       for (let pair of formData.entries()) {
         const emailObject = getFieldProps("element", "email");
         if (emailObject?.name === pair[0]) {
           user_email = pair[1];
         }
+        const isMetaKey = isMetaDataKey(metaFieldDataBoards, pair[0]);
+        if (isMetaKey) {
+          meta_data.push({
+            [isMetaKey?.element_metadatakey]: pair[1],
+            type: "board",
+            metadatamapping: element?.metadatamapping
+          });
+        }
         const fieldData = getFieldProps("name", pair[0]);
         let rule = [];
         if (fieldData?.required) {
           rule.push(`isRequired`);
         }
-        if (fieldData?.field_type === "email") {
+        if (fieldData?.element === "email") {
           rule.push(`isEmail`);
         }
-        if (fieldData?.required || fieldData?.field_type === "email") {
+        if (fieldData?.required || fieldData?.element === "email") {
           validations.push({
             name: pair[0],
             value: pair[1],
             field_type: fieldData?.field_type,
-            rules: rule && rule
+            rules: rule?.length > 0 && rule
+          });
+        }
+        if (isMetaKey?.isrequired) {
+          rule.push(`isRequired`);
+          validations.push({
+            name: pair[0],
+            value: pair[1],
+            field_type: isMetaKey?.placeholder,
+            rules: rule?.length > 0 && rule
           });
         }
         response = {
@@ -103,6 +130,7 @@ const Form = props => {
       }
       let params = {
         page_id: page_id,
+        site_id: site_id,
         form_id: `${formName}`,
         response: {
           ...response
@@ -112,7 +140,8 @@ const Form = props => {
           email: element?.email,
           form_workflow: element?.workflow,
           save_response: element?.saveResponse
-        }
+        },
+        meta_data: meta_data
       };
       const isValidForm = validations.length !== 0 && validation(validations);
       if (isValidForm) {

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormCheckbox = props => {
+  const {
+    fieldProps
+  } = props;
+  const {
+    bannerSpacing,
+    height,
+    borderRadius,
+    borderStyle,
+    borderWidth,
+    borderColor,
+    textColor,
+    bgColor,
+    lockSpacing,
+    ...rest
+  } = fieldProps;
+  const onChange = e => {
+    e.preventDefault();
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      display: "flex"
+    },
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "input",
+      ...rest,
+      type: "checkbox",
+      onChange: onChange,
+      sx: {
+        width: "100%",
+        border: `1px solid ${borderColor || "#FFF"}`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
+        height: height || "auto",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        background: bgColor || "transparent"
+      }
+    })
+  });
+};
+export default FormCheckbox;

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormDate = props => {
+  const {
+    fieldProps
+  } = props;
+  const {
+    bannerSpacing,
+    height,
+    borderRadius,
+    borderStyle,
+    borderWidth,
+    borderColor,
+    textColor,
+    bgColor,
+    lockSpacing,
+    ...rest
+  } = fieldProps;
+  const onChange = e => {
+    e.preventDefault();
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      display: "flex"
+    },
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "input",
+      ...rest,
+      type: "date",
+      onChange: onChange,
+      sx: {
+        width: "100%",
+        border: `1px solid ${borderColor || "#FFF"}`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
+        height: height || "auto",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        background: bgColor || "transparent",
+        paddingRight: '85px !important'
+      }
+    })
+  });
+};
+export default FormDate;

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormNumbers = props => {
+  const {
+    fieldProps
+  } = props;
+  const {
+    bannerSpacing,
+    height,
+    borderRadius,
+    borderStyle,
+    borderWidth,
+    borderColor,
+    textColor,
+    bgColor,
+    lockSpacing,
+    ...rest
+  } = fieldProps;
+  const onChange = e => {
+    e.preventDefault();
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      display: "flex"
+    },
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "input",
+      ...rest,
+      type: "number",
+      onChange: onChange,
+      sx: {
+        width: "100%",
+        border: `1px solid ${borderColor || "#FFF"}`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
+        height: height || "auto",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        background: bgColor || "transparent"
+      }
+    })
+  });
+};
+export default FormNumbers;

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormRadioButton = props => {
+  const {
+    fieldProps
+  } = props;
+  const {
+    bannerSpacing,
+    height,
+    borderRadius,
+    borderStyle,
+    borderWidth,
+    borderColor,
+    textColor,
+    bgColor,
+    lockSpacing,
+    ...rest
+  } = fieldProps;
+  const onChange = e => {
+    e.preventDefault();
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      display: "flex"
+    },
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "input",
+      ...rest,
+      type: "radio",
+      onChange: onChange,
+      sx: {
+        width: "100%",
+        border: `1px solid ${borderColor || "#FFF"}`,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
+        height: height || "auto",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        background: bgColor || "transparent"
+      }
+    })
+  });
+};
+export default FormRadioButton;

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

@@ -1,9 +1,17 @@
 import FormEmail from "./FormEmail";
 import FormText from "./FormText";
 import FormTextArea from "./FormTextArea";
+import FormNumbers from "./FormNumbers";
+import FormDate from "./FormDate";
+import FormCheckbox from "./FormCheckbox";
+import FormRadioButton from "./FormRadioButton";
 const FormElements = {
   text: FormText,
   textArea: FormTextArea,
-  email: FormEmail
+  email: FormEmail,
+  numbers: FormNumbers,
+  date: FormDate,
+  checkbox: FormCheckbox,
+  radioButton: FormRadioButton
 };
 export default FormElements;

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

@@ -8,8 +8,8 @@ export const validationMethods = {
       return "Enter valid email address";
     }
   },
-  isRequired: value => {
-    return value === '' ? "Required fields should not be empty" : "";
+  isRequired: (value, field_type = "") => {
+    return value === '' ? `${field_type ? field_type : "Required"} fields should not be empty` : "";
   }
 };
 export const validation = fields => {
@@ -17,7 +17,7 @@ export const validation = fields => {
   let filedValue = [];
   fields.map(field => {
     let val = field.rules.map(vm => {
-      return validationMethods[vm](field["value"]);
+      return validationMethods[vm](field["value"], field["field_type"]);
     });
     return filedValue.push(...val);
   });

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Transforms } from "slate";
+import { Transforms, Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -25,9 +25,18 @@ const FormField = props => {
     children,
     ...elementProps
   } = element;
-  const FormElement = FormElements[elementType];
+  const et = elementType?.split(':');
+  const FormElement = FormElements[et[0]];
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
+  const formPath = path.slice(0, path.length - 1);
+  const {
+    metadatamapping
+  } = Node?.get(editor, formPath) || {};
+  const updatedElement = {
+    ...element,
+    metadatamapping
+  };
   const [openSetttings, setOpenSettings] = useState(false);
   const onSettings = () => {
     setOpenSettings(true);
@@ -95,7 +104,7 @@ const FormField = props => {
     children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
       fieldProps: elementProps
     }), openSetttings ? /*#__PURE__*/_jsx(FieldPopup, {
-      element: element,
+      element: updatedElement,
       onSave: onSave,
       onClose: onClose,
       customProps: customProps

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__*/_jsx(RadioGroup, {
+          children: /*#__PURE__*/_jsxs(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: /*#__PURE__*/_jsx(FormControlLabel, {
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,7 +84,16 @@ 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/Link/LinkButton.js

@@ -37,12 +37,14 @@ const LinkButton = props => {
   };
   const toggleLink = () => {
     setSelection(editor.selection);
-    setLinkData({
-      name: Editor.string(editor, editor.selection),
-      url: blockProps?.href || "",
-      showInNewTab: true
-    });
-    setShowInput(true);
+    if (editor.selection) {
+      setLinkData({
+        name: Editor.string(editor, editor.selection),
+        url: blockProps?.href || "",
+        showInNewTab: true
+      });
+      setShowInput(true);
+    }
   };
   const handleInputChange = ({
     target

package/dist/Editor/Styles/EditorStyles.js

@@ -266,6 +266,10 @@ const editorStyles = ({
         padding: "0px"
       }
     }
+  },
+  cardsTypo: {
+    color: theme?.palette?.editor?.textColor,
+    fontSize: '14px !important'
   }
 });
 export default editorStyles;

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

@@ -9,6 +9,7 @@ import ColorPickerButton from "../../common/ColorPickerButton";
 import { colors } from "../../Elements/Color Picker/defaultColors";
 import VariableButton from "../../Elements/Variables/VariableButton";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
 const BasicToolbar = props => {
@@ -66,12 +67,14 @@ const BasicToolbar = props => {
             item: true,
             children: /*#__PURE__*/_jsx(Tooltip, {
               title: "Font Color",
-              children: /*#__PURE__*/_jsx(ColorPickerButton, {
-                value: activeColor || "#0000",
-                onSave: color => {
-                  handleTextColor(color);
-                },
-                defaultColors: colors
+              children: /*#__PURE__*/_jsx(_Fragment, {
+                children: /*#__PURE__*/_jsx(ColorPickerButton, {
+                  value: activeColor || "#0000",
+                  onSave: color => {
+                    handleTextColor(color);
+                  },
+                  defaultColors: colors
+                })
               })
             })
           })]

package/dist/Editor/common/Icon.js

@@ -7,9 +7,11 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, InfinityIcon } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -213,6 +215,34 @@ const iconList = {
     }
   }),
   calenderNewIcon: /*#__PURE__*/_jsx(CalendarIconNew, {}),
+  text: /*#__PURE__*/_jsx(Text, {}),
+  textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
+  phone: /*#__PURE__*/_jsx(Phone, {}),
+  briefCase: /*#__PURE__*/_jsx(BriefCase, {}),
+  bank: /*#__PURE__*/_jsx(Bank, {}),
+  calendarTick: /*#__PURE__*/_jsx(CalendarTick, {}),
+  dollarSquare: /*#__PURE__*/_jsx(DollarSquare, {}),
+  description: /*#__PURE__*/_jsx(Description, {}),
+  radioButton: /*#__PURE__*/_jsx(RadioButtonIcon, {}),
+  checkbox: /*#__PURE__*/_jsx(Checkbox, {}),
+  mail: /*#__PURE__*/_jsx(EmailRoundedIcon, {
+    sx: {
+      width: "18px",
+      height: "16px",
+      fill: "#000"
+    }
+  }),
+  info: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
+    sx: {
+      width: "14px",
+      height: "14px",
+      paddingLeft: "5px",
+      marginTop: "5px",
+      fill: "#94A3B8"
+    }
+  }),
+  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
+  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
   infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {})
 };
 const Icon = props => {

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

@@ -1,3 +1,4 @@
+import textOptions from "./textOptionsStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 const fieldStyle = [{
   tab: "General",
@@ -10,16 +11,7 @@ const fieldStyle = [{
     label: "Field Type",
     key: "element",
     type: "textOptions",
-    options: [{
-      label: "Textbox",
-      value: "text"
-    }, {
-      label: "Email",
-      value: "email"
-    }, {
-      label: "TextArea",
-      value: "textArea"
-    }]
+    options: [...textOptions]
   }, {
     label: "Placeholder",
     key: "placeholder",