@flozy/editor 4.9.1 → 4.9.3

package/dist/Editor/Elements/Search/SearchList.js

@@ -1,69 +1,25 @@
-import { Box, CircularProgress, Grid, IconButton, InputAdornment, TextField, Typography } from "@mui/material";
+import { Box, CircularProgress, Divider, Grid, IconButton, InputAdornment, TextField, Typography } from "@mui/material";
 import Icon from "../../common/Icon";
 import { SearchIcon } from "../../common/iconslist";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useDebounce } from "use-debounce";
 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 SearchAndDocList = ({
+  mapData,
+  isLoading,
+  lastDocRef,
+  onSearchChange,
   handleClick,
   theme,
-  handleClose,
-  otherProps
+  handleClose
 }) => {
-  const [mapData, setMapData] = useState([]);
-  const [skip, setSkip] = useState(0);
-  const [search, setSearch] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [debouncedSearch] = useDebounce(search, 300);
-  const limit = 20;
-  const observer = useRef();
-  const lastDocRef = useCallback(node => {
-    if (observer.current) observer.current.disconnect();
-    observer.current = new IntersectionObserver(entries => {
-      if (entries[0].isIntersecting) {
-        setSkip(prevSkip => prevSkip + limit);
-      }
-    });
-    if (node) observer.current.observe(node);
-  }, [limit]);
-  useEffect(() => {
-    getDocs({
-      debouncedSearch,
-      skip,
-      limit
-    });
-  }, [skip, debouncedSearch]);
-  const getDocs = async () => {
-    setIsLoading(true);
-    try {
-      if (otherProps?.services) {
-        const result = await otherProps?.services("getDocs", {
-          skip,
-          limit,
-          search
-        });
-        setMapData(prev => skip === 0 ? result.data : [...prev, ...result.data]);
-      }
-    } catch (error) {
-      console.error("Error fetching documents:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  const onSearchChange = value => {
-    setSearch(value);
-    setSkip(0);
-  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      mb: 2,
       sx: {
-        padding: '8px'
+        padding: '9px 16px 8px 16px'
       },
       children: [/*#__PURE__*/_jsx(Typography, {
         sx: {
@@ -92,14 +48,22 @@ const SearchAndDocList = ({
         })
       })]
     }), /*#__PURE__*/_jsx(Box, {
-      mb: 2,
       sx: {
-        padding: '8px'
+        padding: '0px 16px'
+      },
+      children: /*#__PURE__*/_jsx(Divider, {
+        sx: {
+          borderColor: theme?.palette?.primary?.slashBrainBorder
+        }
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        padding: '12px 16px'
       },
       children: /*#__PURE__*/_jsx(TextField, {
         fullWidth: true,
         variant: "outlined",
-        placeholder: "Search documents...",
+        placeholder: "Search here...",
         size: "small",
         onChange: e => onSearchChange(e.target.value),
         InputProps: {
@@ -109,19 +73,29 @@ const SearchAndDocList = ({
           })
         },
         sx: {
+          borderRadius: "8px",
           "& .MuiOutlinedInput-root": {
             color: theme?.palette?.primary?.main,
-            borderRadius: "8px",
-            border: `1px solid ${theme?.palette?.primary?.border2}`,
-            borderColor: theme?.palette?.primary?.border2,
             boxShadow: theme?.palette?.shadows?.shadow12,
             "&:hover .MuiOutlinedInput-notchedOutline": {
-              border: 'transparent'
+              borderRadius: "8px",
+              border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
+              borderColor: theme?.palette?.primary?.slashBrainBorder
             },
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              border: 'transparent'
+              borderRadius: "8px",
+              border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
+              borderColor: theme?.palette?.primary?.slashBrainBorder
             }
           },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderRadius: "8px",
+            border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
+            borderColor: theme?.palette?.primary?.slashBrainBorder
+          },
+          '& .MuiInputBase-root': {
+            borderRadius: '8px'
+          },
           "& svg": {
             "& path": {
               stroke: theme?.palette?.text?.text6
@@ -129,25 +103,44 @@ const SearchAndDocList = ({
           }
         }
       })
-    }), /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsxs(Grid, {
       container: true,
       gap: 1,
       sx: {
+        position: 'relative',
         maxHeight: '400px',
+        minWidth: "275px",
         overflowY: 'auto',
-        padding: '5px'
+        padding: '0px 16px 8px',
+        marginBottom: '20px',
+        scrollbarWidth: "thin",
+        scrollbarColor: `${theme?.palette?.primary?.slashBrainBorder} transparent`,
+        "&::-webkit-scrollbar": {
+          width: "3px",
+          height: "3px !important"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: theme?.palette?.primary?.slashBrainBorder,
+          borderRadius: "4px",
+          width: "3px !important"
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+          backgroundColor: theme?.palette?.primary?.slashBrainBorder
+        },
+        "&::-webkit-scrollbar-track": {
+          background: "transparent"
+        }
       },
-      children: mapData?.map((doc, index) => {
+      children: [mapData?.map((doc, index) => {
         const title = doc?.title?.trim() === "" ? 'Untitled' : doc?.title;
         return /*#__PURE__*/_jsx(Grid, {
           item: true,
           xs: 12,
           ref: index === mapData.length - 1 ? lastDocRef : null,
           sx: {
-            border: `1px solid ${theme?.palette?.primary?.border2}`,
-            borderRadius: '7px',
-            padding: '8px',
-            marginRight: '5px',
+            border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
+            borderRadius: '8px',
+            padding: '6px 10px',
             cursor: 'pointer'
           },
           onClick: () => handleClick(doc),
@@ -165,7 +158,12 @@ const SearchAndDocList = ({
                 children: [/*#__PURE__*/_jsx(Grid, {
                   item: true,
                   sx: {
-                    marginTop: '2px'
+                    marginTop: '2px',
+                    '& svg': {
+                      '& path': {
+                        stroke: theme?.palette?.primary?.slashBrainIcon
+                      }
+                    }
                   },
                   children: /*#__PURE__*/_jsx(Icon, {
                     icon: "docsIcon"
@@ -174,14 +172,15 @@ const SearchAndDocList = ({
                   item: true,
                   children: /*#__PURE__*/_jsx(Typography, {
                     sx: {
-                      fontSize: "14px",
+                      fontSize: "12px",
                       fontWeight: 500,
                       color: theme?.palette?.primary?.main,
                       textOverflow: 'ellipsis',
                       whiteSpace: 'nowrap',
                       overflow: 'hidden',
                       wordBreak: "break-word",
-                      maxWidth: '230px'
+                      maxWidth: '230px',
+                      textAlign: 'left'
                     },
                     children: title
                   })
@@ -189,18 +188,31 @@ const SearchAndDocList = ({
               })
             }), doc?.shared_status === 1 ? /*#__PURE__*/_jsx(Grid, {
               item: true,
+              sx: {
+                '& svg': {
+                  '& path': {
+                    stroke: theme?.palette?.primary?.slashBrainIcon
+                  }
+                }
+              },
               children: /*#__PURE__*/_jsx(Icon, {
                 icon: "userIcon"
               })
             }) : null]
           })
         }, doc.id);
-      })
-    }), isLoading && /*#__PURE__*/_jsx(Box, {
-      display: "flex",
-      justifyContent: "center",
-      mt: 2,
-      children: /*#__PURE__*/_jsx(CircularProgress, {})
+      }), isLoading && /*#__PURE__*/_jsx(Box, {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: 'center',
+        sx: {
+          minWidth: "330px",
+          minHeight: '400px',
+          padding: '0px 16px 8px',
+          position: 'absolute'
+        },
+        children: /*#__PURE__*/_jsx(CircularProgress, {})
+      })]
     })]
   });
 };

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

@@ -0,0 +1,76 @@
+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 dotted #8DA8E3",
+        color: "#2563EB",
+        padding: "0px 4px",
+        minWidth: "unset",
+        lineHeight: "18px",
+        ...buttonStyle,
+        opacity: showBtn ? 1 : 0
+      },
+      disabled: !showBtn,
+      onClick: onAdd,
+      children: "+"
+    })
+  });
+}
+export default AddRowCol;

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

