@flozy/editor 5.1.6 → 5.1.8

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -250,10 +250,10 @@ function AppHeader(props) {
               },
               sx: {
                 mr: 2,
-                [theme.breakpoints.up("sm")]: {
+                [theme?.breakpoints?.up("sm")]: {
                   display: "none"
                 },
-                [theme.breakpoints.between("xs", "md")]: {
+                [theme?.breakpoints.between("xs", "md")]: {
                   display: "block"
                 }
               },
@@ -272,10 +272,10 @@ function AppHeader(props) {
               },
               sx: {
                 flexGrow: 1,
-                [theme.breakpoints.up("sm")]: {
+                [theme?.breakpoints?.up("sm")]: {
                   display: "block"
                 },
-                [theme.breakpoints.between("xs", "md")]: {
+                [theme?.breakpoints?.between("xs", "md")]: {
                   display: "none"
                 },
                 "& img": {
@@ -293,10 +293,10 @@ function AppHeader(props) {
               }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                [theme.breakpoints.up("sm")]: {
+                [theme?.breakpoints?.up("sm")]: {
                   display: "block"
                 },
-                [theme.breakpoints.between("xs", "md")]: {
+                [theme?.breakpoints?.between("xs", "md")]: {
                   display: "none"
                 }
               },

package/dist/Editor/Elements/DataView/DataView.js

@@ -34,6 +34,14 @@ const DataView = props => {
   } = element;
   const classes = useDataViewStyles(theme, appTheme);
   const path = ReactEditor.findPath(editor, element);
+  const users = CHARACTERS?.map(m => {
+    const name = [m?.first_name || "", m?.last_name || ""]?.join(" ").trim();
+    return {
+      value: m?.email,
+      name: name || m?.username || m?.email,
+      avatar: m?.avatar || null
+    };
+  });
   const onDuplicate = () => {
     try {
       const newPath = ReactEditor.findPath(editor, element);
@@ -80,7 +88,7 @@ const DataView = props => {
         properties,
         layouts,
         rows,
-        users: CHARACTERS,
+        users: users,
         tableTitle: title
       },
       path: path,

package/dist/Editor/Elements/DataView/Layouts/ColumnView.js

@@ -27,8 +27,13 @@ const ColumnView = props => {
   };
   return /*#__PURE__*/_jsxs(Box, {
     component: "td",
-    ref: anchorRef,
-    children: [/*#__PURE__*/_jsx(DataType, {
+    children: [needAnchor ? /*#__PURE__*/_jsx("span", {
+      ref: anchorRef,
+      style: {
+        position: "absolute",
+        width: "1px"
+      }
+    }) : null, /*#__PURE__*/_jsx(DataType, {
       options: property?.options,
       property: property?.key,
       value: row[property?.key] || "",
@@ -37,13 +42,15 @@ const ColumnView = props => {
       readOnly: readOnly
     }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
       sx: {
-        zIndex: 1000
+        zIndex: 1000,
+        marginTop: "20px !important"
       },
       open: open,
       anchorEl: anchorEl,
       placement: "left",
       container: anchorRef?.current,
       className: `tv-tr-pop ${selected ? "active" : ""}`,
+      disablePortal: true,
       children: /*#__PURE__*/_jsx(Checkbox, {
         onClick: handleSelect(row?.id),
         size: "small",

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -1,10 +1,22 @@
 import React from "react";
 import TextField from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
-import { Box, Chip, useTheme } from "@mui/material";
+import { Avatar, Box, Chip, useTheme } from "@mui/material";
 import { useEditorContext } from "../../../../../hooks/useMouseMove";
 import useCompStyles from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
+const AvatarIcon = props => {
+  const {
+    option,
+    avatar
+  } = props;
+  const nameIndex = option.label || option.value;
+  return avatar ? /*#__PURE__*/_jsx(Avatar, {
+    alt: option.label || option.value,
+    src: option.avatar || null,
+    children: nameIndex[0] || ""
+  }) : null;
+};
 const filter = (opt, params, selectedOpt) => {
   const selectedVals = selectedOpt?.map(m => m?.value);
   const fv = opt?.filter(f => !selectedVals.includes(f.value));
@@ -20,14 +32,16 @@ export default function Select(props) {
   } = useEditorContext();
   const classes = useCompStyles(theme, appTheme);
   const {
-    value,
+    value: pValue,
     onChange,
     options,
     multiple = false,
     limitTags = 2,
     placeholder = "",
-    disabled = false
+    disabled = false,
+    optionAvatar = false
   } = props;
+  const value = Array.isArray(pValue) ? pValue : [];
   return /*#__PURE__*/_jsx(Autocomplete, {
     disabled: disabled,
     className: "tv-ac-field",
@@ -101,7 +115,11 @@ export default function Select(props) {
             sx: {
               background: option?.color || "#CCC",
               border: "none"
-            }
+            },
+            avatar: /*#__PURE__*/_jsx(AvatarIcon, {
+              option: option,
+              avatar: optionAvatar
+            })
           }, key) : null;
         })
       });
@@ -117,7 +135,11 @@ export default function Select(props) {
           label: option.label || option.value || "",
           sx: {
             backgroundColor: option.color || "#CCC"
-          }
+          },
+          avatar: /*#__PURE__*/_jsx(AvatarIcon, {
+            option: option,
+            avatar: optionAvatar
+          })
         })
       }, key);
     },

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js

@@ -4,7 +4,7 @@ const useCompStyles = (theme, appTheme) => ({
     background: appTheme?.palette?.editor?.tv_pop_bg,
     color: appTheme?.palette?.editor?.tv_text_primary,
     borderRadius: "8px",
-    [theme.breakpoints.between("xs", "md")]: {},
+    [theme?.breakpoints?.between("xs", "md")]: {},
     "& ul": {
       padding: "4px",
       "& li": {
@@ -40,6 +40,14 @@ const useCompStyles = (theme, appTheme) => ({
         borderRadius: "8px",
         color: appTheme?.palette?.editor?.tv_text_primary,
         fontSize: "14px",
+        "& .MuiAvatar-root": {
+          width: "20px",
+          height: "20px",
+          marginLeft: "8px",
+          fontSize: "16px",
+          padding: "2px",
+          textTransform: "capitalize"
+        },
         "&.Mui-selected": {
           background: appTheme?.palette?.editor?.tv_hover_bg,
           color: appTheme?.palette?.editor?.tv_hover_text,

package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js

@@ -2,6 +2,10 @@ import React from "react";
 import DatePicker from "react-datepicker";
 import { useDataView } from "../../Providers/DataViewProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
+function isValidDate(dateString) {
+  const date = new Date(dateString);
+  return !isNaN(date.getTime());
+}
 const DateType = props => {
   const {
     rowIndex,
@@ -19,7 +23,7 @@ const DateType = props => {
   };
   return /*#__PURE__*/_jsx(DatePicker, {
     disabled: readOnly,
-    selected: value ? new Date(value) : "",
+    selected: isValidDate(value) ? new Date(value) : "",
     onChange: handleChange
   });
 };

package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js

@@ -6,7 +6,7 @@ const MultiSelectType = props => {
   const {
     rowIndex,
     property,
-    value,
+    value: pValue,
     options,
     label = "",
     readOnly
@@ -14,6 +14,7 @@ const MultiSelectType = props => {
   const {
     onChange
   } = useDataView();
+  const value = Array.isArray(pValue) ? pValue : [];
   const coloredValues = [...(value || [])]?.map(m => {
     return {
       ...m,

package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js

@@ -13,7 +13,6 @@ const PersonType = props => {
     onChange,
     users
   } = useDataView();
-  console.log(users);
   const handleChange = data => {
     onChange(rowIndex, {
       [property]: data?.filter(f => f?.value)
@@ -22,9 +21,10 @@ const PersonType = props => {
   return /*#__PURE__*/_jsx(Select, {
     value: value || [],
     onChange: handleChange,
-    options: users,
+    options: users || [],
     multiple: false,
-    disabled: readOnly
+    disabled: readOnly,
+    optionAvatar: true
   });
 };
 export default PersonType;

package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js

@@ -6,7 +6,7 @@ const useFilterSortStyles = (theme, appTheme) => ({
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
       borderRadius: "12px",
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         borderRadius: "16px 16px 0px 0px",
         maxHeight: "50%"
       },

package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js

@@ -2,7 +2,6 @@ import React from "react";
 import { Box, IconButton } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import PropertyList from "./PropertyList";
-import { TYPE_LABELS } from "./Constants";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,8 +15,7 @@ const ChangeProperty = props => {
   const onSelect = property => () => {
     onEvent("updateProperty", {
       ...(mode?.edit || {}),
-      type: property?.type,
-      label: TYPE_LABELS[mode?.type] === mode?.label ? property?.label : mode?.label
+      type: property?.type
     });
   };
   const onBack = () => {

package/dist/Editor/Elements/DataView/Layouts/Options/styles.js

@@ -6,7 +6,7 @@ const useOptionsStyles = (theme, appTheme) => ({
       borderRadius: "12px",
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         borderRadius: "16px 16px 0px 0px",
         maxHeight: "50%"
       },
@@ -171,7 +171,7 @@ const useOptionsStyles = (theme, appTheme) => ({
       justifyContent: "space-between",
       marginBottom: "8px"
     },
-    [theme.breakpoints.between("xs", "md")]: {
+    [theme?.breakpoints?.between("xs", "md")]: {
       width: "calc(100% - 24px)"
     }
   }

package/dist/Editor/Elements/DataView/Layouts/TableStyles.js

@@ -3,7 +3,7 @@ const useTableStyles = (theme, appTheme) => ({
     border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
     borderRadius: "7px 7px 0px 0px",
     overflowX: "auto",
-    [theme.breakpoints.between("xs", "md")]: {}
+    [theme?.breakpoints?.between("xs", "md")]: {}
   },
   table: {
     borderCollapse: "separate",
@@ -86,6 +86,18 @@ const useTableStyles = (theme, appTheme) => ({
           "& svg": {
             color: appTheme?.palette?.editor?.tv_text
           }
+        },
+        "& .MuiAvatar-root": {
+          width: "20px",
+          height: "20px",
+          marginLeft: "8px",
+          fontSize: "16px",
+          padding: "2px",
+          textTransform: "capitalize"
+        },
+        "& .MuiChip-label": {
+          paddingLeft: "6px",
+          paddingRight: "8px"
         }
       }
     },

package/dist/Editor/Elements/DataView/styles.js

@@ -34,7 +34,7 @@ const useDataViewStyles = (theme, appTheme) => ({
       "& .mr": {
         marginRight: "4px"
       },
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         display: "flex",
         flexDirection: "column"
       }
@@ -105,13 +105,13 @@ const useDataViewStyles = (theme, appTheme) => ({
       "& .MuiInputBase-root": {
         width: "100%"
       },
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         width: "100%",
         marginRight: "0px"
       }
     },
     "& .tv-fi-wrpr": {
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         width: "100%",
         justifyContent: "end"
       }

package/dist/Editor/Elements/FreeGrid/breakpointConstants.js

@@ -47,22 +47,22 @@ export function wrapThemeBreakpoints(sxProp, prop, theme) {
     const formatedSxProp = Object.keys(sxProp).reduce((a, b) => {
       switch (b) {
         case "md":
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["md"] || sxProp["lg"]
           };
           break;
         case "sm":
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["sm"] || sxProp["lg"]
           };
           break;
         case "xs":
-          a[theme.breakpoints.between("xs", "md")] = {
+          a[theme?.breakpoints?.between("xs", "md")] = {
             [prop]: sxProp["xs"] || sxProp["lg"]
           };
           break;
         default:
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["lg"]
           };
       }

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -318,7 +318,7 @@ const useFreeGridStyles = ({
         "& .element-toolbar": {
           display: "none"
         },
-        [theme.breakpoints.between("xs", "md")]: {
+        [theme?.breakpoints?.between("xs", "md")]: {
           marginLeft: `calc((100% - 320px) * 0.5)`
         }
       },

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

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { Button, Dialog, DialogContent, DialogTitle, Grid, Tooltip, Box } from "@mui/material";
 import { insertGrid, insertPlainGrid } from "../../utils/grid";
-import { GridIcon } from "../../common/iconslist";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import GridStyles from "./Styles";
 import { GridElement } from "../../common/iconListV2";

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

@@ -51,18 +51,7 @@ const GridItemToolbar = props => {
     placement: "top-end",
     sx: classes.popTools,
     className: "gi-tool-pp",
-    container: columnRef?.current,
-    modifiers: [{
-      name: "preventOverflow",
-      options: {
-        boundary: "clippingParents" // Ensure it respects parent boundaries
-      }
-    }, {
-      name: "hide",
-      options: {
-        padding: 8 // Adjust padding for visibility
-      }
-    }],
+    disablePortal: true,
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Column Settings",
       arrow: true,
@@ -305,24 +294,26 @@ const GridItem = props => {
     },
     "data-path": path.join(","),
     "data-info": "handle-outside-editor-click",
-    children: [!readOnly && /*#__PURE__*/_jsxs("div", {
-      className: `element-selector ${selected ? "selected" : ""}`,
-      contentEditable: false,
-      style: {
-        zIndex: 1000
-      },
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots tl",
-        children: " "
-      }), /*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots tr",
-        children: " "
-      }), /*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots bl",
-        children: " "
-      }), /*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots br",
-        children: " "
+    children: [!readOnly && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: `element-selector ${selected ? "selected" : ""}`,
+        contentEditable: false,
+        style: {
+          zIndex: 1000
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots tl",
+          children: " "
+        }), /*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots tr",
+          children: " "
+        }), /*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots bl",
+          children: " "
+        }), /*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots br",
+          children: " "
+        })]
       }), /*#__PURE__*/_jsx(GridItemToolbar, {
         classes: classes,
         selected: selected,

package/dist/Editor/Elements/SimpleText/style.js

@@ -12,6 +12,11 @@ const SimpleTextStyle = ({
         opacity: 0
       }
     },
+    "&.dataView, &.signature": {
+      "& .placeholder-simple-text": {
+        opacity: 0
+      }
+    },
     "& .placeholder-simple-text": {
       color: "#94A3B8",
       background: "transparent",

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

@@ -1,70 +1,88 @@
-const TableStyles = theme => ({
-  tableToolBar: {
-    position: "absolute",
-    top: "-24px",
-    left: 0,
-    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
+const TableStyles = theme => {
+  const {
+    background,
+    closeButtonSvgStroke,
+    activeColor,
+    signaturePopUpTabButtonSelectedBg,
+    signaturePopUpTabButtonSelectedSvg
+  } = theme?.palette?.editor || {};
+  return {
+    tableToolBar: {
+      position: "absolute",
+      top: "-24px",
+      left: 0,
+      transition: "all 0.3s",
+      "& button": {
+        backgroundColor: 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: background
+        },
+        "& svg": {
+          width: "18px",
+          height: "18px",
+          "& path": {
+            stroke: closeButtonSvgStroke
+          }
+        },
+        "&.selected": {
+          outline: `1.5px solid ${activeColor || "#2563EB"}`,
+          background: signaturePopUpTabButtonSelectedBg,
+          "& svg": {
+            "& path": {
+              stroke: signaturePopUpTabButtonSelectedSvg
+            }
+          }
+        }
       },
-      "& svg": {
-        width: "18px",
-        height: "18px",
-        "& path": {
-          stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      "&.active": {
+        width: "auto",
+        "& .toggle": {
+          rotate: "180deg"
+        }
+      },
+      "& .toolbtn": {
+        "& svg": {
+          stroke: "rgb(100, 116, 139)"
         }
       }
     },
-    "&.active": {
-      width: "auto",
-      "& .toggle": {
-        rotate: "180deg"
-      }
-    },
-    "& .toolbtn": {
-      "& svg": {
-        stroke: "rgb(100, 116, 139)"
+    table: {
+      "& td": {
+        padding: "8px 8px"
+      },
+      "& .selection-area-tc": {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        top: 0,
+        left: 0,
+        outline: "1px solid #2563EB",
+        pointerEvents: "none"
+      },
+      "& .hide-drag-btn-wrapper": {
+        "& .row-drag-btn": {
+          display: "none"
+        }
       }
-    }
-  },
-  table: {
-    "& td": {
-      padding: "8px 8px"
     },
-    "& .selection-area-tc": {
+    cellResizer: {
       position: "absolute",
-      width: "100%",
-      height: "100%",
+      cursor: "col-resize",
+      right: "-2px",
       top: 0,
-      left: 0,
-      outline: "1px solid #2563EB",
-      pointerEvents: "none"
-    },
-    "& .hide-drag-btn-wrapper": {
-      "& .row-drag-btn": {
-        display: "none"
+      background: "transparent",
+      width: "3px",
+      borderRadius: "0px",
+      zIndex: 1,
+      "&:hover": {
+        background: "#2563EB"
       }
     }
-  },
-  cellResizer: {
-    position: "absolute",
-    cursor: "col-resize",
-    right: "-2px",
-    top: 0,
-    background: "transparent",
-    width: "3px",
-    borderRadius: "0px",
-    zIndex: 1,
-    "&:hover": {
-      background: "#2563EB"
-    }
-  }
-});
+  };
+};
 export default TableStyles;

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

@@ -1,17 +1,18 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Editor, Transforms } from "slate";
 import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme, Popper, Fade } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme, Popper, Fade, ClickAwayListener } from "@mui/material";
 import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
 import "./table.css";
 import { groupByBreakpoint } from "../../helper/theme";
-import useTable, { TableProvider } from "../../hooks/useTable";
+import useTable, { TableProvider, getDefaultTableSelection } from "../../hooks/useTable";
 import AddRowCol from "./AddRowCol";
 import TableTool from "./TableTool";
 import { MoreIcon, SettingsIcon } from "../../assets/svg/TableIcons";
+import { getSelectedCls } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const hideRowDragBtns = (hide, dragRowBtnCls) => {
@@ -20,6 +21,40 @@ const hideRowDragBtns = (hide, dragRowBtnCls) => {
     rowDragBtns?.forEach(btn => btn.style.display = hide);
   }
 };
+const MoreTableSettings = props => {
+  const {
+    exandTools,
+    handleAction,
+    editorTheme,
+    setExpandTools
+  } = props;
+  const {
+    updateTableSelection
+  } = useTable();
+  return /*#__PURE__*/_jsx(Popper, {
+    open: Boolean(exandTools),
+    anchorEl: exandTools,
+    contentEditable: false,
+    sx: {
+      zIndex: 2000
+    },
+    placement: "bottom-start",
+    children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      onClickAway: () => setExpandTools(false),
+      children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(TableTool, {
+          theme: editorTheme,
+          handleToolAction: (type, option) => {
+            handleAction(type, option);
+            if (type === "duplicate") {
+              updateTableSelection(getDefaultTableSelection());
+            }
+          }
+        })
+      })
+    })
+  });
+};
 const ToolBar = props => {
   const {
     selected,
@@ -27,7 +62,8 @@ const ToolBar = props => {
     classes,
     handleExpand,
     handleAction,
-    exandTools
+    exandTools,
+    openSetttings
   } = props;
   const {
     getSelectedCells
@@ -43,7 +79,7 @@ const ToolBar = props => {
       arrow: true,
       onClick: () => handleAction("settings"),
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: "toolbtn toggle",
+        className: getSelectedCls("toolbtn toggle", openSetttings),
         children: /*#__PURE__*/_jsx(SettingsIcon, {})
       })
     }), /*#__PURE__*/_jsx(Tooltip, {
@@ -51,7 +87,7 @@ const ToolBar = props => {
       arrow: true,
       onClick: handleExpand,
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: "toolbtn toggle",
+        className: getSelectedCls("toolbtn toggle", exandTools),
         children: /*#__PURE__*/_jsx(MoreIcon, {})
       })
     })]
@@ -100,6 +136,7 @@ const Table = props => {
         break;
       case "duplicate":
         table.duplicateTable();
+        setExpandTools(false);
         break;
       case "settings":
         if (tableProps) {
@@ -198,7 +235,8 @@ const Table = props => {
     otherProps: {
       dragRowBtnCls,
       tablePath: path,
-      openSetttings
+      openSetttings,
+      exandTools
     },
     children: [/*#__PURE__*/_jsxs("div", {
       style: {
@@ -249,28 +287,13 @@ const Table = props => {
       classes: classes,
       handleExpand: handleExpand,
       handleAction: handleAction,
-      exandTools: exandTools
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: Boolean(exandTools),
-      anchorEl: exandTools,
-      transition: true,
-      contentEditable: false,
-      sx: {
-        zIndex: 2000
-      },
-      placement: "bottom-start",
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        timeout: 350,
-        children: /*#__PURE__*/_jsx("div", {
-          children: /*#__PURE__*/_jsx(TableTool, {
-            theme: editorTheme,
-            handleToolAction: handleAction
-          })
-        })
-      })
+      exandTools: exandTools,
+      openSetttings: openSetttings
+    }), /*#__PURE__*/_jsx(MoreTableSettings, {
+      exandTools: exandTools,
+      handleAction: handleAction,
+      editorTheme: editorTheme,
+      setExpandTools: setExpandTools
     }), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
       element: tableProps?.styleProps || {},
       onSave: onSave,

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

@@ -87,7 +87,10 @@ const TableCell = props => {
   const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
   const [size, onMouseDown, resizing, onLoad] = useTableResize({
     parentDOM,
-    size: element?.size
+    size: element?.size,
+    minMaxProps: {
+      minWidth: 30
+    }
   });
   const [tableSize, setTableSize] = useState({});
   const [openSettings, setOpenSettings] = useState(false);

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { Select, MenuItem } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
-import { fontFamilyMap } from "../../utils/font";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
   classes,

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

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { Grid, Typography, IconButton, Tooltip, TextField, InputAdornment } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
 import Icon from "../../common/Icon";
 import { ToggleFullScreenIcon } from "../../common/iconListV2";
@@ -68,14 +67,14 @@ const PopperHeader = props => {
         justifyContent: "end",
         children: [needFullscreen ? /*#__PURE__*/_jsxs(Grid, {
           sx: {
-            position: 'relative'
+            position: "relative"
           },
           className: "inputField",
           children: [/*#__PURE__*/_jsx(IconButton, {
-            className: openSearch ? 'searchContainer' : '',
+            className: openSearch ? "searchContainer" : "",
             onClick: handleSearchButton,
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: openSearch ? 'closeIcon' : 'SearchIcon'
+              icon: openSearch ? "closeIcon" : "SearchIcon"
             })
           }), openSearch && /*#__PURE__*/_jsx(SearchBox, {
             classes: classes,

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

@@ -177,11 +177,6 @@ const usePopupStyle = theme => ({
       justifyContent: "start",
       borderRadius: "10px !important",
       transition: "background-color 0.3s ease",
-      "& .colorBoxElementIcon": {
-        "& path": {
-          fill: theme?.palette?.type === "dark" ? "none" : ""
-        }
-      },
       "& .signatureElementIcon": {
         "& path": {
           fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`

package/dist/Editor/common/Icon.js

@@ -21,11 +21,11 @@ import TextIcon from "../assets/svg/TextIcon";
 import AddElementIcon from "../assets/svg/AddElementIcon";
 import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
 import OpenLinkIcon from "../assets/svg/OpenLinkIcon";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
 import { BrainIcon } from "../assets/svg/BrainIcon";
 import DocsIcon from "../assets/svg/DocsIcon";
 import UserIcon from "../assets/svg/UserIcon";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -276,11 +276,11 @@ const iconList = {
       fill: "#64748B"
     }
   }),
+  editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
+  deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {}),
   brain: /*#__PURE__*/_jsx(BrainIcon, {}),
   docsIcon: /*#__PURE__*/_jsx(DocsIcon, {}),
-  userIcon: /*#__PURE__*/_jsx(UserIcon, {}),
-  editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
-  deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {})
+  userIcon: /*#__PURE__*/_jsx(UserIcon, {})
 };
 export const icons = {
   ...iconList

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -3,7 +3,6 @@ const usePopupStyles = theme => ({
     position: "absolute",
     zIndex: 1300,
     borderRadius: "10px",
-    padding: "0px",
     boxShadow: "0px 4px 10px 0px #00000029",
     overflow: "hidden",
     padding: "8px 0px !important",

package/dist/Editor/common/RnD/GuideLines/styles.js

@@ -22,7 +22,7 @@ const useGuideLineStyle = ({
       backgroundColor: "#FFF",
       pointerEvents: "none",
       zIndex: 1,
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         left: "calc(50% - 160px)"
       }
     },
@@ -35,13 +35,13 @@ const useGuideLineStyle = ({
       backgroundColor: "#FFF",
       pointerEvents: "none",
       zIndex: 1,
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         left: "calc(50% + 160px)"
       }
     },
     "& .white-wrapper": {
       overflowX: "hidden",
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         position: "absolute",
         width: "calc(50% - 162px)",
         height: "calc(100% - 2px)",

package/dist/Editor/common/RnD/ShadowElement.js

@@ -10,7 +10,7 @@ const useShadowElementStyles = ({
     position: "relative",
     backgroundColor: "rgba(0,0,0,0)",
     marginLeft: `calc((100% - 980px) * 0.5)`,
-    [theme.breakpoints.between("xs", "md")]: {
+    [theme?.breakpoints?.between("xs", "md")]: {
       marginLeft: `calc((100% - 320px) * 0.5)`
     }
   }

package/dist/Editor/hooks/useTable.js

@@ -8,6 +8,19 @@ import { serializeToText } from "../utils/serializeToText";
 import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "../Elements/Table/tableHelper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const selectFirstCell = (tablePath, editor, updateTableSelection) => {
+  const firstCell = [...tablePath, 0, 0];
+  const end = Editor.end(editor, firstCell);
+  Transforms.select(editor, {
+    anchor: end,
+    focus: end
+  });
+  updateTableSelection({
+    startCellPath: firstCell,
+    endCellPath: [],
+    isDragging: false
+  });
+};
 const handleDragEnd = (dragData, editor, resetAll) => {
   const {
     active,
@@ -65,7 +78,7 @@ export const TableProvider = ({
   otherProps = {}
 }) => {
   const {
-    openSetttings
+    tablePath
   } = otherProps;
   const [hoverPath, setHoverPath] = useState(null);
   const [tableSelection, setTableSelection] = useState(getDefaultTableSelection());
@@ -105,7 +118,8 @@ export const TableProvider = ({
       tableSelection,
       tableResizing,
       setTableResizing,
-      otherProps
+      otherProps,
+      resetAll
     };
   }, [hoverPath, editor?.selection, tableSelection, tableResizing]);
   useEffect(() => {
@@ -171,10 +185,8 @@ export const TableProvider = ({
     };
   }, [tableSelection, editor, tableSelection]);
   useEffect(() => {
-    if (!openSetttings) {
-      resetAll();
-    }
-  }, [openSetttings]);
+    selectFirstCell(tablePath, editor, updateTableSelection);
+  }, []);
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: values,
     children: /*#__PURE__*/_jsxs(DndContext, {

package/dist/Editor/utils/customHooks/useTableResize.js

@@ -2,7 +2,8 @@ import { useState } from "react";
 const useTableResize = ({
   parentDOM,
   size: defaultSize,
-  onDone
+  onDone,
+  minMaxProps = {}
 }) => {
   const {
     width
@@ -38,10 +39,13 @@ const useTableResize = ({
     setIsDone(1);
   };
   const onMouseMove = e => {
+    const {
+      minWidth
+    } = minMaxProps || {};
     setSize(currentSize => {
       const calcWidth = currentSize?.width + e.movementX;
       return {
-        width: calcWidth,
+        width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
         height: currentSize.height + e.movementY,
         widthInPercent: calcWidth / width * 100
       };

package/dist/Editor/utils/helper.js

@@ -676,4 +676,7 @@ export function getInitialValue(value = [], readOnly) {
     return newValue;
   }
   return value;
+}
+export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
+  return `${defaultCls} ${selected ? selectedClsName : ""}`;
 }

package/package.json

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