@flozy/editor 10.4.1 → 10.4.3

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 (167) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +16 -131
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +9 -46
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
  9. package/dist/Editor/Elements/Button/EditorButton.js +9 -27
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  14. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +28 -30
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +7 -9
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  20. package/dist/Editor/Elements/Embed/Video.js +1 -1
  21. package/dist/Editor/Elements/Form/Form.js +3 -3
  22. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
  23. package/dist/Editor/Elements/Form/FormField.js +2 -3
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -35
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  27. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
  28. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  29. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -1
  30. package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
  31. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  32. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  33. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  34. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  35. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  36. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  37. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  38. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  39. package/dist/Editor/Elements/Table/Styles.js +0 -7
  40. package/dist/Editor/Elements/Table/Table.js +3 -3
  41. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  42. package/dist/Editor/Elements/Title/title.js +6 -6
  43. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  44. package/dist/Editor/MiniEditor.js +1 -2
  45. package/dist/Editor/Styles/EditorStyles.js +5 -5
  46. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  47. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  48. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  49. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  50. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  54. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  55. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  56. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  57. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
  58. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  59. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  60. package/dist/Editor/common/ColorPickerButton.js +16 -41
  61. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  62. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  63. package/dist/Editor/common/Icon.js +0 -28
  64. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  65. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  66. package/dist/Editor/common/LinkSettings/NavComponents.js +66 -45
  67. package/dist/Editor/common/LinkSettings/index.js +28 -14
  68. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  69. package/dist/Editor/common/LinkSettings/style.js +244 -164
  70. package/dist/Editor/common/MentionsPopup/index.js +1 -4
  71. package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
  72. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  73. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  80. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  81. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  82. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  83. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  84. package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
  85. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
  86. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  87. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  88. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  89. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  90. package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
  91. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  92. package/dist/Editor/common/RnD/index.js +39 -68
  93. package/dist/Editor/common/Select/index.js +7 -44
  94. package/dist/Editor/common/Select/styles.js +2 -31
  95. package/dist/Editor/common/Shorthands/elements.js +0 -54
  96. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  97. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  98. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  99. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  100. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  101. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  102. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  103. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  104. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  105. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  106. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  107. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  108. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  109. package/dist/Editor/common/Uploader.js +0 -16
  110. package/dist/Editor/common/iconListV2.js +0 -76
  111. package/dist/Editor/common/iconslist.js +0 -21
  112. package/dist/Editor/commonStyle.js +61 -116
  113. package/dist/Editor/helper/index.js +1 -5
  114. package/dist/Editor/helper/theme.js +2 -203
  115. package/dist/Editor/hooks/useMouseMove.js +3 -9
  116. package/dist/Editor/hooks/useTable.js +4 -5
  117. package/dist/Editor/plugins/withEmbeds.js +1 -1
  118. package/dist/Editor/plugins/withHTML.js +1 -3
  119. package/dist/Editor/plugins/withTable.js +1 -1
  120. package/dist/Editor/theme/ThemeList.js +173 -50
  121. package/dist/Editor/utils/SlateUtilityFunctions.js +37 -161
  122. package/dist/Editor/utils/accordion.js +4 -14
  123. package/dist/Editor/utils/button.js +17 -1
  124. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  125. package/dist/Editor/utils/draftToSlate.js +2 -3
  126. package/dist/Editor/utils/events.js +6 -50
  127. package/dist/Editor/utils/font.js +37 -40
  128. package/dist/Editor/utils/formfield.js +0 -1
  129. package/dist/Editor/utils/helper.js +26 -210
  130. package/dist/Editor/utils/insertAppHeader.js +1 -1
  131. package/dist/Editor/utils/signature.js +9 -2
  132. package/package.json +4 -4
  133. package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
  134. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  135. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  136. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  137. package/dist/Editor/common/Checkbox/index.js +0 -46
  138. package/dist/Editor/common/Checkbox/styles.js +0 -45
  139. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  140. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  141. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  142. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  143. package/dist/Editor/common/CustomSelect.js +0 -43
  144. package/dist/Editor/common/RadioGroup/index.js +0 -48
  145. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  146. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  147. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  148. package/dist/Editor/helper/textIndeces.js +0 -58
  149. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  150. package/dist/Editor/hooks/useThemeValues.js +0 -63
  151. package/dist/Editor/theme/index.js +0 -149
  152. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  153. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  154. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  155. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  156. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  157. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  158. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  159. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  160. package/dist/Editor/themeSettings/icons.js +0 -60
  161. package/dist/Editor/themeSettings/index.js +0 -380
  162. package/dist/Editor/themeSettings/style.js +0 -299
  163. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  164. package/dist/Editor/themeSettingsAI/index.js +0 -355
  165. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  166. package/dist/Editor/themeSettingsAI/style.js +0 -332
  167. package/dist/Editor/utils/updateFormName.js +0 -22
@@ -2,11 +2,8 @@ import { useMemo } from "react";
2
2
  import { activeMark, addMarkData, isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
3
3
  import CustomSelectTool from "./CustomSelectTool";
4
4
  import useWindowResize from "../../../hooks/useWindowResize";
5
- import { BREAKPOINTS_DEVICES, getBreakPointsValue, isTextCustomized as isCustomized, textThemeFields as themeFields } from "../../../helper/theme";
5
+ import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
6
6
  import { sizeMap } from "../../../utils/font";
7
- import { Editor } from "slate";
8
- import { useEditorTheme } from "../../../hooks/useEditorTheme";
9
- import { MenuItem, Select } from "@mui/material";
10
7
  import { jsx as _jsx } from "react/jsx-runtime";
11
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
9
  function Label({
@@ -21,29 +18,26 @@ function Label({
21
18
  });
22
19
  }
23
20
  function DisplayHeaderLabel({
24
- type,
25
- isCustomized,
26
- isPara = false
21
+ type
27
22
  }) {
28
23
  return /*#__PURE__*/_jsxs("div", {
29
- children: [isCustomized ? "*" : "", isPara ? "P" : "H", /*#__PURE__*/_jsx("sub", {
24
+ children: ["H", /*#__PURE__*/_jsx("sub", {
30
25
  children: type
31
26
  })]
32
27
  });
33
28
  }
34
- function getTypographyOptions(isCustomized, translation) {
35
- const typographyOptions = [{
29
+ function getTypographyOptions(translation) {
30
+ return [{
36
31
  id: 11,
37
32
  format: "headingOne",
38
33
  type: "block",
39
34
  title: /*#__PURE__*/_jsx(Label, {
40
35
  label: "H1",
41
- type: "Heading",
36
+ type: "Header",
42
37
  translation: translation
43
38
  }),
44
39
  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
45
- type: 1,
46
- isCustomized: isCustomized
40
+ type: 1
47
41
  }),
48
42
  group: "typography",
49
43
  value: "headingOne"
@@ -53,12 +47,11 @@ function getTypographyOptions(isCustomized, translation) {
53
47
  type: "block",
54
48
  title: /*#__PURE__*/_jsx(Label, {
55
49
  label: "H2",
56
- type: "Heading",
50
+ type: "Header",
57
51
  translation: translation
58
52
  }),
59
53
  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
60
- type: 2,
61
- isCustomized: isCustomized
54
+ type: 2
62
55
  }),
63
56
  group: "typography",
64
57
  value: "headingTwo"
@@ -68,156 +61,63 @@ function getTypographyOptions(isCustomized, translation) {
68
61
  type: "block",
69
62
  title: /*#__PURE__*/_jsx(Label, {
70
63
  label: "H3",
71
- type: "Heading",
64
+ type: "Header",
72
65
  translation: translation
73
66
  }),
74
67
  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
75
- type: 3,
76
- isCustomized: isCustomized
68
+ type: 3
77
69
  }),
78
70
  group: "typography",
79
71
  value: "headingThree"
80
72
  }, {
81
- id: 17,
82
- format: "headingFour",
83
- type: "block",
73
+ id: 14,
74
+ format: "fontSize",
75
+ type: "mark",
84
76
  title: /*#__PURE__*/_jsx(Label, {
85
- label: "H4",
86
- type: "Heading",
77
+ label: "L",
78
+ type: "Large",
87
79
  translation: translation
88
80
  }),
89
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
90
- type: 4,
91
- isCustomized: isCustomized
92
- }),
81
+ label: "L",
93
82
  group: "typography",
94
- value: "headingFour"
83
+ value: "huge"
95
84
  }, {
96
- id: 18,
97
- format: "headingFive",
98
- type: "block",
85
+ id: 15,
86
+ format: "fontSize",
87
+ type: "mark",
99
88
  title: /*#__PURE__*/_jsx(Label, {
100
- label: "H5",
101
- type: "Heading",
89
+ label: "M",
90
+ type: "Medium",
102
91
  translation: translation
103
92
  }),
104
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
105
- type: 5,
106
- isCustomized: isCustomized
107
- }),
93
+ label: "M",
108
94
  group: "typography",
109
- value: "headingFive"
95
+ value: "medium"
110
96
  }, {
111
- id: 19,
112
- format: "headingSix",
113
- type: "block",
97
+ id: 16,
98
+ format: "fontSize",
99
+ type: "mark",
114
100
  title: /*#__PURE__*/_jsx(Label, {
115
- label: "H6",
116
- type: "Heading",
101
+ label: "S",
102
+ type: "Small",
117
103
  translation: translation
118
104
  }),
119
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
120
- type: 6,
121
- isCustomized: isCustomized
122
- }),
105
+ label: "S",
123
106
  group: "typography",
124
- value: "headingSix"
125
- }, {
126
- id: 20,
127
- format: "paragraphOne",
128
- type: "block",
129
- title: /*#__PURE__*/_jsx(Label, {
130
- label: "P1",
131
- type: "Paragraph",
132
- translation: translation
133
- }),
134
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
135
- type: 1,
136
- isCustomized: isCustomized,
137
- isPara: true
138
- }),
139
- group: "typography",
140
- value: "paragraphOne"
141
- }, {
142
- id: 21,
143
- format: "paragraphTwo",
144
- type: "block",
145
- title: /*#__PURE__*/_jsx(Label, {
146
- label: "P2",
147
- type: "Paragraph",
148
- translation: translation
149
- }),
150
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
151
- type: 2,
152
- isCustomized: isCustomized,
153
- isPara: true
154
- }),
155
- group: "typography",
156
- value: "paragraphTwo"
157
- }, {
158
- id: 22,
159
- format: "paragraphThree",
160
- type: "block",
161
- title: /*#__PURE__*/_jsx(Label, {
162
- label: "P3",
163
- type: "Paragraph",
164
- translation: translation
165
- }),
166
- label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
167
- type: 3,
168
- isCustomized: isCustomized,
169
- isPara: true
170
- }),
171
- group: "typography",
172
- value: "paragraphThree"
173
- }
174
- // {
175
- // id: 14,
176
- // format: "fontSize",
177
- // type: "mark",
178
- // title: <Label label="L" type="Large" />,
179
- // label: "L",
180
- // group: "typography",
181
- // value: "huge",
182
- // },
183
- // {
184
- // id: 15,
185
- // format: "fontSize",
186
- // type: "mark",
187
- // title: <Label label="M" type="Medium" />,
188
- // label: "M",
189
- // group: "typography",
190
- // value: "medium",
191
- // },
192
- // {
193
- // id: 16,
194
- // format: "fontSize",
195
- // type: "mark",
196
- // title: <Label label="S" type="Small" />,
197
- // label: "S",
198
- // group: "typography",
199
- // value: "small",
200
- // },
201
- ];
202
-
203
- return typographyOptions;
107
+ value: "small"
108
+ }];
204
109
  }
