@flozy/editor 6.0.3 → 6.0.5

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

@@ -1,15 +1,11 @@
 import React, { useState } from "react";
-import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
+import { Box, IconButton, Popover } 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) {
@@ -114,18 +110,12 @@ 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);
   };
@@ -138,7 +128,6 @@ const ColorButtons = props => {
   const handleSelect = color => () => {
     onSelect(color);
   };
-  const colorVars = theme?.vars?.colors || {};
   return /*#__PURE__*/_jsxs(Box, {
     component: "span",
     sx: classes.colorButtons,
@@ -155,7 +144,7 @@ const ColorButtons = props => {
           activeColor: activeColor
         }, `si_btn_row1_${m}_${i}`);
       })
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), /*#__PURE__*/_jsxs(Popover, {
       open: open || openColorTool,
       anchorEl: anchorEl || openColorTool,
       onClose: handleClose,
@@ -169,39 +158,9 @@ const ColorButtons = props => {
       },
       sx: classes.colorPopper,
       className: "colorPopper",
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
         sx: classes.colorButtonsInner,
-        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) => {
+        children: restRows.map((m, i) => {
           return /*#__PURE__*/_jsx(SingleColorButton, {
             id: `p2_${id}`,
             crs: m,
@@ -210,18 +169,14 @@ const ColorButtons = props => {
             classes: classes,
             activeColor: activeColor
           }, `si_btn_${m}_${i}`);
-        }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
-          onClick: onColorPickerClick,
-          style: {
-            alignSelf: "start",
-            margin: "6px"
-          },
-          children: /*#__PURE__*/_jsx("img", {
-            src: ColorPicker,
-            alt: "color wheel"
-          })
-        }) : null]
-      })
+        })
+      }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
+        onClick: onColorPickerClick,
+        children: /*#__PURE__*/_jsx("img", {
+          src: ColorPicker,
+          alt: "color wheel"
+        })
+      }) : null]
     })]
   });
 };

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

@@ -60,28 +60,4 @@
   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,6 +1,7 @@
 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";
@@ -8,7 +9,6 @@ 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(CustomColorPicker, {
+      children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: true,
-        onChange: handleFormSubmit,
-        color: activeColor
+        value: activeColor,
+        onChange: handleFormSubmit
       })
     })]
   });

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Node, Path, Transforms } from "slate";
-import { ReactEditor, useSlate } from "slate-react";
+import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, useTheme } from "@mui/material";
 import { DataViewProvider } from "./Providers/DataViewProvider";
 import useDataViewStyles from "./styles";
@@ -15,7 +15,7 @@ const DataView = props => {
     theme: appTheme
   } = useEditorContext();
   const theme = useTheme();
