@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,247 @@
1
+ const style = () => ({
2
+ ".fs-12": {
3
+ fontSize: "12px"
4
+ },
5
+ ".fs-14": {
6
+ fontSize: "14px"
7
+ },
8
+ ".fw-500": {
9
+ fontWeight: "500"
10
+ },
11
+ ".fw-600": {
12
+ fontWeight: "600"
13
+ },
14
+ ".pointer": {
15
+ cursor: "pointer"
16
+ },
17
+ ".transformNone": {
18
+ textTransform: "none"
19
+ },
20
+ ".settingsContainer": {
21
+ width: "340px",
22
+ padding: "16px 16px",
23
+ background: "#fff",
24
+ ".header": {
25
+ borderBottom: `1px solid #DCE4EC`,
26
+ paddingBottom: "8px"
27
+ // marginBottom: "16px",
28
+ }
29
+ },
30
+
31
+ ".title": {
32
+ fontWeight: "700",
33
+ fontSize: "14px"
34
+ },
35
+ ".closeBtn": {
36
+ width: "26px",
37
+ height: "26px",
38
+ BorderRadius: "4px",
39
+ flexShrik: "0",
40
+ padding: "4px",
41
+ background: " #F8FAFC",
42
+ borderRadius: "4px"
43
+ },
44
+ ".MuiTabs-scroller": {
45
+ borderBottom: `1px solid #DCE4EC`
46
+ },
47
+ ".themeCardWrapper": {
48
+ borderRadius: "4px",
49
+ ".active": {
50
+ background: "#ECF2FF"
51
+ }
52
+ },
53
+ ".primaryCard, .secondaryCard": {
54
+ width: "44px",
55
+ height: "44px",
56
+ borderRadius: "5px",
57
+ border: `1px solid #929292`
58
+ },
59
+ ".flexAlign": {
60
+ display: "flex",
61
+ alignItems: "center"
62
+ },
63
+ ".activeColorBox, .xsColorBox": {
64
+ width: "24px",
65
+ height: "24px",
66
+ borderRadius: "5px",
67
+ border: `1px solid #929292`
68
+ },
69
+ ".themeCard": {
70
+ borderRadius: "7px",
71
+ padding: "16px",
72
+ border: "1px solid #F3F3F3",
73
+ boxShadow: "1px 2px 5px 0px #00000014",
74
+ position: "relative",
75
+ flexWrap: "nowrap",
76
+ ".tickIcon": {
77
+ visibility: "hidden",
78
+ opacity: "0",
79
+ position: "absolute",
80
+ right: "-8px",
81
+ top: "-8px"
82
+ },
83
+ "&.selected": {
84
+ ".tickIcon": {
85
+ visibility: "visible",
86
+ opacity: "1"
87
+ }
88
+ }
89
+ },
90
+ ".otherColors": {
91
+ display: "flex",
92
+ flexWrap: "wrap",
93
+ width: "48px",
94
+ ".smallCard": {
95
+ width: "20px",
96
+ height: "20px",
97
+ borderRadius: "5px",
98
+ border: `1px solid #929292`
99
+ }
100
+ },
101
+ ".imageUpload": {
102
+ background: "#F3F3F3",
103
+ borderRadius: "12px",
104
+ padding: "10px",
105
+ height: "208px",
106
+ position: "relative",
107
+ "& .resetIcon": {
108
+ position: "absolute",
109
+ right: "10px",
110
+ top: "10px"
111
+ },
112
+ ".changeImgText": {
113
+ position: "absolute",
114
+ left: "50%",
115
+ top: "50%",
116
+ transform: "translate(-50%, -50%)",
117
+ zIndex: 1,
118
+ background: "#0000004D",
119
+ color: "#fff",
120
+ padding: "6px",
121
+ borderRadius: "6px",
122
+ fontSize: "12px",
123
+ fontWeight: 600,
124
+ opacity: "0",
125
+ visibility: "hidden"
126
+ },
127
+ "&:hover": {
128
+ ".changeImgText": {
129
+ opacity: "1",
130
+ visibility: "visible"
131
+ }
132
+ }
133
+ },
134
+ ".imgUploadInner": {
135
+ background: "#fff",
136
+ borderRadius: "10px",
137
+ border: "0.79px dashed #8360FD",
138
+ height: "100%"
139
+ },
140
+ ".outlineBtn": {
141
+ color: "#2563EB",
142
+ borderRadius: "8px",
143
+ boxShadow: "0px 4px 10px 0px #00000026",
144
+ border: "1px solid #2563EB",
145
+ background: "#EBF1F9",
146
+ height: "34px",
147
+ textTransform: "unset"
148
+ },
149
+ ".seondaryOutlineBtn": {
150
+ border: "1px solid #D8DDE1",
151
+ borderRadius: "8px",
152
+ // boxShadow: "0px 4px 10px 0px #00000026",
153
+ height: "34px",
154
+ textTransform: "unset",
155
+ background: "#eceef3",
156
+ color: "#64748B"
157
+ },
158
+ ".blueBtn": {
159
+ boxShadow: "0px 4px 10px 0px #00000026",
160
+ background: "#2563EB",
161
+ borderRadius: "8px",
162
+ textTransform: "unset",
163
+ height: "34px",
164
+ color: "#fff",
165
+ "&.disabled": {
166
+ background: "#D9D9DD !important",
167
+ color: "#fff !important"
168
+ }
169
+ },
170
+ ".generatedItem": {
171
+ border: "1px solid #E4E6E9",
172
+ borderRadius: "7px",
173
+ padding: "14px",
174
+ display: "flex",
175
+ gap: "16px",
176
+ position: "relative",
177
+ justifyContent: "space-between",
178
+ marginBottom: "12px",
179
+ ".tickIcon": {
180
+ visibility: "hidden",
181
+ opacity: "0",
182
+ position: "absolute",
183
+ right: "-8px",
184
+ top: "-8px"
185
+ },
186
+ "&.selected": {
187
+ border: "1px solid #2563EB",
188
+ boxShadow: " 3px 3px 8px 0px #2563EB40",
189
+ ".tickIcon": {
190
+ visibility: "visible",
191
+ opacity: "1"
192
+ }
193
+ },
194
+ ".colorBox": {
195
+ border: "1px solid #929292",
196
+ height: "28px",
197
+ width: "28px",
198
+ borderRadius: "5px"
199
+ }
200
+ },
201
+ ".textArea": {
202
+ background: "#F3F3F3",
203
+ borderRadius: "12px",
204
+ padding: "10px",
205
+ height: "208px",
206
+ "& textarea": {
207
+ width: "100%",
208
+ height: "100% !important",
209
+ border: "0.79px solid #8360FD",
210
+ background: "#FFFFFF",
211
+ borderRadius: "8px",
212
+ padding: "10px"
213
+ }
214
+ },
215
+ ".imageUrl": {
216
+ height: "auto !important",
217
+ ".MuiOutlinedInput-root": {
218
+ border: "0.79px solid #8360FD",
219
+ background: "#FFFFFF",
220
+ borderRadius: "8px",
221
+ ".tickIcon": {
222
+ width: "18px"
223
+ }
224
+ },
225
+ "&.invalidUrl": {
226
+ ".MuiInputAdornment-root": {
227
+ ".tickIcon": {
228
+ ".fillPath": {
229
+ fill: "#D9D9DD!important"
230
+ }
231
+ }
232
+ }
233
+ }
234
+ },
235
+ ".saveThemeContainer": {
236
+ ".MuiOutlinedInput-root": {
237
+ borderRadius: "8px",
238
+ boxShadow: "0px 4px 16px 0px #0000000D"
239
+ }
240
+ },
241
+ ".uploadedImage": {
242
+ width: "126px",
243
+ height: "126px",
244
+ borderRadius: "126px"
245
+ }
246
+ });
247
+ export default style;
@@ -1,4 +1,4 @@
1
- import { Editor, Transforms, Element as SlateElement } from "slate";
1
+ import { Editor, Transforms, Element as SlateElement, Range } from "slate";
2
2
  import { Box } from "@mui/material";
