@flozy/editor 3.8.7 → 3.8.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (188) hide show
  1. package/dist/Editor/ChatEditor.js +2 -2
  2. package/dist/Editor/CommonEditor.js +170 -166
  3. package/dist/Editor/DialogWrapper.js +4 -3
  4. package/dist/Editor/Editor.css +4 -7
  5. package/dist/Editor/Elements/AI/AIInput.js +5 -16
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +64 -67
  7. package/dist/Editor/Elements/AI/Styles.js +1 -2
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +40 -49
  9. package/dist/Editor/Elements/Button/EditorButton.js +33 -38
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  13. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  14. package/dist/Editor/Elements/Embed/Image.js +15 -14
  15. package/dist/Editor/Elements/Embed/Video.js +12 -8
  16. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  17. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  18. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  19. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +391 -0
  20. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +193 -0
  21. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  22. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +184 -0
  23. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +36 -0
  24. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  25. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  26. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +11 -0
  27. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  28. package/dist/Editor/Elements/FreeGrid/styles.js +159 -0
  29. package/dist/Editor/Elements/Grid/Grid.js +14 -34
  30. package/dist/Editor/Elements/Grid/GridItem.js +31 -23
  31. package/dist/Editor/Elements/Link/Link.js +1 -6
  32. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  33. package/dist/Editor/Elements/Link/LinkPopup.js +3 -10
  34. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  35. package/dist/Editor/Elements/Signature/SignaturePopup.js +3 -14
  36. package/dist/Editor/Elements/SimpleText/index.js +9 -8
  37. package/dist/Editor/Elements/SimpleText/style.js +37 -0
  38. package/dist/Editor/Elements/Table/Styles.js +1 -23
  39. package/dist/Editor/Elements/Table/Table.js +1 -2
  40. package/dist/Editor/Elements/Table/TableCell.js +7 -69
  41. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +0 -1
  42. package/dist/Editor/ErrorBoundary.js +30 -0
  43. package/dist/Editor/MiniEditor.js +1 -3
  44. package/dist/Editor/Styles/EditorStyles.js +23 -0
  45. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  46. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  47. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  48. package/dist/Editor/Toolbar/FormatTools/TextSize.js +18 -29
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -4
  50. package/dist/Editor/Toolbar/Mini/Options/Options.js +0 -10
  51. package/dist/Editor/Toolbar/Mini/Styles.js +0 -7
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  54. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +8 -52
  57. package/dist/Editor/Toolbar/PopupTool/index.js +13 -6
  58. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  59. package/dist/Editor/Toolbar/toolbarGroups.js +11 -48
  60. package/dist/Editor/assets/svg/AIIcons.js +1 -153
  61. package/dist/Editor/assets/svg/AddTemplateIcon.js +10 -13
  62. package/dist/Editor/assets/svg/TextIcon.js +5 -8
  63. package/dist/Editor/common/ColorPickerButton.js +9 -25
  64. package/dist/Editor/common/DnD/DragHandleButton.js +47 -56
  65. package/dist/Editor/common/Icon.js +8 -41
  66. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  67. package/dist/Editor/common/LinkSettings/index.js +2 -4
  68. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  69. package/dist/Editor/common/LinkSettings/style.js +8 -11
  70. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  71. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +105 -0
  72. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  73. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  74. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  75. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  76. package/dist/Editor/common/RnD/DragOver/index.js +46 -0
  77. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  78. package/dist/Editor/common/RnD/ElementOptions/Actions.js +82 -0
  79. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  80. package/dist/Editor/common/RnD/ElementOptions/index.js +93 -0
  81. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  82. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  83. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +58 -0
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +7 -0
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +46 -0
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +46 -0
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +46 -0
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +46 -0
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +13 -0
  91. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  92. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +14 -0
  93. package/dist/Editor/common/RnD/ElementSettings/styles.js +76 -0
  94. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  95. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  96. package/dist/Editor/common/RnD/GuideLines/styles.js +60 -0
  97. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  98. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  99. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  100. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  101. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  102. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  103. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  104. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  105. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  106. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +18 -0
  107. package/dist/Editor/common/RnD/TransformHandles/index.js +62 -0
  108. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  109. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  110. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  111. package/dist/Editor/common/RnD/Utils/gridDropItem.js +148 -0
  112. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  113. package/dist/Editor/common/RnD/VirtualElement/index.js +76 -0
  114. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  115. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  116. package/dist/Editor/common/RnD/index.js +503 -0
  117. package/dist/Editor/common/RnD/styles.js +4 -0
  118. package/dist/Editor/common/Section/index.js +28 -69
  119. package/dist/Editor/common/Section/styles.js +6 -12
  120. package/dist/Editor/common/Shorthands/elements.js +12 -54
  121. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  122. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +16 -19
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  126. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  127. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  128. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  129. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  130. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  131. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  132. package/dist/Editor/common/iconslist.js +31 -0
  133. package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
  134. package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
  135. package/dist/Editor/helper/breakpoint.js +5 -0
  136. package/dist/Editor/helper/index.js +139 -0
  137. package/dist/Editor/helper/theme.js +48 -185
  138. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  139. package/dist/Editor/hooks/useMouseMove.js +37 -12
  140. package/dist/Editor/hooks/useWindowMessage.js +7 -10
  141. package/dist/Editor/hooks/withCommon.js +2 -1
  142. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  143. package/dist/Editor/plugins/withEmbeds.js +1 -1
  144. package/dist/Editor/plugins/withHTML.js +1 -1
  145. package/dist/Editor/plugins/withTable.js +1 -1
  146. package/dist/Editor/theme/ThemeList.js +173 -50
  147. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +168 -0
  148. package/dist/Editor/utils/SlateUtilityFunctions.js +47 -163
  149. package/dist/Editor/utils/button.js +17 -1
  150. package/dist/Editor/utils/events.js +7 -54
  151. package/dist/Editor/utils/font.js +37 -40
  152. package/dist/Editor/utils/freegrid.js +49 -0
  153. package/dist/Editor/utils/helper.js +31 -31
  154. package/dist/Editor/utils/table.js +43 -51
  155. package/package.json +6 -4
  156. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
  157. package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -167
  158. package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
  159. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  160. package/dist/Editor/Elements/Redo/RedoButton.js +0 -14
  161. package/dist/Editor/Elements/Undo/UndoButton.js +0 -14
  162. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  163. package/dist/Editor/assets/svg/RedoIcon.js +0 -27
  164. package/dist/Editor/assets/svg/SettingsIcon.js +0 -28
  165. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  166. package/dist/Editor/assets/svg/UndoIcon.js +0 -27
  167. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  168. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  169. package/dist/Editor/common/CustomDialog/index.js +0 -94
  170. package/dist/Editor/common/CustomDialog/style.js +0 -67
  171. package/dist/Editor/common/CustomSelect.js +0 -33
  172. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  173. package/dist/Editor/theme/index.js +0 -144
  174. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  175. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  176. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  177. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  178. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  179. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  180. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  181. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  182. package/dist/Editor/themeSettings/icons.js +0 -60
  183. package/dist/Editor/themeSettings/index.js +0 -320
  184. package/dist/Editor/themeSettings/style.js +0 -152
  185. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  186. package/dist/Editor/themeSettingsAI/index.js +0 -356
  187. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  188. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -8,7 +8,6 @@ import { Editor, Node, Path, Transforms } from "slate";
