@flozy/editor 7.0.9 → 8.0.1

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

@@ -1,11 +1,15 @@
 import React, { useState } from "react";
-import { Box, IconButton, Popover } from "@mui/material";
+import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
 import ColorPicker from "./colorPicker.svg";
+import { useSlateStatic } from "slate-react";
+import { Transforms } from "slate";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 let c = [];
 const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
   if (i % 7 === 0) {
@@ -110,12 +114,18 @@ const ColorButtons = props => {
     openColorTool,
     onClose,
     onColorPickerClick,
+    disableEditTheme,
     defaultColors = []
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const firstRow = defaultColors?.length ? defaultColors : row1;
+  const theme = useTheme();
+  const editor = useSlateStatic();
+  const {
+    setOpenTheme
+  } = useEditorContext();
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -128,6 +138,7 @@ const ColorButtons = props => {
   const handleSelect = color => () => {
     onSelect(color);
   };
+  const colorVars = theme?.vars?.colors || {};
   return /*#__PURE__*/_jsxs(Box, {
     component: "span",
     sx: classes.colorButtons,
@@ -144,7 +155,7 @@ const ColorButtons = props => {
           activeColor: activeColor
         }, `si_btn_row1_${m}_${i}`);
       })
-    }), /*#__PURE__*/_jsxs(Popover, {
+    }), /*#__PURE__*/_jsx(Popover, {
       open: open || openColorTool,
       anchorEl: anchorEl || openColorTool,
       onClose: handleClose,
@@ -158,9 +169,39 @@ const ColorButtons = props => {
       },
       sx: classes.colorPopper,
       className: "colorPopper",
-      children: [/*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsxs(Box, {
         sx: classes.colorButtonsInner,
-        children: restRows.map((m, i) => {
+        children: [Object.values(colorVars)?.length ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(Box, {
+            component: "div",
+            className: "singleColorTitleWrapper",
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "subtitle2",
+              children: "Theme colours"
+            }), disableEditTheme ? null : /*#__PURE__*/_jsx("div", {
+              className: "editBtn",
+              onClick: () => {
+                Transforms.deselect(editor, {
+                  at: editor.selection
+                });
+                setOpenTheme("editThemeColor");
+              },
+              children: "Edit"
+            })]
+          }), /*#__PURE__*/_jsx(SingleColorButton, {
+            crs: Object.values(colorVars),
+            handleSelect: handleSelect,
+            classes: classes,
+            activeColor: activeColor
+          })]
+        }) : null, /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          className: "singleColorTitleWrapper",
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle2",
+            children: "Custom colour"
+          })
+        }), restRows.map((m, i) => {
           return /*#__PURE__*/_jsx(SingleColorButton, {
             id: `p2_${id}`,
             crs: m,
@@ -169,14 +210,18 @@ const ColorButtons = props => {
             classes: classes,
             activeColor: activeColor
           }, `si_btn_${m}_${i}`);
-        })
-      }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
-        onClick: onColorPickerClick,
-        children: /*#__PURE__*/_jsx("img", {
-          src: ColorPicker,
-          alt: "color wheel"
-        })
-      }) : null]
+        }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
+          onClick: onColorPickerClick,
+          style: {
+            alignSelf: "start",
+            margin: "6px"
+          },
+          children: /*#__PURE__*/_jsx("img", {
+            src: ColorPicker,
+            alt: "color wheel"
+          })
+        }) : null]
+      })
     })]
   });
 };

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

@@ -60,4 +60,28 @@
   padding: 0 15px !important;
   width: 60px !important;
   flex-shrink: 0;
-}
+}
+
+
+.singleColorTitleWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  width: 100%;
+  border-bottom: 1px solid #DCE4EC;
+}
+
+.singleColorTitleWrapper .MuiTypography-root {
+  font-weight: 600;
+}
+
+.singleColorTitleWrapper .editBtn {
+  text-transform: none;
+  color: #2563EB;
+  text-decoration: underline;
+  padding: 0px;
+  min-width: unset;
+  cursor: pointer;
+  font-size: 14px;
+}

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

@@ -1,7 +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";
 import ColorButtons from "./ColorButtons";
@@ -9,6 +8,7 @@ import ColorPickerStyles from "./Styles";
 import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import CustomColorPicker from "../../common/CustomColorPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -95,10 +95,10 @@ const ColorPicker = props => {
         horizontal: "top"
       },
       sx: classes.colorPickerPopup,
-      children: /*#__PURE__*/_jsx(ColorPickerTool, {
+      children: /*#__PURE__*/_jsx(CustomColorPicker, {
         gradient: true,
-        value: activeColor,
-        onChange: handleFormSubmit
+        onChange: handleFormSubmit,
+        color: activeColor
       })
     })]
   });

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

