@flozy/editor 10.4.0 → 10.4.2

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 (190) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +134 -18
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +27 -9
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  20. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  21. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  22. package/dist/Editor/Elements/Embed/Image.js +3 -2
  23. package/dist/Editor/Elements/Embed/Video.js +1 -1
  24. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  25. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  26. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  27. package/dist/Editor/Elements/Form/Form.js +184 -171
  28. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  29. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  30. package/dist/Editor/Elements/Form/FormField.js +13 -6
  31. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  32. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
  33. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  34. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  35. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  36. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  37. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  38. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  39. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  40. package/dist/Editor/Elements/List/CheckList.js +3 -2
  41. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  42. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  43. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  44. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  45. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  46. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  47. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  48. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  49. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  50. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  51. package/dist/Editor/Elements/Table/Styles.js +7 -0
  52. package/dist/Editor/Elements/Table/Table.js +3 -3
  53. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  54. package/dist/Editor/Elements/Title/title.js +6 -6
  55. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  56. package/dist/Editor/MiniEditor.js +2 -1
  57. package/dist/Editor/Styles/EditorStyles.js +5 -5
  58. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  59. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  60. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  61. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  62. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  67. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  68. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  69. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  70. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  71. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  72. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  73. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  74. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  75. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  76. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  77. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  78. package/dist/Editor/common/Checkbox/index.js +46 -0
  79. package/dist/Editor/common/Checkbox/styles.js +45 -0
  80. package/dist/Editor/common/ColorPickerButton.js +41 -16
  81. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  82. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  83. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  84. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  85. package/dist/Editor/common/CustomSelect.js +43 -0
  86. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  87. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  88. package/dist/Editor/common/Icon.js +31 -1
  89. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  90. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  91. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
  92. package/dist/Editor/common/LinkSettings/index.js +82 -81
  93. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  94. package/dist/Editor/common/LinkSettings/style.js +209 -74
  95. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  96. package/dist/Editor/common/RadioGroup/index.js +48 -0
  97. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  98. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  99. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  100. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  101. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  102. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  103. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  114. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  115. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  116. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  117. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  118. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  119. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  120. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  121. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  122. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  123. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  124. package/dist/Editor/common/RnD/index.js +68 -39
  125. package/dist/Editor/common/Select/index.js +44 -5
  126. package/dist/Editor/common/Select/styles.js +30 -2
  127. package/dist/Editor/common/Shorthands/elements.js +65 -11
  128. package/dist/Editor/common/SnackBar/index.js +43 -0
  129. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  130. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  131. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  132. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  144. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  145. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  146. package/dist/Editor/common/Uploader.js +16 -0
  147. package/dist/Editor/common/iconListV2.js +177 -6
  148. package/dist/Editor/common/iconslist.js +24 -0
  149. package/dist/Editor/commonStyle.js +186 -62
  150. package/dist/Editor/helper/index.js +5 -1
  151. package/dist/Editor/helper/textIndeces.js +58 -0
  152. package/dist/Editor/helper/theme.js +203 -2
  153. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  154. package/dist/Editor/hooks/useMouseMove.js +8 -5
  155. package/dist/Editor/hooks/useTable.js +5 -4
  156. package/dist/Editor/hooks/useThemeValues.js +63 -0
  157. package/dist/Editor/plugins/withEmbeds.js +1 -1
  158. package/dist/Editor/plugins/withHTML.js +3 -1
  159. package/dist/Editor/plugins/withTable.js +1 -1
  160. package/dist/Editor/theme/ThemeList.js +50 -173
  161. package/dist/Editor/theme/index.js +149 -0
  162. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  163. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  164. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  165. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  166. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  167. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  168. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  169. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  170. package/dist/Editor/themeSettings/icons.js +60 -0
  171. package/dist/Editor/themeSettings/index.js +380 -0
  172. package/dist/Editor/themeSettings/style.js +299 -0
  173. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  174. package/dist/Editor/themeSettingsAI/index.js +355 -0
  175. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  176. package/dist/Editor/themeSettingsAI/style.js +332 -0
  177. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  178. package/dist/Editor/utils/accordion.js +14 -4
  179. package/dist/Editor/utils/button.js +1 -17
  180. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  181. package/dist/Editor/utils/draftToSlate.js +3 -2
  182. package/dist/Editor/utils/events.js +50 -6
  183. package/dist/Editor/utils/font.js +40 -37
  184. package/dist/Editor/utils/form.js +4 -4
  185. package/dist/Editor/utils/formfield.js +9 -2
  186. package/dist/Editor/utils/helper.js +210 -26
  187. package/dist/Editor/utils/insertAppHeader.js +1 -1
  188. package/dist/Editor/utils/signature.js +2 -9
  189. package/dist/Editor/utils/updateFormName.js +22 -0
  190. package/package.json +4 -4
