@flozy/editor 1.5.9 → 1.6.1

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

@@ -11,7 +11,7 @@ const appHeaderStyle = [{
   }, {
     label: "Title Font Size",
     key: "logoFontSize",
-    type: "text",
+    type: "fontSize",
     placeholder: "16px"
   }, {
     label: "Title Font Family",
@@ -23,11 +23,11 @@ const appHeaderStyle = [{
         style: {
           fontFamily: option.value
         },
-        children: option.text
+        children: "LOGO"
       });
     }
   }, {
-    label: "App Logo URL",
+    label: "Logo Image URL",
     key: "appLogo",
     type: "text"
   }, {
@@ -46,7 +46,7 @@ const appHeaderStyle = [{
   fields: [{
     label: "Menu Font Size",
     key: "fontSize",
-    type: "text",
+    type: "fontSize",
     placeholder: "16px"
   }, {
     label: "Menu Font Family",
@@ -58,7 +58,7 @@ const appHeaderStyle = [{
         style: {
           fontFamily: option.value
         },
-        children: option.text
+        children: "Home"
       });
     }
   }]

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

@@ -10,7 +10,7 @@ const buttonStyle = [{
   }, {
     label: "Font Size",
     key: "textSize",
-    type: "text",
+    type: "fontSize",
     placeholder: "16px or 1em"
   }, {
     label: "Font Family",

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

@@ -2,12 +2,25 @@ const embedImageStyle = [{
   tab: "URL",
   value: "url",
   fields: [{
+    label: "",
+    key: "url",
+    type: "text",
+    placeholder: "Add Image URL here"
+  }, {
     label: "File",
     key: "url",
     type: "backgroundImage"
+  }]
+}, {
+  tab: "Image List Settings",
+  value: "imageListSettings",
+  fields: [{
+    label: "Image List Columns",
+    key: "cols",
+    type: "text"
   }, {
-    label: "",
-    key: "url",
+    label: "Row Height",
+    key: "rowHeight",
     type: "text"
   }]
 }, {

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

@@ -6,5 +6,13 @@ const embedVideoStyle = [{
     key: "url",
     type: "text"
   }]
+}, {
+  tab: "Position",
+  value: "position",
+  fields: [{
+    label: "Set Postion (Vertical & Horizantal)",
+    key: "alignment",
+    type: "alignment"
+  }]
 }];
 export default embedVideoStyle;

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

@@ -21,7 +21,6 @@ const Alignment = props => {
     });
   };
   const flexDirection = value?.flexDirection || "row";
-  console.log(flexDirection);
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     style: {
@@ -127,11 +126,11 @@ const Alignment = props => {
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "row",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
+            label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "column",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
+            label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "row-reverse",
             control: /*#__PURE__*/_jsx(Radio, {}),

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

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
 import { Grid, Button, Typography } from "@mui/material";
-// import CloudUploadIcon from "@mui/icons-material/CloudUpload";
-import { convertBase64 } from "../../../utils/helper";
-import { uploadFile } from "../../../service/fileupload";
 import { UploadBtnIcon } from "../../iconslist";
+import ImageSelector from "../../ImageSelector/ImageSelector";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BackgroundImage = props => {
@@ -17,38 +15,29 @@ const BackgroundImage = props => {
     key
   } = data;
   const [base64, setBase64] = useState(value);
-  const [uploading, setUploading] = useState(false);
-  const handleChange = async e => {
-    const file = e.target.files[0];
-    const strImage = await convertBase64(file);
-    setBase64(strImage);
-    doUpload(strImage);
-  };
-  const doUpload = async strImage => {
-    setUploading(true);
-    const result = await uploadFile({
-      image: strImage
-    }, customProps);
-    setUploading(false);
-    if (result && result?.imageURL) {
-      onChange({
-        [key]: result?.imageURL
-      });
-    }
-  };
+  const [open, setOpen] = useState(false);
   const onRemoveBG = () => {
     setBase64(null);
     onChange({
       [key]: "none"
     });
   };
+  const handleClick = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const onSelectImage = img => {
+    setBase64(img);
+    onChange({
+      [key]: img
+    });
+    handleClose();
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    children: [/*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      children: uploading ? "Uploading..." : ""
-    }), /*#__PURE__*/_jsx(Typography, {
+    children: [/*#__PURE__*/_jsx(Typography, {
       variant: "body1",
       color: "primary",
       sx: {
@@ -87,14 +76,8 @@ const BackgroundImage = props => {
             style: {
               background: "none"
             },
-            children: [/*#__PURE__*/_jsx("input", {
-              type: "file",
-              style: {
-                opacity: 0,
-                width: "0px"
-              },
-              onChange: handleChange
-            }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+            onClick: handleClick,
+            children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
               style: {
                 paddingLeft: "8px"
               },
@@ -103,6 +86,11 @@ const BackgroundImage = props => {
           })
         })
       })
+    }), /*#__PURE__*/_jsx(ImageSelector, {
+      open: open,
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage
     })]
   });
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem, Typography } from "@mui/material";
+import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ButtonLink = props => {
@@ -27,12 +27,10 @@ const ButtonLink = props => {
     actionTrigger
   } = buttonLink || {};
   const {
-    options,
     onClick
   } = actionTrigger || {
     options: []
   };
-  const optSelected = options.filter(f => f.selected) || [];
   const handleChange = e => {
     onChange({
       [key]: {
@@ -61,22 +59,7 @@ const ButtonLink = props => {
         })
       });
     } else if (value?.linkType === "actionTrigger") {
-      return /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        children: /*#__PURE__*/_jsx(Select, {
-          name: "actionStep",
-          size: "small",
-          fullWidth: true,
-          value: optSelected[0]?.value || "",
-          children: optSelected.map(m => {
-            return /*#__PURE__*/_jsx(MenuItem, {
-              value: m.value,
-              children: m.label
-            }, `bl_tr_opt_${m.value}`);
-          })
-        })
-      });
+      return null;
     }
   };
   return /*#__PURE__*/_jsxs(Grid, {
@@ -110,7 +93,7 @@ const ButtonLink = props => {
               style: {
                 fontSize: "14px"
               },
-              children: "Action Trigger"
+              children: "Next Step"
             })
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "webAddress",

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { TextField, IconButton, Grid, Typography } from "@mui/material";
+import { sizeMap } from "../../../utils/font.js";
+import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const FontSize = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    let inc = parseInt(e.target.value) || 16;
+    inc = inc > 200 ? 200 : inc;
+    onChange({
+      [key]: inc
+    });
+  };
+  const getSizeVal = () => {
+    try {
+      const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      return parseInt(size || 16);
+    } catch (err) {
+      return "";
+    }
+  };
+  const combinedOldVal = getSizeVal();
+  const onIncreaseSize = () => {
+    let inc = (combinedOldVal || 0) + 1;
+    inc = inc > 200 ? 200 : inc;
+    onChange({
+      [key]: inc
+    });
+  };
+  const onDecreaseSize = () => {
+    onChange({
+      [key]: combinedOldVal - 1 || 0
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginBottom: "5px"
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: {
+          fontSize: "14px",
+          fontWeight: "500"
+        },
+        children: data?.label
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginBottom: "16px"
+      },
+      children: /*#__PURE__*/_jsx(TextField, {
+        value: combinedOldVal,
+        onChange: handleChange,
+        size: "small",
+        inputProps: {
+          style: {
+            width: "30px",
+            textAlign: "center"
+          }
+        },
+        InputProps: {
+          endAdornment: /*#__PURE__*/_jsxs("div", {
+            className: "textFontArrows",
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              onClick: onIncreaseSize,
+              size: "small",
+              children: /*#__PURE__*/_jsx(TextPlusIcon, {})
+            }), /*#__PURE__*/_jsx(IconButton, {
+              onClick: onDecreaseSize,
+              size: "small",
+              children: /*#__PURE__*/_jsx(TextMinusIcon, {})
+            })]
+          })
+        }
+      })
+    })]
+  });
+};
+export default FontSize;

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

