@flozy/editor 5.0.5 → 5.0.6

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

@@ -0,0 +1,133 @@
+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
+        }
+      },
+      "&:hover": {
+        "& .tv-tr-pop": {
+          opacity: 1
+        }
+      }
+    }
+  },
+  filterView: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    "& .MuiButtonBase-root": {
+      padding: "6px",
+      width: "24px",
+      height: "24px",
+      "&.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 rgba(236, 236, 236, 1)",
+        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%"
+      },
+      [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"
+        },
+        "&:hover": {
+          background: appTheme?.palette?.editor?.tv_hover_bg,
+          borderRadius: "8px",
+          color: appTheme?.palette?.editor?.tv_hover_text
+        }
+      }
+    }
+  }
+});
+export default useDataViewStyles;

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

@@ -74,7 +74,8 @@ const useFreeGridStyles = ({
           fontSize: "12px",
           borderTopLeftRadius: "2px",
           borderTopRightRadius: "2px",
-          width: "auto"
+          width: "auto",
+          pointerEvents: "none"
         },
         "&:hover": {
           "& .debug-info": {

package/dist/Editor/Elements/Signature/Signature.css

@@ -57,7 +57,7 @@
     cursor: pointer;
 }
   .upload-wrapper-ui {
-    border: 1px dashed #92B1F5 !important;
+    border: 1.5px dashed #2563EB !important;
     /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important; */
     border-radius: 7px;
     display: flex;

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

@@ -64,7 +64,7 @@ function AddRowCol(props) {
         padding: "0px 4px",
         minWidth: "unset",
         lineHeight: "18px",
-        fontWeight: "lighter !important",
+        fontWeight: "normal !important",
         ...buttonStyle,
         opacity: showBtn ? 1 : 0
       },

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

@@ -1,4 +1,4 @@
-import { Box, Fade, IconButton, Paper, Popover, Popper } from "@mui/material";
+import { Box, ClickAwayListener, Fade, IconButton, Paper, Popper } from "@mui/material";
 import DragStyles from "./DragStyles";
 import { DragIcon } from "../../common/iconListV2";
 import { useEditorContext } from "../../hooks/useMouseMove";
@@ -19,7 +19,8 @@ function DragButton({
   className = "",
   customProps,
   dndProps,
-  resetSelection
+  resetSelection,
+  show
 }) {
   const {
     theme
@@ -31,8 +32,8 @@ function DragButton({
     isMobile
   } = customProps || {};
   const onDragClick = () => {
-    setShowTool(true);
     onDrag();
+    setShowTool(true);
   };
   const onDragClose = () => {
     setShowTool(false);
@@ -61,78 +62,80 @@ function DragButton({
       handleAction(value, option, dragType);
     }
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Popper, {
-      sx: classes.popper,
-      open: Boolean(anchorEl),
-      anchorEl: anchorEl,
-      placement: placement || "left",
-      transition: true,
-      contentEditable: false,
-      ref: dragElement,
-      modifiers: [{
-        name: "offset",
-        options: {
-          offset: [0, -12]
-        }
-      }, {
-        name: "flip",
-        enabled: false // Disable dynamic flipping
-      }],
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: show || showTool ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Popper, {
+        sx: classes.popper,
+        open: Boolean(anchorEl),
+        anchorEl: anchorEl,
+        placement: placement || "left",
+        transition: true,
+        contentEditable: false,
+        ref: dragElement,
+        modifiers: [{
+          name: "offset",
+          options: {
+            offset: [0, -12]
+          }
+        }, {
+          name: "flip",
+          enabled: false // Disable dynamic flipping
+        }],
 
-      disablePortal: dragType !== "row",
-      className: `${className}`,
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        timeout: 350,
-        children: /*#__PURE__*/_jsx("div", {
-          children: /*#__PURE__*/_jsx(Draggable, {
-            ...dragProps,
-            children: /*#__PURE__*/_jsx(Paper, {
-              sx: dragType === "row" ? {
-                transform: "rotate(90deg)"
-              } : {},
-              className: `${showTool ? "active" : ""}`,
-              style: {
-                lineHeight: 0
-              },
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: () => {
-                  onDragClick();
+        disablePortal: dragType !== "row",
+        className: `${className}`,
+        children: ({
+          TransitionProps
+        }) => /*#__PURE__*/_jsx(Fade, {
+          ...TransitionProps,
+          timeout: 350,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(Draggable, {
+              ...dragProps,
+              children: /*#__PURE__*/_jsx(Paper, {
+                sx: dragType === "row" ? {
+                  transform: "rotate(90deg)"
+                } : {},
+                className: `${showTool ? "active" : ""}`,
+                style: {
+                  lineHeight: 0
                 },
-                children: /*#__PURE__*/_jsx(DragIcon, {})
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: () => {
+                    onDragClick();
+                  },
+                  children: /*#__PURE__*/_jsx(DragIcon, {})
+                })
               })
             })
           })
         })
-      })
-    }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
-      open: showTool,
-      onClose: onDragClose,
-      swipeableDrawer: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: classes.mobileToolDrawer,
-        children: /*#__PURE__*/_jsx(TableToolOnDrag, {
-          ...commonToolProps
+      }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+        open: showTool,
+        onClose: onDragClose,
+        swipeableDrawer: true,
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: classes.mobileToolDrawer,
+          children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+            ...commonToolProps
+          })
+        })
+      }) : /*#__PURE__*/_jsx(Popper, {
+        open: showTool,
+        anchorEl: dragElement?.current,
+        contentEditable: false,
+        sx: classes.toolPopper,
+        placement: dragType === "row" ? "bottom-start" : "right-start",
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
+          onClickAway: onDragClose,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+              ...commonToolProps
+            })
+          })
         })
-      })
-    }) : /*#__PURE__*/_jsx(Popover, {
-      open: showTool,
-      anchorEl: dragElement?.current,
-      transition: true,
-      contentEditable: false,
-      sx: classes.toolPopper,
-      anchorOrigin: {
-        vertical: dragType === "row" ? "bottom" : "top",
-        horizontal: dragType === "row" ? "left" : "right"
-      },
-      onClose: onDragClose,
-      children: /*#__PURE__*/_jsx(TableToolOnDrag, {
-        ...commonToolProps
-      })
-    })]
+      })]
+    }) : null
   });
 }
 export default DragButton;

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