-  const editor = useSlate();
+  const editor = useSlateStatic();
   const {
     attributes,
     children,
@@ -113,8 +113,7 @@ const DataView = props => {
         onDuplicate: onDuplicate,
         readOnly: readOnly,
         title: title,
-        onTitleChange: onTitleChange,
-        path: path
+        onTitleChange: onTitleChange
       }), /*#__PURE__*/_jsx(LayoutView, {
         readOnly: readOnly,
         children: children

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { TextField } from "@mui/material";
 import { useDataView } from "../../Providers/DataViewProvider";
-import { focusDynamicTableInput } from "../../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NumberType = props => {
   const {
@@ -17,7 +16,6 @@ const NumberType = props => {
     onChange(rowIndex, {
       [property]: e?.target?.value
     });
-    focusDynamicTableInput(e);
   };
   return /*#__PURE__*/_jsx(TextField, {
     type: "number",
@@ -26,9 +24,7 @@ const NumberType = props => {
     value: value,
     size: "small",
     onChange: handleChange,
-    disabled: readOnly,
-    id: `tv-number-input-${rowIndex}-${property}` // * should be unique
+    disabled: readOnly
   });
 };
-
 export default NumberType;

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { TextField } from "@mui/material";
 import { useDataView } from "../../Providers/DataViewProvider";
-import { focusDynamicTableInput } from "../../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TextType = props => {
   const {
@@ -17,7 +16,6 @@ const TextType = props => {
     onChange(rowIndex, {
       [property]: e?.target?.value
     });
-    focusDynamicTableInput(e);
   };
   const formatValue = () => {
     if (typeof value === "string") {
@@ -32,9 +30,7 @@ const TextType = props => {
     value: formatValue(value),
     size: "small",
     onChange: handleChange,
-    disabled: readOnly,
-    id: `tv-text-input-${rowIndex}-${property}` // * should be unique
+    disabled: readOnly
   });
 };
-
 export default TextType;

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

@@ -5,7 +5,6 @@ import FilterSort from "./FilterSort";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import Icon from "../../../common/Icon";
 import { useEditorContext } from "../../../hooks/useMouseMove";
-import { focusDynamicTableInput } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FilterView = props => {
@@ -16,8 +15,7 @@ const FilterView = props => {
     onEnter,
     readOnly,
     title,
-    onTitleChange,
-    path
+    onTitleChange
   } = props;
   const {
     sort,
@@ -72,7 +70,6 @@ const FilterView = props => {
   };
   const handleTitleChange = e => {
     onTitleChange(e?.target?.value);
-    focusDynamicTableInput(e);
   };
   const handleEnter = e => {
     if (e?.key === "Enter") {
@@ -99,25 +96,24 @@ const FilterView = props => {
         },
         value: title,
         onChange: handleTitleChange,
-        onKeyUp: handleEnter,
-        id: `tv-title-input-${path.join("|")}`
+        onKeyUp: handleEnter
       }) : title || "Untitled"
     }), /*#__PURE__*/_jsxs(Box, {
       className: "tv-fi-wrpr",
       sx: {
-        alignItems: "center"
+        alignItems: 'center'
       },
       children: [/*#__PURE__*/_jsxs(Box, {
         className: `tv-sb mr ${toggle ? "open" : ""}`,
         sx: {
-          minHeight: "32px"
+          minHeight: '32px'
         },
         children: [/*#__PURE__*/_jsx(IconButton, {
           type: "button",
           sx: {
-            "& svg": {
-              width: "14px",
-              height: "14px"
+            '& svg': {
+              width: '14px',
+              height: '14px'
             }
           },
           "aria-label": "search",
@@ -141,12 +137,12 @@ const FilterView = props => {
         className: ` ${sort?.length > 0 ? "active" : ""}`,
         onClick: handleSortClick,
         sx: {
-          "& svg": {
+          '& svg': {
             strokeWidth: 1.2
           }
         },
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: "sortBy"
+          icon: 'sortBy'
         })
       }), /*#__PURE__*/_jsx(FilterSort, {
         open: open,
@@ -156,7 +152,7 @@ const FilterView = props => {
       }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
         className: "mr",
         sx: {
-          "& svg": {
+          '& svg': {
             fill: theme?.palette?.editor?.tv_stroke
           }
         },
@@ -166,7 +162,7 @@ const FilterView = props => {
         className: "mr",
         onClick: handleDeleteRow,
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: "trashIcon"
+          icon: 'trashIcon'
         })
       }) : null, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
         sx: classes.basicMenu,
@@ -189,24 +185,24 @@ const FilterView = props => {
           onClick: onMenuClick("Duplicate"),
           children: [" ", /*#__PURE__*/_jsx(Box, {
             sx: {
-              marginRight: "5px",
-              display: " flex",
-              alignItems: "center"
+              marginRight: '5px',
+              display: ' flex',
+              alignItems: 'center'
             },
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: "duplicateIcon"
+              icon: 'duplicateIcon'
             })
           }), "Duplicate"]
         }), /*#__PURE__*/_jsxs(MenuItem, {
           onClick: onMenuClick("Delete"),
           children: [" ", /*#__PURE__*/_jsx(Box, {
             sx: {
-              marginRight: "5px",
-              display: " flex",
-              alignItems: "center"
+              marginRight: '5px',
+              display: ' flex',
+              alignItems: 'center'
             },
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: "trashIcon"
+              icon: 'trashIcon'
             })
           }), "Delete"]
         })]

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/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 { LinkIcon } from "../../common/iconslist";
+import { GridSettingsIcon, 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/Form/Form.js

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

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

@@ -180,6 +180,20 @@ 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/styles.js

@@ -171,7 +171,6 @@ const useFreeGridStyles = ({
           height: "100%",
           "& .signature-container": {
             height: "100%",
-            LineHeight: 1.43,
             "& .signature-btn-container": {
               height: "100%",
               display: "flex",
@@ -338,9 +337,6 @@ const useFreeGridStyles = ({
           fontSize: "14px",
           borderRadius: "7px"
         }
-      },
-      "& .remove-resize-styles": {
-        transform: "none !important"
       }
     }
   },

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

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

package/dist/Editor/Elements/Link/Link.js

@@ -1,7 +1,7 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { Node, Transforms } from "slate";
-import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Popper, Tooltip } from "@mui/material";
+import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import EditIcon from "@mui/icons-material/Edit";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
@@ -11,62 +11,6 @@ import { getLinkType, handleLinkType } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Toolbar = props => {
-  const {
-    urlPath,
-    linkType,
-    showInNewTab,
-    selected,
-    linkRef,
-    onEditLink,
-    editor
-  } = props;
-  const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
-  const navType = getLinkType(linkType, urlPath);
-  const hideOpenLink = navType === "page" || !navType;
-  return selected ? /*#__PURE__*/_jsx(Popper, {
-    anchorEl: linkRef?.current,
-    open: true,
-    placement: "top-start",
-    className: "hide-popper-on-overlap",
-    contentEditable: false,
-    style: {
-      zIndex: 1
-    },
-    children: /*#__PURE__*/_jsxs(Box, {
-      className: "element-toolbar hr",
-      style: {
-        width: "150px",
-        display: "flex",
-        position: "unset"
-      },
-      component: "div",
-      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
-        title: "Open",
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "inline-flex",
-            color: "rgba(0, 0, 0, 0.54)"
-          },
-          ...btnProps,
-          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Edit",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onEditLink,
-          children: /*#__PURE__*/_jsx(EditIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Remove",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => removeLink(editor),
-          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
-        })
-      })]
-    })
-  }) : null;
-};
 const linkStyles = () => ({
   linkBtn: {
     border: "none",
@@ -96,6 +40,7 @@ const Link = props => {
   } = customProps;
   const editor = useSlateStatic();
   const selected = useSelected();
+  const focused = useFocused();
   const [showInput, setShowInput] = useState(false);
   const [linkData, setLinkData] = useState({
     name: "",
@@ -108,7 +53,6 @@ const Link = props => {
   const showInNewTab = element?.showInNewTab || element?.target;
   const linkType = element?.linkType;
   const classes = linkStyles();
-  const linkRef = useRef(null);
   const updateLink = data => {
     Transforms.setNodes(editor, data, {
       at: path
@@ -133,25 +77,54 @@ const Link = props => {
   const handleClose = () => {
     setShowInput(false);
   };
+  const Toolbar = () => {
+    const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
+    const navType = getLinkType(linkType, urlPath);
+    const hideOpenLink = navType === "page" || !navType;
+    return selected && focused ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar hr",
+      contentEditable: false,
+      style: {
+        width: "150px",
+        top: "100%",
+        left: "0px",
+        display: "flex"
+      },
+      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
+        title: "Open",
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "inline-flex",
+            color: "rgba(0, 0, 0, 0.54)"
+          },
+          ...btnProps,
+          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Edit",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onEditLink,
+          children: /*#__PURE__*/_jsx(EditIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Remove",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => removeLink(editor),
+          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
+        })
+      })]
+    }) : null;
+  };
   const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
-    ref: linkRef,
     children: [/*#__PURE__*/_jsx(Box, {
       ...attributes,
       ...element.attr,
       sx: classes.linkBtn,
       ...buttonProps,
       children: children
-    }), /*#__PURE__*/_jsx(Toolbar, {
-      urlPath: urlPath,
-      linkType: linkType,
-      showInNewTab: showInNewTab,
-      selected: selected,
-      linkRef: linkRef,
-      onEditLink: onEditLink,
-      editor: editor
-    }), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
+    }), /*#__PURE__*/_jsx(Toolbar, {}), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
       handleClose: handleClose,
       onSave: ({
         linkType,

package/dist/Editor/Elements/List/CheckList.js

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

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

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