@flozy/editor 5.1.5 → 5.1.7

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

@@ -0,0 +1,77 @@
+import { Button } from "@mui/material";
+import { useMemo, useState } from "react";
+import useTable from "../../hooks/useTable";
+import { jsx as _jsx } from "react/jsx-runtime";
+const showAddButton = (addType, tableNode, hoverPath) => {
+  const [row, col] = hoverPath && hoverPath?.length ? hoverPath.slice(-2) : [];
+  if (addType === "row") {
+    return tableNode?.rows - 1 === row;
+  } else {
+    return tableNode?.columns - 1 === col;
+  }
+};
+const ADD_COL_BTN_WIDTH = 20;
+function AddRowCol(props) {
+  const {
+    tableRef,
+    containerRef,
+    addType,
+    tableNode,
+    onAdd,
+    readOnly
+  } = props;
+  const {
+    hoverPath
+  } = useTable();
+  const [hoveringAddBtn, setHoveringAddBtn] = useState(false);
+  const {
+    tableResizing
+  } = useTable();
+  const {
+    clientHeight,
+    scrollWidth
+  } = tableRef?.current || {};
+  const {
+    clientWidth: containerWidth
+  } = containerRef?.current || {};
+  const buttonStyle = useMemo(() => {
+    if (addType === "row") {
+      const isScrollEnabled = scrollWidth > containerWidth;
+      const width = isScrollEnabled ? containerWidth - ADD_COL_BTN_WIDTH : scrollWidth;
+      return {
+        width
+      };
+    } else {
+      return {
+        height: "100%",
+        marginLeft: "3px"
+      };
+    }
+  }, [scrollWidth, clientHeight, containerWidth, tableResizing]);
+  const showAdd = showAddButton(addType, tableNode, hoverPath);
+  const onMouseEnter = () => setHoveringAddBtn(true);
+  const onMouseLeave = () => setHoveringAddBtn(false);
+  const showBtn = (showAdd || hoveringAddBtn) && !tableResizing && !readOnly;
+  return /*#__PURE__*/_jsx("div", {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx(Button, {
+      sx: {
+        fontSize: "14px",
+        border: "1px dashed #8DA8E3",
+        color: "#2563EB !important",
+        padding: "0px 4px",
+        minWidth: "unset",
+        lineHeight: "18px",
+        fontWeight: "normal !important",
+        ...buttonStyle,
+        opacity: showBtn ? 1 : 0
+      },
+      disabled: !showBtn,
+      onClick: onAdd,
+      children: "+"
+    })
+  });
+}
+export default AddRowCol;

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

