@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.
- package/dist/Editor/Editor.css +22 -7
- package/dist/Editor/Elements/Accordion/Accordion.js +8 -1
- package/dist/Editor/Elements/Button/EditorButton.js +2 -1
- package/dist/Editor/Elements/Divider/Divider.js +24 -9
- package/dist/Editor/Elements/Embed/Image.js +31 -12
- package/dist/Editor/Elements/Embed/Video.js +13 -2
- package/dist/Editor/Elements/Grid/GridItem.js +2 -0
- package/dist/Editor/Elements/Grid/Styles.js +44 -0
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -0
- package/dist/Editor/Elements/Signature/SignaturePopup.js +4 -4
- package/dist/Editor/Styles/EditorStyles.js +3 -1
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +17 -1
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -3
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +200 -72
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -8
- package/dist/Editor/assets/svg/SettingsIcon.js +4 -4
- package/dist/Editor/common/ColorPickerButton.js +5 -3
- package/dist/Editor/common/DnD/Draggable.js +2 -1
- package/dist/Editor/common/ImageSelector/Options/Upload.js +2 -1
- package/dist/Editor/common/ImageSelector/Styles.js +47 -6
- package/dist/Editor/common/ImageSelector/UploadStyles.js +18 -6
- package/dist/Editor/common/MentionsPopup/Styles.js +108 -118
- package/dist/Editor/common/Section/index.js +3 -3
- package/dist/Editor/common/Section/styles.js +5 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +4 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +27 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +2 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +2 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +4 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +22 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +21 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -0
- package/dist/Editor/common/StyleBuilder/index.js +5 -4
- package/dist/Editor/common/ToolbarIcon.js +2 -1
- package/dist/Editor/common/Uploader.js +42 -40
- package/dist/Editor/common/iconListV2.js +295 -77
- package/dist/Editor/commonStyle.js +281 -4
- package/dist/Editor/plugins/withCustomDeleteBackward.js +33 -2
- package/dist/Editor/plugins/withLayout.js +0 -41
- package/dist/Editor/utils/helper.js +6 -1
- 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
|
|
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
|
-
|
|
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
|
|
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 {
|
|
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%" : "
|
|
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(
|
|
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(
|
|
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
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
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
|
-
|
|
117
|
-
|
|
118
|
-
|
|
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
|
-
|
|
114
|
+
background: "none",
|
|
115
|
+
width: "100%"
|
|
129
116
|
},
|
|
130
|
-
|
|
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
|
-
})
|
|
135
|
+
}) : null
|
|
136
|
+
})
|
|
135
137
|
})]
|
|
136
138
|
});
|
|
137
139
|
};
|