@flozy/editor 5.4.0 → 5.4.1

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

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer, Accordion, AccordionSummary, AccordionDetails, createTheme } from "@mui/material";
+import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer } from "@mui/material";
 import FieldMap from "./fieldTypes";
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import CloseIcon from "@mui/icons-material/Close";
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { ThemeProvider } from "@mui/material/styles";
-import { ExpandMoreSharp } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -69,44 +67,12 @@ const StyleBuilder = props => {
   const isMobile = customProps?.isMobile || false;
   const [elementProps, setElementProps] = useState(element);
   const [tab] = useState(renderTabs[0]?.value);
-  const [saveDisable, setSaveDisable] = useState(false);
   const tabVal = renderTabs?.find(f => f.value === tab);
   const {
     needActions = true
   } = tabVal || {
     needActions: true
   };
-  const {
-    hideTools
-  } = customProps || {};
-  const muiTheme = createTheme({
-    components: {
-      MuiAccordion: {
-        styleOverrides: {
-          root: {
-            "& .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
-        }
-      }
-    }
-  });
   useEffect(() => {
     if (customProps?.onDrawerOpen) {
       customProps?.onDrawerOpen(true);
@@ -124,17 +90,12 @@ const StyleBuilder = props => {
       field_type: data?.element
     });
     if (data?.hasOwnProperty("name")) {
-      if (data?.name === '') {
-        setSaveDisable(true);
-      } else {
-        setSaveDisable(false);
-        setElementProps({
-          ...elementProps,
-          ...data,
-          key: data?.name,
-          label: data?.name
-        });
-      }
+      setElementProps({
+        ...elementProps,
+        ...data,
+        key: data?.name,
+        label: data?.name
+      });
     }
   };
   const handleSave = () => {
@@ -149,8 +110,7 @@ const StyleBuilder = props => {
       xs: 12,
       sx: {
         p: 2,
-        width: isMobile ? "100%" : "312px",
-        ...classes.pageSettingPopUpRoot
+        width: isMobile ? "100%" : "350px"
       },
       children: [/*#__PURE__*/_jsx(DialogTitle, {
         sx: {
@@ -173,69 +133,29 @@ const StyleBuilder = props => {
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: onClose,
               className: "close-popupbtn",
-              children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
             })
           })]
         })
       }), /*#__PURE__*/_jsx(DialogContent, {
         sx: {
           maxHeight: isMobile ? `500px` : `${window.innerHeight - 125}px`,
-          padding: "0px"
+          padding: "8px"
         },
         children: renderTabs.map((m, i) => {
-          if (m?.hasChildrenTabs) {
-            return /*#__PURE__*/_jsx(ThemeProvider, {
-              theme: muiTheme,
-              children: /*#__PURE__*/_jsxs(Accordion, {
-                defaultExpanded: true,
-                children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreSharp, {}),
-                  sx: {
-                    padding: "0px"
-                  },
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "body1",
-                    className: "settingsHeader",
-                    color: "primary",
-                    style: {
-                      fontSize: "14px !important",
-                      fontWeight: "400 !important"
-                    },
-                    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: elementProps,
-                      onChange: onElementPropsChange,
-                      customProps: customProps,
-                      handleClose: handleClose
-                    }, `tab_${field.value}_${index}`);
-                  })
-                })]
-              }, `accordion_${i}`)
-            }, i);
-          } else {
-            return /*#__PURE__*/_jsx(StyleContent, {
-              renderTabs: renderTabs,
-              value: m.value,
-              element: elementProps,
-              onChange: onElementPropsChange,
-              customProps: customProps,
-              handleClose: handleClose
-            }, `tab_${m.value}_$${i}`);
-          }
+          return /*#__PURE__*/_jsx(StyleContent, {
+            renderTabs: renderTabs,
+            value: m.value,
+            element: elementProps,
+            onChange: onElementPropsChange,
+            customProps: customProps,
+            handleClose: handleClose
+          }, `tab_${m.value}_$${i}`);
         })
       }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {
         sx: {
           p: 0,
           pt: 2,
-          pl: 1,
           justifyContent: "space-between"
         },
         children: [onDelete ? /*#__PURE__*/_jsx(Button, {
@@ -245,7 +165,6 @@ const StyleBuilder = props => {
           children: "Delete"
         }) : null, /*#__PURE__*/_jsx(Button, {
           onClick: handleSave,
-          disabled: saveDisable,
           className: "primaryBtn",
           children: "Save"
         })]
@@ -261,7 +180,7 @@ const StyleBuilder = props => {
       style: {
         zIndex: "1300"
       },
-      sx: classes.sideBarDrawer,
+      sx: classes.bottomBarDrawer,
       children: renderDrawerMenu()
     }) : /*#__PURE__*/_jsx(Drawer, {
       open: true,

package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js

@@ -25,10 +25,6 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
-  }, {
-    label: "Line Spacing",
-    key: "lineHeight",
-    type: "lineSpacing"
   }]
 }, {
   tab: "Max Width",

package/dist/Editor/common/StyleBuilder/tableStyle.js

@@ -1,69 +1,35 @@
-import { toolbarGroups } from "../../Toolbar/toolbarGroups";
-import { fontOptions } from "../../utils/font";
-import { capitalizeFirstLetter } from "../../utils/helper";
-import { jsx as _jsx } from "react/jsx-runtime";
-const allTools = toolbarGroups.flat();
-const fontWeight = allTools.find(f => f.format === "fontWeight");
-function getKey(prefix, key) {
-  const settingKey = prefix === "col" ? `entire${capitalizeFirstLetter(key)}` : key;
-  return `${prefix}.${settingKey}`;
-}
-function getCommonSettings(prefix) {
-  let settings = [{
-    label: "Font Family",
-    key: "fontFamily",
-    type: "textOptions",
-    webFont: true,
-    options: fontOptions,
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
-        children: option.text
-      });
-    }
-  }, {
-    label: "Font Weight",
-    key: "fontWeight",
-    type: "textOptions",
-    options: fontWeight?.options,
-    width: 7
-  }, {
-    label: "Font Size",
-    key: "textSize",
-    type: "fontSize",
-    width: 5,
-    placeholder: "16px or 1em"
-  }, {
-    label: "Text Color",
-    key: "textColor",
+const tableStyle = [{
+  tab: "Table",
+  value: "tableSettings",
+  fields: [{
+    label: "Table Background",
+    key: "table.bgColor",
     type: "color"
   }, {
-    label: "Background",
-    key: "bgColor",
+    label: "Cell Border",
+    key: "table.borderColor",
+    type: "color"
+  }]
+}, {
+  tab: "Row",
+  value: "rowSettings",
+  fields: [{
+    label: "Row Background",
+    key: "row.bgColor",
     type: "color"
   }, {
-    label: "Border",
-    key: "borderColor",
+    label: "Row Border",
+    key: "row.borderColor",
     type: "color"
-  }];
-
-  // modify keys based on setting type (prefix)
-  settings = settings.map(s => ({
-    ...s,
-    key: getKey(prefix, s.key)
-  }));
-  return settings;
-}
-const tableStyle = [{
-  tab: "Table",
-  value: "tableSettings",
-  fields: getCommonSettings("table")
+  }]
 }, {
-  tab: "Selected cell",
+  tab: "Column",
   value: "columnSettings",
   fields: [{
+    label: "Entire Column Background",
+    key: "col.entireBgColor",
+    type: "color"
+  }, {
     label: "Selected Cell Background",
     key: "col.bgColor",
     type: "color"
@@ -82,14 +48,4 @@ const tableStyle = [{
     placeholder: "Hide on Mobile"
   }]
 }];
-export default tableStyle;
-export const tableRowStyle = [{
-  tab: "Row",
-  value: "rowSettings",
-  fields: getCommonSettings("row")
-}];
-export const tableColumnStyle = [{
-  tab: "Column",
-  value: "columnSettings",
-  fields: getCommonSettings("col")
-}];
+export default tableStyle;

package/dist/Editor/common/SwipeableDrawer/style.js

@@ -6,25 +6,14 @@ const Styles = theme => ({
     "& .MuiDrawer-paper": {
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
-      "& .MuiInputBase-root": {
-        border: `1px solid ${theme?.palette?.editor?.textColor}`,
-        color: theme?.palette?.editor?.textColor
-      },
-      "& .MuiSvgIcon-root": {
-        color: theme?.palette?.editor?.textColor
-      },
-      "& .MuiFormLabel-root": {
-        color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
-      }
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     }
   },
   childContainer: {
     padding: "20px",
-    "&.emojiDrawer": {
-      padding: "unset",
-      paddingTop: "10px"
+    '&.emojiDrawer': {
+      padding: 'unset',
+      paddingTop: '10px'
     }
   }
 });

package/dist/Editor/common/ToolbarIcon.js

@@ -39,7 +39,7 @@ const ToolbarIcon = props => {
     title: title,
     arrow: true,
     children: /*#__PURE__*/_jsxs(IconButton, {
-      className: `${className} ${icoBtnType} accordionIcon`,
+      className: `${className} ${icoBtnType}`,
       onClick: onClick,
       style: style,
       children: [icon, renderIconText()]

package/dist/Editor/common/Uploader.js

@@ -4,7 +4,6 @@ import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
-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";
@@ -19,9 +18,6 @@ const Uploader = props => {
   const [base64, setBase64] = useState(value?.url);
   const [fileName, setFileName] = useState("");
   const [uploading, setUploading] = useState(false);
-  const {
-    theme
-  } = useEditorContext();
   const handleChange = async e => {
     const uFile = e.target.files[0];
     const strImage = await convertBase64(uFile);
@@ -83,57 +79,51 @@ const Uploader = props => {
         });
     }
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    sx: classes.uploadContainer,
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
       children: uploading ? "Uploading..." : ""
     }), /*#__PURE__*/_jsx(Grid, {
-      container: true,
-      sx: classes.uploadContainer,
-      children: /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        className: "btn--wrpr",
-        style: {
-          ...getBackground()
-        },
-        sx: classes.uploadField,
-        children: !uploading ? /*#__PURE__*/_jsx(Grid, {
-          className: "uploadImageSection",
-          children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
-            className: "uploadImageText",
-            sx: {
-              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+      item: true,
+      xs: 12,
+      className: "btn--wrpr",
+      style: {
+        ...getBackground()
+      },
+      sx: classes.uploadField,
+      children: !uploading ? /*#__PURE__*/_jsx(Grid, {
+        className: "uploadImageSection",
+        children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
+          className: "uploadImageText",
+          children: /*#__PURE__*/_jsxs(Button, {
+            component: "label",
+            variant: "text",
+            style: {
+              background: "none",
+              width: "100%"
             },
-            children: /*#__PURE__*/_jsxs(Button, {
-              component: "label",
-              variant: "text",
+            sx: classes.uploadIcon,
+            children: [/*#__PURE__*/_jsx("input", {
+              type: "file",
+              style: {
+                opacity: 0,
+                width: "0px"
+              },
+              onChange: handleChange
+            }), /*#__PURE__*/_jsx(Icon, {
+              icon: "fileUpload"
+            }), /*#__PURE__*/_jsxs("span", {
               style: {
-                background: "none",
-                width: "100%"
+                paddingLeft: "8px"
               },
-              sx: classes.uploadIcon,
-              children: [/*#__PURE__*/_jsx("input", {
-                type: "file",
-                style: {
-                  opacity: 0,
-                  width: "0px"
-                },
-                onChange: handleChange
-              }), /*#__PURE__*/_jsx(Icon, {
-                icon: "fileUpload"
-              }), /*#__PURE__*/_jsxs("span", {
-                style: {
-                  paddingLeft: "8px"
-                },
-                children: ["upload ", title || "image"]
-              })]
-            })
+              children: ["upload ", title || "image"]
+            })]
           })
-        }) : null
-      })
+        })
+      }) : null
     })]
   });
 };