3
3
  import { fontFamilyMap, sizeMap } from "./font";
4
4
  import Link from "../Elements/Link/Link";
@@ -34,16 +34,12 @@ import SimpleText from "../Elements/SimpleText";
34
34
  import CheckList from "../Elements/List/CheckList";
35
35
  import { isEmptyTextNode } from "../helper";
36
36
  import Attachments from "../Elements/Attachments/Attachments";
37
- import { getBreakPointsValue } from "../helper/theme";
37
+ import { getBreakPointsValue, textThemeFields } from "../helper/theme";
38
38
  import Variables from "../Elements/Variables/Variable";
39
- import insertNewLine from "./insertNewLine";
40
39
  import Divider from "../Elements/Divider/Divider";
41
40
  import { getBorderColor } from "./helper";
42
41
  import Code from "../Elements/EmbedScript/Code";
43
- import FreeGrid from "../Elements/FreeGrid/FreeGrid";
44
- import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
45
- import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
46
- import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
42
+ import { ReactEditor } from "slate-react";
47
43
  import { jsx as _jsx } from "react/jsx-runtime";
48
44
  const alignment = ["alignLeft", "alignRight", "alignCenter"];
49
45
  const list_types = ["orderedList", "unorderedList"];
@@ -51,7 +47,17 @@ const LIST_FORMAT_TYPE = {
51
47
  orderedList: "list-item",
52
48
  unorderedList: "list-item"
53
49
  };
