@flozy/editor 3.8.9 → 3.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (194) hide show
  1. package/dist/Editor/ChatEditor.js +55 -45
  2. package/dist/Editor/CommonEditor.js +175 -168
  3. package/dist/Editor/DialogWrapper.js +3 -4
  4. package/dist/Editor/Editor.css +7 -4
  5. package/dist/Editor/Elements/AI/AIInput.js +17 -18
  6. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  7. package/dist/Editor/Elements/AI/PopoverAIInput.js +58 -74
  8. package/dist/Editor/Elements/AI/Styles.js +2 -1
  9. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  10. package/dist/Editor/Elements/AI/VoiceToText/index.js +177 -0
  11. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  12. package/dist/Editor/Elements/AppHeader/AppHeader.js +49 -40
  13. package/dist/Editor/Elements/Button/EditorButton.js +38 -33
  14. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  15. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  16. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  17. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  18. package/dist/Editor/Elements/Embed/Image.js +14 -15
  19. package/dist/Editor/Elements/Embed/Video.js +8 -12
  20. package/dist/Editor/Elements/Emoji/EmojiButton.js +7 -11
  21. package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
  22. package/dist/Editor/Elements/Form/Form.js +1 -1
  23. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  24. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  25. package/dist/Editor/Elements/Grid/Grid.js +34 -14
  26. package/dist/Editor/Elements/Grid/GridItem.js +23 -31
  27. package/dist/Editor/Elements/Link/Link.js +6 -1
  28. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  29. package/dist/Editor/Elements/Link/LinkPopup.js +10 -3
  30. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  31. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +8 -4
  32. package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +14 -3
  34. package/dist/Editor/Elements/SimpleText/index.js +8 -9
  35. package/dist/Editor/Elements/SimpleText/style.js +0 -37
  36. package/dist/Editor/Elements/Table/Styles.js +23 -1
  37. package/dist/Editor/Elements/Table/Table.js +2 -1
  38. package/dist/Editor/Elements/Table/TableCell.js +69 -7
  39. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
  40. package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
  41. package/dist/Editor/MiniEditor.js +3 -1
  42. package/dist/Editor/Styles/EditorStyles.js +1 -24
  43. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  45. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  46. package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -18
  47. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +29 -3
  48. package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
  49. package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  53. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -16
  54. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -8
  55. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  56. package/dist/Editor/Toolbar/PopupTool/index.js +7 -25
  57. package/dist/Editor/Toolbar/Toolbar.js +0 -7
  58. package/dist/Editor/Toolbar/toolbarGroups.js +48 -11
  59. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  60. package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
  61. package/dist/Editor/assets/svg/RedoIcon.js +27 -0
  62. package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
  63. package/dist/Editor/assets/svg/TextIcon.js +8 -5
  64. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  65. package/dist/Editor/assets/svg/UndoIcon.js +27 -0
  66. package/dist/Editor/common/ColorPickerButton.js +25 -9
  67. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  68. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  69. package/dist/Editor/common/CustomDialog/index.js +94 -0
  70. package/dist/Editor/common/CustomDialog/style.js +67 -0
  71. package/dist/Editor/common/CustomSelect.js +33 -0
  72. package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
  73. package/dist/Editor/common/Icon.js +41 -8
  74. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  75. package/dist/Editor/common/LinkSettings/index.js +4 -2
  76. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  77. package/dist/Editor/common/LinkSettings/style.js +11 -8
  78. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +6 -1
  79. package/dist/Editor/common/MentionsPopup/index.js +8 -12
  80. package/dist/Editor/common/Section/index.js +69 -28
  81. package/dist/Editor/common/Section/styles.js +12 -6
  82. package/dist/Editor/common/Shorthands/elements.js +54 -12
  83. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  84. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +19 -16
  85. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  86. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  87. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  88. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  89. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +14 -3
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +2 -4
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  92. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  93. package/dist/Editor/common/StyleBuilder/sectionStyle.js +2 -13
  94. package/dist/Editor/common/iconslist.js +0 -31
  95. package/dist/Editor/helper/index.js +0 -139
  96. package/dist/Editor/helper/theme.js +185 -48
  97. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  98. package/dist/Editor/hooks/useMouseMove.js +12 -37
  99. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  100. package/dist/Editor/hooks/withCommon.js +1 -2
  101. package/dist/Editor/plugins/withEmbeds.js +1 -1
  102. package/dist/Editor/plugins/withHTML.js +1 -1
  103. package/dist/Editor/plugins/withTable.js +1 -1
  104. package/dist/Editor/theme/ThemeList.js +50 -173
  105. package/dist/Editor/theme/index.js +144 -0
  106. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  107. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  108. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  109. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  110. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  111. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  112. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  113. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  114. package/dist/Editor/themeSettings/icons.js +60 -0
  115. package/dist/Editor/themeSettings/index.js +320 -0
  116. package/dist/Editor/themeSettings/style.js +152 -0
  117. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  118. package/dist/Editor/themeSettingsAI/index.js +356 -0
  119. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  120. package/dist/Editor/themeSettingsAI/style.js +247 -0
  121. package/dist/Editor/utils/SlateUtilityFunctions.js +163 -47
  122. package/dist/Editor/utils/button.js +1 -17
  123. package/dist/Editor/utils/draftToSlate.js +1 -1
  124. package/dist/Editor/utils/events.js +54 -7
  125. package/dist/Editor/utils/font.js +40 -37
  126. package/dist/Editor/utils/helper.js +31 -31
  127. package/dist/Editor/utils/table.js +51 -43
  128. package/package.json +4 -6
  129. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +0 -391
  130. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +0 -193
  131. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +0 -23
  132. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -184
  133. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +0 -36
  134. package/dist/Editor/Elements/FreeGrid/Options/More.js +0 -24
  135. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +0 -47
  136. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +0 -11
  137. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +0 -75
  138. package/dist/Editor/Elements/FreeGrid/styles.js +0 -159
  139. package/dist/Editor/ErrorBoundary.js +0 -30
  140. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +0 -105
  141. package/dist/Editor/common/RnD/ContextMenu/index.js +0 -38
  142. package/dist/Editor/common/RnD/ContextMenu/styles.js +0 -21
  143. package/dist/Editor/common/RnD/DragInfo/index.js +0 -31
  144. package/dist/Editor/common/RnD/DragInfo/styles.js +0 -15
  145. package/dist/Editor/common/RnD/DragOver/index.js +0 -46
  146. package/dist/Editor/common/RnD/DragOver/styles.js +0 -23
  147. package/dist/Editor/common/RnD/ElementOptions/Actions.js +0 -82
  148. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -26
  149. package/dist/Editor/common/RnD/ElementOptions/index.js +0 -93
  150. package/dist/Editor/common/RnD/ElementOptions/styles.js +0 -41
  151. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +0 -153
  152. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +0 -58
  153. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +0 -7
  154. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +0 -46
  155. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +0 -46
  156. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +0 -46
  157. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -30
  158. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +0 -46
  159. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +0 -13
  160. package/dist/Editor/common/RnD/ElementSettings/index.js +0 -17
  161. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +0 -14
  162. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -76
  163. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +0 -52
  164. package/dist/Editor/common/RnD/GuideLines/index.js +0 -33
  165. package/dist/Editor/common/RnD/GuideLines/styles.js +0 -60
  166. package/dist/Editor/common/RnD/OptionsPopup/index.js +0 -50
  167. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -36
  168. package/dist/Editor/common/RnD/RnDCopy.js +0 -23
  169. package/dist/Editor/common/RnD/ShadowElement.js +0 -34
  170. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +0 -40
  171. package/dist/Editor/common/RnD/SwitchViewport/styles.js +0 -24
  172. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +0 -63
  173. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +0 -19
  174. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +0 -13
  175. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +0 -18
  176. package/dist/Editor/common/RnD/TransformHandles/index.js +0 -62
  177. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +0 -26
  178. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +0 -98
  179. package/dist/Editor/common/RnD/Utils/collisionDetection.js +0 -52
  180. package/dist/Editor/common/RnD/Utils/gridDropItem.js +0 -148
  181. package/dist/Editor/common/RnD/Utils/index.js +0 -251
  182. package/dist/Editor/common/RnD/VirtualElement/index.js +0 -76
  183. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -27
  184. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +0 -28
  185. package/dist/Editor/common/RnD/index.js +0 -503
  186. package/dist/Editor/common/RnD/styles.js +0 -4
  187. package/dist/Editor/common/StyleBuilder/boxStyle.js +0 -30
  188. package/dist/Editor/helper/RnD/focusOnNewItem.js +0 -39
  189. package/dist/Editor/helper/RnD/scrollToNewSection.js +0 -24
  190. package/dist/Editor/helper/breakpoint.js +0 -5
  191. package/dist/Editor/hooks/useBreakpoints.js +0 -34
  192. package/dist/Editor/hooks/withErrorHandling.js +0 -14
  193. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +0 -168
  194. package/dist/Editor/utils/freegrid.js +0 -49
