@flozy/editor 5.3.6 → 5.3.7

package/dist/Editor/CommonEditor.js

@@ -26,7 +26,7 @@ import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
-import { getTRBLBreakPoints } from "./helper/theme";
+import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
 import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
@@ -139,7 +139,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     pageColor,
     color: pageTextColor,
     pageWidth,
-    maxWidth: pageMaxWidth
+    maxWidth: pageMaxWidth,
+    lineHeight
   } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
@@ -307,11 +308,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
-    if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
-      updateTopBanner(newValue, setTopBanner);
-      debounced(newValue);
-      if (!isInteracted) {
-        setIsInteracted(true);
+    if (!readOnly) {
+      if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
+        updateTopBanner(newValue, setTopBanner);
+        debounced(newValue);
+        if (!isInteracted) {
+          setIsInteracted(true);
+        }
       }
     }
   };
@@ -330,6 +333,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onDrawerOpen: onDrawerOpen,
     ICON_API: "https://assets.agenciflow.com"
   };
+  const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
       ...props,
@@ -532,6 +536,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         padding: {
                           ...getTRBLBreakPoints(bannerSpacing)
                         },
+                        lineHeight: lineH,
                         width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
                         height: viewport.h ? `${viewport.h}px` : `100%`,
                         alignSelf: "center",
@@ -589,8 +594,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
+                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })

package/dist/Editor/Editor.css

@@ -31,7 +31,7 @@ blockquote {
   border-left: 3px solid transparent;
   margin-left: 0;
   margin-right: 0;
-  padding-left: 10px;
+  /* padding-left: 10px; */
   margin: 0px;
 }
 
