@flozy/editor 7.0.3 → 7.0.4

package/dist/Editor/CommonEditor.js

@@ -91,7 +91,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     otherProps,
     isIframe,
     theme,
-    showViewport = false
+    showViewport = false,
+    overrideWrapperStyles = {}
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -152,7 +153,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const classes = editorStyles({
     padHeight: !fullScreen ? otherProps?.padHeight : 20,
     placeHolderColor: invertColor(pageColor || "#FFF"),
-    theme
+    theme,
+    overrideWrapperStyles
   });
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useEffect(() => {

package/dist/Editor/Editor.css

@@ -1279,9 +1279,10 @@ blockquote {
   background: none !important;
 }
 @media (max-width: 899px) {
-  .MuiPopover-root {
+  /* Qa validation required */
+  /* .MuiPopover-root {
     z-index: 1302 !important;
-  }
+  } */
 
   canvas {
     max-width: 100% !important;

package/dist/Editor/Styles/EditorStyles.js

@@ -1,325 +1,329 @@
 const editorStyles = ({
   padHeight,
   placeHolderColor,
-  theme
-}) => ({
-  root: {
-    display: "flex",
-    position: "relative",
-    padding: "0px",
-    alignItems: "center",
-    justifyContent: "center",
-    "*": {
-      boxSizing: "border-box"
-    },
-    "&.iframe-editor": {
-      "& .mini-tool-wrpr-ei": {
-        display: "none"
-      }
-    },
-    "& .mobileMiniTextWrapper": {
-      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-      position: "fixed",
-      bottom: "env(safe-area-inset-bottom)",
-      left: 0,
-      width: "100%",
-      zIndex: 99999,
-      backgroundColor: theme?.palette?.editor?.background || "#fff",
-      color: theme?.palette?.editor?.textColor || "black",
-      "& .MuiOutlinedInput-input": {
-        color: theme?.palette?.editor?.textColor || "black"
-      }
-    },
-    "&.stimulate-xs": {
-      "& .scrollable-content": {
-        width: "320px"
+  theme,
+  overrideWrapperStyles = {}
+}) => {
+  return {
+    root: {
+      display: "flex",
+      position: "relative",
+      padding: "0px",
+      alignItems: "center",
+      justifyContent: "center",
+      "*": {
+        boxSizing: "border-box"
       },
-      ":before": {
-        content: '" "',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "calc(50% - 162px)",
-        height: "100%",
-        pointerEvents: "none",
-        backgroundColor: "#FFF",
-        zIndex: 10
+      "&.iframe-editor": {
+        "& .mini-tool-wrpr-ei": {
+          display: "none"
+        }
       },
-      ":after": {
-        content: '" "',
-        position: "absolute",
-        top: 0,
-        right: 0,
-        width: "calc(50% - 160px)",
-        height: "100%",
-        pointerEvents: "none",
-        backgroundColor: "#FFF",
-        zIndex: 10
-      }
-    }
-  },
-  slateWrapper: {
-    paddingTop: "0px",
-    height: `${window.innerHeight - padHeight}px`,
-    width: "100%",
-    overflowY: "auto",
-    overflowX: "hidden",
-    display: "flex",
-    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,
-      "&.pc-page-builder": {
-        backgroundColor: "#FFF",
-        color: "#000"
+      "& .mobileMiniTextWrapper": {
+        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+        position: "fixed",
+        bottom: "env(safe-area-inset-bottom)",
+        left: 0,
+        width: "100%",
+        zIndex: 99999,
+        backgroundColor: theme?.palette?.editor?.background || "#fff",
+        color: theme?.palette?.editor?.textColor || "black",
+        "& .MuiOutlinedInput-input": {
+          color: theme?.palette?.editor?.textColor || "black"
+        }
       },
-      "& .signed-btn": {
-        "& img": {
-          backgroundColor: "#FFF"
+      "&.stimulate-xs": {
+        "& .scrollable-content": {
+          width: "320px"
+        },
+        ":before": {
+          content: '" "',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "calc(50% - 162px)",
+          height: "100%",
+          pointerEvents: "none",
+          backgroundColor: "#FFF",
+          zIndex: 10
+        },
+        ":after": {
+          content: '" "',
+          position: "absolute",
+          top: 0,
+          right: 0,
+          width: "calc(50% - 160px)",
+          height: "100%",
+          pointerEvents: "none",
+          backgroundColor: "#FFF",
+          zIndex: 10
         }
-      }
+      },
+      ...overrideWrapperStyles
     },
-    "& .max-content": {
+    slateWrapper: {
+      paddingTop: "0px",
+      height: `${window.innerHeight - padHeight}px`,
       width: "100%",
+      overflowY: "auto",
+      overflowX: "hidden",
       display: "flex",
-      flex: 1,
       flexDirection: "column",
-      paddingBottom: "25px !important"
-    },
-    "& .scroll-area": {
-      display: "flex",
-      justifyContent: "center",
-      flex: 1
-    },
-    "& .editor-wrapper": {
-      maxWidth: "100%",
-      height: "100%",
-      overflow: "visible",
-      "& .section-wrapper-fluid": {
-        "& .grid-container": {
-          maxWidth: "1440px"
+      alignItems: "center",
+      color: "#0f172a",
+      "& .has-topbanner": {
+        "& .doc-title-ele-wrpr": {
+          marginTop: "12px"
         }
-      }
-    },
-    "& .el-toolbar": {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      width: "fit-content",
-      "& button": {
-        border: "1px solid rgba(37, 99, 235, 0.32)",
-        borderRadius: "10px",
-        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-        background: "#fff",
-        width: "36px",
-        height: "36px",
-        "&.mr": {
-          marginRight: "2px"
+      },
+      "&.no-color": {
+        backgroundColor: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.textColor,
+        "&.pc-page-builder": {
+          backgroundColor: "#FFF",
+          color: "#000"
         },
-        "& svg": {
-          stroke: "rgb(100, 116, 139);"
-        }
-      }
-    },
-    "& .accordion-summary-collapse-btn": {
-      padding: "4px",
-      width: '5px'
-    },
-    "& .workflow-icon-btn": {
-      pointerEvents: "none",
-      position: "absolute",
-      right: "-9px",
-      top: "-9px",
-      border: "2px solid #f3b814",
-      padding: "0px",
-      background: "#FFF",
-      "& svg": {
-        width: "18px",
-        height: "18px"
-      }
-    },
-    "& .svg-big-btn": {
-      padding: "2px !important",
-      "& svg": {
-        width: "24px !important",
-        height: "24px !important"
-      }
-    },
-    "& .ed-section-wrapper": {
-      display: "flex",
-      width: "100%",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "relative",
-      "&:hover": {
-        "& .ed-section-inner": {
-          "& .element-toolbar.ss": {
-            display: "block",
-            left: "8px",
-            top: "8px",
-            width: "fit-content",
-            "& button": {
-              boxShadow: "none",
-              color: "#D7D7D6",
-              background: "rgb(221, 221, 221, 0.1)",
-              "&:hover": {
-                background: "rgb(221, 221, 221, 0.8)"
-              }
-            }
+        "& .signed-btn": {
+          "& img": {
+            backgroundColor: "#FFF"
           }
-        },
-        "&.hselect:before": {
-          display: "block"
         }
       },
-      "& .ed-section-inner": {
-        maxWidth: "1440px",
-        "& .element-toolbar.ss": {
-          display: "none"
+      "& .max-content": {
+        width: "100%",
+        display: "flex",
+        flex: 1,
+        flexDirection: "column",
+        paddingBottom: "25px !important"
+      },
+      "& .scroll-area": {
+        display: "flex",
+        justifyContent: "center",
+        flex: 1
+      },
+      "& .editor-wrapper": {
+        maxWidth: "100%",
+        height: "100%",
+        overflow: "visible",
+        "& .section-wrapper-fluid": {
+          "& .grid-container": {
+            maxWidth: "1440px"
+          }
         }
       },
-      "&.needHover:before": {
-        content: '" "',
+      "& .el-toolbar": {
         position: "absolute",
-        width: "calc(100% - 2px)",
-        height: "calc(100% - 2px)",
         left: 0,
         top: 0,
-        border: "1px solid transparent",
-        background: "rgba(0,0,0,0.05)",
+        width: "fit-content",
+        "& button": {
+          border: "1px solid rgba(37, 99, 235, 0.32)",
+          borderRadius: "10px",
+          boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+          background: "#fff",
+          width: "36px",
+          height: "36px",
+          "&.mr": {
+            marginRight: "2px"
+          },
+          "& svg": {
+            stroke: "rgb(100, 116, 139);"
+          }
+        }
+      },
+      "& .accordion-summary-collapse-btn": {
+        padding: "4px",
+        width: '5px'
+      },
+      "& .workflow-icon-btn": {
         pointerEvents: "none",
-        display: "none"
-      }
-    },
-    "& .element-empty-btn": {
-      backgroundColor: "rgb(242, 241, 238)",
-      color: "rgba(55, 53, 47, 0.65)",
-      outline: 0,
-      border: 0,
-      padding: "16px 12px",
-      width: "100%",
-      cursor: "pointer",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: "12px",
-      "& svg": {
-        marginRight: "8px"
-      }
-    },
-    "& .content-editable.empty": {
-      "&:after": {
-        color: theme?.palette?.type === "dark" ? "#99A5B6" : placeHolderColor
-      }
-    },
-    "& .checkbox-edit": {
-      alignSelf: "flex-start",
-      "& .MuiFormControlLabel-root": {
-        marginRight: "0px"
+        position: "absolute",
+        right: "-9px",
+        top: "-9px",
+        border: "2px solid #f3b814",
+        padding: "0px",
+        background: "#FFF",
+        "& svg": {
+          width: "18px",
+          height: "18px"
+        }
       },
-      "& .MuiCheckbox-root": {
-        padding: "5px",
+      "& .svg-big-btn": {
+        padding: "2px !important",
         "& svg": {
-          width: "20px",
-          height: "20px"
+          width: "24px !important",
+          height: "24px !important"
         }
-      }
-    },
-    "& .tools-drawer": {
-      zIndex: 1300,
-      "& .MuiDrawer-paper": {
-        backgroundColor: theme?.palette?.editor?.background
-      }
-    },
-    "& .section-tw": {
-      background: 'transparent !important',
-      "& button": {
-        padding: "2px",
-        borderRadius: "0px",
+      },
+      "& .ed-section-wrapper": {
+        display: "flex",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+        "&:hover": {
+          "& .ed-section-inner": {
+            "& .element-toolbar.ss": {
+              display: "block",
+              left: "8px",
+              top: "8px",
+              width: "fit-content",
+              "& button": {
+                boxShadow: "none",
+                color: "#D7D7D6",
+                background: "rgb(221, 221, 221, 0.1)",
+                "&:hover": {
+                  background: "rgb(221, 221, 221, 0.8)"
+                }
+              }
+            }
+          },
+          "&.hselect:before": {
+            display: "block"
+          }
+        },
+        "& .ed-section-inner": {
+          maxWidth: "1440px",
+          "& .element-toolbar.ss": {
+            display: "none"
+          }
+        },
+        "&.needHover:before": {
+          content: '" "',
+          position: "absolute",
+          width: "calc(100% - 2px)",
+          height: "calc(100% - 2px)",
+          left: 0,
+          top: 0,
+          border: "1px solid transparent",
+          background: "rgba(0,0,0,0.05)",
+          pointerEvents: "none",
+          display: "none"
+        }
+      },
+      "& .element-empty-btn": {
+        backgroundColor: "rgb(242, 241, 238)",
+        color: "rgba(55, 53, 47, 0.65)",
+        outline: 0,
+        border: 0,
+        padding: "16px 12px",
+        width: "100%",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "12px",
         "& svg": {
-          width: "17px",
-          height: "18px",
-          marginTop: "-1px"
+          marginRight: "8px"
         }
-      }
-    },
-    "& .carousel-item": {
-      padding: "12px 32px"
-    },
-    "& .slick-arrow": {
-      borderRadius: "50%",
-      backgroundColor: "#F8FAFF",
-      textAlign: "center",
-      border: "1px solid #CFD8F5"
-    },
-    "& .embed-image-wrpr .image-frame": {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      padding: "0px",
-      // pointerEvents: "none",
-      "& svg": {
+      },
+      "& .content-editable.empty": {
+        "&:after": {
+          color: theme?.palette?.type === "dark" ? "#99A5B6" : placeHolderColor
+        }
+      },
+      "& .checkbox-edit": {
+        alignSelf: "flex-start",
+        "& .MuiFormControlLabel-root": {
+          marginRight: "0px"
+        },
+        "& .MuiCheckbox-root": {
+          padding: "5px",
+          "& svg": {
+            width: "20px",
+            height: "20px"
+          }
+        }
+      },
+      "& .tools-drawer": {
+        zIndex: 1300,
+        "& .MuiDrawer-paper": {
+          backgroundColor: theme?.palette?.editor?.background
+        }
+      },
+      "& .section-tw": {
+        background: 'transparent !important',
+        "& button": {
+          padding: "2px",
+          borderRadius: "0px",
+          "& svg": {
+            width: "17px",
+            height: "18px",
+            marginTop: "-1px"
+          }
+        }
+      },
+      "& .carousel-item": {
+        padding: "12px 32px"
+      },
+      "& .slick-arrow": {
+        borderRadius: "50%",
+        backgroundColor: "#F8FAFF",
+        textAlign: "center",
+        border: "1px solid #CFD8F5"
+      },
+      "& .embed-image-wrpr .image-frame": {
+        position: "absolute",
+        top: 0,
+        left: 0,
         width: "100%",
         height: "100%",
-        "& .op-zero": {
-          fillOpacity: 0
+        padding: "0px",
+        // pointerEvents: "none",
+        "& svg": {
+          width: "100%",
+          height: "100%",
+          "& .op-zero": {
+            fillOpacity: 0
+          }
         }
-      }
-    },
-    "&.hideScroll": {
-      overflowAnchor: "none",
-      "&::-webkit-scrollbar-track": {
-        background: "none !important"
       },
-      "&::-webkit-scrollbar-thumb": {
-        background: "none !important"
+      "&.hideScroll": {
+        overflowAnchor: "none",
+        "&::-webkit-scrollbar-track": {
+          background: "none !important"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: "none !important"
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+          background: "none !important"
+        }
       },
-      "&::-webkit-scrollbar-thumb:hover": {
-        background: "none !important"
-      }
-    },
-    "& ::selection": {
-      background: 'rgba(35, 131, 226, 0.35)!important',
-      color: 'inherit'
-    },
-    "&.readOnlyContainer": {
-      "& .max-content": {
-        paddingBottom: "0px !important"
+      "& ::selection": {
+        background: 'rgba(35, 131, 226, 0.35)!important',
+        color: 'inherit'
+      },
+      "&.readOnlyContainer": {
+        "& .max-content": {
+          paddingBottom: "0px !important"
+        }
       }
-    }
-  },
-  fullScreenWrapper: {
-    "& .editor-wrapper": {
-      paddingTop: '20px'
-    },
-    "& .MuiDialog-paper, & .MuiPopover-paper": {
-      background: `${theme?.palette?.editor?.background} !important`
     },
-    "& .MuiPaper-root": {
-      borderRadius: "0px !important",
-      "& .MuiDialogTitle-root": {
-        position: "absolute",
-        top: 0,
-        right: "0px",
-        zIndex: 100
+    fullScreenWrapper: {
+      "& .editor-wrapper": {
+        paddingTop: '20px'
+      },
+      "& .MuiDialog-paper, & .MuiPopover-paper": {
+        background: `${theme?.palette?.editor?.background} !important`
       },
-      "& .MuiDialogContent-root": {
-        padding: "0px"
+      "& .MuiPaper-root": {
+        borderRadius: "0px !important",
+        "& .MuiDialogTitle-root": {
+          position: "absolute",
+          top: 0,
+          right: "0px",
+          zIndex: 100
+        },
+        "& .MuiDialogContent-root": {
+          padding: "0px"
+        }
       }
+    },
+    cardsTypo: {
+      color: theme?.palette?.editor?.textColor,
+      fontSize: "14px !important"
     }
-  },
-  cardsTypo: {
-    color: theme?.palette?.editor?.textColor,
-    fontSize: "14px !important"
-  }
-});
+  };
+};
 export default editorStyles;

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

@@ -14,7 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
-    setIsTextSelected,
     customProps,
     editorWrapper
   } = props;
@@ -35,8 +34,12 @@ const PopupTool = props => {
   const {
     selectedElement
   } = useEditorContext();
+  console.log("Editor debug ====>", event, open, anchorEl, selection);
   const updateAnchorEl = useCallback(() => {
     try {
+      const {
+        selection
+      } = editor;
       const isHavingSelection = selection && !Range.isCollapsed(selection);
       if (isHavingSelection) {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
@@ -56,7 +59,7 @@ const PopupTool = props => {
     } catch (err) {
       console.log(err);
     }
-  }, [selection]);
+  }, [editor?.selection]);
   useEditorScroll(editorWrapper, updateAnchorEl);
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
@@ -71,12 +74,12 @@ const PopupTool = props => {
       if (!isCarouselEdit) {
         setOpen(true);
         setPopupType("textFormat");
-        setIsTextSelected(true);
+        // setIsTextSelected(true);
       }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");
-      setIsTextSelected(false);
+      // setIsTextSelected(false);
     }
   }, [event, anchorEl]);
   useEffect(() => {
@@ -88,7 +91,12 @@ const PopupTool = props => {
     }
   }, [selection]);
   useEffect(() => {
-    if (selectedElement?.enable === 1) {
+    const {
+      path,
+      enable
+    } = selectedElement || {};
+    const isFreeGridElement = path && path.split("|").length > 2;
+    if (enable === 1 && isFreeGridElement) {
       setAnchorEl(null);
     }
   }, [selection, selectedElement?.path, selectedElement?.enable]);

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -18,7 +18,7 @@ const Upload = props => {
     item: true,
     xs: 12,
     sx: {
-      padding: "10px",
+      padding: '10px',
       height: '100%'
     },
     className: "ims-right",

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -7,7 +7,7 @@ const UploadStyles = theme => ({
     background: theme?.palette?.editor?.uploadFileBg,
     height: '100%',
     minHeight: '150px',
-    height: 'inherit'
+    height: "inherit"
   },
   uploadField: {
     width: "100%",

package/dist/Editor/common/RnD/ElementSettings/styles.js

@@ -58,8 +58,8 @@ const useElementSettingsStyle = theme => ({
       maxHeight: "500px",
       overflowX: "hidden",
       overflowY: "auto",
-      background: theme?.palette?.editor?.background,
       paddingLeft: "4px",
+      background: theme?.palette?.editor?.background,
       "& .MuiTypography-root, .MuiInputBase-root, input": {
         color: theme?.palette?.editor?.textColor
       },

package/dist/Editor/hooks/useDrag.js

@@ -1,26 +1,20 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 const useDrag = () => {
   const [event, setEvent] = useState("");
-  useEffect(() => {
-    addListener();
-    return () => {
-      removeListener();
-    };
-  }, []);
-  const onMouseDown = () => {
+  const onMouseDown = useCallback(() => {
     setEvent("start");
-  };
-  const onMouseUp = () => {
+  }, []);
+  const onMouseUp = useCallback(() => {
     setEvent("end");
-  };
-  const addListener = () => {
+  }, []);
+  useEffect(() => {
     document.addEventListener("pointerdown", onMouseDown);
     document.addEventListener("pointerup", onMouseUp);
-  };
-  const removeListener = () => {
-    document.removeEventListener("pointerdown", onMouseDown);
-    document.removeEventListener("pointerup", onMouseUp);
-  };
+    return () => {
+      document.removeEventListener("pointerdown", onMouseDown);
+      document.removeEventListener("pointerup", onMouseUp);
+    };
+  }, []);
   return [event];
 };
 export default useDrag;

package/dist/Editor/hooks/useEditorScroll.js

@@ -4,6 +4,7 @@ function useEditorScroll(editorWrapper = {
 }, callback) {
   useEffect(() => {
     const handleScroll = () => {
+      console.log("Editor debug useEditorScroll ====>", editorWrapper, callback);
       if (editorWrapper.current) {
         callback();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -61,7 +61,7 @@
   "scripts": {
     "prepare": "husky install .husky",
     "analyze": "source-map-explorer build/static/js/*.js",
-    "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
+    "lint": "./node_modules/. bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
     "test": "craco test --passWithNoTests",