@flozy/editor 5.3.0 → 5.3.2

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/Form/Form.js

@@ -402,6 +402,7 @@ const Form = props => {
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
         position: "relative",
+        lineHeight: 1.43,
         ...formSX
       },
       ref: formEle,

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

@@ -171,6 +171,7 @@ const useFreeGridStyles = ({
           height: "100%",
           "& .signature-container": {
             height: "100%",
+            LineHeight: 1.43,
             "& .signature-btn-container": {
               height: "100%",
               display: "flex",
@@ -318,7 +319,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/List/CheckList.js

@@ -39,7 +39,8 @@ const CheckList = ({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        ...(style || {})
+        ...(style || {}),
+        lineHeight: 1.43
       },
       children: [/*#__PURE__*/_jsxs("div", {
         contentEditable: false,

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

@@ -49,6 +49,7 @@ const SearchAttachment = props => {
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
         margin: '4px 0px',
+        lineHeight: 1.43,
         "&.MuiPaper-root.MuiPaper-rounded": {
           borderRadius: "7px !important",
           paddingTop: '0px !important'

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

@@ -5,6 +5,7 @@ import { getPageSettings } from "../../utils/pageSettings";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
+import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,8 +33,14 @@ const SimpleText = props => {
   const {
     pageColor
   } = pageSt?.pageProps || {};
+  const {
+    activeBreakPoint
+  } = useEditorContext();
+  const lineHeight = element?.children[0]?.lineHeight;
+  const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
+    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF",
+    lineHeight: lineH
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

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

@@ -1,10 +1,17 @@
 import { invertColor } from "../../helper";
 const SimpleTextStyle = ({
-  pageColor
+  pageColor,
+  lineHeight
 }) => ({
   root: {
     position: "relative",
     padding: "0px",
+    lineHeight: lineHeight,
+    "&.dataView": {
+      "& .placeholder-simple-text": {
+        opacity: 0
+      }
+    },
     "&.signature": {
       "& .placeholder-simple-text": {
         opacity: 0
@@ -28,6 +35,8 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
+      display: "inline-flex",
+      alignItems: "center",
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

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

@@ -1,7 +1,7 @@
 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, ClickAwayListener } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme, Popper, ClickAwayListener } from "@mui/material";
 import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -77,6 +77,7 @@ const TopBanner = props => {
     theme
   } = useEditorContext();
   const classes = TopBannerStyles(theme);
+  const renderHeaderAboveBanner = customProps?.metadata?.renderHeader ? customProps.metadata.renderHeader() : null;
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     ...attributes,
@@ -87,7 +88,7 @@ const TopBanner = props => {
     },
     contentEditable: false,
     sx: classes.root,
-    children: [/*#__PURE__*/_jsx("img", {
+    children: [renderHeaderAboveBanner, /*#__PURE__*/_jsx("img", {
       src: url,
       alt: "Top Banner",
       className: "top-banner-wrpr-ele",

package/dist/Editor/Styles/EditorStyles.js

@@ -286,8 +286,13 @@ const editorStyles = ({
       }
     },
     "& ::selection": {
-      color: "inherit",
-      background: "#EAEBFE"
+      background: 'rgba(35, 131, 226, 0.35)!important',
+      color: 'inherit'
+    },
+    "&.readOnlyContainer": {
+      "& .max-content": {
+        paddingBottom: "0px !important"
+      }
     }
   },
   fullScreenWrapper: {