@flozy/editor 5.5.8 → 5.6.0

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

@@ -0,0 +1,277 @@
+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] = useState(peoples);
+
+  // 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,88 @@
+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":
+        case "person":
+          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":
+          if (operator === "desc") {
+            if (valueA) {
+              return 1;
+            } else {
+              return -1;
+            }
+          } else {
+            if (valueA) {
+              return -1;
+            } else {
+              return 1;
+            }
+          }
+        // return valueA && operator === "desc" ? 1 : valueB && operator === "asc" ;
+        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,169 @@
+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,
+            '& rect': {
+              fill: appTheme?.palette?.editor?.tv_chk_box_fill,
+              stroke: appTheme?.palette?.editor?.tv_chk_box_stroke
+            }
+          },
+          "&.Mui-checked": {
+            "& svg": {
+              color: "rgba(37, 99, 235, 1)",
+              '& rect': {
+                fill: appTheme?.palette?.editor?.activeColor,
+                stroke: 'none'
+              }
+            }
+          }
+        }
+      },
+      "&: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",
+        minWidth: '148px'
+      },
+      "& 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",
+        color: appTheme?.palette?.editor?.textFormatTextColor
+      },
+      [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",
+      fontFamily: 'Inter !important',
+      background: appTheme?.palette?.editor?.tv_pop_bg,
+      color: appTheme?.palette?.editor?.tv_text_primary,
+      "& .MuiButtonBase-root": {
+        fontSize: "14px",
+        padding: '6px 8px',
+        "& 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`,
+            '& path': {
+              stroke: `${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,10 +18,11 @@ const Divider = props => {
   const {
     theme
   } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const {
-    borderColor = theme?.palette?.primary?.main || '#0F172A',
-    borderWidth = '1px',
-    borderStyle = 'solid'
+    borderColor = theme?.palette?.primary?.main || "#0F172A",
+    borderWidth = "1px",
+    borderStyle = "solid"
   } = element;
   const {
     readOnly
@@ -33,7 +35,7 @@ const Divider = props => {
   } = useEditorContext();
   const [showTool] = useEditorSelection(editor);
   const selected = hoverPath === path.join(",");
-  const width = borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`;
+  const width = borderWidth?.includes("px") ? borderWidth : `${borderWidth}px`;
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -43,16 +45,21 @@ 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",
       style: {
-        top: "-20px",
+        top: "-33px",
         left: 0
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -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',
-            boxShadow: '0px 0px 4px 0px #00000040',
-            borderRadius: '50%',
-            '& svg': {
-              stroke: theme?.palette?.text?.secondary3
+            // 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": {
+              width: '16px',
+              height: '16px'
             },
-            ...hoverStyles
+            // ...hoverStyles,
+            ...classes.buttonMoreOption
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
@@ -103,14 +118,15 @@ const Divider = props => {
     className: `dividerComponent`,
     style: {
       userSelect: "none",
-      position: 'relative'
+      position: "relative"
     },
     contentEditable: false,
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-root element-selector`,
       contentEditable: false,
       style: {
-        zIndex: 1000
+        zIndex: 1000,
+        left: "0%"
       },
       children: /*#__PURE__*/_jsx(DividerToolbar, {
         selected: selected,
@@ -126,7 +142,7 @@ const Divider = props => {
         borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
         backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
         height: borderColor?.includes("linear") ? borderWidth : undefined,
-        marginTop: '15px'
+        marginTop: "15px"
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {