@flozy/editor 9.2.0 → 9.2.1

package/dist/Editor/ChatEditor.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState, useImperativeHandle, forwardRef } from "react";
+import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { Editable, Slate, ReactEditor } from 'slate-react';
 import { createEditor, Transforms, Editor } from 'slate';
 import withCommon from "./hooks/withCommon";
@@ -41,7 +41,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }]
     }]
   });
-  const [value] = useState(convertedContent);
+  const [value, setValue] = useState(convertedContent);
   const debouncedValue = useRef(value);
   const debounced = useDebouncedCallback(
   // function

package/dist/Editor/CommonEditor.js

@@ -27,7 +27,7 @@ import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
 import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
-import { getInitialValue, handleInsertLastElement, isEverythingSelected, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
+import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
@@ -37,7 +37,6 @@ import "./font.css";
 import "./Editor.css";
 import "animate.css";
 import FontLoader from "./common/FontLoader/FontLoader";
-import { CustomDialogComponent } from "./common/CustomDialog";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Item = /*#__PURE__*/forwardRef(({
@@ -115,7 +114,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [breakpoint, setBreakpoint] = useState("");
   const [topBanner, setTopBanner] = useState();
   const debouncedValue = useRef(value);
-  const dialogRef = useRef(null);
   const [size] = useWindowResize();
   const {
     needDotsBG,
@@ -369,15 +367,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       ...partialState
     }));
   };
-  const handleDeleteAll = () => {
-    const {
-      selection
-    } = editor;
-    if (selection) {
-      editor.deleteFragment();
-      dialogRef.current?.handleClose();
-    }
-  };
   const onKeyDown = useCallback(event => {
     const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
     const isCtrlKey = event.ctrlKey || isMetaKey;
@@ -424,27 +413,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       const {
         selection
       } = editor;
-      const everythingSelect = isEverythingSelected(editor);
       event.preventDefault();
-      if (everythingSelect) {
-        dialogRef.current?.handleOpen();
-      } else {
-        if (selection) {
-          if (!Range.isCollapsed(selection)) {
-            editor.deleteFragment();
-          } else {
-            editor.deleteBackward({
-              unit: "character"
-            });
-          }
+      if (selection) {
+        if (!Range.isCollapsed(selection)) {
+          editor.deleteFragment();
+        } else {
+          editor.deleteBackward({
+            unit: "character"
+          });
         }
       }
-    } else if (event.key === "Delete") {
-      const everythingSelect = isEverythingSelected(editor);
-      if (everythingSelect) {
-        event.preventDefault();
-        dialogRef.current?.handleOpen();
-      }
     }
   }, [chars, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -523,10 +501,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       console.log("handleCursorScroll", err);
     }
   };
-  return /*#__PURE__*/_jsxs(EditorProvider, {
+  return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
-    children: [/*#__PURE__*/_jsx(DialogWrapper, {
+    children: /*#__PURE__*/_jsx(DialogWrapper, {
       classes: classes,
       ...props,
       fullScreen: fullScreen,
@@ -650,15 +628,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           readOnly: readOnly
         })]
       })
-    }), /*#__PURE__*/_jsx(CustomDialogComponent, {
-      ref: dialogRef,
-      content: "Are you sure you want to delete All the content?",
-      confirmText: "Delete",
-      cancelText: "Cancel",
-      onConfirm: () => {
-        handleDeleteAll();
-      }
-    })]
+    })
   });
 });
 CommonEditor.displayName = "CommonEditor";

package/dist/Editor/Editor.css

