@flozy/editor 4.8.9 → 4.9.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +2 -1
- package/dist/Editor/Editor.css +3 -3
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +1 -1
- package/dist/Editor/Elements/Color Picker/Styles.js +5 -1
- package/dist/Editor/Elements/Grid/GridButton.js +2 -1
- package/dist/Editor/Elements/Grid/GridItem.js +4 -3
- package/dist/Editor/Elements/Grid/Styles.js +10 -0
- package/dist/Editor/Elements/Grid/templates/default_grid.js +4 -4
- package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +2 -2
- package/dist/Editor/Elements/Signature/SignaturePopup.js +10 -46
- package/dist/Editor/Toolbar/FormatTools/BlockButton.js +7 -0
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +5 -11
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +8 -4
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +0 -2
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +3 -6
- package/dist/Editor/Toolbar/Mini/Styles.js +4 -1
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +6 -9
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +265 -40
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +12 -5
- package/dist/Editor/common/Icon.js +13 -18
- package/dist/Editor/common/MentionsPopup/Styles.js +135 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
- package/dist/Editor/common/iconListV2.js +304 -19
- package/dist/Editor/commonStyle.js +109 -8
- package/dist/Editor/utils/gridItem.js +8 -4
- package/package.json +1 -1
@@ -1,14 +1,15 @@
|
|
1
1
|
const usePopupStyle = theme => ({
|
2
2
|
popupWrapper: {
|
3
|
-
boxShadow: "1px 2px 15px 0px #2563EB40",
|
3
|
+
boxShadow: theme?.palette?.type === "light" ? "1px 2px 15px 0px #2563EB40" : "unset",
|
4
4
|
zIndex: 1300,
|
5
5
|
marginBottom: "12px !important",
|
6
|
-
borderRadius: "
|
7
|
-
border:
|
6
|
+
borderRadius: "20px !important",
|
7
|
+
border: `1px solid ${theme?.palette?.editor?.popUpBorderColor} !important`,
|
8
8
|
maxWidth: "100%",
|
9
9
|
// maxHeight: "40px",
|
10
10
|
"&.fullscreen": {
|
11
11
|
marginBottom: "0px !important",
|
12
|
+
borderRadius: "0px !important",
|
12
13
|
"& .papper-wrpr": {
|
13
14
|
boxShadow: "none"
|
14
15
|
}
|
@@ -17,7 +18,12 @@ const usePopupStyle = theme => ({
|
|
17
18
|
transform: "none !important"
|
18
19
|
},
|
19
20
|
"& .MuiPaper-root": {
|
20
|
-
backgroundColor: theme?.palette?.editor?.
|
21
|
+
backgroundColor: `${theme?.palette?.editor?.textFormatBgColor} !important`,
|
22
|
+
borderRadius: "19px !important",
|
23
|
+
paddingBottom: "10px !important"
|
24
|
+
},
|
25
|
+
"& .MuiDialog-paperFullScreen": {
|
26
|
+
borderRadius: "0px !important"
|
21
27
|
},
|
22
28
|
"&.textSettings": {
|
23
29
|
"@media only screen and (max-width: 600px)": {
|
@@ -26,7 +32,7 @@ const usePopupStyle = theme => ({
|
|
26
32
|
}
|
27
33
|
},
|
28
34
|
"& .MuiTypography-root": {
|
29
|
-
color: theme?.palette?.editor?.
|
35
|
+
color: theme?.palette?.editor?.textFormatTextColor
|
30
36
|
},
|
31
37
|
"& .MuiInputBase-root": {
|
32
38
|
color: theme?.palette?.editor?.textColor,
|
@@ -54,12 +60,13 @@ const usePopupStyle = theme => ({
|
|
54
60
|
}
|
55
61
|
},
|
56
62
|
"@media only screen and (max-width: 599px)": {
|
57
|
-
|
63
|
+
margin: "10px !important",
|
58
64
|
background: "unset",
|
59
|
-
boxShadow: "unset"
|
60
|
-
border: "none"
|
65
|
+
boxShadow: "unset"
|
66
|
+
// border: "none",
|
61
67
|
}
|
62
68
|
},
|
69
|
+
|
63
70
|
textFormatWrapper: {
|
64
71
|
padding: "0px 16px 16px 16px",
|
65
72
|
width: "323px",
|
@@ -96,7 +103,7 @@ const usePopupStyle = theme => ({
|
|
96
103
|
},
|
97
104
|
"& .headerContainer": {},
|
98
105
|
"& .textSettingHeader": {
|
99
|
-
borderBottom: "1px solid #DCE4EC",
|
106
|
+
// borderBottom: "1px solid #DCE4EC",
|
100
107
|
padding: "8px 0px 5px",
|
101
108
|
marginBottom: "20px"
|
102
109
|
},
|
@@ -111,8 +118,45 @@ const usePopupStyle = theme => ({
|
|
111
118
|
justifyContent: "start",
|
112
119
|
borderRadius: "10px !important",
|
113
120
|
transition: "background-color 0.3s ease",
|
121
|
+
"& .colorBoxElementIcon": {
|
122
|
+
"& path": {
|
123
|
+
fill: theme?.palette?.type === "dark" ? "none" : ""
|
124
|
+
}
|
125
|
+
},
|
114
126
|
"&:hover": {
|
115
|
-
backgroundColor:
|
127
|
+
backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
|
128
|
+
"& .signatureElementIcon": {
|
129
|
+
"& path": {
|
130
|
+
fill: `${theme?.palette?.editor?.menuOptionTextColor} !important`
|
131
|
+
}
|
132
|
+
},
|
133
|
+
"& .commonSvgStyle": {
|
134
|
+
"& path": {
|
135
|
+
stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`
|
136
|
+
}
|
137
|
+
},
|
138
|
+
"& .commonSvgStyle2": {
|
139
|
+
"& path": {
|
140
|
+
stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`
|
141
|
+
}
|
142
|
+
},
|
143
|
+
"& .colorBoxElementIcon": {
|
144
|
+
"& path": {
|
145
|
+
stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
|
146
|
+
fill: "none"
|
147
|
+
}
|
148
|
+
},
|
149
|
+
"& .gridElementIcon": {
|
150
|
+
"& path": {
|
151
|
+
stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
|
152
|
+
fill: `${theme?.palette?.editor?.menuOptionTextColor} !important`
|
153
|
+
}
|
154
|
+
},
|
155
|
+
"& .newLineElementIcon": {
|
156
|
+
"& path": {
|
157
|
+
fill: `${theme?.palette?.editor?.menuOptionTextColor} !important`
|
158
|
+
}
|
159
|
+
}
|
116
160
|
},
|
117
161
|
"& svg": {
|
118
162
|
width: "24px",
|
@@ -168,8 +212,21 @@ const usePopupStyle = theme => ({
|
|
168
212
|
},
|
169
213
|
"& .MuiFormControl-root.MuiTextField-root input": {
|
170
214
|
padding: "8px 35px 6px 12px"
|
215
|
+
},
|
216
|
+
"& .toogleFullScreenBtn": {
|
217
|
+
background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
|
218
|
+
padding: "4px !important",
|
219
|
+
"& .toogleFullScreenSvg": {
|
220
|
+
"& path": {
|
221
|
+
stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
|
222
|
+
}
|
223
|
+
}
|
171
224
|
}
|
172
225
|
},
|
226
|
+
textSettingHeader: {
|
227
|
+
display: "flex",
|
228
|
+
borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`
|
229
|
+
},
|
173
230
|
textFormatField: {
|
174
231
|
marginBottom: "16px",
|
175
232
|
marginTop: "10px"
|
@@ -182,6 +239,87 @@ const usePopupStyle = theme => ({
|
|
182
239
|
// marginBottom: "16px",
|
183
240
|
marginTop: "10px"
|
184
241
|
},
|
242
|
+
textFormatField3: {
|
243
|
+
marginBottom: "16px"
|
244
|
+
},
|
245
|
+
textAlignButtons: {
|
246
|
+
"& .justifyIcon": {
|
247
|
+
"& path": {
|
248
|
+
fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
|
249
|
+
stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
250
|
+
}
|
251
|
+
},
|
252
|
+
"& .textAlignIconSameStyles": {
|
253
|
+
"& path": {
|
254
|
+
fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
255
|
+
}
|
256
|
+
},
|
257
|
+
"& .orderedListIcon": {
|
258
|
+
"& path": {
|
259
|
+
stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
260
|
+
},
|
261
|
+
"& text": {
|
262
|
+
fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
263
|
+
}
|
264
|
+
},
|
265
|
+
"& .bulletedListTextIcon": {
|
266
|
+
"& path": {
|
267
|
+
fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
|
268
|
+
stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
269
|
+
},
|
270
|
+
"& circle": {
|
271
|
+
fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
272
|
+
}
|
273
|
+
},
|
274
|
+
"& .checkedListTextIcon": {
|
275
|
+
"& path": {
|
276
|
+
stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
277
|
+
}
|
278
|
+
},
|
279
|
+
"& .accordianListTextIcon": {
|
280
|
+
// stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
|
281
|
+
"& svg": {
|
282
|
+
fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
|
283
|
+
stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
284
|
+
},
|
285
|
+
"& path": {
|
286
|
+
fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
|
287
|
+
stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
288
|
+
}
|
289
|
+
}
|
290
|
+
},
|
291
|
+
autoCompleteaFontFamily: {
|
292
|
+
"& .MuiOutlinedInput-root": {
|
293
|
+
borderRadius: "8px",
|
294
|
+
backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
|
295
|
+
fontSize: "14px",
|
296
|
+
height: "36px"
|
297
|
+
},
|
298
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
299
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
|
300
|
+
}
|
301
|
+
},
|
302
|
+
textFormatSelect: {
|
303
|
+
background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
|
304
|
+
width: "100%",
|
305
|
+
height: "36px",
|
306
|
+
borderRadius: "10px",
|
307
|
+
fontSize: "12px",
|
308
|
+
fontFamily: "Inter, sans-serif",
|
309
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
310
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
|
311
|
+
}
|
312
|
+
},
|
313
|
+
textFormatSelectOptions: {
|
314
|
+
margin: "5px !important",
|
315
|
+
borderRadius: "4px !important",
|
316
|
+
fontSize: "12px !important",
|
317
|
+
fontWeight: 500,
|
318
|
+
"&.Mui-selected": {
|
319
|
+
background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
|
320
|
+
color: `${theme?.palette?.editor?.menuOptionTextColor} !important`
|
321
|
+
}
|
322
|
+
},
|
185
323
|
textFormatFieldBorder: {
|
186
324
|
display: "flex",
|
187
325
|
alignItems: "center",
|
@@ -191,7 +329,8 @@ const usePopupStyle = theme => ({
|
|
191
329
|
boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
|
192
330
|
},
|
193
331
|
dividerGrid: {
|
194
|
-
margin: "5px 0px 10px 0px"
|
332
|
+
margin: "5px 0px 10px 0px",
|
333
|
+
background: `${theme?.palette?.editor?.deviderBgColor} !important`
|
195
334
|
},
|
196
335
|
textFormatColorWrpr: {
|
197
336
|
display: "flex",
|
@@ -301,58 +440,95 @@ const usePopupStyle = theme => ({
|
|
301
440
|
}
|
302
441
|
},
|
303
442
|
btnGroup: {
|
304
|
-
|
443
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`,
|
444
|
+
borderRadius: "7px",
|
445
|
+
backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
|
305
446
|
"& button": {
|
306
|
-
backgroundColor: theme?.palette?.editor?.
|
447
|
+
backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
|
307
448
|
marginRight: "0px",
|
308
449
|
color: theme?.palette?.editor?.textColor,
|
309
|
-
borderColor:
|
450
|
+
borderColor: "#ffffff00 !important",
|
310
451
|
textTransform: "capitalize",
|
311
452
|
marginBottom: "0px",
|
312
|
-
"&:hover": {
|
313
|
-
color: theme?.palette?.editor?.borderColor,
|
314
|
-
background: theme?.palette?.editor?.background
|
315
|
-
},
|
316
453
|
"&.active": {
|
317
454
|
background: theme?.palette?.editor?.background,
|
318
455
|
color: theme?.palette?.editor?.activeColor
|
319
456
|
},
|
320
457
|
"&.no-hover": {
|
321
|
-
border: `1px solid
|
458
|
+
border: `1px solid #ffffff00`
|
322
459
|
}
|
460
|
+
},
|
461
|
+
"& .colorBox": {
|
462
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
463
|
+
borderRadius: "7px 0px 0px 7px",
|
464
|
+
fontSize: "12px !important",
|
465
|
+
fontWeight: 500
|
466
|
+
},
|
467
|
+
"& .colorPicker": {
|
468
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
469
|
+
borderRadius: "0px 7px 7px 0px"
|
470
|
+
},
|
471
|
+
"& .vl": {
|
472
|
+
background: theme?.palette?.editor?.borderColor,
|
473
|
+
width: "2px",
|
474
|
+
height: "25px",
|
475
|
+
margin: "5px 0px"
|
323
476
|
}
|
324
477
|
},
|
325
478
|
btnGroup2: {
|
326
|
-
|
479
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`,
|
480
|
+
borderRadius: "7px",
|
481
|
+
backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
|
327
482
|
"& button": {
|
328
483
|
backgroundColor: theme?.palette?.editor?.background,
|
329
484
|
marginRight: "0px",
|
330
485
|
color: theme?.palette?.editor?.textColor,
|
331
|
-
borderColor:
|
486
|
+
borderColor: "#ffffff00 !important",
|
332
487
|
textTransform: "capitalize",
|
333
488
|
marginBottom: "0px",
|
334
|
-
"&:hover": {
|
335
|
-
|
336
|
-
|
337
|
-
},
|
489
|
+
// "&:hover": {
|
490
|
+
// color: theme?.palette?.editor?.borderColor,
|
491
|
+
// background: theme?.palette?.editor?.background,
|
492
|
+
// },
|
338
493
|
"&.active": {
|
339
494
|
background: theme?.palette?.editor?.background,
|
340
495
|
color: theme?.palette?.editor?.activeColor
|
341
496
|
},
|
342
497
|
"&.no-hover": {
|
343
|
-
border: `1px solid
|
344
|
-
|
498
|
+
border: `1px solid #ffffff00`,
|
499
|
+
borderRadius: "7px 0px 0px 7px"
|
345
500
|
}
|
501
|
+
},
|
502
|
+
"& .colorBox": {
|
503
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
504
|
+
borderRadius: "7px 0px 0px 7px",
|
505
|
+
fontSize: "12px !important",
|
506
|
+
fontWeight: 500
|
507
|
+
},
|
508
|
+
"& .colorPicker": {
|
509
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
510
|
+
borderRadius: "0px 7px 7px 0px"
|
511
|
+
},
|
512
|
+
"& .vl": {
|
513
|
+
background: theme?.palette?.editor?.borderColor,
|
514
|
+
width: "2px",
|
515
|
+
height: "25px",
|
516
|
+
margin: "5px 0px"
|
346
517
|
}
|
347
518
|
},
|
348
519
|
allColor: {
|
520
|
+
borderRadius: "7px !important",
|
349
521
|
"& .buttonsWrpr": {
|
522
|
+
backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
|
523
|
+
border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
|
524
|
+
borderRadius: "7px !important",
|
350
525
|
"& button": {
|
351
526
|
color: theme?.palette?.editor?.textColor
|
352
527
|
}
|
353
528
|
}
|
354
529
|
},
|
355
530
|
allColorInner: {
|
531
|
+
borderRadius: "7px !important",
|
356
532
|
"& .buttonsWrpr": {
|
357
533
|
"& button": {
|
358
534
|
border: "1px solid #ccc",
|
@@ -382,7 +558,7 @@ const usePopupStyle = theme => ({
|
|
382
558
|
padding: "0px 10px"
|
383
559
|
},
|
384
560
|
defaultBtn2: {
|
385
|
-
color:
|
561
|
+
color: `${theme?.palette?.editor?.deafultColorOptionTextColor} !important`,
|
386
562
|
textTransform: "none",
|
387
563
|
textDecorationLine: "underline",
|
388
564
|
textUnderlineOffset: "2px",
|
@@ -430,10 +606,24 @@ const usePopupStyle = theme => ({
|
|
430
606
|
}
|
431
607
|
},
|
432
608
|
textOptions: {
|
433
|
-
backgroundColor: theme?.palette?.editor?.
|
434
|
-
color: theme?.palette?.editor?.textColor
|
609
|
+
backgroundColor: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`,
|
610
|
+
color: theme?.palette?.editor?.textColor,
|
611
|
+
borderRadius: "8px !important",
|
612
|
+
fontFamily: "Inter, sans-serif",
|
613
|
+
"& .MuiList-root": {
|
614
|
+
padding: "0px !important"
|
615
|
+
}
|
435
616
|
},
|
436
617
|
textSize: {
|
618
|
+
height: "36px !important",
|
619
|
+
"& .MuiOutlinedInput-root": {
|
620
|
+
borderRadius: "8px !important",
|
621
|
+
height: "36px !important",
|
622
|
+
background: `${theme?.palette?.editor?.inputFieldBgColor} !important`
|
623
|
+
},
|
624
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
625
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
|
626
|
+
},
|
437
627
|
"& .textFontArrows": {
|
438
628
|
"& svg": {
|
439
629
|
stroke: theme?.palette?.editor?.textColor
|
@@ -441,41 +631,76 @@ const usePopupStyle = theme => ({
|
|
441
631
|
}
|
442
632
|
},
|
443
633
|
closeBtn: {
|
444
|
-
|
445
|
-
color: theme?.palette?.editor?.
|
634
|
+
background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
|
635
|
+
color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
|
446
636
|
},
|
447
637
|
colorPickerPopup: {
|
448
638
|
margin: "30px",
|
449
639
|
"& .MuiPaper-root": {
|
450
640
|
overflow: "auto",
|
451
|
-
backgroundColor: theme?.palette?.editor?.background
|
641
|
+
backgroundColor: theme?.palette?.editor?.background,
|
642
|
+
borderRadius: "14px !important",
|
643
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
|
452
644
|
},
|
453
645
|
"& .popup_tabs": {
|
454
|
-
backgroundColor: theme?.palette?.editor?.
|
646
|
+
backgroundColor: theme?.palette?.editor?.inputFieldBgColor
|
455
647
|
},
|
456
648
|
"& .popup_tabs-header": {
|
457
|
-
|
649
|
+
fontFamily: "Inter, sans-serif",
|
650
|
+
fontWeight: 700,
|
651
|
+
fontSize: "12px !important",
|
652
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
|
458
653
|
"& .popup_tabs-header-label-active": {
|
459
654
|
color: theme?.palette?.editor?.activeColor,
|
460
|
-
backgroundColor: theme?.palette?.editor?.
|
655
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground
|
461
656
|
}
|
462
657
|
},
|
658
|
+
"& .popup_tabs-body": {
|
659
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground
|
660
|
+
},
|
463
661
|
"& .colorpicker": {
|
464
|
-
backgroundColor: theme?.palette?.editor?.
|
662
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground
|
465
663
|
},
|
466
664
|
"& .color-picker-panel": {
|
467
|
-
backgroundColor: theme?.palette?.editor?.
|
665
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground
|
468
666
|
},
|
469
667
|
"& .input_rgba": {
|
470
668
|
"& input": {
|
471
|
-
backgroundColor: theme?.palette?.editor?.
|
472
|
-
color: theme?.palette?.editor?.textColor
|
669
|
+
backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
|
670
|
+
color: theme?.palette?.editor?.textColor,
|
671
|
+
height: "32px !important",
|
672
|
+
borderRadius: "10px !important",
|
673
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
|
674
|
+
boxShadow: "none",
|
675
|
+
"&:hover": {
|
676
|
+
backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
|
677
|
+
},
|
678
|
+
"&:focus": {
|
679
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
|
680
|
+
backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
|
681
|
+
boxShadow: "none"
|
682
|
+
}
|
683
|
+
},
|
684
|
+
"& .input_rgba-hex-label": {
|
685
|
+
top: "4px !important"
|
686
|
+
},
|
687
|
+
"& .input_rgba-alpha-label": {
|
688
|
+
top: "6px !important"
|
689
|
+
},
|
690
|
+
"& .input_rgba-label": {
|
691
|
+
display: "none"
|
692
|
+
}
|
693
|
+
},
|
694
|
+
"& .default-color-panel": {
|
695
|
+
"& .default-color-panel_item": {
|
696
|
+
borderRadius: "50%"
|
473
697
|
}
|
474
698
|
}
|
475
699
|
},
|
476
700
|
colorPopper: {
|
477
701
|
"& .MuiPaper-root": {
|
478
702
|
backgroundColor: theme?.palette?.editor?.background,
|
703
|
+
borderRadius: "7px !important",
|
479
704
|
"@media only screen and (max-width: 600px)": {
|
480
705
|
marginTop: "-40px"
|
481
706
|
}
|
@@ -32,7 +32,8 @@ const TextFormat = props => {
|
|
32
32
|
const [type, setType] = useState(null);
|
33
33
|
const open = Boolean(anchorEl);
|
34
34
|
const {
|
35
|
-
fontFamilies
|
35
|
+
fontFamilies,
|
36
|
+
theme
|
36
37
|
} = useEditorContext();
|
37
38
|
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
38
39
|
const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
|
@@ -145,7 +146,7 @@ const TextFormat = props => {
|
|
145
146
|
}), /*#__PURE__*/_jsx(Grid, {
|
146
147
|
item: true,
|
147
148
|
xs: 12,
|
148
|
-
sx: classes.
|
149
|
+
sx: classes.textFormatField3,
|
149
150
|
children: /*#__PURE__*/_jsx(Dropdown, {
|
150
151
|
classes: classes,
|
151
152
|
...fontWeight,
|
@@ -242,7 +243,7 @@ const TextFormat = props => {
|
|
242
243
|
children: /*#__PURE__*/_jsx(Button, {
|
243
244
|
sx: classes.defaultBtn2,
|
244
245
|
startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
|
245
|
-
stroke: "#A2B0B9"
|
246
|
+
stroke: theme?.palette?.type === "dark" ? "#505359" : "#A2B0B9"
|
246
247
|
}),
|
247
248
|
onClick: handleDefault({
|
248
249
|
format: "bgColor"
|
@@ -378,7 +379,7 @@ const TextFormat = props => {
|
|
378
379
|
children: [/*#__PURE__*/_jsxs(ButtonGroup, {
|
379
380
|
sx: classes.btnGroup,
|
380
381
|
children: [/*#__PURE__*/_jsx(Button, {
|
381
|
-
className: `no-hover ${bqBgColor ? "active" : ""}`,
|
382
|
+
className: `no-hover ${bqBgColor ? "active" : ""} colorBox`,
|
382
383
|
onClick: handleQuote({
|
383
384
|
bgColor: !bqBgColor ? "rgb(227, 236, 255)" : null
|
384
385
|
}),
|
@@ -386,14 +387,17 @@ const TextFormat = props => {
|
|
386
387
|
background: bqBgColor
|
387
388
|
},
|
388
389
|
children: "Colorbox"
|
390
|
+
}), /*#__PURE__*/_jsx("div", {
|
391
|
+
className: "vl"
|
389
392
|
}), /*#__PURE__*/_jsx(Button, {
|
390
393
|
onClick: handleColorPicker("bgColor"),
|
394
|
+
className: "colorPicker",
|
391
395
|
children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
|
392
396
|
})]
|
393
397
|
}), /*#__PURE__*/_jsxs(ButtonGroup, {
|
394
398
|
sx: classes.btnGroup2,
|
395
399
|
children: [/*#__PURE__*/_jsx(Button, {
|
396
|
-
className: `no-hover
|
400
|
+
className: `no-hover colorBox`,
|
397
401
|
onClick: handleQuote({
|
398
402
|
color: !bqColor ? "rgb(47, 94, 188)" : null
|
399
403
|
}),
|
@@ -405,8 +409,11 @@ const TextFormat = props => {
|
|
405
409
|
},
|
406
410
|
children: "Quote"
|
407
411
|
})
|
412
|
+
}), /*#__PURE__*/_jsx("div", {
|
413
|
+
className: "vl"
|
408
414
|
}), /*#__PURE__*/_jsx(Button, {
|
409
415
|
onClick: handleColorPicker("color"),
|
416
|
+
className: "colorPicker",
|
410
417
|
children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
|
411
418
|
})]
|
412
419
|
})]
|
@@ -1,18 +1,17 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { MdFormatQuote,
|
3
|
-
import { BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft
|
2
|
+
import { MdFormatQuote, MdAdd, MdArrowForward, MdOutlinePermMedia } from "react-icons/md";
|
3
|
+
import { BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
|
4
4
|
import { FaSuperscript, FaSubscript } from "react-icons/fa";
|
5
5
|
import { FcAddRow, FcAddColumn } from "react-icons/fc";
|
6
6
|
import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
|
7
7
|
import { SiLatex } from "react-icons/si";
|
8
8
|
import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
|
9
|
-
import {
|
10
|
-
import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, AppHeader, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
|
9
|
+
import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
|
11
10
|
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
|
12
11
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
13
12
|
import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
|
14
13
|
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
15
|
-
import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon } from "./iconListV2";
|
14
|
+
import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
|
16
15
|
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
17
16
|
import SettingsIcon from "../assets/svg/SettingsIcon";
|
18
17
|
import UndoIcon from "../assets/svg/UndoIcon";
|
@@ -60,7 +59,8 @@ const iconList = {
|
|
60
59
|
}),
|
61
60
|
blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
|
62
61
|
size: 20,
|
63
|
-
fill: "#64748B"
|
62
|
+
fill: "#64748B",
|
63
|
+
className: "blockQuoteSvg"
|
64
64
|
}),
|
65
65
|
doublequote: /*#__PURE__*/_jsx(MdFormatQuote, {
|
66
66
|
size: 20,
|
@@ -74,19 +74,19 @@ const iconList = {
|
|
74
74
|
size: 15,
|
75
75
|
fill: "#64748B"
|
76
76
|
}),
|
77
|
-
alignLeft: /*#__PURE__*/_jsx(
|
77
|
+
alignLeft: /*#__PURE__*/_jsx(LeftAlignTextFormat, {
|
78
78
|
size: 18,
|
79
79
|
fill: "#64748B"
|
80
80
|
}),
|
81
|
-
alignCenter: /*#__PURE__*/_jsx(
|
81
|
+
alignCenter: /*#__PURE__*/_jsx(CenterAlignTextFormat, {
|
82
82
|
size: 18,
|
83
83
|
fill: "#64748B"
|
84
84
|
}),
|
85
|
-
alignRight: /*#__PURE__*/_jsx(
|
85
|
+
alignRight: /*#__PURE__*/_jsx(RightAlignTextFormat, {
|
86
86
|
size: 18,
|
87
87
|
fill: "#64748B"
|
88
88
|
}),
|
89
|
-
alignJustify: /*#__PURE__*/_jsx(
|
89
|
+
alignJustify: /*#__PURE__*/_jsx(JustifyTextFormat, {
|
90
90
|
size: 18,
|
91
91
|
fill: "#64748B"
|
92
92
|
}),
|
@@ -200,7 +200,7 @@ const iconList = {
|
|
200
200
|
accordionArrowDown: /*#__PURE__*/_jsx(ArrowDropDownIcon, {
|
201
201
|
size: 20
|
202
202
|
}),
|
203
|
-
appHeader: /*#__PURE__*/_jsx(
|
203
|
+
appHeader: /*#__PURE__*/_jsx(AppHeaderElement, {}),
|
204
204
|
moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
|
205
205
|
docsUpload: /*#__PURE__*/_jsx(DocUploadElementIcon, {}),
|
206
206
|
colorbox: /*#__PURE__*/_jsx(ColorBoxElementIcon, {
|
@@ -220,19 +220,14 @@ const iconList = {
|
|
220
220
|
SearchIcon: /*#__PURE__*/_jsx(SearchIcon, {}),
|
221
221
|
expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
|
222
222
|
closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
|
223
|
-
embedScript: /*#__PURE__*/_jsx(
|
223
|
+
embedScript: /*#__PURE__*/_jsx(CodeElementIcon, {
|
224
224
|
className: "fg-op-ico",
|
225
225
|
size: 20,
|
226
226
|
style: {
|
227
227
|
fill: "#64748B"
|
228
228
|
}
|
229
229
|
}),
|
230
|
-
freegrid: /*#__PURE__*/_jsx(
|
231
|
-
size: 20,
|
232
|
-
style: {
|
233
|
-
fill: "#64748B"
|
234
|
-
}
|
235
|
-
}),
|
230
|
+
freegrid: /*#__PURE__*/_jsx(FreeGridElement, {}),
|
236
231
|
text: /*#__PURE__*/_jsx(Text, {
|
237
232
|
stroke: "#64748B"
|
238
233
|
}),
|