@flozy/editor 1.5.8 → 1.6.0

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",
@@ -121,16 +121,16 @@ const buttonStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text",
+    label: "Text Color",
     key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Background",
+    label: "Background Color",
     key: "bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Border Color",
     key: "borderColor",
     type: "color"
   }]
@@ -138,16 +138,16 @@ const buttonStyle = [{
   tab: "Hover Colors",
   value: "hoverColors",
   fields: [{
-    label: "Text",
+    label: "Hover Text Color",
     key: "textColorHover",
     type: "color",
     needPreview: true
   }, {
-    label: "Background",
+    label: "Hover Background Color",
     key: "bgColorHover",
     type: "color"
   }, {
-    label: "Border",
+    label: "Hover Border Color",
     key: "borderColorHover",
     type: "color"
   }]

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

@@ -42,16 +42,16 @@ const chipTextStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text",
+    label: "Text Color",
     key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Background",
+    label: "Background Color",
     key: "bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Border Color",
     key: "borderColor",
     type: "color"
   }]

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"
   }]
 }, {
@@ -38,16 +51,16 @@ const embedImageStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text",
+    label: "Text Color",
     key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Background",
+    label: "Background Color",
     key: "bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Border Color",
     key: "borderColor",
     type: "color"
   }]

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/fieldStyle.js

@@ -69,16 +69,16 @@ const fieldStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text",
+    label: "Text Color",
     key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Background",
+    label: "Background Color",
     key: "bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Border Color",
     key: "borderColor",
     type: "color"
   }]

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,10 @@
-import React, { useState } from "react";
+import React, { useEffect, 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 QuiltedImageList from "../../ImageList";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BackgroundImage = props => {
@@ -11,13 +12,30 @@ const BackgroundImage = props => {
     value,
     data,
     customProps,
+    elementProps,
     onChange
   } = props;
+  const {
+    services
+  } = customProps;
   const {
     key
   } = data;
+  const {
+    images
+  } = elementProps;
   const [base64, setBase64] = useState(value);
   const [uploading, setUploading] = useState(false);
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    getItems();
+  }, []);
+  const getItems = async () => {
+    if (services) {
+      let result = await services("getAssets", {});
+      setItems(result);
+    }
+  };
   const handleChange = async e => {
     const file = e.target.files[0];
     const strImage = await convertBase64(file);
@@ -42,6 +60,16 @@ const BackgroundImage = props => {
       [key]: "none"
     });
   };
+  const onSelectChange = (img, status) => {
+    const uImages = !status ? [...images]?.filter(f => f.img !== img) : [...images, {
+      img
+    }];
+    onChange({
+      images: uImages,
+      url: uImages.length === 1 ? uImages[0].img : "",
+      alt: ""
+    });
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     children: [/*#__PURE__*/_jsx(Grid, {
@@ -103,6 +131,18 @@ const BackgroundImage = props => {
           })
         })
       })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginBottom: "12px"
+      },
+      children: /*#__PURE__*/_jsx(QuiltedImageList, {
+        itemData: [...items],
+        cols: 2,
+        selected: images,
+        onSelectChange: onSelectChange
+      })
     })]
   });
 };

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/formButtonStyle.js

@@ -72,16 +72,16 @@ const formButtonStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text",
+    label: "Text Color",
     key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Background",
+    label: "Background Color",
     key: "bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Border Color",
     key: "borderColor",
     type: "color"
   }]

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

@@ -96,16 +96,16 @@ const formStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text",
+    label: "Text Color",
     key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Background",
+    label: "Background Color",
     key: "bgColor",
     type: "color"
   }, {
-    label: "Border",
+    label: "Border Color",
     key: "borderColor",
     type: "color"
   }]

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

@@ -22,7 +22,7 @@ const pageSettingsStyle = [{
   tab: "Spacing",
   value: "spacing",
   fields: [{
-    label: "bannerSpacing",
+    label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]

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,13 +10,12 @@ 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];
@@ -52,18 +50,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 +66,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
     })]
   });
 };

package/dist/Editor/common/iconslist.js

@@ -1381,4 +1381,29 @@ export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   })]
-});
+});
+export const FormIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "22",
+    height: "22",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M17.6211 9.61914H12.3711C11.9611 9.61914 11.6211 9.27914 11.6211 8.86914C11.6211 8.45914 11.9611 8.11914 12.3711 8.11914H17.6211C18.0311 8.11914 18.3711 8.45914 18.3711 8.86914C18.3711 9.27914 18.0411 9.61914 17.6211 9.61914Z",
+      fill: "#64748B"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7.11859 10.3803C6.92859 10.3803 6.73859 10.3103 6.58859 10.1603L5.83859 9.41031C5.54859 9.12031 5.54859 8.64031 5.83859 8.35031C6.12859 8.06031 6.60859 8.06031 6.89859 8.35031L7.11859 8.57031L8.83859 6.85031C9.12859 6.56031 9.60859 6.56031 9.89859 6.85031C10.1886 7.14031 10.1886 7.62031 9.89859 7.91031L7.64859 10.1603C7.50859 10.3003 7.31859 10.3803 7.11859 10.3803Z",
+      fill: "#64748B"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M17.6211 16.6191H12.3711C11.9611 16.6191 11.6211 16.2791 11.6211 15.8691C11.6211 15.4591 11.9611 15.1191 12.3711 15.1191H17.6211C18.0311 15.1191 18.3711 15.4591 18.3711 15.8691C18.3711 16.2791 18.0411 16.6191 17.6211 16.6191Z",
+      fill: "#64748B"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7.11859 17.3803C6.92859 17.3803 6.73859 17.3103 6.58859 17.1603L5.83859 16.4103C5.54859 16.1203 5.54859 15.6403 5.83859 15.3503C6.12859 15.0603 6.60859 15.0603 6.89859 15.3503L7.11859 15.5703L8.83859 13.8503C9.12859 13.5603 9.60859 13.5603 9.89859 13.8503C10.1886 14.1403 10.1886 14.6203 9.89859 14.9103L7.64859 17.1603C7.50859 17.3003 7.31859 17.3803 7.11859 17.3803Z",
+      fill: "#64748B"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z",
+      fill: "#64748B"
+    })]
+  });
+};

package/dist/Editor/helper/index.js

@@ -15,7 +15,6 @@ export function customCollisionDetectionAlgorithm(args) {
 
   // Collision detection algorithms return an array of collisions
   if (pointerCollisions.length >= 0 && rectIntersection(args)) {
-    console.log(rectIntersection(args));
     return rectIntersection(args);
   }
 

package/dist/Editor/hooks/useDrag.js

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-const useDrag = props => {
+import { useEffect, useState } from "react";
+const useDrag = () => {
   const [event, setEvent] = useState("");
   useEffect(() => {
     addListener();

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -393,6 +393,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,
         ...attributes,
+        className: "simple-text",
         children: children
       });
   }

package/dist/Editor/utils/button.js

@@ -7,7 +7,8 @@ export const insertButton = editor => {
     }],
     buttonLink: {
       linkType: "webAddress"
-    }
+    },
+    iconPosition: "start"
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);