@flozy/editor 10.6.5 → 10.6.7

package/dist/Editor/common/RnD/Utils/index.js

@@ -122,14 +122,39 @@ const isOverLapLine = ({
 export function getClosestDraggable(x, y, className, activeClassName) {
   const draggables = document.querySelectorAll(className);
   const activeDragEle = document.querySelectorAll(activeClassName)[0];
+  const container = document.querySelector("#slate-wrapper-scroll-container");
+  if (!activeDragEle || !container) return [];
+  const containerRect = container.getBoundingClientRect();
   const {
     left: aLeft,
     top: aTop,
     width: aWidth,
     height: aHeight
   } = activeDragEle?.getBoundingClientRect() || {};
-  let lines = [];
+  const lines = [];
+  const clampLine = ({
+    x,
+    y,
+    width,
+    height
+  }) => {
+    if (width > 1) {
+      if (x < containerRect.left) x = containerRect.left;
+      if (x + width > containerRect.right) width = containerRect.right - x;
+    }
+    if (height > 1) {
+      if (y < containerRect.top) y = containerRect.top;
+      if (y + height > containerRect.bottom) height = containerRect.bottom - y;
+    }
+    return {
+      x,
+      y,
+      width,
+      height
+    };
+  };
   draggables.forEach(draggable => {
+    if (draggable === activeDragEle) return;
     const {
       left,
       top,
@@ -146,42 +171,45 @@ export function getClosestDraggable(x, y, className, activeClassName) {
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: top,
+      const line = {
         x: xVal,
+        y: yVal,
         width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
         height: 1
-      });
+      };
+      lines.push(clampLine(line));
     }
 
     // bottom match
     xVal = x < left ? aLeft : left;
     yVal = top + height;
-    if (Math.abs(top + height - (aTop + aHeight)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+    if (Math.abs(yVal - (aTop + aHeight)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
         height: 1
-      });
+      };
+      lines.push(clampLine(line));
     }
 
-    // center match
+    // center match (horizontal)
     xVal = x < left ? aLeft : left;
     yVal = top + height / 2;
-    if (Math.abs(top + height / 2 - (aTop + aHeight / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+    if (Math.abs(yVal - (aTop + aHeight / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
       x: xVal,
       y: yVal
     }, lines, "y")) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
         height: 1
-      });
+      };
+      lines.push(clampLine(line));
     }
 
     // right match
@@ -191,12 +219,13 @@ export function getClosestDraggable(x, y, className, activeClassName) {
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: 1,
         height: Math.abs(aTop - top)
-      });
+      };
+      lines.push(clampLine(line));
     }
 
     // left match
@@ -206,27 +235,29 @@ export function getClosestDraggable(x, y, className, activeClassName) {
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: 1,
         height: Math.abs(aTop - top)
-      });
+      };
+      lines.push(clampLine(line));
     }
 
-    // middle match
+    // middle match (vertical)
     xVal = left + width / 2;
     yVal = top < aTop ? top : aTop;
-    if (Math.abs(aLeft + aWidth / 2 - (left + width / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+    if (Math.abs(aLeft + aWidth / 2 - xVal) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
       x: xVal,
       y: yVal
     }, lines)) {
-      lines.push({
-        y: yVal,
+      const line = {
         x: xVal,
+        y: yVal,
         width: 1,
         height: Math.abs(aTop - top)
-      });
+      };
+      lines.push(clampLine(line));
     }
   });
   return lines;

package/dist/Editor/common/RnD/VirtualElement/helper.js

@@ -295,7 +295,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
   const itemsData = [];
   const items = dom.querySelectorAll(domClass);
   const nextItemPathLength = curPath?.split("|").length + 2;
-  let sectionHeight = 12;
+  // let sectionHeight = 12;
   for (let i = 0; i < items.length; i++) {
     const itemRect = items[i]?.getBoundingClientRect();
     if (items[i]?.classList.contains("type_box")) {
@@ -315,9 +315,10 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
           gridArea: calculateGridArea(y)
         }
       });
-      sectionHeight += itemRect?.height;
+      // sectionHeight += itemRect?.height;
     }
   }
+
   if (dom?.classList.contains("type_box") && parentDom) {
     const parentDomRect = parentDom?.getBoundingClientRect();
     const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");

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

@@ -77,7 +77,8 @@ const RnD = props => {
     autoAlign,
     setAutoAlign,
     isBoxHeader,
-    customProps
+    customProps,
+    xsHidden
   } = props;
   const {
     isSelectedElement,
@@ -632,32 +633,34 @@ const RnD = props => {
         "data-dragoverid": str_path,
         "data-dragovertype": type
       }) : null]
-    }, eId), !active && rndRef?.current && open && !isInteracting ? /*#__PURE__*/_jsx(ElementOptions, {
-      id: `opt_ref_${str_path}`,
-      open: open,
-      anchorEl: rndRef?.current,
-      enable: enable,
-      handleAction: handleAction,
-      actions: actions,
-      actionsMap: actionsMap,
-      optionsProps: optionsProps,
-      selectedAction: currentAction,
-      path: str_path,
-      theme: theme,
-      translation: translation,
-      customProps: customProps
-    }) : null, /*#__PURE__*/_jsx(ElementSettings, {
-      open: Boolean(currentAction),
-      currentAction: currentAction,
-      anchorEl: rndRef?.current,
-      placement: "right-start",
-      onClose: onCloseSettings,
-      childType: childType,
-      editor: editor,
-      path: sp,
-      ...settingsProps,
-      elementProps: elementProps,
-      theme: theme
+    }, eId), xsHidden && breakpoint === "xs" ? null : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ElementSettings, {
+        open: Boolean(currentAction),
+        currentAction: currentAction,
+        anchorEl: rndRef?.current,
+        placement: "right-start",
+        onClose: onCloseSettings,
+        childType: childType,
+        editor: editor,
+        path: sp,
+        ...settingsProps,
+        elementProps: elementProps,
+        theme: theme
+      }), !active && rndRef?.current && open && !isInteracting ? /*#__PURE__*/_jsx(ElementOptions, {
+        id: `opt_ref_${str_path}`,
+        open: open,
+        anchorEl: rndRef?.current,
+        enable: enable,
+        handleAction: handleAction,
+        actions: actions,
+        actionsMap: actionsMap,
+        optionsProps: optionsProps,
+        selectedAction: currentAction,
+        path: str_path,
+        theme: theme,
+        translation: translation,
+        customProps: customProps
+      }) : null]
     }), dragInfoOpen ? /*#__PURE__*/_jsx(DragInfo, {
       anchorEl: rndRef?.current,
       open: dragInfoOpen,

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

@@ -1,22 +1,59 @@
-import { Select as Core } from "@mui/material";
+import { Select as Core, MenuItem, Typography } from "@mui/material";
 import SelectStyles from "./styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function Select(props) {
   const {
     children,
+    value,
+    onChange,
+    options,
+    label,
+    labelProps,
+    showDefault,
+    translation,
     ...rest
   } = props;
   const {
     theme
   } = useEditorContext();
   const classes = SelectStyles(theme);
-  return /*#__PURE__*/_jsx(Core, {
-    MenuProps: classes.MenuProps,
-    IconComponent: KeyboardArrowDownRoundedIcon,
-    ...rest,
-    children: children
+  const menuOptions = showDefault ? [{
+    label: "None",
+    value: ""
+  }, ...(options || [])] : options;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [label ? /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      sx: {
+        paddingBottom: "4px"
+      },
+      ...(labelProps || {}),
+      children: label
+    }) : null, /*#__PURE__*/_jsx(Core, {
+      size: "small",
+      fullWidth: true,
+      defaultValue: "",
+      value: value || "",
+      onChange: onChange,
+      sx: classes.select,
+      MenuProps: classes.MenuProps,
+      IconComponent: KeyboardArrowDownRoundedIcon,
+      displayEmpty: true,
+      ...rest,
+      children: menuOptions?.map((option, i) => {
+        return /*#__PURE__*/_jsx(MenuItem, {
+          value: option.value,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            children: translation(option.label)
+          })
+        }, i);
+      })
+    })]
   });
 }
 export default Select;

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

@@ -1,16 +1,44 @@
 const SelectStyles = (theme = {}) => {
   const {
     textColor,
-    background
+    textWeightPopUpBackground,
+    menuOptionSelectedOption
   } = theme?.palette?.editor || {};
   return {
     MenuProps: {
+      sx: {
+        zIndex: "1302 !important"
+      },
       PaperProps: {
         sx: {
+          background: textWeightPopUpBackground,
           color: textColor,
-          background
+          borderRadius: "8px",
+          marginTop: "2px",
+          "& li": {
+            padding: "6px 16px",
+            margin: "5px !important",
+            borderRadius: "4px !important"
+          },
+          "& .MuiList-root": {
+            padding: "0px"
+          },
+          "& .MuiTypography-root": {
+            fontSize: "12px !important",
+            fontWeight: 500,
+            fontFamily: "'Inter',sans-serif"
+          },
+          "& .Mui-selected": {
+            background: menuOptionSelectedOption,
+            color: textColor
+          }
         }
       }
+    },
+    select: {
+      "& .MuiSelect-icon": {
+        color: "#64748B !important"
+      }
     }
   };
 };

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

