@flozy/editor 5.3.6 → 5.3.7

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

@@ -0,0 +1,281 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { Editor, Transforms, Node } from "slate";
+import { PROPERTY_DEFAULTS } from "../Layouts/Options/Constants";
+import multiSortRows from "../Utils/multiSortRows";
+import globalSearch from "../Utils/globalSearch";
+
+// Data View context
+import { jsx as _jsx } from "react/jsx-runtime";
+const DataViewContext = /*#__PURE__*/createContext();
+export const useDataView = () => useContext(DataViewContext);
+const DEFAULT_PROPERTIES = [{
+  key: "column1",
+  label: "Name",
+  dataType: "text"
+}, {
+  key: "column2",
+  label: "Status",
+  dataType: "select",
+  options: ["Active", "Inactive"]
+}, {
+  key: "column3",
+  label: "Agree?",
+  dataType: "checkbox"
+}];
+
+// Combined provider
+export const DataViewProvider = ({
+  children,
+  ...props
+}) => {
+  const {
+    data: initialData,
+    path,
+    editor,
+    users: peoples
+  } = props;
+  const dataViewNode = Node.get(editor, path);
+  const [layouts, setLayouts] = useState(initialData?.layouts || []);
+  const [seletectedLayout, setSelectedLayout] = useState({
+    ...(layouts[0] || {})
+  });
+  const [layoutType, setLayoutType] = useState(seletectedLayout?.type || "table");
+  const [properties, setProperties] = useState(initialData?.properties || [...DEFAULT_PROPERTIES]);
+  const [sort, setSort] = useState(seletectedLayout?.sort || []);
+  const [filter, setFilter] = useState(seletectedLayout?.filter || []);
+  const [rows, setRows] = useState(initialData?.rows || []);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [search, setSearch] = useState("");
+  const users = peoples?.map(m => {
+    return {
+      value: m?.name
+    };
+  });
+
+  // for undo and redo
+  // minimal added for perforamnce issue avoid
+  useEffect(() => {
+    setRows(dataViewNode?.rows);
+  }, [dataViewNode?.rows?.length]);
+  useEffect(() => {
+    setProperties(dataViewNode?.properties);
+  }, [dataViewNode?.properties?.length]);
+
+  // re-order when sort val changes
+  useEffect(() => {
+    if ((sort?.length > 0 || search) && rows?.length > 0) {
+      const reOrderRows = sort?.length > 0 ? multiSortRows(initialData?.rows, sort, properties) : [...initialData?.rows];
+      setRows(globalSearch(reOrderRows, search));
+    } else {
+      // reset to default order
+      setRows(globalSearch(initialData?.rows || [], search));
+    }
+  }, [sort, search]);
+  const onAddProperty = (data, overrides = {}) => {
+    try {
+      const {
+        type
+      } = data;
+      const key = `col_${new Date().getTime()}`;
+      const newProperty = {
+        ...(PROPERTY_DEFAULTS[type] || {}),
+        ...overrides,
+        key: key,
+        type
+      };
+      const updatedProperties = [...properties, {
+        ...newProperty
+      }];
+      Transforms.setNodes(editor, {
+        properties: [...updatedProperties]
+      }, {
+        at: path
+      });
+      setProperties([...updatedProperties]);
+      return newProperty;
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onUpdateProperty = (data, isDelete = false) => {
+    try {
+      const {
+        key
+      } = data;
+      let up = {
+        ...data
+      };
+      const updatedProperties = properties?.map(m => {
+        if (m.key === key) {
+          up = {
+            ...m,
+            ...data
+          };
+          return up;
+        }
+        return m;
+      });
+      if (isDelete) {
+        const deleteIndex = updatedProperties.findIndex(f => f.key === key);
+        updatedProperties.splice(deleteIndex, 1);
+      }
+      Transforms.setNodes(editor, {
+        properties: [...updatedProperties]
+      }, {
+        at: path
+      });
+      setProperties([...updatedProperties]);
+      return up;
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onChange = (rowIndex, rowData) => {
+    try {
+      const updatedRows = rows?.map(m => {
+        if (m?.id === rowIndex) {
+          m = {
+            ...m,
+            ...rowData
+          };
+        }
+        return m;
+      });
+      Transforms.setNodes(editor, {
+        rows: [...updatedRows]
+      }, {
+        at: path
+      });
+      setRows(updatedRows);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onAddRow = () => {
+    try {
+      const newRow = properties?.reduce((a, b) => {
+        a[b.key] = "";
+        return a;
+      }, {
+        id: `row_${new Date().getTime()}`
+      });
+      const updatedRows = [...rows, newRow];
+      Transforms.setNodes(editor, {
+        rows: [...updatedRows]
+      }, {
+        at: path
+      });
+      setRows(updatedRows);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const formatSort = (sorts = [], sortData, isDelete = false) => {
+    let upSort = [];
+    const isUpdate = sorts?.find(f => f.key === sortData?.key);
+    if (isUpdate) {
+      // update if any
+      upSort = sorts?.map(m => {
+        if (m.key === sortData.key) {
+          // if update col
+          if (sortData["newKey"]) {
+            sortData["key"] = sortData["newKey"];
+            delete sortData["newKey"];
+          }
+          return {
+            ...sortData
+          };
+        }
+        return m;
+      });
+    } else {
+      upSort = [...sorts, {
+        ...sortData
+      }];
+    }
+
+    // if no sort
+    if (sorts?.length === 0 && !isDelete) {
+      upSort = [{
+        ...sortData
+      }];
+    }
+
+    // if delete
+    if (isDelete) {
+      const deleteIndex = upSort.findIndex(f => f.key === sortData.key);
+      upSort.splice(deleteIndex, 1);
+    }
+    return upSort;
+  };
+  const onUpdateSort = (sortData = {}, isDelete = false, deleteAll = false) => {
+    try {
+      let upSort = {};
+      const updatedLayouts = layouts?.map((m, i) => {
+        if (seletectedLayout?.key === m.key) {
+          upSort = !deleteAll ? formatSort(m?.sort || [], sortData, isDelete) : [];
+          return {
+            ...m,
+            sort: [...upSort]
+          };
+        }
+        return m;
+      });
+      Transforms.setNodes(editor, {
+        layouts: [...updatedLayouts]
+      }, {
+        at: path
+      });
+      setLayouts(updatedLayouts);
+      setSort(upSort);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onDeleteRows = () => {
+    try {
+      const updatedRows = [...rows].filter(f => selectedRows.includes(f.id) === false);
+      Transforms.setNodes(editor, {
+        rows: [...updatedRows]
+      }, {
+        at: path
+      });
+      setRows(updatedRows);
+      setSelectedRows([]);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onSearch = e => {
+    setSearch(e?.target?.value);
+  };
+  const value = {
+    layoutType,
+    setLayoutType,
+    properties,
+    setProperties,
+    rows,
+    setRows,
+    onAddProperty,
+    layouts,
+    setLayouts,
+    onUpdateProperty,
+    onChange,
+    onAddRow,
+    users: users,
+    onUpdateSort,
+    sort,
+    filter,
+    setSelectedLayout,
+    setFilter,
+    selectedRows,
+    setSelectedRows,
+    onDeleteRows,
+    search,
+    onSearch
+  };
+  return /*#__PURE__*/_jsx(DataViewContext.Provider, {
+    value: value,
+    children: children
+  });
+};

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

@@ -0,0 +1,15 @@
+const globalSearch = (array, searchTerm) => {
+  if (!searchTerm) {
+    return array;
+  }
+  const lowerCaseSearchTerm = searchTerm.toLowerCase();
+  return array.filter(item => Object.values(item).some(value => {
+    if (typeof value === "string" && value) {
+      return value?.toLowerCase().includes(lowerCaseSearchTerm);
+    } else if (Array.isArray(value)) {
+      return value?.map(m => m?.value).some(d => d.toLowerCase().includes(lowerCaseSearchTerm));
+    }
+    return false;
+  }));
+};
+export default globalSearch;

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

@@ -0,0 +1,74 @@
+function sortByDate(a, b) {
+  const dateA = new Date(a);
+  const dateB = new Date(b);
+
+  // Check if both dates are valid
+  const isValidA = !isNaN(dateA.getTime());
+  const isValidB = !isNaN(dateB.getTime());
+  if (isValidA && isValidB) {
+    // Compare valid dates
+    return dateA - dateB;
+  } else if (isValidA) {
+    // Invalid date in `b` pushes `a` before `b`
+    return -1;
+  } else if (isValidB) {
+    // Invalid date in `a` pushes `b` before `a`
+    return 1;
+  } else {
+    // Both are invalid, maintain their relative order
+    return 0;
+  }
+}
+
+/**
+ * Multi-sort rows based on multiple criteria.
+ * @param {Array} rows - Array of row objects.
+ * @param {Array} criteria - Array of sort criteria [{key, sortBy}].
+ * @param {Object} columnConfig - Column configurations with data types.
+ */
+const multiSortRows = (rows, criteria, columnConfig) => {
+  return rows.slice().sort((a, b) => {
+    for (let {
+      key,
+      operator
+    } of criteria) {
+      const column = columnConfig.find(col => col.key === key);
+      if (!column) continue;
+      const dataType = column.type;
+      const valueA = a[key];
+      const valueB = b[key];
+      let comparison = 0;
+      switch (dataType) {
+        case "text":
+          comparison = valueA.localeCompare(valueB, undefined, {
+            sensitivity: "base"
+          });
+          break;
+        case "number":
+          comparison = parseInt(valueA || 0) - parseInt(valueB || 0);
+          break;
+        case "select":
+        case "multi-select":
+          if (Array.isArray(valueA) && Array.isArray(valueB)) {
+            comparison = Array.isArray(valueA) ? valueA?.map(m => m?.value).join(", ").localeCompare(valueB?.map(m => m?.value).join(", "), undefined, {
+              sensitivity: "base"
+            }) : 0;
+          }
+          break;
+        case "date":
+          comparison = sortByDate(valueA, valueB);
+          break;
+        case "check":
+          return valueA && operator === "desc" ? 1 : -1;
+        default:
+          break;
+      }
+      if (comparison !== 0) {
+        return operator === "asc" ? comparison : -comparison;
+      }
+    }
+    return 0; // Rows are equal based on all criteria
+  });
+};
+
+export default multiSortRows;

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

@@ -0,0 +1,154 @@
+const useDataViewStyles = (theme, appTheme) => ({
+  root: {
+    width: "100%",
+    overflowX: "auto",
+    marginTop: "8px",
+    "& table": {
+      width: "100%",
+      "& th.fe-tv-ap-ico": {
+        width: "50px"
+      }
+    },
+    "& table th": {
+      cursor: "pointer",
+      width: "200px"
+    },
+    "& table, th, td": {
+      border: "1px solid black",
+      borderCollapse: "collapse"
+    },
+    "& .react-datepicker-wrapper": {
+      width: "100%",
+      "& input": {
+        padding: "6px 12px"
+      }
+    },
+    "& .MuiInputBase-root": {
+      "& fieldset": {
+        border: "none"
+      }
+    },
+    // filter view
+    "& .fe-tv-fv": {
+      marginBottom: "8px",
+      "& .mr": {
+        marginRight: "4px"
+      },
+      [theme?.breakpoints?.between("xs", "md")]: {
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    "& .tv-act-row": {
+      "& .tv-tr-pop": {
+        opacity: 0,
+        "&.active": {
+          opacity: 1
+        },
+        "& .tv-ck-box": {
+          "& svg": {
+            color: appTheme?.palette?.editor?.tv_border
+          },
+          "&.Mui-checked": {
+            "& svg": {
+              color: "rgba(37, 99, 235, 1)"
+            }
+          }
+        }
+      },
+      "&:hover": {
+        "& .tv-tr-pop": {
+          opacity: 1
+        }
+      }
+    }
+  },
+  filterView: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    "& .MuiButtonBase-root": {
+      padding: "6px",
+      marginLeft: "4px",
+      width: "29px",
+      height: "29px",
+      "&.active": {
+        color: "rgba(37, 99, 235, 1)"
+      }
+    },
+    "& .tv-sb": {
+      display: "flex",
+      border: "1px solid transparent",
+      width: "24px",
+      transition: "width 1s",
+      "&.open": {
+        width: "fit-content",
+        border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+        boxShadow: "0px 4px 18px 0px #0000000D",
+        borderRadius: "8px"
+      },
+      "& input": {
+        paddingBottom: "0px",
+        fontSize: "14px"
+      }
+    },
+    "& .tv-title-wrpr, .tv-fi-wrpr": {
+      display: "flex",
+      "& button": {
+        color: appTheme?.palette?.editor?.tv_text
+      },
+      "& input": {
+        color: appTheme?.palette?.editor?.tv_text
+      }
+    },
+    "& .tv-title-wrpr": {
+      width: "80%",
+      marginRight: "8px",
+      "& .MuiInputBase-root": {
+        width: "100%"
+      },
+      "& .MuiInputBase-input": {
+        paddingBottom: "0px",
+        fontWeight: "bold",
+        fontSize: "16px"
+      },
+      [theme?.breakpoints?.between("xs", "md")]: {
+        width: "100%",
+        marginRight: "0px"
+      }
+    },
+    "& .tv-fi-wrpr": {
+      [theme?.breakpoints?.between("xs", "md")]: {
+        width: "100%",
+        justifyContent: "end"
+      }
+    }
+  },
+  basicMenu: {
+    "& .MuiPaper-root": {
+      padding: "0px 6px",
+      width: "150px",
+      border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+      borderRadius: "8px",
+      background: appTheme?.palette?.editor?.tv_pop_bg,
+      color: appTheme?.palette?.editor?.tv_text_primary,
+      "& .MuiButtonBase-root": {
+        fontSize: "14px",
+        "& svg": {
+          width: "16px",
+          height: "16px",
+          color: `${appTheme?.palette?.editor?.tv_text}`
+        },
+        "&:hover": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          borderRadius: "8px",
+          color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+          "& svg": {
+            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+          }
+        }
+      }
+    }
+  }
+});
+export default useDataViewStyles;

package/dist/Editor/Elements/Divider/Divider.js

@@ -5,6 +5,7 @@ import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import DividerPopup from "./DividerPopup";
 import { Transforms } from "slate";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
@@ -17,6 +18,7 @@ const Divider = props => {
   const {
     theme
   } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const {
     borderColor = theme?.palette?.primary?.main || "#0F172A",
     borderWidth = "1px",
@@ -43,11 +45,16 @@ const Divider = props => {
     showTool,
     onSettings
   }) => {
-    const hoverStyles = readOnly ? {
-      "&.MuiIconButton-root:hover": {
-        background: theme?.palette?.type === "dark" ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
-      }
-    } : {};
+    // const hoverStyles = readOnly
+    //   ? {
+    //       "&.MuiIconButton-root:hover": {
+    //         background:
+    //           theme?.palette?.type === "dark"
+    //             ? `${theme?.palette?.greyshades?.light8} !important`
+    //             : `${theme?.palette?.containers?.card} !important`,
+    //       },
+    //     }
+    //   : {};
     return /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "divider-settings",
@@ -61,14 +68,22 @@ const Divider = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           sx: {
-            background: theme?.palette?.type === "dark" ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
-            border: theme?.palette?.type === "dark" ? "1px solid #E4E8EB33" : "none",
+            // background:
+            //   theme?.palette?.type === "dark"
+            //     ? theme?.palette?.greyshades?.light8
+            //     : theme?.palette?.containers?.card,
+            // border:
+            //   theme?.palette?.type === "dark"
+            //     ? "1px solid #E4E8EB33"
+            //     : "none",
             boxShadow: "0px 0px 4px 0px #00000040",
             borderRadius: "50%",
             "& svg": {
-              stroke: theme?.palette?.text?.secondary3
+              width: '16px',
+              height: '16px'
             },
-            ...hoverStyles
+            // ...hoverStyles,
+            ...classes.buttonMoreOption
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})

package/dist/Editor/Elements/Embed/Image.js

@@ -14,28 +14,33 @@ import ImageFrame from "./Frames/ImageFrame";
 import LinkSettings from "../../common/LinkSettings";
 import { handleLinkType } from "../../utils/helper";
 import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
+import useCommonStyle from "../../commonStyle";
+import SettingsIcon from "../../assets/svg/SettingsIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ToolBar = ({
   isEmpty,
   onSettings,
   setOpenNav,
-  topM
+  topM,
+  classes
 }) => {
   return !isEmpty ? /*#__PURE__*/_jsxs("div", {
     className: "element-toolbar visible-on-hover",
     contentEditable: false,
     style: {
-      top: "-5px",
+      top: "-4px",
       left: topM ? "35px" : "0px",
-      margin: "0px"
+      margin: "0px",
+      gap: '3px'
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Image Settings",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
         onClick: onSettings,
-        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+        sx: classes.buttonMoreOption,
+        children: /*#__PURE__*/_jsx(SettingsIcon, {})
       })
     }), /*#__PURE__*/_jsx(Tooltip, {
       title: "Link Settings",
@@ -43,6 +48,7 @@ const ToolBar = ({
       children: /*#__PURE__*/_jsx(IconButton, {
         className: "last-btn",
         onClick: () => setOpenNav(true),
+        sx: classes.buttonMoreOption,
         children: /*#__PURE__*/_jsx(LinkIcon, {})
       })
     })]
@@ -64,7 +70,8 @@ const ImageContent = props => {
     handleImageClick,
     onTouchEnd,
     path,
-    theme
+    theme,
+    classes
   } = props;
   return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
@@ -73,6 +80,9 @@ const ImageContent = props => {
     onClick: () => {
       setOpenSettings(true);
     },
+    sx: {
+      ...classes.emptyThumbBtn
+    },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "image"
     }), "Add Image"]
@@ -183,6 +193,10 @@ const Image = props => {
     onClick,
     onTouchEnd
   } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const classes = useCommonStyle(appTheme);
   const handleImageClick = () => {
     try {
       Transforms.select(editor, {
@@ -293,7 +307,8 @@ const Image = props => {
         isEmpty: isEmpty,
         onSettings: onSettings,
         setOpenNav: setOpenNav,
-        topM: size.width < 100
+        topM: size.width < 100,
+        classes: classes
       }), /*#__PURE__*/_jsx(ImageContent, {
         ...element,
         readOnly: readOnly,
@@ -301,7 +316,8 @@ const Image = props => {
         handleImageClick: handleImageClick,
         onTouchEnd: onTouchEnd,
         path: path,
-        theme: theme
+        theme: theme,
+        classes: classes
       }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",
@@ -317,11 +333,14 @@ const Image = props => {
           handleImageClick: handleImageClick
         })
       }) : null, selected && !readOnly && url && /*#__PURE__*/_jsx(IconButton, {
-        onPointerDown: onMouseDown,
-        style: {
-          opacity: 1,
-          background: "#FFF"
-        },
+        onPointerDown: onMouseDown
+        // style={{
+        //   opacity: 1,
+        //   // background: "#FFF",
+        //   // ...classes.resizeButton
+        // }}
+        ,
+        sx: classes.resizeButton,
         className: "resize-br visible-on-hover img-resizer",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]