@flozy/editor 10.6.5 → 10.6.7

package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js

@@ -19,6 +19,7 @@ const EditOption = props => {
   const [edit, setEdit] = useState({
     ...(mode?.edit || {})
   });
+  const [errorMessage, setErrorMessage] = useState("");
   const editData = useRef({
     ...edit
   });
@@ -31,10 +32,13 @@ const EditOption = props => {
   const selectedOption = edit?.options[optionIndex] || {};
   const pickerStyles = ColorPickerStyles(theme);
   const hideBackButton = edit?.hideBackButton || false;
+  const errorMessageRef = useRef(errorMessage);
+  useEffect(() => {
+    errorMessageRef.current = errorMessage;
+  }, [errorMessage]);
   useEffect(() => {
     return () => {
-      // on un-mount update the option change
-      if (editData?.current) {
+      if (editData?.current && !errorMessageRef.current) {
         delete editData?.current?.edited;
         onEvent("updateProperty", {
           ...editData?.current
@@ -43,18 +47,24 @@ const EditOption = props => {
     };
   }, []);
   const onChange = e => {
-    const updatedOptions = edit?.options.map((m, i) => {
+    const {
+      name,
+      value,
+      delete: isDelete
+    } = e?.target || {};
+    const targetValue = value?.toLowerCase();
+    const updatedOptions = edit?.options?.map((m, i) => {
       if (i === edit?.optionIndex) {
         return {
           ...m,
-          [e.target.name]: e?.target?.value
+          [name]: value
         };
       }
       return m;
     });
 
-    // for delete
-    if (edit?.optionIndex > -1 && e?.target?.delete) {
+    // If deleting the option
+    if (edit?.optionIndex > -1 && isDelete) {
       updatedOptions.splice(edit?.optionIndex, 1);
     }
     const latest = {
@@ -68,14 +78,28 @@ const EditOption = props => {
       ...latest,
       edited: true
     };
+    if (name === "value" && !value?.trim()) {
+      setErrorMessage("Option name must not be empty");
+      return;
+    }
+    const isDuplicate = name === "value" && targetValue && edit?.options?.some((op, i) => i !== edit?.optionIndex && op?.value?.toLowerCase?.() === targetValue);
+    if (isDuplicate) {
+      setErrorMessage("Option name must be unique");
+      return;
+    }
+    setErrorMessage(""); // Clear error on valid input
 
-    // if delete go back
-    if (e?.target?.delete) {
-      onEvent("editProperty", {
-        edit: {
-          ...latest
-        }
-      });
+    // If delete go back
+    if (isDelete) {
+      if (hideBackButton) {
+        onClose();
+      } else {
+        onEvent("editProperty", {
+          edit: {
+            ...latest
+          }
+        });
+      }
     }
   };
   const onBack = () => {
@@ -110,15 +134,15 @@ const EditOption = props => {
           size: "small",
           onClick: onBack,
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: 'leftArrow'
+            icon: "leftArrow"
           })
         }) : null, translation("Edit Option")]
       }), /*#__PURE__*/_jsx(IconButton, {
         className: "tv-act-ico bg br1",
         size: "small",
         sx: {
-          '& svg': {
-            '& path': {
+          "& svg": {
+            "& path": {
               strokeWidth: 0
             }
           }
@@ -137,7 +161,9 @@ const EditOption = props => {
           value: selectedOption?.value,
           onChange: onChange,
           fullWidth: true,
-          placeholder: translation("Option Name")
+          placeholder: translation("Option Name"),
+          helperText: errorMessage,
+          error: !!errorMessage
         }),
         labelPlacement: "top"
       })
@@ -161,7 +187,7 @@ const EditOption = props => {
         onClick: onDeleteOption,
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: 'trashIcon'
+            icon: "trashIcon"
           })
         }), /*#__PURE__*/_jsx(ListItemText, {
           children: translation("Delete Option")

package/dist/Editor/Elements/Divider/Divider.js

@@ -61,7 +61,7 @@ const Divider = props => {
       className: "element-toolbar dividerIcon",
       style: {
         top: "3px",
-        left: 0
+        right: "8px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: translation("Divider Settings"),

package/dist/Editor/Elements/Embed/Embed.css

@@ -92,3 +92,7 @@
   border-width: 1px 0 0;
   border-color: rgba(55, 53, 47, .1607843137254902);
 }
+
+.disablePointerEvent {
+  pointer-events: none;
+}

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

@@ -4,7 +4,6 @@ import { Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
-import BackupIcon from "@mui/icons-material/Backup";
 import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
 import FormPopup from "./FormPopup";
 import ButtonPopup from "../Button/ButtonPopup";
@@ -160,7 +159,8 @@ const Form = props => {
           [pair[0]]: pair[1],
           placeholder: placeholder,
           form_name: formName,
-          tagName: tagName
+          tagName: tagName,
+          uid: fieldData?.uid
         });
       }
       let params = {
@@ -207,7 +207,7 @@ const Form = props => {
     }, {
       at: path
     });
-    // adding form field style to the current form node 
+    // adding form field style to the current form node
     const currentNode = Node.get(editor, path);
     if (currentNode) {
       currentNode.children.forEach((item, index) => {

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

@@ -42,7 +42,6 @@ const FormTextArea = props => {
         },
         height: height || "150px",
         borderColor: borderColor && `${borderColor} !important`,
-        borderWidth: borderWidth || "1px",
         borderRadius: {
           ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
         },

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

@@ -22,6 +22,7 @@ import { DEFAULT_TABLE_NODE } from "../../utils/table";
 import itemOptions from "./Options/sectionItemOptions";
 import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import { useDebouncedCallback } from "use-debounce";
+import updateFormName from "../../utils/updateFormName";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MAX_DEVICE_WIDTH = {
@@ -140,8 +141,10 @@ const FreeGrid = props => {
           });
           break;
         case "duplicateSection":
+          const currentNode = Node.get(editor, cur_root_path);
+          const updatedFormNameNode = updateFormName(currentNode);
           Transforms.insertNodes(editor, [{
-            ...JSON.parse(JSON.stringify(Node.get(editor, cur_root_path)))
+            ...JSON.parse(JSON.stringify(updatedFormNameNode))
           }], {
             at: next_path
           });

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

@@ -320,6 +320,7 @@ const FreeGridItem = props => {
     breakpoint: breakpoint,
     customProps: customProps,
     translation: translation,
+    xsHidden: xsHidden,
     children: /*#__PURE__*/_jsxs(Box, {
       component: "div",
       ...attributes,

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from "react";
-import { Transforms, Path, Node } from "slate";
+import { Transforms, Path, Node, Editor, Element } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid as GridContainer, useTheme } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
@@ -206,7 +206,19 @@ const Grid = props => {
   };
   const onAddSection = () => () => {
     try {
-      const duplicateGrid = JSON.parse(JSON.stringify(element));
+      let duplicateGrid = JSON.parse(JSON.stringify(element));
+      const carousel = Editor.above(editor, {
+        at: path,
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel-item"
+      });
+      if (carousel) {
+        const [carouselNode, carouselItemPath] = carousel || [];
+        const duplicatecCarousel = JSON.parse(JSON.stringify(carouselNode));
+        Transforms.insertNodes(editor, duplicatecCarousel, {
+          at: Path.next(carouselItemPath)
+        });
+        return;
+      }
       insertGrid(editor, duplicateGrid, [path[0] + 1, 0]);
     } catch (err) {
       console.log(err);

package/dist/Editor/Elements/Signature/Signature.css

@@ -46,11 +46,12 @@
 
   .upload-input-wrapper {
     width: 100%;
+    height: 100%;
     position: relative;
   }
   .upload-input-wrapper input {
     width: 100%;
-    height: 100px;
+    height: 100%;
     opacity: 0;
     z-index: 1;
     position: relative;

package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import { Grid, useMediaQuery } from "@mui/material";
+import { Grid, IconButton, useMediaQuery } from "@mui/material";
+import { ResetIcon } from "../../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DrawSignature = props => {
@@ -24,6 +25,13 @@ const DrawSignature = props => {
       signature: result?.imageURL || strImage
     });
   };
+  const onClear = () => {
+    canvasRef.clear();
+    setUploading(false);
+    onDataChange({
+      signature: ""
+    });
+  };
   const isMobile = useMediaQuery("(max-width:599px)");
   const signatureCanvasStyle = isMobile ? {
     width: "260px",
@@ -31,14 +39,15 @@ const DrawSignature = props => {
   } : {};
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
+    children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       style: {
         width: "100%",
-        height: "209px"
+        height: "209px",
+        position: "relative"
       },
-      children: /*#__PURE__*/_jsx(SignatureCanvas, {
+      children: [/*#__PURE__*/_jsx(SignatureCanvas, {
         canvasProps: {
           className: "signature-canvas",
           ...signatureCanvasStyle
@@ -47,7 +56,11 @@ const DrawSignature = props => {
         ref: ref => canvasRef = ref,
         maxWidth: brush.size || 2,
         penColor: brush?.color || "#000"
-      })
+      }), /*#__PURE__*/_jsx(IconButton, {
+        className: "clear-canvas",
+        onClick: onClear,
+        children: /*#__PURE__*/_jsx(ResetIcon, {})
+      })]
     })]
   });
 };

package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js

@@ -30,15 +30,28 @@ const UploadSignature = props => {
       signature: result?.imageURL || strImage
     });
   };
+  const onRemove = () => {
+    setBase64(null);
+    setUploading(false);
+    onUploadDone({
+      signature: ""
+    });
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: "signature-tab2",
-    children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsx("div", {
+    children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsxs("div", {
       className: "upload-sign-img-wrapper",
-      children: /*#__PURE__*/_jsx("img", {
+      children: [/*#__PURE__*/_jsx("img", {
         className: "upload-sign-img",
         src: base64,
         alt: "Signature"
-      })
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        gutterBottom: true,
+        className: "remove-sign-img-btn",
+        onClick: onRemove,
+        children: "Remove"
+      })]
     }) : /*#__PURE__*/_jsxs("div", {
       className: "upload-input-wrapper",
       children: [/*#__PURE__*/_jsx("input", {

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

@@ -1,6 +1,7 @@
 import { Button } from "@mui/material";
 import { useMemo, useState } from "react";
 import useTable from "../../hooks/useTable";
+import AddRoundedIcon from "@mui/icons-material/AddRounded";
 import { jsx as _jsx } from "react/jsx-runtime";
 const showAddButton = (addType, tableNode, hoverPath) => {
   const [row, col] = hoverPath && hoverPath?.length ? hoverPath.slice(-2) : [];
@@ -61,7 +62,7 @@ function AddRowCol(props) {
         fontSize: "14px",
         border: "1px dashed #8DA8E3",
         color: "#2563EB !important",
-        padding: "0px 4px",
+        padding: "4px 4px",
         minWidth: "unset",
         lineHeight: "18px",
         fontWeight: "normal !important",
@@ -70,7 +71,12 @@ function AddRowCol(props) {
       },
       disabled: !showBtn,
       onClick: onAdd,
-      children: "+"
+      children: /*#__PURE__*/_jsx(AddRoundedIcon, {
+        sx: {
+          width: 18,
+          height: 18
+        }
+      })
     })
   });
 }

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

@@ -44,7 +44,6 @@ function DragButton({
   const dragProps = {
     ...dndProps,
     id: dndProps?.id + dragType,
-    disabled: isMobile,
     data: {
       ...dndProps.data,
       dragType

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

@@ -13,9 +13,13 @@ function Draggable(props) {
   } = props?.data || {};
   const style = transform ? {
     transform: dragType === "row" ? `translate3d(0, ${transform.y}px, 0)` : `translate3d(${transform.x}px, 0, 0)`
-  } : undefined;
+  } : {};
   return /*#__PURE__*/_jsx(Box, {
-    style: style,
+    style: {
+      ...style,
+      touchAction: "none" // Disables scrolling while dragging. Necessary for proper mobile drag functionality.
+    },
+
     ref: setNodeRef,
     ...listeners,
     ...attributes,

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

@@ -86,6 +86,13 @@ const TableStyles = theme => {
         background: "#2563EB"
       }
     },
+    mobileCellResizer: {
+      position: "absolute",
+      right: "-10px",
+      top: "-10px",
+      zIndex: 4000,
+      padding: "2px"
+    },
     mobileToolDrawer: {
       "& .customSelectContainer": {
         border: "none !important",

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Editor, Path, Range, Transforms } from "slate";
-import { Box } from "@mui/material";
+import { Box, IconButton } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
@@ -12,6 +12,7 @@ import TablePopup from "./TablePopup";
 import { Droppable } from "./Droppable";
 import { useDndContext } from "@dnd-kit/core";
 import { getNodeWithType } from "../../utils/helper";
+import { ResizeIcon } from "../../common/iconListV2";
 import { isEmptyTextNode } from "../../helper";
 import SimpleText from "../SimpleText";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -41,16 +42,32 @@ const Resizer = ({
   onMouseDown,
   height
 }) => {
+  const eventProps = {
+    onPointerDown: onMouseDown
+  };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: "cell-resizer",
       contentEditable: false,
-      onPointerDown: onMouseDown,
       sx: classes.cellResizer,
       style: {
         height: `${height}px`
-      }
+      },
+      ...eventProps
+    })
+  });
+};
+const MobileResizer = ({
+  classes,
+  onMouseDown
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(IconButton, {
+      contentEditable: false,
+      sx: classes.mobileCellResizer,
+      onTouchStart: onMouseDown,
+      children: /*#__PURE__*/_jsx(ResizeIcon, {})
     })
   });
 };
@@ -115,7 +132,8 @@ const TableCell = props => {
     size: element?.size,
     minMaxProps: {
       minWidth: 30
-    }
+    },
+    isMobile
   });
   const [tableSize, setTableSize] = useState({});
   const [openSettings, setOpenSettings] = useState(false);
@@ -424,6 +442,7 @@ const TableCell = props => {
     resetSelection
   };
   const showRowDragBtn = (showRowDrag || isRowDragging) && containerEle?.scrollLeft <= 0;
+  const TableResizer = isMobile && hoverCol === column ? MobileResizer : Resizer;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("td", {
       ...element.attr,
@@ -458,7 +477,7 @@ const TableCell = props => {
           padding: "8px"
         },
         children: children
-      }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
+      }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(TableResizer, {
         classes: classes,
         onMouseDown: onMouseDown,
         height: tableDOM?.getBoundingClientRect()?.height

package/dist/Editor/Elements/Title/title.js

@@ -3,7 +3,6 @@ import { Editor, Text } from "slate";
 import { useSlate } from "slate-react";
 import { getNodeText } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const Title = props => {
   const {
     attributes,
@@ -13,7 +12,7 @@ const Title = props => {
   } = props;
   const isEmpty = !customProps?.readOnly && isEmptyTextNode(element?.children[0]) ? "empty" : "";
   useDetectExitFromTitle(element, customProps?.getTitleSaveData);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     ...attributes,
     placeholder: "Title",
     className: `content-editable ${isEmpty}`,
@@ -21,9 +20,7 @@ const Title = props => {
       fontWeight: "bold",
       fontSize: "20px"
     },
-    children: [children, /*#__PURE__*/_jsx("span", {
-      contentEditable: false
-    })]
+    children: children
   });
 };
 export default Title;

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

@@ -130,7 +130,7 @@ const usePopupStyle = theme => ({
       },
       "& .accordionIcon": {
         "& p": {
-          textAlign: 'left'
+          textAlign: "left"
         }
       }
     },
@@ -437,8 +437,8 @@ const usePopupStyle = theme => ({
         margin: "5px",
         borderRadius: "8px",
         color: theme?.palette?.editor?.menuOptionTextColor,
-        fontSize: '14px',
-        padding: '8px 12px',
+        fontSize: "14px",
+        padding: "8px 12px",
         '&[aria-selected="true"]': {
           backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
         }
@@ -1050,7 +1050,7 @@ const usePopupStyle = theme => ({
   },
   customSelectPopoverWrapper: {
     "& .MuiPopover-paper": {
-      maxHeight: "140px",
+      maxHeight: "180px",
       // minWidth: "130px",
       // border: "1px solid #E4E8EB",
       background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`,

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

@@ -139,10 +139,14 @@ const PopupTool = props => {
       anchorEl: anchorEl,
       sx: classes.popupWrapper,
       placement: "top-start",
+      style: {
+        boxShadow: 'unset'
+      } //this is for overriding global shadow from popupwrapper used in other places
+      ,
       children: /*#__PURE__*/_jsx(Paper, {
-        style: {
-          borderRadius: "6px",
-          border: "1px solid #8360FD"
+        sx: {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+          boxShadow: '1px 2px 12px 0px #0000001F'
         },
         children: /*#__PURE__*/_jsx(MiniTextFormat, {
           editor: editor,

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

@@ -0,0 +1,46 @@
+import { Checkbox as Core, FormControlLabel, IconButton, Typography } from "@mui/material";
+import CheckboxStyles from "./styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { CheckedBoxCheckIcon } from "../iconListV2";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Checkbox(props) {
+  const {
+    value,
+    onChange,
+    label,
+    labelProps,
+    checkboxProps,
+    ...rest
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = CheckboxStyles(theme);
+  return /*#__PURE__*/_jsx(FormControlLabel, {
+    className: "ccheckbox-primary",
+    sx: {
+      ...classes.customCheckBox
+    },
+    control: /*#__PURE__*/_jsx(Core, {
+      value: value,
+      checked: value,
+      onChange: onChange,
+      checkedIcon: /*#__PURE__*/_jsx(IconButton, {
+        className: "checkedIcon",
+        children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
+      }),
+      icon: /*#__PURE__*/_jsx(IconButton, {
+        className: "unCheckedIcon"
+      }),
+      ...(checkboxProps || {})
+    }),
+    label: /*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      sx: classes.label,
+      ...(labelProps || {}),
+      children: label
+    }),
+    ...rest
+  });
+}
+export default Checkbox;

package/dist/Editor/common/Checkbox/styles.js

@@ -0,0 +1,45 @@
+const SelectStyles = (theme = {}) => {
+  const {
+    buttonBorder3,
+    checkedIconBg,
+    tv_text
+  } = theme?.palette?.editor || {};
+  return {
+    customCheckBox: {
+      padding: "0px",
+      marginTop: "8px",
+      "& .MuiCheckbox-root": {
+        padding: "8px 8px 8px 10px",
+        "&:hover": {
+          background: "unset !important"
+        }
+      },
+      "& button": {
+        width: "18px !important",
+        height: "18px !important",
+        borderRadius: "3px",
+        border: `1px solid ${buttonBorder3}`,
+        "& svg": {
+          width: "14px",
+          height: "14px"
+        }
+      },
+      "& .checkedIcon": {
+        background: "#2563EB",
+        borderColor: "#2563EB",
+        padding: "0px"
+      },
+      "& .unCheckedIcon": {
+        background: checkedIconBg
+      },
+      "& p": {
+        margin: "0px !important"
+      }
+    },
+    label: {
+      fontSize: "14px",
+      color: `${tv_text} !important`
+    }
+  };
+};
+export default SelectStyles;

package/dist/Editor/common/ColorPickerButton.js

@@ -33,6 +33,9 @@ const ColorPickerToolComponent = ({
     item: true,
     xs: 12,
     children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        minHeight: "460px"
+      },
       children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: hideGradient ? false : true,
         value: color,