@flozy/editor 1.9.8 → 2.0.0

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) {
@@ -342,7 +338,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
+    editor: editor,
     children: /*#__PURE__*/_jsx(DialogWrapper, {
+      classes: classes,
       ...props,
       fullScreen: fullScreen,
       footer: footer || "",

package/dist/Editor/DialogWrapper.js

@@ -9,7 +9,8 @@ const DialogWrapper = props => {
   const {
     fullScreen,
     onClose,
-    children
+    children,
+    classes
   } = props;
   return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
     className: `dialogComp`,
@@ -19,7 +20,11 @@ const DialogWrapper = props => {
     style: {
       zIndex: 1000
     },
+    sx: classes.fullScreenWrapper,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
+      style: {
+        padding: "6px 8px"
+      },
       children: /*#__PURE__*/_jsx(Grid, {
         children: /*#__PURE__*/_jsx(Grid, {
           style: {
@@ -28,13 +33,16 @@ const DialogWrapper = props => {
           },
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onClose,
+            style: {
+              background: "rgba(255,255,255,0.5)"
+            },
             children: /*#__PURE__*/_jsx(CloseIcon, {})
           })
         })
       })
     }), /*#__PURE__*/_jsx(DialogContent, {
       style: {
-        padding: "0px"
+        paddingTop: "12px"
       },
       children: children
     })]

package/dist/Editor/Editor.css

@@ -32,7 +32,6 @@ blockquote {
   margin-left: 0;
   margin-right: 0;
   padding-left: 10px;
-  color: #000;
   margin: 0px;
 }
 
@@ -182,7 +181,7 @@ blockquote {
 
 .no-border-button button,
 .no-border-button button:hover {
-  border: none
+  border: none;
 }
 
 .grid-item {

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

@@ -2,10 +2,11 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionBtnPopup from "./AccordionBtnPopup";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Accordion = props => {
@@ -21,6 +22,7 @@ const Accordion = props => {
   const [toggle, setToggle] = useState(false);
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -31,7 +33,7 @@ const Accordion = props => {
     setToggle(!toggle);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {
@@ -93,14 +95,20 @@ const Accordion = props => {
       style: {
         backgroundColor: bgColor
       },
-      children: [/*#__PURE__*/_jsx(IconButton, {
+      onClick: onToggle,
+      children: [/*#__PURE__*/_jsx(Box, {
+        role: "button",
         className: "accordion-summary-collapse-btn",
-        onClick: onToggle,
         contentEditable: false,
         sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          userSelect: "none",
           "& svg": {
             fill: textColor
-          }
+          },
+          cursor: "pointer"
         },
         children: !toggle ? /*#__PURE__*/_jsx(Icon, {
           icon: "accordionArrow"

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

@@ -4,6 +4,7 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionTitlePopup from "./AccordionTitlePopup";
 import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
@@ -18,6 +19,7 @@ const AccordionSummary = props => {
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -26,7 +28,7 @@ const AccordionSummary = props => {
     borderColor
   } = element;
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {

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

@@ -6,7 +6,7 @@ import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
-import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -48,6 +48,7 @@ const Image = ({
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const path = ReactEditor.findPath(editor, element);
+  const [showTool] = useEditorSelection(editor);
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -111,7 +112,7 @@ const Image = ({
     });
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar visible-on-hover",
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -154,7 +155,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/Grid/Grid.js

@@ -11,7 +11,7 @@ import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../com
 import GridPopup from "./GridPopup";
 import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
-import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -62,6 +62,7 @@ const Grid = props => {
     hoverPath
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
+  const [showTool] = useEditorSelection(editor);
   const onAddGridItem = () => {
     const currentPath = editor.selection?.anchor?.path;
     const ancestorsPath = Path.ancestors(currentPath, {
@@ -174,7 +175,7 @@ const Grid = props => {
   };
   const PoupComp = GridSettingsPoupComp[openSetttings];
   const NewLineButtons = () => {
-    return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+    return !readOnly && selected && path.length === 2 && !showTool ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
         className: "element-selector-ctrl tc",
         children: /*#__PURE__*/_jsx(Tooltip, {
@@ -199,7 +200,7 @@ const Grid = props => {
     }) : null;
   };
   const GridToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
       contentEditable: false,
       children: [/*#__PURE__*/_jsx(Tooltip, {

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

@@ -5,7 +5,7 @@ import { useSlateStatic, ReactEditor } from "slate-react";
 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 { useEditorContext, useEditorSelection } 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";
@@ -53,8 +53,9 @@ const GridItem = props => {
     hoverPath
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
+  const [showTool] = useEditorSelection(editor);
   const GridItemToolbar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "grid-item-toolbar",
       style: {

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/Table/Table.js

@@ -13,8 +13,9 @@ import DeleteCellIcon from "./DeleteCellIcon";
 import DeleteRowIcon from "./DeleteRowIcon";
 import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
-import "./table.css";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
+import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TABLE_MENUS = [{
@@ -91,6 +92,7 @@ const Table = props => {
   const selected = useSelected();
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
+  const [showTool] = useEditorSelection(editor);
   const handleAction = ({
     type,
     position
@@ -125,7 +127,7 @@ const Table = props => {
     setExpandTools(!exandTools);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs(Box, {
+    return selected && !showTool ? /*#__PURE__*/_jsxs(Box, {
       component: "div",
       contentEditable: false,
       className: `tableToolBar ${exandTools ? "active" : ""}`,

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

@@ -5,6 +5,7 @@ import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
 import TableStyles from "./Styles";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,6 +46,7 @@ const TableCell = props => {
   } = element;
   const [parentDOM, setParentDOM] = useState(null);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const path = ReactEditor.findPath(editor, element);
   const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
   const [size, onMouseDown, resizing, onLoad] = useTableResize({
@@ -119,7 +121,7 @@ const TableCell = props => {
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },
-    children: [children, isHeader && !readOnly && tableSize?.height ? /*#__PURE__*/_jsx(Resizer, {
+    children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
       onMouseDown: onMouseDown,
       height: tableSize?.height

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

@@ -73,7 +73,7 @@ const TopBanner = props => {
     ...attributes,
     style: {
       position: "relative",
-      height: "280px",
+      height: "296px",
       textAlign: "center"
     },
     contentEditable: false,
@@ -81,6 +81,7 @@ const TopBanner = props => {
     children: [/*#__PURE__*/_jsx("img", {
       src: url,
       alt: "Top Banner",
+      className: "top-banner-wrpr-ele",
       style: {
         width: "100%",
         height: "280px",

package/dist/Editor/Styles/EditorStyles.js

@@ -28,9 +28,19 @@ const editorStyles = ({
     flexDirection: "column",
     alignItems: "center",
     color: "#0f172a",
+    "& .has-topbanner": {
+      "& .doc-title-ele-wrpr": {
+        marginTop: "12px"
+      }
+    },
     "&.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%",
@@ -201,6 +211,17 @@ const editorStyles = ({
       textAlign: "center",
       border: "1px solid #CFD8F5"
     }
+  },
+  fullScreenWrapper: {
+    "& .MuiPaper-root": {
+      borderRadius: "0px !important",
+      "& .MuiDialogTitle-root": {
+        position: "absolute",
+        top: 0,
+        right: "12px",
+        zIndex: 100
+      }
+    }
   }
 });
 export default editorStyles;

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/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/Section/index.js

@@ -6,6 +6,7 @@ import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SectionStyle = () => ({
@@ -33,6 +34,7 @@ const Section = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     sectionBgColor,
@@ -58,7 +60,7 @@ const Section = props => {
     setOpenSettings(true);
   };
   const Toolbar = () => {
-    return !readOnly ? /*#__PURE__*/_jsx(Box, {
+    return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: "element-toolbar no-border-button ss hr section-tw",
       style: {
@@ -121,7 +123,7 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [!readOnly ? /*#__PURE__*/_jsx(DragHandle, {
+      children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
         ...props
       }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {

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,44 @@ 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
+        }
+      }
+    }
+  },
+  textOptions: {
+    "& .MuiPopover-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    }
   }
 });
 export default useCommonStyle;

package/dist/Editor/hooks/useMouseMove.js

@@ -1,7 +1,23 @@
 import { useEffect, useState, createContext, useContext, useMemo } from "react";
+import { getSelectedText } from "../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EditorContext = /*#__PURE__*/createContext();
+export const useEditorSelection = editor => {
+  const [textSelected, setTextSelected] = useState(false);
+  useEffect(() => {
+    if (editor?.selection) {
+      const text = getSelectedText(editor);
+      if (text?.length > 0) {
+        setTextSelected(true);
+      } else {
+        setTextSelected(false);
+      }
+    }
+  }, [editor?.selection]);
+  return [textSelected];
+};
 export const EditorProvider = ({
+  editor,
   theme,
   children
 }) => {
@@ -23,7 +39,7 @@ export const EditorProvider = ({
         hoverPath: previous
       };
     }
-  }, [path]);
+  }, [path, editor?.selection]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: {
       ...(value || {}),

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.8",
+  "version": "2.0.0",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"