@flozy/editor 1.9.4 → 1.9.6
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +15 -12
- package/dist/Editor/Editor.css +0 -6
- package/dist/Editor/Elements/Attachments/Attachments.js +9 -2
- package/dist/Editor/Elements/Button/EditorButton.js +4 -3
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +3 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +6 -1
- package/dist/Editor/Elements/Color Picker/Styles.js +9 -4
- package/dist/Editor/Elements/Embed/Video.js +1 -0
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +2 -3
- package/dist/Editor/Elements/Form/Workflow/Styles.js +19 -1
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +6 -2
- package/dist/Editor/Elements/Form/Workflow/index.js +8 -2
- package/dist/Editor/Elements/Link/Link.js +6 -5
- package/dist/Editor/Elements/SimpleText.js +5 -1
- package/dist/Editor/Styles/EditorStyles.js +11 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +6 -1
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -0
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -4
- package/dist/Editor/Toolbar/Mini/Styles.js +15 -1
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +113 -9
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +3 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +4 -1
- package/dist/Editor/common/ColorPickerButton.js +6 -8
- package/dist/Editor/common/ImageSelector/ImageSelector.js +6 -5
- package/dist/Editor/common/ImageSelector/Styles.js +59 -45
- package/dist/Editor/common/ImageSelector/UploadStyles.js +10 -10
- package/dist/Editor/common/MentionsPopup/Styles.js +16 -7
- package/dist/Editor/common/MentionsPopup/index.js +5 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +6 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +6 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -1
- package/dist/Editor/common/StyleBuilder/index.js +14 -4
- package/dist/Editor/common/iconslist.js +0 -2
- package/dist/Editor/commonStyle.js +50 -6
- package/dist/Editor/helper/index.js +30 -8
- package/dist/Editor/hooks/useMouseMove.js +3 -1
- package/dist/Editor/utils/draftToSlate.js +3 -1
- package/package.json +1 -1
@@ -1,4 +1,4 @@
|
|
1
|
-
const usePopupStyle =
|
1
|
+
const usePopupStyle = theme => ({
|
2
2
|
popupWrapper: {
|
3
3
|
boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
|
4
4
|
zIndex: 1300,
|
@@ -14,6 +14,37 @@ const usePopupStyle = () => ({
|
|
14
14
|
},
|
15
15
|
"&.xs": {
|
16
16
|
transform: "none !important"
|
17
|
+
},
|
18
|
+
"& .MuiPaper-root": {
|
19
|
+
backgroundColor: theme?.palette?.editor?.background
|
20
|
+
},
|
21
|
+
"& .MuiTypography-root": {
|
22
|
+
color: theme?.palette?.editor?.textColor
|
23
|
+
},
|
24
|
+
"& .MuiInputBase-root": {
|
25
|
+
color: theme?.palette?.editor?.textColor,
|
26
|
+
"& svg": {
|
27
|
+
color: theme?.palette?.editor?.textColor
|
28
|
+
},
|
29
|
+
"&.MuiOutlinedInput-root:hover": {
|
30
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
31
|
+
border: `1px solid ${theme?.palette?.editor?.textColor}`
|
32
|
+
}
|
33
|
+
}
|
34
|
+
},
|
35
|
+
"& .MuiCheckbox-root": {
|
36
|
+
color: theme?.palette?.editor?.textColor
|
37
|
+
},
|
38
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
39
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
40
|
+
},
|
41
|
+
"& button": {
|
42
|
+
color: theme?.palette?.editor?.textColor
|
43
|
+
},
|
44
|
+
"& .buttonsWrpr": {
|
45
|
+
"& button": {
|
46
|
+
color: theme?.palette?.editor?.textColor
|
47
|
+
}
|
17
48
|
}
|
18
49
|
},
|
19
50
|
textFormatWrapper: {
|
@@ -37,7 +68,7 @@ const usePopupStyle = () => ({
|
|
37
68
|
marginBottom: "20px"
|
38
69
|
},
|
39
70
|
"& .MuiOutlinedInput-notchedOutline": {
|
40
|
-
border:
|
71
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
41
72
|
},
|
42
73
|
"& .MuiOutlinedInput-root": {
|
43
74
|
boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
|
@@ -70,6 +101,16 @@ const usePopupStyle = () => ({
|
|
70
101
|
fontSize: "14px",
|
71
102
|
color: "#64748B"
|
72
103
|
}
|
104
|
+
},
|
105
|
+
"& .MuiTab-root": {
|
106
|
+
color: theme?.palette?.editor?.textColor
|
107
|
+
},
|
108
|
+
"& button": {
|
109
|
+
"&:hover": {
|
110
|
+
"& span": {
|
111
|
+
color: theme?.palette?.editor?.activeColor
|
112
|
+
}
|
113
|
+
}
|
73
114
|
}
|
74
115
|
},
|
75
116
|
textFormatLabel: {
|
@@ -187,25 +228,40 @@ const usePopupStyle = () => ({
|
|
187
228
|
marginTop: "8px",
|
188
229
|
textTransform: "capitalize",
|
189
230
|
"&.active": {
|
190
|
-
|
231
|
+
backgroundColor: theme?.palette?.editor?.background,
|
232
|
+
border: `1px solid transparent`,
|
233
|
+
color: theme?.palette?.editor?.activeColor
|
191
234
|
}
|
192
235
|
},
|
193
236
|
btnGroup: {
|
194
|
-
backgroundColor:
|
237
|
+
backgroundColor: theme?.palette?.editor?.background,
|
195
238
|
"& button": {
|
239
|
+
backgroundColor: theme?.palette?.editor?.background,
|
196
240
|
marginRight: "0px",
|
197
|
-
color:
|
198
|
-
|
241
|
+
color: theme?.palette?.editor?.textColor,
|
242
|
+
borderColor: theme?.palette?.editor?.borderColor,
|
199
243
|
textTransform: "capitalize",
|
244
|
+
marginBottom: "0px",
|
245
|
+
"&:hover": {
|
246
|
+
color: theme?.palette?.editor?.borderColor,
|
247
|
+
background: theme?.palette?.editor?.background
|
248
|
+
},
|
200
249
|
"&.active": {
|
201
|
-
|
250
|
+
background: theme?.palette?.editor?.background,
|
251
|
+
color: theme?.palette?.editor?.activeColor
|
202
252
|
},
|
203
253
|
"&.no-hover": {
|
204
|
-
border:
|
254
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
255
|
+
}
|
256
|
+
}
|
257
|
+
},
|
258
|
+
allColor: {
|
259
|
+
"& .buttonsWrpr": {
|
260
|
+
"& button": {
|
261
|
+
color: theme?.palette?.editor?.textColor
|
205
262
|
}
|
206
263
|
}
|
207
264
|
},
|
208
|
-
allColor: {},
|
209
265
|
allColorInner: {
|
210
266
|
"& .buttonsWrpr": {
|
211
267
|
"& button": {
|
@@ -269,6 +325,54 @@ const usePopupStyle = () => ({
|
|
269
325
|
"& svg": {
|
270
326
|
color: "#CCC"
|
271
327
|
}
|
328
|
+
},
|
329
|
+
textOptions: {
|
330
|
+
backgroundColor: theme?.palette?.editor?.background,
|
331
|
+
color: theme?.palette?.editor?.textColor
|
332
|
+
},
|
333
|
+
textSize: {
|
334
|
+
"& .textFontArrows": {
|
335
|
+
"& svg": {
|
336
|
+
stroke: theme?.palette?.editor?.textColor
|
337
|
+
}
|
338
|
+
}
|
339
|
+
},
|
340
|
+
closeBtn: {
|
341
|
+
backgroundColor: theme?.palette?.editor?.background,
|
342
|
+
color: theme?.palette?.editor?.textColor
|
343
|
+
},
|
344
|
+
colorPickerPopup: {
|
345
|
+
"& .MuiPaper-root": {
|
346
|
+
overflow: "auto",
|
347
|
+
backgroundColor: theme?.palette?.editor?.background
|
348
|
+
},
|
349
|
+
"& .popup_tabs": {
|
350
|
+
backgroundColor: theme?.palette?.editor?.background
|
351
|
+
},
|
352
|
+
"& .popup_tabs-header": {
|
353
|
+
backgroundColor: theme?.palette?.editor?.background,
|
354
|
+
"& .popup_tabs-header-label-active": {
|
355
|
+
color: theme?.palette?.editor?.activeColor,
|
356
|
+
backgroundColor: theme?.palette?.editor?.background
|
357
|
+
}
|
358
|
+
},
|
359
|
+
"& .colorpicker": {
|
360
|
+
backgroundColor: theme?.palette?.editor?.background
|
361
|
+
},
|
362
|
+
"& .color-picker-panel": {
|
363
|
+
backgroundColor: theme?.palette?.editor?.background
|
364
|
+
},
|
365
|
+
"& .input_rgba": {
|
366
|
+
"& input": {
|
367
|
+
backgroundColor: theme?.palette?.editor?.background,
|
368
|
+
color: theme?.palette?.editor?.textColor
|
369
|
+
}
|
370
|
+
}
|
371
|
+
},
|
372
|
+
colorPopper: {
|
373
|
+
"& .MuiPaper-root": {
|
374
|
+
backgroundColor: theme?.palette?.editor?.background
|
375
|
+
}
|
272
376
|
}
|
273
377
|
});
|
274
378
|
export default usePopupStyle;
|
@@ -131,6 +131,7 @@ const TextFormat = props => {
|
|
131
131
|
xs: 12,
|
132
132
|
sx: classes.textFormatField,
|
133
133
|
children: /*#__PURE__*/_jsx(Dropdown, {
|
134
|
+
classes: classes,
|
134
135
|
...fontFamily,
|
135
136
|
editor: editor
|
136
137
|
})
|
@@ -151,6 +152,7 @@ const TextFormat = props => {
|
|
151
152
|
xs: 12,
|
152
153
|
sx: classes.textFormatField,
|
153
154
|
children: /*#__PURE__*/_jsx(Dropdown, {
|
155
|
+
classes: classes,
|
154
156
|
...fontWeight,
|
155
157
|
editor: editor,
|
156
158
|
width: "100%"
|
@@ -169,6 +171,7 @@ const TextFormat = props => {
|
|
169
171
|
xs: 12,
|
170
172
|
sx: classes.textFormatCG,
|
171
173
|
children: /*#__PURE__*/_jsx(TextSize, {
|
174
|
+
classes: classes,
|
172
175
|
format: "fontSize",
|
173
176
|
activeMark: activeMark,
|
174
177
|
editor: editor,
|
@@ -11,7 +11,10 @@ import useWindowResize from "../../hooks/useWindowResize";
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
13
13
|
const PopupTool = props => {
|
14
|
-
const
|
14
|
+
const {
|
15
|
+
theme
|
16
|
+
} = props;
|
17
|
+
const classes = usePopupStyle(theme);
|
15
18
|
const [anchorEl, setAnchorEl] = useState(null);
|
16
19
|
const [open, setOpen] = useState(false);
|
17
20
|
const editor = useSlate();
|
@@ -9,7 +9,8 @@ const ColorPickerButton = props => {
|
|
9
9
|
const {
|
10
10
|
value,
|
11
11
|
onSave,
|
12
|
-
defaultColors = []
|
12
|
+
defaultColors = [],
|
13
|
+
classes
|
13
14
|
} = props;
|
14
15
|
const [anchorEl, setAnchorEl] = useState(null);
|
15
16
|
const [color, setColor] = useState(value);
|
@@ -46,14 +47,11 @@ const ColorPickerButton = props => {
|
|
46
47
|
horizontal: "center"
|
47
48
|
},
|
48
49
|
onClose: handleClose,
|
49
|
-
sx:
|
50
|
-
"& .MuiPaper-root": {
|
51
|
-
overflow: "auto"
|
52
|
-
}
|
53
|
-
},
|
50
|
+
sx: classes.colorPickerPopup,
|
54
51
|
children: /*#__PURE__*/_jsx(Grid, {
|
55
52
|
container: true,
|
56
|
-
padding:
|
53
|
+
padding: 0,
|
54
|
+
className: "ed-cp-wrpr",
|
57
55
|
children: /*#__PURE__*/_jsxs(Grid, {
|
58
56
|
item: true,
|
59
57
|
xs: 12,
|
@@ -68,7 +66,7 @@ const ColorPickerButton = props => {
|
|
68
66
|
style: {
|
69
67
|
display: "flex",
|
70
68
|
justifyContent: "end",
|
71
|
-
|
69
|
+
margin: "8px"
|
72
70
|
},
|
73
71
|
children: [/*#__PURE__*/_jsx(Button, {
|
74
72
|
onClick: handleClose,
|
@@ -5,6 +5,7 @@ import ChooseAssets from "./Options/ChooseAssets";
|
|
5
5
|
import AddLink from "./Options/AddLink";
|
6
6
|
import Icon from "../Icon";
|
7
7
|
import ImageSelectorStyles from "./Styles";
|
8
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
8
9
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -20,7 +21,10 @@ const TAB_SHOW = {
|
|
20
21
|
Document: ["addLink", "upload"]
|
21
22
|
};
|
22
23
|
const ImageSelector = props => {
|
23
|
-
const
|
24
|
+
const {
|
25
|
+
theme
|
26
|
+
} = useEditorContext();
|
27
|
+
const classes = ImageSelectorStyles(theme);
|
24
28
|
const {
|
25
29
|
value,
|
26
30
|
onClose,
|
@@ -49,10 +53,7 @@ const ImageSelector = props => {
|
|
49
53
|
sx: classes.dialogWrapper,
|
50
54
|
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
51
55
|
children: /*#__PURE__*/_jsxs(Typography, {
|
52
|
-
sx:
|
53
|
-
fontSize: "16px",
|
54
|
-
fontWeight: 500
|
55
|
-
},
|
56
|
+
sx: classes.titleTypo,
|
56
57
|
children: ["Add ", title]
|
57
58
|
})
|
58
59
|
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
|
@@ -1,28 +1,32 @@
|
|
1
|
-
const ImageSelectorStyles =
|
1
|
+
const ImageSelectorStyles = theme => ({
|
2
2
|
root: {},
|
3
3
|
tabs: {
|
4
4
|
"& button": {
|
5
5
|
fontSize: "12px",
|
6
6
|
fontWeight: "500",
|
7
7
|
textTransform: "capitalize",
|
8
|
-
minHeight:
|
9
|
-
padding:
|
10
|
-
marginRight:
|
8
|
+
minHeight: "40px",
|
9
|
+
padding: "10px",
|
10
|
+
marginRight: "24px",
|
11
|
+
borderRadius: "7px",
|
12
|
+
marginBottom: "12px",
|
13
|
+
color: theme?.palette?.editor?.textColor,
|
11
14
|
"&.hidden": {
|
12
15
|
display: "none"
|
13
16
|
},
|
14
17
|
"&.active": {
|
15
|
-
backgroundColor:
|
16
|
-
border:
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
stroke: '#2563EB'
|
18
|
+
backgroundColor: theme?.palette?.editor?.background,
|
19
|
+
border: `1px solid ${theme?.palette?.editor?.activeColor}`,
|
20
|
+
"& svg": {
|
21
|
+
"& path": {
|
22
|
+
stroke: theme?.palette?.editor?.activeColor
|
21
23
|
}
|
22
24
|
}
|
23
25
|
},
|
24
26
|
"&:hover": {
|
25
|
-
backgroundColor:
|
27
|
+
backgroundColor: theme?.palette?.editor?.background,
|
28
|
+
color: theme?.palette?.editor?.activeColor,
|
29
|
+
border: `1px solid ${theme?.palette?.editor?.activeColor}`
|
26
30
|
},
|
27
31
|
"& svg": {
|
28
32
|
marginRight: "8px",
|
@@ -31,22 +35,23 @@ const ImageSelectorStyles = () => ({
|
|
31
35
|
}
|
32
36
|
},
|
33
37
|
"& .MuiTabs-indicator": {
|
34
|
-
display:
|
38
|
+
display: "none"
|
35
39
|
}
|
36
40
|
},
|
37
41
|
tab: {},
|
38
42
|
imsRightWrpr: {
|
39
43
|
height: "300px",
|
40
44
|
overflow: "auto",
|
41
|
-
backgroundColor:
|
45
|
+
backgroundColor: theme?.palette?.editor?.background,
|
42
46
|
padding: "0 8px",
|
43
47
|
"& .MuiFormHelperText-root": {
|
44
48
|
marginLeft: "0px"
|
45
49
|
}
|
46
50
|
},
|
47
51
|
dialogWrapper: {
|
48
|
-
|
49
|
-
borderRadius:
|
52
|
+
"& .MuiDialog-paper": {
|
53
|
+
borderRadius: "12px",
|
54
|
+
backgroundColor: theme?.palette?.editor?.background
|
50
55
|
},
|
51
56
|
"& .primaryBtn": {
|
52
57
|
background: "#2563eb !important",
|
@@ -73,54 +78,63 @@ const ImageSelectorStyles = () => ({
|
|
73
78
|
marginRight: "8px !important"
|
74
79
|
}
|
75
80
|
},
|
81
|
+
titleTypo: {
|
82
|
+
fontSize: "16px",
|
83
|
+
fontWeight: 500,
|
84
|
+
color: theme?.palette?.editor?.textColor
|
85
|
+
},
|
76
86
|
addLinkField: {
|
77
87
|
"& .MuiOutlinedInput-input": {
|
78
|
-
fontSize:
|
79
|
-
fontWeight: 500
|
88
|
+
fontSize: "12px",
|
89
|
+
fontWeight: 500,
|
90
|
+
color: theme?.palette?.editor?.textColor
|
91
|
+
},
|
92
|
+
"& .MuiFormHelperText-root": {
|
93
|
+
color: theme?.palette?.editor?.textColor
|
80
94
|
},
|
81
|
-
|
82
|
-
boxShadow:
|
83
|
-
borderRadius:
|
84
|
-
|
85
|
-
borderColor:
|
95
|
+
"& .MuiOutlinedInput-root": {
|
96
|
+
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
|
97
|
+
borderRadius: "7px",
|
98
|
+
"& fieldset": {
|
99
|
+
borderColor: "#D8DDE1"
|
86
100
|
},
|
87
|
-
|
88
|
-
borderColor:
|
101
|
+
"&:hover fieldset": {
|
102
|
+
borderColor: "#64748B"
|
89
103
|
},
|
90
|
-
|
91
|
-
borderColor:
|
104
|
+
"&.Mui-focused fieldset": {
|
105
|
+
borderColor: "#2563EB"
|
92
106
|
},
|
93
|
-
|
107
|
+
"& .MuiFormLabel-root": {}
|
94
108
|
}
|
95
109
|
},
|
96
110
|
addLinkBtn: {
|
97
|
-
borderRadius:
|
111
|
+
borderRadius: "5px",
|
98
112
|
background: "#E7EDF7",
|
99
|
-
width:
|
100
|
-
height:
|
101
|
-
|
102
|
-
width:
|
103
|
-
height:
|
113
|
+
width: "20px",
|
114
|
+
height: "20px",
|
115
|
+
"& svg": {
|
116
|
+
width: "16px",
|
117
|
+
height: "16px"
|
104
118
|
}
|
105
119
|
},
|
106
120
|
closeBtn: {
|
107
|
-
|
108
|
-
color:
|
109
|
-
fontSize:
|
121
|
+
backgroundColor: "#F4F6F9",
|
122
|
+
color: "#64748B",
|
123
|
+
fontSize: "14px",
|
110
124
|
fontWeight: 500,
|
111
|
-
padding:
|
112
|
-
textTransform:
|
113
|
-
border:
|
114
|
-
|
115
|
-
border:
|
125
|
+
padding: "4px 22px",
|
126
|
+
textTransform: "none",
|
127
|
+
border: "1px solid #D8DDE1",
|
128
|
+
"&:hover": {
|
129
|
+
border: "1px solid #64748B"
|
116
130
|
}
|
117
131
|
},
|
118
132
|
saveBtn: {
|
119
|
-
background:
|
120
|
-
fontSize:
|
133
|
+
background: "#2563EB",
|
134
|
+
fontSize: "14px",
|
121
135
|
fontWeight: 500,
|
122
|
-
padding:
|
123
|
-
textTransform:
|
136
|
+
padding: "4px 24px",
|
137
|
+
textTransform: "none"
|
124
138
|
}
|
125
139
|
});
|
126
140
|
export default ImageSelectorStyles;
|
@@ -1,25 +1,25 @@
|
|
1
|
-
const UploadStyles =
|
1
|
+
const UploadStyles = theme => ({
|
2
2
|
uploadContainer: {
|
3
|
-
border:
|
4
|
-
padding:
|
3
|
+
border: "1px solid #2563EB",
|
4
|
+
padding: "10px",
|
5
5
|
borderRadius: "7px",
|
6
|
-
boxShadow:
|
6
|
+
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)"
|
7
7
|
},
|
8
8
|
uploadField: {
|
9
9
|
width: "100%",
|
10
|
-
backgroundSize: "
|
10
|
+
backgroundSize: "100% auto",
|
11
11
|
backgroundRepeat: "no-repeat",
|
12
12
|
backgroundPosition: "center",
|
13
13
|
height: "250px",
|
14
14
|
position: "relative",
|
15
|
-
backgroundColor:
|
15
|
+
backgroundColor: theme?.palette?.editor?.background,
|
16
16
|
borderRadius: "9px",
|
17
|
-
border:
|
17
|
+
border: "1px dashed #2563EB"
|
18
18
|
},
|
19
19
|
uploadIcon: {
|
20
|
-
|
21
|
-
|
22
|
-
stroke:
|
20
|
+
"& svg": {
|
21
|
+
"& path": {
|
22
|
+
stroke: "#2563EB"
|
23
23
|
}
|
24
24
|
}
|
25
25
|
}
|
@@ -1,8 +1,7 @@
|
|
1
|
-
const usePopupStyles =
|
1
|
+
const usePopupStyles = theme => ({
|
2
2
|
root: {
|
3
3
|
position: "absolute",
|
4
4
|
zIndex: 1300,
|
5
|
-
background: "white",
|
6
5
|
borderRadius: "10px",
|
7
6
|
padding: "0px",
|
8
7
|
boxShadow: "0 4px 10px rgba(0,0,0,.2)",
|
@@ -15,7 +14,14 @@ const usePopupStyles = () => ({
|
|
15
14
|
overflow: "auto",
|
16
15
|
padding: "8px",
|
17
16
|
margin: "0px",
|
18
|
-
borderRadius: "10px"
|
17
|
+
borderRadius: "10px",
|
18
|
+
backgroundColor: theme?.palette?.editor?.background,
|
19
|
+
"& .MuiTypography-root": {
|
20
|
+
color: theme?.palette?.editor?.textColor
|
21
|
+
},
|
22
|
+
"& button": {
|
23
|
+
color: theme?.palette?.editor?.textColor
|
24
|
+
}
|
19
25
|
},
|
20
26
|
groupHeader: {
|
21
27
|
padding: "10px 8px",
|
@@ -29,11 +35,15 @@ const usePopupStyles = () => ({
|
|
29
35
|
cursor: "pointer",
|
30
36
|
background: "transparent",
|
31
37
|
borderRadius: "10px",
|
38
|
+
border: `1px solid transparent`,
|
39
|
+
"& .MuiTypography-root": {
|
40
|
+
color: theme?.palette?.editor?.textColor
|
41
|
+
},
|
32
42
|
"&.active": {
|
33
|
-
|
43
|
+
border: `1px solid ${theme?.palette?.editor?.activeColor}`
|
34
44
|
},
|
35
45
|
"&:hover": {
|
36
|
-
|
46
|
+
border: `1px solid ${theme?.palette?.editor?.activeColor}`
|
37
47
|
},
|
38
48
|
"&.renderComp": {
|
39
49
|
padding: "0px",
|
@@ -53,8 +63,7 @@ const usePopupStyles = () => ({
|
|
53
63
|
span: {
|
54
64
|
padding: "8px",
|
55
65
|
fontSize: "14px",
|
56
|
-
fontWeight: "500"
|
57
|
-
color: "rgba(0, 0, 0, 0.87)"
|
66
|
+
fontWeight: "500"
|
58
67
|
}
|
59
68
|
}
|
60
69
|
}
|
@@ -13,11 +13,8 @@ const POPUP_LIST_TYPES = {
|
|
13
13
|
elements: ElementListCard
|
14
14
|
};
|
15
15
|
const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
|
16
|
-
const classes = usePopupStyle();
|
17
|
-
const papperRef = useRef(null);
|
18
|
-
const buttonRef = useRef(null);
|
19
|
-
const editor = useSlateStatic();
|
20
16
|
const {
|
17
|
+
theme,
|
21
18
|
index,
|
22
19
|
target,
|
23
20
|
chars,
|
@@ -25,6 +22,10 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
|
|
25
22
|
setMentions,
|
26
23
|
type
|
27
24
|
} = props;
|
25
|
+
const classes = usePopupStyle(theme);
|
26
|
+
const papperRef = useRef(null);
|
27
|
+
const buttonRef = useRef(null);
|
28
|
+
const editor = useSlateStatic();
|
28
29
|
const ListElement = POPUP_LIST_TYPES[type] || null;
|
29
30
|
const [anchorEl, setAnchorEl] = useState(null);
|
30
31
|
let open = Boolean(anchorEl);
|
@@ -3,6 +3,7 @@ import { Grid, Button, Typography } from "@mui/material";
|
|
3
3
|
import ImageSelector from "../../ImageSelector/ImageSelector";
|
4
4
|
import UploadStyles from "../../ImageSelector/UploadStyles";
|
5
5
|
import Icon from "../../Icon";
|
6
|
+
import { useEditorContext } from "../../../hooks/useMouseMove";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const BackgroundImage = props => {
|
@@ -17,7 +18,10 @@ const BackgroundImage = props => {
|
|
17
18
|
} = data;
|
18
19
|
const [base64, setBase64] = useState(value);
|
19
20
|
const [open, setOpen] = useState(false);
|
20
|
-
const
|
21
|
+
const {
|
22
|
+
theme
|
23
|
+
} = useEditorContext();
|
24
|
+
const classes = UploadStyles(theme);
|
21
25
|
const onRemoveBG = () => {
|
22
26
|
setBase64(null);
|
23
27
|
onChange({
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Checkbox, FormControlLabel, Grid, Slider, Typography } from "@mui/material";
|
2
|
+
import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
|
3
3
|
import { squreStyle } from "./radiusStyle";
|
4
4
|
import { getBreakPointsValue } from "../../../helper/theme";
|
5
5
|
import useWindowResize from "../../../hooks/useWindowResize";
|
@@ -11,7 +11,8 @@ const BannerSpacing = props => {
|
|
11
11
|
value: val,
|
12
12
|
data,
|
13
13
|
onChange,
|
14
|
-
elementProps
|
14
|
+
elementProps,
|
15
|
+
classes
|
15
16
|
} = props;
|
16
17
|
const {
|
17
18
|
key
|
@@ -23,7 +24,6 @@ const BannerSpacing = props => {
|
|
23
24
|
}
|
24
25
|
const [size] = useWindowResize();
|
25
26
|
const value = getBreakPointsValue(val, size?.device);
|
26
|
-
console.log(value, val, size?.device);
|
27
27
|
const handleChange = e => {
|
28
28
|
let changeAll = {};
|
29
29
|
if (lockSpacing) {
|
@@ -74,7 +74,9 @@ const BannerSpacing = props => {
|
|
74
74
|
max: 100,
|
75
75
|
name: "top",
|
76
76
|
onChange: handleChange
|
77
|
-
}), /*#__PURE__*/_jsx(
|
77
|
+
}), /*#__PURE__*/_jsx(Box, {
|
78
|
+
component: "input",
|
79
|
+
sx: classes.sapcingInput,
|
78
80
|
name: "top",
|
79
81
|
value: !lockSpacing ? "" : value?.top || 0,
|
80
82
|
className: "sliderInput",
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Grid, Typography, Slider, FormControlLabel, Checkbox } from "@mui/material";
|
2
|
+
import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
|
3
3
|
import { radiusStyle } from "./radiusStyle";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -9,7 +9,8 @@ const BorderRadius = props => {
|
|
9
9
|
value,
|
10
10
|
data,
|
11
11
|
onChange,
|
12
|
-
elementProps
|
12
|
+
elementProps,
|
13
|
+
classes
|
13
14
|
} = props;
|
14
15
|
let {
|
15
16
|
lockRadius
|
@@ -66,7 +67,9 @@ const BorderRadius = props => {
|
|
66
67
|
valueLabelDisplay: "auto",
|
67
68
|
max: 100,
|
68
69
|
onChange: handleChange
|
69
|
-
}), /*#__PURE__*/_jsx(
|
70
|
+
}), /*#__PURE__*/_jsx(Box, {
|
71
|
+
sx: classes.sapcingInput,
|
72
|
+
component: "input",
|
70
73
|
value: !lockRadius ? "" : value?.topLeft || 0,
|
71
74
|
className: "sliderInput",
|
72
75
|
disabled: !lockRadius,
|
@@ -7,7 +7,8 @@ const Color = props => {
|
|
7
7
|
const {
|
8
8
|
value,
|
9
9
|
data,
|
10
|
-
onChange
|
10
|
+
onChange,
|
11
|
+
classes
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
key,
|
@@ -42,6 +43,7 @@ const Color = props => {
|
|
42
43
|
startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
|
43
44
|
position: "start",
|
44
45
|
children: /*#__PURE__*/_jsx(ColorPickerButton, {
|
46
|
+
classes: classes,
|
45
47
|
value: value,
|
46
48
|
onSave: onSave
|
47
49
|
})
|
@@ -10,7 +10,8 @@ const TextOptions = props => {
|
|
10
10
|
value: val,
|
11
11
|
data,
|
12
12
|
onChange,
|
13
|
-
elementProps
|
13
|
+
elementProps,
|
14
|
+
classes
|
14
15
|
} = props;
|
15
16
|
const {
|
16
17
|
key,
|
@@ -60,6 +61,7 @@ const TextOptions = props => {
|
|
60
61
|
style: {
|
61
62
|
marginBottom: "16px"
|
62
63
|
},
|
64
|
+
sx: classes.textOptions,
|
63
65
|
children: options.map(m => {
|
64
66
|
return /*#__PURE__*/_jsx(MenuItem, {
|
65
67
|
value: m.value,
|