@flozy/editor 10.1.4 → 10.1.5

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.
Files changed (168) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +120 -16
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +42 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +6 -2
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  8. package/dist/Editor/Elements/Button/EditorButton.js +25 -9
  9. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  13. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  14. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -1
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  21. package/dist/Editor/Elements/Embed/Image.js +3 -2
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  25. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  26. package/dist/Editor/Elements/Form/Form.js +181 -168
  27. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  28. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  29. package/dist/Editor/Elements/Form/FormField.js +13 -6
  30. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  31. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +6 -24
  32. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/styles.js +67 -7
  35. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  36. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  37. package/dist/Editor/Elements/List/CheckList.js +4 -1
  38. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  39. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  40. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  41. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  42. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  43. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  44. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  45. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  46. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  47. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  48. package/dist/Editor/Elements/Table/Styles.js +7 -0
  49. package/dist/Editor/Elements/Table/Table.js +3 -3
  50. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  51. package/dist/Editor/Elements/Title/title.js +6 -6
  52. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  53. package/dist/Editor/MiniEditor.js +2 -1
  54. package/dist/Editor/Styles/EditorStyles.js +5 -5
  55. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  56. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  57. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  58. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  59. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  64. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  65. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  66. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  67. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  68. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  69. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  70. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  71. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  72. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  73. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  74. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  75. package/dist/Editor/common/ColorPickerButton.js +39 -17
  76. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  77. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  78. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  79. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  80. package/dist/Editor/common/CustomSelect.js +43 -0
  81. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  82. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  83. package/dist/Editor/common/Icon.js +31 -1
  84. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  85. package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
  86. package/dist/Editor/common/LinkSettings/index.js +84 -68
  87. package/dist/Editor/common/LinkSettings/style.js +245 -30
  88. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
  89. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  90. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  91. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  92. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  93. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  95. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  96. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  97. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  98. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  99. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  100. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  101. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  103. package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
  104. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  105. package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
  106. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  107. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  108. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  109. package/dist/Editor/common/RnD/Utils/gridDropItem.js +1 -2
  110. package/dist/Editor/common/RnD/VirtualElement/helper.js +3 -2
  111. package/dist/Editor/common/RnD/index.js +5 -6
  112. package/dist/Editor/common/Select/index.js +2 -0
  113. package/dist/Editor/common/Shorthands/elements.js +54 -0
  114. package/dist/Editor/common/SnackBar/index.js +43 -0
  115. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  125. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  126. package/dist/Editor/common/Uploader.js +8 -0
  127. package/dist/Editor/common/iconListV2.js +156 -6
  128. package/dist/Editor/common/iconslist.js +24 -0
  129. package/dist/Editor/commonStyle.js +168 -62
  130. package/dist/Editor/helper/index.js +4 -0
  131. package/dist/Editor/helper/textIndeces.js +58 -0
  132. package/dist/Editor/helper/theme.js +203 -2
  133. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  134. package/dist/Editor/hooks/useMouseMove.js +8 -5
  135. package/dist/Editor/hooks/useTable.js +5 -4
  136. package/dist/Editor/hooks/useThemeValues.js +63 -0
  137. package/dist/Editor/plugins/withEmbeds.js +1 -1
  138. package/dist/Editor/plugins/withHTML.js +3 -1
  139. package/dist/Editor/plugins/withTable.js +1 -1
  140. package/dist/Editor/theme/ThemeList.js +50 -173
  141. package/dist/Editor/theme/index.js +149 -0
  142. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  143. package/dist/Editor/themeSettings/buttons/index.js +292 -0
  144. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  145. package/dist/Editor/themeSettings/colorTheme/index.js +309 -0
  146. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  147. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  148. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  149. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  150. package/dist/Editor/themeSettings/icons.js +60 -0
  151. package/dist/Editor/themeSettings/index.js +361 -0
  152. package/dist/Editor/themeSettings/style.js +292 -0
  153. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  154. package/dist/Editor/themeSettingsAI/index.js +355 -0
  155. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  156. package/dist/Editor/themeSettingsAI/style.js +324 -0
  157. package/dist/Editor/utils/SlateUtilityFunctions.js +166 -43
  158. package/dist/Editor/utils/accordion.js +14 -4
  159. package/dist/Editor/utils/button.js +1 -17
  160. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  161. package/dist/Editor/utils/draftToSlate.js +3 -2
  162. package/dist/Editor/utils/events.js +50 -6
  163. package/dist/Editor/utils/font.js +40 -37
  164. package/dist/Editor/utils/form.js +4 -4
  165. package/dist/Editor/utils/formfield.js +8 -2
  166. package/dist/Editor/utils/helper.js +109 -19
  167. package/dist/Editor/utils/signature.js +2 -9
  168. 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: 'fit-content'