@@ -1280,8 +1280,8 @@ blockquote {
 }
 @media (max-width: 899px) {
   /* Qa validation required */
-    /* .MuiPopover-root {
-      z-index: 1302 !important;
+  /* .MuiPopover-root {
+    z-index: 1302 !important;
   } */
 
   canvas {
@@ -1339,18 +1339,4 @@ code.markcode {
   display: block;
   background-color: #f3f3f3;
   font-family: 'Source Code Pro' !important;
-}
-/* Hide the popper when the reference is hidden */
-.hide-popper-on-overlap[data-popper-escaped],
-.hide-popper-on-overlap[data-popper-reference-hidden] {
-  visibility: hidden;
-  pointer-events: none;
-}
-code.markcode {
-  border-radius: 4px;
-  padding: 6px 8px;
-  margin: 8px 0px;
-  display: block;
-  background-color: #f3f3f3;
-  font-family: 'Source Code Pro' !important;
-}
+}

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
+import { Transforms } from "slate";
 import ColorPickerTool from "react-gcolor-picker";
 import { IconButton, Tooltip, Box, Popover } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";

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

@@ -16,10 +16,7 @@ const ColumnView = props => {
     selected,
     readOnly
   } = props;
-  const {
-    type
-  } = property;
-  const DataType = DataTypes[type] || DataTypes["text"];
+  const DataType = DataTypes[property?.type] || DataTypes["text"];
   const anchorRef = useRef(null);
   const [anchorEl, setAnchorEl] = useState(null);
   const [popperRefresh, setPopperRefresh] = useState(new Date().getTime());

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

@@ -153,9 +153,11 @@ export default function Select(props) {
         ...optionProps,
         children: /*#__PURE__*/_jsx(Chip, {
           label: option.label || option.value || "",
-          classes: classes.chipText,
           sx: {
-            background: option.color || appTheme?.palette?.editor?.tv_border1
+            background: option.color || appTheme?.palette?.editor?.tv_border1,
+            "& .MuiChip-label": {
+              paddingLeft: "12px !important"
+            }
           },
           avatar: /*#__PURE__*/_jsx(AvatarIcon, {
             option: option,
@@ -170,7 +172,6 @@ export default function Select(props) {
     fullWidth: true,
     renderInput: params => {
       return /*#__PURE__*/_jsx(TextField, {
-        fullWidth: true,
         size: "small",
         ...params,
         placeholder: placeholder

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

@@ -3,7 +3,7 @@ const useCompStyles = (theme, appTheme) => ({
     border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
     background: appTheme?.palette?.editor?.tv_pop_bg,
     color: appTheme?.palette?.editor?.tv_text,
-    fontSize: "14px",
+    fontSize: '14px',
     borderRadius: "8px",
     [theme?.breakpoints?.between("xs", "md")]: {},
     "& ul": {
@@ -63,11 +63,6 @@ const useCompStyles = (theme, appTheme) => ({
         }
       }
     }
-  },
-  chipText: {
-    "& .MuiChip-label": {
-      paddingLeft: "12px !important"
-    }
   }
 });
 export default useCompStyles;

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

@@ -1,9 +1,6 @@
 import React from "react";
 import DatePicker from "react-datepicker";
-import { Grid } from "@mui/material";
 import { useDataView } from "../../Providers/DataViewProvider";
-import useCommonStyle from "../../../../commonStyle";
-import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 function isValidDate(dateString) {
   const date = new Date(dateString);
@@ -19,27 +16,20 @@ const DateType = props => {
   const {
     onChange
   } = useDataView();
-  const {
-    theme
-  } = useEditorContext();
-  const classes = useCommonStyle(theme);
   const handleChange = date => {
     onChange(rowIndex, {
       [property]: date
     });
   };
-  return /*#__PURE__*/_jsx(Grid, {
-    sx: classes.datePicker,
-    children: /*#__PURE__*/_jsx(DatePicker, {
-      disabled: readOnly,
-      selected: isValidDate(value) ? new Date(value) : "",
-      onChange: handleChange,
-      onKeyDown: e => {
-        e.preventDefault();
-        console.log(e?.target.value);
-      },
-      placeholderText: "MM/DD/YYYY"
-    })
+  return /*#__PURE__*/_jsx(DatePicker, {
+    disabled: readOnly,
+    selected: isValidDate(value) ? new Date(value) : "",
+    onChange: handleChange,
+    onKeyDown: e => {
+      e.preventDefault();
+      console.log(e?.target.value);
+    },
+    placeholderText: "MM/DD/YYYY"
   });
 };
 export default DateType;

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

@@ -10,16 +10,12 @@ const useTableStyles = (theme, appTheme) => ({
     borderSpacing: 0,
     borderRadius: "7px 7px 0px 0px",
     overflow: "hidden",
-    width: "auto !important",
-    minWidth: "100%",
     border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
-    tableLayout: "fixed",
     "& thead": {
       background: appTheme?.palette?.editor?.tv_header,
       height: "40px"
     },
     "& th": {
-      position: "relative",
       "& svg": {
         "& .fillStroke": {
           stroke: appTheme?.palette?.editor?.tv_stroke
@@ -31,8 +27,6 @@ const useTableStyles = (theme, appTheme) => ({
     },
     "& td": {
       height: "40px",
-      maxWidth: "0px !important",
-      minWidth: "0px !important",
       "& input": {
         color: appTheme?.palette?.editor?.tv_text_primary,
         background: "transparent",
@@ -45,11 +39,6 @@ const useTableStyles = (theme, appTheme) => ({
     "& th, tr, td": {
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
     },
-    "& th, & td": {
-      overflowX: "clip",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    },
     "& .tv-act-btn": {
       color: appTheme?.palette?.editor?.tv_text,
       textTransform: "none",
@@ -96,18 +85,13 @@ const useTableStyles = (theme, appTheme) => ({
           paddingTop: "3px",
           paddingBottom: "3px",
           paddingLeft: "3px",
-          // maxWidth: "250px",
+          maxWidth: "250px",
           overflow: "hidden",
           position: "relative",
           "& .tv-ms-tag-wrpr": {
             display: "flex",
             flexWrap: "nowrap",
-            overflow: "auto",
-            minWidth: "58px",
-            "& .MuiChip-deleteIcon": {
-              minWidth: "22px",
-              minHeight: "22px"
-            }
+            overflow: "auto"
           },
           "&.Mui-disabled": {
             "& input": {
@@ -145,20 +129,6 @@ const useTableStyles = (theme, appTheme) => ({
         opacity: 1
       }
     }
-  },
-  cellResizer: {
-    position: "absolute",
-    cursor: "col-resize",
-    right: "0px",
-    top: 0,
-    width: "3px",
-    borderRadius: "0px",
-    zIndex: 1,
-    background: "transparent",
-    height: "100%",
-    "&:hover, &.active": {
-      background: "#2563EB"
-    }
   }
 });
 export default useTableStyles;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
 import { Box, Button, useTheme } from "@mui/material";
 import { useDataView } from "../Providers/DataViewProvider";
 import PropertySettings from "./Options";
@@ -7,127 +7,37 @@ import useTableStyles from "./TableStyles";
 import { GridSettingsIcon, GridAddSectionIcon } from "../../../common/iconslist";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import Icon from "../../../common/Icon";
-import useTableResize from "../../../utils/customHooks/useTableResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Resizer = ({
-  classes,
-  onMouseDown,
-  height,
-  resizing
-}) => {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(Box, {
-      component: "div",
-      className: `cell-resizer ${resizing ? "active" : ""}`,
-      contentEditable: false,
-      onPointerDown: onMouseDown,
-      sx: classes.cellResizer,
-      style: {
-        height: `${height}px`
-      }
-    })
-  });
-};
 const SortIcon = props => {
   const {
     sortBy
   } = props;
   return sortBy ? sortBy === "asc" ? /*#__PURE__*/_jsx(Box, {
     sx: {
-      "& svg": {
-        "& path": {
+      '& svg': {
+        '& path': {
           stroke: "rgba(37, 99, 235, 1) !important"
         }
       }
     },
     children: /*#__PURE__*/_jsx(Icon, {
-      icon: "chervUp"
+      icon: 'chervUp'
     })
   }) : /*#__PURE__*/_jsx(Box, {
     sx: {
-      "& svg": {
-        "& path": {
+      '& svg': {
+        '& path': {
           stroke: "rgba(37, 99, 235, 1) !important"
         }
       }
     },
     children: /*#__PURE__*/_jsx(Icon, {
-      icon: "chervDown"
+      icon: 'chervDown'
     })
   }) : null;
 };
-const THead = props => {
-  const thRef = useRef(null);
-  const [headerTextWidth, setHeaderTextWidth] = useState(200);
-  const {
-    iconType,
-    isSort,
-    classes,
-    onEditProperty,
-    m,
-    tableRef,
-    handleResize
-  } = props;
-  // do not remove extra coma it will lead to swap of variable
-  const [size, onMouseDown, resizing,, isDone] = useTableResize({
-    parentDOM: thRef?.current,
-    size: m?.size,
-    minMaxProps: {
-      minWidth: 30
-    }
-  });
-  const finalWidth = size?.width < headerTextWidth ? headerTextWidth : size?.width || 200;
-  useEffect(() => {
-    if (thRef?.current) {
-      const tw = (thRef?.current?.querySelectorAll(".dht-text")[0]?.getBoundingClientRect()?.width || 0) + 16 + 30;
-      setHeaderTextWidth(tw);
-    }
-  }, [thRef?.current, m?.label]);
-  useEffect(() => {
-    if (isDone) {
-      handleResize({
-        ...m,
-        size: size
-      });
-    }
-  }, [isDone]);
-  return /*#__PURE__*/_jsxs("th", {
-    style: {
-      minWidth: finalWidth,
-      maxWidth: finalWidth,
-      width: finalWidth
-    },
-    ref: thRef,
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        maxWidth: "100%",
-        overflow: "hidden"
-      },
-      children: /*#__PURE__*/_jsx(Button, {
-        className: "tv-act-btn la",
-        startIcon: /*#__PURE__*/_jsx(Icon, {
-          icon: iconType
-        }),
-        endIcon: /*#__PURE__*/_jsx(SortIcon, {
-          sortBy: isSort
-        }),
-        fullWidth: true,
-        onClick: onEditProperty(m),
-        children: /*#__PURE__*/_jsx("span", {
-          className: "dht-text",
-          children: m.label
-        })
-      })
-    }), /*#__PURE__*/_jsx(Resizer, {
-      classes: classes,
-      onMouseDown: onMouseDown,
-      height: tableRef?.current?.getBoundingClientRect()?.height,
-      resizing: resizing
-    })]
-  });
-};
 const TableView = props => {
   const {
     theme: appTheme
@@ -138,7 +48,6 @@ const TableView = props => {
   } = props;
   const theme = useTheme();
   const classes = useTableStyles(theme, appTheme);
-  const tableRef = useRef(null);
   const {
     properties,
     onAddProperty,
@@ -255,9 +164,6 @@ const TableView = props => {
     setMode({});
     setAnchorEl(null);
   };
-  const handleResize = data => {
-    onUpdateProperty(data);
-  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
@@ -267,7 +173,6 @@ const TableView = props => {
       children: /*#__PURE__*/_jsxs(Box, {
         component: "table",
         sx: classes.table,
-        ref: tableRef,
         children: [/*#__PURE__*/_jsx("thead", {
           children: /*#__PURE__*/_jsxs("tr", {
             children: [shownProperties?.map((m, i) => {
@@ -275,23 +180,26 @@ const TableView = props => {
                 Icon: iconType
               } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
               const isSort = sortBy?.key === m.key ? sortBy?.operator : null;
-              return /*#__PURE__*/_jsx(THead, {
-                iconType: iconType,
-                isSort: isSort,
-                onEditProperty: onEditProperty,
-                m: m,
-                classes: classes,
-                tableRef: tableRef,
-                handleResize: handleResize
+              return /*#__PURE__*/_jsx("th", {
+                style: {
+                  minWidth: "200px"
+                },
+                children: /*#__PURE__*/_jsx(Button, {
+                  className: "tv-act-btn la",
+                  startIcon: /*#__PURE__*/_jsx(Icon, {
+                    icon: iconType
+                  }),
+                  endIcon: /*#__PURE__*/_jsx(SortIcon, {
+                    sortBy: isSort
+                  }),
+                  fullWidth: true,
+                  onClick: onEditProperty(m),
+                  children: m.label
+                })
               }, i);
             }), !readOnly ? /*#__PURE__*/_jsxs(_Fragment, {
               children: [/*#__PURE__*/_jsx("th", {
                 className: "tv-act-btn ico",
-                style: {
-                  maxWidth: "80px",
-                  minWidth: "80px",
-                  width: "auto"
-                },
                 children: /*#__PURE__*/_jsx(Button, {
                   onClick: onAddClick,
                   fullWidth: true,
@@ -299,11 +207,6 @@ const TableView = props => {
                 })
               }), /*#__PURE__*/_jsx("th", {
                 className: "tv-act-btn ico",
-                style: {
-                  maxWidth: "80px",
-                  minWidth: "80px",
-                  width: "auto"
-                },
                 children: /*#__PURE__*/_jsx(Button, {
                   onClick: onSettings,
                   fullWidth: true,
@@ -323,18 +226,18 @@ const TableView = props => {
         textTransform: "none",
         justifyContent: "start",
         color: appTheme?.palette?.editor?.activeColor,
-        "& svg": {
-          width: "18px",
-          height: "18px",
+        '& svg': {
+          width: '18px',
+          height: '18px',
           strokeWidth: 1.2,
-          "& path": {
+          '& path': {
             stroke: appTheme?.palette?.editor?.activeColor
           }
         },
-        fontFamily: "inter"
+        fontFamily: 'inter'
       },
       startIcon: /*#__PURE__*/_jsx(Icon, {
-        icon: "addRounded"
+        icon: 'addRounded'
       }),
       children: "Add new row"
     }) : null, open && !readOnly ? /*#__PURE__*/_jsx(PropertySettings, {

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

@@ -58,17 +58,17 @@ const ViewData = props => {
       }
     },
     children: [rows?.map((row, i) => {
-      return /*#__PURE__*/_jsxs(Box, {
+      return /*#__PURE__*/_jsx(Box, {
         component: "tr",
         className: "tv-act-row",
-        children: [/*#__PURE__*/_jsx(RenderRow, {
+        children: /*#__PURE__*/_jsx(RenderRow, {
           rowIndex: row?.id,
           row: row,
           properties: properties,
           onSelect: onSelect,
           selected: selectedRows?.includes(row?.id),
           readOnly: readOnly
-        }), /*#__PURE__*/_jsx("td", {}), /*#__PURE__*/_jsx("td", {})]
+        })
       }, i);
     }), /*#__PURE__*/_jsx("tr", {
       style: {

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

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
-import { Transforms, Node } from "slate";
+import { Editor, Transforms, Node } from "slate";
 import { PROPERTY_DEFAULTS } from "../Layouts/Options/Constants";
 import multiSortRows from "../Utils/multiSortRows";
 import globalSearch from "../Utils/globalSearch";

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

@@ -11,7 +11,7 @@ const useDataViewStyles = (theme, appTheme) => ({
     },
     "& table th": {
       cursor: "pointer",
-      minWidth: "200px"
+      width: "200px"
     },
     "& table, th, td": {
       border: "1px solid black",
@@ -48,7 +48,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         "& .tv-ck-box": {
           "& svg": {
             color: appTheme?.palette?.editor?.tv_border,
-            "& rect": {
+            '& rect': {
               fill: appTheme?.palette?.editor?.tv_chk_box_fill,
               stroke: appTheme?.palette?.editor?.tv_chk_box_stroke
             }
@@ -56,9 +56,9 @@ const useDataViewStyles = (theme, appTheme) => ({
           "&.Mui-checked": {
             "& svg": {
               color: "rgba(37, 99, 235, 1)",
-              "& rect": {
+              '& rect': {
                 fill: appTheme?.palette?.editor?.activeColor,
-                stroke: "none"
+                stroke: 'none'
               }
             }
           }
@@ -94,7 +94,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
         boxShadow: "0px 4px 18px 0px #0000000D",
         borderRadius: "8px",
-        minWidth: "148px"
+        minWidth: '148px'
       },
       "& input": {
         paddingBottom: "0px",
@@ -140,12 +140,12 @@ const useDataViewStyles = (theme, appTheme) => ({
       width: "150px",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       borderRadius: "8px",
-      fontFamily: "Inter !important",
+      fontFamily: 'Inter !important',
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
       "& .MuiButtonBase-root": {
         fontSize: "14px",
-        padding: "6px 8px",
+        padding: '6px 8px',
         "& svg": {
           width: "16px",
           height: "16px",
@@ -157,7 +157,7 @@ const useDataViewStyles = (theme, appTheme) => ({
           color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
           "& svg": {
             color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
-            "& path": {
+            '& path': {
               stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
             }
           }