@flozy/editor 3.9.0 → 3.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. package/dist/Editor/CommonEditor.js +177 -109
  2. package/dist/Editor/Editor.css +8 -12
  3. package/dist/Editor/Elements/AI/AIInput.js +17 -18
  4. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +23 -28
  6. package/dist/Editor/Elements/AI/Styles.js +2 -1
  7. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  8. package/dist/Editor/Elements/AI/VoiceToText/index.js +177 -0
  9. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  10. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
  11. package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
  12. package/dist/Editor/Elements/Button/EditorButton.js +28 -16
  13. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  14. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  15. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  16. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  17. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  18. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  19. package/dist/Editor/Elements/Grid/Grid.js +27 -3
  20. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  21. package/dist/Editor/Elements/Link/Link.js +6 -1
  22. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  23. package/dist/Editor/Elements/Link/LinkPopup.js +10 -3
  24. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  25. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  26. package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
  27. package/dist/Editor/Elements/Signature/SignaturePopup.js +14 -3
  28. package/dist/Editor/Elements/Table/Styles.js +23 -1
  29. package/dist/Editor/Elements/Table/Table.js +2 -1
  30. package/dist/Editor/Elements/Table/TableCell.js +69 -7
  31. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
  32. package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
  33. package/dist/Editor/MiniEditor.js +3 -1
  34. package/dist/Editor/Styles/EditorStyles.js +1 -1
  35. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  36. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  37. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  38. package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -18
  39. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +4 -2
  40. package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
  41. package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
  42. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  43. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  44. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  45. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -16
  46. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  47. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  48. package/dist/Editor/Toolbar/PopupTool/index.js +7 -17
  49. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  50. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  51. package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
  52. package/dist/Editor/assets/svg/RedoIcon.js +27 -0
  53. package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
  54. package/dist/Editor/assets/svg/TextIcon.js +8 -5
  55. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  56. package/dist/Editor/assets/svg/UndoIcon.js +27 -0
  57. package/dist/Editor/common/ColorPickerButton.js +25 -9
  58. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  59. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  60. package/dist/Editor/common/CustomDialog/index.js +94 -0
  61. package/dist/Editor/common/CustomDialog/style.js +67 -0
  62. package/dist/Editor/common/CustomSelect.js +33 -0
  63. package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
  64. package/dist/Editor/common/Icon.js +43 -3
  65. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  66. package/dist/Editor/common/LinkSettings/index.js +4 -2
  67. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  68. package/dist/Editor/common/LinkSettings/style.js +11 -8
  69. package/dist/Editor/common/Section/index.js +57 -7
  70. package/dist/Editor/common/Section/styles.js +11 -0
  71. package/dist/Editor/common/Shorthands/elements.js +54 -0
  72. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  73. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +33 -29
  74. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +31 -25
  75. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  76. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  77. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  78. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  79. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  80. package/dist/Editor/common/iconslist.js +0 -31
  81. package/dist/Editor/helper/theme.js +189 -4
  82. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  83. package/dist/Editor/hooks/useMouseMove.js +4 -1
  84. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  85. package/dist/Editor/plugins/withEmbeds.js +1 -1
  86. package/dist/Editor/plugins/withHTML.js +1 -1
  87. package/dist/Editor/plugins/withTable.js +1 -1
  88. package/dist/Editor/theme/ThemeList.js +50 -173
  89. package/dist/Editor/theme/index.js +144 -0
  90. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  91. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  92. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  93. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  94. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  95. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  96. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  97. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  98. package/dist/Editor/themeSettings/icons.js +60 -0
  99. package/dist/Editor/themeSettings/index.js +320 -0
  100. package/dist/Editor/themeSettings/style.js +152 -0
  101. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  102. package/dist/Editor/themeSettingsAI/index.js +356 -0
  103. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  104. package/dist/Editor/themeSettingsAI/style.js +247 -0
  105. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -25
  106. package/dist/Editor/utils/button.js +1 -17
  107. package/dist/Editor/utils/events.js +54 -2
  108. package/dist/Editor/utils/font.js +40 -37
  109. package/dist/Editor/utils/helper.js +31 -2
  110. package/dist/Editor/utils/table.js +51 -43
  111. package/package.json +4 -3