73
+ height: "fit-content"
77
74
  },
78
75
  "& .MuiInputBase-root": {
79
76
  borderRadius: "10px",
@@ -132,16 +129,16 @@ const useCommonStyle = theme => ({
132
129
  background: theme?.palette?.editor?.inputFieldBgColor,
133
130
  border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
134
131
  borderRadius: "10px",
135
- width: "46px !important",
132
+ width: "52px !important",
136
133
  marginLeft: "10px",
137
- height: '36px !important'
134
+ height: "36px !important"
138
135
  },
139
136
  "& .spacingSlider": {
140
137
  width: "calc(100% - 18px)"
141
138
  }
142
139
  },
143
- '& .MuiFormHelperText-root': {
144
- margin: '4px 0px 0px 0px',
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?.background,
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?.background,
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?.background
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: '500',
437
+ fontWeight: "500",
401
438
  fontFamily: "Inter, sans-serif",
402
- minHeight: '36px',
439
+ minHeight: "36px",
403
440
  "&:hover": {
404
441
  backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
405
442
  }
406
443
  },
407
- '& .Mui-selected': {
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: '8px',
417
- padding: '0px',
453
+ borderRadius: "8px",
454
+ padding: "0px",
418
455
  background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
419
456
  },
420
- '& .MuiButtonBase-root': {
421
- margin: '4px',
422
- borderRadius: '6px'
457
+ "& .MuiButtonBase-root": {
458
+ margin: "4px",
459
+ borderRadius: "6px"
423
460
  },
424
- '& .MuiList-root': {
425
- padding: '0px'
461
+ "& .MuiList-root": {
462
+ padding: "0px"
426
463
  }
427
464
  },
428
465
  datePicker: {
@@ -522,27 +559,27 @@ 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: '4px !important',
533
- '& svg': {
534
- width: '18px !important',
535
- height: '18px !important',
536
- '& path': {
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
+ },
541
578
  buttonMoreOption2: {
542
579
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
543
580
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
544
- '& svg': {
545
- '& path': {
581
+ "& svg": {
582
+ "& path": {
546
583
  fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
547
584
  }
548
585
  }
@@ -550,11 +587,11 @@ const useCommonStyle = theme => ({
550
587
  buttonMoreOption3: {
551
588
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
552
589
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
553
- padding: '5px !important',
554
- '& svg': {
555
- width: '16px !important',
556
- height: '16px !important',
557
- '& path': {
590
+ padding: "5px !important",
591
+ "& svg": {
592
+ width: "16px !important",
593
+ height: "16px !important",
594
+ "& path": {
558
595
  stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
559
596
  }
560
597
  }
@@ -562,40 +599,109 @@ const useCommonStyle = theme => ({
562
599
  resizeButton: {
563
600
  background: theme?.palette?.editor?.aiInputBackground,
564
601
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
565
- padding: '5px !important',
566
- borderRadius: '50% !important',
567
- '& svg': {
568
- width: '18px',
569
- height: '18px',
570
- '& path': {
602
+ padding: "5px !important",
603
+ borderRadius: "50% !important",
604
+ "& svg": {
605
+ width: "18px",
606
+ height: "18px",
607
+ "& path": {
571
608
  fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
572
609
  }
573
610
  },
574
- '&:hover': {
611
+ "&:hover": {
575
612
  background: theme?.palette?.editor?.aiInputBackground
576
613
  }
577
614
  },
578
615
  gradientFillBtn: {
579
616
  background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
580
- textTransform: 'math-auto !important',
581
- color: '#FFFFFF !important',
582
- padding: '0px 12px !important',
583
- height: '32px',
584
- borderRadius: '8px',
585
- fontWeight: '500',
586
- fontSize: '14px'
617
+ textTransform: "math-auto !important",
618
+ color: "#FFFFFF !important",
619
+ padding: "0px 12px !important",
620
+ height: "32px",
621
+ borderRadius: "8px",
622
+ fontWeight: "500",
623
+ fontSize: "14px"
587
624
  },
588
625
  emptyThumbBtn: {
589
626
  background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
590
627
  color: `${theme?.palette?.editor?.textColor} !important`,
591
- fontSize: '14px !important',
592
- '& svg': {
593
- width: '20px !important',
594
- height: '20px !important',
595
- '& path': {
628
+ fontSize: "14px !important",
629
+ "& svg": {
630
+ width: "20px !important",
631
+ height: "20px !important",
632
+ "& path": {
596
633
  stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
597
634
  }
598
635
  }
636
+ },
637
+ formStyles: {
638
+ "& input": {
639
+ background: theme?.palette?.editor?.inputFieldBgColor,
640
+ borderColor: theme?.palette?.editor?.inputFieldBorder,
641
+ height: "44px",
642
+ fontSize: "14px",
643
+ color: theme?.palette?.editor?.textColor
644
+ },
645
+ "& .form-btn-wrpr": {
646
+ "& button": {
647
+ fontWeight: 500,
648
+ height: "44px"
649
+ }
650
+ }
651
+ },
652
+ formMenuStyle: {
653
+ "& .MuiPaper-root": {
654
+ background: "transparent",
655
+ boxShadow: "none"
656
+ },
657
+ "& .MuiList-root": {
658
+ padding: "2px 0px 0px 16px"
659
+ },
660
+ "& .MuiButtonBase-root": {
661
+ padding: "2px"
662
+ },
663
+ "& li": {
664
+ marginLeft: "5px",
665
+ "&:hover": {
666
+ background: "transparent"
667
+ },
668
+ "& button": {
669
+ height: "28px",
670
+ width: "28px",
671
+ borderRadius: "50%",
672
+ background: theme?.palette?.editor?.signatureFontBtnBg,
673
+ border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
674
+ boxShadow: "0px 0px 4px 0px #00000024",
675
+ "&:hover": {
676
+ background: theme?.palette?.editor?.signatureFontBtnBg
677
+ },
678
+ "& svg": {
679
+ height: "20px",
680
+ width: "20px"
681
+ },
682
+ "& .uploadIcon": {
683
+ height: "17px",
684
+ width: "17px"
685
+ },
686
+ "& .commonSvgStyle path": {
687
+ stroke: theme?.palette?.editor?.closeButtonSvgStroke
688
+ }
689
+ }
690
+ }
691
+ },
692
+ fieldBtnSettings: {
693
+ "& .MuiButtonBase-root": {
694
+ height: "28px",
695
+ width: "28px",
696
+ padding: "4px",
697
+ "& svg": {
698
+ width: "20px",
699
+ height: "20px",
700
+ "& path": {
701
+ stroke: theme?.palette?.editor?.closeButtonSvgStroke
702
+ }
703
+ }
704
+ }
599
705
  }
600
706
  });
601
707
  export default useCommonStyle;
@@ -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"
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,