@@ -149,7 +149,7 @@ blockquote {
 .grid-item-toolbar button,
 .element-toolbar button,
 .element-toolbar a {
-  border-radius: 10px;
+  border-radius: 50%;
   border: 1px solid rgba(37, 99, 235, 0.32);
   background: #fff;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
@@ -225,9 +225,13 @@ blockquote {
   background-color: #0052cc;
   padding: 8px 12px;
   color: #ffffff;
-  font-weight: bold;
+  font-weight: 600;
+  font-size: 14px;
   opacity: 1;
   border-radius: 32px;
+  text-transform: math-auto;
+  height: 36px;
+  padding: 0px 12px;
 }
 
 .signature-btn-container button:hover {
@@ -358,6 +362,10 @@ blockquote {
   stroke: #2563eb;
 }
 
+.brushIcon:hover {
+  background: unset;
+}
+
 .react-datepicker__input-container {
   display: flex !important;
   align-items: center;
@@ -491,6 +499,14 @@ blockquote {
   text-transform: none;
 }
 
+.MuiButton-root.primaryBtn:disabled {
+  background: #eee !important;
+  box-shadow: none !important;
+  color: #ccc !important;
+  border: 1px solid #ccc !important;
+  cursor: not-allowed;
+}
+
 .MuiButton-root.primaryBtn.disabled,
 .MuiButton-root.secondaryBtn.disabled {
   background: #eee;
@@ -516,7 +532,7 @@ blockquote {
 }
 
 .deleteBtn {
-  background: #ffffff;
+  background: #d32f2f ;
   border: 1px solid #d32f2f !important;
   box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
   border-radius: 8px !important;
@@ -526,6 +542,7 @@ blockquote {
   margin-right: 15px !important;
   color: #d32f2f;
   width: auto !important;
+  text-transform: capitalize !important;
 }
 
 @media (max-width: 480px) {
@@ -663,7 +680,8 @@ blockquote {
 }
 
 .resize-br.img-resizer {
-  bottom: 8px;
+  bottom: 10px;
+  right: 5px;
 }
 
 .visible-on-hover {
@@ -1023,11 +1041,11 @@ blockquote {
   width: 200px;
   cursor: pointer;
   color: #464646;
-  background-color: #fff;
+  /* background-color: #fff; */
   padding: 4px 6px;
   border-radius: 12px;
   span {
-    text-transform: capitalize;
+    text-transform: math-auto;
   }
   @media only screen and (max-width: 599px) {
   background-color: unset;
@@ -1049,7 +1067,7 @@ blockquote {
 }
 
 .textFontArrows .MuiIconButton-root {
-  padding: 2px;
+  padding: 0px;
 }
 
 .tools-drawer .MuiTypography-root {
@@ -1236,6 +1254,19 @@ blockquote {
   pointer-events: auto;
 }
 
+@media (max-width: 899px) {
+  .MuiPopover-root {
+    z-index: 1302 !important;
+  }
+  canvas {
+    max-width: 100% !important;
+  }
+}
+
+.settingsHeader {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
 .hideScroll {
   overflow-anchor: none;
 }
@@ -1251,20 +1282,6 @@ blockquote {
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
 }
-@media (max-width: 899px) {
-  .MuiPopover-root {
-    z-index: 1302 !important;
-  }
-
-  canvas {
-    max-width: 100% !important;
-  }
-}
-
-.settingsHeader {
-  font-size: 14px !important;
-  font-weight: 500 !important;
-}
 
 .custom-scroll::-webkit-scrollbar {
   height: .6rem; 
@@ -1284,3 +1301,22 @@ blockquote {
   background: #A7AEC1; 
 }
 
+::selection {
+  color: inherit;
+  background: rgba(35, 131, 226, 0.35) !important;
+}
+
+::-moz-selection {
+  background: rgba(35, 131, 226, 0.35) !important;
+  color: inherit;
+}
+
+::-webkit-selection {
+  background: rgba(35, 131, 226, 0.35) !important;
+  color: inherit;
+}
+
+.gradientFillBtn {
+  background: linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important;
+  text-transform: math-auto !important;
+}

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -6,7 +6,8 @@ import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const accordionBtnStyleKeys = {
@@ -78,6 +79,10 @@ const Accordion = props => {
     textColor,
     bgColor
   } = element;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const onToggle = () => {
     setToggle(!toggle);
   };
@@ -97,6 +102,7 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
+          sx: classes.buttonMoreOption,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -105,6 +111,7 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onDelete,
+          sx: classes.buttonMoreOption2,
           children: /*#__PURE__*/_jsx(DeleteIcon, {})
         })
       })]

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -250,10 +250,10 @@ function AppHeader(props) {
               },
               sx: {
                 mr: 2,
-                [theme.breakpoints.up("sm")]: {
+                [theme?.breakpoints?.up("sm")]: {
                   display: "none"
                 },
-                [theme.breakpoints.between("xs", "md")]: {
+                [theme?.breakpoints.between("xs", "md")]: {
                   display: "block"
                 }
               },
@@ -272,10 +272,10 @@ function AppHeader(props) {
               },
               sx: {
                 flexGrow: 1,
-                [theme.breakpoints.up("sm")]: {
+                [theme?.breakpoints?.up("sm")]: {
                   display: "block"
                 },
-                [theme.breakpoints.between("xs", "md")]: {
+                [theme?.breakpoints?.between("xs", "md")]: {
                   display: "none"
                 },
                 "& img": {
@@ -293,10 +293,10 @@ function AppHeader(props) {
               }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                [theme.breakpoints.up("sm")]: {
+                [theme?.breakpoints?.up("sm")]: {
                   display: "block"
                 },
-                [theme.breakpoints.between("xs", "md")]: {
+                [theme?.breakpoints?.between("xs", "md")]: {
                   display: "none"
                 }
               },

package/dist/Editor/Elements/Button/EditorButton.js

@@ -11,6 +11,7 @@ import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -36,6 +37,7 @@ const EditorButton = props => {
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
   const [openMoreOptions, setOpenMoreOptions] = useState(false);
+  const classes = useCommonStyle(appTheme);
   const {
     label,
     bgColor,
@@ -136,6 +138,7 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("edit"),
+            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "pagesSettings"
             })
@@ -145,6 +148,7 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("nav"),
+            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "link"
             })
@@ -157,7 +161,9 @@ const EditorButton = props => {
               sx: {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
-                marginBottom: "0px !important"
+                marginBottom: "0px !important",
+                ...classes.buttonMoreOption,
+                ...classes.buttonMoreOption3
               },
               ...btnProps,
               children: /*#__PURE__*/_jsx(Icon, {
@@ -259,11 +265,12 @@ const EditorButton = props => {
             ...btnSp,
             borderStyle: borderStyle || "solid",
             color: `${textColor || "#FFFFFF"}`,
-            fontSize: textSize || "inherit",
+            fontSize: textSize || "12px",
             fontFamily: fontFamily || "PoppinsRegular",
             display: "inline-flex",
             alignItems: "center",
             position: "relative",
+            lineHeight: 1.43,
             "& .element-toolbar": {
               display: "none"
             },

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

@@ -109,11 +109,13 @@ const ColorButtons = props => {
     forMiniTool,
     openColorTool,
     onClose,
-    onColorPickerClick
+    onColorPickerClick,
+    defaultColors = []
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const firstRow = defaultColors?.length ? defaultColors : row1;
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -131,7 +133,7 @@ const ColorButtons = props => {
     sx: classes.colorButtons,
     children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
       className: "buttonsWrpr first",
-      children: [row1].map((m, i) => {
+      children: [firstRow].map((m, i) => {
         return /*#__PURE__*/_jsx(SingleColorButton, {
           id: `p1_${id}`,
           crs: m,

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

@@ -0,0 +1,124 @@
+import React from "react";
+import { Node, Path, Transforms } from "slate";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { Box, useTheme } from "@mui/material";
+import { DataViewProvider } from "./Providers/DataViewProvider";
+import useDataViewStyles from "./styles";
+import LayoutView from "./Layouts";
+import FilterView from "./Layouts/FilterView";
+import { insertLineBreakAtEndOfPath } from "../../utils/helper";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DataView = props => {
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const theme = useTheme();
+  const editor = useSlateStatic();
+  const {
+    attributes,
+    children,
+    element,
+    customProps
+  } = props;
+  const {
+    CHARACTERS,
+    readOnly
+  } = customProps || {};
+  const {
+    properties,
+    layouts,
+    rows,
+    title
+  } = element;
+  const classes = useDataViewStyles(theme, appTheme);
+  const path = ReactEditor.findPath(editor, element);
+  const users = CHARACTERS?.map(m => {
+    const name = [m?.first_name || "", m?.last_name || ""]?.join(" ").trim();
+    return {
+      value: m?.email,
+      name: name || m?.username || m?.email,
+      avatar: m?.avatar || null
+    };
+  });
+  const onDuplicate = () => {
+    try {
+      const newPath = ReactEditor.findPath(editor, element);
+      const dataViewNode = Node.get(editor, newPath);
+      const cloneNode = JSON.parse(JSON.stringify(dataViewNode));
+      const toPath = Path.next(Path.parent(newPath));
+      Transforms.insertNodes(editor, [{
+        type: "paragraph",
+        children: [{
+          ...cloneNode
+        }]
+      }], {
+        at: toPath
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onDelete = () => {
+    try {
+      const newPath = ReactEditor.findPath(editor, element);
+      Transforms.removeNodes(editor, {
+        at: newPath
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onEnter = () => {
+    try {
+      const newPath = ReactEditor.findPath(editor, element);
+      const toPath = Path.previous(Path.parent(newPath));
+      insertLineBreakAtEndOfPath(editor, toPath);
+    } catch (err) {
+      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, {
+      data: {
+        properties,
+        layouts,
+        rows
+      },
+      path: path,
+      editor: editor,
+      title: title,
+      users: users,
+      children: [/*#__PURE__*/_jsx(FilterView, {
+        classes: classes,
+        onEnter: onEnter,
+        onDelete: onDelete,
+        onDuplicate: onDuplicate,
+        readOnly: readOnly,
+        title: title,
+        onTitleChange: onTitleChange
+      }), /*#__PURE__*/_jsx(LayoutView, {
+        readOnly: readOnly,
+        children: children
+      })]
+    })
+  });
+};
+export default DataView;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { insertDataView } from "../../utils/dataView";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DataViewButton = props => {
+  const {
+    editor,
+    icoBtnType
+  } = props;
+  const onClick = () => {
+    insertDataView(editor);
+  };
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
+    title: "Dynamic Table",
+    onClick: onClick,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "dataView"
+    }),
+    icoBtnType: icoBtnType
+  });
+};
+export default DataViewButton;

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Checkbox, Popper, useTheme } from "@mui/material";
+import CheckBoxTwoToneIcon from "@mui/icons-material/CheckBoxTwoTone";
+import DataTypes from "./DataTypes";
+import useColumnStyles from "./colStyles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ColumnView = props => {
+  const theme = useTheme();
+  const {
+    needAnchor,
+    rowIndex,
+    row,
+    property,
+    onSelect,
+    selected,
+    readOnly
+  } = props;
+  const DataType = DataTypes[property?.type] || DataTypes["text"];
+  const anchorRef = useRef(null);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const classes = useColumnStyles(theme);
+  useEffect(() => {
+    if (anchorRef?.current) {
+      setAnchorEl(anchorRef?.current);
+    }
+  }, [anchorRef?.current]);
+  const handleSelect = id => e => {
+    onSelect(id, e.target.checked);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "td",
+    children: [needAnchor ? /*#__PURE__*/_jsx("span", {
+      ref: anchorRef,
+      style: {
+        position: "absolute",
+        width: "1px"
+      }
+    }) : null, /*#__PURE__*/_jsx(DataType, {
+      options: property?.options,
+      property: property?.key,
+      value: row[property?.key] || "",
+      rowIndex: rowIndex,
+      label: property?.label,
+      readOnly: readOnly
+    }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
+      sx: classes.root,
+      open: open,
+      anchorEl: anchorEl,
+      placement: "left",
+      className: `tv-tr-pop ${selected ? "active" : ""}`,
+      disablePortal: true,
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        onClick: handleSelect(row?.id),
+        size: "small",
+        className: "tv-ck-box",
+        sx: {
+          mr: 0
+        },
+        checked: selected,
+        checkedIcon: /*#__PURE__*/_jsx(CheckBoxTwoToneIcon, {})
+      })
+    }) : null]
+  });
+};
+export default ColumnView;

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Checkbox from "@mui/material/Checkbox";
+import Icon from "../../../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CheckType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const handleChange = e => {
+    onChange(rowIndex, {
+      [property]: e?.target?.checked
+    });
+  };
+  return /*#__PURE__*/_jsx(Checkbox, {
+    checked: value || false,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "checkListButton"
+    }),
+    checkedIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: "checkListButtonActive"
+    }),
+    onChange: handleChange,
+    disabled: readOnly
+  }, rowIndex);
+};
+export default CheckType;