@@ -8,11 +8,11 @@ const accordionTitleBtnStyle = [{
     needPreview: true,
     hideGradient: true
   }, {
-    label: "Accordion Background Color",
+    label: "Background Color",
     key: "accordionBgColor",
     type: "color"
   }, {
-    label: "Accordion Border Color",
+    label: "Border Color",
     key: "accordionBorderColor",
     type: "color"
   }]

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

@@ -6,15 +6,18 @@ const accordionTitleStyle = [{
     key: "textColor",
     type: "color",
     needPreview: true
-  }, {
-    label: "Background Color",
-    key: "bgColor",
-    type: "color"
-  }, {
-    label: "Border Color",
-    key: "borderColor",
-    type: "color"
-  }]
+  }
+  // {
+  //   label: "Background Color",
+  //   key: "bgColor",
+  //   type: "color",
+  // },
+  // {
+  //   label: "Border Color",
+  //   key: "borderColor",
+  //   type: "color",
+  // },
+  ]
 }, {
   tab: "Banner Spacing",
   value: "bannerSpacing",

package/dist/Editor/common/SwipeableDrawer/style.js

@@ -6,20 +6,22 @@ const Styles = theme => ({
     "& .MuiDrawer-paper": {
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
-      "& .MuiInputBase-root": {
-        border: `1px solid ${theme?.palette?.editor?.textColor}`,
-        color: theme?.palette?.editor?.textColor
-      },
-      "& .MuiSvgIcon-root": {
-        color: theme?.palette?.editor?.textColor
-      },
-      "& .MuiFormLabel-root": {
-        color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
-      }
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+
+      // "& .MuiInputBase-root": {
+      //   border: `1px solid ${theme?.palette?.editor?.textColor}`,
+      //   color: theme?.palette?.editor?.textColor,
+      // },
+      // "& .MuiSvgIcon-root": {
+      //   color: theme?.palette?.editor?.textColor,
+      // },
+      // "& .MuiFormLabel-root": {
+      //   color: theme?.palette?.editor?.textColor,
+      //   backgroundColor: theme?.palette?.editor?.background,
+      // },
     }
   },
+
   childContainer: {
     padding: "20px",
     "&.emojiDrawer": {

package/dist/Editor/common/iconListV2.js

@@ -962,6 +962,41 @@ export function DragIcon() {
     })]
   });
 }
+export function ResizeIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("rect", {
+      width: "16",
+      height: "16",
+      rx: "8",
+      fill: "#F8FAFC"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "0.5",
+      y: "0.5",
+      width: "15",
+      height: "15",
+      rx: "7.5",
+      stroke: "#2563EB",
+      strokeOpacity: "0.32"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.76758 6.44141L3.99981 8.20917L5.76758 9.97694",
+      stroke: "#94A3B8",
+      strokeWidth: "0.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M10.2324 6.44141L12.0002 8.20917L10.2324 9.97694",
+      stroke: "#94A3B8",
+      strokeWidth: "0.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
 export function LeftAlignTextFormat() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "19",
@@ -1323,6 +1358,27 @@ export function CheckedBoxCheckIcon() {
     })
   });
 }
+export function CheckedRadioIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 17 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M16.5 8.42148C16.5 12.792 12.9227 16.343 8.5 16.343C4.07734 16.343 0.5 12.792 0.5 8.42148C0.5 4.05093 4.07734 0.5 8.5 0.5C12.9227 0.5 16.5 4.05093 16.5 8.42148Z",
+      fill: "#DEE8FC",
+      stroke: "#2563EB",
+      className: "radio-icon-path"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "8.5",
+      cy: "8.42079",
+      rx: "3.5",
+      ry: "3.46767",
+      fill: "#2563EB"
+    })]
+  });
+}
 export function SectionSettingIcon() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "13",
@@ -1442,6 +1498,26 @@ export function SectionDragIcon() {
     })]
   });
 }
