@flozy/editor 5.1.5 → 5.1.7

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

@@ -5,13 +5,14 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Select, Typography } from "@mui/material";
+import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography } from "@mui/material";
 import { useState } from "react";
 import LinkSettingsStyles from "./style";
 import { getNavOptions } from "./navOptions";
 import { ScrollTopBottom, SelectPage, TextInput, Trigger } from "./NavComponents";
 import SwipeableDrawer from "../SwipeableDrawer";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import Select from "../Select";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

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

@@ -3,9 +3,155 @@ const usePopupStyles = theme => ({
     position: "absolute",
     zIndex: 1300,
     borderRadius: "10px",
-    padding: "0px",
     boxShadow: "0px 4px 10px 0px #00000029",
-    overflow: "hidden"
+    overflow: "hidden",
+    padding: "8px 0px !important",
+    background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+    "& .MuiPaper-root": {
+      background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      "& .MuiBox-root": {
+        "& .renderComp": {
+          padding: "2px 0px 2px 1px",
+          background: "transparent !important",
+          "&:hover": {
+            borderRadius: "10px",
+            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
+          }
+        },
+        "& button": {
+          padding: "0px 0px 0px 4px !important",
+          "& svg": {
+            width: "18px !important",
+            margin: "5px 12px 6px 6px !important"
+          },
+          "&:hover": {
+            borderRadius: "10px",
+            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
+          }
+        },
+        "& .active": {
+          border: "unset !important",
+          "& .MuiPaper-root": {
+            background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+            borderRadius: "7px",
+            "& .MuiBox-root": {
+              "& .MuiCardContent-root": {
+                "& .MuiTypography-root": {
+                  color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+                }
+              }
+            }
+          },
+          "& button": {
+            background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+            borderRadius: "7px",
+            "& svg": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+              }
+            },
+            "& span": {
+              "& .MuiTypography-root": {
+                color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .BrainIcon": {
+              "& .bainIconPathStroke": {
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
+                stroke: "unset !important"
+              },
+              "& .bainIconPathStroke2": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            }
+          },
+          "& .MuiCardMedia-root": {
+            "& .signatureElementIcon": {
+              "& path": {
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .commonSvgStyle": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .calederIconSvg": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              },
+              "& rect": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .colorBoxElementIcon": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
+                fill: "none"
+              }
+            },
+            "& .gridElementIcon": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .newLineElementIcon": {
+              "& path": {
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .blockQuoteSvg": {
+              fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+            },
+            "& .orderedListIcon": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              },
+              "& text": {
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .bulletedListTextIcon": {
+              "& path": {
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              },
+              "& circle": {
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .checkedListTextIcon": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .accordianListTextIcon": {
+              // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+              "& svg": {
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              },
+              "& path": {
+                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            },
+            "& .accordianIconSvgTextFormat": {
+              "& path": {
+                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+              }
+            }
+          }
+        },
+        "&:hover": {
+          "& .MuiPaper-root": {
+            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
+            borderRadius: "7px"
+          }
+        }
+      }
+    }
   },
   papper: {
     boxShadow: "none",
@@ -28,7 +174,7 @@ const usePopupStyles = theme => ({
     marginBottom: "10px",
     fontSize: "14px",
     fontWeight: "bold",
-    borderBottom: "1px solid #DCE4EC"
+    borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor}`
   },
   listItem: {
     cursor: "pointer",
@@ -59,12 +205,9 @@ const usePopupStyles = theme => ({
         justifyContent: "start",
         "& svg": {
           margin: "5.5px",
-          width: "19px",
+          width: "24px",
           height: "24px"
         },
-        '& .MuiTypography-root ': {
-          padding: '0px 0px 0px 7px'
-        },
         span: {
           padding: "8px",
           fontSize: "14px",
@@ -79,7 +222,8 @@ const usePopupStyles = theme => ({
     margin: "8px",
     display: "flex",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    color: "#64748B"
   }
 });
 export default usePopupStyles;

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({

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -1,10 +1,13 @@
 import React from "react";
 import { Transforms, Node } from "slate";
-import { Box } from "@mui/material";
+import { Accordion, AccordionDetails, AccordionSummary, Box, createTheme, ThemeProvider, Typography } from "@mui/material";
 import { StyleContent } from "../../../StyleBuilder";
-import formStyle from "../../../StyleBuilder/formStyle";
+import { formStyle } from "../../../StyleBuilder/formStyle";
 import { ReactEditor } from "slate-react";
+import { ExpandMoreOutlined } from "@mui/icons-material";
+import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormSettings = props => {
   const {
     editor,
@@ -14,7 +17,13 @@ const FormSettings = props => {
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
   const element = Node.get(editor, element_path);
-  const styleMaps = formStyle?.filter(f => !f?.hideOnFGS);
+  const styleMaps = formStyle;
+  const {
+    hideTools
+  } = customProps || {};
+  const {
+    theme
+  } = useEditorContext();
   const onChange = data => {
     const currentPath = ReactEditor.findPath(editor, element);
     const updateData = {
@@ -26,23 +35,110 @@ const FormSettings = props => {
     }, {
       at: [...currentPath, 0]
     });
+    // adding form field style to the current form node
+    const currentNode = Node.get(editor, element_path);
+    if (currentNode) {
+      currentNode?.children[0]?.children?.forEach((item, index) => {
+        Transforms.setNodes(editor, {
+          bgColor: data?.fieldBgColor ? data?.fieldBgColor : item?.bgColor,
+          borderColor: data?.fieldBorderColor ? data?.fieldBorderColor : item?.borderColor,
+          borderStyle: data?.fieldBorderStyle ? data?.fieldBorderStyle : item?.borderStyle,
+          borderWidth: data?.fieldBorderWidth ? data?.fieldBorderWidth : item?.borderWidth,
+          textColor: data?.fieldTextColor ? data?.fieldTextColor : item?.textColor,
+          fontFamily: data?.fieldFontFamily ? data?.fieldFontFamily : item?.fontFamily,
+          textSize: data?.fieldTextSize ? data?.fieldTextSize : item?.textSize,
+          fontWeight: data?.fieldFontWeight ? data?.fieldFontWeight : item?.fontWeight
+        }, {
+          at: [...currentPath, 0, index]
+        });
+      });
+    }
   };
   const handleClose = () => {
     console.log("close");
   };
+  const muiTheme = createTheme({
+    components: {
+      MuiAccordion: {
+        styleOverrides: {
+          root: {
+            background: theme?.palette?.editor?.miniToolBarBackground,
+            "& .MuiAccordionSummary-root": {
+              flexDirection: "row-reverse",
+              "& .MuiSvgIcon-root": {
+                color: theme?.palette?.primary?.main
+              },
+              "& .Mui-expanded": {
+                "& .MuiSvgIcon-root": {
+                  color: theme?.palette?.text?.blueText
+                }
+              }
+            },
+            padding: "0px",
+            "&.Mui-expanded": {
+              margin: "0"
+            }
+          }
+        },
+        defaultProps: {
+          elevation: 0
+        }
+      }
+    }
+  });
   return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "item-w",
     children: styleMaps?.map((m, i) => {
-      return /*#__PURE__*/_jsx(StyleContent, {
-        renderTabs: styleMaps,
-        value: m.value,
-        element: element,
-        customElement: element?.children?.[0] || null,
-        onChange: onChange,
-        customProps: customProps,
-        handleClose: handleClose
-      }, `tab_${m.value}_$${i}`);
+      if (m?.hasChildrenTabs) {
+        return /*#__PURE__*/_jsx(ThemeProvider, {
+          theme: muiTheme,
+          children: /*#__PURE__*/_jsxs(Accordion, {
+            defaultExpanded: true,
+            children: [/*#__PURE__*/_jsx(AccordionSummary, {
+              expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+              sx: {
+                padding: "0px"
+              },
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                className: "settingsHeader",
+                color: "primary",
+                style: {
+                  fontSize: "14px !important",
+                  fontWeight: "400"
+                },
+                children: m?.tab
+              })
+            }), /*#__PURE__*/_jsx(AccordionDetails, {
+              sx: {
+                padding: "5px"
+              },
+              children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
+                return /*#__PURE__*/_jsx(StyleContent, {
+                  renderTabs: [field],
+                  value: field.value,
+                  element: element,
+                  onChange: onChange,
+                  customElement: element?.children?.[0] || null,
+                  customProps: customProps,
+                  handleClose: handleClose
+                }, `tab_${field.value}_${index}`);
+              })
+            })]
+          }, `accordion_${i}`)
+        }, i);
+      } else {
+        return /*#__PURE__*/_jsx(StyleContent, {
+          renderTabs: styleMaps,
+          value: m.value,
+          element: element,
+          customElement: element?.children?.[0] || null,
+          onChange: onChange,
+          customProps: customProps,
+          handleClose: handleClose
+        }, `tab_${m.value}_$${i}`);
+      }
     })
   });
 };

package/dist/Editor/common/RnD/GuideLines/styles.js

@@ -22,7 +22,7 @@ const useGuideLineStyle = ({
       backgroundColor: "#FFF",
       pointerEvents: "none",
       zIndex: 1,
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         left: "calc(50% - 160px)"
       }
     },
@@ -35,13 +35,13 @@ const useGuideLineStyle = ({
       backgroundColor: "#FFF",
       pointerEvents: "none",
       zIndex: 1,
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         left: "calc(50% + 160px)"
       }
     },
     "& .white-wrapper": {
       overflowX: "hidden",
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         position: "absolute",
         width: "calc(50% - 162px)",
         height: "calc(100% - 2px)",

package/dist/Editor/common/RnD/ShadowElement.js

@@ -10,7 +10,7 @@ const useShadowElementStyles = ({
     position: "relative",
     backgroundColor: "rgba(0,0,0,0)",
     marginLeft: `calc((100% - 980px) * 0.5)`,
-    [theme.breakpoints.between("xs", "md")]: {
+    [theme?.breakpoints?.between("xs", "md")]: {
       marginLeft: `calc((100% - 320px) * 0.5)`
     }
   }

package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js

@@ -3,24 +3,35 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
 import useSwitchViewport from "./styles";
 import { useEffect } from "react";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange
+    onChange,
+    show
   } = props;
   const classes = useSwitchViewport();
+  const {
+    setSelectedElement,
+    setActiveBreakPoint
+  } = useEditorContext();
   useEffect(() => {
-    console.log(breakpoint);
+    // to reset selection on viewport changes - FS-6589
+    setSelectedElement({});
   }, [breakpoint]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.root,
+    style: {
+      display: show ? "block" : "none"
+    },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Desktop View",
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -30,6 +41,7 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${breakpoint === "xs" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("xs");
           onChange("xs");
         },
         children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})

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

@@ -0,0 +1,20 @@
+import { Select as Core } from "@mui/material";
+import SelectStyles from "./styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Select(props) {
+  const {
+    children,
+    ...rest
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = SelectStyles(theme);
+  return /*#__PURE__*/_jsx(Core, {
+    MenuProps: classes.MenuProps,
+    ...rest,
+    children: children
+  });
+}
+export default Select;

package/dist/Editor/common/Select/styles.js

@@ -0,0 +1,17 @@
+const SelectStyles = (theme = {}) => {
+  const {
+    textColor,
+    background
+  } = theme?.palette?.editor || {};
+  return {
+    MenuProps: {
+      PaperProps: {
+        sx: {
+          color: textColor,
+          background
+        }
+      }
+    }
+  };
+};
+export default SelectStyles;

package/dist/Editor/common/Shorthands/elements.js

@@ -13,6 +13,7 @@ import { insertDivider } from "../../utils/divider";
 import { insertFreeGrid } from "../../utils/freegrid";
 import { Transforms } from "slate";
 import { insertInfinityAI } from "../../utils/infinityAI";
+import { insertDataView } from "../../utils/dataView";
 import SearchButton from "../../Elements/Search/SearchButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{
@@ -158,7 +159,7 @@ const ELEMENTS_LIST = [{
   renderComponent: rest => /*#__PURE__*/_jsx(SearchButton, {
     ...rest,
     element: {
-      name: 'Brain'
+      name: "Brain"
     },
     icoBtnType: "cmd"
   })
@@ -262,6 +263,17 @@ const ELEMENTS_LIST = [{
   onInsert: editor => {
     insertInfinityAI(editor);
   }
+}, {
+  name: "Dynamic Table",
+  group: "Dynamic Table",
+  desc: "",
+  type: "dataView",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "dataView"
+  }),
+  onInsert: editor => {
+    insertDataView(editor);
+  }
 }];
 const elements = props => {
   const {

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -72,6 +72,11 @@ const BackgroundImage = props => {
             children: "REMOVE"
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
+            sx: {
+              padding: 0,
+              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -135,7 +135,8 @@ const BannerSpacing = props => {
                 value: pro_value?.top,
                 className: "borderInput removeScroll",
                 style: {
-                  ...squreStyle.topRight
+                  ...squreStyle.topRight,
+                  ...classes.customPaddingInput
                 },
                 onChange: handleChange,
                 placeholder: "0"
@@ -148,7 +149,8 @@ const BannerSpacing = props => {
                 value: pro_value?.right,
                 className: "borderInput removeScroll",
                 style: {
-                  ...squreStyle.bottomLeft
+                  ...squreStyle.bottomLeft,
+                  ...classes.customPaddingInput
                 },
                 onChange: handleChange,
                 placeholder: "0"
@@ -161,7 +163,8 @@ const BannerSpacing = props => {
                 value: pro_value?.bottom,
                 className: "borderInput removeScroll",
                 style: {
-                  ...squreStyle.bottomRight
+                  ...squreStyle.bottomRight,
+                  ...classes.customPaddingInput
                 },
                 onChange: handleChange,
                 placeholder: "0"
@@ -174,7 +177,8 @@ const BannerSpacing = props => {
                 value: pro_value?.left,
                 className: "borderInput removeScroll",
                 style: {
-                  ...squreStyle.topLeft
+                  ...squreStyle.topLeft,
+                  ...classes.customPaddingInput
                 },
                 onChange: handleChange,
                 placeholder: "0"

package/dist/Editor/common/StyleBuilder/fieldTypes/card.js

@@ -1,6 +1,7 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,7 +16,10 @@ const RenderCard = ({
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       position: 'relative',
-      padding: "10px"
+      padding: "10px",
+      '& .MuiCheckbox-root svg': {
+        fill: 'unset !important'
+      }
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
@@ -81,6 +85,9 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
+  const {
+    theme
+  } = useEditorContext();
   const activeCard = value === selectedCard;
   const handleChange = e => {
     if (selectedCard === data?.value) {
@@ -99,7 +106,8 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
+        background: theme?.palette?.editor?.miniToolBarBackground,
+        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

package/dist/Editor/common/StyleBuilder/fieldTypes/index.js

@@ -18,6 +18,7 @@ import FontSize from "./fontSize";
 import SelectSwitch from "./selectSwitch";
 import CardsMapping from "./card";
 import MetaDataMapping from "./metaDataMapping";
+import LineSpacing from "./lineSpacing";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -38,6 +39,7 @@ const FieldMap = {
   fontSize: FontSize,
   selectSwitch: SelectSwitch,
   card: CardsMapping,
-  metadatamapping: MetaDataMapping
+  metadatamapping: MetaDataMapping,
+  lineSpacing: LineSpacing
 };
 export default FieldMap;