@@ -0,0 +1,141 @@
+import { Box, ClickAwayListener, Fade, IconButton, Paper, Popper } from "@mui/material";
+import DragStyles from "./DragStyles";
+import { DragIcon } from "../../common/iconListV2";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { useRef, useState } from "react";
+import { TableToolOnDrag } from "./TableTool";
+import Draggable from "./Draggable";
+import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
+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 DragButton({
+  anchorEl,
+  placement,
+  dragType,
+  onDrag = () => {},
+  handleToolAction,
+  hideDelete,
+  className = "",
+  customProps,
+  dndProps,
+  resetSelection,
+  show
+}) {
+  const {
+    theme
+  } = useEditorContext();
+  const classes = DragStyles(theme);
+  const dragElement = useRef(null);
+  const [showTool, setShowTool] = useState(false);
+  const {
+    isMobile
+  } = customProps || {};
+  const onDragClick = () => {
+    onDrag();
+    setShowTool(true);
+  };
+  const onDragClose = () => {
+    setShowTool(false);
+    setTimeout(() => resetSelection(), 200);
+  };
+  const dragProps = {
+    ...dndProps,
+    id: dndProps?.id + dragType,
+    data: {
+      ...dndProps.data,
+      dragType
+    }
+  };
+  const handleAction = (value, option, dragType) => {
+    const omitValues = ["delete"];
+    if (!omitValues.includes(value)) {
+      setShowTool(false);
+    }
+    handleToolAction(value, option, dragType);
+  };
+  const commonToolProps = {
+    theme,
+    dragType,
+    hideDelete,
+    handleToolAction: (value, option, dragType) => {
+      handleAction(value, option, dragType);
+    }
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: show || showTool ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Popper, {
+        sx: classes.popper,
+        open: Boolean(anchorEl),
+        anchorEl: anchorEl,
+        placement: placement || "left",
+        transition: true,
+        contentEditable: false,
+        ref: dragElement,
+        modifiers: [{
+          name: "offset",
+          options: {
+            offset: [0, -12]
+          }
+        }, {
+          name: "flip",
+          enabled: false // Disable dynamic flipping
+        }],
+
+        disablePortal: dragType !== "row",
+        className: `${className}`,
+        children: ({
+          TransitionProps
+        }) => /*#__PURE__*/_jsx(Fade, {
+          ...TransitionProps,
+          timeout: 350,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(Draggable, {
+              ...dragProps,
+              children: /*#__PURE__*/_jsx(Paper, {
+                sx: dragType === "row" ? {
+                  transform: "rotate(90deg)"
+                } : {},
+                className: `${showTool ? "active" : ""}`,
+                style: {
+                  lineHeight: 0
+                },
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: () => {
+                    onDragClick();
+                  },
+                  children: /*#__PURE__*/_jsx(DragIcon, {})
+                })
+              })
+            })
+          })
+        })
+      }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+        open: showTool,
+        onClose: onDragClose,
+        swipeableDrawer: true,
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: classes.mobileToolDrawer,
+          children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+            ...commonToolProps
+          })
+        })
+      }) : /*#__PURE__*/_jsx(Popper, {
+        open: showTool,
+        anchorEl: dragElement?.current,
+        contentEditable: false,
+        sx: classes.toolPopper,
+        placement: dragType === "row" ? "bottom-start" : "right-start",
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
+          onClickAway: onDragClose,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+              ...commonToolProps
+            })
+          })
+        })
+      })]
+    }) : null
+  });
+}
+export default DragButton;

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

@@ -0,0 +1,70 @@
+const DragStyles = theme => {
+  const {
+    containers,
+    editor
+  } = theme?.palette || {};
+  const {
+    buttonBorder,
+    background,
+    activeColor,
+    signaturePopUpTabButtonSelectedBg,
+    signaturePopUpTabButtonSelectedSvg
+  } = editor || {};
+  const onDragActive = {
+    outline: `1.5px solid ${activeColor || "#2563EB"}`,
+    background: `${signaturePopUpTabButtonSelectedBg} !important`,
+    "& svg ellipse": {
+      fill: `${signaturePopUpTabButtonSelectedSvg}`
+    }
+  };
+  return {
+    popper: {
+      zIndex: 1000,
+      "& .MuiPaper-root": {
+        borderRadius: "3px !important",
+        outline: `1.5px solid ${buttonBorder}`,
+        backgroundColor: `${background}`,
+        "&:hover": onDragActive,
+        "&.active": onDragActive
+      },
+      "& .MuiIconButton-root": {
+        padding: "4px 6px",
+        borderRadius: "none",
+        "& .dragIcon": {
+          width: "14px",
+          height: "10px"
+        },
+        "&:hover": {
+          background: "none"
+        }
+      }
+    },
+    toolPopper: {
+      zIndex: 4001,
+      "& .MuiPaper-root": {
+        borderRadius: "8px"
+      }
+    },
+    mobileToolDrawer: {
+      "& .customSelectContainer": {
+        border: "none !important",
+        padding: "0px !important",
+        boxShadow: "none !important"
+      }
+    },
+    drawerContainer: {
+      "&.MuiDrawer-root": {
+        zIndex: 1301
+      },
+      "& .MuiDrawer-paper": {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        backgroundColor: containers?.card
+      },
+      "& .customSelectContainer": {
+        border: "none"
+      }
+    }
+  };
+};
+export default DragStyles;

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