54
- const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
50
+
51
+ // const NEWLINESAFTER = [
52
+ // "headingOne",
53
+ // "headingTwo",
54
+ // "headingThree",
55
+ // "headingFour",
56
+ // "headingFive",
57
+ // "headingSix",
58
+ // ];
59
+
60
+ const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
55
61
  export const toggleBlock = (editor, format, selection = true, attr = {}) => {
56
62
  const isActive = isBlockActive(editor, format);
57
63
  const isList = list_types.includes(format);
@@ -84,8 +90,9 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
84
90
  if (!selection) {
85
91
  Transforms.insertText(editor, "");
86
92
  }
93
+ const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
87
94
  Transforms.setNodes(editor, {
88
- type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
95
+ type: isActive ? forActiveType : isList ? LIST_FORMAT_TYPE[format] : format,
89
96
  ...attr
90
97
  });
91
98
  if (isList && !isActive) {
@@ -94,10 +101,12 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
94
101
  children: []
95
102
  });
96
103
  }
97
- if (NEWLINESAFTER.indexOf(format) > -1) {
98
- insertNewLine(editor);
99
- }
104
+
105
+ // if (NEWLINESAFTER.indexOf(format) > -1) {
106
+ // insertNewLine(editor);
107
+ // }
100
108
  };