@@ -15,8 +15,8 @@ const TableStyles = theme => ({
         backgroundColor: theme?.palette?.editor?.background
       },
       "& svg": {
-        width: "16px",
-        height: "16px",
+        width: "18px",
+        height: "18px",
         "& path": {
           stroke: theme?.palette?.editor?.textColor
         }

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

@@ -112,7 +112,7 @@ const Table = props => {
     }
   };
   const handleExpand = e => {
-    setExpandTools(e.currentTarget);
+    setExpandTools(prev => prev ? false : e.currentTarget);
   };
   useEffect(() => {
     if (!selected) {
@@ -179,13 +179,14 @@ const Table = props => {
       hideRowDragBtns("", dragRowBtnCls);
     }
   };
-  const handleScrollStop = useDebouncedCallback(() => {
-    containerRef?.current?.classList.add("hideScroll");
-  }, 200);
   const handleScroll = () => {
     handleRowDragBtns();
+  };
+  const onMouseOver = () => {
     containerRef?.current?.classList.remove("hideScroll");
-    handleScrollStop();
+  };
+  const onMouseLeave = () => {
+    containerRef?.current?.classList.add("hideScroll");
   };
   const commonAddBtnProps = {
     tableRef,
@@ -211,7 +212,9 @@ const Table = props => {
       },
       ref: containerRef,
       onScroll: handleScroll,
-      className: "hideScroll",
+      onMouseOver: onMouseOver,
+      onMouseLeave: onMouseLeave,
+      className: "custom-scroll",
       children: [/*#__PURE__*/_jsx(TableComp, {
         className: readOnly ? "readOnly" : "",
         sx: {
@@ -256,7 +259,7 @@ const Table = props => {
       sx: {
         zIndex: 2000
       },
-      placement: "top",
+      placement: "bottom-start",
       children: ({
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {

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

@@ -188,9 +188,6 @@ const TableCell = props => {
     setHoverPath(null);
   };
   const onMouseDownInCell = e => {
-    if (!contentEditable) {
-      e.preventDefault();
-    }
     if (
     // for shift selection
     e.shiftKey && startCellPath?.length && startCellPath.toString() !== path.toString()) {
@@ -218,13 +215,6 @@ const TableCell = props => {
     const selectionPath = currentEditorSelection?.slice(0, -2);
     const isCellSelected = selectionPath?.length && Path.equals(selectionPath, path);
     if (!isCellSelected) {
-      // focus the clicked cell
-      ReactEditor.focus(editor);
-      Transforms.select(editor, {
-        anchor: Editor.end(editor, path),
-        focus: Editor.end(editor, path)
-      });
-
       // after mousedown event, onclick is triggered, while onclick, dragging should be disabled and focus should be on that clicked cell to edit the contents inside it.
       updateTableSelection({
         isDragging: false
@@ -238,9 +228,11 @@ const TableCell = props => {
     const props = {
       id: cellId
     };
-    if (!contentEditable) {
-      props.contentEditable = false;
-    }
+
+    // if (!contentEditable) {
+    //   props.contentEditable = false;
+    // }
+
     return props;
   }, [contentEditable, cellId]);
   const handleTouchMove = e => {
@@ -256,7 +248,7 @@ const TableCell = props => {
       isDragging: false
     });
   };
-  const tbProps = resizing || over || readOnly ? {
+  const tbProps = tableResizing || resizing || over || readOnly ? {
     ...commonTdProps,
     contentEditable: false
   } : {
@@ -405,6 +397,7 @@ const TableCell = props => {
         fontSize: entireTextSize || "inherit",
         color: entireTextColor || "inherit",
         cursor: "text",
+        verticalAlign: "top",
         ...(sizeProps || {})
       },
       ...tbProps,
@@ -417,26 +410,33 @@ const TableCell = props => {
         ...dndProps,
         dragType: currentDraggingType,
         tableDOM: tableDOM
-      }) : null, children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
+      }) : null, /*#__PURE__*/_jsx("div", {
+        style: {
+          overflow: "auto hidden"
+        },
+        children: children
+      }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
         classes: classes,
         onMouseDown: onMouseDown,
         height: tableDOM.getBoundingClientRect()?.height
-      }) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
+      }) : null, hasSelected && !readOnly && !tableResizing ? /*#__PURE__*/_jsx("div", {
         className: "selection-area-tc",
         contentEditable: false
-      }) : null, showColDrag || isColDragging ? /*#__PURE__*/_jsx(DragButton, {
+      }) : null, /*#__PURE__*/_jsx(DragButton, {
         ...commonDragBtnProps,
         placement: "top",
         dragType: "col",
         onDrag: onColDrag,
-        hideDelete: rowProps?.children?.length <= 1
-      }) : null, showRowDragBtn ? /*#__PURE__*/_jsx(DragButton, {
+        hideDelete: rowProps?.children?.length <= 1,
+        show: showColDrag || isColDragging
+      }), /*#__PURE__*/_jsx(DragButton, {
         ...commonDragBtnProps,
         dragType: "row",
         onDrag: onRowDrag,
         hideDelete: parentProps?.children?.length <= 1,
-        className: dragRowBtnCls
-      }) : null]
+        className: dragRowBtnCls,
+        show: showRowDragBtn
+      })]
     }), openSettings ? /*#__PURE__*/_jsx(TablePopup, {
       element: tableProps?.styleProps || {},
       customProps: customProps,

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

@@ -23,7 +23,7 @@ export const getRectangleBounds = tableSelection => {
   }
   return selectedPaths;
 };
-export const createCopiedTableStructure = (editor, tableSelection, currentTableNode, tablePath, selectedText) => {
+export const createCopiedTableStructure = (editor, tableSelection, currentTableNode, tablePath) => {
   const selectedCells = getRectangleBounds(tableSelection);
   const formattedCells = selectedCells.map(cell => cell.slice(-2));
   const tableChild = [];
@@ -42,19 +42,7 @@ export const createCopiedTableStructure = (editor, tableSelection, currentTableN
     columnIndexes.forEach((columnIndex, col_i) => {
       const cellPath = [...tablePath, rowIndex, columnIndex];
       const columnNode = getNode(editor, cellPath);
-      const cellNode = selectedText // we can select text in only one column
-      ? {
-        ...columnNode,
-        type: "table-cell",
-        children: [{
-          type: "paragraph",
-          children: [{
-            text: selectedText
-          }],
-          cellBgColor: "#FFFFFF"
-        }]
-      } : columnNode;
-      row.children.push(cellNode);
+      row.children.push(columnNode);
     });
     tableChild.push(row);
   });
@@ -67,13 +55,13 @@ export const createCopiedTableStructure = (editor, tableSelection, currentTableN
 
   return table;
 };
-export const tableNodeToDom = (tableNode, selectedText) => {
+export const tableNodeToDom = tableNode => {
   const tableEle = document.createElement("table");
   tableNode.children?.forEach(row => {
     const rowEle = document.createElement("tr");
     row?.children?.forEach(cell => {
       const cellEle = document.createElement("td");
-      const cellText = selectedText || serializeToText(cell);
+      const cellText = serializeToText(cell);
       cellEle.innerHTML = cellText;
       rowEle.appendChild(cellEle);
     });

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -92,7 +92,7 @@ const PopupTool = props => {
     }
   }, [selection, selectedElement?.path, selectedElement?.enable]);
   const handleClose = () => {
-    setAnchorEl(null);
+    // setAnchorEl(null);
     setOpen(false);
     setPopupType("");
   };

package/dist/Editor/Toolbar/Toolbar.js

@@ -32,6 +32,7 @@ import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
 import DividerButton from "../Elements/Divider/DividerButton.js";
 import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
 import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
+import DataViewButton from "../Elements/DataView/DataViewButton.js";
 import SearchButton from "../Elements/Search/SearchButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -118,6 +119,11 @@ export const RenderToolbarIcon = props => {
           editor: editor,
           icoBtnType: icoBtnType
         }, element.id);
+      case "dataView":
+        return /*#__PURE__*/_jsx(DataViewButton, {
+          editor: editor,
+          icoBtnType: icoBtnType
+        }, element.id);
       case "id":
         return /*#__PURE__*/_jsx(Id, {
           editor: editor

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -191,6 +191,10 @@ export const toolbarGroups = [[{
   id: 42,
   type: "table",
   group: "elements"
+}, {
+  id: 51,
+  type: "dataView",
+  group: "elements"
 }, {
   id: 48,
   format: "divider",

package/dist/Editor/assets/svg/OpenLinkIcon.js

@@ -9,19 +9,19 @@ const OpenLinkIcon = props => {
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
       d: "M7.58325 6.41615L12.3666 1.63281",
-      stroke: "#0F172A",
+      stroke: "#64748B",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M12.8334 3.96602V1.16602H10.0334",
-      stroke: "#0F172A",
+      stroke: "#64748B",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M6.41675 1.16602H5.25008C2.33341 1.16602 1.16675 2.33268 1.16675 5.24935V8.74935C1.16675 11.666 2.33341 12.8327 5.25008 12.8327H8.75008C11.6667 12.8327 12.8334 11.666 12.8334 8.74935V7.58268",
-      stroke: "#0F172A",
+      stroke: "#64748B",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"

package/dist/Editor/common/Icon.js

@@ -11,6 +11,7 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import GridOnIcon from "@mui/icons-material/GridOn";
 import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
 import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
 import SettingsIcon from "../assets/svg/SettingsIcon";
@@ -24,7 +25,7 @@ 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 DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -270,6 +271,11 @@ const iconList = {
   addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
   addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {}),
   openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
+  dataView: /*#__PURE__*/_jsx(GridOnIcon, {
+    sx: {
+      fill: "#64748B"
+    }
+  }),
   brain: /*#__PURE__*/_jsx(BrainIcon, {}),
   docsIcon: /*#__PURE__*/_jsx(DocsIcon, {}),
   userIcon: /*#__PURE__*/_jsx(UserIcon, {}),

package/dist/Editor/common/MentionsPopup/index.js

@@ -97,7 +97,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
         id: `cmd-li-ind-${index}}`,
         component: "div",
         onClick: handleClick(char, i),
-        className: `${i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
+        className: `${type !== 'elements' && i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
         sx: classes.listItem,
         ref: i === index ? papperRef : null,
         children: char.renderComponent ? char.renderComponent({