@flozy/editor 5.3.3 → 5.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. package/dist/Editor/Editor.css +22 -7
  2. package/dist/Editor/Elements/Accordion/Accordion.js +8 -1
  3. package/dist/Editor/Elements/Button/EditorButton.js +2 -1
  4. package/dist/Editor/Elements/Divider/Divider.js +24 -9
  5. package/dist/Editor/Elements/Embed/Image.js +31 -12
  6. package/dist/Editor/Elements/Embed/Video.js +13 -2
  7. package/dist/Editor/Elements/Grid/GridItem.js +2 -0
  8. package/dist/Editor/Elements/Grid/Styles.js +44 -0
  9. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -0
  10. package/dist/Editor/Elements/Signature/SignaturePopup.js +4 -4
  11. package/dist/Editor/Styles/EditorStyles.js +3 -1
  12. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +17 -1
  13. package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -3
  14. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +200 -72
  15. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -8
  16. package/dist/Editor/assets/svg/SettingsIcon.js +4 -4
  17. package/dist/Editor/common/ColorPickerButton.js +5 -3
  18. package/dist/Editor/common/DnD/Draggable.js +2 -1
  19. package/dist/Editor/common/ImageSelector/Options/Upload.js +2 -1
  20. package/dist/Editor/common/ImageSelector/Styles.js +47 -6
  21. package/dist/Editor/common/ImageSelector/UploadStyles.js +18 -6
  22. package/dist/Editor/common/MentionsPopup/Styles.js +108 -118
  23. package/dist/Editor/common/Section/index.js +3 -3
  24. package/dist/Editor/common/Section/styles.js +5 -1
  25. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +4 -3
  26. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +27 -3
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -2
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +2 -1
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +1 -1
  30. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +2 -0
  31. package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +4 -4
  32. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +22 -6
  33. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +21 -2
  34. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -0
  35. package/dist/Editor/common/StyleBuilder/index.js +5 -4
  36. package/dist/Editor/common/ToolbarIcon.js +2 -1
  37. package/dist/Editor/common/Uploader.js +42 -40
  38. package/dist/Editor/common/iconListV2.js +295 -77
  39. package/dist/Editor/commonStyle.js +281 -4
  40. package/dist/Editor/plugins/withCustomDeleteBackward.js +33 -2
  41. package/dist/Editor/plugins/withLayout.js +0 -41
  42. package/dist/Editor/utils/helper.js +6 -1
  43. package/package.json +2 -2
@@ -3,6 +3,8 @@ import { Grid, Button, Typography, Select, MenuItem, TextField } from "@mui/mate
3
3
  import CloudUploadIcon from "@mui/icons-material/CloudUpload";
4
4
  import { convertBase64 } from "../../../utils/helper";
5
5
  import { uploadFile } from "../../../service/fileupload";
6
+ import { useEditorContext } from "../../../hooks/useMouseMove";
7
+ import useCommonStyle from "../../../commonStyle";
6
8
  import { jsx as _jsx } from "react/jsx-runtime";
7
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
10
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -30,6 +32,10 @@ const SaveAsTemplate = props => {
30
32
  });
31
33
  const [base64, setBase64] = useState(value);
32
34
  const [uploading, setUploading] = useState(false);