@@ -167,7 +167,8 @@ const Styles = theme => ({
167
167
  sendIconContainer: {
168
168
  alignSelf: "flex-end",
169
169
  display: "flex",
170
- alignItems: "center"
170
+ alignItems: "center",
171
+ gap: "6px"
171
172
  }
172
173
  });
173
174
  export default Styles;
@@ -0,0 +1,73 @@
1
+ import { Box } from "@mui/material";
2
+ import { useEffect, useRef, useState } from "react";
3
+ import WaveSurfer from "wavesurfer.js";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const SoundWave = props => {
6
+ const {
7
+ audioChunks = null
8
+ } = props; // Initialize to null if not provided
9
+ const waveContent = useRef(null);
10
+ const wavesurfer = useRef(null);
11
+ const [playOnce, setPlayOnce] = useState(false);
12
+ useEffect(() => {
13
+ if (waveContent.current) {
14
+ if (wavesurfer.current) {
15
+ wavesurfer.current.destroy();
16
+ }
17
+ wavesurfer.current = WaveSurfer.create({
18
+ container: waveContent.current,
19
+ waveColor: "#2563EB",
20
+ progressColor: "#2563EB",
21
+ cursorWidth: 0,
22
+ // Disable the cursor
23
+ barWidth: 2,
24
+ barGap: 1,
25
+ barRadius: 2,
26
+ scrollParent: false,
27
+ // Prevent scrolling
28
+ height: waveContent.current.clientHeight // Set height to fit container
29
+ });
30
+
31
+ // Fit the waveform to the container width
32
+ const resize = () => {
33
+ if (wavesurfer.current) {
34
+ const containerWidth = waveContent.current.clientWidth;
35
+ const duration = wavesurfer.current.getDuration();
36
+ if (duration > 0) {
37
+ const newZoom = containerWidth / duration;
38
+ wavesurfer.current.zoom(newZoom);
39
+ }
40
+ }
41
+ };
42
+ window.addEventListener("resize", resize);
43
+ resize();
44
+ return () => {
45
+ window.removeEventListener("resize", resize);
46
+ };
47
+ }
48
+ }, []);
49
+ useEffect(() => {
50
+ if (wavesurfer.current && audioChunks) {
51
+ const audioBlob = new Blob(audioChunks, {
52
+ type: "audio/webm"
53
+ });
54
+ const recordedUrl = URL.createObjectURL(audioBlob);
55
+ wavesurfer.current.load(recordedUrl).then().catch(e => console.error("Error loading audio: ", e));
56
+ if (!playOnce) {
57
+ setPlayOnce(true);
58
+ }
59
+ } else if (wavesurfer.current && !audioChunks) {
60
+ // Clear the waveform when audioChunks is null
61
+ wavesurfer.current.empty();
62
+ }
63
+ }, [audioChunks, playOnce]);
64
+ return /*#__PURE__*/_jsx(Box, {
65
+ ref: waveContent,
66
+ style: {
67
+ width: "100%",
68
+ height: "100%",
69
+ overflow: "hidden"
70
+ }
71
+ });
72
+ };
73
+ export const AudioWave = SoundWave;
@@ -0,0 +1,177 @@
1
+ import { useState, useEffect, useRef, cloneElement } from "react";
2
+ import PropTypes from "prop-types";
3
+ import STTStyles from "./style";
4
+ import { Grid, IconButton, Box } from "@mui/material";
5
+ import { AudioWave } from "./AudioWave";
6
+ import { CloseGreyCircle, PauseRecordingIcon, TickBlueCircle } from "../../../assets/svg/AIIcons";
7
+ import { MODES } from "../helper";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
+ function STT(props) {
11
+ const {
12
+ children,
13
+ otherProps,
14
+ onSend
15
+ } = props;
16
+ const {
17
+ services
18
+ } = otherProps;
19
+ const classes = STTStyles();
20
+ const [isRecording, setIsRecording] = useState(false);
21
+ const [mediaRecorder, setMediaRecorder] = useState(null);
22
+ const [audioChunks, setAudioChunks] = useState([]);
23
+ const [chunkIndex, setChunkIndex] = useState(0);
24
+ const audioChunksRef = useRef([]);
25
+ const [transcription, setTranscription] = useState("");
26
+ const [showPause, setShowPause] = useState(true);
27
+ const [isAILoading, setAILoading] = useState(false);
28
+ const setChunk = event => {
29
+ if (event.data.size > 0) {
30
+ setAudioChunks(prev => {
31
+ const updatedChunks = [...prev, event.data];
32
+ audioChunksRef.current = updatedChunks; // Update ref manually
33
+ return updatedChunks;
34
+ });
35
+ }
36
+ };
37
+ const sendChunck = async (isLast = false) => {
38
+ if (audioChunksRef.current.length > 0) {
39
+ const audioBlob = new Blob(audioChunksRef.current, {
40
+ type: "audio/webm"
41
+ });
42
+ const formData = new FormData();
43
+ formData.append("audio", audioBlob, `audio_chunk_${chunkIndex}.wav`);
44
+ formData.append("chunkIndex", chunkIndex); // Send chunk index to the backend
45
+ if (isLast) {
46
+ formData.append("isLastChunk", true); // Send chunk index to the backend
47
+ } else {
48
+ formData.append("isLastChunk", false);
49
+ setChunkIndex(prevIndex => prevIndex + 1);
50
+ }
51
+ const result = await services("speechToText", {
52
+ formData
53
+ });
54
+ setTranscription(result?.data);
55
+ await sendChunck();
56
+ }
57
+ };
58
+ const handleStopRecording = () => {
59
+ sendChunck(true);
60
+ setAudioChunks([]);
61
+ };
62
+ const startRecording = async () => {
63
+ setTranscription("");
64
+ const stream = await navigator.mediaDevices.getUserMedia({
65
+ audio: true
66
+ });
67
+ const recorder = new MediaRecorder(stream);
68
+ setMediaRecorder(recorder);
69
+ recorder.ondataavailable = setChunk;
70
+ recorder.onstop = handleStopRecording;
71
+ recorder.start(100);
72
+ setIsRecording(true);
73
+ setTimeout(() => {
74
+ sendChunck();
75
+ }, 2000);
76
+ };
77
+ const stopRecording = () => {
78
+ if (mediaRecorder) {
79
+ mediaRecorder.stop();
80
+
81
+ // Stop all tracks to release the microphone
82
+ if (mediaRecorder.stream) {
83
+ mediaRecorder.stream.getTracks().forEach(track => track.stop());
84
+ }
85
+ setChunkIndex(0);
86
+ setShowPause(false);
87
+ }
88
+ };
89
+ const sendToInfiniti = async () => {
90
+ setAILoading(true);
91
+ setIsRecording(false);
92
+ const result = await services("infinityAI", {
93
+ mode: MODES.default,
94
+ query: transcription
95
+ });
96
+ const text = result?.data || "";
97
+ onSend("speech_to_text", {
98
+ text
99
+ });
100
+ stopRecording();
101
+ setAILoading(false);
102
+ };
103
+ const closeRecording = () => {
104
+ setAudioChunks([]);
105
+ stopRecording();
106
+ setIsRecording(false);
107
+ setShowPause(true);
108
+ setTranscription("");
109
+ };
110
+ useEffect(() => {
111
+ audioChunksRef.current = audioChunks;
112
+ }, [audioChunks]);
113
+ const transcriptionText = transcription && transcription.replace(/\s+/g, "")?.length; // Remove all whitespace characters like \n \t
114
+
115
+ return /*#__PURE__*/_jsx(Grid, {
116
+ xs: 12,
117
+ children: /*#__PURE__*/_jsx(Grid, {
118
+ className: classes.SttContainer,
119
+ children: !isRecording ? /*#__PURE__*/_jsx(Grid, {
120
+ xs: 12,
121
+ children: /*#__PURE__*/cloneElement(children, {
122
+ startRecording,
123
+ isAILoading
124
+ })
125
+ }) : /*#__PURE__*/_jsxs(Grid, {
126
+ xs: 12,
127
+ sx: classes.AudioVizualizerContainer,
128
+ children: [transcriptionText ? /*#__PURE__*/_jsx(Grid, {
129
+ xs: 12,
130
+ sx: classes.TranscriptionContainer,
131
+ children: /*#__PURE__*/_jsx("pre", {
132
+ style: {
133
+ whiteSpace: "pre-wrap",
134
+ wordWrap: "break-word",
135
+ fontFamily: "inherit",
136
+ margin: 0
137
+ },
138
+ children: transcription
139
+ })
140
+ }) : null, /*#__PURE__*/_jsxs(Grid, {
141
+ xs: 12,
142
+ sx: classes.AudioVizualizerContent,
143
+ children: [/*#__PURE__*/_jsx(Box, {
144
+ children: /*#__PURE__*/_jsx(IconButton, {
145
+ onClick: closeRecording,
146
+ children: /*#__PURE__*/_jsx(CloseGreyCircle, {})
147
+ })
148
+ }), /*#__PURE__*/_jsx(Box, {
149
+ sx: classes.AudioVisualiser,
150
+ children: /*#__PURE__*/_jsx(AudioWave, {
151
+ audioChunks: audioChunks
152
+ })
153
+ }), /*#__PURE__*/_jsx(Box, {
154
+ children: showPause ? /*#__PURE__*/_jsx(IconButton, {
155
+ onClick: stopRecording,
156
+ children: /*#__PURE__*/_jsx(PauseRecordingIcon, {})
157
+ }) : /*#__PURE__*/_jsx(IconButton, {
158
+ onClick: sendToInfiniti,
159
+ disabled: !transcriptionText,
160
+ style: !transcriptionText ? {
161
+ opacity: 0.5
162
+ } : {},
163
+ children: /*#__PURE__*/_jsx(TickBlueCircle, {})
164
+ })
165
+ })]
166
+ })]
167
+ })
168
+ })
169
+ });
170
+ }
171
+ STT.defaultProps = {
172
+ classes: {}
173
+ };
174
+ STT.propTypes = {
175
+ classes: PropTypes.object
176
+ };
177
+ export const VoiceToText = STT;
@@ -0,0 +1,40 @@
1
+ const styles = () => ({
2
+ SttContainer: {
3
+ display: "flex",
4
+ width: "100%",
5
+ padding: "12px",
6
+ zIndex: 1
7
+ },
8
+ STTInput: {
9
+ width: "100%",
10
+ borderRadius: "8px",
11
+ "&& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
12
+ borderColor: "#2563EB"
13
+ },
14
+ "&& .MuiOutlinedInput-root": {
15
+ background: "rgba(252, 250, 255, 1)"
16
+ }
17
+ },
18
+ AudioVizualizerContainer: {
19
+ width: "100%",
20
+ display: "flex",
21
+ background: "rgba(252, 250, 255, 1)",
22
+ borderRadius: "8px",
23
+ border: "1px solid #2563EB",
24
+ alignItems: "center",
25
+ flexWrap: "wrap"
26
+ },
27
+ AudioVizualizerContent: {
28
+ display: "flex",
29
+ height: "50px",
30
+ width: "100%"
31
+ },
32
+ AudioVisualiser: {
33
+ flexGrow: "1",
34
+ height: "100%"
35
+ },
36
+ TranscriptionContainer: {
37
+ padding: "12px"
38
+ }
39
+ });
40
+ export default styles;
@@ -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
  };