205
110
  function SelectTypography({
206
111
  editor,
207
112
  classes,
208
113
  closeMainPopup,
209
- type,
210
114
  customProps
211
115
  }) {
212
116
  const [size] = useWindowResize();
213
- const {
214
- theme
215
- } = useEditorTheme();
216
117
  const {
217
118
  translation
218
119
  } = customProps;
219
- const isTextCustomized = theme?.id ? isCustomized(editor) : false;
220
- const typographyOptions = getTypographyOptions(isTextCustomized, translation);
120
+ const typographyOptions = getTypographyOptions(translation);
221
121
  const updateMarkData = newVal => {
222
122
  const val = activeMark(editor, "fontSize");
223
123
  let upData = {
@@ -239,10 +139,7 @@ function SelectTypography({
239
139
  ...upData
240
140
  }
241
141
  });
242
-
243
- // closeMainPopup();
244
142
  };
245
-
246
143
  const selectedBlock = useMemo(() => {
247
144
  return typographyOptions.find(t => {
248
145
  if (t.type === "block") {
@@ -264,13 +161,15 @@ function SelectTypography({
264
161
  });
265
162
  }, [typographyOptions, activeMark, isBlockActive, editor]);
266
163
  const onChange = (format, option) => {
164
+ // add/reset block elements
165
+ toggleBlock(editor, format);
267
166
  if (option.type === "block") {
268
- themeFields.forEach(field => {
269
- Editor.removeMark(editor, field);
167
+ // reset old font size
168
+ // let updatedValue = !selectedBlock ? {} : { xs: "16px", sm: "16px", md: "16px", lg: "16px" }
169
+ addMarkData(editor, {
170
+ format: "fontSize",
171
+ value: {}
270
172
  });
271
-
272
- // add/reset block elements
273
- toggleBlock(editor, format);
274
173
  } else if (option.type === "mark") {
275
174
  const size = sizeMap[option.value] || "";
276
175
  const [sizeInNumber] = size.split("px");
@@ -278,35 +177,11 @@ function SelectTypography({
278
177
  }
279
178
  closeMainPopup();
280
179
  };
281
- const typographyValue = selectedBlock?.value || "headingOne";
282
- if (type === "fullWidth") {
283
- return /*#__PURE__*/_jsx(Select, {
284
- value: typographyValue,
285
- className: "editor-dd",
286
- onChange: e => {
287
- const {
288
- value
289
- } = e.target;
290
- const option = typographyOptions?.find(o => o.value === value);
291
- onChange(value, option);
292
- },
293
- style: {
294
- width: "100%",
295
- height: "36px",
296
- borderRadius: "10px",
297
- fontSize: "14px"
298
- },
299
- children: typographyOptions.map((item, index) => /*#__PURE__*/_jsxs(MenuItem, {
300
- value: item.value,
301
- children: [item.title, " ", isTextCustomized && item.value === typographyValue ? " *" : ""]
302
- }, index))
303
- });
304
- }
305
180
  return /*#__PURE__*/_jsx(CustomSelectTool, {
306
181
  options: typographyOptions,
307
182
  editor: editor,
308
183
  onChange: onChange,
309
- value: typographyValue,
184
+ value: selectedBlock?.value || "headingOne",
310
185
  classes: classes
311
186
  });
312
187
  }
@@ -1,4 +1,4 @@
1
- import { Fade, Grid, IconButton, Paper, Popper, useTheme } from "@mui/material";
1
+ import { Fade, Grid, IconButton, Paper, Popper } from "@mui/material";
2
2
  import SelectTypography from "./SelectTypography";
3
3
  import SelectList from "./SelectList";
4
4
  import { toolbarGroups } from "../../toolbarGroups";
@@ -14,7 +14,7 @@ import MiniColorPicker from "./MiniColorPicker";
14
14
  import SelectAlignment from "./SelectAlignment";
15
15
  import SelectFontSize from "./SelectFontSize";
16
16
  import InfinityAITool from "./InfinityAITool";
17
- import { getSelectedElementColor, viewSlateSelection } from "../../../utils/helper";
17
+ import { viewSlateSelection } from "../../../utils/helper";
18
18
  import { jsx as _jsx } from "react/jsx-runtime";
19
19
  import { jsxs as _jsxs } from "react/jsx-runtime";
20
20
  const DEFAULT_COLOR = {
@@ -35,12 +35,11 @@ const MiniTextFormat = props => {
35
35
  const open = Boolean(anchorEl);
36
36
  const id = open ? "popup-edit-tool" : "";
37
37
  const [size] = useWindowResize();
38
- const theme = useTheme();
39
38
  const removeFontStyles = ["superscript", "subscript"];
40
39
  const fontStyle = allTools.filter(f => f.type === "mark" && !removeFontStyles.includes(f.format));
41
40
  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
42
41
  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
43
- const activeColor = getSelectedElementColor(editor, textColorFormat, theme);
42
+ const activeColor = activeMark(editor, textColorFormat) || DEFAULT_COLOR[textColorFormat];
44
43
  const activeBg = activeMark(editor, textBgFormat) || DEFAULT_COLOR[textBgFormat];
45
44
  return /*#__PURE__*/_jsx(Grid, {
46
45
  container: true,
@@ -58,7 +57,6 @@ const MiniTextFormat = props => {
58
57
  classes: classes,
59
58
  editor: editor,
60
59
  closeMainPopup: closeMainPopup,
61
- type: "miniToolBar",
62
60
  customProps: customProps
63
61
  }), /*#__PURE__*/_jsx("div", {
64
62
  className: "verticalLine"
@@ -94,8 +92,7 @@ const MiniTextFormat = props => {
94
92
  activeColor: activeColor,
95
93
  id: "11_cc",
96
94
  editor: editor,
97
- customProps: customProps,
98
- type: "textColor"
95
+ customProps: customProps
99
96
  }), /*#__PURE__*/_jsx(MiniColorPicker, {
100
97
  format: textBgFormat,
101
98
  classes: classes,
@@ -50,8 +50,7 @@ const PopperHeader = props => {
50
50
  padding: 2,
51
51
  className: "headerContainer",
52
52
  style: {
53
- paddingTop: "5px",
54
- paddingBottom: "0px"
53
+ paddingTop: "5px"
55
54
  },
56
55
  children: /*#__PURE__*/_jsxs(Grid, {
57
56
  item: true,
@@ -98,9 +98,6 @@ const usePopupStyle = theme => ({
98
98
  }
99
99
  }
100
100
  },
101
- "& .MuiDivider-root": {
102
- border: `0.5px solid ${theme?.palette?.editor?.deviderBgColor}`
103
- },
104
101
  "@media only screen and (max-width: 599px)": {
105
102
  // margin: "10px !important",
106
103
  background: "unset",
@@ -114,7 +111,6 @@ const usePopupStyle = theme => ({
114
111
  width: "323px",
115
112
  maxWidth: "100%",
116
113
  overflowX: "hidden !important",
117
- marginTop: "6px",
118
114
  // 30% of window height
119
115
  maxHeight: `${window.innerHeight * 0.45}px`,
120
116
  overflow: "auto",
@@ -134,7 +130,7 @@ const usePopupStyle = theme => ({
134
130
  },
135
131
  "& .accordionIcon": {
136
132
  "& p": {
137
- textAlign: "left"
133
+ textAlign: 'left'
138
134
  }
139
135
  }
140
136
  },
@@ -308,21 +304,6 @@ const usePopupStyle = theme => ({
308
304
  paddingRight: "0px !important"
309
305
  }
310
306
  },
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
- },
326
307
  textFormatLabel: {
327
308
  display: "flex",
328
309
  alignItems: "center",
@@ -354,10 +335,9 @@ const usePopupStyle = theme => ({
354
335
  borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`
355
336
  },
356
337
  textFormatField: {
357
- marginBottom: "8px"
358
- // marginTop: "8px",
338
+ marginBottom: "8px",
339
+ marginTop: "8px"
359
340
  },
360
-
361
341
  textFormatField1: {
362
342
  marginBottom: "16px",
363
343
  marginTop: "10px"
@@ -436,11 +416,6 @@ const usePopupStyle = theme => ({
436
416
  "& .MuiOutlinedInput-notchedOutline": {
437
417
  border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
438
418
  },
439
- "& .MuiInputBase-root": {
440
- "& input": {
441
- border: "none !important"
442
- }
443
- },
444
419
  "& svg": {
445
420
  width: "20px",
446
421
  height: "24px"
@@ -449,6 +424,9 @@ const usePopupStyle = theme => ({
449
424
  fontFamilyListOptions: {
450
425
  "& .MuiAutocomplete-listbox": {
451
426
  padding: "0px",
427
+ // "&::-webkit-scrollbar-thumb": {
428
+ // background: `none !important`,
429
+ // },
452
430
  "&::-webkit-scrollbar-thumb": {
453
431
  background: `${theme?.palette?.editor?.brainPopupScroll} !important`
454
432
  },
@@ -459,8 +437,8 @@ const usePopupStyle = theme => ({
459
437
  margin: "5px",
460
438
  borderRadius: "8px",
461
439
  color: theme?.palette?.editor?.menuOptionTextColor,
462
- fontSize: "14px",
463
- padding: "8px 12px",
440
+ fontSize: '14px',
441
+ padding: '8px 12px',
464
442
  '&[aria-selected="true"]': {
465
443
  backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
466
444
  }
@@ -559,7 +537,7 @@ const usePopupStyle = theme => ({
559
537
  }
560
538
  },
561
539
  alignItems: "flexStart",
562
- // justifyContent: "center",
540
+ justifyContent: "center",
563
541
  flexDirection: "row",
564
542
  "&:hover": {
565
543
  background: "unset"
@@ -808,13 +786,8 @@ const usePopupStyle = theme => ({
808
786
  padding: "0px"
809
787
  },
810
788
  defaultBtn: {
811
- color: "#2563EB !important",
812
- textTransform: "none",
813
- textDecoration: "underline",
814
- "&.Mui-disabled": {
815
- color: "#A0AEC0 !important",
816
- textDecoration: "none"
817
- }
789
+ color: "#0F172A",
790
+ textTransform: "none"
818
791
  },
819
792
  templateCardBtnGrp: {
820
793
  display: "none",
@@ -891,7 +864,7 @@ const usePopupStyle = theme => ({
891
864
  margin: "30px",
892
865
  "& .MuiPaper-root": {
893
866
  overflow: "auto",
894
- backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
867
+ backgroundColor: theme?.palette?.editor?.background,
895
868
  borderRadius: "14px !important",
896
869
  border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
897
870
  minWidth: "fit-content",
@@ -1165,39 +1138,6 @@ const usePopupStyle = theme => ({
1165
1138
  "& fieldset": {
1166
1139
  border: "none !important"
1167
1140
  }
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
- }
1201
1141
  }
1202
1142
  });
1203
1143
  export default usePopupStyle;
@@ -10,8 +10,6 @@ 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";
15
13
  import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
16
14
  import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
17
15
  import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
@@ -45,7 +43,7 @@ const TextFormat = props => {
45
43
  const pageSettingLine = pageSt?.pageProps?.lineHeight;
46
44
  const {
47
45
  fontFamilies,
48
- theme: appTheme
46
+ theme
49
47
  } = useEditorContext();
50
48
  const breakpoint = getDevice(window.innerWidth);
51
49
  const fontWeight = allTools.find(f => f.format === "fontWeight");
@@ -64,11 +62,6 @@ const TextFormat = props => {
64
62
  color: "",
65
63
  bgColor: ""
66
64
  };
67
- const {
68
- theme,
69
- updateTheme
70
- } = useEditorTheme();
71
- const customized = isTextCustomized(editor);
72
65
  let lineSpacingValue = activeMark(editor, "lineHeight");
73
66
  lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
74
67
  const handleColorPicker = type => e => {
@@ -123,51 +116,6 @@ const TextFormat = props => {
123
116
  sx: classes.textFormatWrapper,
124
117
  className: "text-formatter-popup",
125
118
  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, {
171
119
  item: true,
172
120
  xs: 12,
173
121
  children: [/*#__PURE__*/_jsxs(Grid, {
@@ -294,8 +242,7 @@ const TextFormat = props => {
294
242
  rounded: true,
295
243
  title: translation("textColor"),
296
244
  id: "11_cc",
297
- classes: classes,
298
- type: "textColor"
245
+ classes: classes
299
246
  }, "11_cc")
300
247
  })]
301
248
  }), /*#__PURE__*/_jsxs(Grid, {
@@ -321,7 +268,7 @@ const TextFormat = props => {
321
268
  children: /*#__PURE__*/_jsx(Button, {
322
269
  sx: classes.defaultBtn2,
323
270
  startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
324
- stroke: appTheme?.palette?.type === "dark" ? "#505359" : "#A2B0B9"
271
+ stroke: theme?.palette?.type === "dark" ? "#505359" : "#A2B0B9"
325
272
  }),
326
273
  onClick: handleDefault({
327
274
  format: "bgColor"
@@ -411,7 +358,12 @@ const TextFormat = props => {
411
358
  xs: 12,
412
359
  className: "typo-icons",
413
360
  sx: classes.evenSpace,
414
- children: [fontStyle?.map((m, i) => {
361
+ children: [/*#__PURE__*/_jsx(SelectTypography, {
362
+ classes: classes,
363
+ editor: editor,
364
+ closeMainPopup: closeMainPopup || onClose,
365
+ customProps: customProps
366
+ }), fontStyle?.map((m, i) => {
415
367
  return /*#__PURE__*/_jsx(MarkButton, {
416
368
  editor: editor,
417
369
  ...m,
@@ -450,7 +402,7 @@ const TextFormat = props => {
450
402
  value: lineSpacingValue,
451
403
  onChange: handleLineSpacing,
452
404
  data: {
453
- key: "lineHeight"
405
+ key: 'lineHeight'
454
406
  }
455
407
  })
456
408
  })]
@@ -95,9 +95,9 @@ const PopupTool = props => {
95
95
  const isFreeGridEnabled = enable === 1 && isFreeGridElement;
96
96
  if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || isFreeGridEnabled) {
97
97
  setAnchorEl(null);
98
- hideSlateSelection(); // removes slate selection background, when there is no selection
99
98
  } else {
100
99
  updateAnchorEl();
100
+ hideSlateSelection(); // removes slate selection background, when there is no selection
101
101
  }
102
102
  }, [selection, event, selectedElement?.enable]);
103
103
  const handleClose = () => {