@flozy/editor 5.1.6 → 5.1.7

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/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/package.json

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