@flozy/editor 4.0.2 → 4.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/Editor/ChatEditor.js +14 -9
  2. package/dist/Editor/CommonEditor.js +110 -167
  3. package/dist/Editor/Editor.css +3 -43
  4. package/dist/Editor/Elements/AI/AIInput.js +33 -31
  5. package/dist/Editor/Elements/AI/CustomSelect.js +12 -19
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +97 -73
  7. package/dist/Editor/Elements/AI/Styles.js +2 -2
  8. package/dist/Editor/Elements/AI/helper.js +3 -5
  9. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
  10. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  11. package/dist/Editor/Elements/Button/EditorButton.js +16 -28
  12. package/dist/Editor/Elements/Carousel/CarouselButton.js +1 -2
  13. package/dist/Editor/Elements/Color Picker/ColorButtons.js +15 -60
  14. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  15. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  16. package/dist/Editor/Elements/Color Picker/Styles.js +1 -3
  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/Grid/Grid.js +0 -2
  20. package/dist/Editor/Elements/Grid/GridItem.js +1 -3
  21. package/dist/Editor/Elements/Link/Link.js +1 -6
  22. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  23. package/dist/Editor/Elements/Link/LinkPopup.js +14 -73
  24. package/dist/Editor/Elements/NewLine/NewLineButton.js +1 -2
  25. package/dist/Editor/Elements/Signature/Signature.css +6 -13
  26. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +1 -2
  27. package/dist/Editor/Elements/Signature/SignaturePopup.js +30 -185
  28. package/dist/Editor/Elements/SimpleText/index.js +1 -11
  29. package/dist/Editor/Elements/SimpleText/style.js +1 -1
  30. package/dist/Editor/MiniEditor.js +1 -3
  31. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  32. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  33. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  34. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -7
  35. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -34
  36. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +13 -12
  37. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +13 -12
  38. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +0 -3
  39. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  40. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  41. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -4
  42. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +44 -123
  43. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +44 -106
  44. package/dist/Editor/Toolbar/PopupTool/index.js +3 -5
  45. package/dist/Editor/Toolbar/toolbarGroups.js +11 -53
  46. package/dist/Editor/assets/svg/AIIcons.js +1 -153
  47. package/dist/Editor/common/ColorPickerButton.js +9 -25
  48. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  49. package/dist/Editor/common/EditorIcons.js +7 -7
  50. package/dist/Editor/common/Icon.js +24 -51
  51. package/dist/Editor/common/ImageList.js +3 -16
  52. package/dist/Editor/common/ImageSelector/ImageSelector.js +9 -30
  53. package/dist/Editor/common/ImageSelector/Styles.js +1 -2
  54. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  55. package/dist/Editor/common/LinkSettings/index.js +2 -4
  56. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  57. package/dist/Editor/common/LinkSettings/style.js +8 -11
  58. package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
  59. package/dist/Editor/common/Shorthands/elements.js +9 -63
  60. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  61. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +23 -39
  62. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +23 -33
  63. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  64. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  65. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  66. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  67. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  68. package/dist/Editor/commonStyle.js +0 -6
  69. package/dist/Editor/helper/theme.js +4 -191
  70. package/dist/Editor/hooks/useMouseMove.js +1 -4
  71. package/dist/Editor/hooks/useWindowMessage.js +7 -10
  72. package/dist/Editor/plugins/withEmbeds.js +1 -1
  73. package/dist/Editor/plugins/withHTML.js +1 -1
  74. package/dist/Editor/plugins/withTable.js +1 -1
  75. package/dist/Editor/theme/ThemeList.js +173 -50
  76. package/dist/Editor/utils/SlateUtilityFunctions.js +25 -161
  77. package/dist/Editor/utils/button.js +17 -1
  78. package/dist/Editor/utils/font.js +37 -40
  79. package/dist/Editor/utils/helper.js +1 -30
  80. package/package.json +1 -2
  81. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
  82. package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -184
  83. package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
  84. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  85. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +0 -59
  86. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  87. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  88. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  89. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  90. package/dist/Editor/common/CustomDialog/index.js +0 -94
  91. package/dist/Editor/common/CustomDialog/style.js +0 -67
  92. package/dist/Editor/common/CustomSelect.js +0 -33
  93. package/dist/Editor/common/iconListV2.js +0 -843
  94. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  95. package/dist/Editor/theme/index.js +0 -144
  96. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  97. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  98. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  99. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  100. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  101. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  102. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  103. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  104. package/dist/Editor/themeSettings/icons.js +0 -60
  105. package/dist/Editor/themeSettings/index.js +0 -320
  106. package/dist/Editor/themeSettings/style.js +0 -152
  107. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  108. package/dist/Editor/themeSettingsAI/index.js +0 -356
  109. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  110. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -1,4 +1,4 @@
