@flozy/editor 5.3.3 → 5.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
  };