@@ -0,0 +1,438 @@
1
+ import { Button, Grid, IconButton, Popover, TextField, Tooltip, Typography } from "@mui/material";
2
+ import { useEditorContext } from "../../hooks/useMouseMove";
3
+ import { fontFamilyMap, fontOptions } from "../../utils/font";
4
+ import FormatClearIcon from "@mui/icons-material/FormatClear";
5
+ import usePopupStyles from "../PopupTool/PopupToolStyle";
6
+ import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist";
7
+ import { BREAKPOINTS_DEVICES, getBreakPointsValue, getVariableValue } from "../../helper/theme";
8
+ import useWindowResize from "../../hooks/useWindowResize";
9
+ import { toolbarGroups } from "../toolbarGroups";
10
+ import Icon from "../../common/Icon";
11
+ import { useMemo, useState } from "react";
12
+ import CommonButton from "../../common/Button";
13
+ import CustomSelect from "../../common/CustomSelect";
14
+ import ColorButtons from "../../Elements/Color Picker/ColorButtons";
15
+ import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
16
+ import ColorPickerStyles from "../../Elements/Color Picker/Styles";
17
+ import colorWheel from "../../Elements/Color Picker/colorWheel.png";
18
+ import CustomColorPicker from "../../common/CustomColorPicker";
19
+ import { jsx as _jsx } from "react/jsx-runtime";
20
+ import { jsxs as _jsxs } from "react/jsx-runtime";
21
+ import { Fragment as _Fragment } from "react/jsx-runtime";
22
+ function getFontStyleProps(settings = {}, format) {
23
+ const {
24
+ fontWeight,
25
+ fontStyle
26
+ } = settings;
27
+ let isActive;
28
+ let onClick;
29
+ switch (format) {
30
+ case "bold":
31
+ isActive = fontWeight === "bold" || fontWeight === "700";
32
+ onClick = () => {
33
+ return {
34
+ fontWeight: isActive ? "normal" : "bold"
35
+ };
36
+ };
37
+ break;
38
+ case "italic":
39
+ isActive = fontStyle === "italic";
40
+ onClick = () => {
41
+ return {
42
+ fontStyle: isActive ? "unset" : "italic"
43
+ };
44
+ };
45
+ break;
46
+
47
+ // case "underline":
48
+ // isActive = textDecoration.includes("underline");
49
+ // onClick = () => {
50
+ // let otherTextDecoration = textDecoration?.includes("line-through")
51
+ // ? "line-through"
52
+ // : "";
53
+
54
+ // otherTextDecoration += isActive ? "" : " underline";
55
+
56
+ // return { textDecoration: otherTextDecoration };
57
+ // };
58
+ // break;
59
+ // case "strikethrough":
60
+ // isActive = textDecoration.includes("line-through");
61
+ // onClick = () => {
62
+ // let otherTextDecoration = textDecoration?.includes("underline")
63
+ // ? "underline"
64
+ // : "";
65
+
66
+ // otherTextDecoration += isActive ? "" : " line-through";
67
+
68
+ // return { textDecoration: otherTextDecoration };
69
+ // };
70
+ // break;
71
+
72
+ default:
73
+ isActive = false;
74
+ onClick = () => {};
75
+ break;
76
+ }
77
+ return {
78
+ isActive,
79
+ onClick
80
+ };
81
+ }
82
+ const allTools = toolbarGroups.flat();
83
+ function ThemeTextFormat(props) {
84
+ const {
85
+ settings,
86
+ updateSettings,
87
+ onSaveTextSettings,
88
+ onClose
89
+ } = props;
90
+ const {
91
+ theme
92
+ } = useEditorContext();
93
+ const classes = usePopupStyles(theme);
94
+ const pickerStyles = ColorPickerStyles(theme);
95
+ const fontStyle = allTools.filter(f => f.type === "mark" && f.themeEnabled);
96
+ const fontWeight = allTools.find(f => f.format === "fontWeight");
97
+ const fontFamilyVal = useMemo(() => {
98
+ const {
99
+ fontFamily = ""
100
+ } = settings;
101
+ let font = fontFamily.startsWith("var") ? getVariableValue(fontFamily) : fontFamily;
102
+ return fontOptions?.find(f => f.text === font)?.value;
103
+ }, [settings, fontOptions]);
104
+ const fontWeightVal = useMemo(() => {
105
+ const {
106
+ options
107
+ } = fontWeight || {};
108
+ const selected = options?.find(o => o.value === settings?.fontWeight || o.numVal === settings?.fontWeight);
109
+ return selected?.value;
110
+ }, [settings?.fontWeight]);
111
+ return /*#__PURE__*/_jsxs(Grid, {
112
+ container: true,
113
+ sx: classes.textFormatWrapper,
114
+ children: [/*#__PURE__*/_jsxs(Grid, {
115
+ item: true,
116
+ xs: 12,
117
+ children: [/*#__PURE__*/_jsxs(Grid, {
118
+ container: true,
119
+ justifyContent: "space-between",
120
+ alignItems: "center",
121
+ children: [/*#__PURE__*/_jsx(Grid, {
122
+ item: true,
123
+ children: /*#__PURE__*/_jsx(Typography, {
124
+ variant: "body1",
125
+ color: "primary",
126
+ sx: classes.typoLabel,
127
+ children: "Font Family"
128
+ })
129
+ }), /*#__PURE__*/_jsx(Grid, {
130
+ item: true,
131
+ children: /*#__PURE__*/_jsx(Button, {
132
+ sx: classes.defaultBtn,
133
+ startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
134
+ onClick: () => updateSettings({
135
+ fontFamily: Object.values(fontFamilyMap)[0]
136
+ }),
137
+ children: "Default"
138
+ })
139
+ })]
140
+ }), /*#__PURE__*/_jsx(Grid, {
141
+ item: true,
142
+ xs: 12,
143
+ sx: classes.textFormatField,
144
+ children: /*#__PURE__*/_jsx(CustomSelect, {
145
+ options: fontOptions,
146
+ classes: classes,
147
+ onChange: e => {
148
+ const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
149
+ updateSettings({
150
+ fontFamily
151
+ });
152
+ },
153
+ value: fontFamilyVal || fontOptions[0].value
154
+ })
155
+ })]
156
+ }), /*#__PURE__*/_jsxs(Grid, {
157
+ container: true,
158
+ spacing: 2,
159
+ children: [/*#__PURE__*/_jsxs(Grid, {
160
+ item: true,
161
+ xs: 6,
162
+ children: [/*#__PURE__*/_jsx(Typography, {
163
+ variant: "body1",
164
+ color: "primary",
165
+ sx: classes.typoLabel,
166
+ children: "Font Weight"
167
+ }), /*#__PURE__*/_jsx(Grid, {
168
+ item: true,
169
+ xs: 12,
170
+ sx: classes.textFormatField,
171
+ children: /*#__PURE__*/_jsx(CustomSelect, {
172
+ options: fontWeight?.options || [],
173
+ classes: classes,
174
+ onChange: e => {
175
+ updateSettings({
176
+ fontWeight: e.target.value
177
+ });
178
+ },
179
+ value: fontWeightVal
180
+ })
181
+ })]
182
+ }), /*#__PURE__*/_jsxs(Grid, {
183
+ item: true,
184
+ xs: 6,
185
+ children: [/*#__PURE__*/_jsx(Typography, {
186
+ variant: "body1",
187
+ color: "primary",
188
+ sx: classes.typoLabel,
189
+ children: "Font Size"
190
+ }), /*#__PURE__*/_jsx(Grid, {
191
+ item: true,
192
+ xs: 12,
193
+ sx: classes.textFormatCG,
194
+ children: /*#__PURE__*/_jsx(TextSize, {
195
+ classes: classes,
196
+ value: settings?.fontSize || 16,
197
+ onChange: fontSize => updateSettings({
198
+ fontSize
199
+ }),
200
+ fullWidth: true
201
+ })
202
+ })]
203
+ })]
204
+ }), /*#__PURE__*/_jsxs(Grid, {
205
+ item: true,
206
+ xs: 12,
207
+ sx: classes.textFormatField,
208
+ style: {
209
+ marginTop: "14px"
210
+ },
211
+ children: [/*#__PURE__*/_jsxs(Grid, {
212
+ container: true,
213
+ justifyContent: "space-between",
214
+ alignItems: "center",
215
+ children: [/*#__PURE__*/_jsx(Grid, {
216
+ item: true,
217
+ children: /*#__PURE__*/_jsx(Typography, {
218
+ variant: "body1",
219
+ color: "primary",
220
+ sx: classes.typoLabel,
221
+ children: "Text Color"
222
+ })
223
+ }), /*#__PURE__*/_jsx(Grid, {
224
+ item: true,
225
+ children: /*#__PURE__*/_jsx(Button, {
226
+ sx: classes.defaultBtn,
227
+ startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
228
+ onClick: () => updateSettings({
229
+ color: "#ddd"
230
+ }),
231
+ children: "Default"
232
+ })
233
+ })]
234
+ }), /*#__PURE__*/_jsx(Grid, {
235
+ sx: classes.textFormatColorWrpr,
236
+ children: /*#__PURE__*/_jsx(ColorPicker, {
237
+ classes: classes,
238
+ pickerStyles: pickerStyles,
239
+ onChange: color => updateSettings({
240
+ color
241
+ }),
242
+ color: settings?.color,
243
+ disableEditTheme: true
244
+ })
245
+ })]
246
+ }), /*#__PURE__*/_jsxs(Grid, {
247
+ item: true,
248
+ xs: 12,
249
+ children: [/*#__PURE__*/_jsx(Typography, {
250
+ variant: "body1",
251
+ color: "primary",
252
+ sx: classes.typoLabel,
253
+ children: "Typography"
254
+ }), /*#__PURE__*/_jsx(Grid, {
255
+ item: true,
256
+ xs: 12,
257
+ className: "typo-icons",
258
+ sx: classes.evenSpace,
259
+ children: fontStyle?.map((m, i) => {
260
+ const {
261
+ isActive,
262
+ onClick
263
+ } = getFontStyleProps(settings, m.format) || {};
264
+ return /*#__PURE__*/_jsx(CommonButton, {
265
+ active: isActive,
266
+ onClick: () => {
267
+ const style = onClick();
268
+ updateSettings(style);
269
+ },
270
+ children: /*#__PURE__*/_jsx(Icon, {
271
+ icon: m.format
272
+ })
273
+ }, i);
274
+ })
275
+ })]
276
+ }), /*#__PURE__*/_jsx(Grid, {
277
+ item: true,
278
+ xs: 12,
279
+ sx: {
280
+ mt: 2
281
+ },
282
+ children: /*#__PURE__*/_jsxs("div", {
283
+ style: {
284
+ display: "flex",
285
+ justifyContent: "end",
286
+ margin: "8px",
287
+ position: "absolute",
288
+ bottom: 0,
289
+ right: 0
290
+ },
291
+ children: [/*#__PURE__*/_jsx(Button, {
292
+ onClick: onClose,
293
+ className: "secondaryBtn",
294
+ children: "Cancel"
295
+ }), /*#__PURE__*/_jsx(Button, {
296
+ onClick: onSaveTextSettings,
297
+ className: "primaryBtn",
298
+ children: "Save"
299
+ })]
300
+ })
301
+ })]
302
+ });
303
+ }
304
+ export default ThemeTextFormat;
305
+ function TextSize(props) {
306
+ const {
307
+ classes,
308
+ value: val,
309
+ onChange,
310
+ fullWidth
311
+ } = props;
312
+ const [size] = useWindowResize();
313
+ const value = getBreakPointsValue(val, size?.device);
314
+ const updateMarkData = newVal => {
315
+ let upData = {
316
+ ...getBreakPointsValue(val),
317
+ [size?.device]: `${newVal}px`
318
+ };
319
+
320
+ // if desktop update to all other devices
321
+ // to avoid default normal size
322
+ if (size?.device === "lg") {
323
+ upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
324
+ a[b] = `${newVal}px`;
325
+ return a;
326
+ }, {});
327
+ }
328
+ onChange(upData);
329
+ };
330
+ const onChangeSize = e => {
331
+ let inc = parseInt(e.target.value) || 8;
332
+ inc = inc > 200 ? 200 : inc;
333
+ updateMarkData(inc || 8);
334
+ };
335
+ const getSizeVal = () => {
336
+ try {
337
+ return parseInt(value);
338
+ } catch (err) {
339
+ return "";
340
+ }
341
+ };
342
+ const combinedOldVal = getSizeVal();
343
+ const onIncreaseSize = () => {
344
+ let inc = (combinedOldVal || 0) + 1;
345
+ inc = inc > 200 ? 200 : inc;
346
+ updateMarkData(inc);
347
+ };
348
+ const onDecreaseSize = () => {
349
+ const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
350
+ updateMarkData(newVal);
351
+ };
352
+ return /*#__PURE__*/_jsx(TextField, {
353
+ sx: classes?.textSize,
354
+ value: combinedOldVal,
355
+ onChange: onChangeSize,
356
+ size: "small",
357
+ inputProps: {
358
+ style: {
359
+ width: fullWidth ? "100%" : "30px",
360
+ textAlign: "center",
361
+ height: "19px",
362
+ fontSize: "14px"
363
+ }
364
+ },
365
+ fullWidth: fullWidth,
366
+ InputProps: {
367
+ style: {
368
+ borderRadius: "8px"
369
+ },
370
+ endAdornment: /*#__PURE__*/_jsxs("div", {
371
+ className: "textFontArrows",
372
+ children: [/*#__PURE__*/_jsx(IconButton, {
373
+ onClick: onIncreaseSize,
374
+ size: "small",
375
+ children: /*#__PURE__*/_jsx(TextPlusIcon, {})
376
+ }), /*#__PURE__*/_jsx(IconButton, {
377
+ onClick: onDecreaseSize,
378
+ size: "small",
379
+ children: /*#__PURE__*/_jsx(TextMinusIcon, {})
380
+ })]
381
+ })
382
+ }
383
+ });
384
+ }
385
+ function ColorPicker(props) {
386
+ const {
387
+ classes,
388
+ pickerStyles,
389
+ onChange,
390
+ color,
391
+ disableEditTheme
392
+ } = props;
393
+ const [anchorEl, setAnchorEl] = useState(null);
394
+ const open = Boolean(anchorEl);
395
+ const handleClose = () => {
396
+ setAnchorEl(null);
397
+ };
398
+ return /*#__PURE__*/_jsxs(_Fragment, {
399
+ children: [/*#__PURE__*/_jsx(Tooltip, {
400
+ title: "",
401
+ arrow: true,
402
+ children: /*#__PURE__*/_jsx(IconButton, {
403
+ sx: pickerStyles.colorPickerIcon,
404
+ onClick: e => {
405
+ setAnchorEl(e.currentTarget);
406
+ },
407
+ children: /*#__PURE__*/_jsx("img", {
408
+ src: colorWheel,
409
+ alt: "color wheel"
410
+ })
411
+ })
412
+ }), /*#__PURE__*/_jsx(ColorButtons, {
413
+ classes: pickerStyles,
414
+ onSelect: onChange,
415
+ activeColor: color,
416
+ disableEditTheme: disableEditTheme
417
+ }), /*#__PURE__*/_jsx(Popover, {
418
+ open: open,
419
+ anchorEl: anchorEl,
420
+ onClose: handleClose,
421
+ anchorOrigin: {
422
+ vertical: "top",
423
+ horizontal: "center"
424
+ },
425
+ transformOrigin: {
426
+ vertical: "bottom",
427
+ horizontal: "top"
428
+ },
429
+ sx: classes.colorPickerPopup,
430
+ children: /*#__PURE__*/_jsx(CustomColorPicker, {
431
+ gradient: true,
432
+ onChange: onChange,
433
+ color: color,
434
+ disableEditTheme: disableEditTheme
435
+ })
436
+ })]
437
+ });
438
+ }
@@ -1,10 +1,9 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
3
3
  import { Editor, Range } from "slate";