1
- import { Box, Button, IconButton, Popper, Typography } from "@mui/material";
1
+ import { Box, Button, IconButton, Popover, Typography } from "@mui/material";
2
2
  import React, { useRef, useState } from "react";
3
3
  import { FaChevronRight } from "react-icons/fa";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -49,17 +49,9 @@ function DisplayOption({
49
49
  } = option;
50
50
  const [open, setOpen] = useState(false);
51
51
  const optionRef = useRef();
52
- const openOptions = e => {
53
- if (option.options?.length && !open) {
54
- setOpen(e.currentTarget);
55
- return;
56
- }
57
- };
58
52
  return /*#__PURE__*/_jsxs(Box, {
59
53
  sx: classes.optionWrapper,
60
54
  ref: optionRef,
61
- onMouseEnter: openOptions,
62
- onMouseLeave: () => setOpen(null),
63
55
  children: [/*#__PURE__*/_jsxs(Button, {
64
56
  sx: classes.optionBtn,
65
57
  onClick: e => {
@@ -67,7 +59,7 @@ function DisplayOption({
67
59
 
68
60
  // is having child options
69
61
  if (option.options?.length) {
70
- openOptions(e);
62
+ setOpen(e.currentTarget);
71
63
  return;
72
64
  }
73
65
  setOpen(null);
@@ -85,24 +77,25 @@ function DisplayOption({
85
77
  size: 12
86
78
  })
87
79
  })]
88
- }), /*#__PURE__*/_jsx(Popper, {
80
+ }), /*#__PURE__*/_jsx(Popover, {
89
81
  open: open && option.options,
90
82
  anchorEl: open,
91
83
  sx: {
92
84
  zIndex: 9001,
93
85
  background: "transparent"
94
86
  },
87
+ anchorOrigin: {
88
+ vertical: "top",
89
+ horizontal: "right"
90
+ },
95
91
  onClose: () => {
96
92
  setOpen(null);
97
93
  },
98
- placement: "right-start",
99
- children: /*#__PURE__*/_jsx(Box, {
100
- children: /*#__PURE__*/_jsx(CustomSelect, {
101
- options: option.options,
102
- onSend: onSend,
103
- classes: classes,
104
- show: open
105
- })
94
+ children: /*#__PURE__*/_jsx(CustomSelect, {
95
+ options: option.options,
96
+ onSend: onSend,
97
+ classes: classes,
98
+ show: open
106
99
  })
107
100
  })]
108
101
  });
@@ -1,33 +1,26 @@
1
1
  import { useEffect, useRef, useState } from "react";
2
2
  import { useEditorContext } from "../../hooks/useMouseMove";
3
3
  import Styles from "./Styles";
4
- import { Fade, Paper, Popper } from "@mui/material";
4
+ import { Box, Fade, Paper, Popper } from "@mui/material";
5
5
  import AIInput from "./AIInput";
6
6
  import { ReactEditor, useSlate } from "slate-react";
7
- import { Node, Transforms } from "slate";
7
+ import { Editor, Node, Path, Transforms } from "slate";
8
+ import useWindowResize from "../../hooks/useWindowResize";
8
9
  import { MODES } from "./helper";
9
10
  import { getSelectedText } from "../../utils/helper";
10
- import { VoiceToText } from "./VoiceToText";
11
- import deserialize from "../../helper/deserialize";
12
11
  import { jsx as _jsx } from "react/jsx-runtime";
13
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
- const scrollToAIInput = editor => {
13
+ const scrollToAIInput = () => {
15
14
  try {
16
15
  setTimeout(() => {
17
16
  const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
18
- let selectionRect;
19
- if (getSelectedText(editor)) {
20
- selectionRect = window.getSelection().getRangeAt(0).getBoundingClientRect();
21
- } else {
22
- selectionRect = ReactEditor.toDOMRange(editor, getNextLine(editor).at).getBoundingClientRect();
23
- }
24
- const selectionScrollBottom = selectionRect.bottom;
25
-
26
- // if the cursor or selection top position is greater than 80
27
- if (selectionScrollBottom > 80) {
28
- // scroll to top of the slateWrapper
17
+ const selectionRect = window.getSelection().getRangeAt(0).getBoundingClientRect();
18
+ const halfOfWrapper = slateWrapper.clientHeight / 2;
19
+ const selectionScollTop = selectionRect.y + selectionRect.height;
20
+ if (selectionScollTop > halfOfWrapper) {
21
+ // scroll to half of the slateWrapper
29
22
  slateWrapper.scrollTo({
30
- top: slateWrapper.scrollTop + selectionScrollBottom - 80,
23
+ top: slateWrapper.scrollTop + selectionScollTop - halfOfWrapper,
31
24
  behavior: "smooth"
32
25
  });
33
26
  }
@@ -36,19 +29,26 @@ const scrollToAIInput = editor => {
36
29
  console.log(err);
37
30
  }
38
31
  };
39
- const insertText = (editor, text, options) => {
40
- const parsed = new DOMParser().parseFromString(text, "text/html");
41
- const fragment = deserialize(parsed.body);
42
- Transforms.insertFragment(editor, fragment, options);
43
- };
44
32
  const insertAtNextLine = (editor, text) => {
45
33
  const nextLine = getNextLine(editor);
46
- insertText(editor, text, {
34
+ Transforms.splitNodes(editor, {
47
35
  at: nextLine.at
48
36
  });
49
- Transforms.splitNodes(editor, {
37
+ Transforms.insertNodes(editor, {
38
+ type: "paragraph",
39
+ children: [{
40
+ text
41
+ }]
42
+ }, {
50
43
  at: nextLine.at
51
44
  });
45
+ const currentPath = Path.parent(nextLine.at.focus.path);
46
+ const nextPath = Path.next(currentPath);
47
+ ReactEditor.focus(editor);
48
+ Transforms.select(editor, {
49
+ anchor: Editor.start(editor, nextPath),
50
+ focus: Editor.end(editor, nextPath)
51
+ });
52
52
  };
53
53
  const getNextLine = editor => {
54
54
  const {
@@ -101,14 +101,8 @@ const updateAnchorEl = (setAnchorEl, editor) => {
101
101
  // selected text as caret
102
102
  caret = selection.getRangeAt(0);
103
103
  } else {
104
- const domElement = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
105
- const {
106
- textContent,
107
- parentElement
108
- } = domElement?.commonAncestorContainer || {};
109
- caret = textContent ? domElement : parentElement; // in mobile, if textContent in not available, it is pointing some <br> tag (getBoundingClientRect not working correctly for <br>), to avoid that, we are pointing the parent element as caret
104
+ caret = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
110
105
  }
111
-
112
106
  const getBoundingClientRect = () => {
113
107
  const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
114
108
  const editorEle = document.querySelector(".ed-section-inner")?.getBoundingClientRect();
@@ -150,8 +144,10 @@ function PopoverAIInput({
150
144
  const [generatedText, setGeneratedText] = useState("");
151
145
  const [inputValue, setInputValue] = useState("");
152
146
  const [selectedOption, setSelectedOption] = useState();
147
+ const targetRef = useRef();
153
148
  const classes = Styles();
154
149
  const editor = useSlate();
150
+ const [size] = useWindowResize();
155
151
  const onClickOutside = () => {
156
152
  setAnchorEl(null);
157
153
  setOpenAI("");
@@ -167,8 +163,8 @@ function PopoverAIInput({
167
163
  updateAnchorEl(setAnchorEl, editor);
168
164
  }, [openAI, editor.selection]);
169
165
  useEffect(() => {
170
- if (openAI) {
171
- scrollToAIInput(editor);
166
+ if (openAI === "fromToolBar") {
167
+ scrollToAIInput();
172
168
  }
173
169
  }, [openAI]);
174
170
  const onSend = async (type, option) => {
@@ -176,35 +172,12 @@ function PopoverAIInput({
176
172
  onClickOutside();
177
173
  return;
178
174
  }
179
- if (type === "done") {
180
- // Get the current selection point
181
- const {
182
- anchor
183
- } = editor.selection;
184
- const {
185
- path
186
- } = anchor;
187
- const {
188
- text: selectText
189
- } = Node.get(editor, path);
190
- if (selectText?.length) {
191
- insertAtNextLine(editor, generatedText);
192
- } else {
193
- insertText(editor, generatedText);
194
- }
195
- onClickOutside();
196
- return;
197
- }
198
175
  if (type === "replace_selection") {
199
176
  // replace generated text
200
- insertText(editor, generatedText);
177
+ Transforms.insertText(editor, generatedText);
201
178
  onClickOutside();
202
179
  return;
203
180
  }
204
- if (type === "speech_to_text") {
205
- setGeneratedText(option.text);
206
- return;
207
- }
208
181
  if (type === "try_again") {
209
182
  // resetting the previous option and try again
210
183
  option = selectedOption;
@@ -215,7 +188,7 @@ function PopoverAIInput({
215
188
  setLoading(true);
216
189
  const payload = {
217
190
  mode: option.mode || 0,
218
- query: option?.inputValue || inputValue
191
+ query: inputValue
219
192
  };
220
193
  if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
221
194
  payload.textOptionInput = type;
@@ -241,7 +214,47 @@ function PopoverAIInput({
241
214
  }
242
215
  return;
243
216
  }
244
- insertText(editor, text);
217
+
218
+ // Get the current selection point
219
+ const {
220
+ anchor
221
+ } = editor.selection;
222
+ const {
223
+ path
224
+ } = anchor;
225
+ const {
226
+ text: selectText
227
+ } = Node.get(editor, path);
228
+ const insertInNewLine = option.isSendBtn && selectText?.length || type === "continue_writing";
229
+ if (insertInNewLine) {
230
+ if (getSelectedText(editor)) {
231
+ const currentPath = Path.parent(editor.selection.focus.path);
232
+ const nextPath = Path.next(currentPath);
233
+ Transforms.insertNodes(editor, {
234
+ type: "paragraph",
235
+ children: [{
236
+ text
237
+ }]
238
+ }, {
239
+ at: nextPath,
240
+ select: true
241
+ });
242
+ } else {
243
+ insertAtNextLine(editor, text);
244
+ return;
245
+ }
246
+ } else {
247
+ Transforms.insertText(editor, text);
248
+ }
249
+ const range = {
250
+ ...editor.selection,
251
+ anchor: {
252
+ ...anchor,
253
+ offset: openAI === "fromToolBar" ? anchor.offset : 0
254
+ }
255
+ };
256
+ ReactEditor.focus(editor);
257
+ Transforms.select(editor, range);
245
258
 
246
259
  // scrollToAIInput();
247
260
  };
@@ -250,7 +263,21 @@ function PopoverAIInput({
250
263
  setInputValue(e.target.value);
251
264
  };
252
265
  return /*#__PURE__*/_jsxs("div", {
253
- children: [/*#__PURE__*/_jsx(Popper, {
266
+ children: [size.device === "xs" && openAI ? /*#__PURE__*/_jsx(Box, {
267
+ component: "div",
268
+ sx: classes.mobileAIInputWrapper,
269
+ ref: targetRef,
270
+ children: /*#__PURE__*/_jsx(AIInput, {
271
+ loading: loading,
272
+ onSend: onSend,
273
+ generatedText: generatedText,
274
+ anchorEl: anchorEl,
275
+ openAI: openAI,
276
+ inputValue: inputValue,
277
+ onInputChange: onInputChange,
278
+ onClickOutside: onClickOutside
279
+ })
280
+ }) : /*#__PURE__*/_jsx(Popper, {
254
281
  open: Boolean(openAI),
255
282
  anchorEl: anchorEl,
256
283
  transition: true,
@@ -259,6 +286,7 @@ function PopoverAIInput({
259
286
  ...classes.aiPopper,
260
287
  width: editorElement?.offsetWidth || 400
261
288
  },
289
+ ref: targetRef,
262
290
  children: ({
263
291
  TransitionProps
264
292
  }) => /*#__PURE__*/_jsx(Fade, {
@@ -268,25 +296,21 @@ function PopoverAIInput({
268
296
  sx: getSelectedText(editor) ? {
269
297
  marginTop: "6px"
270
298
  } : {},
271
- children: /*#__PURE__*/_jsx(VoiceToText, {
272
- otherProps: otherProps,
299
+ children: /*#__PURE__*/_jsx(AIInput, {
300
+ loading: loading,
273
301
  onSend: onSend,
274
- children: /*#__PURE__*/_jsx(AIInput, {
275
- loading: loading,
276
- onSend: onSend,
277
- generatedText: generatedText,
278
- anchorEl: anchorEl,
279
- openAI: openAI,
280
- inputValue: inputValue,
281
- onInputChange: onInputChange,
282
- onClickOutside: onClickOutside
283
- })
302
+ generatedText: generatedText,
303
+ anchorEl: anchorEl,
304
+ openAI: openAI,
305
+ inputValue: inputValue,
306
+ onInputChange: onInputChange,
307
+ onClickOutside: onClickOutside
284
308
  })
285
309
  })
286
310
  })
287
311
  }), openAI ? /*#__PURE__*/_jsx("div", {
288
312
  style: {
289
- height: "100vh",
313
+ height: targetRef?.current?.clientHeight > 250 ? targetRef?.current?.clientHeight : 250,
290
314
  background: "transparent"
291
315
  }
292
316
  }) : null]
@@ -91,6 +91,7 @@ const Styles = theme => ({
91
91
  },
92
92
  generatedText: {
93
93
  margin: "8px",
94
+ maxHeight: "100px",
94
95
  overflow: "auto",
95
96
  fontSize: "inherit"
96
97
  },
@@ -166,8 +167,7 @@ const Styles = theme => ({
166
167
  sendIconContainer: {
167
168
  alignSelf: "flex-end",
168
169
  display: "flex",
169
- alignItems: "center",
170
- gap: "6px"
170
+ alignItems: "center"
171
171
  }
172
172
  });
173
173
  export default Styles;
@@ -47,12 +47,10 @@ export const newContentOptions = [{
47
47
  groupLabel: "",
48
48
  options: [
49
49
  // improveWriting,
50
- {
51
- label: "Done",
52
- value: "done",
53
- Icon: CheckIcon,
50
+ ...commonOptions.map(o => ({
51
+ ...o,
54
52
  replace: true
55
- }, ...commonOptions, {
53
+ })), {
56
54
  label: "Close",
57
55
  value: "close",
58
56
  Icon: CloseIcon,
@@ -1,6 +1,4 @@
1
1
  import React from "react";
2
- import { Box } from "@mui/material";
3
- import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
4
2
  import { jsx as _jsx } from "react/jsx-runtime";
5
3
  const AccordionSummary = props => {
6
4
  const {
@@ -11,27 +9,18 @@ const AccordionSummary = props => {
11
9
  const {
12
10
  textColor,
13
11
  bgColor,
14
- borderColor,
15
- borderRadius,
16
- bannerSpacing
12
+ borderColor
17
13
  } = element;
18
- return /*#__PURE__*/_jsx(Box, {
14
+ return /*#__PURE__*/_jsx("div", {
19
15
  className: `accordion-summary-container`,
20
16
  ...attributes,
21
- sx: {
17
+ style: {
22
18
  width: "100%",
23
19
  position: "relative",
24
20
  backgroundColor: bgColor,
25
21
  border: `1px solid ${borderColor}`,
26
- color: textColor,
27
- borderRadius: {
28
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
29
- },
30
- padding: {
31
- ...getTRBLBreakPoints(bannerSpacing)
32
- }
22
+ color: textColor
33
23
  },
34
- component: "div",
35
24
  children: children
36
25
  });
37
26
  };
@@ -251,7 +251,7 @@ function AppHeader(props) {
251
251
  style: {
252
252
  display: "inline-flex",
253
253
  alignItems: "center",
254
- color: textColor || "#000000",
254
+ color: textColor,
255
255
  fontSize: logoFontSize,
256
256
  fontFamily: titleFontFamily,
257
257
  justifyContent: isLogoRight ? "end" : "start"
@@ -299,7 +299,7 @@ function AppHeader(props) {
299
299
  fontFamily: fontFamily,
300
300
  textTransform: "none",
301
301
  fontSize: fontSize || "16px",
302
- color: textColor || "#000",
302
+ color: textColor || "#FFF",
303
303
  background: bgColor || "none",
304
304
  "& .m-settings": {
305
305
  display: "none",
@@ -314,7 +314,7 @@ function AppHeader(props) {
314
314
  background: "#FFF"
315
315
  },
316
316
  "&:hover": {
317
- color: textColorHover || textColor || "#000",
317
+ color: textColorHover || textColor || "#FFF",
318
318
  background: bgColorHover || bgColor || "none",
319
319
  "& .m-settings": {
320
320
  display: "block"
@@ -13,9 +13,6 @@ import { WorkflowIcon } from "../../common/iconslist";
13
13
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
14
14
  import { handleLinkType, windowVar } from "../../utils/helper";
15
15
  import LinkSettings from "../../common/LinkSettings";
16
- import { useEditorTheme } from "../../hooks/useEditorTheme";
17
- import { getTheme } from "../../theme";
18
- import { fontFamilyMap } from "../../utils/font";
19
16
  import { jsx as _jsx } from "react/jsx-runtime";
20
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
21
18
  const EditorButton = props => {
@@ -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({}, {
@@ -197,9 +186,20 @@ const EditorButton = props => {
197
186
  children: [/*#__PURE__*/_jsxs(Box, {
198
187
  sx: {
199
188
  textDecoration: "none",
189
+ background: bgColor || "rgb(30, 75, 122)",
200
190
  borderBlockStyle: "solid",
191
+ borderColor: borderColor || "transparent",
201
192
  borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
193
+ borderRadius: {
194
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
195
+ },
202
196
  borderStyle: borderStyle || "solid",
197
+ padding: {
198
+ ...getTRBLBreakPoints(bannerSpacing)
199
+ },
200
+ color: `${textColor || "#FFFFFF"}`,
201
+ fontSize: textSize || "inherit",
202
+ fontFamily: fontFamily || "PoppinsRegular",
203
203
  display: "inline-flex",
204
204
  alignItems: "center",
205
205
  position: "relative",
@@ -207,26 +207,14 @@ const EditorButton = props => {
207
207
  display: "none"
208
208
  },
209
209
  "&:hover": {
210
- color: `${textColorHover || textColor}`,
211
- background: bgColorHover || bgColor,
210
+ color: `${textColorHover || textColor || "#FFFFFF"}`,
211
+ background: bgColorHover || bgColor || "rgb(30, 75, 122)",
212
212
  "& .element-toolbar": {
213
213
  display: "flex"
214
214
  }
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
215
  }
227
216
  },
228
217
  ...buttonProps,
229
- className: "button theme-element",
230
218
  children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
231
219
  iconName: buttonIcon,
232
220
  style: {
@@ -2,7 +2,6 @@ import React from "react";
2
2
  import { insertCarousel } from "../../utils/carousel";
3
3
  import { Carousal } from "../../common/iconslist";
4
4
  import ToolbarIcon from "../../common/ToolbarIcon";
5
- import { CarouselElementIcon } from "../../common/iconListV2";
6
5
  import { jsx as _jsx } from "react/jsx-runtime";
7
6
  const CarouselButton = props => {
8
7
  const {
@@ -15,7 +14,7 @@ const CarouselButton = props => {
15
14
  return /*#__PURE__*/_jsx(ToolbarIcon, {
16
15
  title: "Carousel",
17
16
  onClick: handleClick,
18
- icon: /*#__PURE__*/_jsx(CarouselElementIcon, {}),
17
+ icon: /*#__PURE__*/_jsx(Carousal, {}),
19
18
  icoBtnType: icoBtnType
20
19
  });
21
20
  };