@@ -98,6 +98,9 @@ const usePopupStyle = theme => ({
98
98
  }
99
99
  }
100
100
  },
101
+ "& .MuiDivider-root": {
102
+ border: `0.5px solid ${theme?.palette?.editor?.deviderBgColor}`
103
+ },
101
104
  "@media only screen and (max-width: 599px)": {
102
105
  // margin: "10px !important",
103
106
  background: "unset",
@@ -111,6 +114,7 @@ const usePopupStyle = theme => ({
111
114
  width: "323px",
112
115
  maxWidth: "100%",
113
116
  overflowX: "hidden !important",
117
+ marginTop: "6px",
114
118
  // 30% of window height
115
119
  maxHeight: `${window.innerHeight * 0.45}px`,
116
120
  overflow: "auto",
@@ -130,7 +134,7 @@ const usePopupStyle = theme => ({
130
134
  },
131
135
  "& .accordionIcon": {
132
136
  "& p": {
133
- textAlign: 'left'
137
+ textAlign: "left"
134
138
  }
135
139
  }
136
140
  },
@@ -304,6 +308,21 @@ const usePopupStyle = theme => ({
304
308
  paddingRight: "0px !important"
305
309
  }
306
310
  },
311
+ textFormatContainer: {
312
+ ".saveThemeBtnsWrapper": {
313
+ position: "sticky",
314
+ bottom: "0px",
315
+ right: "0px",
316
+ boxShadow: `0px -3px 16px 0px ${theme?.palette?.editor?.cardShadow}`,
317
+ padding: "10px",
318
+ borderRadius: "8px 8px 19px 19px",
319
+ display: "flex",
320
+ justifyContent: "end",
321
+ alignItems: "center",
322
+ gap: "8px",
323
+ background: theme?.palette?.editor?.miniToolBarBackground
324
+ }
325
+ },
307
326
  textFormatLabel: {
308
327
  display: "flex",
309
328
  alignItems: "center",
@@ -335,9 +354,10 @@ const usePopupStyle = theme => ({
335
354
  borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`
336
355
  },
337
356
  textFormatField: {
338
- marginBottom: "8px",
339
- marginTop: "8px"
357
+ marginBottom: "8px"
358
+ // marginTop: "8px",
340
359
  },
360
+
341
361
  textFormatField1: {
342
362
  marginBottom: "16px",
343
363
  marginTop: "10px"
@@ -416,6 +436,11 @@ const usePopupStyle = theme => ({
416
436
  "& .MuiOutlinedInput-notchedOutline": {
417
437
  border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
418
438
  },
439
+ "& .MuiInputBase-root": {
440
+ "& input": {
441
+ border: "none !important"
442
+ }
443
+ },
419
444
  "& svg": {
420
445
  width: "20px",
421
446
  height: "24px"
@@ -424,9 +449,6 @@ const usePopupStyle = theme => ({
424
449
  fontFamilyListOptions: {
425
450
  "& .MuiAutocomplete-listbox": {
426
451
  padding: "0px",
427
- // "&::-webkit-scrollbar-thumb": {
428
- // background: `none !important`,
429
- // },
430
452
  "&::-webkit-scrollbar-thumb": {
431
453
  background: `${theme?.palette?.editor?.brainPopupScroll} !important`
432
454
  },
@@ -437,8 +459,8 @@ const usePopupStyle = theme => ({
437
459
  margin: "5px",
438
460
  borderRadius: "8px",
439
461
  color: theme?.palette?.editor?.menuOptionTextColor,
440
- fontSize: '14px',
441
- padding: '8px 12px',
462
+ fontSize: "14px",
463
+ padding: "8px 12px",
442
464
  '&[aria-selected="true"]': {
443
465
  backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
444
466
  }
@@ -537,7 +559,7 @@ const usePopupStyle = theme => ({
537
559
  }
538
560
  },
539
561
  alignItems: "flexStart",
540
- justifyContent: "center",
562
+ // justifyContent: "center",
541
563
  flexDirection: "row",
542
564
  "&:hover": {
543
565
  background: "unset"
@@ -786,8 +808,13 @@ const usePopupStyle = theme => ({
786
808
  padding: "0px"
787
809
  },
788
810
  defaultBtn: {
789
- color: "#0F172A",
790
- textTransform: "none"
811
+ color: "#2563EB !important",
812
+ textTransform: "none",
813
+ textDecoration: "underline",
814
+ "&.Mui-disabled": {
815
+ color: "#A0AEC0 !important",
816
+ textDecoration: "none"
817
+ }
791
818
  },
792
819
  templateCardBtnGrp: {
793
820
  display: "none",
@@ -864,7 +891,7 @@ const usePopupStyle = theme => ({
864
891
  margin: "30px",
865
892
  "& .MuiPaper-root": {
866
893
  overflow: "auto",
867
- backgroundColor: theme?.palette?.editor?.background,
894
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
868
895
  borderRadius: "14px !important",
869
896
  border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
870
897
  minWidth: "fit-content",
@@ -1138,6 +1165,39 @@ const usePopupStyle = theme => ({
1138
1165
  "& fieldset": {
1139
1166
  border: "none !important"
1140
1167
  }
1168
+ },
1169
+ customCheckBox: {
1170
+ marginTop: "4px",
1171
+ padding: "0px",
1172
+ "& .MuiCheckbox-root": {
1173
+ padding: "8px 8px 8px 10px",
1174
+ "&:hover": {
1175
+ background: "unset !important"
1176
+ }
1177
+ },
1178
+ "& button": {
1179
+ width: "14px !important",
1180
+ height: "14px !important",
1181
+ borderRadius: "3px",
1182
+ border: `1px solid ${theme?.palette?.editor?.buttonBorder3}`,
1183
+ padding: "0px",
1184
+ "& svg": {
1185
+ width: "10px",
1186
+ height: "10px"
1187
+ }
1188
+ },
1189
+ "& .checkedIcon": {
1190
+ background: "#2563EB",
1191
+ borderColor: "#2563EB"
1192
+ },
1193
+ "& .unCheckedIcon": {
1194
+ background: theme?.palette?.editor?.checkedIconBg
1195
+ },
1196
+ "& p": {
1197
+ margin: "0px !important",
1198
+ color: theme?.palette?.editor?.tv_text,
1199
+ fontSize: "13px"
1200
+ }
1141
1201
  }
1142
1202
  });
1143
1203
  export default usePopupStyle;
@@ -10,12 +10,15 @@ import { AllColors } from "../../Elements/Color Picker/ColorButtons";
10
10
  import { fontFamilyMap } from "../../utils/font";
11
11
  import { getBorderColor } from "../../utils/helper";
12
12
  import SelectTypography from "./MiniTextFormat/SelectTypography";
13
+ import { isTextCustomized, saveToTheme } from "../../helper/theme";
14
+ import { useEditorTheme } from "../../hooks/useEditorTheme";
13
15
  import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
14
16
  import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
15
17
  import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
16
18
  import { useEditorContext } from "../../hooks/useMouseMove";
17
- // import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
18
- // import { getPageSettings } from "../../utils/pageSettings";
19
+ import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
20
+ import { getPageSettings } from "../../utils/pageSettings";
21
+ import { getDevice } from "../../helper/theme";
19
22
  import { jsx as _jsx } from "react/jsx-runtime";
20
23
  import { jsxs as _jsxs } from "react/jsx-runtime";
21
24
  const allTools = toolbarGroups.flat();
@@ -36,15 +39,15 @@ const TextFormat = props => {
36
39
  const {
37
40
  translation
38
41
  } = customProps;
39
-
40
- // const { element: pageSt } = getPageSettings(editor) || {};
41
- // const pageSettingLine = pageSt?.pageProps?.lineHeight;
42
+ const {
43
+ element: pageSt
44
+ } = getPageSettings(editor) || {};
45
+ const pageSettingLine = pageSt?.pageProps?.lineHeight;
42
46
  const {
43
47
  fontFamilies,
44
- theme
48
+ theme: appTheme
45
49
  } = useEditorContext();
46
- // const { activeBreakPoint } = useEditorContext();
47
- // const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
50
+ const breakpoint = getDevice(window.innerWidth);
48
51
  const fontWeight = allTools.find(f => f.format === "fontWeight");
49
52
  const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
50
53
  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -61,12 +64,13 @@ const TextFormat = props => {
61
64
  color: "",
62
65
  bgColor: ""
63
66
  };
64
-
65
- // let lineSpacingValue = activeMark(editor, "lineHeight");
66
- // lineSpacingValue =
67
- // lineSpacingValue?.[breakpoint] !== undefined
68
- // ? lineSpacingValue
69
- // : pageSettingLine;
67
+ const {
68
+ theme,
69
+ updateTheme
70
+ } = useEditorTheme();
71
+ const customized = isTextCustomized(editor);
72
+ let lineSpacingValue = activeMark(editor, "lineHeight");
73
+ lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
70
74
  const handleColorPicker = type => e => {
71
75
  setType(type);
72
76
  setAnchorEl(e.currentTarget);
@@ -107,16 +111,63 @@ const TextFormat = props => {
107
111
  value
108
112
  });
109
113
  };
110
-
111
- // const handleLineSpacing = (data) => {
112
- // const [[format, value]] = Object.entries(data);
113
- // addMarkData(editor, { format, value });
114
- // };
114
+ const handleLineSpacing = data => {
115
+ const [[format, value]] = Object.entries(data);
116
+ addMarkData(editor, {
117
+ format,
118
+ value
119
+ });
120
+ };
115
121
  return /*#__PURE__*/_jsxs(Grid, {
116
122
  container: true,
117
123
  sx: classes.textFormatWrapper,
118
124
  className: "text-formatter-popup",
119
125
  children: [/*#__PURE__*/_jsxs(Grid, {
126
+ item: true,
127
+ xs: 12,
128
+ children: [/*#__PURE__*/_jsxs(Grid, {
129
+ container: true,
130
+ justifyContent: "space-between",
131
+ alignItems: "center",
132
+ children: [/*#__PURE__*/_jsx(Grid, {
133
+ item: true,
134
+ children: /*#__PURE__*/_jsx(Typography, {
135
+ variant: "body1",
136
+ color: "primary",
137
+ sx: classes.typoLabel,
138
+ children: "Style"
139
+ })
140
+ }), /*#__PURE__*/_jsx(Grid, {
141
+ item: true,
142
+ children: theme?.id ? /*#__PURE__*/_jsx(Button, {
143
+ sx: classes.defaultBtn,
144
+ onClick: () => {
145
+ const {
146
+ field,
147
+ theme
148
+ } = saveToTheme(editor) || {};
149
+ updateTheme(theme, {
150
+ action: "ELEMENT_PROPS_CHANGE",
151
+ fieldName: field
152
+ });
153
+ },
154
+ disabled: !customized,
155
+ children: "Save to theme"
156
+ }) : null
157
+ })]
158
+ }), /*#__PURE__*/_jsx(Grid, {
159
+ item: true,
160
+ xs: 12,
161
+ sx: classes.textFormatField,
162
+ children: /*#__PURE__*/_jsx(SelectTypography, {
163
+ editor: editor,
164
+ classes: classes,
165
+ closeMainPopup: closeMainPopup,
166
+ type: "fullWidth",
167
+ customProps: customProps
168
+ })
169
+ })]
170
+ }), /*#__PURE__*/_jsxs(Grid, {
120
171
  item: true,
121
172
  xs: 12,
122
173
  children: [/*#__PURE__*/_jsxs(Grid, {
@@ -243,7 +294,8 @@ const TextFormat = props => {
243
294
  rounded: true,
244
295
  title: translation("textColor"),
245
296
  id: "11_cc",
246
- classes: classes
297
+ classes: classes,
298
+ type: "textColor"
247
299
  }, "11_cc")
248
300
  })]
249
301
  }), /*#__PURE__*/_jsxs(Grid, {
@@ -269,7 +321,7 @@ const TextFormat = props => {
269
321
  children: /*#__PURE__*/_jsx(Button, {
270
322
  sx: classes.defaultBtn2,
271
323
  startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
272
- stroke: theme?.palette?.type === "dark" ? "#505359" : "#A2B0B9"
324
+ stroke: appTheme?.palette?.type === "dark" ? "#505359" : "#A2B0B9"
273
325
  }),
274
326
  onClick: handleDefault({
275
327
  format: "bgColor"
@@ -359,12 +411,7 @@ const TextFormat = props => {
359
411
  xs: 12,
360
412
  className: "typo-icons",
361
413
  sx: classes.evenSpace,
362
- children: [/*#__PURE__*/_jsx(SelectTypography, {
363
- classes: classes,
364
- editor: editor,
365
- closeMainPopup: closeMainPopup || onClose,
366
- customProps: customProps
367
- }), fontStyle?.map((m, i) => {
414
+ children: [fontStyle?.map((m, i) => {
368
415
  return /*#__PURE__*/_jsx(MarkButton, {
369
416
  editor: editor,
370
417
  ...m,
@@ -386,6 +433,32 @@ const TextFormat = props => {
386
433
  xs: 12,
387
434
  sx: classes.dividerGrid,
388
435
  children: /*#__PURE__*/_jsx(Divider, {})
436
+ }), /*#__PURE__*/_jsxs(Grid, {
437
+ item: true,
438
+ xs: 12,
439
+ children: [/*#__PURE__*/_jsx(Typography, {
440
+ variant: "body1",
441
+ color: "primary",
442
+ sx: classes.typoLabel,
443
+ children: "Line Spacing"
444
+ }), /*#__PURE__*/_jsx(Grid, {
445
+ item: true,
446
+ xs: 12,
447
+ className: "typo-icons",
448
+ sx: classes.evenSpace,
449
+ children: /*#__PURE__*/_jsx(LineSpacing, {
450
+ value: lineSpacingValue,
451
+ onChange: handleLineSpacing,
452
+ data: {
453
+ key: "lineHeight"
454
+ }
455
+ })
456
+ })]
457
+ }), /*#__PURE__*/_jsx(Grid, {
458
+ item: true,
459
+ xs: 12,
460
+ sx: classes.dividerGrid,
461
+ children: /*#__PURE__*/_jsx(Divider, {})
389
462
  }), /*#__PURE__*/_jsx(Grid, {
390
463
  item: true,
391
464
  xs: 12,