35
+ const {
36
+ theme
37
+ } = useEditorContext();
38
+ const classes = useCommonStyle(theme);
33
39
  const handleChange = async e => {
34
40
  const file = e.target.files[0];
35
41
  const strImage = await convertBase64(file);
@@ -76,6 +82,9 @@ const SaveAsTemplate = props => {
76
82
  onSaveTemplate(formData, params);
77
83
  handleClose();
78
84
  };
85
+ if (!onSaveTemplate) {
86
+ return null;
87
+ }
79
88
  return /*#__PURE__*/_jsxs(_Fragment, {
80
89
  children: [/*#__PURE__*/_jsx(Grid, {
81
90
  item: true,
@@ -149,9 +158,14 @@ const SaveAsTemplate = props => {
149
158
  justifyContent: "space-between",
150
159
  alignItems: "center",
151
160
  children: [/*#__PURE__*/_jsxs(Button, {
152
- component: "label",
153
- variant: "contained",
161
+ component: "label"
162
+ // variant="contained"
163
+ ,
164
+ className: "gradientFillBtn",
154
165
  startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
166
+ sx: {
167
+ ...classes.gradientFillBtn
168
+ },
155
169
  children: ["Upload file", /*#__PURE__*/_jsx("input", {
156
170
  type: "file",
157
171
  style: {
@@ -194,12 +208,14 @@ const SaveAsTemplate = props => {
194
208
  },
195
209
  className: "action-btn-wrpr",
196
210
  children: [/*#__PURE__*/_jsx(Button, {
197
- className: "savebtn",
211
+ className: "savebtn gradientFillBtn",
198
212
  onClick: handleSave,
199
213
  sx: {
200
- fontWeight: 700
201
- },
202
- variant: "contained",
214
+ fontWeight: 700,
215
+ ...classes.gradientFillBtn
216
+ }
217
+ // variant="contained"
218
+ ,
203
219
  children: saveText
204
220
  }), closeText ? /*#__PURE__*/_jsx(Button, {
205
221
  className: "closebtn",
@@ -1,5 +1,8 @@
1
1
  import React, { useEffect, useState, useRef } from "react";
2
- import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
2
+ import { Grid, Checkbox, FormControlLabel, FormHelperText, IconButton } from "@mui/material";
3
+ import useCommonStyle from "../../../commonStyle";
4
+ import { useEditorContext } from "../../../hooks/useMouseMove";
5
+ import { CheckedBoxCheckIcon } from "../../iconListV2";
3
6
  import { jsx as _jsx } from "react/jsx-runtime";
4
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
8
  const SelectBox = props => {
@@ -15,6 +18,10 @@ const SelectBox = props => {
15
18
  } = data;
16
19
  const [checkedValue, setCheckedValue] = useState(false);
17
20
  const isFirstRender = useRef(true);
21
+ const {
22
+ theme
23
+ } = useEditorContext();
24
+ const classes = useCommonStyle(theme);
18
25
  useEffect(() => {
19
26
  if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
20
27
  setCheckedValue(true);
@@ -35,10 +42,22 @@ const SelectBox = props => {
35
42
  marginBottom: "12px"
36
43
  },
37
44
  children: [/*#__PURE__*/_jsx(FormControlLabel, {
45
+ className: "ccheckbox-primary",
46
+ sx: {
47
+ ...classes.customCheckBox
48
+ },
38
49
  control: /*#__PURE__*/_jsx(Checkbox, {
39
50
  value: value,
40
51
  checked: checkedValue,
41
- onChange: handleChange
52
+ onChange: handleChange,
53
+ className: "checkBox",
54
+ checkedIcon: /*#__PURE__*/_jsx(IconButton, {
55
+ className: "checkedIcon",
56
+ children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
57
+ }),
58
+ icon: /*#__PURE__*/_jsx(IconButton, {
59
+ className: "unCheckedIcon"
60
+ })
42
61
  }),
43
62
  label: placeholder
44
63
  }), /*#__PURE__*/_jsx(FormHelperText, {
@@ -5,6 +5,7 @@ import useWindowResize from "../../../hooks/useWindowResize";
5
5
  import { useEditorContext } from "../../../hooks/useMouseMove";
6
6
  import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
7
7
  import { useSlate } from "slate-react";
8
+ import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
8
9
 
9
10
  // hideMetaDataOptions -- pass true to hide metadata option in select field
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -90,6 +91,12 @@ const TextOptions = props => {
90
91
  marginBottom: "16px"
91
92
  },
92
93
  sx: classes.textOptions,
94
+ IconComponent: KeyboardArrowDownRoundedIcon,
95
+ MenuProps: {
96
+ sx: {
97
+ ...classes.textOptionsList
98
+ }
99
+ },
93
100
  children: updatedOption?.map((m, i) => {
94
101
  return m?.value === "listSubHeader" ? /*#__PURE__*/_jsx(ListSubheader, {
95
102
  children: m?.label
@@ -1,11 +1,11 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer, Accordion, AccordionSummary, AccordionDetails, createTheme } from "@mui/material";
3
3
  import FieldMap from "./fieldTypes";
4
- import CloseIcon from "@mui/icons-material/Close";
4
+ import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
5
5
  import useCommonStyle from "../../commonStyle";
6
6
  import { useEditorContext } from "../../hooks/useMouseMove";
7
7
  import { ThemeProvider } from "@mui/material/styles";
8
- import { ExpandMoreOutlined, ExpandMoreSharp } from "@mui/icons-material";
8
+ import { ExpandMoreSharp } from "@mui/icons-material";
9
9
  import { jsx as _jsx } from "react/jsx-runtime";
10
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
11
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -143,7 +143,8 @@ const StyleBuilder = props => {
143
143
  xs: 12,
144
144
  sx: {
145
145
  p: 2,
146
- width: isMobile ? "100%" : "350px"
146
+ width: isMobile ? "100%" : "312px",
147
+ ...classes.pageSettingPopUpRoot
147
148
  },
148
149
  children: [/*#__PURE__*/_jsx(DialogTitle, {
149
150
  sx: {
@@ -166,7 +167,7 @@ const StyleBuilder = props => {
166
167
  children: /*#__PURE__*/_jsx(IconButton, {
167
168
  onClick: onClose,
168
169
  className: "close-popupbtn",
169
- children: /*#__PURE__*/_jsx(CloseIcon, {})
170
+ children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
170
171
  })
171
172
  })]
172
173
  })
@@ -11,6 +11,7 @@ const ToolbarIcon = props => {
11
11
  style,
12
12
  icoBtnType
13
13
  } = props;
14
+ console.log("Props:", props);
14
15
  const renderIconText = () => {
15
16
  if (icoBtnType === "mini") {
16
17
  return /*#__PURE__*/_jsx("span", {
@@ -39,7 +40,7 @@ const ToolbarIcon = props => {
39
40
  title: title,
40
41
  arrow: true,
41
42
  children: /*#__PURE__*/_jsxs(IconButton, {
42
- className: `${className} ${icoBtnType}`,
43
+ className: `${className} ${icoBtnType} accordionIcon`,
43
44
  onClick: onClick,
44
45
  style: style,
45
46
  children: [icon, renderIconText()]
@@ -83,55 +83,57 @@ const Uploader = props => {
83
83
  });
84
84
  }
85
85
  };
86
- return /*#__PURE__*/_jsxs(Grid, {
87
- container: true,
88
- sx: classes.uploadContainer,
86
+ return /*#__PURE__*/_jsxs(_Fragment, {
89
87
  children: [/*#__PURE__*/_jsx(Grid, {
90
88
  item: true,
91
89
  xs: 12,
92
90
  children: uploading ? "Uploading..." : ""
93
91
  }), /*#__PURE__*/_jsx(Grid, {
94
- item: true,
95
- xs: 12,
96
- className: "btn--wrpr",
97
- style: {
98
- ...getBackground()
99
- },
100
- sx: classes.uploadField,
101
- children: !uploading ? /*#__PURE__*/_jsx(Grid, {
102
- className: "uploadImageSection",
103
- children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
104
- className: "uploadImageText",
105
- sx: {
106
- background: `${theme?.palette?.editor?.inputFieldBgColor}`,
107
- border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
108
- },
109
- children: /*#__PURE__*/_jsxs(Button, {
110
- component: "label",
111
- variant: "text",
112
- style: {
113
- background: "none",
114
- width: "100%"
92
+ container: true,
93
+ sx: classes.uploadContainer,
94
+ children: /*#__PURE__*/_jsx(Grid, {
95
+ item: true,
96
+ xs: 12,
97
+ className: "btn--wrpr",
98
+ style: {
99
+ ...getBackground()
100
+ },
101
+ sx: classes.uploadField,
102
+ children: !uploading ? /*#__PURE__*/_jsx(Grid, {
103
+ className: "uploadImageSection",
104
+ children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
105
+ className: "uploadImageText",
106
+ sx: {
107
+ background: `${theme?.palette?.editor?.inputFieldBgColor}`,
108
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
115
109
  },
116
- sx: classes.uploadIcon,
117
- children: [/*#__PURE__*/_jsx("input", {
118
- type: "file",
119
- style: {
120
- opacity: 0,
121
- width: "0px"
122
- },
123
- onChange: handleChange
124
- }), /*#__PURE__*/_jsx(Icon, {
125
- icon: "fileUpload"
126
- }), /*#__PURE__*/_jsxs("span", {
110
+ children: /*#__PURE__*/_jsxs(Button, {
111
+ component: "label",
112
+ variant: "text",
127
113
  style: {
128
- paddingLeft: "8px"
114
+ background: "none",
115
+ width: "100%"
129
116
  },
130
- children: ["upload ", title || "image"]
131
- })]
117
+ sx: classes.uploadIcon,
118
+ children: [/*#__PURE__*/_jsx("input", {
119
+ type: "file",
120
+ style: {
121
+ opacity: 0,
122
+ width: "0px"
123
+ },
124
+ onChange: handleChange
125
+ }), /*#__PURE__*/_jsx(Icon, {
126
+ icon: "fileUpload"
127
+ }), /*#__PURE__*/_jsxs("span", {
128
+ style: {
129
+ paddingLeft: "8px"
130
+ },
131
+ children: ["upload ", title || "image"]
132
+ })]
133
+ })
132
134
  })
133
- })
134
- }) : null
135
+ }) : null
136
+ })
135
137
  })]
136
138
  });
137
139
  };