@flozy/editor 5.4.0 → 5.4.1

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

@@ -1,77 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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,
-    disabled: isMobile,
-    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

@@ -1,70 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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/TableTool.js

@@ -1,101 +0,0 @@
-import CustomSelect from "../AI/CustomSelect";
-import Styles from "../AI/Styles";
-import { CloseIcon, DeleteIcon } from "../../assets/svg/AIIcons";
-import { AboveArrow, BelowArrow, DuplicateIcon, LeftArrow, PaintIcon, RightArrow } from "../../assets/svg/TableIcons";
-import { jsx as _jsx } from "react/jsx-runtime";
-const wholeTableTools = [{
-  group: "",
-  groupLabel: "",
-  options: [{
-    label: "Duplicate",
-    value: "duplicate",
-    Icon: DuplicateIcon
-  }, {
-    label: "Delete",
-    value: "delete",
-    Icon: DeleteIcon
-  }]
-}];
-const insertColOptions = [{
-  label: "Insert Right",
-  value: "insertRight",
-  Icon: RightArrow
-}, {
-  label: "Insert Left",
-  value: "insertLeft",
-  Icon: LeftArrow
-}];
-const insertRowOptions = [{
-  label: "Insert Above",
-  value: "insertAbove",
-  Icon: AboveArrow,
-  replace: false
-}, {
-  label: "Insert Below",
-  value: "insertBelow",
-  Icon: BelowArrow,
-  replace: false
-}];
-function getTools(dragType, hideDelete) {
-  const insertOptions = dragType === "col" ? insertColOptions : insertRowOptions;
-  const deleteOption = hideDelete ? [] : [{
-    label: "Delete",
-    value: "delete",
-    Icon: DeleteIcon,
-    replace: false
-  }];
-  let tools = [{
-    group: "",
-    groupLabel: "",
-    options: [{
-      label: "Color",
-      value: "color",
-      Icon: PaintIcon
-    }, {
-      label: "Duplicate",
-      value: "duplicate",
-      Icon: DuplicateIcon
-    }, ...insertOptions, {
-      label: "Clear Contents",
-      value: "clear",
-      Icon: CloseIcon
-    }, ...deleteOption]
-  }];
-  return tools;
-}
-export function TableToolOnDrag({
-  theme,
-  dragType,
-  handleToolAction,
-  hideDelete
-}) {
-  const classes = Styles(theme);
-  const tools = getTools(dragType, hideDelete);
-  return /*#__PURE__*/_jsx(CustomSelect, {
-    classes: classes,
-    show: true,
-    options: tools,
-    onSend: (value, option) => {
-      handleToolAction(value, option, dragType);
-    },
-    btnProps: {
-      onMouseDown: e => e.stopPropagation(),
-      onMouseUp: e => e.stopPropagation()
-    }
-  });
-}
-function TableTool({
-  theme,
-  handleToolAction
-}) {
-  const classes = Styles(theme);
-  return /*#__PURE__*/_jsx(CustomSelect, {
-    classes: classes,
-    show: true,
-    options: wholeTableTools,
-    onSend: (value, option) => {
-      handleToolAction(value, option);
-    }
-  });
-}
-export default TableTool;

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

@@ -1,71 +0,0 @@
-import { getNode } from "../../utils/helper";
-import { serializeToText } from "../../utils/serializeToText";
-export const getRectangleBounds = tableSelection => {
-  const {
-    startCellPath,
-    endCellPath
-  } = tableSelection;
-  if (!startCellPath?.length) return [];
-  const startPath = startCellPath.slice(0, -2);
-  const startCell = startCellPath.slice(-2);
-  const endCell = endCellPath.slice(-2);
-  const [startRow, startCol] = startCell;
-  const [endRow, endCol] = endCell?.length ? endCell : startCell;
-  const minRow = Math.min(startRow, endRow);
-  const maxRow = Math.max(startRow, endRow);
-  const minCol = Math.min(startCol, endCol);
-  const maxCol = Math.max(startCol, endCol);
-  const selectedPaths = [];
-  for (let row = minRow; row <= maxRow; row++) {
-    for (let col = minCol; col <= maxCol; col++) {
-      selectedPaths.push([...startPath, row, col]);
-    }
-  }
-  return selectedPaths;
-};
-export const createCopiedTableStructure = (editor, tableSelection, currentTableNode, tablePath) => {
-  const selectedCells = getRectangleBounds(tableSelection);
-  const formattedCells = selectedCells.map(cell => cell.slice(-2));
-  const tableChild = [];
-  const rowIndexes = [...new Set(formattedCells.map(cell => cell[0]))];
-  rowIndexes.forEach((rowIndex, row_i) => {
-    const row = {
-      type: "table-row",
-      children: []
-    };
-
-    // Filter cells that belong to the current row
-    const cellsInRow = formattedCells.filter(cell => cell[0] === rowIndex);
-
-    // Iterate over the columns of the row to create table cells
-    const columnIndexes = [...new Set(cellsInRow.map(cell => cell[1]))];
-    columnIndexes.forEach((columnIndex, col_i) => {
-      const cellPath = [...tablePath, rowIndex, columnIndex];
-      const columnNode = getNode(editor, cellPath);
-      row.children.push(columnNode);
-    });
-    tableChild.push(row);
-  });
-  const table = {
-    ...currentTableNode,
-    children: tableChild,
-    rows: rowIndexes?.length,
-    columns: tableChild[0]?.children?.length // first row's children length
-  };
-
-  return table;
-};
-export const tableNodeToDom = tableNode => {
-  const tableEle = document.createElement("table");
-  tableNode.children?.forEach(row => {
-    const rowEle = document.createElement("tr");
-    row?.children?.forEach(cell => {
-      const cellEle = document.createElement("td");
-      const cellText = serializeToText(cell);
-      cellEle.innerHTML = cellText;
-      rowEle.appendChild(cellEle);
-    });
-    tableEle.appendChild(rowEle);
-  });
-  return tableEle;
-};