@@ -0,0 +1,134 @@
+import { Box, Fade, IconButton, Paper, Popover, 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
+}) {
+  const {
+    theme
+  } = useEditorContext();
+  const classes = DragStyles(theme);
+  const dragElement = useRef(null);
+  const [showTool, setShowTool] = useState(false);
+  const {
+    isMobile
+  } = customProps || {};
+  const onDragClick = () => {
+    setShowTool(true);
+    onDrag();
+  };
+  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__*/_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, -14] // align the drag icon by -8
+        }
+      }, {
+        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)"
+              } : {},
+              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(Popover, {
+      open: showTool,
+      anchorEl: dragElement?.current,
+      transition: true,
+      contentEditable: false,
+      sx: classes.toolPopper,
+      anchorOrigin: {
+        vertical: dragType === "row" ? "bottom" : "top",
+        horizontal: dragType === "row" ? "left" : "right"
+      },
+      onClose: onDragClose,
+      children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+        ...commonToolProps
+      })
+    })]
+  });
+}
+export default DragButton;

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

@@ -0,0 +1,43 @@
+const DragStyles = theme => ({
+  popper: {
+    zIndex: 1000,
+    "& .MuiPaper-root": {
+      borderRadius: "4px !important",
+      "&:hover": {
+        border: `1px solid ${theme?.palatte?.editor?.activeColor || "#2563EB"}`
+      }
+    },
+    "& .MuiIconButton-root": {
+      padding: "4px 8px",
+      "&:hover": {
+        background: "none"
+      }
+    }
+  },
+  toolPopper: {
+    zIndex: 4001,
+    "& .MuiPaper-root": {
+      borderRadius: "8px"
+    }
+  },
+  mobileToolDrawer: {
+    "& .customSelectContainer": {
+      border: "none !important",
+      padding: "0px !important"
+    }
+  },
+  drawerContainer: {
+    "&.MuiDrawer-root": {
+      zIndex: 1301
+    },
+    "& .MuiDrawer-paper": {
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      backgroundColor: theme.palette.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"
+        height: "16px",
+        "& path": {
+          stroke: theme?.palette?.editor?.textColor
+        }
       }
     },
     "&.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: {
@@ -59,29 +63,7 @@ const TableStyles = themeType => ({
     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"
     }
   }
 });