@flozy/editor 3.8.5 → 3.8.6

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from "react";
-import { Transforms, Path } from "slate";
+import { Transforms, Path, Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
@@ -30,11 +30,16 @@ const GridToolBar = ({
   onAddGridItem,
   onAddSection,
   onMoveSection,
-  path
+  path,
+  isSectionFullWidth
 }) => {
   return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
     className: "grid-container-toolbar",
     contentEditable: false,
+    style: isSectionFullWidth ? {
+      right: "4px",
+      top: "4px"
+    } : {},
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Grid Settings",
       arrow: true,
@@ -75,6 +80,17 @@ const GridToolBar = ({
     }) : null]
   }) : null;
 };
+const getParentEl = (editor, path) => {
+  try {
+    if (path?.length) {
+      return Node.parent(editor, path);
+    } else {
+      return null;
+    }
+  } catch (err) {
+    return null;
+  }
+};
 const Grid = props => {
   const theme = useTheme();
   const {
@@ -115,6 +131,11 @@ const Grid = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const [size] = useWindowResize();
+  const parentElement = getParentEl(editor, path);
+  const {
+    sectionGridSize
+  } = parentElement || {};
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
   const onAddGridItem = () => {
     const currentPath = editor.selection?.anchor?.path;
     const ancestorsPath = Path.ancestors(currentPath, {
@@ -329,7 +350,8 @@ const Grid = props => {
         onAddGridItem: onAddGridItem,
         onAddSection: onAddSection,
         onMoveSection: onMoveSection,
-        path: path
+        path: path,
+        isSectionFullWidth: isSectionFullWidth
       })]
     }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
       element: element,

package/dist/Editor/Elements/Table/Styles.js

@@ -1,4 +1,4 @@
-const TableStyles = () => ({
+const TableStyles = themeType => ({
   tableToolBar: {
     position: "absolute",
     top: "-34px",
@@ -61,6 +61,28 @@ const TableStyles = () => ({
     "&:hover": {
       background: "#ccc"
     }
+  },
+  deleteCellsPopUp: {
+    backgroundColor: themeType === "dark" ? "#292C32" : "#FFFFFF",
+    borderRadius: "7px !important",
+    border: themeType === "dark" ? "1px solid #5B5E64" : "1px solid #E4E8EB",
+    zIndex: 100,
+    minWidth: "186px !important"
+  },
+  menuItemPopUp: {
+    padding: "5px 7px !important",
+    margin: "6px !important",
+    borderRadius: 1,
+    userSelect: "none",
+    color: themeType === "dark" ? "#2563EB" : "#0F172A",
+    "&:hover": {
+      // backgroundColor: "rgba(0, 123, 255, 0.1)",
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE"
+    },
+    "&.Mui-selected": {
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
+      color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
+    }
   }
 });
 export default TableStyles;

package/dist/Editor/Elements/Table/Table.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody, Popper, Typography } from "@mui/material";
 import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
 import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
 import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
@@ -15,6 +15,7 @@ import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
+import useClickOutside from "../../hooks/useClickOutside";
 import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist/Editor/Elements/Table/TableCell.js

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { Editor, Element } from "slate";
-import { Box } from "@mui/material";
+import { Editor, Element, Transforms } from "slate";
+import { Box, MenuItem, Popper, Typography } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
 import TableStyles from "./Styles";
 import { useEditorSelection } from "../../hooks/useMouseMove";
+import useClickOutside from "../../hooks/useClickOutside";
 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,7 +29,8 @@ const Resizer = ({
   });
 };
 const TableCell = props => {
-  const classes = TableStyles();
+  const themeType = localStorage.getItem("themeType");
+  const classes = TableStyles(themeType);
   const {
     element,
     attributes,
@@ -69,6 +71,42 @@ const TableCell = props => {
   const tableDOM = table.getDOMNode(path, true);
   const isCellSelected = table.isCellSelected(editor.selection);
   const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const popperOptions = [{
+    value: "Delete Row"
+  }, {
+    value: "Delete Column"
+  }];
+  const onRightClick = e => {
+    e.preventDefault();
+    if (hasSelected) {
+      setAnchorEl(e.currentTarget);
+    }
+  };
+  const closePoper = () => {
+    setAnchorEl(null);
+  };
+  const handleMenuItemClick = value => {
+    Transforms.select(editor, editor.selection);
+    switch (value) {
+      case "Delete Row":
+        table.deleteRow();
+        break;
+      case "Delete Column":
+        table.deleteColumn();
+        break;
+      default:
+        return;
+    }
+    // closePoper();
+  };
+
+  // Use the useClickOutside hook
+  const popperRef = useClickOutside({
+    onClickOutside: closePoper,
+    refCount: 1
+  })[0];
   useEffect(() => {
     if (tableDOM) {
       const {
@@ -89,7 +127,7 @@ const TableCell = props => {
         cellWidth: parentWidth / columns
       });
     }
-  }, [tableDOM]);
+  }, [tableDOM, anchorEl]);
   useEffect(() => {
     if (editor && element && tableSize) {
       const dom = ReactEditor.toDOMNode(editor, element);
@@ -99,14 +137,37 @@ const TableCell = props => {
         height: 100
       });
     }
-  }, [tableSize]);
+  }, [tableSize, anchorEl]);
   useEffect(() => {
     if (!resizing && tableProps) {
       table.updateTableStyle({
         "col.size": size
       }, tableProps);
     }
-  }, [resizing]);
+  }, [resizing, anchorEl]);
+  const poperForDeltion = () => {
+    return /*#__PURE__*/_jsx(Popper, {
+      open: open,
+      anchorEl: anchorEl,
+      placement: "bottom-start",
+      disablePortal: true,
+      ref: popperRef,
+      sx: classes.deleteCellsPopUp,
+      children: popperOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
+        value: option.value,
+        onClick: () => handleMenuItemClick(option.value),
+        contentEditable: false,
+        sx: classes.menuItemPopUp,
+        children: /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: "12px",
+            userSelect: "none"
+          },
+          children: option.value
+        })
+      }, option.value))
+    });
+  };
   const sizeProps = isHeader ? {
     width: size?.width || tableSize?.cellWidth
   } : {};
