@flozy/editor 5.1.5 → 5.1.6

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

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer } from "@mui/material";
+import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer, Accordion, AccordionSummary, AccordionDetails, createTheme } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { ThemeProvider } from "@mui/material/styles";
+import { ExpandMoreOutlined, 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";
@@ -73,6 +75,37 @@ const StyleBuilder = props => {
   } = 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);
@@ -140,22 +173,62 @@ const StyleBuilder = props => {
       }), /*#__PURE__*/_jsx(DialogContent, {
         sx: {
           maxHeight: isMobile ? `500px` : `${window.innerHeight - 125}px`,
-          padding: "8px"
+          padding: "0px"
         },
         children: renderTabs.map((m, i) => {
-          return /*#__PURE__*/_jsx(StyleContent, {
-            renderTabs: renderTabs,
-            value: m.value,
-            element: elementProps,
-            onChange: onElementPropsChange,
-            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(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}`);
+          }
         })
       }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {
         sx: {
           p: 0,
           pt: 2,
+          pl: 1,
           justifyContent: "space-between"
         },
         children: [onDelete ? /*#__PURE__*/_jsx(Button, {
@@ -180,7 +253,7 @@ const StyleBuilder = props => {
       style: {
         zIndex: "1300"
       },
-      sx: classes.bottomBarDrawer,
+      sx: classes.sideBarDrawer,
       children: renderDrawerMenu()
     }) : /*#__PURE__*/_jsx(Drawer, {
       open: true,

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

@@ -25,6 +25,10 @@ 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,35 +1,69 @@
-const tableStyle = [{
-  tab: "Table",
-  value: "tableSettings",
-  fields: [{
-    label: "Table Background",
-    key: "table.bgColor",
-    type: "color"
+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: "Cell Border",
-    key: "table.borderColor",
+    label: "Text Color",
+    key: "textColor",
     type: "color"
-  }]
-}, {
-  tab: "Row",
-  value: "rowSettings",
-  fields: [{
-    label: "Row Background",
-    key: "row.bgColor",
+  }, {
+    label: "Background",
+    key: "bgColor",
     type: "color"
   }, {
-    label: "Row Border",
-    key: "row.borderColor",
+    label: "Border",
+    key: "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: "Column",
+  tab: "Selected cell",
   value: "columnSettings",
   fields: [{
-    label: "Entire Column Background",
-    key: "col.entireBgColor",
-    type: "color"
-  }, {
     label: "Selected Cell Background",
     key: "col.bgColor",
     type: "color"
@@ -48,4 +82,14 @@ const tableStyle = [{
     placeholder: "Hide on Mobile"
   }]
 }];
-export default tableStyle;
+export default tableStyle;
+export const tableRowStyle = [{
+  tab: "Row",
+  value: "rowSettings",
+  fields: getCommonSettings("row")
+}];
+export const tableColumnStyle = [{
+  tab: "Column",
+  value: "columnSettings",
+  fields: getCommonSettings("col")
+}];

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

@@ -6,14 +6,25 @@ const Styles = theme => ({
     "& .MuiDrawer-paper": {
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+      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
+      }
     }
   },
   childContainer: {
     padding: "20px",
-    '&.emojiDrawer': {
-      padding: 'unset',
-      paddingTop: '10px'
+    "&.emojiDrawer": {
+      padding: "unset",
+      paddingTop: "10px"
     }
   }
 });

package/dist/Editor/common/Uploader.js

@@ -4,6 +4,7 @@ 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";
@@ -18,6 +19,9 @@ 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);
@@ -98,6 +102,10 @@ const Uploader = props => {
         className: "uploadImageSection",
         children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
           className: "uploadImageText",
+          sx: {
+            background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+            border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+          },
           children: /*#__PURE__*/_jsxs(Button, {
             component: "label",
             variant: "text",