@flozy/editor 9.8.9 → 9.9.1

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { createContext, useContext, useEffect, useRef, useState } from "react";
 import { Path, Transforms, Node } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, useTheme } from "@mui/material";
@@ -27,6 +27,12 @@ const MAX_DEVICE_WIDTH = {
   lg: 980,
   xs: 320
 };
+
+// Create a Context
+export const FreeGridContext = /*#__PURE__*/createContext(null);
+export const useFreeGrid = () => {
+  return useContext(FreeGridContext);
+};
 const FreeGrid = props => {
   const theme = useTheme();
   const breakpoint = useBreakpoints(theme);
@@ -68,6 +74,7 @@ const FreeGrid = props => {
   const [autoAlign, setAutoAlign] = useState(false);
   const count = useRef(2);
   const childrenCountRef = useRef(element?.children?.length);
+  const [isInteracting, setIsInteracting] = useState(false);
   const onChange = data => {
     const append = breakpoint === "lg" ? "" : `_${breakpoint}`;
     const updateData = {
@@ -466,127 +473,134 @@ const FreeGrid = props => {
   //   return eleId;
   // }, [autoAlign, updated_at, breakpoint, path]);
 
-  return /*#__PURE__*/_jsx(RnD, {
-    id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
-    className: `
+  return /*#__PURE__*/_jsx(FreeGridContext.Provider, {
+    value: {
+      isInteracting,
+      setIsInteracting
+    },
+    children: /*#__PURE__*/_jsx(RnD, {
+      id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
+      className: `
         freegrid-section breakpoint-${breakpoint} 
         freegrid-section_${path.join("_")}
       `,
-    editor: editor,
-    path: path,
-    disableDragging: true,
-    style: {
-      position: "relative",
-      "--height": `${height}px`
-    },
-    dataSets: {
-      "data-height-xs": height_xs
-    },
-    defaultStyle: {
-      width: "100%",
-      height: height ? `${height}px` : "auto"
-    },
-    enableResizing: {
-      bottom: true,
-      top: false,
-      left: false,
-      right: false,
-      topLeft: false,
-      topRight: false,
-      bottomLeft: false,
-      bottomRight: false
-    },
-    actions: sectionTypeOptions,
-    type: "parent",
-    optionsProps: {
-      placement: "right",
-      sx: {
-        ...classes.sectionPopper,
-        ...(customSX?.sectionPopper || {})
-      }
-    },
-    settingsProps: {
-      settings: "freeGrid",
-      customProps
-    },
-    onChange: onChange,
-    handleActionClick: handleActionClick,
-    actionsMap: {
-      addElement: {
-        Component: AddElement,
-        placement: "left",
-        title: "Add Element",
-        props: {
-          handleClick: handleAddElementClick,
-          hideTools: hideTools || [],
-          translation: {
-            translation
-          },
-          customProps: {
-            customProps
-          }
-        }
+      editor: editor,
+      path: path,
+      disableDragging: true,
+      style: {
+        position: "relative",
+        "--height": `${height}px`
       },
-      more: {
-        Component: More,
-        placement: "left",
-        title: "More Options",
-        props: {
-          handleClick: handleMoreClick,
-          translation: {
-            translation
-          },
-          customProps: {
-            customProps
-          },
-          breakpoint
-        }
+      dataSets: {
+        "data-height-xs": height_xs
       },
-      settings: {
-        Component: SectionSettings,
-        placement: "left",
-        title: "Section Settings",
-        props: {
-          editor,
-          path,
-          classes,
-          translation
+      defaultStyle: {
+        width: "100%",
+        height: height ? `${height}px` : "auto"
+      },
+      enableResizing: {
+        bottom: true,
+        top: false,
+        left: false,
+        right: false,
+        topLeft: false,
+        topRight: false,
+        bottomLeft: false,
+        bottomRight: false
+      },
+      actions: sectionTypeOptions,
+      type: "parent",
+      optionsProps: {
+        placement: "right",
+        sx: {
+          ...classes.sectionPopper,
+          ...(customSX?.sectionPopper || {})
         }
-      }
-    },
-    readOnly: readOnly,
-    updated_at: updated_at,
-    breakpoint: breakpoint,
-    handleContextMenuClick: handleContextMenuClick,
-    translation: translation,
-    customProps: customProps,
-    sectionElement: element,
-    autoAlign: autoAlign,
-    setAutoAlign: setAutoAlign,
-    children: /*#__PURE__*/_jsxs(Box, {
-      ...attributes,
-      id: sectionName,
-      "data-event": "rnd-click",
-      className: "freegrid-container freegrid-container-parent",
-      sx: {
-        ...classes.root,
-        ...freegridSX,
-        background: sectionBgColor || "rgba(255,255,255,1)",
-        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
-        backgroundSize: "cover"
       },
-      "data-path": path.join("|"),
-      "data-dragoverid": path.join("|"),
-      "data-dragovertype": "parent",
-      style: {
-        "--cols": `100%`,
-        "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
+      settingsProps: {
+        settings: "freeGrid",
+        customProps
+      },
+      onChange: onChange,
+      handleActionClick: handleActionClick,
+      actionsMap: {
+        addElement: {
+          Component: AddElement,
+          placement: "left",
+          title: "Add Element",
+          props: {
+            handleClick: handleAddElementClick,
+            hideTools: hideTools || [],
+            translation: {
+              translation
+            },
+            customProps: {
+              customProps
+            }
+          }
+        },
+        more: {
+          Component: More,
+          placement: "left",
+          title: "More Options",
+          props: {
+            handleClick: handleMoreClick,
+            breakpoint,
+            translation: {
+              translation
+            },
+            customProps: {
+              customProps
+            }
+          }
+        },
+        settings: {
+          Component: SectionSettings,
+          placement: "left",
+          title: "Section Settings",
+          props: {
+            editor,
+            path,
+            classes,
+            customProps,
+            translation
+          }
+        }
       },
-      children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
-        placeholder: `${translation("Section")} (${sectionName || "Welcome"})`,
-        className: "freegrid-section-infos",
-        contentEditable: false
-      }) : null]
+      readOnly: readOnly,
+      updated_at: updated_at,
+      breakpoint: breakpoint,
+      handleContextMenuClick: handleContextMenuClick,
+      sectionElement: element,
+      autoAlign: autoAlign,
+      setAutoAlign: setAutoAlign,
+      translation: translation,
+      customProps: customProps,
+      children: /*#__PURE__*/_jsxs(Box, {
+        ...attributes,
+        id: sectionName,
+        "data-event": "rnd-click",
+        className: "freegrid-container freegrid-container-parent",
+        sx: {
+          ...classes.root,
+          ...freegridSX,
+          background: sectionBgColor || "rgba(255,255,255,1)",
+          backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
+          backgroundSize: "cover"
+        },
+        "data-path": path.join("|"),
+        "data-dragoverid": path.join("|"),
+        "data-dragovertype": "parent",
+        style: {
+          "--cols": `100%`,
+          "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
+        },
+        children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
+          placeholder: `${translation("Section")} (${sectionName || "Welcome"})`,
+          className: "freegrid-section-infos",
+          contentEditable: false
+        }) : null]
+      })
     })
   });
 };

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

@@ -209,10 +209,10 @@ const FreeGridBox = props => {
       left: left || 0
     },
     type: "parent-container",
-    customProps: customProps,
-    translation: translation,
     breakpoint: breakpoint,
     isBoxHeader: isBoxHeader,
+    customProps: customProps,
+    translation: translation,
     children: /*#__PURE__*/_jsx(Box, {
       component: "div",
       ...attributes,

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

@@ -317,9 +317,9 @@ const FreeGridItem = props => {
     itemData: {
       left: left || 0
     },
+    breakpoint: breakpoint,
     customProps: customProps,
     translation: translation,
-    breakpoint: breakpoint,
     children: /*#__PURE__*/_jsxs(Box, {
       component: "div",
       ...attributes,

package/dist/Editor/Elements/SimpleText/index.js

@@ -5,7 +5,7 @@ import { Box } from "@mui/material";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
-import { getBreakpointLineSpacing } from "../../helper/theme";
+import { getBreakpointLineSpacing, getDevice } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,14 +28,11 @@ const SimpleText = props => {
     editorPlaceholder,
     translation
   } = customProps;
-  const {
-    activeBreakPoint
-  } = useEditorContext();
   // const { element: pageSt } = getPageSettings(editor) || {};
   // const { pageColor } = pageSt?.pageProps || {};
-  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
+  const breakpoint = getDevice(window.innerWidth);
   const lineH = element?.children[0]?.lineHeight;
-  const lineHeight = getBreakpointLineSpacing(lineH, activeBreakPoint || (isMobile ? "xs" : "lg"));
+  const lineHeight = getBreakpointLineSpacing(lineH, breakpoint);
   const classes = SimpleTextStyle({
     pageColor: "#FFFFFF",
     lineHeight

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

@@ -18,6 +18,7 @@ import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
 import { getPageSettings } from "../../utils/pageSettings";
+import { getDevice } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -46,10 +47,7 @@ const TextFormat = props => {
     fontFamilies,
     theme: appTheme
   } = useEditorContext();
-  const {
-    activeBreakPoint
-  } = useEditorContext();
-  const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
+  const breakpoint = getDevice(window.innerWidth);
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);

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

@@ -15,8 +15,7 @@ const SwitchViewport = props => {
   } = props;
   const classes = useSwitchViewport();
   const {
-    setSelectedElement,
-    setActiveBreakPoint
+    setSelectedElement
   } = useEditorContext();
   useEffect(() => {
     // to reset selection on viewport changes - FS-6589
@@ -32,7 +31,6 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
-          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -42,7 +40,6 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${breakpoint === "xs" ? "active" : ""}`,
         onClick: () => {
-          setActiveBreakPoint("xs");
           onChange("xs");
         },
         children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})

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

@@ -24,6 +24,8 @@ import VirtualTextElement from "./VirtualElement/VirtualTextElement";
 import useAutoScroll from "../../hooks/useAutoScroll";
 import ForceAutoAlignment from "./VirtualElement/ForceAutoAlignment";
 import BoxHeaderAutoAlignment from "./VirtualElement/BoxHeaderAutoAlignment";
+import { reRenderChildNodes } from "./Utils/gridDropItem";
+import { useFreeGrid } from "../../Elements/FreeGrid/FreeGrid";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -70,12 +72,12 @@ const RnD = props => {
     breakpoint = "",
     handleContextMenuClick = () => {},
     itemData = {},
-    customProps,
     sectionElement,
     dataSets,
     autoAlign,
     setAutoAlign,
-    isBoxHeader
+    isBoxHeader,
+    customProps
   } = props;
   const {
     isSelectedElement,
@@ -117,13 +119,17 @@ const RnD = props => {
     y: 0
   });
   const parentSectionPath = str_path?.split("|").slice(0, 2).join("_");
-  const {
-    translation
-  } = customProps;
   const {
     startAutoScroll,
     stopAutoScroll
   } = useAutoScroll(10, "slate-wrapper-scroll-container");
+  const {
+    isInteracting,
+    setIsInteracting
+  } = useFreeGrid();
+  const {
+    translation
+  } = customProps;
   useEffect(() => {
     if (ITEM_TYPES.includes(type)) {
       if (enable === 1) {
@@ -298,7 +304,7 @@ const RnD = props => {
     const {
       updated_at
     } = updated_data || {};
-    setSelectedElement({});
+    // setSelectedElement({});
     // to maitain absolute
     rndRef.current.posUpdated = false;
     // need to retain drag option if section changes
@@ -317,6 +323,7 @@ const RnD = props => {
   };
   const onDragStart = e => {
     e.preventDefault();
+    setIsInteracting(true);
     if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
       const {
         left,
@@ -418,6 +425,7 @@ const RnD = props => {
     e.preventDefault();
     e.stopPropagation();
     stopAutoScroll();
+    setIsInteracting(false);
     if (dragging?.isDragging === 2 && dragging?.position?.strXY && dragging?.dragOver) {
       d.x = e.x;
       d.y = e.y;
@@ -460,6 +468,7 @@ const RnD = props => {
   };
   const onResizeStop = (e, direction, ref, d, position) => {
     e.preventDefault();
+    setIsInteracting(false);
     let updatedPosition = {};
     if (type !== "parent") {
       // update element position while resizing, (for free grid box and item)
@@ -485,17 +494,12 @@ const RnD = props => {
       ...updatedSize
     });
     handleResizeEvent("stop");
-
-    // const parentPath = getParentSectionPath(
-    //   { ref },
-    //   ".freegrid-container-parent"
-    // );
-
-    // const formatParentPath = parentPath?.split("|")?.map((m) => parseInt(m));
-
-    // reRenderChildNodes(editor, formatParentPath);
+    const parentPath = getParentSectionPath({
+      ref
+    }, ".freegrid-container-parent");
+    const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
+    reRenderChildNodes(editor, formatParentPath);
   };
-
   const onCloseSettings = () => {
     setSelectedElement({
       ...selectedElementProps,
@@ -553,6 +557,7 @@ const RnD = props => {
       return {
         onResizeStart: e => {
           e.preventDefault();
+          setIsInteracting(true);
         },
         onDragStart: onDragStart,
         onDrag: onDrag,
@@ -626,7 +631,7 @@ const RnD = props => {
         "data-dragoverid": str_path,
         "data-dragovertype": type
       }) : null]
-    }, eId), !active && rndRef?.current && open ? /*#__PURE__*/_jsx(ElementOptions, {
+    }, eId), !active && rndRef?.current && open && !isInteracting ? /*#__PURE__*/_jsx(ElementOptions, {
       id: `opt_ref_${str_path}`,
       open: open,
       anchorEl: rndRef?.current,

package/dist/Editor/commonStyle.js

@@ -133,7 +133,7 @@ const useCommonStyle = theme => ({
           background: theme?.palette?.editor?.inputFieldBgColor,
           border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
           borderRadius: "10px",
-          width: "46px !important",
+          width: "52px !important",
           marginLeft: "10px",
           height: "36px !important"
         },

package/dist/Editor/hooks/useMouseMove.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.8.9",
+  "version": "9.9.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"