@flozy/editor 1.9.7 → 1.9.9

package/dist/Editor/CommonEditor.js

@@ -13,7 +13,7 @@ import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from ".
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
-import { findPageSettings, getPageSettings } from "./utils/pageSettings";
+import { focusOnFirstParagraph, getPageSettings } from "./utils/pageSettings";
 import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
@@ -25,7 +25,6 @@ import { EditorProvider } from "./hooks/useMouseMove";
 import TopBanner from "./Elements/TopBanner/TopBanner";
 import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
-import DragHandle from "./common/DnD/DragHandle";
 import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
@@ -139,10 +138,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     setValue(draftToSlate({
       data: content
     }));
-    Transforms.select(editor, {
-      path: [0, 0],
-      offset: 0
-    });
+    focusOnFirstParagraph(editor);
   }, [id, content]);
   useEffect(() => {
     if (editorWrapper && editorWrapper?.current && JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {

package/dist/Editor/DialogWrapper.js

@@ -20,6 +20,9 @@ const DialogWrapper = props => {
       zIndex: 1000
     },
     children: [/*#__PURE__*/_jsx(DialogTitle, {
+      style: {
+        padding: "6px 8px"
+      },
       children: /*#__PURE__*/_jsx(Grid, {
         children: /*#__PURE__*/_jsx(Grid, {
           style: {

package/dist/Editor/Editor.css

@@ -32,7 +32,6 @@ blockquote {
   margin-left: 0;
   margin-right: 0;
   padding-left: 10px;
-  color: #000;
   margin: 0px;
 }
 

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

@@ -93,9 +93,9 @@ const Accordion = props => {
       style: {
         backgroundColor: bgColor
       },
+      onClick: onToggle,
       children: [/*#__PURE__*/_jsx(IconButton, {
         className: "accordion-summary-collapse-btn",
-        onClick: onToggle,
         contentEditable: false,
         sx: {
           "& svg": {

package/dist/Editor/Elements/Button/EditorButton.js

@@ -154,46 +154,51 @@ const EditorButton = props => {
       style: {
         display: "inline"
       },
-      children: /*#__PURE__*/_jsxs(Box, {
-        component: "button",
-        sx: {
-          background: bgColor || "rgb(30, 75, 122)",
-          borderBlockStyle: "solid",
-          borderColor: borderColor || "transparent",
-          borderWidth: borderWidth || "1px",
-          borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
-          borderStyle: borderStyle || "solid",
-          padding: {
-            ...getTRBLBreakPoints(bannerSpacing)
-          },
-          color: `${textColor || "#FFFFFF"}`,
-          fontSize: textSize || "inherit",
-          fontFamily: fontFamily || "PoppinsRegular",
-          display: "inline-flex",
-          alignItems: "center",
-          position: "relative",
-          "& .element-toolbar": {
-            display: "none"
-          },
-          "&:hover": {
-            color: `${textColorHover || textColor || "#FFFFFF"}`,
-            background: bgColorHover || bgColor || "rgb(30, 75, 122)",
+      children: /*#__PURE__*/_jsxs("span", {
+        style: {
+          position: "relative"
+        },
+        children: [/*#__PURE__*/_jsxs(Box, {
+          component: "button",
+          sx: {
+            background: bgColor || "rgb(30, 75, 122)",
+            borderBlockStyle: "solid",
+            borderColor: borderColor || "transparent",
+            borderWidth: borderWidth || "1px",
+            borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+            borderStyle: borderStyle || "solid",
+            padding: {
+              ...getTRBLBreakPoints(bannerSpacing)
+            },
+            color: `${textColor || "#FFFFFF"}`,
+            fontSize: textSize || "inherit",
+            fontFamily: fontFamily || "PoppinsRegular",
+            display: "inline-flex",
+            alignItems: "center",
+            position: "relative",
             "& .element-toolbar": {
-              display: "block"
+              display: "none"
+            },
+            "&:hover": {
+              color: `${textColorHover || textColor || "#FFFFFF"}`,
+              background: bgColorHover || bgColor || "rgb(30, 75, 122)",
+              "& .element-toolbar": {
+                display: "block"
+              }
             }
-          }
-        },
-        onClick: onClick,
-        children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
-          style: {
-            paddingLeft: "4px",
-            paddingRight: "4px"
-          }
-        }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
-          style: {
-            paddingLeft: "4px",
-            paddingRight: "4px"
-          }
+          },
+          onClick: onClick,
+          children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
+            style: {
+              paddingLeft: "4px",
+              paddingRight: "4px"
+            }
+          }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
+            style: {
+              paddingLeft: "4px",
+              paddingRight: "4px"
+            }
+          })]
         }), !readOnly && isTrigger ? /*#__PURE__*/_jsx(IconButton, {
           className: "workflow-icon-btn",
           children: /*#__PURE__*/_jsx(WorkflowIcon, {})

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

@@ -154,7 +154,7 @@ const Image = ({
     } else {
       return {
         width: url ? {
-          ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
+          ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
         } : "100%"
       };
     }

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

@@ -12,6 +12,7 @@ import { formSubmit } from "../../service/formSubmit";
 import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
 import Workflow from "./Workflow";
 import { getTRBLBreakPoints } from "../../helper/theme";
+import { validation } from "./FormElements/validations";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Form = props => {
@@ -40,7 +41,6 @@ const Form = props => {
     fontFamily,
     textAlign
   } = element;
-  const isEmail = element?.children[0].element === "email";
   const {
     topLeft,
     topRight,
@@ -66,6 +66,9 @@ const Form = props => {
   } : {
     borderColor: buttonProps?.borderColor || "none"
   };
+  const getFieldProps = (key = '', val = '') => {
+    return element?.children?.find(obj => obj && obj[key] === val);
+  };
   const handleSubmit = async (event, test = false) => {
     if (event) {
       event.preventDefault();
@@ -74,7 +77,29 @@ const Form = props => {
       const formData = new FormData(formEle?.current);
       setLoading(true);
       let response = {};
+      const emailObject = getFieldProps('field_type', 'email');
+      let user_email = '';
+      const validations = [];
       for (let pair of formData.entries()) {
+        if (emailObject?.name === pair[0]) {
+          user_email = pair[1];
+        }
+        const fieldData = getFieldProps('name', pair[0]);
+        let rule = [];
+        if (fieldData?.required) {
+          rule.push(`isRequired`);
+        }
+        if (fieldData?.field_type === "email") {
+          rule.push(`isEmail`);
+        }
+        if (fieldData?.required || fieldData?.field_type === 'email') {
+          validations.push({
+            name: pair[0],
+            value: pair[1],
+            field_type: fieldData?.field_type,
+            rules: rule && rule
+          });
+        }
         response = {
           ...response,
           [pair[0]]: pair[1]
@@ -83,14 +108,22 @@ const Form = props => {
       let params = {
         page_id: page_id,
         form_id: `${formName}`,
-        response,
+        response: {
+          ...response
+        },
         form_data: {
+          user_email: user_email,
           email: element?.email,
           form_workflow: element?.workflow,
           save_response: element?.saveResponse
         }
       };
-      await formSubmit(params, customProps);
+      const isValidForm = validations.length !== 0 && validation(validations);
+      if (isValidForm) {
+        alert(isValidForm[0]);
+      } else {
+        await formSubmit(params, customProps);
+      }
       setLoading(false);
     }
   };

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

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

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

@@ -1,8 +1,9 @@
+import FormEmail from "./FormEmail";
 import FormText from "./FormText";
 import FormTextArea from "./FormTextArea";
 const FormElements = {
   text: FormText,
   textArea: FormTextArea,
-  email: FormText
+  email: FormEmail
 };
 export default FormElements;

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

@@ -0,0 +1,35 @@
+import { bool } from "prop-types";
+export const validationMethods = {
+  isEmail: value => {
+    const regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+    const result = regex.test(String(value).toLowerCase());
+    if (result) {
+      let domain = String(value).toLowerCase().split('@')[1];
+      let validExtensions = ['com', 'net', 'org', 'edu'];
+      let extension = domain.split('.').pop();
+      if (validExtensions.includes(extension)) {
+        return "";
+      } else {
+        return "Enter valid email address";
+      }
+    } else {
+      return "Enter valid email address";
+    }
+  },
+  isRequired: value => {
+    return value === '' ? "Required fields should not be empty" : "";
+  }
+};
+export const validation = fields => {
+  let validated = [];
+  let filedValue = [];
+  fields.map(field => {
+    let val = field.rules.map(vm => {
+      return validationMethods[vm](field["value"]);
+    });
+    return filedValue.push(...val);
+  });
+  validated.push(...filedValue);
+  validated = validated.filter(val => val !== "");
+  return validated.length === 0 ? false : validated;
+};

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

@@ -6,13 +6,17 @@ import "react-datepicker/dist/react-datepicker.css";
 import SignatureOptions from "./SignatureOptions";
 import "./Signature.css";
 import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../../common/EditorIcons";
-import CommonStyle from "../../commonStyle";
-import { styled } from "@mui/material/styles";
+import useCommonStyle from "../../commonStyle";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const BrushSizes = [1, 5, 7];
 const SignaturePopup = props => {
+  const {
+    theme
+  } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const {
     onSave,
     onClear,
@@ -110,6 +114,7 @@ const SignaturePopup = props => {
       open: open,
       onClose: handleClose,
       fullWidth: true,
+      sx: classes.signaturePopup,
       children: /*#__PURE__*/_jsx(Grid, {
         container: true,
         children: /*#__PURE__*/_jsxs(Grid, {
@@ -370,4 +375,4 @@ const SignaturePopup = props => {
 };
 
 // export default SignaturePopup;
-export default styled(SignaturePopup)(CommonStyle);
+export default SignaturePopup;

package/dist/Editor/Elements/SimpleText.js

@@ -48,7 +48,7 @@ const SimpleTextStyle = ({
 const SimpleText = props => {
   const {
     theme
-  } = useEditorContext();
+  } = useEditorContext() || {};
   const editor = useSlateStatic();
   const {
     element,
@@ -68,7 +68,7 @@ const SimpleText = props => {
     pageColor
   } = pageSt?.pageProps || {};
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background
+    pageColor: pageColor || theme?.palette?.editor?.background || '#FFFFFF'
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

package/dist/Editor/Styles/EditorStyles.js

@@ -30,7 +30,12 @@ const editorStyles = ({
     color: "#0f172a",
     "&.no-color": {
       backgroundColor: theme?.palette?.editor?.background,
-      color: theme?.palette?.editor?.textColor
+      color: theme?.palette?.editor?.textColor,
+      "& .signed-btn": {
+        "& img": {
+          backgroundColor: "#FFF"
+        }
+      }
     },
     "& .max-content": {
       width: "100%",

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

@@ -32,7 +32,7 @@ const miniToolbarStyles = theme => ({
       borderColor: theme?.palette?.editor?.borderColor,
       "& button": {
         "& svg": {
-          stroke: theme?.palette?.editor?.textColor
+          stroke: theme?.palette?.editor?.svgStroke
         },
         "&.active": {
           "& svg": {

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

@@ -107,8 +107,8 @@ const AddTemplates = props => {
       case "Starter":
       case "Proposal":
       case "Page":
+      case "Brief":
       case "Contract":
-      case "404 Page":
         return /*#__PURE__*/_jsx(TemplateCard, {
           classes: classes,
           onSelectTemplate: onSelectTemplate,
@@ -128,10 +128,19 @@ const AddTemplates = props => {
           classes: classes,
           onSelectTemplate: onSelectTemplate,
           m: mapData,
-          fullScreen: fullScreen
+          fullScreen: fullScreen,
+          height: "smallCard"
+        }, `template_Card_${mapData.id}_popup`);
+      case "404 Page":
+        return /*#__PURE__*/_jsx(FullViewCard, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          m: mapData,
+          fullScreen: fullScreen,
+          height: "mediumCard"
         }, `template_Card_${mapData.id}_popup`);
       default:
-        /*#__PURE__*/_jsx(TemplateCard, {
+        return /*#__PURE__*/_jsx(TemplateCard, {
           classes: classes,
           onSelectTemplate: onSelectTemplate,
           m: mapData,

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

@@ -26,7 +26,8 @@ const FullViewCard = props => {
   const {
     classes,
     m,
-    onSelectTemplate
+    onSelectTemplate,
+    height = 'smallCard'
   } = props;
   return /*#__PURE__*/_jsx(Grid, {
     item: true,
@@ -40,7 +41,8 @@ const FullViewCard = props => {
           component: "div",
           image: m?.thumbnail,
           alt: m?.title,
-          sx: classes.fullViewCardMedia
+          sx: classes.fullViewCardMedia,
+          className: height
         }), /*#__PURE__*/_jsx(Select, {
           classes: classes,
           onSelectTemplate: onSelectTemplate,

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

@@ -376,13 +376,19 @@ const usePopupStyle = theme => ({
   },
   fullViewCardMedia: {
     width: "100%",
-    height: "130px",
     backgroundPosition: "left top",
     backgroundSize: "100% auto",
     zIndex: 1,
     position: "relative",
     "&.fullscreen": {
       height: "130px"
+    },
+    "&.smallCard": {
+      height: "130px"
+    },
+    "&.mediumCard": {
+      height: "250px",
+      boxShadow: "0px 1px 3px 3px rgba(0,0,0,0.12)"
     }
   },
   buttonCardMedia: {

package/dist/Editor/common/ColorPickerButton.js

@@ -10,7 +10,7 @@ const ColorPickerButton = props => {
     value,
     onSave,
     defaultColors = [],
-    classes
+    classes = {}
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);

package/dist/Editor/common/Icon.js

@@ -6,8 +6,10 @@ import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
-import { IoIosImage, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
+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 } from "./iconslist";
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -175,10 +177,10 @@ const iconList = {
   media: /*#__PURE__*/_jsx(MdOutlinePermMedia, {
     size: 20
   }),
-  accordionArrow: /*#__PURE__*/_jsx(IoMdArrowDroprightCircle, {
+  accordionArrow: /*#__PURE__*/_jsx(ArrowRightIcon, {
     size: 20
   }),
-  accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
+  accordionArrowDown: /*#__PURE__*/_jsx(ArrowDropDownIcon, {
     size: 20
   }),
   appHeader: /*#__PURE__*/_jsx(AppHeader, {}),

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

@@ -24,6 +24,11 @@ const fieldStyle = [{
     label: "Placeholder",
     key: "placeholder",
     type: "text"
+  }, {
+    label: "Is required",
+    key: "required",
+    type: "selectBox",
+    placeholder: "Is required"
   }]
 }, {
   tab: "Padding",

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

@@ -83,7 +83,7 @@ const StyleBuilder = props => {
     setElementProps({
       ...elementProps,
       ...data,
-      name: data?.element === "email" ? "field_email" : data?.name
+      field_type: data?.element
     });
   };
   const handleSave = () => {

package/dist/Editor/commonStyle.js

@@ -50,6 +50,39 @@ const useCommonStyle = theme => ({
         color: theme?.palette?.editor?.textColor
       }
     }
+  },
+  signaturePopup: {
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background,
+      "& .signature-canvas": {
+        backgroundColor: "#FFF"
+      },
+      "& label": {
+        color: theme?.palette?.editor?.textColor
+      },
+      "& input": {
+        color: theme?.palette?.editor?.textColor,
+        backgroundColor: theme?.palette?.editor?.background
+      },
+      "& .react-datepicker__input-container": {
+        "& svg": {
+          fill: theme?.palette?.editor?.textColor
+        }
+      },
+      "& fieldset": {
+        borderColor: theme?.palette?.editor?.textColor
+      },
+      "& .upload-wrapper-ui": {
+        "& .MuiTypography-root": {
+          color: theme?.palette?.editor?.textColor
+        }
+      },
+      "& .typesignature-fontfamily": {
+        "& button": {
+          color: theme?.palette?.editor?.textColor
+        }
+      }
+    }
   }
 });
 export default useCommonStyle;

package/dist/Editor/helper/index.js

@@ -36,14 +36,14 @@ export function invertColor(hex) {
     if (hex?.indexOf("#") === -1) {
       hex = rgbToHex(hex);
     }
-    if (hex.indexOf("#") === 0) {
+    if (hex?.indexOf("#") === 0) {
       hex = hex.slice(1);
     }
     // convert 3-digit hex to 6-digits.
-    if (hex.length === 3) {
+    if (hex?.length === 3) {
       hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
     }
-    if (hex.length !== 6) {
+    if (hex?.length !== 6) {
       // throw new Error("Invalid HEX color.");
     }
     // invert color components

package/dist/Editor/utils/formfield.js

@@ -9,6 +9,7 @@ export const formField = () => {
     children: [{
       text: ""
     }],
+    field_type: 'text',
     bgColor: "rgba(255, 255, 255, 1)",
     borderColor: "#ccc",
     bannerSpacing: {

package/dist/Editor/utils/pageSettings.js

@@ -81,4 +81,22 @@ export const updatePageSettings = (editor, pageProps = {}) => {
   } catch (err) {
     console.log(err);
   }
+};
+export const focusOnFirstParagraph = editor => {
+  try {
+    const [paragraphNode] = Editor.nodes(editor, {
+      at: [],
+      match: n => {
+        return !Editor.isEditor(n) && Element.isElement(n) && n.text !== undefined && !n.type;
+      }
+    });
+    if (paragraphNode && paragraphNode[1] !== undefined) {
+      Transforms.select(editor, {
+        path: paragraphNode[1],
+        offset: 0
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.9.7",
+  "version": "1.9.9",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"