4
- import { useSlate, useFocused } from "slate-react";
4
+ import { useSlate } from "slate-react";
5
5
  import useDrag from "../../hooks/useDrag";
6
6
  import { TableUtil } from "../../utils/table";
7
- import useWindowResize from "../../hooks/useWindowResize";
8
7
  import MiniTextFormat from "./MiniTextFormat";
9
8
  import { useEditorContext } from "../../hooks/useMouseMove";
10
9
  import usePopupStyles from "../PopupTool/PopupToolStyle";
@@ -23,17 +22,12 @@ const PopupTool = props => {
23
22
  const [anchorEl, setAnchorEl] = useState(null);
24
23
  const [open, setOpen] = useState(false);
25
24
  const editor = useSlate();
26
- const inFocus = useFocused();
27
25
  const {
28
26
  selection
29
27
  } = editor;
30
28
  const [event] = useDrag(anchorEl);
31
29
  const id = open ? "popup-edit-tool" : "";
32
30
  const table = new TableUtil(editor);
33
- const [size] = useWindowResize();
34
- const {
35
- selectedElement
36
- } = useEditorContext();
37
31
  useEffect(() => {
38
32
  if (event === "end" && anchorEl && !open) {
39
33
  // for table cell selection
@@ -50,17 +44,12 @@ const PopupTool = props => {
50
44
  }
51
45
  }, [event, anchorEl]);
52
46
  useEffect(() => {
53
- if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
47
+ if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
54
48
  setAnchorEl(null);
55
49
  } else {
56
50
  updateAnchorEl();
57
51
  }
58
52
  }, [selection]);
59
- useEffect(() => {
60
- if (selectedElement?.enable === 1) {
61
- setAnchorEl(null);
62
- }
63
- }, [selection, selectedElement?.path, selectedElement?.enable]);
64
53
  const updateAnchorEl = () => {
65
54
  try {
66
55
  const domSelection = window.getSelection();
@@ -94,35 +83,28 @@ const PopupTool = props => {
94
83
  handleClose();
95
84
  }
96
85
  },
97
- children: size.device === "xs" ? /*#__PURE__*/_jsx("div", {
98
- className: "mobileMiniTextWrapper",
99
- children: /*#__PURE__*/_jsx(MiniTextFormat, {
100
- editor: editor,
101
- classes: classes,
102
- closeMainPopup: handleClose,
103
- customProps: customProps
104
- })
105
- }) : /*#__PURE__*/_jsx(Popper, {
86
+ children: /*#__PURE__*/_jsx(Popper, {
106
87
  id: id,
107
88
  open: open,
108
89
  anchorEl: anchorEl,
109
90
  transition: true,
110
91
  placement: "auto-end",
111
92
  sx: classes.popupWrapper,
112
- className: `tools-drawer ${size?.device}`,
113
93
  children: ({
114
94
  TransitionProps
115
95
  }) => /*#__PURE__*/_jsx(Fade, {
116
96
  ...TransitionProps,
117
97
  children: /*#__PURE__*/_jsx(Paper, {
118
98
  style: {
119
- borderRadius: "10px"
99
+ borderRadius: "6px",
100
+ border: "1px solid #8360FD"
120
101
  },
121
102
  children: /*#__PURE__*/_jsx(MiniTextFormat, {
122
103
  editor: editor,
123
104
  classes: classes,
124
105
  closeMainPopup: handleClose,
125
- customProps: customProps
106
+ customProps: customProps,
107
+ theme: theme
126
108
  })
127
109
  })
128
110
  })
@@ -31,7 +31,6 @@ import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
31
31
  import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
32
32
  import DividerButton from "../Elements/Divider/DividerButton.js";
33
33
  import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
34
- import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
35
34
  import { jsx as _jsx } from "react/jsx-runtime";
36
35
  import { jsxs as _jsxs } from "react/jsx-runtime";
37
36
  export const RenderToolbarIcon = props => {
@@ -134,12 +133,6 @@ export const RenderToolbarIcon = props => {
134
133
  customProps: customProps,
135
134
  icoBtnType: icoBtnType
136
135
  }, element.id);
137
- case "freegrid":
138
- return /*#__PURE__*/_jsx(FreeGridButton, {
139
- editor: editor,
140
- customProps: customProps,
141
- icoBtnType: icoBtnType
142
- }, element.id);
143
136
  case "newLine":
144
137
  return /*#__PURE__*/_jsx(NewLineButton, {
145
138
  editor: editor,
@@ -28,16 +28,20 @@ export const toolbarGroups = [[{
28
28
  type: "dropdown",
29
29
  options: [{
30
30
  text: "Normal",
31
- value: "normal"
31
+ value: "normal",
32
+ numVal: "400"
32
33
  }, {
33
34
  text: "Bold",
34
- value: "bold"
35
+ value: "bold",
36
+ numVal: "700"
35
37
  }, {
36
38
  text: "Bolder",
37
- value: "bolder"
39
+ value: "bolder",
40
+ numVal: "700"
38
41
  }, {
39
42
  text: "Lighter",
40
- value: "lighter"
43
+ value: "lighter",
44
+ numVal: "100"
41
45
  }],
42
46
  icon: FormatBoldIcon,
43
47
  width: "100px"
@@ -46,13 +50,15 @@ export const toolbarGroups = [[{
46
50
  format: "bold",
47
51
  type: "mark",
48
52
  title: "Bold",
49
- basic: true
53
+ basic: true,
54
+ themeEnabled: true
50
55
  }, {
51
56
  id: 4,
52
57
  format: "italic",
53
58
  type: "mark",
54
59
  title: "Italic",
55
- basic: true
60
+ basic: true,
61
+ themeEnabled: true
56
62
  }, {
57
63
  id: 5,
58
64
  format: "underline",
@@ -101,6 +107,42 @@ export const toolbarGroups = [[{
101
107
  type: "block",
102
108
  title: "H3",
103
109
  group: "typography"
110
+ }, {
111
+ id: 39,
112
+ format: "headingFour",
113
+ type: "block",
114
+ title: "H4",
115
+ group: "typography"
116
+ }, {
117
+ id: 40,
118
+ format: "headingFive",
119
+ type: "block",
120
+ title: "H5",
121
+ group: "typography"
122
+ }, {
123
+ id: 41,
124
+ format: "headingSix",
125
+ type: "block",
126
+ title: "H6",
127
+ group: "typography"
128
+ }, {
129
+ id: 42,
130
+ format: "paragraphOne",
131
+ type: "block",
132
+ title: "Paragraph 1",
133
+ group: "typography"
134
+ }, {
135
+ id: 43,
136
+ format: "paragraphTwo",
137
+ type: "block",
138
+ title: "Paragraph 2",
139
+ group: "typography"
140
+ }, {
141
+ id: 44,
142
+ format: "paragraphThree",
143
+ type: "block",
144
+ title: "Paragraph 3",
145
+ group: "typography"
104
146
  }, {
105
147
  id: 14,
106
148
  format: "doublequote",
@@ -196,11 +238,6 @@ export const toolbarGroups = [[{
196
238
  format: "grid",
197
239
  type: "grid",
198
240
  group: "elements"
199
- }, {
200
- id: 50,
201
- format: "freegrid",
202
- type: "freegrid",
203
- group: "elements"
204
241
  }, {
205
242
  id: 41,
206
243
  format: "emoji",