@@ -62,6 +62,11 @@ function AppHeader(props) {
62
62
  const handleDrawerToggle = () => {
63
63
  setMobileOpen(prevState => !prevState);
64
64
  };
65
+ const closeDrawer = () => {
66
+ if (mobileOpen) {
67
+ handleDrawerToggle();
68
+ }
69
+ };
65
70
  const onSettings = e => {
66
71
  if (!readOnly) {
67
72
  e.stopPropagation();
@@ -148,10 +153,27 @@ function AppHeader(props) {
148
153
  }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
149
154
  children: menus.map((item, i) => {
150
155
  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
+ };
151
173
  return /*#__PURE__*/_jsx(ListItem, {
152
174
  disablePadding: true,
153
175
  children: /*#__PURE__*/_jsx(ListItemButton, {
154
- ...buttonProps,
176
+ ...props,
155
177
  sx: {
156
178
  textAlign: "center"
157
179
  },
@@ -229,7 +251,7 @@ function AppHeader(props) {
229
251
  style: {
230
252
  display: "inline-flex",
231
253
  alignItems: "center",
232
- color: textColor,
254
+ color: textColor || "#000000",
233
255
  fontSize: logoFontSize,
234
256
  fontFamily: titleFontFamily,
235
257
  justifyContent: isLogoRight ? "end" : "start"
@@ -277,7 +299,7 @@ function AppHeader(props) {
277
299
  fontFamily: fontFamily,
278
300
  textTransform: "none",
279
301
  fontSize: fontSize || "16px",
280
- color: textColor || "#FFF",
302
+ color: textColor || "#000",
281
303
  background: bgColor || "none",
282
304
  "& .m-settings": {
283
305
  display: "none",
@@ -292,7 +314,7 @@ function AppHeader(props) {
292
314
  background: "#FFF"
293
315
  },
294
316
  "&:hover": {
295
- color: textColorHover || textColor || "#FFF",
317
+ color: textColorHover || textColor || "#000",
296
318
  background: bgColorHover || bgColor || "none",
297
319
  "& .m-settings": {
298
320
  display: "block"
@@ -13,6 +13,9 @@ 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";
16
19
  import { jsx as _jsx } from "react/jsx-runtime";
17
20
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
21
  const EditorButton = props => {
@@ -30,6 +33,12 @@ const EditorButton = props => {
30
33
  const path = ReactEditor.findPath(editor, element);
31
34
  const [edit, setEdit] = useState(false);
32
35
  const [openNav, setOpenNav] = useState(false);
36
+ const {
37
+ theme
38
+ } = useEditorTheme();
39
+ const {
40
+ buttonTheme
41
+ } = getTheme(theme);
33
42
  const {
34
43
  label,
35
44
  bgColor,
@@ -43,7 +52,7 @@ const EditorButton = props => {
43
52
  fontFamily,
44
53
  textColorHover,
45
54
  bgColorHover,
46
- buttonIcon,
55
+ // buttonIcon,
47
56
  iconPosition = "start",
48
57
  borderStyle,
49
58
  borderWidth,
@@ -62,13 +71,15 @@ const EditorButton = props => {
62
71
  } = actionTrigger || {
63
72
  options: []
64
73
  };
65
- const isTrigger = linkType === "actionTrigger";
74
+ const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
66
75
  const refURl = isTrigger ? buttonLink?.url : url;
76
+ const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
67
77
  const BtnIcon = buttonIcon ? buttonIcon : null;
68
78
  windowVar.lastButtonProps = element;
69
79
  const handleTrigger = async () => {
70
80
  if (metadata?.buttonLink?.handler) {
71
- metadata.buttonLink.handler("click");
81
+ const response = isTrigger ? linkType : "click";
82
+ metadata.buttonLink.handler(response);
72
83
  } else if (redirectOnURLResult) {
73
84
  // call api and redirect based on api result
74
85
  const apiResult = await actionButtonRedirect({}, {
@@ -186,20 +197,9 @@ const EditorButton = props => {
186
197
  children: [/*#__PURE__*/_jsxs(Box, {
187
198
  sx: {
188
199
  textDecoration: "none",
189
- background: bgColor || "rgb(30, 75, 122)",
190
200
  borderBlockStyle: "solid",
191
- borderColor: borderColor || "transparent",
192
201
  borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
193
- borderRadius: {
194
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
195
- },
196
202
  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,14 +207,26 @@ const EditorButton = props => {
207
207
  display: "none"
208
208
  },
209
209
  "&:hover": {
210
- color: `${textColorHover || textColor || "#FFFFFF"}`,
211
- background: bgColorHover || bgColor || "rgb(30, 75, 122)",
210
+ color: `${textColorHover || textColor}`,
211
+ background: bgColorHover || bgColor,
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 || {})
215
226
  }
216
227
  },
217
228
  ...buttonProps,
229
+ className: "button theme-element",
218
230
  children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
219
231
  iconName: buttonIcon,
220
232
  style: {
@@ -1,11 +1,15 @@
1
- import React, { useState } from "react";
2
- import { Box, IconButton, Popover } from "@mui/material";
1
+ import React, { useContext, useState } from "react";
2
+ import { Box, IconButton, Popover, Typography, useTheme } 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";
7
10
  import { jsx as _jsx } from "react/jsx-runtime";
8
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
+ import { Fragment as _Fragment } from "react/jsx-runtime";
9
13
  let c = [];
10
14
  const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
11
15
  if (i % 7 === 0) {
@@ -31,9 +35,7 @@ const SingleColorButton = ({
31
35
  style: {
32
36
  width: "100%",
33
37
  display: "flex",
34
- alignItems: "center",
35
- padding: padding || "8px",
36
- justifyContent: "center"
38
+ padding: padding || "8px"
37
39
  },
38
40
  children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
39
41
  onClick: handleSelect(m),
@@ -109,11 +111,17 @@ const ColorButtons = props => {
109
111
  forMiniTool,
110
112
  openColorTool,
111
113
  onClose,
112
- onColorPickerClick
114
+ onColorPickerClick,
115
+ disableEditTheme
113
116
  } = props;
114
117
  const [row1, ...restRows] = ColorChunks([]);
115
118
  const [anchorEl, setAnchorEl] = useState(null);
116
119
  const open = Boolean(anchorEl);
120
+ const theme = useTheme();
121
+ const editor = useSlateStatic();
122
+ const {
123
+ setOpenTheme
124
+ } = useContext(ThemeContext);
117
125
  const handleMore = e => {
118
126
  setAnchorEl(e.currentTarget);
119
127
  };
@@ -126,6 +134,7 @@ const ColorButtons = props => {
126
134
  const handleSelect = color => () => {
127
135
  onSelect(color);
128
136
  };
137
+ const colorVars = theme?.vars?.colors || {};
129
138
  return /*#__PURE__*/_jsxs(Box, {
130
139
  component: "span",
131
140
  sx: classes.colorButtons,
@@ -142,7 +151,7 @@ const ColorButtons = props => {
142
151
  activeColor: activeColor
143
152
  }, `si_btn_row1_${m}_${i}`);
144
153
  })
145
- }), /*#__PURE__*/_jsxs(Popover, {
154
+ }), /*#__PURE__*/_jsx(Popover, {
146
155
  open: open || openColorTool,
147
156
  anchorEl: anchorEl || openColorTool,
148
157
  onClose: handleClose,
@@ -156,9 +165,39 @@ const ColorButtons = props => {
156
165
  },
157
166
  sx: classes.colorPopper,
158
167
  className: "colorPopper",
159
- children: [/*#__PURE__*/_jsx(Box, {
168
+ children: /*#__PURE__*/_jsxs(Box, {
160
169
  sx: classes.colorButtonsInner,
161
- children: restRows.map((m, i) => {
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) => {
162
201
  return /*#__PURE__*/_jsx(SingleColorButton, {
163
202
  id: `p2_${id}`,
164
203
  crs: m,
@@ -167,14 +206,18 @@ const ColorButtons = props => {
167
206
  classes: classes,
168
207
  activeColor: activeColor
169
208
  }, `si_btn_${m}_${i}`);
170
- })
171
- }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
172
- onClick: onColorPickerClick,
173
- children: /*#__PURE__*/_jsx("img", {
174
- src: ColorPicker,
175
- alt: "color wheel"
176
- })
177
- }) : null]
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
+ })
178
221
  })]
179
222
  });
180
223
  };
@@ -60,4 +60,28 @@
60
60
  padding: 0 15px !important;
61
61
  width: 60px !important;
62
62
  flex-shrink: 0;
63
- }
63
+ }
64
+
65
+
66
+ .singleColorTitleWrapper {
67
+ display: flex;
68
+ justify-content: space-between;
69
+ align-items: center;
70
+ padding: 10px;
71
+ width: 100%;
72
+ border-bottom: 1px solid #DCE4EC;
73
+ }
74
+
75
+ .singleColorTitleWrapper .MuiTypography-root {
76
+ font-weight: 600;
77
+ }
78
+
79
+ .singleColorTitleWrapper .editBtn {
80
+ text-transform: none;
81
+ color: #2563EB;
82
+ text-decoration: underline;
83
+ padding: 0px;
84
+ min-width: unset;
85
+ cursor: pointer;
86
+ font-size: 14px;
87
+ }