@flozy/editor 1.5.6 → 1.5.8

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

@@ -4,7 +4,7 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
 import { IconButton, Tooltip } from "@mui/material";
-import CompressIcon from "@mui/icons-material/Compress";
+// import CompressIcon from "@mui/icons-material/Compress";
 import { insertGrid } from "../../utils/grid";
 import useDragAndDrop from "../../common/useDragAndDrop";
 import useResize from "../../utils/customHooks/useResize";
@@ -58,6 +58,7 @@ const Grid = props => {
   } = elSize || {};
   const editor = useSlateStatic();
   const selected = useSelected();
+  // const [selected, setSelected] = useState(false);
   const path = ReactEditor.findPath(editor, element);
   const [parentDOM, setParentDOM] = useState(null);
 
@@ -185,6 +186,17 @@ const Grid = props => {
     onDragEnd,
     onDrop
   });
+
+  // const onMouseOver = (e) => {
+  //   e.stopPropagation();
+  //   setSelected(true);
+  // };
+
+  // const onMouseLeave = (e) => {
+  //   e.stopPropagation();
+  //   setSelected(false);
+  // };
+
   const GridToolBar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
@@ -231,7 +243,10 @@ const Grid = props => {
       borderWidth: borderWidth || "1px",
       borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
       borderStyle: borderStyle || "solid"
-    },
+    }
+    // onMouseOver={onMouseOver}
+    // onMouseLeave={onMouseLeave}
+    ,
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {
         position: "absolute",
@@ -242,7 +257,7 @@ const Grid = props => {
         backgroundRepeat: "no-repeat",
         backgroundSize: "cover"
       }
-    }), dndElements, !readOnly && /*#__PURE__*/_jsxs("div", {
+    }), !readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
       children: [/*#__PURE__*/_jsx("div", {
@@ -279,24 +294,6 @@ const Grid = props => {
         height: resizing ? `${size?.height}px` : elHeight ? `${elHeight}px` : "fit-content"
       },
       children: children
-    }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
-      onPointerDown: onMouseDown,
-      style: {
-        opacity: 1,
-        background: "#FFF",
-        position: "absolute",
-        left: 0,
-        right: 0,
-        bottom: "-28px",
-        margin: "auto",
-        color: "#FFF",
-        backgroundColor: "#2684ff",
-        width: "42px",
-        height: "42px",
-        zIndex: 1000
-      },
-      className: "",
-      children: /*#__PURE__*/_jsx(CompressIcon, {})
     })]
   });
 };

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

@@ -50,7 +50,8 @@ const GridItem = props => {
     bottomRight
   } = borderRadius || {};
   const editor = useSlateStatic();
-  const selected = useSelected();
+  // const selected = useSelected();
+  const [selected, setSelected] = useState(false);
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
   const GridItemToolbar = () => {
@@ -97,6 +98,18 @@ const GridItem = props => {
       });
     }
   };
+  const onMouseOver = e => {
+    if (!readOnly) {
+      e.stopPropagation();
+      setSelected(true);
+    }
+  };
+  const onMouseLeave = e => {
+    if (!readOnly) {
+      e.stopPropagation();
+      setSelected(false);
+    }
+  };
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `grid-item xs-${grid} element-root gi-top-wrpr`,
@@ -116,6 +129,8 @@ const GridItem = props => {
         background: `${bgColorHover || bgColor || "transparent"}`
       }
     },
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
     children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,

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

@@ -8,7 +8,7 @@ const usePopupStyle = () => ({
     width: "350px",
     maxheight: "300px",
     overflow: "auto",
-    marginBottom: "12px",
+    // marginBottom: "12px",
     "& .textSettingHeader": {
       borderBottom: "1px solid #DCE4EC",
       padding: "8px 0px 5px",

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Popper, Fade, Paper, IconButton,
 // Drawer,
 Grid, Typography } from "@mui/material";
@@ -28,26 +28,38 @@ const PopupTool = props => {
     } else {
       const domSelection = window.getSelection();
       const domRange = domSelection.getRangeAt(0);
-      const rect = domRange.getBoundingClientRect();
-      if (event === "end") {
-        setAnchorEl({
-          clientWidth: rect.width,
-          clientHeight: rect.height,
-          getBoundingClientRect: () => rect
-        });
+      const {
+        startOffset,
+        endOffset
+      } = domRange || {};
+      if (startOffset !== endOffset) {
+        const rect = domRange.getBoundingClientRect();
+        if (event === "end" && !open && anchorEl === null) {
+          setAnchorEl({
+            clientWidth: rect.width,
+            clientHeight: rect.height,
+            getBoundingClientRect: () => rect
+          });
+        }
       }
     }
   }, [selection, event]);
   const handleClose = () => {
     setAnchorEl(null);
   };
+  const toolTextFormat = useMemo(() => {
+    return /*#__PURE__*/_jsx(TextFormat, {
+      editor: editor,
+      classes: classes
+    });
+  }, [open]);
   return /*#__PURE__*/_jsx(Popper, {
     id: id,
     open: open,
     disablePortal: false,
     anchorEl: anchorEl,
     transition: true,
-    placement: "right-end",
+    placement: "auto-end",
     onMouseDown: e => e.preventDefault(),
     sx: classes.popupWrapper,
     className: "tools-drawer",
@@ -84,10 +96,7 @@ const PopupTool = props => {
               children: /*#__PURE__*/_jsx(CloseIcon, {})
             })
           })]
-        }), /*#__PURE__*/_jsx(TextFormat, {
-          editor: editor,
-          classes: classes
-        })]
+        }), toolTextFormat]
       })
     })
   });

package/package.json

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