109
+
101
110
  export const addMarkData = (editor, data) => {
102
111
  try {
103
112
  Editor.addMark(editor, data.format, data.value);
@@ -106,9 +115,14 @@ export const addMarkData = (editor, data) => {
106
115
  }
107
116
  };
108
117
  export const toggleMark = (editor, format) => {
109
- const isActive = isMarkActive(editor, format);
118
+ const isActive = isMarkBtnActive(editor, format);
110
119
  if (isActive) {
111
- Editor.removeMark(editor, format);
120
+ const isThemeSupportedMark = textThemeFields.some(f => f === format);
121
+ if (isThemeSupportedMark) {
122
+ Editor.addMark(editor, format, false);
123
+ } else {
124
+ Editor.removeMark(editor, format);
125
+ }
112
126
  } else {
113
127
  Editor.addMark(editor, format, true);
114
128
  }
@@ -122,6 +136,53 @@ export const isMarkActive = (editor, format) => {
122
136
  return null;
123
137
  }
124
138
  };
139
+ export const isMarkBtnActive = (editor, format) => {
140
+ switch (format) {
141
+ case "bold":
142
+ {
143
+ const style = getSelectedElementStyle("font-weight", editor);
144
+ return style === "700";
145
+ }
146
+ case "italic":
147
+ {
148
+ const style = getSelectedElementStyle("font-style", editor);
149
+ return style === format;
150
+ }
151
+ // case "underline": {
152
+ // const style = getSelectedElementStyle("text-decoration");
153
+
154
+ // return style?.includes(format);
155
+ // }
156
+ // case "strikethrough": {
157
+ // const style = getSelectedElementStyle("text-decoration");
158
+
159
+ // return style?.includes("line-through");
160
+ // }
161
+ default:
162
+ return isMarkActive(editor, format);
163
+ }
164
+ };
165
+ export const getSelectedElementStyle = (styleProperty, editor) => {
166
+ try {
167
+ if (!editor.selection) {
168
+ return "";
169
+ }
170
+ if (Range.isCollapsed(editor.selection)) {
171
+ return "";
172
+ }
173
+ const domRange = ReactEditor.toDOMRange(editor, editor.selection);
174
+ const selectedDomNode = domRange.commonAncestorContainer;
175
+
176
+ // If it's a text node, get its parent element
177
+ const selectedElement = selectedDomNode.nodeType === 3 ? selectedDomNode.parentElement : selectedDomNode;
178
+ if (selectedElement) {
179
+ const computedStyle = window.getComputedStyle(selectedElement);
180
+ return computedStyle.getPropertyValue(styleProperty) || "";
181
+ }
182
+ } catch (err) {
183
+ console.log(err);
184
+ }
185
+ };
125
186
  export const isBlockActive = (editor, format) => {
126
187
  const [match] = Editor.nodes(editor, {
127
188
  match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
@@ -164,7 +225,32 @@ export const activeMark = (editor, format) => {
164
225
  return null;
165
226
  }
166
227
  };
167
- export const getMarked = (leaf, children, theme) => {
228
+
229
+ // to avoid the styles, that automatically assign from themes
230
+ const getThemeMarkedLeaf = (leaf, children) => {
231
+ const {
232
+ italic,
233
+ bold
234
+ } = leaf || {};
235
+ const style = {};
236
+ if (italic === false) {
237
+ style.fontStyle = "normal";
238
+ }
239
+ if (bold === false) {
240
+ style.fontWeight = "normal";
241
+ }
242
+ if (Object.keys(style).length) {
243
+ children = /*#__PURE__*/_jsx(Box, {
244
+ component: "span",
245
+ sx: {
246
+ "& span": style
247
+ },
248
+ children: children
249
+ });
250
+ }
251
+ return children;
252
+ };
253
+ export const getMarked = (leaf, children) => {
168
254
  const className = leaf?.doublequote ? "doublequote" : "";
169
255
  if (leaf.bold) {
170
256
  children = /*#__PURE__*/_jsx("strong", {
@@ -181,6 +267,7 @@ export const getMarked = (leaf, children, theme) => {
181
267
  children: children
182
268
  });
183
269
  }
270
+ children = getThemeMarkedLeaf(leaf, children);
184
271
  if (leaf.strikethrough) {
185
272
  children = /*#__PURE__*/_jsx("span", {
186
273
  style: {
@@ -214,22 +301,23 @@ export const getMarked = (leaf, children, theme) => {
214
301
  } : {
215
302
  color: leaf.color
216
303
  };
304
+ const fontSize = {
305
+ lg: sizeMap[leaf.fontSize] || leaf.fontSize,
306
+ ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
307
+ };
308
+ const fontSizesImportant = {};
309
+ Object.entries(fontSize).forEach(([key, value]) => {
310
+ fontSizesImportant[key] = `${value} !important`;
311
+ });
217
312
  children = /*#__PURE__*/_jsx("span", {
218
- style: {
219
- background: leaf.bgColor
220
- },
221
313
  children: /*#__PURE__*/_jsx(Box, {
222
314
  className: className,
223
315
  component: "span",
224
316
  sx: {
225
- ...wrapThemeBreakpoints({
226
- lg: sizeMap[leaf.fontSize] || leaf.fontSize,
227
- ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
228
- }, "fontSize", theme),
229
- // fontSize: {
230
- // lg: sizeMap[leaf.fontSize] || leaf.fontSize,
231
- // ...getBreakPointsValue(leaf.fontSize, null, "overrideText"),
232
- // },
317
+ "& span": {
318
+ fontSize: fontSizesImportant,
319
+ background: leaf.bgColor
320
+ },
233
321
  ...textStyles,
234
322
  fontFamily: family,
235
323
  fontWeight: leaf.fontWeight
@@ -258,31 +346,71 @@ export const getBlock = props => {
258
346
  } = props;
259
347
  const attributes = props.attributes ?? {};
260
348
  const isEmpty = isEmptyTextNode(element);
349
+ const commonHeadingProps = () => ({
350
+ ...attributes,
351
+ ...element.attr,
352
+ className: `content-editable ${isEmpty ? "empty" : ""} theme-element`
353
+ });
354
+ const commonParaProps = paraType => ({
355
+ ...attributes,
356
+ ...element.attr,
357
+ className: `content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
358
+ });
261
359
  switch (element.type) {
262
360
  case "headingOne":
263
361
  return /*#__PURE__*/_jsx("h1", {
264
- ...attributes,
265
- ...element.attr,
266
- className: `content-editable ${isEmpty ? "empty" : ""}`,
362
+ ...commonHeadingProps(),
267
363
  placeholder: "Heading 1",
268
364
  children: children
269
365
  });
270
366
  case "headingTwo":
271
367
  return /*#__PURE__*/_jsx("h2", {
272
- ...attributes,
273
- ...element.attr,
274
- className: `content-editable ${isEmpty ? "empty" : ""}`,
368
+ ...commonHeadingProps(),
275
369
  placeholder: "Heading 2",
276
370
  children: children
277
371
  });
278
372
  case "headingThree":
279
373
  return /*#__PURE__*/_jsx("h3", {
280
- ...attributes,
281
- ...element.attr,
282
- className: `content-editable ${isEmpty ? "empty" : ""}`,
374
+ ...commonHeadingProps(),
283
375
  placeholder: "Heading 3",
284
376
  children: children
285
377
  });
378
+ case "headingFour":
379
+ return /*#__PURE__*/_jsx("h4", {
380
+ ...commonHeadingProps(),
381
+ placeholder: "Heading 4",
382
+ children: children
383
+ });
384
+ case "headingFive":
385
+ return /*#__PURE__*/_jsx("h5", {
386
+ ...commonHeadingProps(),
387
+ placeholder: "Heading 5",
388
+ children: children
389
+ });
390
+ case "headingSix":
391
+ return /*#__PURE__*/_jsx("h6", {
392
+ ...commonHeadingProps(),
393
+ placeholder: "Heading 6",
394
+ children: children
395
+ });
396
+ case "paragraphOne":
397
+ return /*#__PURE__*/_jsx("p", {
398
+ ...commonParaProps("para1"),
399
+ placeholder: "Paragraph 1",
400
+ children: children
401
+ });
402
+ case "paragraphTwo":
403
+ return /*#__PURE__*/_jsx("p", {
404
+ ...commonParaProps("para2"),
405
+ placeholder: "Paragraph 2",
406
+ children: children
407
+ });
408
+ case "paragraphThree":
409
+ return /*#__PURE__*/_jsx("p", {
410
+ ...commonParaProps("para3"),
411
+ placeholder: "Paragraph 3",
412
+ children: children
413
+ });
286
414
  case "blockquote":
287
415
  return /*#__PURE__*/_jsx("blockquote", {
288
416
  ...attributes,
@@ -415,18 +543,6 @@ export const getBlock = props => {
415
543
  return /*#__PURE__*/_jsx(Grid, {
416
544
  ...props
417
545
  });
418
- case "freegrid":
419
- return /*#__PURE__*/_jsx(FreeGrid, {
420
- ...props
421
- });
422
- case "freegridItem":
423
- return /*#__PURE__*/_jsx(FreeGridItem, {
424
- ...props
425
- });
426
- case "freegridBox":
427
- return /*#__PURE__*/_jsx(FreeGridBox, {
428
- ...props
429
- });
430
546
  case "grid-item":
431
547
  return /*#__PURE__*/_jsx(GridItem, {
432
548
  ...props,
@@ -1,6 +1,5 @@
1
1
  import { Transforms } from "slate";
2
2
  import insertNewLine from "./insertNewLine";
3
- import { windowVar } from "./helper";
4
3
  export const insertButton = editor => {
5
4
  const button = {
6
5
  type: "button",
@@ -10,22 +9,7 @@ export const insertButton = editor => {
10
9
  buttonLink: {
11
10
  linkType: "webAddress"
12
11
  },
13
- iconPosition: "start",
14
- bgColor: "#2563EB",
15
- textColor: "#FFF",
16
- borderRadius: {
17
- topLeft: 30,
18
- topRight: 30,
19
- bottomLeft: 30,
20
- bottomRight: 30
21
- },
22
- bannerSpacing: {
23
- left: 16,
24
- top: 8,
25
- right: 16,
26
- bottom: 8
27
- },
28
- ...(windowVar.lastButtonProps || {})
12
+ iconPosition: "start"
29
13
  };
30
14
  Transforms.insertNodes(editor, button);
31
15
  Transforms.move(editor);
@@ -100,7 +100,7 @@ export const draftToSlate = props => {
100
100
  return a;
101
101
  }, []);
102
102
  return converted;
103
- } else if (data?.length) {
103
+ } else if (data?.length > 0) {
104
104
  return data;
105
105
  } else {
106
106
  return [{
@@ -1,9 +1,8 @@
1
- import { Editor, Transforms, Element, Node, Path } from "slate";
1
+ import { Editor, Transforms, Element, Node, Path, Range } from "slate";
2
2
  import { toggleBlock } from "./SlateUtilityFunctions";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { insertAccordion } from "./accordion";
5
5
  import { isListItem } from "./helper";
6
- import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
7
6
  import EDITORCMDS from "../common/EditorCmds";
8
7
  const HOTKEYS = {
9
8
  b: "bold",
@@ -76,10 +75,6 @@ export const commands = props => {
76
75
  } else {
77
76
  Editor.addMark(editor, HOTKEYS[event.key], true);
78
77
  }
79
- } else if (RnDCtrlCmds[event.key]) {
80
- RnDCtrlCmds[event.key](event, {
81
- editor
82
- });
83
78
  } else if (EDITORCMDS[event.key]) {
84
79
  EDITORCMDS[event.key](event, {
85
80
  editor,
@@ -184,7 +179,6 @@ const checkListEnterEvent = (editor, type) => {
184
179
  export const enterEvent = (e, editor, isMobile) => {
185
180
  try {
186
181
  const ele = isListItem(editor);
187
-
188
182
  // on shift enter break line in same node
189
183
  if (e.shiftKey && !isMobile) {
190
184
  e.preventDefault();
@@ -193,6 +187,7 @@ export const enterEvent = (e, editor, isMobile) => {
193
187
  const {
194
188
  type
195
189
  } = ele[0];
190
+ const path = ele[1];
196
191
  const text = Node.string(ele[0]);
197
192
  switch (type) {
198
193
  case "list-item":
@@ -224,6 +219,58 @@ export const enterEvent = (e, editor, isMobile) => {
224
219
  insertAccordion(editor, nextPath);
225
220
  }
226
221
  break;
222
+ case "headingOne":
223
+ case "headingTwo":
224
+ case "headingThree":
225
+ const {
226
+ selection
227
+ } = editor;
228
+ if (selection && Range.isCollapsed(selection)) {
229
+ const isAtEnd = Editor.isEnd(editor, selection.anchor, path);
230
+ const isAtStart = Editor.isStart(editor, selection.anchor, path);
231
+ if (isAtEnd) {
232
+ e.preventDefault();
233
+ Transforms.insertNodes(editor, {
234
+ type: 'paragraph',
235
+ children: [{
236
+ text: ''
237
+ }]
238
+ });
239
+ const newLocation = Editor.after(editor, selection);
240
+ if (newLocation) {
241
+ Transforms.select(editor, newLocation);
242
+ }
243
+ } else if (!isAtStart) {
244
+ e.preventDefault();
245
+ Transforms.splitNodes(editor);
246
+ Transforms.setNodes(editor, {
247
+ type: 'paragraph'
248
+ }, {
249
+ at: Editor.after(editor, selection)
250
+ });
251
+ const newLocation = Editor.after(editor, selection);
252
+ if (newLocation) {
253
+ Transforms.select(editor, newLocation);
254
+ }
255
+ } else if (isAtStart) {
256
+ e.preventDefault();
257
+ Transforms.insertNodes(editor, {
258
+ type: 'paragraph',
259
+ children: [{
260
+ text: ''
261
+ }]
262
+ }, {
263
+ at: Editor.before(editor, selection)
264
+ });
265
+ Transforms.select(editor, Editor.before(editor, selection));
266
+ const newLocation = Editor.before(editor, selection);
267
+ if (newLocation) {
268
+ Transforms.select(editor, newLocation);
269
+ }
270
+ }
271
+ return;
272
+ }
273
+ break;
227
274
  default:
228
275
  }
229
276
  }