@@ -21,7 +21,7 @@ const ColorPickerStyles = theme => ({
       border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
       borderRadius: "7px !important",
       padding: "0px 5px",
-      '@media only screen and (max-width: 600px)': {
+      "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     }

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

@@ -16,6 +16,7 @@ const useTableStyles = (theme, appTheme) => ({
       height: "40px"
     },
     "& th": {
+      position: "relative",
       "& svg": {
         "& .fillStroke": {
           stroke: appTheme?.palette?.editor?.tv_stroke
@@ -129,6 +130,20 @@ 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, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Box, Button, useTheme } from "@mui/material";
 import { useDataView } from "../Providers/DataViewProvider";
 import PropertySettings from "./Options";
@@ -7,37 +7,116 @@ 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 {
+    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
+    }
+  });
+  useEffect(() => {
+    if (isDone) {
+      handleResize({
+        ...m,
+        size: size
+      });
+    }
+  }, [isDone]);
+  return /*#__PURE__*/_jsxs("th", {
+    style: {
+      minWidth: size?.width || 200,
+      maxWidth: size?.width || 200,
+      width: size?.width || 200
+    },
+    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: m.label
+      })
+    }), /*#__PURE__*/_jsx(Resizer, {
+      classes: classes,
+      onMouseDown: onMouseDown,
+      height: tableRef?.current?.getBoundingClientRect()?.height,
+      resizing: resizing
+    })]
+  });
+};
 const TableView = props => {
   const {
     theme: appTheme
@@ -48,6 +127,7 @@ const TableView = props => {
   } = props;
   const theme = useTheme();
   const classes = useTableStyles(theme, appTheme);
+  const tableRef = useRef(null);
   const {
     properties,
     onAddProperty,
@@ -164,6 +244,9 @@ const TableView = props => {
     setMode({});
     setAnchorEl(null);
   };
+  const handleResize = data => {
+    onUpdateProperty(data);
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
@@ -173,6 +256,7 @@ 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) => {
@@ -180,26 +264,21 @@ 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("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
-                })
+              return /*#__PURE__*/_jsx(THead, {
+                iconType: iconType,
+                isSort: isSort,
+                onEditProperty: onEditProperty,
+                m: m,
+                classes: classes,
+                tableRef: tableRef,
+                handleResize: handleResize
               }, i);
             }), !readOnly ? /*#__PURE__*/_jsxs(_Fragment, {
               children: [/*#__PURE__*/_jsx("th", {
                 className: "tv-act-btn ico",
+                style: {
+                  widht: "autp"
+                },
                 children: /*#__PURE__*/_jsx(Button, {
                   onClick: onAddClick,
                   fullWidth: true,
@@ -207,6 +286,9 @@ const TableView = props => {
                 })
               }), /*#__PURE__*/_jsx("th", {
                 className: "tv-act-btn ico",
+                style: {
+                  widht: "autp"
+                },
                 children: /*#__PURE__*/_jsx(Button, {
                   onClick: onSettings,
                   fullWidth: true,
@@ -226,18 +308,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/Providers/DataViewProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
-import { Editor, Transforms, Node } from "slate";
+import { 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",
-      width: "200px"
+      minWidth: "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`
             }
           }

package/dist/Editor/Elements/Embed/Image.js

@@ -5,7 +5,7 @@ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
-import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
+import { LinkIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import Icon from "../../common/Icon";
@@ -32,7 +32,7 @@ const ToolBar = ({
       top: "-4px",
       left: topM ? "35px" : "0px",
       margin: "0px",
-      gap: '3px'
+      gap: "3px"
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Image Settings",

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

@@ -180,20 +180,6 @@ const FreeGrid = props => {
               linkType: "webAddress"
             },
             iconPosition: "start",
-            bgColor: "#2563EB",
-            textColor: "#FFF",
-            borderRadius: {
-              topLeft: 30,
-              topRight: 30,
-              bottomLeft: 30,
-              bottomRight: 30
-            },
-            bannerSpacing: {
-              left: 12,
-              top: 12,
-              right: 12,
-              bottom: 12
-            },
             textAlign: "center",
             label: "Get Started"
           }],

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

@@ -59,7 +59,8 @@ const FreeGridBox = props => {
     delete updateData.children;
     updateData = formatBreakpointValues(element.type, breakpoint, updateData);
     Transforms.setNodes(editor, {
-      ...updateData
+      ...updateData,
+      [`${breakpoint}_updatedOn`]: new Date().getTime()
     }, {
       at: path
     });

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

@@ -59,7 +59,8 @@ const FreeGridItem = props => {
     delete updateData.children;
     updateData = formatBreakpointValues(element.type, breakpoint, updateData);
     Transforms.setNodes(editor, {
-      ...updateData
+      ...updateData,
+      [`${breakpoint}_updatedOn`]: new Date().getTime()
     }, {
       at: path
     });

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

@@ -338,6 +338,9 @@ const useFreeGridStyles = ({
           fontSize: "14px",
           borderRadius: "7px"
         }
+      },
+      "& .remove-resize-styles": {
+        transform: "none !important"
       }
     }
   },

package/dist/Editor/Elements/Grid/GridItem.js

@@ -50,8 +50,7 @@ const GridItemToolbar = props => {
     open: true,
     placement: "top-end",
     sx: classes.popTools,
-    className: "gi-tool-pp",
-    disablePortal: true,
+    className: "gi-tool-pp hide-popper-on-overlap",
     contentEditable: false,
     children: /*#__PURE__*/_jsxs(Box, {
       className: "ico-grp-ss",
@@ -288,7 +287,7 @@ const GridItem = props => {
       ...getBRProps,
       display: "flex",
       flexDirection: flexDirection || "column",
-      background: bgColor || "transparent",
+      background: bgColor,
       borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
       borderStyle: borderStyle || "solid",