@flozy/editor 5.3.6 → 5.3.7

package/dist/Editor/common/iconslist.js

@@ -1346,19 +1346,22 @@ export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M10.1733 6.125V14.875",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M5.79834 10.5H14.5483",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   })]
 });
 export const FormIcon = () => {

package/dist/Editor/commonStyle.js

@@ -1,7 +1,147 @@
 const useCommonStyle = theme => ({
   sideBarDrawer: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.textFormatBgColor,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
+      "@media only screen and (min-width: 899px)": {
+        borderRadius: "20px",
+        margin: "5px",
+        height: "calc(100% - 10px)",
+        overflow: "hidden"
+      },
+      "@media only screen and (max-width: 599px)": {
+        borderRadius: "20px 20px 0px 0px"
+      }
+    },
+    "& .optionePopupHeader": {
+      borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`,
+      padding: "0px 0px 10px 0px",
+      margin: "0px 10px",
+      "& .MuiTypography-root": {
+        textTransform: "capitalize"
+      },
+      "& .close-popupbtn": {
+        background: theme?.palette?.editor?.closeButtonBgColor,
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
+        "& svg": {
+          color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    },
+    "& .MuiDialogActions-root": {
+      // paddingTop: "10px",
+      "& .primaryBtn, .deleteBtn": {
+        height: "32px !important",
+        fontSize: "14px !important",
+        fontWeight: "600 !important",
+        padding: "0px 20px !important"
+      },
+      "& .deleteBtn": {
+        background: `${theme?.palette?.type === "light" && "#FFF7F9"} !important`
+      }
+    },
+    "& .MuiDialogContent-root": {
+      padding: "0px 5px 0px 10px!important",
+      height: "100%",
+      fontFamily: "Inter, sans-serif",
+      "& .MuiTypography-root": {
+        fontSize: "14px",
+        fontWeight: "500",
+        fontFamily: "Inter, sans-serif"
+      },
+      "& p": {
+        marginBottom: "7px",
+        marginTop: "4px"
+      },
+      "& .muiIconsListParent": {
+        "& svg": {
+          color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: `none !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
+      "& .MuiGrid-root>.MuiGrid-item": {
+        paddingRight: "0px !important",
+        fontFamily: "Inter, sans-serif",
+        height: 'fit-content'
+      },
+      "& .MuiInputBase-root": {
+        borderRadius: "10px",
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        border: `none`,
+        height: "36px",
+        boxShadow: "0px 4px 16px 0px #0000000D",
+        fontFamily: "Inter, sans-serif",
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+        },
+        "& input::placeholder": {
+          color: "#94A3B8 !important",
+          opacity: "unset",
+          fontFamily: "Inter, sans-serif"
+        },
+        "& .colorPickerButton": {
+          border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+        }
+      },
+      "& .MuiInputBase-root:has(.colorPickerButton)": {
+        "& .MuiInputBase-input": {
+          padding: "8.5px 14px 8.5px 0px",
+          fontFamily: "Inter, sans-serif"
+        }
+      },
+      "& .MuiInputBase-input": {
+        color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+        textTransform: "math-auto",
+        fontFamily: "Inter, sans-serif"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+      },
+      "& fieldset": {
+        border: `1px solid transparent`,
+        borderRadius: "10px"
+      },
+      "&::-webkit-scrollbar-thumb, & .MuiPaper-root ::-webkit-scrollbar-thumb": {
+        background: `none !important`
+      },
+      "&::-webkit-scrollbar-track, & .MuiPaper-root ::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
+      "&:hover": {
+        "&::-webkit-scrollbar-thumb, & .MuiPaper-root ::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track, & .MuiPaper-root ::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
+      "& .sld-wrpr": {
+        paddingLeft: "5px",
+        "& .sliderInput": {
+          background: theme?.palette?.editor?.inputFieldBgColor,
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+          borderRadius: "10px",
+          width: "46px !important",
+          marginLeft: "10px",
+          height: '36px !important'
+        }
+      },
+      '& .MuiFormHelperText-root': {
+        margin: '4px 0px 0px 0px',
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        fontFamily: "Inter, sans-serif"
+      }
     },
     "& .MuiTypography-root": {
       color: theme?.palette?.editor?.textColor
@@ -26,11 +166,41 @@ const useCommonStyle = theme => ({
     backgroundColor: theme?.palette?.editor?.background,
     color: theme?.palette?.editor?.textColor
   },
+  customCheckBox: {
+    padding: "0px",
+    "& .MuiCheckbox-root": {
+      padding: "8px 8px 8px 10px",
+      "&:hover": {
+        background: "unset !important"
+      }
+    },
+    "& button": {
+      width: "18px !important",
+      height: "18px !important",
+      borderRadius: "3px",
+      border: `1px solid ${theme?.palette?.editor?.buttonBorder3}`,
+      "& svg": {
+        width: "14px",
+        height: "14px"
+      }
+    },
+    "& .checkedIcon": {
+      background: "#2563EB",
+      borderColor: "#2563EB",
+      padding: "0px"
+    },
+    "& .unCheckedIcon": {
+      background: theme?.palette?.editor?.checkedIconBg
+    },
+    "& p": {
+      margin: "0px !important"
+    }
+  },
   customPaddingInput: {
     background: theme?.palette?.editor?.inputFieldBgColor,
     border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
     color: theme?.palette?.editor?.textColor,
-    borderRadius: '6px'
+    borderRadius: "6px"
   },
   colorPickerPopup: {
     "& .MuiPaper-root": {
@@ -40,7 +210,7 @@ const useCommonStyle = theme => ({
     "& .popup_tabs": {
       backgroundColor: theme?.palette?.editor?.background,
       "@media only screen and (max-width: 899px)": {
-        width: '100% !important'
+        width: "100% !important"
       }
     },
     "& .popup_tabs-header": {
@@ -78,6 +248,9 @@ const useCommonStyle = theme => ({
       }
     }
   },
+  colorPickerBtnBorder: {
+    border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+  },
   signaturePopup: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
@@ -175,7 +348,7 @@ const useCommonStyle = theme => ({
       },
       "& .deleteBtn": {
         background: "transparent",
-        margin: '0px !important'
+        margin: "0px !important"
       },
       "& .MuiGrid-container": {
         "& .workFlowButton": {
@@ -209,6 +382,44 @@ const useCommonStyle = theme => ({
   textOptions: {
     "& .MuiPopover-root": {
       backgroundColor: theme?.palette?.editor?.background
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px",
+      color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+    }
+  },
+  textOptionsList: {
+    "& .MuiMenuItem-root": {
+      padding: "8px 12px",
+      fontSize: "12px",
+      color: theme?.palette?.editor?.menuOptionTextColor,
+      fontWeight: '500',
+      fontFamily: "Inter, sans-serif",
+      minHeight: '36px',
+      "&:hover": {
+        backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
+      }
+    },
+    '& .Mui-selected': {
+      background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
+    },
+    "& .MuiListSubheader-root": {
+      color: "gray",
+      fontWeight: "bold",
+      fontSize: "12px"
+    },
+    "& .MuiPaper-root": {
+      borderRadius: '8px',
+      padding: '0px',
+      background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
+    },
+    '& .MuiButtonBase-root': {
+      margin: '4px',
+      borderRadius: '6px'
+    },
+    '& .MuiList-root': {
+      padding: '0px'
     }
   },
   datePicker: {
@@ -252,6 +463,81 @@ const useCommonStyle = theme => ({
         border: `1px solid transparent !important`
       }
     }
+  },
+  buttonMoreOption: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '4px !important',
+    '& svg': {
+      width: '18px !important',
+      height: '18px !important',
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
+  buttonMoreOption2: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    '& svg': {
+      '& path': {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  buttonMoreOption3: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '5px !important',
+    '& svg': {
+      width: '16px !important',
+      height: '16px !important',
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  resizeButton: {
+    background: theme?.palette?.editor?.aiInputBackground,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
+    padding: '5px !important',
+    borderRadius: '50% !important',
+    '& svg': {
+      width: '18px',
+      height: '18px',
+      '& path': {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    '&:hover': {
+      background: theme?.palette?.editor?.aiInputBackground
+    }
+  },
+  gradientFillBtn: {
+    background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
+    textTransform: 'math-auto !important',
+    color: '#FFFFFF !important',
+    padding: '0px 12px !important',
+    height: '32px',
+    borderRadius: '8px',
+    fontWeight: '500',
+    fontSize: '14px'
+  },
+  emptyThumbBtn: {
+    background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
+    color: `${theme?.palette?.editor?.textColor} !important`,
+    fontSize: '14px !important',
+    '& svg': {
+      width: '20px !important',
+      height: '20px !important',
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
   }
 });
 export default useCommonStyle;

package/dist/Editor/helper/deserialize/index.js

@@ -20,6 +20,13 @@ const handleTableCell = (el, children) => {
     }
   };
 };
+const paragraphType = el => {
+  const firstChild = el?.childNodes?.[0];
+  const isFirstChildText = firstChild?.nodeType === 3 || TEXT_TAGS[firstChild?.nodeName];
+  return isFirstChildText ? {
+    type: "paragraph"
+  } : {};
+};
 const ELEMENT_TAGS = {
   A: el => ({
     type: "link",
@@ -59,24 +66,14 @@ const ELEMENT_TAGS = {
   OL: () => ({
     type: "orderedList"
   }),
-  P: () => ({
-    type: "paragraph"
-  }),
-  DIV: () => ({
-    type: "paragraph"
-  }),
+  P: paragraphType,
+  DIV: paragraphType,
   PRE: () => ({
     type: "code"
   }),
-  META: () => ({
-    type: "paragraph"
-  }),
-  STYLE: () => ({
-    type: "paragraph"
-  }),
-  "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
-    type: "paragraph"
-  }),
+  META: paragraphType,
+  STYLE: paragraphType,
+  "GOOGLE-SHEETS-HTML-ORIGIN": paragraphType,
   TABLE: (el, children = []) => {
     try {
       const bodyChild = children || [];
@@ -98,12 +95,8 @@ const ELEMENT_TAGS = {
     type: "table-row"
   }),
   TD: handleTableCell,
-  COLGROUP: () => ({
-    type: "paragraph"
-  }),
-  COL: () => ({
-    type: "paragraph"
-  })
+  COLGROUP: paragraphType,
+  COL: paragraphType
 };
 
 // COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.
@@ -133,7 +126,8 @@ const TEXT_TAGS = {
 const deserialize = el => {
   if (el.nodeType === 3) {
     const match = /\r|\n/.exec(el.textContent);
-    return match ? null : el.textContent;
+    const text = el.textContent.replace(/\r|\n/g, "").trim();
+    return match && !text ? null : el.textContent;
   } else if (el.nodeType !== 1) {
     return null;
   } else if (el.nodeName === "BR") {
@@ -160,7 +154,9 @@ const deserialize = el => {
       overwriteChild,
       ...attrs
     } = ELEMENT_TAGS[nodeName](el, children);
-    return jsx("element", attrs, overwriteChild || children);
+    if (attrs?.type) {
+      return jsx("element", attrs, overwriteChild || children);
+    }
   }
   if (TEXT_TAGS[nodeName]) {
     const attrs = TEXT_TAGS[nodeName](el);

package/dist/Editor/helper/enforceDateFormat.js

@@ -0,0 +1,41 @@
+function enforceDateFormat(inputElement) {
+  inputElement.addEventListener("input", event => {
+    const input = event.target;
+    let value = input.value;
+
+    // Allow only numbers and forward slashes
+    value = value.replace(/[^\d/]/g, "");
+
+    // Enforce MM/DD/YYYY structure
+    if (value.length > 10) {
+      value = value.slice(0, 10);
+    }
+    const parts = value.split("/");
+    if (parts.length > 1) {
+      parts[0] = parts[0].slice(0, 2); // Limit MM to 2 digits
+      if (parts[0] > 12) parts[0] = "12"; // Max month value
+    }
+
+    if (parts.length > 2) {
+      parts[1] = parts[1].slice(0, 2); // Limit DD to 2 digits
+      if (parts[1] > 31) parts[1] = "31"; // Max day value
+    }
+
+    if (parts.length > 3) {
+      parts[2] = parts[2].slice(0, 4); // Limit YYYY to 4 digits
+    }
+
+    input.value = parts.join("/");
+
+    // Optionally, validate the full date
+    if (input.value.length === 10) {
+      const [month, day, year] = input.value.split("/").map(Number);
+      const isValidDate = !isNaN(Date.parse(`${year}-${month}-${day}`));
+      if (!isValidDate) {
+        input.value = ""; // Clear input if invalid
+        alert("Invalid date format. Please enter a valid MM/DD/YYYY date.");
+      }
+    }
+  });
+}
+export default enforceDateFormat;

package/dist/Editor/helper/index.js

@@ -308,7 +308,13 @@ export const getTextColor = (color = "") => {
     color: "transparent !important",
     caretColor: "black",
     "& span": {
-      color: "transparent !important"
+      color: "transparent !important",
+      "& ::selection": {
+        color: "#000 !important"
+      }
+    },
+    "& ::selection": {
+      color: "#000 !important"
     }
   } : {
     color
@@ -331,14 +337,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
     return !isEdit;
   } catch (err) {
     console.log(err);
@@ -360,4 +366,11 @@ export const clearBrainText = editor => {
   } catch (err) {
     console.log(err);
   }
+};
+export const clearSelectionOnly = editor => {
+  try {
+    Transforms.deselect(editor);
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/helper/theme.js

@@ -147,4 +147,27 @@ export const groupByBreakpoint = (styleProps, theme) => {
     }
   };
 };
-export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getBreakpointLineSpacing = (value, breakpoint) => {
+  try {
+    const values = getBreakPointsValue(value, breakpoint);
+    const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
+      if (values[b] || values["lg"]) {
+        const value = values[b] || values["lg"];
+        return {
+          ...a,
+          [b]: value
+        };
+      } else {
+        return a;
+      }
+    }, {});
+    if (breakpoint) {
+      return value[breakpoint] || value["lg"] || value;
+    } else {
+      return cssVal["lg"];
+    }
+  } catch (err) {
+    // console.log(err);
+  }
+};

package/dist/Editor/hooks/useMouseMove.js

@@ -35,6 +35,7 @@ export const EditorProvider = ({
     path: null
   });
   const [fontFamilies, setFontFamilies] = useState({});
+  const [activeBreakPoint, setActiveBreakPoint] = useState("");
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -97,8 +98,10 @@ export const EditorProvider = ({
     setOpenAI,
     updateDragging,
     fontFamilies,
-    setFontFamilies
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
+    setFontFamilies,
+    activeBreakPoint,
+    setActiveBreakPoint
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/hooks/useTable.js

@@ -6,21 +6,25 @@ import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@
 import { encodeToBase64, isHavingSelection } from "../utils/helper";
 import { serializeToText } from "../utils/serializeToText";
 import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "../Elements/Table/tableHelper";
+
+// const selectFirstCell = (tablePath, editor, updateTableSelection) => {
+//   const firstCell = [...tablePath, 0, 0];
+
+//   const end = Editor.end(editor, firstCell);
+
+//   Transforms.select(editor, {
+//     anchor: end,
+//     focus: end,
+//   });
+
+//   updateTableSelection({
+//     startCellPath: firstCell,
+//     endCellPath: [],
+//     isDragging: false,
+//   });
+// };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const selectFirstCell = (tablePath, editor, updateTableSelection) => {
-  const firstCell = [...tablePath, 0, 0];
-  const end = Editor.end(editor, firstCell);
-  Transforms.select(editor, {
-    anchor: end,
-    focus: end
-  });
-  updateTableSelection({
-    startCellPath: firstCell,
-    endCellPath: [],
-    isDragging: false
-  });
-};
 const handleDragEnd = (dragData, editor, resetAll) => {
   const {
     active,
@@ -77,9 +81,6 @@ export const TableProvider = ({
   children,
   otherProps = {}
 }) => {
-  const {
-    tablePath
-  } = otherProps;
   const [hoverPath, setHoverPath] = useState(null);
   const [tableSelection, setTableSelection] = useState(getDefaultTableSelection());
   const [tableResizing, setTableResizing] = useState(null);
@@ -184,9 +185,11 @@ export const TableProvider = ({
       window.removeEventListener("cut", handleCut);
     };
   }, [tableSelection, editor, tableSelection]);
-  useEffect(() => {
-    selectFirstCell(tablePath, editor, updateTableSelection);
-  }, []);
+
+  // useEffect(() => {
+  //   selectFirstCell(tablePath, editor, updateTableSelection);
+  // }, []);
+
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: values,
     children: /*#__PURE__*/_jsxs(DndContext, {

package/dist/Editor/plugins/withCustomDeleteBackward.js

@@ -1,5 +1,5 @@
-import { Editor, Node, Path, Point, Transforms } from "slate";
-import { getNextNode } from "../utils/helper";
+import { Editor, Node, Path, Point, Range, Transforms } from "slate";
+import { containsSurrogatePair, getNextNode } from "../utils/helper";
 const BACKWARD_BLOCKS = ["list-item", "signature"];
 const isNodeTextEmpty = node => {
   const nodeText = Node.string(node);
@@ -29,6 +29,37 @@ const withCustomDeleteBackward = editor => {
           return;
         }
       }
+      if (selection && Range.isCollapsed(selection)) {
+        const [currentNode, path] = Editor.node(editor, selection);
+        if (currentNode && typeof currentNode.text === 'string') {
+          const text = currentNode.text;
+          if (containsSurrogatePair(text)) {
+            // Check if the cursor is at the end of a surrogate pair
+            const {
+              offset
+            } = selection.anchor;
+            const beforeCursor = text.slice(0, offset);
+            const afterCursor = text.slice(offset);
+            if (containsSurrogatePair(beforeCursor) || containsSurrogatePair(afterCursor)) {
+              // Delete the entire surrogate pair
+              Transforms.delete(editor, {
+                at: {
+                  anchor: {
+                    path,
+                    offset: offset - 2
+                  },
+                  // Move back 2 for surrogate pair
+                  focus: {
+                    path,
+                    offset
+                  }
+                }
+              });
+              return;
+            }
+          }
+        }
+      }
 
       // Check if current node is a list item and is the last one, signature node
       const [node] = Editor.nodes(editor, {