8
8
  import useWindowResize from "../../hooks/useWindowResize";
9
9
  import { MODES } from "./helper";
10
10
  import { getSelectedText } from "../../utils/helper";
11
- import { VoiceToText } from "./VoiceToText";
12
11
  import { jsx as _jsx } from "react/jsx-runtime";
13
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
13
  const scrollToAIInput = () => {
@@ -52,43 +51,51 @@ const insertAtNextLine = (editor, text) => {
52
51
  });
53
52
  };
54
53
  const getNextLine = editor => {
55
- const {
56
- selection
57
- } = editor;
58
- const {
59
- focus
60
- } = selection;
61
- const {
62
- text = ""
63
- } = Node.get(editor, focus.path);
64
- let nextLineIndex = 0;
65
- let indexOfNextLine = 0;
66
- if (text?.length) {
67
- // split the text based on caret position
68
- const textBeforeCaret = text.substring(0, focus.offset);
69
- const textAfterCaret = text.substring(focus.offset);
54
+ try {
55
+ const {
56
+ selection
57
+ } = editor;
58
+ const {
59
+ focus
60
+ } = selection;
61
+ if (focus?.path?.length > 0) {
62
+ const {
63
+ text = ""
64
+ } = Node.get(editor, focus.path);
65
+ let nextLineIndex = 0;
66
+ let indexOfNextLine = 0;
67
+ if (text?.length) {
68
+ // split the text based on caret position
69
+ const textBeforeCaret = text.substring(0, focus.offset);
70
+ const textAfterCaret = text.substring(focus.offset);
70
71
 
71
- // getting the index of the next line after the caret position
72
- indexOfNextLine = textAfterCaret?.indexOf("\n");
73
- if (indexOfNextLine >= 0) {
74
- // index of next line
75
- nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
76
- } else {
77
- nextLineIndex = text?.length;
72
+ // getting the index of the next line after the caret position
73
+ indexOfNextLine = textAfterCaret?.indexOf("\n");
74
+ if (indexOfNextLine >= 0) {
75
+ // index of next line
76
+ nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
77
+ } else {
78
+ nextLineIndex = text?.length;
79
+ }
80
+ }
81
+ const data = {
82
+ ...focus,
83
+ offset: nextLineIndex
84
+ };
85
+ const at = {
86
+ anchor: data,
87
+ focus: data
88
+ };
89
+ return {
90
+ at,
91
+ indexOfNextLine
92
+ };
78
93
  }
94
+ return null;
95
+ } catch (err) {
96
+ console.log(err);
97
+ return null;
79
98
  }
80
- const data = {
81
- ...focus,
82
- offset: nextLineIndex
83
- };
84
- const at = {
85
- anchor: data,
86
- focus: data
87
- };
88
- return {
89
- at,
90
- indexOfNextLine
91
- };
92
99
  };
93
100
  const updateAnchorEl = (setAnchorEl, editor) => {
94
101
  try {
@@ -96,13 +103,16 @@ const updateAnchorEl = (setAnchorEl, editor) => {
96
103
  return;
97
104
  }
98
105
  const selection = window.getSelection();
99
- if (selection.rangeCount) {
106
+ if (selection.rangeCount && selection.anchorOffset !== selection.focusOffset) {
100
107
  let caret;
101
108
  if (getSelectedText(editor)) {
102
109
  // selected text as caret
103
110
  caret = selection.getRangeAt(0);
104
111
  } else {
105
- caret = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
112
+ const sel = getNextLine(editor);
113
+ if (sel) {
114
+ caret = ReactEditor.toDOMRange(editor, sel.at);
115
+ }
106
116
  }
107
117
  const getBoundingClientRect = () => {
108
118
  const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
@@ -179,11 +189,6 @@ function PopoverAIInput({
179
189
  onClickOutside();
180
190
  return;
181
191
  }
182
- if (type === "speech_to_text") {
183
- Transforms.insertText(editor, option.text);
184
- onClickOutside();
185
- return;
186
- }
187
192
  if (type === "try_again") {
188
193
  // resetting the previous option and try again
189
194
  option = selectedOption;
@@ -194,7 +199,7 @@ function PopoverAIInput({
194
199
  setLoading(true);
195
200
  const payload = {
196
201
  mode: option.mode || 0,
197
- query: option?.inputValue || inputValue
202
+ query: inputValue
198
203
  };
199
204
  if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
200
205
  payload.textOptionInput = type;
@@ -273,19 +278,15 @@ function PopoverAIInput({
273
278
  component: "div",
274
279
  sx: classes.mobileAIInputWrapper,
275
280
  ref: targetRef,
276
- children: /*#__PURE__*/_jsx(VoiceToText, {
277
- otherProps: otherProps,
281
+ children: /*#__PURE__*/_jsx(AIInput, {
282
+ loading: loading,
278
283
  onSend: onSend,
279
- children: /*#__PURE__*/_jsx(AIInput, {
280
- loading: loading,
281
- onSend: onSend,
282
- generatedText: generatedText,
283
- anchorEl: anchorEl,
284
- openAI: openAI,
285
- inputValue: inputValue,
286
- onInputChange: onInputChange,
287
- onClickOutside: onClickOutside
288
- })
284
+ generatedText: generatedText,
285
+ anchorEl: anchorEl,
286
+ openAI: openAI,
287
+ inputValue: inputValue,
288
+ onInputChange: onInputChange,
289
+ onClickOutside: onClickOutside
289
290
  })
290
291
  }) : /*#__PURE__*/_jsx(Popper, {
291
292
  open: Boolean(openAI),
@@ -306,19 +307,15 @@ function PopoverAIInput({
306
307
  sx: getSelectedText(editor) ? {
307
308
  marginTop: "6px"
308
309
  } : {},
309
- children: /*#__PURE__*/_jsx(VoiceToText, {
310
- otherProps: otherProps,
310
+ children: /*#__PURE__*/_jsx(AIInput, {
311
+ loading: loading,
311
312
  onSend: onSend,
312
- children: /*#__PURE__*/_jsx(AIInput, {
313
- loading: loading,
314
- onSend: onSend,
315
- generatedText: generatedText,
316
- anchorEl: anchorEl,
317
- openAI: openAI,
318
- inputValue: inputValue,
319
- onInputChange: onInputChange,
320
- onClickOutside: onClickOutside
321
- })
313
+ generatedText: generatedText,
314
+ anchorEl: anchorEl,
315
+ openAI: openAI,
316
+ inputValue: inputValue,
317
+ onInputChange: onInputChange,
318
+ onClickOutside: onClickOutside
322
319
  })
323
320
  })
324
321
  })
@@ -167,8 +167,7 @@ const Styles = theme => ({
167
167
  sendIconContainer: {
168
168
  alignSelf: "flex-end",
169
169
  display: "flex",
170
- alignItems: "center",
171
- gap: "6px"
170
+ alignItems: "center"
172
171
  }
173
172
  });
174
173
  export default Styles;
@@ -1,6 +1,7 @@
1
1
  import React, { useRef, useState } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Transforms, Editor, Element } from "slate";
4
+ import { useTheme } from "@mui/material";
4
5
  import AppBar from "@mui/material/AppBar";
5
6
  import Box from "@mui/material/Box";
6
7
  import CssBaseline from "@mui/material/CssBaseline";
@@ -16,7 +17,7 @@ import Toolbar from "@mui/material/Toolbar";
16
17
  import Typography from "@mui/material/Typography";
17
18
  import Button from "@mui/material/Button";
18
19
  import AppHeaderPopup from "./AppHeaderPopup";
19
- import { getTRBLBreakPoints } from "../../helper/theme";
20
+ import { getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
20
21
  import { handleLinkType } from "../../utils/helper";
21
22
  import { jsx as _jsx } from "react/jsx-runtime";
22
23
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,6 +25,7 @@ import { createElement as _createElement } from "react";
24
25
  import { Fragment as _Fragment } from "react/jsx-runtime";
25
26
  const drawerWidth = 240;
26
27
  function AppHeader(props) {
28
+ const theme = useTheme();
27
29
  const navWrprRef = useRef(null);
28
30
  const [openSetttings, setOpenSettings] = useState(false);
29
31
  const {
@@ -62,11 +64,6 @@ function AppHeader(props) {
62
64
  const handleDrawerToggle = () => {
63
65
  setMobileOpen(prevState => !prevState);
64
66
  };
65
- const closeDrawer = () => {
66
- if (mobileOpen) {
67
- handleDrawerToggle();
68
- }
69
- };
70
67
  const onSettings = e => {
71
68
  if (!readOnly) {
72
69
  e.stopPropagation();
@@ -126,11 +123,6 @@ function AppHeader(props) {
126
123
  }
127
124
  }
128
125
  };
129
-
130
- // const onMenuSettings = (menuItem, i) => (event) => {
131
- // event.preventDefault();
132
- // };
133
-
134
126
  const drawer = /*#__PURE__*/_jsxs(Box, {
135
127
  onClick: handleDrawerToggle,
136
128
  sx: {
@@ -153,27 +145,10 @@ function AppHeader(props) {
153
145
  }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
154
146
  children: menus.map((item, i) => {
155
147
  const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
156
- const onTouchEnd = e => {
157
- if (buttonProps?.onTouchEnd) {
158
- buttonProps?.onTouchEnd(e);
159
- closeDrawer();
160
- }
161
- };
162
- const onClick = e => {
163
- if (buttonProps?.onClick) {
164
- buttonProps?.onClick(e);
165
- closeDrawer();
166
- }
167
- };
168
- const props = {
169
- ...buttonProps,
170
- onTouchEnd,
171
- onClick
172
- };
173
148
  return /*#__PURE__*/_jsx(ListItem, {
174
149
  disablePadding: true,
175
150
  children: /*#__PURE__*/_jsx(ListItemButton, {
176
- ...props,
151
+ ...buttonProps,
177
152
  sx: {
178
153
  textAlign: "center"
179
154
  },
@@ -186,15 +161,20 @@ function AppHeader(props) {
186
161
  })]
187
162
  });
188
163
  const container = window !== undefined ? () => window().document.body : undefined;
189
- // const elevateStyle = useEleveateScroll({
190
- // ...props,
191
- // parentRef: navWrprRef,
192
- // needElevation: readOnly,
193
- // });
194
-
195
164
  const elevateStyle = {
196
165
  position: "relative"
197
166
  };
167
+ const appbarSp = groupByBreakpoint({
168
+ padding: {
169
+ ...getTRBLBreakPoints(bannerSpacing)
170
+ }
171
+ }, theme);
172
+ const toolbarSp = groupByBreakpoint({
173
+ flexDirection: {
174
+ xs: "row-reverse !important",
175
+ lg: "unset"
176
+ }
177
+ }, theme);
198
178
  return /*#__PURE__*/_jsxs(_Fragment, {
199
179
  children: [/*#__PURE__*/_jsxs(Box, {
200
180
  sx: {
@@ -216,13 +196,14 @@ function AppHeader(props) {
216
196
  ...elevateStyle,
217
197
  background: bgColor,
218
198
  boxShadow: "none",
219
- padding: {
220
- ...getTRBLBreakPoints(bannerSpacing)
221
- },
199
+ ...appbarSp,
222
200
  zIndex: 999
223
201
  },
224
202
  onClick: onSettings,
225
203
  children: /*#__PURE__*/_jsxs(Toolbar, {
204
+ sx: {
205
+ ...toolbarSp
206
+ },
226
207
  style: {
227
208
  flexDirection: isLogoRight ? "row-reverse" : "row",
228
209
  paddingLeft: "0px",
@@ -239,8 +220,11 @@ function AppHeader(props) {
239
220
  },
240
221
  sx: {
241
222
  mr: 2,
242
- display: {
243
- sm: "none"
223
+ [theme.breakpoints.up("sm")]: {
224
+ display: "none"
225
+ },
226
+ [theme.breakpoints.between("xs", "md")]: {
227
+ display: "block"
244
228
  }
245
229
  },
246
230
  children: /*#__PURE__*/_jsx(MenuIcon, {})
@@ -251,16 +235,21 @@ function AppHeader(props) {
251
235
  style: {
252
236
  display: "inline-flex",
253
237
  alignItems: "center",
254
- color: textColor || "#000000",
238
+ color: textColor,
255
239
  fontSize: logoFontSize,
256
240
  fontFamily: titleFontFamily,
257
241
  justifyContent: isLogoRight ? "end" : "start"
258
242
  },
259
243
  sx: {
260
244
  flexGrow: 1,
261
- display: {
262
- xs: "none",
263
- sm: "block"
245
+ [theme.breakpoints.up("sm")]: {
246
+ display: "block"
247
+ },
248
+ [theme.breakpoints.between("xs", "md")]: {
249
+ display: "none"
250
+ },
251
+ "& img": {
252
+ marginRight: "7px"
264
253
  }
265
254
  },
266
255
  className: "app-logo",
@@ -274,9 +263,11 @@ function AppHeader(props) {
274
263
  }) : null, appTitle]
275
264
  }), /*#__PURE__*/_jsxs(Box, {
276
265
  sx: {
277
- display: {
278
- xs: "none",
279
- sm: "block"
266
+ [theme.breakpoints.up("sm")]: {
267
+ display: "block"
268
+ },
269
+ [theme.breakpoints.between("xs", "md")]: {
270
+ display: "none"
280
271
  }
281
272
  },
282
273
  children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
@@ -299,7 +290,7 @@ function AppHeader(props) {
299
290
  fontFamily: fontFamily,
300
291
  textTransform: "none",
301
292
  fontSize: fontSize || "16px",
302
- color: textColor || "#000",
293
+ color: textColor || "#FFF",
303
294
  background: bgColor || "none",
304
295
  "& .m-settings": {
305
296
  display: "none",
@@ -314,7 +305,7 @@ function AppHeader(props) {
314
305
  background: "#FFF"
315
306
  },
316
307
  "&:hover": {
317
- color: textColorHover || textColor || "#000",
308
+ color: textColorHover || textColor || "#FFF",
318
309
  background: bgColorHover || bgColor || "none",
319
310
  "& .m-settings": {
320
311
  display: "block"
@@ -1,8 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
- import { IconButton, Tooltip, Box } from "@mui/material";
5
- // import * as fIcons from "@mui/icons-material";
4
+ import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
6
5
  import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
7
6
  import SettingsIcon from "@mui/icons-material/Settings";
8
7
  import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -10,15 +9,13 @@ import LinkIcon from "@mui/icons-material/Link";
10
9
  import ButtonPopup from "./ButtonPopup";
11
10
  import { actionButtonRedirect } from "../../service/actionTrigger";
12
11
  import { WorkflowIcon } from "../../common/iconslist";
13
- import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
12
+ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
14
13
  import { handleLinkType, windowVar } from "../../utils/helper";
15
14
  import LinkSettings from "../../common/LinkSettings";
16
- import { useEditorTheme } from "../../hooks/useEditorTheme";
17
- import { getTheme } from "../../theme";
18
- import { fontFamilyMap } from "../../utils/font";
19
15
  import { jsx as _jsx } from "react/jsx-runtime";
20
16
  import { jsxs as _jsxs } from "react/jsx-runtime";
21
17
  const EditorButton = props => {
18
+ const theme = useTheme();
22
19
  const {
23
20
  attributes,
24
21
  element,
@@ -33,12 +30,6 @@ const EditorButton = props => {
33
30
  const path = ReactEditor.findPath(editor, element);
34
31
  const [edit, setEdit] = useState(false);
35
32
  const [openNav, setOpenNav] = useState(false);
36
- const {
37
- theme
38
- } = useEditorTheme();
39
- const {
40
- buttonTheme
41
- } = getTheme(theme);
42
33
  const {
43
34
  label,
44
35
  bgColor,
@@ -52,7 +43,7 @@ const EditorButton = props => {
52
43
  fontFamily,
53
44
  textColorHover,
54
45
  bgColorHover,
55
- // buttonIcon,
46
+ buttonIcon,
56
47
  iconPosition = "start",
57
48
  borderStyle,
58
49
  borderWidth,
@@ -71,15 +62,13 @@ const EditorButton = props => {
71
62
  } = actionTrigger || {
72
63
  options: []
73
64
  };
74
- const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
65
+ const isTrigger = linkType === "actionTrigger";
75
66
  const refURl = isTrigger ? buttonLink?.url : url;
76
- const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
77
67
  const BtnIcon = buttonIcon ? buttonIcon : null;
78
68
  windowVar.lastButtonProps = element;
79
69
  const handleTrigger = async () => {
80
70
  if (metadata?.buttonLink?.handler) {
81
- const response = isTrigger ? linkType : "click";
82
- metadata.buttonLink.handler(response);
71
+ metadata.buttonLink.handler("click");
83
72
  } else if (redirectOnURLResult) {
84
73
  // call api and redirect based on api result
85
74
  const apiResult = await actionButtonRedirect({}, {
@@ -92,7 +81,6 @@ const EditorButton = props => {
92
81
  }
93
82
  };
94
83
  const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
95
- console.log(openInNewTab);
96
84
  const onMenuClick = val => () => {
97
85
  switch (val) {
98
86
  case "edit":
@@ -165,21 +153,33 @@ const EditorButton = props => {
165
153
  const onClose = () => {
166
154
  setEdit(false);
167
155
  };
156
+ const tAlign = alignment || textAlign || "left";
157
+ const btnSp = groupByBreakpoint({
158
+ borderRadius: {
159
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
160
+ },
161
+ padding: {
162
+ ...getTRBLBreakPoints(bannerSpacing)
163
+ }
164
+ }, theme);
165
+ const pSp = groupByBreakpoint({
166
+ display: {
167
+ xs: xsHidden ? "none" : "inline-block",
168
+ lg: "inline-block"
169
+ }
170
+ }, theme);
168
171
  return /*#__PURE__*/_jsxs("div", {
169
- className: "editor-btn-wrapper",
172
+ className: `editor-btn-wrapper`,
170
173
  ...attributes,
171
174
  style: {
172
- textAlign: alignment || textAlign || "left"
175
+ textAlign: tAlign
173
176
  },
174
177
  contentEditable: false,
175
178
  children: [/*#__PURE__*/_jsx(Box, {
176
179
  component: "div",
177
180
  className: "editor-btn-wrapper-inner",
178
181
  sx: {
179
- display: {
180
- lg: "inline-block",
181
- xs: xsHidden ? "none" : "inline-block"
182
- },
182
+ ...pSp,
183
183
  "& .element-toolbar": {
184
184
  display: "none"
185
185
  },
@@ -195,11 +195,18 @@ const EditorButton = props => {
195
195
  display: "inline-block"
196
196
  },
197
197
  children: [/*#__PURE__*/_jsxs(Box, {
198
+ className: `btn textAlign-${tAlign}`,
198
199
  sx: {
199
200
  textDecoration: "none",
201
+ background: bgColor || "rgb(30, 75, 122)",
200
202
  borderBlockStyle: "solid",
203
+ borderColor: borderColor || "transparent",
201
204
  borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
205
+ ...btnSp,
202
206
  borderStyle: borderStyle || "solid",
207
+ color: `${textColor || "#FFFFFF"}`,
208
+ fontSize: textSize || "inherit",
209
+ fontFamily: fontFamily || "PoppinsRegular",
203
210
  display: "inline-flex",
204
211
  alignItems: "center",
205
212
  position: "relative",
@@ -207,26 +214,14 @@ const EditorButton = props => {
207
214
  display: "none"
208
215
  },
209
216
  "&:hover": {
210
- color: `${textColorHover || textColor}`,
211
- background: bgColorHover || bgColor,
217
+ color: `${textColorHover || textColor || "#FFFFFF"}`,
218
+ background: bgColorHover || bgColor || "rgb(30, 75, 122)",
212
219
  "& .element-toolbar": {
213
220
  display: "flex"
214
221
  }
215
- },
216
- color: `${textColor} !important`,
217
- fontSize: `${textSize}px !important`,
218
- fontFamily: `${fontFamilyMap[fontFamily] || ""} !important`,
219
- background: `${bgColor} !important`,
220
- borderColor: `${borderColor} !important`,
221
- borderRadius: {
222
- ...getBreakPointsValue(borderRadius || buttonTheme?.borderRadius || {}, null, "overrideBorderRadius", true)
223
- },
224
- padding: {
225
- ...getTRBLBreakPoints(bannerSpacing || buttonTheme?.bannerSpacing || {})
226
222
  }
227
223
  },
228
224
  ...buttonProps,
229
- className: "button theme-element",
230
225
  children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
231
226
  iconName: buttonIcon,
232
227
  style: {
@@ -1,15 +1,11 @@
1
- import React, { useContext, useState } from "react";
2
- import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
1
+ import React, { useState } from "react";
2
+ import { Box, IconButton, Popover } from "@mui/material";
3
3
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
4
4
  import Button from "../../common/Button";
5
5
  import { colors } from "./defaultColors";
6
6
  import ColorPicker from "./colorPicker.svg";
7
- import { ThemeContext } from "../../CommonEditor";
8
- import { useSlateStatic } from "slate-react";
9
- import { Transforms } from "slate";
10
7
  import { jsx as _jsx } from "react/jsx-runtime";
11
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
- import { Fragment as _Fragment } from "react/jsx-runtime";
13
9
  let c = [];
14
10
  const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
15
11
  if (i % 7 === 0) {
@@ -35,7 +31,9 @@ const SingleColorButton = ({
35
31
  style: {
36
32
  width: "100%",
37
33
  display: "flex",
38
- padding: padding || "8px"
34
+ alignItems: "center",
35
+ padding: padding || "8px",
36
+ justifyContent: "center"
39
37
  },
40
38
  children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
41
39
  onClick: handleSelect(m),
@@ -111,17 +109,11 @@ const ColorButtons = props => {
111
109
  forMiniTool,
112
110
  openColorTool,
113
111
  onClose,
114
- onColorPickerClick,
115
- disableEditTheme
112
+ onColorPickerClick
116
113
  } = props;
117
114
  const [row1, ...restRows] = ColorChunks([]);
118
115
  const [anchorEl, setAnchorEl] = useState(null);
119
116
  const open = Boolean(anchorEl);
120
- const theme = useTheme();
121
- const editor = useSlateStatic();
122
- const {
123
- setOpenTheme
124
- } = useContext(ThemeContext);
125
117
  const handleMore = e => {
126
118
  setAnchorEl(e.currentTarget);
127
119
  };
@@ -134,7 +126,6 @@ const ColorButtons = props => {
134
126
  const handleSelect = color => () => {
135
127
  onSelect(color);
136
128
  };
137
- const colorVars = theme?.vars?.colors || {};
138
129
  return /*#__PURE__*/_jsxs(Box, {
139
130
  component: "span",
140
131
  sx: classes.colorButtons,
@@ -151,7 +142,7 @@ const ColorButtons = props => {
151
142
  activeColor: activeColor
152
143
  }, `si_btn_row1_${m}_${i}`);
153
144
  })
154
- }), /*#__PURE__*/_jsx(Popover, {
145
+ }), /*#__PURE__*/_jsxs(Popover, {
155
146
  open: open || openColorTool,
156
147
  anchorEl: anchorEl || openColorTool,
157
148
  onClose: handleClose,
@@ -165,39 +156,9 @@ const ColorButtons = props => {
165
156
  },
166
157
  sx: classes.colorPopper,
167
158
  className: "colorPopper",
168
- children: /*#__PURE__*/_jsxs(Box, {
159
+ children: [/*#__PURE__*/_jsx(Box, {
169
160
  sx: classes.colorButtonsInner,
170
- children: [Object.values(colorVars)?.length ? /*#__PURE__*/_jsxs(_Fragment, {
171
- children: [/*#__PURE__*/_jsxs(Box, {
172
- component: "div",
173
- className: "singleColorTitleWrapper",
174
- children: [/*#__PURE__*/_jsx(Typography, {
175
- variant: "subtitle2",
176
- children: "Theme colour"
177
- }), disableEditTheme ? null : /*#__PURE__*/_jsx("div", {
178
- className: "editBtn",
179
- onClick: () => {
180
- Transforms.deselect(editor, {
181
- at: editor.selection
182
- });
183
- setOpenTheme("editThemeColor");
184
- },
185
- children: "Edit"
186
- })]
187
- }), /*#__PURE__*/_jsx(SingleColorButton, {
188
- crs: Object.values(colorVars),
189
- handleSelect: handleSelect,
190
- classes: classes,
191
- activeColor: activeColor
192
- })]
193
- }) : null, /*#__PURE__*/_jsx(Box, {
194
- component: "div",
195
- className: "singleColorTitleWrapper",
196
- children: /*#__PURE__*/_jsx(Typography, {
197
- variant: "subtitle2",
198
- children: "Custom colour"
199
- })
200
- }), restRows.map((m, i) => {
161
+ children: restRows.map((m, i) => {
201
162
  return /*#__PURE__*/_jsx(SingleColorButton, {
202
163
  id: `p2_${id}`,
203
164
  crs: m,
@@ -206,18 +167,14 @@ const ColorButtons = props => {
206
167
  classes: classes,
207
168
  activeColor: activeColor
208
169
  }, `si_btn_${m}_${i}`);
209
- }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
210
- onClick: onColorPickerClick,
211
- style: {
212
- alignSelf: "start",
213
- margin: "6px"
214
- },
215
- children: /*#__PURE__*/_jsx("img", {
216
- src: ColorPicker,
217
- alt: "color wheel"
218
- })
219
- }) : null]
220
- })
170
+ })
171
+ }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
172
+ onClick: onColorPickerClick,
173
+ children: /*#__PURE__*/_jsx("img", {
174
+ src: ColorPicker,
175
+ alt: "color wheel"
176
+ })
177
+ }) : null]
221
178
  })]
222
179
  });
223
180
  };