@@ -121,6 +182,7 @@ const TableCell = props => {
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },
+    onContextMenu: onRightClick,
     children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
       onMouseDown: onMouseDown,
@@ -128,7 +190,7 @@ const TableCell = props => {
     }) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
       className: "selection-area-tc",
       contentEditable: false
-    }) : null]
+    }) : null, poperForDeltion()]
   });
 };
 export default TableCell;

package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js

@@ -8,6 +8,7 @@ import { ReactEditor } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TableContextMenu = props => {
+  console.log("Table context menu :", props);
   const {
     editor
   } = props;

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -8,58 +8,67 @@ import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
-const DragHandleStyle = () => ({
-  dragHandle: {
-    opacity: 0,
-    content: '" "',
+const DragHandleStyle = fromPopper => {
+  const handleDragStyle = fromPopper ? {
+    position: "absolute",
+    top: "6px",
+    left: "4px"
+  } : {
     position: "absolute",
     top: "3px",
-    left: "-52px",
-    borderRadius: "0px",
-    padding: "0px",
-    width: "20px",
-    height: "20px",
-    border: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "grab",
-    color: "#D7D7D6",
-    background: "rgb(221, 221, 221, 0.1)",
-    "& svg": {
-      width: "20px"
+    left: "-52px"
+  };
+  return {
+    dragHandle: {
+      opacity: 0,
+      content: '" "',
+      ...handleDragStyle,
+      borderRadius: "0px",
+      padding: "0px",
+      width: "20px",
+      height: "20px",
+      border: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "grab",
+      color: "#D7D7D6",
+      background: "rgb(221, 221, 221, 0.1)",
+      "& svg": {
+        width: "20px"
+      },
+      "&:hover": {
+        opacity: 1,
+        background: "rgb(221, 221, 221, 0.8)"
+      },
+      "&.active": {
+        opacity: 1,
+        cursor: "grabbing"
+      }
     },
-    "&:hover": {
-      opacity: 1,
-      background: "rgb(221, 221, 221, 0.8)"
+    dropArea: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: -1,
+      "&.dragging": {
+        backgroundColor: "#def4ff"
+      }
     },
-    "&.active": {
-      opacity: 1,
-      cursor: "grabbing"
+    dropAreaOver: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "4px"
     }
-  },
-  dropArea: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-    pointerEvents: "none",
-    zIndex: -1,
-    "&.dragging": {
-      backgroundColor: "#def4ff"
-    }
-  },
-  dropAreaOver: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "4px"
-  }
-});
+  };
+};
 const DragHandle = props => {
-  const classes = DragHandleStyle();
+  const classes = DragHandleStyle(props.fromPopper);
   const editor = useSlateStatic();
   const [dragging, setDragging] = useState(false);
   const {

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

@@ -1,15 +1,17 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Popper, Tooltip } from "@mui/material";
 import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const classes = SectionStyle();
@@ -38,14 +40,33 @@ const Section = props => {
     flexDirection
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
+  const anchorEl = useRef(null);
+  const popperEl = useRef(null);
+  const [size] = useWindowResize();
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
+  const [isHovering, setIsHovering] = useState(false);
+  const onMouseEnter = () => {
+    setIsHovering(true);
+  };
+  const onMouseLeave = () => {
+    setIsHovering(false);
+  };
   const onSettings = () => {
     setOpenSettings(true);
   };
-  const Toolbar = () => {
+  const Toolbar = ({
+    fromPopper
+  }) => {
     return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: `element-toolbar no-border-button hr section-tw sectionIcon`,
-      style: {
+      style: fromPopper ? {
+        position: "unset",
+        marginLeft: "28px",
+        paddingTop: "4px",
+        marginRight: "10px",
+        height: "100%"
+      } : {
         left: "-28px",
         top: "3px"
       },
@@ -99,6 +120,8 @@ const Section = props => {
       alignItems: horizantal,
       justifyContent: vertical
     },
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
@@ -107,9 +130,36 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-        ...props
-      }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
+      ref: anchorEl,
+      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering && isSectionFullWidth,
+        anchorEl: anchorEl?.current,
+        placement: "top-start",
+        sx: {
+          zIndex: 9999
+        },
+        disablePortal: true,
+        ref: popperEl,
+        className: "sectionPopper",
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            bgcolor: "background.paper",
+            background: "#F6F6F6",
+            height: "30px",
+            position: "relative"
+          },
+          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+            ...props,
+            fromPopper: true
+          }) : null, /*#__PURE__*/_jsx(Toolbar, {
+            fromPopper: true
+          })]
+        })
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+          ...props
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
+      }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

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

