@flozy/editor 10.3.9 → 10.4.1
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/ChatEditor.js +17 -16
- package/dist/Editor/CommonEditor.js +131 -16
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
- package/dist/Editor/Elements/Button/EditorButton.js +27 -9
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +30 -28
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +9 -7
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -1
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Form/Form.js +3 -3
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +0 -1
- package/dist/Editor/Elements/Form/FormField.js +3 -2
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -31
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +24 -5
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +58 -10
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/Checkbox/index.js +46 -0
- package/dist/Editor/common/Checkbox/styles.js +45 -0
- package/dist/Editor/common/ColorPickerButton.js +41 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +28 -0
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +45 -66
- package/dist/Editor/common/LinkSettings/index.js +14 -28
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +164 -244
- package/dist/Editor/common/MentionsPopup/index.js +4 -1
- package/dist/Editor/common/RadioGroup/index.js +48 -0
- package/dist/Editor/common/RadioGroup/styles.js +29 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +4 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
- package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
- package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +68 -39
- package/dist/Editor/common/Select/index.js +44 -7
- package/dist/Editor/common/Select/styles.js +31 -2
- package/dist/Editor/common/Shorthands/elements.js +54 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +76 -0
- package/dist/Editor/common/iconslist.js +21 -0
- package/dist/Editor/commonStyle.js +116 -61
- package/dist/Editor/helper/index.js +5 -1
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +9 -3
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +380 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +161 -37
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/formfield.js +1 -0
- package/dist/Editor/utils/helper.js +210 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- package/dist/Editor/utils/updateFormName.js +22 -0
- package/package.json +4 -4
@@ -49,31 +49,28 @@ const useCommonStyle = theme => ({
|
|
49
49
|
fontWeight: "500",
|
50
50
|
fontFamily: "Inter, sans-serif"
|
51
51
|
},
|
52
|
+
"& .MuiPaper-root": {
|
53
|
+
border: `unset !important`,
|
54
|
+
borderRadius: "0px",
|
55
|
+
height: "fit-content",
|
56
|
+
padding: "2px"
|
57
|
+
},
|
52
58
|
"& p": {
|
53
59
|
marginBottom: "7px",
|
54
60
|
marginTop: "4px"
|
55
61
|
},
|
56
|
-
"& .MuiPaper-root": {
|
57
|
-
border: 'unset !important',
|
58
|
-
borderRadius: '0px',
|
59
|
-
height: 'fit-content',
|
60
|
-
padding: '2px'
|
61
|
-
},
|
62
62
|
"& .muiIconsListParent": {
|
63
63
|
"& svg": {
|
64
64
|
color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
65
65
|
},
|
66
66
|
"&::-webkit-scrollbar-thumb": {
|
67
67
|
background: `${theme?.palette?.editor?.brainPopupScroll} !important`
|
68
|
-
},
|
69
|
-
"&::-webkit-scrollbar-track": {
|
70
|
-
visibility: "hidden"
|
71
68
|
}
|
72
69
|
},
|
73
70
|
"& .MuiGrid-root>.MuiGrid-item": {
|
74
71
|
paddingRight: "0px !important",
|
75
72
|
fontFamily: "Inter, sans-serif",
|
76
|
-
height:
|
73
|
+
height: "fit-content"
|
77
74
|
},
|
78
75
|
"& .MuiInputBase-root": {
|
79
76
|
borderRadius: "10px",
|
@@ -134,14 +131,14 @@ const useCommonStyle = theme => ({
|
|
134
131
|
borderRadius: "10px",
|
135
132
|
width: "52px !important",
|
136
133
|
marginLeft: "10px",
|
137
|
-
height:
|
134
|
+
height: "36px !important"
|
138
135
|
},
|
139
136
|
"& .spacingSlider": {
|
140
137
|
width: "calc(100% - 18px)"
|
141
138
|
}
|
142
139
|
},
|
143
|
-
|
144
|
-
margin:
|
140
|
+
"& .MuiFormHelperText-root": {
|
141
|
+
margin: "4px 0px 0px 0px",
|
145
142
|
color: theme?.palette?.editor?.closeButtonSvgStroke,
|
146
143
|
fontFamily: "Inter, sans-serif"
|
147
144
|
}
|
@@ -211,16 +208,16 @@ const useCommonStyle = theme => ({
|
|
211
208
|
backgroundColor: theme?.palette?.editor?.miniToolBarBackground
|
212
209
|
},
|
213
210
|
"& .popup_tabs": {
|
214
|
-
backgroundColor: theme?.palette?.editor?.
|
211
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
|
215
212
|
"@media only screen and (max-width: 899px)": {
|
216
213
|
width: "100% !important"
|
217
214
|
}
|
218
215
|
},
|
219
216
|
"& .popup_tabs-header": {
|
220
|
-
backgroundColor: theme?.palette?.editor?.
|
217
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
|
221
218
|
"& .popup_tabs-header-label-active": {
|
222
219
|
color: theme?.palette?.editor?.activeColor,
|
223
|
-
backgroundColor: theme?.palette?.editor?.
|
220
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground
|
224
221
|
}
|
225
222
|
},
|
226
223
|
"& .colorpicker": {
|
@@ -249,6 +246,40 @@ const useCommonStyle = theme => ({
|
|
249
246
|
backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
|
250
247
|
color: theme?.palette?.editor?.textColor
|
251
248
|
}
|
249
|
+
},
|
250
|
+
"& .colorPickerActionBtns": {
|
251
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
|
252
|
+
display: "flex",
|
253
|
+
justifyContent: "end",
|
254
|
+
padding: "10px",
|
255
|
+
position: "sticky",
|
256
|
+
bottom: 0,
|
257
|
+
right: 0,
|
258
|
+
boxShadow: `0px -3px 12px 0px ${theme?.palette?.editor?.cardShadow}`,
|
259
|
+
gap: "8px",
|
260
|
+
"& button": {
|
261
|
+
fontWeight: 600,
|
262
|
+
fontSize: "14px",
|
263
|
+
opacity: 1,
|
264
|
+
borderRadius: "8px",
|
265
|
+
textTransform: "math-auto",
|
266
|
+
padding: "4px 20px",
|
267
|
+
height: "fit-content",
|
268
|
+
minWidth: "90px",
|
269
|
+
"@media only screen and (max-width: 899px)": {
|
270
|
+
width: "50%"
|
271
|
+
},
|
272
|
+
"&.confirmBtn": {
|
273
|
+
backgroundColor: "#2563EB",
|
274
|
+
color: "#ffffff",
|
275
|
+
border: `1px solid #2563EB`
|
276
|
+
},
|
277
|
+
"&.cancelBtn": {
|
278
|
+
backgroundColor: theme?.palette?.editor?.closeButtonBackground,
|
279
|
+
color: theme?.palette?.editor?.customDialogueCloseBtnColor,
|
280
|
+
border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`
|
281
|
+
}
|
282
|
+
}
|
252
283
|
}
|
253
284
|
},
|
254
285
|
colorPickerBtnBorder: {
|
@@ -260,6 +291,12 @@ const useCommonStyle = theme => ({
|
|
260
291
|
"& .signature-canvas": {
|
261
292
|
backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
|
262
293
|
},
|
294
|
+
"& .clear-canvas": {
|
295
|
+
position: "absolute",
|
296
|
+
top: 6,
|
297
|
+
right: 6,
|
298
|
+
color: theme?.palette?.editor?.closeButtonSvgStroke
|
299
|
+
},
|
263
300
|
"& label": {
|
264
301
|
color: theme?.palette?.editor?.textColor
|
265
302
|
},
|
@@ -397,14 +434,14 @@ const useCommonStyle = theme => ({
|
|
397
434
|
padding: "8px 12px",
|
398
435
|
fontSize: "12px",
|
399
436
|
color: theme?.palette?.editor?.menuOptionTextColor,
|
400
|
-
fontWeight:
|
437
|
+
fontWeight: "500",
|
401
438
|
fontFamily: "Inter, sans-serif",
|
402
|
-
minHeight:
|
439
|
+
minHeight: "36px",
|
403
440
|
"&:hover": {
|
404
441
|
backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
|
405
442
|
}
|
406
443
|
},
|
407
|
-
|
444
|
+
"& .Mui-selected": {
|
408
445
|
background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
|
409
446
|
},
|
410
447
|
"& .MuiListSubheader-root": {
|
@@ -413,16 +450,16 @@ const useCommonStyle = theme => ({
|
|
413
450
|
fontSize: "12px"
|
414
451
|
},
|
415
452
|
"& .MuiPaper-root": {
|
416
|
-
borderRadius:
|
417
|
-
padding:
|
453
|
+
borderRadius: "8px",
|
454
|
+
padding: "0px",
|
418
455
|
background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
|
419
456
|
},
|
420
|
-
|
421
|
-
margin:
|
422
|
-
borderRadius:
|
457
|
+
"& .MuiButtonBase-root": {
|
458
|
+
margin: "4px",
|
459
|
+
borderRadius: "6px"
|
423
460
|
},
|
424
|
-
|
425
|
-
padding:
|
461
|
+
"& .MuiList-root": {
|
462
|
+
padding: "0px"
|
426
463
|
}
|
427
464
|
},
|
428
465
|
datePicker: {
|
@@ -522,27 +559,45 @@ const useCommonStyle = theme => ({
|
|
522
559
|
}
|
523
560
|
}
|
524
561
|
},
|
525
|
-
pageSettingPopUpRoot: {
|
526
|
-
padding: "16px 8px 16px 10px!important",
|
527
|
-
height: "100%"
|
528
|
-
},
|
529
562
|
buttonMoreOption: {
|
530
563
|
background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
531
564
|
border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
|
532
|
-
padding:
|
533
|
-
|
534
|
-
width:
|
535
|
-
height:
|
536
|
-
|
565
|
+
padding: "4px !important",
|
566
|
+
"& svg": {
|
567
|
+
width: "18px !important",
|
568
|
+
height: "18px !important",
|
569
|
+
"& path": {
|
537
570
|
stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
|
538
571
|
}
|
539
572
|
}
|
540
573
|
},
|
574
|
+
pageSettingPopUpRoot: {
|
575
|
+
padding: "16px 8px 16px 10px!important",
|
576
|
+
height: "100%"
|
577
|
+
},
|
578
|
+
buttonMoreIcon: {
|
579
|
+
position: "absolute",
|
580
|
+
top: "50%",
|
581
|
+
right: -40,
|
582
|
+
transform: "translateY(-50%)"
|
583
|
+
},
|
584
|
+
// buttonMoreOption: {
|
585
|
+
// background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
586
|
+
// border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
|
587
|
+
// padding: "4px !important",
|
588
|
+
// "& svg": {
|
589
|
+
// width: "18px !important",
|
590
|
+
// height: "18px !important",
|
591
|
+
// "& path": {
|
592
|
+
// stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
|
593
|
+
// },
|
594
|
+
// },
|
595
|
+
// },
|
541
596
|
buttonMoreOption2: {
|
542
597
|
background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
543
598
|
border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
|
544
|
-
|
545
|
-
|
599
|
+
"& svg": {
|
600
|
+
"& path": {
|
546
601
|
fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
|
547
602
|
}
|
548
603
|
}
|
@@ -550,11 +605,11 @@ const useCommonStyle = theme => ({
|
|
550
605
|
buttonMoreOption3: {
|
551
606
|
background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
552
607
|
border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
|
553
|
-
padding:
|
554
|
-
|
555
|
-
width:
|
556
|
-
height:
|
557
|
-
|
608
|
+
padding: "5px !important",
|
609
|
+
"& svg": {
|
610
|
+
width: "16px !important",
|
611
|
+
height: "16px !important",
|
612
|
+
"& path": {
|
558
613
|
stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
|
559
614
|
}
|
560
615
|
}
|
@@ -562,37 +617,37 @@ const useCommonStyle = theme => ({
|
|
562
617
|
resizeButton: {
|
563
618
|
background: theme?.palette?.editor?.aiInputBackground,
|
564
619
|
border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
|
565
|
-
padding:
|
566
|
-
borderRadius:
|
567
|
-
|
568
|
-
width:
|
569
|
-
height:
|
570
|
-
|
620
|
+
padding: "5px !important",
|
621
|
+
borderRadius: "50% !important",
|
622
|
+
"& svg": {
|
623
|
+
width: "18px",
|
624
|
+
height: "18px",
|
625
|
+
"& path": {
|
571
626
|
fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
|
572
627
|
}
|
573
628
|
},
|
574
|
-
|
629
|
+
"&:hover": {
|
575
630
|
background: theme?.palette?.editor?.aiInputBackground
|
576
631
|
}
|
577
632
|
},
|
578
633
|
gradientFillBtn: {
|
579
634
|
background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
|
580
|
-
textTransform:
|
581
|
-
color:
|
582
|
-
padding:
|
583
|
-
height:
|
584
|
-
borderRadius:
|
585
|
-
fontWeight:
|
586
|
-
fontSize:
|
635
|
+
textTransform: "math-auto !important",
|
636
|
+
color: "#FFFFFF !important",
|
637
|
+
padding: "0px 12px !important",
|
638
|
+
height: "32px",
|
639
|
+
borderRadius: "8px",
|
640
|
+
fontWeight: "500",
|
641
|
+
fontSize: "14px"
|
587
642
|
},
|
588
643
|
emptyThumbBtn: {
|
589
644
|
background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
|
590
645
|
color: `${theme?.palette?.editor?.textColor} !important`,
|
591
|
-
fontSize:
|
592
|
-
|
593
|
-
width:
|
594
|
-
height:
|
595
|
-
|
646
|
+
fontSize: "14px !important",
|
647
|
+
"& svg": {
|
648
|
+
width: "20px !important",
|
649
|
+
height: "20px !important",
|
650
|
+
"& path": {
|
596
651
|
stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
|
597
652
|
}
|
598
653
|
}
|
@@ -7,7 +7,7 @@ import { Node } from "slate";
|
|
7
7
|
const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
|
8
8
|
const TEXT_NODES = ["paragraph", "headingOne", "headingTwo", "headingThree"];
|
9
9
|
const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
|
10
|
-
const RND_ITEMS = ["freegridItem", "freegridBox"];
|
10
|
+
export const RND_ITEMS = ["freegridItem", "freegridBox"];
|
11
11
|
export const getThumbnailImage = async (dom, options = {}) => {
|
12
12
|
try {
|
13
13
|
const canvas = await html2canvas(dom, {
|
@@ -401,4 +401,8 @@ export const clearSelectionOnly = editor => {
|
|
401
401
|
} catch (err) {
|
402
402
|
console.log(err);
|
403
403
|
}
|
404
|
+
};
|
405
|
+
export const isMobileWindow = () => {
|
406
|
+
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
407
|
+
return isMobile;
|
404
408
|
};
|
@@ -0,0 +1,58 @@
|
|
1
|
+
export function extractTextWithPath(data, path = []) {
|
2
|
+
let result = [];
|
3
|
+
data.forEach((item, index) => {
|
4
|
+
const currentPath = [...path, index];
|
5
|
+
if (item.text) {
|
6
|
+
result.push({
|
7
|
+
path_id: currentPath.join(","),
|
8
|
+
text: item.text
|
9
|
+
});
|
10
|
+
}
|
11
|
+
if (item.children) {
|
12
|
+
result = result.concat(extractTextWithPath(item.children, currentPath));
|
13
|
+
}
|
14
|
+
});
|
15
|
+
return result;
|
16
|
+
}
|
17
|
+
export function replaceTextPath(nestedJson, pathIdJson) {
|
18
|
+
// Create a map from path_id JSON for quick lookup
|
19
|
+
const pathIdMap = new Map(pathIdJson.map(item => [item.path_id, item.text]));
|
20
|
+
console.log(pathIdMap);
|
21
|
+
function extractTextWithPath(data, path = []) {
|
22
|
+
data.forEach((item, index) => {
|
23
|
+
const currentPath = [...path, index];
|
24
|
+
if (item.text) {
|
25
|
+
if (pathIdMap.has(currentPath?.join(","))) {
|
26
|
+
item.text = pathIdMap.get(currentPath?.join(","));
|
27
|
+
}
|
28
|
+
}
|
29
|
+
if (item.children) {
|
30
|
+
extractTextWithPath(item.children, currentPath);
|
31
|
+
}
|
32
|
+
});
|
33
|
+
}
|
34
|
+
extractTextWithPath(nestedJson, []);
|
35
|
+
return nestedJson;
|
36
|
+
}
|
37
|
+
|
38
|
+
// export function replaceTextPath(nestedJson, pathIdJson) {
|
39
|
+
// // Create a map from path_id JSON for quick lookup
|
40
|
+
// const pathIdMap = new Map(
|
41
|
+
// pathIdJson.map((item) => [item.path_id, item.text])
|
42
|
+
// );
|
43
|
+
|
44
|
+
// function traverseAndReplace(node) {
|
45
|
+
// if (Array.isArray(node)) {
|
46
|
+
// node.forEach(traverseAndReplace);
|
47
|
+
// } else if (typeof node === "object" && node !== null) {
|
48
|
+
// console.log(node);
|
49
|
+
// if (node.text && pathIdMap.has(node.text)) {
|
50
|
+
// node.text = pathIdMap.get(node.path_id);
|
51
|
+
// }
|
52
|
+
// Object.values(node).forEach(traverseAndReplace);
|
53
|
+
// }
|
54
|
+
// }
|
55
|
+
|
56
|
+
// traverseAndReplace(nestedJson);
|
57
|
+
// return nestedJson;
|
58
|
+
// }
|
@@ -1,4 +1,6 @@
|
|
1
|
+
import { ReactEditor } from "slate-react";
|
1
2
|
import { sizeMap } from "../utils/font";
|
3
|
+
import { Editor, Node } from "slate";
|
2
4
|
export const breakpoints = {
|
3
5
|
small: 0,
|
4
6
|
mobile: 600,
|
@@ -33,7 +35,7 @@ const overrideValues = (value, ot) => {
|
|
33
35
|
return Object.keys(value).reduce((a, b) => {
|
34
36
|
return {
|
35
37
|
...a,
|
36
|
-
[b]: overrides[ot] ? overrides[ot](value[b]) : value
|
38
|
+
[b]: overrides[ot] ? overrides[ot](value[b], value) : value
|
37
39
|
};
|
38
40
|
}, {});
|
39
41
|
};
|
@@ -50,7 +52,15 @@ const overrides = {
|
|
50
52
|
overrideReSizeH: val => {
|
51
53
|
return val ? `${val?.height}px` : "auto";
|
52
54
|
},
|
53
|
-
overrideBorderRadius: val => {
|
55
|
+
overrideBorderRadius: (val, breakpointValues) => {
|
56
|
+
if (!val?.topLeft) {
|
57
|
+
Object.values(breakpointValues || {}).forEach(v => {
|
58
|
+
if (v) {
|
59
|
+
// Applying the values from breakpoints that exist to those that do not have
|
60
|
+
val = v;
|
61
|
+
}
|
62
|
+
});
|
63
|
+
}
|
54
64
|
return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
|
55
65
|
}
|
56
66
|
};
|
@@ -118,6 +128,197 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
|
|
118
128
|
console.log(err);
|
119
129
|
}
|
120
130
|
};
|
131
|
+
export function getElementStyle(editor, element, stylePropertyName) {
|
132
|
+
try {
|
133
|
+
const path = ReactEditor.findPath(editor, element);
|
134
|
+
if (path?.length) {
|
135
|
+
const currentEle = Node.get(editor, path);
|
136
|
+
const dom = ReactEditor.toDOMNode(editor, currentEle);
|
137
|
+
const editorBtn = dom?.querySelector(".button.theme-element");
|
138
|
+
return getElementProperty(editorBtn, stylePropertyName);
|
139
|
+
}
|
140
|
+
} catch (err) {
|
141
|
+
// console.log(err);
|
142
|
+
}
|
143
|
+
}
|
144
|
+
export function getTextSizeVal(editor) {
|
145
|
+
try {
|
146
|
+
const currentNode = Node.get(editor, editor.selection.anchor.path);
|
147
|
+
const currentElement = ReactEditor.toDOMNode(editor, currentNode);
|
148
|
+
if (currentElement) {
|
149
|
+
const element = currentElement.querySelector('span[data-slate-string="true"]');
|
150
|
+
const fontSize = getElementProperty(element, "font-size");
|
151
|
+
return fontSize || 16;
|
152
|
+
}
|
153
|
+
} catch (err) {
|
154
|
+
// console.log(err);
|
155
|
+
}
|
156
|
+
}
|
157
|
+
export function getVariableValue(val) {
|
158
|
+
const bodyElement = document.body;
|
159
|
+
const computedStyle = getComputedStyle(bodyElement);
|
160
|
+
const [, variableName] = val?.match(/var\((--[^)]+)\)/) || [];
|
161
|
+
const varValue = computedStyle.getPropertyValue(variableName).trim();
|
162
|
+
return varValue;
|
163
|
+
}
|
164
|
+
const MAP_PROPERTY_KEYS = {
|
165
|
+
fontFamily: "font-family",
|
166
|
+
fontSize: "font-size",
|
167
|
+
textSize: "font-size",
|
168
|
+
fontWeight: "font-weight",
|
169
|
+
color: "color",
|
170
|
+
bgColor: "background-color"
|
171
|
+
};
|
172
|
+
export function getElementProperty(element, styleProperty) {
|
173
|
+
if (!element) {
|
174
|
+
return "";
|
175
|
+
}
|
176
|
+
const computedStyle = window.getComputedStyle(element);
|
177
|
+
const property = MAP_PROPERTY_KEYS[styleProperty] || styleProperty;
|
178
|
+
let style = computedStyle.getPropertyValue(property);
|
179
|
+
if (property === "font-family") {
|
180
|
+
style = style.replace(/"/g, ""); // remove double quotes if exists e.g: '"Courier New"'
|
181
|
+
}
|
182
|
+
|
183
|
+
return style || "";
|
184
|
+
}
|
185
|
+
export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic", "fontWeight"
|
186
|
+
// "underline",
|
187
|
+
// "strikethrough",
|
188
|
+
];
|
189
|
+
|
190
|
+
const themeElements = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
|
191
|
+
export const isTextCustomized = editor => {
|
192
|
+
try {
|
193
|
+
if (editor.selection) {
|
194
|
+
const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
|
195
|
+
if (!currentElement) {
|
196
|
+
return false;
|
197
|
+
}
|
198
|
+
const {
|
199
|
+
children,
|
200
|
+
type
|
201
|
+
} = currentElement;
|
202
|
+
if (!themeElements.includes(type)) {
|
203
|
+
return false;
|
204
|
+
}
|
205
|
+
if (!children?.length) {
|
206
|
+
return true;
|
207
|
+
}
|
208
|
+
const customized = textThemeFields.some(field => {
|
209
|
+
const element = children.find(child => child.text.trim() !== "") || {};
|
210
|
+
const value = element[field];
|
211
|
+
if (field === "fontSize") {
|
212
|
+
return Object.keys(value || {}).length;
|
213
|
+
} else {
|
214
|
+
return value;
|
215
|
+
}
|
216
|
+
});
|
217
|
+
return customized;
|
218
|
+
} else {
|
219
|
+
return null;
|
220
|
+
}
|
221
|
+
} catch (err) {
|
222
|
+
return null;
|
223
|
+
}
|
224
|
+
};
|
225
|
+
const addToTheme = (field, value, element) => {
|
226
|
+
switch (field) {
|
227
|
+
case "fontFamily":
|
228
|
+
return {
|
229
|
+
fontFamily: value
|
230
|
+
};
|
231
|
+
case "fontSize":
|
232
|
+
return {
|
233
|
+
fontSize: value?.lg
|
234
|
+
};
|
235
|
+
case "color":
|
236
|
+
return {
|
237
|
+
color: value
|
238
|
+
};
|
239
|
+
case "bold":
|
240
|
+
return {
|
241
|
+
fontWeight: "bold"
|
242
|
+
};
|
243
|
+
case "italic":
|
244
|
+
return {
|
245
|
+
fontStyle: "italic"
|
246
|
+
};
|
247
|
+
// case "underline":
|
248
|
+
// case "strikethrough":
|
249
|
+
// let textDecoration = "";
|
250
|
+
|
251
|
+
// if (element.underline) {
|
252
|
+
// textDecoration = "underline";
|
253
|
+
// }
|
254
|
+
|
255
|
+
// if (element.strikethrough) {
|
256
|
+
// textDecoration += " strikethrough";
|
257
|
+
// }
|
258
|
+
|
259
|
+
// return { textDecoration };
|
260
|
+
default:
|
261
|
+
return {};
|
262
|
+
}
|
263
|
+
};
|
264
|
+
const MAP_TEXT_THEME_FIELD = {
|
265
|
+
headingOne: "h1",
|
266
|
+
headingTwo: "h2",
|
267
|
+
headingThree: "h3",
|
268
|
+
headingFour: "h4",
|
269
|
+
headingFive: "h5",
|
270
|
+
headingSix: "h6",
|
271
|
+
paragraphOne: "para1",
|
272
|
+
paragraphTwo: "para2",
|
273
|
+
paragraphThree: "para3"
|
274
|
+
};
|
275
|
+
export const saveToTheme = editor => {
|
276
|
+
try {
|
277
|
+
if (editor.selection) {
|
278
|
+
const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
|
279
|
+
if (!currentElement) {
|
280
|
+
return false;
|
281
|
+
}
|
282
|
+
const {
|
283
|
+
children
|
284
|
+
} = currentElement;
|
285
|
+
if (!children?.length) {
|
286
|
+
return true;
|
287
|
+
}
|
288
|
+
let theme = {};
|
289
|
+
textThemeFields.forEach(field => {
|
290
|
+
const element = children.find(child => child.text.trim() !== "") || {};
|
291
|
+
const value = element[field];
|
292
|
+
let style = {};
|
293
|
+
let isValueExist = false;
|
294
|
+
if (value) {
|
295
|
+
isValueExist = true;
|
296
|
+
if (field === "fontSize") {
|
297
|
+
isValueExist = !!Object.keys(value).length;
|
298
|
+
}
|
299
|
+
}
|
300
|
+
if (isValueExist) {
|
301
|
+
style = addToTheme(field, value, element);
|
302
|
+
}
|
303
|
+
theme = {
|
304
|
+
...theme,
|
305
|
+
...style
|
306
|
+
};
|
307
|
+
});
|
308
|
+
textThemeFields.forEach(field => {
|
309
|
+
Editor.removeMark(editor, field);
|
310
|
+
});
|
311
|
+
return {
|
312
|
+
field: MAP_TEXT_THEME_FIELD[currentElement?.type],
|
313
|
+
theme
|
314
|
+
};
|
315
|
+
}
|
316
|
+
} catch (err) {
|
317
|
+
return;
|
318
|
+
}
|
319
|
+
};
|
320
|
+
export const HEADING_THEME_FIELDS = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
321
|
+
export const PARAGRAPH_THEME_FIELDS = ["para1", "para2", "para3"];
|
121
322
|
export const getBRValue = (props, rbr = "lg") => {
|
122
323
|
const {
|
123
324
|
value,
|