@flozy/editor 4.0.0 → 4.0.2

package/dist/Editor/common/ImageList.js

@@ -45,16 +45,29 @@ const QuiltedImageList = props => {
     }, `img_upload_btn`) : null, (itemData || []).map(item => {
       const isSelected = (selected || []).find(f => f.img === item.img);
       return /*#__PURE__*/_jsxs(ImageListItem, {
+        // cols={item.cols || 1}
+        // rows={item.rows || 1}
+        sx: {
+          padding: "2px",
+          overflow: "hidden"
+          // position: "relative",
+        },
         children: [/*#__PURE__*/_jsx("img", {
           ...srcset(item.img, rowHeight || 121, item.rows, item.cols),
           alt: item.title,
-          loading: "lazy"
+          loading: "lazy",
+          style: {
+            width: "100%",
+            height: "145px",
+            borderRadius: "12px"
+            // display: "block",
+          }
         }), !readOnly ? /*#__PURE__*/_jsx(ImageListItemBar, {
           sx: {
             background: "none"
           },
-          position: "bottom",
-          actionPosition: "left",
+          position: "start",
+          actionPosition: "right",
           actionIcon: /*#__PURE__*/_jsx(IconButton, {
             onClick: onImageSelect(item, !isSelected),
             children: /*#__PURE__*/_jsx(CheckCircleIcon, {

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
-import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider } from "@mui/material";
+import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider, Box, IconButton } from "@mui/material";
 import Upload from "./Options/Upload";
 import ChooseAssets from "./Options/ChooseAssets";
 import AddLink from "./Options/AddLink";
 import Icon from "../Icon";
 import ImageSelectorStyles from "./Styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { CloseIconImageUpload, ImageElementIcon } from "../iconListV2";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -52,11 +53,28 @@ const ImageSelector = props => {
     fullWidth: true,
     sx: classes.dialogWrapper,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
-      children: /*#__PURE__*/_jsxs(Typography, {
-        sx: classes.titleTypo,
-        children: ["Add ", title]
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          sx: classes.titleTypo,
+          children: ["Add ", title]
+        }), /*#__PURE__*/_jsx(IconButton, {
+          sx: {
+            padding: "0px"
+          },
+          onClick: onClose,
+          children: /*#__PURE__*/_jsx(CloseIconImageUpload, {})
+        })]
       })
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
+    }), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        boxShadow: "0px 4px 8px 0px #0000000A"
+      }
+    }), /*#__PURE__*/_jsx(DialogContent, {
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
         children: [TAB_SHOW[title].length > 1 && /*#__PURE__*/_jsx(Grid, {
@@ -84,9 +102,7 @@ const ImageSelector = props => {
             }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
-              icon: /*#__PURE__*/_jsx(Icon, {
-                icon: "media"
-              }),
+              icon: /*#__PURE__*/_jsx(ImageElementIcon, {}),
               iconPosition: "start",
               value: "choose",
               label: `Choose ${title}`
@@ -115,7 +131,12 @@ const ImageSelector = props => {
           })
         })]
       })
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(DialogActions, {
+    }), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        boxShadow: "0px -4px 8px 0px #0000000A",
+        borderBottomWidth: "0px"
+      }
+    }), /*#__PURE__*/_jsxs(DialogActions, {
       sx: {
         p: 2
       },

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

@@ -86,7 +86,8 @@ const ImageSelectorStyles = theme => ({
   titleTypo: {
     fontSize: "16px",
     fontWeight: 500,
-    color: theme?.palette?.editor?.textColor
+    color: theme?.palette?.editor?.textColor,
+    fontFamily: 'Inter, sans-serif'
   },
   addLinkField: {
     "& .MuiOutlinedInput-input": {

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

@@ -58,7 +58,7 @@ const usePopupStyles = theme => ({
         borderRadius: "0px",
         justifyContent: "start",
         "& svg": {
-          margin: "8px",
+          margin: "5.5px",
           width: "24px",
           height: "24px"
         },

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

@@ -179,15 +179,6 @@ const ELEMENTS_LIST = [{
     icon: "calenderNewIcon"
   }),
   onInsert: editor => insertDefaultEmbed(editor, "calendly", "")
-}, {
-  name: "Emoji",
-  group: "Elements",
-  desc: "",
-  type: "emoji",
-  renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
-    ...rest,
-    icoBtnType: "cmd"
-  })
 }, {
   name: "Table",
   group: "Elements",
@@ -200,6 +191,15 @@ const ELEMENTS_LIST = [{
     const table = new TableUtil(editor);
     table.insertTable(3, 3);
   }
+}, {
+  name: "Emoji",
+  group: "Elements",
+  desc: "",
+  type: "emoji",
+  renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
+    ...rest,
+    icoBtnType: "cmd"
+  })
 }, {
   name: "Divider",
   group: "Elements",

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
-import { getBreakPointsValue } from "../../../helper/theme";
+import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { useEditorTheme } from "../../../hooks/useEditorTheme";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -88,10 +88,12 @@ const BannerSpacing = props => {
         component: "input",
         sx: classes.sapcingInput,
         name: "top",
-        value: !lockSpacing ? "" : value?.top || 0,
-        className: "sliderInput",
+        value: !lockSpacing ? "" : getCustomizationValue(value?.top),
+        className: "sliderInput removeScroll",
         disabled: !lockSpacing,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -133,50 +135,54 @@ const BannerSpacing = props => {
             children: [/*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxTop",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "top",
-                value: value?.top,
-                className: "borderInput",
+                value: getCustomizationValue(value?.top),
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.topRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxRight",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "right",
-                value: value?.right,
-                className: "borderInput",
+                value: getCustomizationValue(value?.right),
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxBottom",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "bottom",
-                value: value?.bottom,
-                className: "borderInput",
+                value: getCustomizationValue(value?.bottom),
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxLeft",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "left",
-                className: "borderInput",
-                value: value?.left,
+                className: "borderInput removeScroll",
+                value: getCustomizationValue(value?.left),
                 style: {
                   ...squreStyle.topLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             })]
           })

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

@@ -2,8 +2,8 @@ import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { getBreakPointsValue } from "../../../helper/theme";
 import { useEditorTheme } from "../../../hooks/useEditorTheme";
+import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -88,11 +88,13 @@ const BorderRadius = props => {
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
-        value: !lockRadius ? "" : value?.topLeft || 0,
-        className: "sliderInput",
+        value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
+        className: "sliderInput removeScroll",
         name: "topLeft",
         disabled: !lockRadius,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -133,10 +135,10 @@ const BorderRadius = props => {
             borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
           children: [/*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topLeft",
-            value: value?.topLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topLeft,
@@ -144,10 +146,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topRight",
-            value: value?.topRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topRight,
@@ -156,10 +158,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomLeft",
-            value: value?.bottomLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomLeft,
@@ -168,10 +170,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomRight",
-            value: value?.bottomRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomRight,