@flozy/editor 4.0.1 → 4.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +3 -19
- package/dist/Editor/CommonEditor.js +181 -109
- package/dist/Editor/Editor.css +31 -3
- package/dist/Editor/Elements/AI/AIInput.js +31 -33
- package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
- package/dist/Editor/Elements/AI/PopoverAIInput.js +73 -97
- package/dist/Editor/Elements/AI/Styles.js +2 -2
- package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
- package/dist/Editor/Elements/AI/VoiceToText/index.js +184 -0
- package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
- package/dist/Editor/Elements/AI/helper.js +5 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +5 -10
- package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
- package/dist/Editor/Elements/Button/EditorButton.js +28 -16
- package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -15
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +3 -1
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
- package/dist/Editor/Elements/Grid/Grid.js +27 -3
- package/dist/Editor/Elements/Grid/GridItem.js +3 -1
- package/dist/Editor/Elements/Link/Link.js +6 -1
- package/dist/Editor/Elements/Link/LinkButton.js +4 -2
- package/dist/Editor/Elements/Link/LinkPopup.js +73 -14
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
- package/dist/Editor/Elements/List/CheckList.js +1 -2
- package/dist/Editor/Elements/NewLine/NewLineButton.js +2 -1
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
- package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
- package/dist/Editor/Elements/Signature/Signature.css +13 -6
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +2 -1
- package/dist/Editor/Elements/Signature/SignaturePopup.js +185 -30
- package/dist/Editor/Elements/SimpleText/index.js +11 -1
- package/dist/Editor/Elements/SimpleText/style.js +1 -1
- package/dist/Editor/Elements/Table/Styles.js +23 -1
- package/dist/Editor/Elements/Table/Table.js +2 -1
- package/dist/Editor/Elements/Table/TableCell.js +69 -7
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
- package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
- package/dist/Editor/MiniEditor.js +3 -1
- package/dist/Editor/Styles/EditorStyles.js +1 -1
- package/dist/Editor/Toolbar/Basic/index.js +4 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +31 -20
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +36 -5
- package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
- package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +12 -13
- package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +12 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +3 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +59 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +123 -44
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +106 -44
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +7 -6
- package/dist/Editor/Toolbar/toolbarGroups.js +53 -11
- package/dist/Editor/assets/svg/AIIcons.js +153 -1
- package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
- package/dist/Editor/assets/svg/RedoIcon.js +27 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
- package/dist/Editor/assets/svg/TextIcon.js +8 -5
- package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
- package/dist/Editor/assets/svg/UndoIcon.js +27 -0
- package/dist/Editor/common/ColorPickerButton.js +26 -18
- package/dist/Editor/common/CustomColorPicker/index.js +106 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog/index.js +94 -0
- package/dist/Editor/common/CustomDialog/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +33 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
- package/dist/Editor/common/EditorIcons.js +7 -7
- package/dist/Editor/common/Icon.js +64 -25
- package/dist/Editor/common/ImageList.js +16 -3
- package/dist/Editor/common/ImageSelector/ImageSelector.js +30 -9
- package/dist/Editor/common/ImageSelector/Styles.js +2 -1
- package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
- package/dist/Editor/common/LinkSettings/index.js +4 -2
- package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
- package/dist/Editor/common/LinkSettings/style.js +11 -8
- package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
- package/dist/Editor/common/Section/index.js +57 -7
- package/dist/Editor/common/Section/styles.js +11 -0
- package/dist/Editor/common/Shorthands/elements.js +63 -9
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +1 -2
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +29 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/common/iconListV2.js +843 -0
- package/dist/Editor/common/iconslist.js +0 -31
- package/dist/Editor/commonStyle.js +6 -0
- package/dist/Editor/helper/index.js +0 -22
- package/dist/Editor/helper/theme.js +189 -3
- package/dist/Editor/hooks/useEditorTheme.js +139 -0
- package/dist/Editor/hooks/useMouseMove.js +4 -1
- package/dist/Editor/hooks/useWindowMessage.js +10 -7
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +144 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
- package/dist/Editor/themeSettings/buttons/index.js +290 -0
- package/dist/Editor/themeSettings/buttons/style.js +21 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
- package/dist/Editor/themeSettings/fonts/index.js +213 -0
- package/dist/Editor/themeSettings/fonts/style.js +44 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +320 -0
- package/dist/Editor/themeSettings/style.js +152 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +356 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
- package/dist/Editor/themeSettingsAI/style.js +247 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +169 -27
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/events.js +54 -2
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/helper.js +31 -2
- package/dist/Editor/utils/table.js +51 -43
- package/package.json +4 -3
@@ -1,11 +1,12 @@
|
|
1
1
|
const usePopupStyle = theme => ({
|
2
2
|
popupWrapper: {
|
3
|
-
boxShadow: "
|
3
|
+
boxShadow: "1px 2px 15px 0px #2563EB40",
|
4
4
|
zIndex: 1300,
|
5
5
|
marginBottom: "12px !important",
|
6
|
-
border: "1px solid #
|
6
|
+
border: "1px solid #D8DDE1",
|
7
7
|
borderRadius: "10px",
|
8
8
|
maxWidth: "100%",
|
9
|
+
// maxHeight: "40px",
|
9
10
|
"&.fullscreen": {
|
10
11
|
marginBottom: "0px !important",
|
11
12
|
"& .papper-wrpr": {
|
@@ -19,7 +20,7 @@ const usePopupStyle = theme => ({
|
|
19
20
|
backgroundColor: theme?.palette?.editor?.background
|
20
21
|
},
|
21
22
|
"&.textSettings": {
|
22
|
-
|
23
|
+
"@media only screen and (max-width: 600px)": {
|
23
24
|
margin: "4px !important",
|
24
25
|
marginBottom: "54px !important"
|
25
26
|
}
|
@@ -61,8 +62,9 @@ const usePopupStyle = theme => ({
|
|
61
62
|
},
|
62
63
|
textFormatWrapper: {
|
63
64
|
padding: "0px 16px 16px 16px",
|
64
|
-
width: "
|
65
|
+
width: "323px",
|
65
66
|
maxWidth: "100%",
|
67
|
+
overflowX: "hidden !important",
|
66
68
|
// 30% of window height
|
67
69
|
maxHeight: `${window.innerHeight * 0.45}px`,
|
68
70
|
overflow: "auto",
|
@@ -78,7 +80,7 @@ const usePopupStyle = theme => ({
|
|
78
80
|
paddingTop: "4px"
|
79
81
|
},
|
80
82
|
"@media only screen and (max-width: 599px)": {
|
81
|
-
width:
|
83
|
+
width: "330px"
|
82
84
|
}
|
83
85
|
},
|
84
86
|
"&.templates": {
|
@@ -89,7 +91,7 @@ const usePopupStyle = theme => ({
|
|
89
91
|
maxHeight: "fit-content"
|
90
92
|
},
|
91
93
|
"@media only screen and (max-width: 599px)": {
|
92
|
-
width:
|
94
|
+
width: "330px"
|
93
95
|
}
|
94
96
|
},
|
95
97
|
"& .headerContainer": {},
|
@@ -108,14 +110,19 @@ const usePopupStyle = theme => ({
|
|
108
110
|
borderRadius: "0px",
|
109
111
|
width: "100%",
|
110
112
|
justifyContent: "start",
|
113
|
+
borderRadius: "10px !important",
|
114
|
+
transition: "background-color 0.3s ease",
|
115
|
+
"&:hover": {
|
116
|
+
backgroundColor: "#E9F3FE"
|
117
|
+
},
|
111
118
|
"& svg": {
|
112
119
|
width: "24px",
|
113
|
-
height: "
|
120
|
+
height: "19px",
|
114
121
|
marginRight: "8px"
|
115
122
|
},
|
116
123
|
"& span": {
|
117
124
|
fontSize: "14px",
|
118
|
-
color: "#
|
125
|
+
color: "#0F172A"
|
119
126
|
}
|
120
127
|
},
|
121
128
|
// for command list style
|
@@ -144,7 +151,7 @@ const usePopupStyle = theme => ({
|
|
144
151
|
}
|
145
152
|
},
|
146
153
|
"@media only screen and (max-width: 599px)": {
|
147
|
-
width:
|
154
|
+
width: "330px"
|
148
155
|
}
|
149
156
|
},
|
150
157
|
textFormatLabel: {
|
@@ -155,17 +162,26 @@ const usePopupStyle = theme => ({
|
|
155
162
|
lineHeight: "25px",
|
156
163
|
marginTop: "12px",
|
157
164
|
marginBottom: "8px",
|
158
|
-
|
165
|
+
"& .searchContainer": {
|
159
166
|
position: "absolute",
|
160
167
|
right: 0,
|
161
168
|
zIndex: 3
|
162
169
|
},
|
163
|
-
|
164
|
-
padding:
|
170
|
+
"& .MuiFormControl-root.MuiTextField-root input": {
|
171
|
+
padding: "8px 35px 6px 12px"
|
165
172
|
}
|
166
173
|
},
|
167
174
|
textFormatField: {
|
168
|
-
marginBottom: "16px"
|
175
|
+
marginBottom: "16px",
|
176
|
+
marginTop: "10px"
|
177
|
+
},
|
178
|
+
textFormatField1: {
|
179
|
+
marginBottom: "16px",
|
180
|
+
marginTop: "10px"
|
181
|
+
},
|
182
|
+
textFormatField2: {
|
183
|
+
// marginBottom: "16px",
|
184
|
+
marginTop: "10px"
|
169
185
|
},
|
170
186
|
textFormatFieldBorder: {
|
171
187
|
display: "flex",
|
@@ -175,6 +191,9 @@ const usePopupStyle = theme => ({
|
|
175
191
|
borderRadius: "8px",
|
176
192
|
boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
|
177
193
|
},
|
194
|
+
dividerGrid: {
|
195
|
+
margin: "5px 0px 10px 0px"
|
196
|
+
},
|
178
197
|
textFormatColorWrpr: {
|
179
198
|
display: "flex",
|
180
199
|
alignItems: "center",
|
@@ -191,7 +210,7 @@ const usePopupStyle = theme => ({
|
|
191
210
|
},
|
192
211
|
"&.typo-icons": {
|
193
212
|
"& button": {
|
194
|
-
width: "
|
213
|
+
width: "31px",
|
195
214
|
height: "36px"
|
196
215
|
}
|
197
216
|
},
|
@@ -205,6 +224,13 @@ const usePopupStyle = theme => ({
|
|
205
224
|
fontSize: "14px",
|
206
225
|
marginBottom: "5px",
|
207
226
|
paddingLeft: "5px",
|
227
|
+
fontWeight: 500,
|
228
|
+
color: "#000000"
|
229
|
+
},
|
230
|
+
typoLabel2: {
|
231
|
+
fontSize: "14px",
|
232
|
+
marginBottom: "5px",
|
233
|
+
paddingLeft: "10px",
|
208
234
|
fontWeight: 500
|
209
235
|
},
|
210
236
|
templateCard: {
|
@@ -297,6 +323,29 @@ const usePopupStyle = theme => ({
|
|
297
323
|
}
|
298
324
|
}
|
299
325
|
},
|
326
|
+
btnGroup2: {
|
327
|
+
backgroundColor: theme?.palette?.editor?.background,
|
328
|
+
"& button": {
|
329
|
+
backgroundColor: theme?.palette?.editor?.background,
|
330
|
+
marginRight: "0px",
|
331
|
+
color: theme?.palette?.editor?.textColor,
|
332
|
+
borderColor: theme?.palette?.editor?.borderColor,
|
333
|
+
textTransform: "capitalize",
|
334
|
+
marginBottom: "0px",
|
335
|
+
"&:hover": {
|
336
|
+
color: theme?.palette?.editor?.borderColor,
|
337
|
+
background: theme?.palette?.editor?.background
|
338
|
+
},
|
339
|
+
"&.active": {
|
340
|
+
background: theme?.palette?.editor?.background,
|
341
|
+
color: theme?.palette?.editor?.activeColor
|
342
|
+
},
|
343
|
+
"&.no-hover": {
|
344
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`,
|
345
|
+
padding: "0px 5px !important"
|
346
|
+
}
|
347
|
+
}
|
348
|
+
},
|
300
349
|
allColor: {
|
301
350
|
"& .buttonsWrpr": {
|
302
351
|
"& button": {
|
@@ -326,9 +375,28 @@ const usePopupStyle = theme => ({
|
|
326
375
|
}
|
327
376
|
}
|
328
377
|
},
|
378
|
+
defaultBtn1: {
|
379
|
+
color: "#2563EB !important",
|
380
|
+
textTransform: "none",
|
381
|
+
textDecorationLine: "underline",
|
382
|
+
textUnderlineOffset: "2px",
|
383
|
+
padding: "0px 10px"
|
384
|
+
},
|
385
|
+
defaultBtn2: {
|
386
|
+
color: "#A2B0B9 !important",
|
387
|
+
textTransform: "none",
|
388
|
+
textDecorationLine: "underline",
|
389
|
+
textUnderlineOffset: "2px",
|
390
|
+
padding: "0px 10px"
|
391
|
+
},
|
329
392
|
defaultBtn: {
|
330
|
-
color: "#
|
331
|
-
textTransform: "none"
|
393
|
+
color: "#2563EB !important",
|
394
|
+
textTransform: "none",
|
395
|
+
textDecoration: "underline",
|
396
|
+
"&.Mui-disabled": {
|
397
|
+
color: "#A0AEC0 !important",
|
398
|
+
textDecoration: "none"
|
399
|
+
}
|
332
400
|
},
|
333
401
|
templateCardBtnGrp: {
|
334
402
|
display: "none",
|
@@ -383,6 +451,7 @@ const usePopupStyle = theme => ({
|
|
383
451
|
color: theme?.palette?.editor?.textColor
|
384
452
|
},
|
385
453
|
colorPickerPopup: {
|
454
|
+
margin: "30px",
|
386
455
|
"& .MuiPaper-root": {
|
387
456
|
overflow: "auto",
|
388
457
|
backgroundColor: theme?.palette?.editor?.background
|
@@ -413,15 +482,17 @@ const usePopupStyle = theme => ({
|
|
413
482
|
colorPopper: {
|
414
483
|
"& .MuiPaper-root": {
|
415
484
|
backgroundColor: theme?.palette?.editor?.background,
|
416
|
-
|
485
|
+
padding: "4px 14px",
|
486
|
+
"@media only screen and (max-width: 600px)": {
|
417
487
|
marginTop: "-40px"
|
418
488
|
}
|
419
489
|
}
|
420
490
|
},
|
421
491
|
fullViewCardMedia: {
|
492
|
+
margin: "5px 0px",
|
422
493
|
width: "100%",
|
423
494
|
backgroundPosition: "left top",
|
424
|
-
backgroundSize: "100
|
495
|
+
backgroundSize: "100%, auto",
|
425
496
|
zIndex: 1,
|
426
497
|
position: "relative",
|
427
498
|
"&.fullscreen": {
|
@@ -436,9 +507,10 @@ const usePopupStyle = theme => ({
|
|
436
507
|
}
|
437
508
|
},
|
438
509
|
buttonCardMedia: {
|
510
|
+
margin: "5px 0px",
|
439
511
|
width: "100%",
|
440
|
-
height: "
|
441
|
-
backgroundPosition: "
|
512
|
+
height: "40px",
|
513
|
+
backgroundPosition: "center",
|
442
514
|
backgroundSize: "contain",
|
443
515
|
zIndex: 1,
|
444
516
|
position: "relative",
|
@@ -447,26 +519,25 @@ const usePopupStyle = theme => ({
|
|
447
519
|
}
|
448
520
|
},
|
449
521
|
buttonCardMediaWrpr: {
|
522
|
+
padding: '5px',
|
450
523
|
position: "relative",
|
451
524
|
margin: "8px",
|
452
525
|
marginBottom: "0px",
|
453
|
-
|
454
|
-
"
|
455
|
-
|
526
|
+
'& .img-wrapper': {
|
527
|
+
"&:hover": {
|
528
|
+
padding: '0px 2px 0px 2px',
|
529
|
+
backgroundColor: '#E9F3FE',
|
530
|
+
border: '1px solid #2563EB40',
|
531
|
+
borderRadius: '5px',
|
532
|
+
height: "100%",
|
533
|
+
margin: "0px"
|
534
|
+
// "& .template-card-action": {
|
535
|
+
// display: "flex",
|
536
|
+
// },
|
456
537
|
}
|
457
|
-
},
|
458
|
-
"& .img-loader-wrapper": {
|
459
|
-
position: "absolute",
|
460
|
-
width: "12px",
|
461
|
-
height: "12px",
|
462
|
-
left: 0,
|
463
|
-
right: 0,
|
464
|
-
top: 0,
|
465
|
-
bottom: 0,
|
466
|
-
margin: "auto",
|
467
|
-
zIndex: 0
|
468
538
|
}
|
469
539
|
},
|
540
|
+
|
470
541
|
paperOverrides: {
|
471
542
|
"&.MuiPaper-root": {
|
472
543
|
background: "transparent",
|
@@ -475,7 +546,7 @@ const usePopupStyle = theme => ({
|
|
475
546
|
},
|
476
547
|
miniTextFormatWrapper: {
|
477
548
|
maxWidth: "100%",
|
478
|
-
padding: "
|
549
|
+
padding: "2px 8px",
|
479
550
|
overflowX: "auto",
|
480
551
|
"& .customSelectTool": {
|
481
552
|
padding: "0px 8px",
|
@@ -524,30 +595,38 @@ const usePopupStyle = theme => ({
|
|
524
595
|
},
|
525
596
|
customSelectPopoverWrapper: {
|
526
597
|
"& .MuiPopover-paper": {
|
527
|
-
maxHeight: '
|
528
|
-
|
598
|
+
maxHeight: 'fit-content',
|
599
|
+
// minWidth: "130px",
|
600
|
+
border: "1px solid #E4E8EB",
|
601
|
+
// background: theme?.palette?.editor?.background,
|
602
|
+
overflowY: 'hidden',
|
603
|
+
padding: "6px 12px 6px 0px",
|
529
604
|
'@media only screen and (max-width: 600px)': {
|
530
605
|
marginTop: "-40px"
|
531
606
|
}
|
532
607
|
},
|
533
608
|
"& .customSelectOptionLabel": {
|
534
609
|
color: theme?.palette?.editor?.textColor || "black",
|
535
|
-
margin: "0px",
|
610
|
+
margin: "0px 6px 0px 6px",
|
536
611
|
width: "100%",
|
537
612
|
justifyContent: "start",
|
538
613
|
paddingRight: "20px",
|
539
614
|
fontSize: "14px",
|
540
615
|
lineHeight: "1.75 !important",
|
541
616
|
fontWeight: 400,
|
542
|
-
background: theme?.palette?.editor?.background || "#fff",
|
617
|
+
// background: theme?.palette?.editor?.background || "#fff",
|
618
|
+
overflowY: "hidden",
|
543
619
|
"&:hover": {
|
544
|
-
background:
|
545
|
-
|
546
|
-
"&.selected": {
|
547
|
-
color: `${theme?.palette?.primary?.main} !important`,
|
548
|
-
background: `${theme?.palette?.action?.selected} !important`
|
620
|
+
background: `#E9F3FE !important`,
|
621
|
+
color: `#2563EB !important`
|
549
622
|
}
|
623
|
+
|
624
|
+
// "&.selected": {
|
625
|
+
// color: `#2563EB !important`,
|
626
|
+
// background: `${theme?.palette?.action?.selected} !important`
|
627
|
+
// }
|
550
628
|
},
|
629
|
+
|
551
630
|
"& .menuOptions": {
|
552
631
|
display: "flex",
|
553
632
|
alignItems: "center",
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
|
2
|
+
import { Button, ButtonGroup, Divider, Grid, Typography } from "@mui/material";
|
3
3
|
import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
|
4
4
|
import WidthFullIcon from "@mui/icons-material/WidthFull";
|
5
5
|
import WidthNormalIcon from "@mui/icons-material/WidthNormal";
|
@@ -14,6 +14,11 @@ import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
|
|
14
14
|
import { AllColors } from "../../Elements/Color Picker/ColorButtons";
|
15
15
|
import { fontFamilyMap } from "../../utils/font";
|
16
16
|
import { getBorderColor } from "../../utils/helper";
|
17
|
+
import SelectTypography from "./MiniTextFormat/SelectTypography";
|
18
|
+
import { isTextCustomized, saveToTheme } from "../../helper/theme";
|
19
|
+
import { useEditorTheme } from "../../hooks/useEditorTheme";
|
20
|
+
import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
|
21
|
+
import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
|
17
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
18
23
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
19
24
|
const allTools = toolbarGroups.flat();
|
@@ -23,18 +28,20 @@ const ButtonComp = {
|
|
23
28
|
const TextFormat = props => {
|
24
29
|
const {
|
25
30
|
classes,
|
26
|
-
editor
|
31
|
+
editor,
|
32
|
+
onClose,
|
33
|
+
closeMainPopup
|
27
34
|
} = props;
|
35
|
+
console.log("PROPS:", props);
|
28
36
|
const [anchorEl, setAnchorEl] = useState(null);
|
29
37
|
const [type, setType] = useState(null);
|
30
38
|
const open = Boolean(anchorEl);
|
31
39
|
const fontFamily = allTools.find(f => f.format === "fontFamily");
|
32
40
|
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
33
|
-
const fontStyle = allTools.filter(f => f.type === "mark");
|
41
|
+
const fontStyle = allTools.filter(f => f.type === "mark" && f.format != "strikethrough" && f.format != "superscript" && f.format != "subscript");
|
34
42
|
const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
|
35
43
|
const link = allTools.find(f => f.format?.indexOf("link") >= 0);
|
36
44
|
const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
|
37
|
-
const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
|
38
45
|
const {
|
39
46
|
pageProps
|
40
47
|
} = getPageSettings(editor)?.element || {};
|
@@ -52,6 +59,11 @@ const TextFormat = props => {
|
|
52
59
|
color: "",
|
53
60
|
bgColor: ""
|
54
61
|
};
|
62
|
+
const {
|
63
|
+
theme,
|
64
|
+
updateTheme
|
65
|
+
} = useEditorTheme();
|
66
|
+
const customized = isTextCustomized(editor);
|
55
67
|
const handlePageWidth = width => () => {
|
56
68
|
updatePageSettings(editor, {
|
57
69
|
...(pageProps || {}),
|
@@ -101,6 +113,49 @@ const TextFormat = props => {
|
|
101
113
|
container: true,
|
102
114
|
sx: classes.textFormatWrapper,
|
103
115
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
116
|
+
item: true,
|
117
|
+
xs: 12,
|
118
|
+
children: [/*#__PURE__*/_jsxs(Grid, {
|
119
|
+
container: true,
|
120
|
+
justifyContent: "space-between",
|
121
|
+
alignItems: "center",
|
122
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
123
|
+
item: true,
|
124
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
125
|
+
variant: "body1",
|
126
|
+
color: "primary",
|
127
|
+
sx: classes.typoLabel,
|
128
|
+
children: "Theme Style"
|
129
|
+
})
|
130
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
131
|
+
item: true,
|
132
|
+
children: theme?.id ? /*#__PURE__*/_jsx(Button, {
|
133
|
+
sx: classes.defaultBtn,
|
134
|
+
onClick: () => {
|
135
|
+
const {
|
136
|
+
field,
|
137
|
+
theme
|
138
|
+
} = saveToTheme(editor) || {};
|
139
|
+
updateTheme(theme, {
|
140
|
+
action: "ELEMENT_PROPS_CHANGE",
|
141
|
+
fieldName: field
|
142
|
+
});
|
143
|
+
},
|
144
|
+
disabled: !customized,
|
145
|
+
children: "Save to theme"
|
146
|
+
}) : null
|
147
|
+
})]
|
148
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
149
|
+
item: true,
|
150
|
+
xs: 12,
|
151
|
+
sx: classes.textFormatField,
|
152
|
+
children: /*#__PURE__*/_jsx(SelectTypography, {
|
153
|
+
editor: editor,
|
154
|
+
classes: classes,
|
155
|
+
closeMainPopup: () => {}
|
156
|
+
})
|
157
|
+
})]
|
158
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
104
159
|
item: true,
|
105
160
|
xs: 12,
|
106
161
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
@@ -118,19 +173,19 @@ const TextFormat = props => {
|
|
118
173
|
}), /*#__PURE__*/_jsx(Grid, {
|
119
174
|
item: true,
|
120
175
|
children: /*#__PURE__*/_jsx(Button, {
|
121
|
-
sx: classes.
|
122
|
-
startIcon: /*#__PURE__*/_jsx(
|
176
|
+
sx: classes.defaultBtn1,
|
177
|
+
startIcon: /*#__PURE__*/_jsx(TextDefaultStyleIcon, {}),
|
123
178
|
onClick: handleDefault({
|
124
179
|
format: "fontFamily",
|
125
180
|
val: Object.values(fontFamilyMap)[0]
|
126
181
|
}),
|
127
|
-
children: "Default"
|
182
|
+
children: "Default Text"
|
128
183
|
})
|
129
184
|
})]
|
130
185
|
}), /*#__PURE__*/_jsx(Grid, {
|
131
186
|
item: true,
|
132
187
|
xs: 12,
|
133
|
-
sx: classes.
|
188
|
+
sx: classes.textFormatField1,
|
134
189
|
children: /*#__PURE__*/_jsx(Dropdown, {
|
135
190
|
classes: classes,
|
136
191
|
...fontFamily,
|
@@ -180,10 +235,15 @@ const TextFormat = props => {
|
|
180
235
|
})
|
181
236
|
})]
|
182
237
|
})]
|
238
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
239
|
+
item: true,
|
240
|
+
xs: 12,
|
241
|
+
sx: classes.dividerGrid,
|
242
|
+
children: /*#__PURE__*/_jsx(Divider, {})
|
183
243
|
}), /*#__PURE__*/_jsxs(Grid, {
|
184
244
|
item: true,
|
185
245
|
xs: 12,
|
186
|
-
sx: classes.
|
246
|
+
sx: classes.textFormatField2,
|
187
247
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
188
248
|
container: true,
|
189
249
|
justifyContent: "space-between",
|
@@ -199,12 +259,12 @@ const TextFormat = props => {
|
|
199
259
|
}), /*#__PURE__*/_jsx(Grid, {
|
200
260
|
item: true,
|
201
261
|
children: /*#__PURE__*/_jsx(Button, {
|
202
|
-
sx: classes.
|
203
|
-
startIcon: /*#__PURE__*/_jsx(
|
262
|
+
sx: classes.defaultBtn1,
|
263
|
+
startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {}),
|
204
264
|
onClick: handleDefault({
|
205
265
|
format: "color"
|
206
266
|
}),
|
207
|
-
children: "Default"
|
267
|
+
children: "Default Color"
|
208
268
|
})
|
209
269
|
})]
|
210
270
|
}), /*#__PURE__*/_jsx(Grid, {
|
@@ -223,7 +283,7 @@ const TextFormat = props => {
|
|
223
283
|
}), /*#__PURE__*/_jsxs(Grid, {
|
224
284
|
item: true,
|
225
285
|
xs: 12,
|
226
|
-
sx: classes.
|
286
|
+
sx: classes.textFormatField2,
|
227
287
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
228
288
|
container: true,
|
229
289
|
justifyContent: "space-between",
|
@@ -234,19 +294,21 @@ const TextFormat = props => {
|
|
234
294
|
variant: "body1",
|
235
295
|
color: "primary",
|
236
296
|
sx: classes.typoLabel,
|
237
|
-
children: "
|
297
|
+
children: "Background Color"
|
238
298
|
})
|
239
299
|
}), /*#__PURE__*/_jsx(Grid, {
|
240
300
|
item: true,
|
241
301
|
children: /*#__PURE__*/_jsx(Grid, {
|
242
302
|
item: true,
|
243
303
|
children: /*#__PURE__*/_jsx(Button, {
|
244
|
-
sx: classes.
|
245
|
-
startIcon: /*#__PURE__*/_jsx(
|
304
|
+
sx: classes.defaultBtn2,
|
305
|
+
startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
|
306
|
+
stroke: "#A2B0B9"
|
307
|
+
}),
|
246
308
|
onClick: handleDefault({
|
247
309
|
format: "bgColor"
|
248
310
|
}),
|
249
|
-
children: "Default"
|
311
|
+
children: "Default Color"
|
250
312
|
})
|
251
313
|
})
|
252
314
|
})]
|
@@ -265,6 +327,11 @@ const TextFormat = props => {
|
|
265
327
|
id: "12_cc"
|
266
328
|
}, "12_cc")
|
267
329
|
})]
|
330
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
331
|
+
item: true,
|
332
|
+
xs: 12,
|
333
|
+
sx: classes.dividerGrid,
|
334
|
+
children: /*#__PURE__*/_jsx(Divider, {})
|
268
335
|
}), /*#__PURE__*/_jsxs(Grid, {
|
269
336
|
item: true,
|
270
337
|
xs: 6,
|
@@ -272,8 +339,8 @@ const TextFormat = props => {
|
|
272
339
|
children: [/*#__PURE__*/_jsx(Typography, {
|
273
340
|
variant: "body1",
|
274
341
|
color: "primary",
|
275
|
-
sx: classes.
|
276
|
-
children: "
|
342
|
+
sx: classes.typoLabel2,
|
343
|
+
children: "Alignment"
|
277
344
|
}), /*#__PURE__*/_jsx(Grid, {
|
278
345
|
item: true,
|
279
346
|
xs: 12,
|
@@ -292,7 +359,7 @@ const TextFormat = props => {
|
|
292
359
|
children: [/*#__PURE__*/_jsx(Typography, {
|
293
360
|
variant: "body1",
|
294
361
|
color: "primary",
|
295
|
-
sx: classes.
|
362
|
+
sx: classes.typoLabel2,
|
296
363
|
children: "Lists"
|
297
364
|
}), /*#__PURE__*/_jsx(Grid, {
|
298
365
|
item: true,
|
@@ -306,6 +373,11 @@ const TextFormat = props => {
|
|
306
373
|
}, `pptool_block_${i}_${m.id}`);
|
307
374
|
})
|
308
375
|
})]
|
376
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
377
|
+
item: true,
|
378
|
+
xs: 12,
|
379
|
+
sx: classes.dividerGrid,
|
380
|
+
children: /*#__PURE__*/_jsx(Divider, {})
|
309
381
|
}), /*#__PURE__*/_jsxs(Grid, {
|
310
382
|
item: true,
|
311
383
|
xs: 12,
|
@@ -319,21 +391,29 @@ const TextFormat = props => {
|
|
319
391
|
xs: 12,
|
320
392
|
className: "typo-icons",
|
321
393
|
sx: classes.evenSpace,
|
322
|
-
children: [
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
}, `pptool_mark_${i}_${m.id}`);
|
394
|
+
children: [/*#__PURE__*/_jsx(SelectTypography, {
|
395
|
+
classes: classes,
|
396
|
+
editor: editor,
|
397
|
+
closeMainPopup: closeMainPopup || onClose
|
327
398
|
}), fontStyle?.map((m, i) => {
|
328
399
|
return /*#__PURE__*/_jsx(MarkButton, {
|
329
400
|
editor: editor,
|
330
401
|
...m
|
331
402
|
}, `pptool_mark_${i}_${m.id}`);
|
403
|
+
}), /*#__PURE__*/_jsx(SelectSuperSubscript, {
|
404
|
+
classes: classes,
|
405
|
+
editor: editor,
|
406
|
+
closeMainPopup: closeMainPopup || onClose
|
332
407
|
}), /*#__PURE__*/_jsx(LinkButton, {
|
333
408
|
active: isBlockActive(editor, link.format),
|
334
409
|
editor: editor
|
335
410
|
}, link.id)]
|
336
411
|
})]
|
412
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
413
|
+
item: true,
|
414
|
+
xs: 12,
|
415
|
+
sx: classes.dividerGrid,
|
416
|
+
children: /*#__PURE__*/_jsx(Divider, {})
|
337
417
|
}), /*#__PURE__*/_jsx(Grid, {
|
338
418
|
item: true,
|
339
419
|
xs: 12,
|
@@ -371,7 +451,7 @@ const TextFormat = props => {
|
|
371
451
|
children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
|
372
452
|
})]
|
373
453
|
}), /*#__PURE__*/_jsxs(ButtonGroup, {
|
374
|
-
sx: classes.
|
454
|
+
sx: classes.btnGroup2,
|
375
455
|
children: [/*#__PURE__*/_jsx(Button, {
|
376
456
|
className: `no-hover ${bqColor ? "active" : ""}`,
|
377
457
|
onClick: handleQuote({
|
@@ -389,24 +469,6 @@ const TextFormat = props => {
|
|
389
469
|
onClick: handleColorPicker("color"),
|
390
470
|
children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
|
391
471
|
})]
|
392
|
-
}), /*#__PURE__*/_jsx(Button, {
|
393
|
-
onClick: handlePageWidth("fixed"),
|
394
|
-
startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
|
395
|
-
sx: classes.pageWidthBtn,
|
396
|
-
className: pageWidth === "fixed" || !pageWidth ? "active" : "",
|
397
|
-
style: {
|
398
|
-
width: "45%"
|
399
|
-
},
|
400
|
-
children: "Centered"
|
401
|
-
}), /*#__PURE__*/_jsx(Button, {
|
402
|
-
sx: classes.pageWidthBtn,
|
403
|
-
className: pageWidth === "full" ? "active" : "",
|
404
|
-
onClick: handlePageWidth("full"),
|
405
|
-
startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
|
406
|
-
style: {
|
407
|
-
width: "45%"
|
408
|
-
},
|
409
|
-
children: "Full width"
|
410
472
|
})]
|
411
473
|
}), /*#__PURE__*/_jsx(AllColors, {
|
412
474
|
open: open,
|