@@ -0,0 +1,25 @@
+import { useDraggable } from "@dnd-kit/core";
+import { Box } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Draggable(props) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform
+  } = useDraggable(props);
+  const {
+    dragType
+  } = props?.data || {};
+  const style = transform ? {
+    transform: dragType === "row" ? `translate3d(0, ${transform.y}px, 0)` : `translate3d(${transform.x}px, 0, 0)`
+  } : undefined;
+  return /*#__PURE__*/_jsx(Box, {
+    style: style,
+    ref: setNodeRef,
+    ...listeners,
+    ...attributes,
+    children: props.children
+  });
+}
+export default Draggable;

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

@@ -0,0 +1,53 @@
+import { useDroppable } from "@dnd-kit/core";
+import { Box } from "@mui/material";
+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 getStyle(dragType, isOver, tableDOM) {
+  const style = {};
+  const borderStyle = "4px solid #2563EB";
+  if (isOver) {
+    const {
+      width,
+      height
+    } = tableDOM.getBoundingClientRect();
+    if (dragType === "row") {
+      style.borderTop = borderStyle;
+      style.width = width;
+    } else if (dragType === "col") {
+      style.borderLeft = borderStyle;
+      style.height = height;
+    }
+  }
+  return style;
+}
+export function Droppable(props) {
+  const {
+    dragType,
+    tableDOM,
+    ...rest
+  } = props;
+  const {
+    isOver,
+    setNodeRef
+  } = useDroppable(rest);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      ref: setNodeRef,
+      sx: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%"
+      }
+    }), isOver ? /*#__PURE__*/_jsx(Box, {
+      sx: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        ...getStyle(dragType, isOver, tableDOM)
+      }
+    }) : null]
+  });
+}

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

@@ -1,20 +1,25 @@
-const TableStyles = themeType => ({
+const TableStyles = theme => ({
   tableToolBar: {
     position: "absolute",
-    top: "-34px",
+    top: "-24px",
     left: 0,
-    backgroundColor: "#FFF",
-    border: "1px solid rgba(37, 99, 235, 0.32)",
-    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-    borderRadius: "0px",
-    width: "32px",
-    height: "32px",
-    overflow: "hidden",
     transition: "all 0.3s",
     "& button": {
+      backgroundColor: theme?.palette?.editor?.background,
+      border: "1px solid rgba(37, 99, 235, 0.32)",
+      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+      borderRadius: "50%",
+      padding: "4px",
+      margin: "2px",
+      "&:hover": {
+        backgroundColor: theme?.palette?.editor?.background
+      },
       "& svg": {
-        width: "16px",
-        height: "16px"
+        width: "18px",
+        height: "18px",
+        "& path": {
+          stroke: theme?.palette?.editor?.closeButtonSvgStroke
+        }
       }
     },
     "&.active": {
@@ -31,13 +36,7 @@ const TableStyles = themeType => ({
   },
   table: {
     "& td": {
-      padding: "8px 8px",
-      border: "1px solid #E0E0E0",
-      "&.selection": {
-        "& *::selection": {
-          background: "transparent"
-        }
-      }
+      padding: "8px 8px"
     },
     "& .selection-area-tc": {
       position: "absolute",
@@ -45,8 +44,13 @@ const TableStyles = themeType => ({
       height: "100%",
       top: 0,
       left: 0,
-      background: "rgba(149, 218, 255, .3)",
+      outline: "1px solid #2563EB",
       pointerEvents: "none"
+    },
+    "& .hide-drag-btn-wrapper": {
+      "& .row-drag-btn": {
+        display: "none"
+      }
     }
   },
   cellResizer: {
@@ -55,33 +59,11 @@ const TableStyles = themeType => ({
     right: "-2px",
     top: 0,
     background: "transparent",
-    width: "4px",
+    width: "3px",
     borderRadius: "0px",
     zIndex: 1,
     "&: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"
+      background: "#2563EB"
     }
   }
 });