@flozy/editor 5.2.5 → 5.2.7

package/dist/Editor/CommonEditor.js

@@ -72,6 +72,12 @@ const Leaf = ({
     children: children
   });
 };
+const updateTopBanner = (content, setTopBanner) => {
+  setTopBanner(() => {
+    const firstNode = content[0];
+    return firstNode?.type === "topbanner" ? firstNode : null;
+  });
+};
 const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     id,
@@ -151,6 +157,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     setValue(draftToSlate({
       data: content
     }));
+    updateTopBanner(content, setTopBanner);
     if (!isMobile && !ReactEditor.isFocused(editor)) {
       ReactEditor.focus(editor);
     }
@@ -301,10 +308,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const handleEditorChange = newValue => {
     if (!readOnly) {
       if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
-        setTopBanner(() => {
-          const firstNode = newValue[0];
-          return firstNode?.type === "topbanner" ? firstNode : null;
-        });
+        updateTopBanner(newValue, setTopBanner);
         debounced(newValue);
         if (!isInteracted) {
           setIsInteracted(true);

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

@@ -20,8 +20,7 @@ const DataView = props => {
     attributes,
     children,
     element,
-    customProps,
-    title
+    customProps
   } = props;
   const {
     CHARACTERS,
@@ -30,7 +29,8 @@ const DataView = props => {
   const {
     properties,
     layouts,
-    rows
+    rows,
+    title
   } = element;
   const classes = useDataViewStyles(theme, appTheme);
   const path = ReactEditor.findPath(editor, element);
@@ -79,27 +79,41 @@ const DataView = props => {
       console.log(err);
     }
   };
+  const onTitleChange = value => {
+    try {
+      Transforms.setNodes(editor, {
+        title: value
+      }, {
+        at: path
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
   return /*#__PURE__*/_jsx(Box, {
     ...attributes,
     className: "fe-dataview",
     sx: classes.root,
     contentEditable: false,
+    "data-title": title,
     children: /*#__PURE__*/_jsxs(DataViewProvider, {
       initialData: {
         properties,
         layouts,
         rows,
-        users: users,
-        tableTitle: title
+        users: users
       },
       path: path,
       editor: editor,
+      title: title,
       children: [/*#__PURE__*/_jsx(FilterView, {
         classes: classes,
         onEnter: onEnter,
         onDelete: onDelete,
         onDuplicate: onDuplicate,
-        readOnly: readOnly
+        readOnly: readOnly,
+        title: title,
+        onTitleChange: onTitleChange
       }), /*#__PURE__*/_jsx(LayoutView, {
         readOnly: readOnly,
         children: children

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

@@ -19,7 +19,7 @@ const CheckType = props => {
     });
   };
   return /*#__PURE__*/_jsx(Checkbox, {
-    checked: value,
+    checked: value || false,
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "checkListButton"
     }),

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

@@ -11,7 +11,7 @@ const AvatarIcon = props => {
     avatar
   } = props;
   const nameIndex = option.label || option.value;
-  return avatar ? /*#__PURE__*/_jsx(Avatar, {
+  return avatar && nameIndex ? /*#__PURE__*/_jsx(Avatar, {
     alt: option.label || option.value,
     src: option.avatar || null,
     children: nameIndex[0] || ""
@@ -21,7 +21,7 @@ const filter = (opt, params, selectedOpt) => {
   const selectedVals = selectedOpt?.map(m => m?.value);
   const fv = opt?.filter(f => !selectedVals.includes(f.value));
   if (params?.inputValue) {
-    fv.filter(f => f?.value?.toLowerCase().indexOf(params?.inputValue?.toLowerCase()) >= 0);
+    return fv.filter(f => f?.value?.toLowerCase().indexOf(params?.inputValue?.toLowerCase()) >= 0);
   }
   return fv;
 };
@@ -134,7 +134,7 @@ export default function Select(props) {
         children: /*#__PURE__*/_jsx(Chip, {
           label: option.label || option.value || "",
           sx: {
-            backgroundColor: option.color || "#CCC"
+            background: option.color || "#CCC"
           },
           avatar: /*#__PURE__*/_jsx(AvatarIcon, {
             option: option,

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

@@ -24,7 +24,12 @@ const DateType = props => {
   return /*#__PURE__*/_jsx(DatePicker, {
     disabled: readOnly,
     selected: isValidDate(value) ? new Date(value) : "",
-    onChange: handleChange
+    onChange: handleChange,
+    onKeyDown: e => {
+      e.preventDefault();
+      console.log(e?.target.value);
+    },
+    placeholderText: "MM/DD/YYYY"
   });
 };
 export default DateType;

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

@@ -15,16 +15,16 @@ const FilterView = props => {
     onDelete,
     onDuplicate,
     onEnter,
-    readOnly
+    readOnly,
+    title,
+    onTitleChange
   } = props;
   const {
     sort,
     selectedRows,
     onDeleteRows,
     search,
-    onSearch,
-    title,
-    setTitle
+    onSearch
   } = useDataView();
   const [anchorEl, setAnchorEl] = useState(null);
   const [anchorMoreEl, setAnchorMoreEl] = useState(null);
@@ -68,7 +68,7 @@ const FilterView = props => {
     setAnchorMoreEl(null);
   };
   const handleTitleChange = e => {
-    setTitle(e?.target?.value);
+    onTitleChange(e?.target?.value);
   };
   const handleEnter = e => {
     if (e?.key === "Enter") {

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

@@ -93,7 +93,7 @@ const AddOptions = props => {
             primary: /*#__PURE__*/_jsx(Chip, {
               label: m.value,
               sx: {
-                backgroundColor: m.color
+                background: m.color
               }
             })
           }), /*#__PURE__*/_jsx(ListItemIcon, {

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

@@ -1,10 +1,10 @@
 import React from "react";
-import { Box, Button } from "@mui/material";
-import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { Box } from "@mui/material";
 import { useDataView } from "../Providers/DataViewProvider";
 import ColumnView from "./ColumnView";
 // import Formula from "./Formula";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const RenderRow = props => {
   const {
     rowIndex,
@@ -30,6 +30,7 @@ const RenderRow = props => {
 const ViewData = props => {
   const {
     attributes,
+    children,
     customProps
   } = props;
   const {
@@ -48,10 +49,11 @@ const ViewData = props => {
       setSelectedRows([...selectedRows?.filter(f => f !== id)]);
     }
   };
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     component: "tbody",
     ...attributes,
-    children: rows?.map((row, i) => {
+    contentEditable: false,
+    children: [rows?.map((row, i) => {
       return /*#__PURE__*/_jsx(Box, {
         component: "tr",
         className: "tv-act-row",
@@ -64,7 +66,16 @@ const ViewData = props => {
           readOnly: readOnly
         })
       }, i);
-    })
+    }), /*#__PURE__*/_jsx("tr", {
+      style: {
+        visibility: "hidden",
+        display: "none"
+      },
+      "aria-hidden": "true",
+      children: /*#__PURE__*/_jsx("td", {
+        children: children
+      })
+    })]
   });
 };
 export default ViewData;

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

@@ -44,7 +44,6 @@ export const DataViewProvider = ({
   const [rows, setRows] = useState(initialData?.rows || []);
   const [selectedRows, setSelectedRows] = useState([]);
   const [search, setSearch] = useState("");
-  const [title, setTitle] = useState(initialData?.tableTitle || "");
   let {
     users
   } = initialData || {};
@@ -57,7 +56,7 @@ export const DataViewProvider = ({
   // re-order when sort val changes
   useEffect(() => {
     if ((sort?.length > 0 || search) && rows?.length > 0) {
-      const reOrderRows = sort?.length > 0 ? multiSortRows(rows, sort, properties) : [...rows];
+      const reOrderRows = sort?.length > 0 ? multiSortRows(initialData?.rows, sort, properties) : [...initialData?.rows];
       setRows(globalSearch(reOrderRows, search));
     } else {
       // reset to default order
@@ -242,18 +241,6 @@ export const DataViewProvider = ({
   const onSearch = e => {
     setSearch(e?.target?.value);
   };
-  const onTitleChange = value => {
-    try {
-      Transforms.setNodes(editor, {
-        title: value
-      }, {
-        at: path
-      });
-      setTitle(value);
-    } catch (err) {
-      console.log(err);
-    }
-  };
   const value = {
     layoutType,
     setLayoutType,
@@ -277,9 +264,7 @@ export const DataViewProvider = ({
     setSelectedRows,
     onDeleteRows,
     search,
-    onSearch,
-    title,
-    setTitle: onTitleChange
+    onSearch
   };
   return /*#__PURE__*/_jsx(DataViewContext.Provider, {
     value: value,

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

@@ -107,6 +107,11 @@ const useDataViewStyles = (theme, appTheme) => ({
       "& .MuiInputBase-root": {
         width: "100%"
       },
+      "& .MuiInputBase-input": {
+        paddingBottom: "0px",
+        fontWeight: "bold",
+        fontSize: "16px"
+      },
       [theme?.breakpoints?.between("xs", "md")]: {
         width: "100%",
         marginRight: "0px"

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

@@ -7,6 +7,11 @@ const SimpleTextStyle = ({
     position: "relative",
     padding: "0px",
     lineHeight: lineHeight,
+    "&.dataView": {
+      "& .placeholder-simple-text": {
+        opacity: 0
+      }
+    },
     "&.signature": {
       "& .placeholder-simple-text": {
         opacity: 0
@@ -30,8 +35,8 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
-      display: 'inline-flex',
-      alignItems: 'center',
+      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";
@@ -22,6 +22,26 @@ const hideRowDragBtns = (hide, dragRowBtnCls) => {
     rowDragBtns?.forEach(btn => btn.style.display = hide);
   }
 };
+const ToolTableComponent = props => {
+  const {
+    handleAction,
+    editorTheme
+  } = props;
+  const {
+    updateTableSelection
+  } = useTable();
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(TableTool, {
+      theme: editorTheme,
+      handleToolAction: (type, option) => {
+        handleAction(type, option);
+        if (type === "duplicate") {
+          updateTableSelection(getDefaultTableSelection());
+        }
+      }
+    })
+  });
+};
 const MoreTableSettings = props => {
   const {
     exandTools,
@@ -29,9 +49,6 @@ const MoreTableSettings = props => {
     editorTheme,
     setExpandTools
   } = props;
-  const {
-    updateTableSelection
-  } = useTable();
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   return isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
     open: Boolean(exandTools),
@@ -39,16 +56,9 @@ const MoreTableSettings = props => {
       setExpandTools(false);
     },
     swipeableDrawer: false,
-    children: /*#__PURE__*/_jsx("div", {
-      children: /*#__PURE__*/_jsx(TableTool, {
-        theme: editorTheme,
-        handleToolAction: (type, option) => {
-          handleAction(type, option);
-          if (type === "duplicate") {
-            updateTableSelection(getDefaultTableSelection());
-          }
-        }
-      })
+    children: /*#__PURE__*/_jsx(ToolTableComponent, {
+      handleAction: handleAction,
+      editorTheme: editorTheme
     })
   }) : /*#__PURE__*/_jsx(Popper, {
     open: Boolean(exandTools),
@@ -60,16 +70,9 @@ const MoreTableSettings = props => {
     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());
-            }
-          }
-        })
+      children: /*#__PURE__*/_jsx(ToolTableComponent, {
+        handleAction: handleAction,
+        editorTheme: editorTheme
       })
     })
   });

package/dist/Editor/helper/enforceDateFormat.js

@@ -0,0 +1,41 @@
+function enforceDateFormat(inputElement) {
+  inputElement.addEventListener("input", event => {
+    const input = event.target;
+    let value = input.value;
+
+    // Allow only numbers and forward slashes
+    value = value.replace(/[^\d/]/g, "");
+
+    // Enforce MM/DD/YYYY structure
+    if (value.length > 10) {
+      value = value.slice(0, 10);
+    }
+    const parts = value.split("/");
+    if (parts.length > 1) {
+      parts[0] = parts[0].slice(0, 2); // Limit MM to 2 digits
+      if (parts[0] > 12) parts[0] = "12"; // Max month value
+    }
+
+    if (parts.length > 2) {
+      parts[1] = parts[1].slice(0, 2); // Limit DD to 2 digits
+      if (parts[1] > 31) parts[1] = "31"; // Max day value
+    }
+
+    if (parts.length > 3) {
+      parts[2] = parts[2].slice(0, 4); // Limit YYYY to 4 digits
+    }
+
+    input.value = parts.join("/");
+
+    // Optionally, validate the full date
+    if (input.value.length === 10) {
+      const [month, day, year] = input.value.split("/").map(Number);
+      const isValidDate = !isNaN(Date.parse(`${year}-${month}-${day}`));
+      if (!isValidDate) {
+        input.value = ""; // Clear input if invalid
+        alert("Invalid date format. Please enter a valid MM/DD/YYYY date.");
+      }
+    }
+  });
+}
+export default enforceDateFormat;

package/dist/Editor/plugins/withEmbeds.js

@@ -40,32 +40,36 @@ const withEmbeds = editor => {
     }
   };
   editor.insertBreak = (...args) => {
-    const parentPath = Path.parent(editor.selection.focus.path);
-    const parentNode = Node.get(editor, parentPath);
-    if (editor.isVoid(parentNode)) {
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(editor, {
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        at: nextPath,
-        select: true // Focus on this node once inserted
-      });
-    } else if (AvoidCopying.indexOf(parentNode?.type) >= 0) {
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(editor, {
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        at: nextPath,
-        select: true // Focus on this node once inserted
-      });
-    } else {
-      insertBreak(...args);
+    try {
+      const parentPath = Path.parent(editor.selection.focus.path);
+      const parentNode = Node.get(editor, parentPath);
+      if (editor.isVoid(parentNode)) {
+        const nextPath = Path.next(parentPath);
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        }, {
+          at: nextPath,
+          select: true // Focus on this node once inserted
+        });
+      } else if (AvoidCopying.indexOf(parentNode?.type) >= 0) {
+        const nextPath = Path.next(parentPath);
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        }, {
+          at: nextPath,
+          select: true // Focus on this node once inserted
+        });
+      } else {
+        insertBreak(...args);
+      }
+    } catch (err) {
+      console.log(err);
     }
   };
   return editor;

package/dist/Editor/plugins/withHTML.js

@@ -190,8 +190,8 @@ const withHtml = editor => {
             }], {
               at: [0]
             });
-            insertData(data);
           }
+          insertData(data);
         }, decoded);
       }
     } else if (html) {

package/dist/Editor/utils/dataView.js

@@ -1,33 +1,31 @@
 import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
 const getDefaultDatView = () => ({
-  type: "paragraph",
+  type: "dataView",
+  title: "",
+  layouts: [{
+    key: "view1",
+    type: "table",
+    label: "Table 1 View",
+    value: "table1",
+    filter: [],
+    sort: []
+  }],
+  properties: [{
+    key: "column1",
+    label: "Task",
+    type: "text",
+    visible: true,
+    default: true
+  }],
+  rows: [{
+    id: new Date().getTime(),
+    column1: ""
+  }],
   children: [{
-    type: "dataView",
-    title: "",
-    layouts: [{
-      key: "view1",
-      type: "table",
-      label: "Table 1 View",
-      value: "table1",
-      filter: [],
-      sort: []
-    }],
-    properties: [{
-      key: "column1",
-      label: "Task",
-      type: "text",
-      visible: true,
-      default: true
-    }],
-    rows: [{
-      id: new Date().getTime(),
-      column1: ""
-    }],
+    type: "viewData",
     children: [{
-      type: "viewData",
-      children: [{
-        text: ""
-      }]
+      text: ""
     }]
   }]
 });
@@ -35,8 +33,10 @@ export const insertDataView = editor => {
   try {
     Transforms.insertNodes(editor, {
       ...getDefaultDatView()
+    }, {
+      at: editor?.selection.focus.path
     });
-    Transforms.move(editor);
+    insertNewLine(editor);
   } catch (err) {
     console.log(err);
   }

package/dist/Editor/utils/helper.js

@@ -4,6 +4,7 @@ import insertNewLine from "./insertNewLine";
 import { getDevice } from "../helper/theme";
 export const windowVar = {};
 let ST_TIMEOUT = null;
+const BLOCKS = ["grid", "dataView"];
 export const formatDate = (date, format = "MM/DD/YYYY") => {
   if (!date) return "";
   var d = new Date(date),
@@ -163,7 +164,7 @@ export const handleInsertLastElement = (event, editor) => {
   if (isFreeGrid) {
     return;
   }
-  const isLastElementEmpty = lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => c.type === "grid");
+  const isLastElementEmpty = lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => BLOCKS.includes(c.type));
   if (!ReactEditor.isFocused(editor)) {
     if (isLastElementEmpty) {
       if (hasPath) {

package/package.json

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