+export function ResetIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "11.646",
+      cy: "11.6452",
+      r: "11.5",
+      transform: "rotate(-89.2717 11.646 11.6452)",
+      fill: "#2563EB",
+      fillOpacity: "0.16"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M18.2814 11.8168V11.8168C18.2813 11.8313 18.2987 11.8387 18.3091 11.8287L19.2379 10.9273C19.6367 10.5404 20.247 10.5482 20.6358 10.9451C21.0245 11.342 21.0168 11.9495 20.6181 12.3364L17.9434 14.9012C17.5478 15.2806 16.9205 15.2708 16.5369 14.8792L13.9636 12.2519C13.7692 12.0534 13.674 11.7974 13.677 11.5622C13.6802 11.3075 13.7819 11.054 13.981 10.8801C14.3797 10.4932 14.9901 10.501 15.3788 10.8979L16.2708 11.8085C16.286 11.824 16.3124 11.8135 16.3126 11.7917V11.7917C16.351 8.77391 13.9017 6.27324 10.8698 6.2347C7.83784 6.19615 5.32577 8.63374 5.28741 11.6516C5.24904 14.6694 7.69833 17.1701 10.7303 17.2086C11.2815 17.2156 11.7092 17.6522 11.7022 18.2009C11.6952 18.7496 11.2566 19.1752 10.7054 19.1682C6.5709 19.1157 3.2663 15.7418 3.31861 11.6265C3.37093 7.51133 6.76023 4.22251 10.8947 4.27507C15.0095 4.32738 18.3338 7.70154 18.2814 11.8168Z",
+      fill: "#2563EB"
+    })]
+  });
+}
 export function PenIcon() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "17",

package/dist/Editor/commonStyle.js

@@ -260,6 +260,12 @@ const useCommonStyle = theme => ({
       "& .signature-canvas": {
         backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
       },
+      "& .clear-canvas": {
+        position: "absolute",
+        top: 6,
+        right: 6,
+        color: theme?.palette?.editor?.closeButtonSvgStroke
+      },
       "& label": {
         color: theme?.palette?.editor?.textColor
       },
@@ -526,6 +532,12 @@ const useCommonStyle = theme => ({
     padding: "16px 8px 16px 10px!important",
     height: "100%"
   },
+  buttonMoreIcon: {
+    position: "absolute",
+    top: "50%",
+    right: -40,
+    transform: "translateY(-50%)"
+  },
   buttonMoreOption: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,

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

@@ -23,11 +23,12 @@ function getInlineTextStyles(element) {
 }
 const handleTableCell = (el, children) => {
   const wrapChild = children?.map(c => {
-    if (typeof c === "string") {
+    const cellText = typeof c === "string" ? c : typeof c === "object" && typeof c?.text === "string" ? c?.text : null;
+    if (cellText !== null) {
       return {
         type: "paragraph",
         children: [{
-          text: c
+          text: cellText
         }],
         cellBgColor: "#FFFFFF"
       };
@@ -137,8 +138,9 @@ const ELEMENT_TAGS = {
     type: "table-row"
   }),
   TD: handleTableCell,
-  COLGROUP: paragraphType,
-  COL: paragraphType,
+  // 'colgroup' and 'col' are commented out due to issues with table data copied from Microsoft Excel
+  // COLGROUP: paragraphType,
+  // COL: paragraphType,
   HR: () => ({
     type: "divider",
     borderColor: "#CCC"

package/dist/Editor/helper/index.js

@@ -401,4 +401,8 @@ export const clearSelectionOnly = editor => {
   } catch (err) {
     console.log(err);
   }
+};
+export const isMobileWindow = () => {
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
+  return isMobile;
 };

package/dist/Editor/hooks/useTable.js

@@ -190,16 +190,17 @@ export const TableProvider = ({
   //   selectFirstCell(tablePath, editor, updateTableSelection);
   // }, []);
 
+  const onClickAway = () => {
+    setTableSelection(getDefaultTableSelection());
+    setHoverPath(null);
+  };
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: values,
     children: /*#__PURE__*/_jsxs(DndContext, {
       sensors: sensors,
       onDragEnd: data => handleDragEnd(data, editor, resetAll),
       children: [/*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: () => {
-          setTableSelection(getDefaultTableSelection());
-          setHoverPath(null);
-        },
+        onClickAway: onClickAway,
         children: /*#__PURE__*/_jsx("div", {
           children: children
         })

package/dist/Editor/plugins/withCustomDeleteBackward.js

@@ -1,5 +1,6 @@
 import { Editor, Node, Path, Point, Range, Transforms } from "slate";
 import { containsSurrogatePair, getNextNode } from "../utils/helper";
+import { onDeleteBackwardAccordion } from "../utils/accordion";
 const BACKWARD_BLOCKS = ["list-item", "signature"];
 const isNodeTextEmpty = node => {
   const nodeText = Node.string(node);
@@ -32,7 +33,7 @@ const withCustomDeleteBackward = editor => {
         }
         if (selection && Range.isCollapsed(selection)) {
           const [currentNode, path] = Editor.node(editor, selection);
-          if (currentNode && typeof currentNode.text === 'string') {
+          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
@@ -60,6 +61,10 @@ const withCustomDeleteBackward = editor => {
               }
             }
           }
+          const preventDefaultAccordion = onDeleteBackwardAccordion(editor);
+          if (preventDefaultAccordion) {
+            return;
+          }
         }
 
         // Check if current node is a list item and is the last one, signature node