@@ -6,6 +6,9 @@ const SectionStyle = () => ({
       },
       "& .sectionIcon": {
         opacity: 1
+      },
+      "& .sectionPopper": {
+        opacity: 1
       }
     },
     "& .element-toolbar": {
@@ -13,6 +16,14 @@ const SectionStyle = () => ({
         display: "block"
       }
     },
+    "& .sectionPopper": {
+      "&:hover": {
+        opacity: 1
+      }
+    },
+    "& .sectionPopper": {
+      opacity: 0
+    },
     "& .sectionIcon": {
       opacity: 0,
       padding: "0px",

package/dist/Editor/hooks/useWindowMessage.js

@@ -4,9 +4,19 @@ const useWindowMessage = props => {
     type
   } = props;
   const [message, setMessage] = useState(null);
+  const sendMessage = action => {
+    if (window.parent) {
+      window.parent.postMessage({
+        ...action
+      }, "*");
+    }
+  };
   useEffect(() => {
     if (window.addEventListener) {
       window.addEventListener("message", onMessage, false);
+      sendMessage({
+        isLoaded: true
+      });
     } else {
       window.attachEvent("onmessage", onMessage);
     }
@@ -23,13 +33,6 @@ const useWindowMessage = props => {
       setMessage(e?.data[type]);
     }
   };
-  const sendMessage = action => {
-    if (window.parent) {
-      window.parent.postMessage({
-        ...action
-      }, "*");
-    }
-  };
   return [message, sendMessage];
 };
 export default useWindowMessage;

package/dist/Editor/utils/table.js

@@ -95,28 +95,32 @@ export class TableUtil {
     }
   };
   deleteRow = () => {
-    const {
-      selection
-    } = this.editor;
-    if (!!selection && Range.isCollapsed(selection)) {
-      const [tableNode] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
-      });
-      if (tableNode) {
-        const [[table, tablePath]] = Editor.nodes(this.editor, {
-          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
-        });
-        const [, currentRow] = tableNode;
-        const path = currentRow;
-        Transforms.removeNodes(this.editor, {
-          at: path
-        });
-        Transforms.setNodes(this.editor, {
-          rows: table.rows - 1
-        }, {
-          at: tablePath
+    try {
+      const {
+        selection
+      } = this.editor;
+      if (!!selection && Range.isCollapsed(selection)) {
+        const [tableNode] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
         });
+        if (tableNode) {
+          const [[table, tablePath]] = Editor.nodes(this.editor, {
+            match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+          });
+          const [, currentRow] = tableNode;
+          const path = currentRow;
+          Transforms.removeNodes(this.editor, {
+            at: path
+          });
+          Transforms.setNodes(this.editor, {
+            rows: table.rows - 1
+          }, {
+            at: tablePath
+          });
+        }
       }
+    } catch (error) {
+      console.log("Error", error);
     }
   };
   insertColumn = action => {
@@ -151,34 +155,38 @@ export class TableUtil {
     }
   };
   deleteColumn = () => {
-    const {
-      selection
-    } = this.editor;
-    if (!!selection && Range.isCollapsed(selection)) {
-      const [tableNode] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
-      });
-      if (tableNode) {
-        const [[table, tablePath]] = Editor.nodes(this.editor, {
-          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+    try {
+      const {
+        selection
+      } = this.editor;
+      if (!!selection && Range.isCollapsed(selection)) {
+        const [tableNode] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
         });
-        const [, currentCell] = tableNode;
-        const startPath = currentCell;
+        if (tableNode) {
+          const [[table, tablePath]] = Editor.nodes(this.editor, {
+            match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+          });
+          const [, currentCell] = tableNode;
+          const startPath = currentCell;
 
-        // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
-        startPath[startPath.length - 2] = 0;
-        for (let row = 0; row < table.rows; row++) {
-          Transforms.removeNodes(this.editor, {
-            at: startPath
+          // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
+          startPath[startPath.length - 2] = 0;
+          for (let row = 0; row < table.rows; row++) {
+            Transforms.removeNodes(this.editor, {
+              at: startPath
+            });
+            startPath[startPath.length - 2]++;
+          }
+          Transforms.setNodes(this.editor, {
+            columns: table.columns - 1
+          }, {
+            at: tablePath
           });
-          startPath[startPath.length - 2]++;
         }
-        Transforms.setNodes(this.editor, {
-          columns: table.columns - 1
-        }, {
-          at: tablePath
-        });
       }
+    } catch (error) {
+      console.log("Error ", error);
     }
   };
   updateTableStyle = (styleProps, paths) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.8.5",
+  "version": "3.8.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -62,7 +62,7 @@
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
     "test": "craco test --passWithNoTests",
     "eject": "react-scripts eject",
-    "storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
     "publish:local": "rm -rf /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist --copy-files"