@@ -50,6 +50,11 @@ const Icons = props => {
       setList(MUIIcons.filled.slice(0, 90));
     }
   };
+  const onRemoveIcon = () => {
+    onChange({
+      [key]: null
+    });
+  };
   const SelectedIcon = value ? fIcons[value] : null;
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
@@ -80,9 +85,16 @@ const Icons = props => {
           xs: 2,
           className: "selctedBtnIcon",
           style: {
-            paddingLeft: "8px"
+            padding: "4px"
           },
-          children: SelectedIcon && /*#__PURE__*/_jsx(SelectedIcon, {})
+          children: SelectedIcon ? /*#__PURE__*/_jsx(Tooltip, {
+            title: "Click to Remove",
+            arrow: true,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: onRemoveIcon,
+              children: /*#__PURE__*/_jsx(SelectedIcon, {})
+            })
+          }) : ""
         })]
       })
     }), /*#__PURE__*/_jsx(Grid, {

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

@@ -14,6 +14,7 @@ import TextAlign from "./textAlign";
 import TextOptions from "./textOptions";
 import SelectBox from "./selectBox";
 import Icons from "./icons";
+import FontSize from "./fontSize";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -30,6 +31,7 @@ const FieldMap = {
   textAlign: TextAlign,
   textOptions: TextOptions,
   selectBox: SelectBox,
-  icons: Icons
+  icons: Icons,
+  fontSize: FontSize
 };
 export default FieldMap;

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

@@ -43,7 +43,6 @@ const MenusArray = props => {
     });
   };
   const handleVariant = e => {
-    console.log(e.target.name);
     onChange({
       [e.target.name]: e.target.value
     });

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

@@ -7,7 +7,8 @@ const TextOptions = props => {
   const {
     value,
     data,
-    onChange
+    onChange,
+    elementProps
   } = props;
   const {
     key,
@@ -47,7 +48,7 @@ const TextOptions = props => {
       children: options.map(m => {
         return /*#__PURE__*/_jsx(MenuItem, {
           value: m.value,
-          children: renderOption ? renderOption(m) : m.label || m.text
+          children: renderOption ? renderOption(m, elementProps) : m.label || m.text
         }, `${key}_${m.value}`);
       })
     })]

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

@@ -123,7 +123,6 @@ const StyleBuilder = props => {
   };
   return /*#__PURE__*/_jsx(Drawer, {
     open: true,
-    fullWidth: true,
     className: ` dialogComp tools-drawer`,
     anchor: "right",
     hideBackdrop: true,

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

@@ -6,7 +6,7 @@ const tableStyle = [{
     key: "table.bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Cell Border",
     key: "table.borderColor",
     type: "color"
   }]
@@ -14,11 +14,11 @@ const tableStyle = [{
   tab: "Row",
   value: "rowSettings",
   fields: [{
-    label: "Background",
+    label: "Row Background",
     key: "row.bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Row Border",
     key: "row.borderColor",
     type: "color"
   }]
@@ -26,11 +26,15 @@ const tableStyle = [{
   tab: "Column",
   value: "columnSettings",
   fields: [{
-    label: "Background",
+    label: "Entire Column Background",
+    key: "col.entireBgColor",
+    type: "color"
+  }, {
+    label: "Selected Column Background",
     key: "col.bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Selected Cell Border Color",
     key: "col.borderColor",
     type: "color"
   }]

package/dist/Editor/common/ToolbarIcon.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Tooltip, IconButton } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ToolbarIcon = props => {
+  const {
+    title,
+    className,
+    onClick,
+    icon,
+    style,
+    icoBtnType
+  } = props;
+  const renderIconText = () => {
+    if (icoBtnType === "mini") {
+      return /*#__PURE__*/_jsx("span", {
+        children: title
+      });
+    } else if (icoBtnType === "cmd") {
+      return /*#__PURE__*/_jsx("span", {
+        children: title
+      });
+    }
+    return null;
+  };
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: title,
+    arrow: true,
+    children: /*#__PURE__*/_jsxs(IconButton, {
+      className: `${className} ${icoBtnType}`,
+      onClick: onClick,
+      style: style,
+      children: [icon, renderIconText()]
+    })
+  });
+};
+ToolbarIcon.defaultProps = {
+  title: "",
+  style: {},
+  className: "",
+  onClick: () => {}
+};
+export default ToolbarIcon;

package/dist/Editor/common/Uploader.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import { Grid, Button, Typography } from "@mui/material";
-import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import { Grid, Button } from "@mui/material";
 import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import { UploadBtnIcon } from "./iconslist";
@@ -11,25 +10,27 @@ const Uploader = props => {
     value,
     data,
     onUploaded,
-    customProps,
-    disableUpload = false
+    customProps
   } = props;
   const {
     key
   } = data;
-  const [base64, setBase64] = useState(value);
+  const [base64, setBase64] = useState(value?.url);
   const [uploading, setUploading] = useState(false);
   const handleChange = async e => {
-    const file = e.target.files[0];
-    const strImage = await convertBase64(file);
+    const uFile = e.target.files[0];
+    const strImage = await convertBase64(uFile);
     setBase64(strImage);
-    doUpload(strImage);
+    doUpload(strImage, e.target.files[0]);
   };
-  const doUpload = async strImage => {
+  const doUpload = async (strImage, file) => {
     setUploading(true);
-    const result = await uploadFile({
-      image: strImage
-    }, customProps);
+    const formData = new FormData();
+    // formData.set("image", strImage);
+    formData.set("file", file);
+    formData.set("resource_type", "pages");
+    formData.set("resource_id", customProps?.page_id);
+    const result = await uploadFile(formData, customProps);
     setUploading(false);
     if (result && result?.imageURL) {
       onUploaded({
@@ -52,18 +53,10 @@ const Uploader = props => {
       item: true,
       xs: 12,
       children: uploading ? "Uploading..." : ""
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: "body1",
-      color: "primary",
-      sx: {
-        fontSize: "14px",
-        fontWeight: "500",
-        marginBottom: "5px"
-      },
-      children: "Upload Image"
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
+      className: "btn--wrpr",
       style: {
         marginTop: "12px",
         width: "100%",
@@ -76,55 +69,36 @@ const Uploader = props => {
         backgroundColor: "rgba(0,0,0,0.5)",
         borderRadius: "10px"
       },
-      children: /*#__PURE__*/_jsx(Grid, {
+      children: !uploading ? /*#__PURE__*/_jsx(Grid, {
         className: "uploadImageSection",
         children: base64 ? /*#__PURE__*/_jsx(Grid, {
           className: "removeImageText",
           onClick: onRemoveBG,
           children: "REMOVE"
-        }) : /*#__PURE__*/_jsxs(Grid, {
+        }) : /*#__PURE__*/_jsx(Grid, {
           className: "uploadImageText",
-          onClick: handleChange,
-          children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsxs(Button, {
+            component: "label",
+            variant: "contained",
             style: {
-              paddingLeft: "8px"
+              background: "none"
             },
-            children: "UPLOAD"
-          })]
+            children: [/*#__PURE__*/_jsx("input", {
+              type: "file",
+              style: {
+                opacity: 0,
+                width: "0px"
+              },
+              onChange: handleChange
+            }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+              style: {
+                paddingLeft: "8px"
+              },
+              children: "UPLOAD"
+            })]
+          })
         })
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: {
-        paddingTop: "20px"
-      },
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        justifyContent: "space-between",
-        children: [!disableUpload ? /*#__PURE__*/_jsxs(Button, {
-          component: "label",
-          sx: {
-            display: "inline-flex",
-            width: "154px",
-            whiteSpace: "nowrap"
-          },
-          variant: "contained",
-          startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
-          children: ["Upload file", /*#__PURE__*/_jsx("input", {
-            type: "file",
-            style: {
-              opacity: 0
-            },
-            onChange: handleChange
-          })]
-        }) : null, base64 ? /*#__PURE__*/_jsx(Button, {
-          variant: "contained",
-          color: "secondary",
-          onClick: onRemoveBG,
-          children: "Clear"
-        }) : ""]
-      })
+      }) : null
     })]
   });
 };