@flozy/editor 10.4.2 → 10.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +16 -131
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +9 -46
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
  9. package/dist/Editor/Elements/Button/EditorButton.js +9 -27
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  14. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +26 -26
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +5 -5
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
  18. package/dist/Editor/Elements/Embed/Video.js +1 -1
  19. package/dist/Editor/Elements/Form/Form.js +3 -3
  20. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
  21. package/dist/Editor/Elements/Form/FormField.js +2 -3
  22. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  23. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -35
  24. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  25. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
  26. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  27. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -1
  28. package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
  29. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  30. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  31. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  32. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  33. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  34. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  35. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  36. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  37. package/dist/Editor/Elements/Table/Styles.js +0 -7
  38. package/dist/Editor/Elements/Table/Table.js +3 -3
  39. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  40. package/dist/Editor/Elements/Title/title.js +6 -6
  41. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  42. package/dist/Editor/MiniEditor.js +1 -2
  43. package/dist/Editor/Styles/EditorStyles.js +5 -5
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  46. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  48. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  53. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  54. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  55. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
  56. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  57. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  58. package/dist/Editor/common/ColorPickerButton.js +16 -41
  59. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  60. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  61. package/dist/Editor/common/Icon.js +0 -28
  62. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  63. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  64. package/dist/Editor/common/LinkSettings/NavComponents.js +65 -45
  65. package/dist/Editor/common/LinkSettings/index.js +28 -14
  66. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  67. package/dist/Editor/common/LinkSettings/style.js +244 -164
  68. package/dist/Editor/common/MentionsPopup/index.js +1 -4
  69. package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
  70. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  71. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  80. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  81. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  82. package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
  83. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
  84. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  85. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  86. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  87. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  88. package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
  89. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  90. package/dist/Editor/common/RnD/index.js +39 -68
  91. package/dist/Editor/common/Select/index.js +7 -44
  92. package/dist/Editor/common/Select/styles.js +2 -30
  93. package/dist/Editor/common/Shorthands/elements.js +0 -54
  94. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  95. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  96. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  97. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  99. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  100. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  101. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  102. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  103. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  104. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  105. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  106. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  107. package/dist/Editor/common/Uploader.js +0 -16
  108. package/dist/Editor/common/iconListV2.js +0 -76
  109. package/dist/Editor/common/iconslist.js +0 -21
  110. package/dist/Editor/commonStyle.js +61 -116
  111. package/dist/Editor/helper/index.js +1 -5
  112. package/dist/Editor/helper/theme.js +2 -203
  113. package/dist/Editor/hooks/useMouseMove.js +3 -9
  114. package/dist/Editor/hooks/useTable.js +4 -5
  115. package/dist/Editor/plugins/withEmbeds.js +1 -1
  116. package/dist/Editor/plugins/withHTML.js +1 -3
  117. package/dist/Editor/plugins/withTable.js +1 -1
  118. package/dist/Editor/theme/ThemeList.js +173 -50
  119. package/dist/Editor/utils/SlateUtilityFunctions.js +37 -161
  120. package/dist/Editor/utils/accordion.js +4 -14
  121. package/dist/Editor/utils/button.js +17 -1
  122. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  123. package/dist/Editor/utils/draftToSlate.js +2 -3
  124. package/dist/Editor/utils/events.js +6 -50
  125. package/dist/Editor/utils/font.js +37 -40
  126. package/dist/Editor/utils/formfield.js +0 -1
  127. package/dist/Editor/utils/helper.js +26 -210
  128. package/dist/Editor/utils/insertAppHeader.js +1 -1
  129. package/dist/Editor/utils/signature.js +9 -2
  130. package/package.json +4 -4
  131. package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
  132. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  133. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  134. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  135. package/dist/Editor/common/Checkbox/index.js +0 -46
  136. package/dist/Editor/common/Checkbox/styles.js +0 -45
  137. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  138. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  139. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  140. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  141. package/dist/Editor/common/CustomSelect.js +0 -43
  142. package/dist/Editor/common/RadioGroup/index.js +0 -48
  143. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  144. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  145. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  146. package/dist/Editor/helper/textIndeces.js +0 -58
  147. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  148. package/dist/Editor/hooks/useThemeValues.js +0 -63
  149. package/dist/Editor/theme/index.js +0 -149
  150. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  151. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  152. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  153. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  154. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  155. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  156. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  157. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  158. package/dist/Editor/themeSettings/icons.js +0 -60
  159. package/dist/Editor/themeSettings/index.js +0 -380
  160. package/dist/Editor/themeSettings/style.js +0 -299
  161. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  162. package/dist/Editor/themeSettingsAI/index.js +0 -355
  163. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  164. package/dist/Editor/themeSettingsAI/style.js +0 -332
  165. package/dist/Editor/utils/updateFormName.js +0 -22
@@ -1,5 +1,5 @@
1
- import React, { useEffect, useState } from "react";
2
- import { Editor, Range, Transforms } from "slate";
1
+ import React, { useState } from "react";
2
+ import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
4
  import AccordionBtnPopup from "./AccordionBtnPopup";
5
5
  import { IconButton, Tooltip, Box } from "@mui/material";
@@ -8,8 +8,6 @@ import { GridSettingsIcon } from "../../common/iconslist";
8
8
  import Icon from "../../common/Icon";
9
9
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
10
10
  import useCommonStyle from "../../commonStyle";
11
- import { getBorderColor, getTextColor } from "../../helper";
12
- import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
13
11
  import { jsx as _jsx } from "react/jsx-runtime";
14
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
13
  const accordionBtnStyleKeys = {
@@ -80,34 +78,12 @@ const Accordion = props => {
80
78
  const path = ReactEditor.findPath(editor, element);
81
79
  const {
82
80
  textColor,
83
- bgColor,
84
- borderColor
81
+ bgColor
85
82
  } = element;
86
- const accordionSummary = element?.children?.find(c => c.type === "accordion-summary");
87
- const {
88
- textColor: childTextColor,
89
- borderRadius,
90
- bannerSpacing
91
- } = accordionSummary || {};
92
- const borderStyle = getBorderColor(borderColor);
93
83
  const {
94
84
  theme
95
85
  } = useEditorContext();
96
86
  const classes = useCommonStyle(theme);
97
- useEffect(() => {
98
- if (!editor.selection || !children[1]) return;
99
- try {
100
- const accordionDetailsElement = element.children?.[1];
101
- const detailsPath = ReactEditor.findPath(editor, accordionDetailsElement);
102
- const detailsRange = Editor.range(editor, detailsPath);
103
- const isInside = Range.intersection(detailsRange, editor.selection);
104
- if (isInside && !toggle) {
105
- setToggle(true);
106
- }
107
- } catch (e) {
108
- console.error(e);
109
- }
110
- }, [editor.selection, children]);
111
87
  const onToggle = () => {
112
88
  setToggle(!toggle);
113
89
  };
@@ -183,29 +159,17 @@ const Accordion = props => {
183
159
  const onClose = () => {
184
160
  setOpenSettings(false);
185
161
  };
186
- const textStyles = getTextColor(childTextColor);
187
- const borderRadiusStyles = {
188
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
189
- };
190
- const padding = getTRBLBreakPoints(bannerSpacing);
191
- return /*#__PURE__*/_jsxs(Box, {
162
+ return /*#__PURE__*/_jsxs("div", {
192
163
  className: `accordion-container`,
193
164
  ...attributes,
194
165
  style: {
195
166
  position: "relative"
196
167
  },
197
- component: "div",
198
- sx: {
199
- background: bgColor,
200
- ...borderStyle,
201
- borderRadius: borderRadiusStyles,
202
- padding,
203
- '& span[data-slate-string="true"]': textStyles
204
- },
205
168
  children: [/*#__PURE__*/_jsxs("div", {
206
- className: "accordion-title"
207
- // style={{ background: bgColor, ...borderStyle }}
208
- ,
169
+ className: "accordion-title",
170
+ style: {
171
+ background: bgColor
172
+ },
209
173
  onClick: onToggle,
210
174
  children: [/*#__PURE__*/_jsx(Box, {
211
175
  role: "button",
@@ -227,8 +191,7 @@ const Accordion = props => {
227
191
  icon: "accordionArrowDown"
228
192
  })
229
193
  }), children[0]]
230
- }), /*#__PURE__*/_jsx(Box, {
231
- component: "div",
194
+ }), /*#__PURE__*/_jsx("div", {
232
195
  className: "accordion-content",
233
196
  style: {
234
197
  display: toggle ? "block" : "none"
@@ -1,5 +1,7 @@
1
1
  import React from "react";
2
+ import { getBorderColor, getTextColor } from "../../helper";
2
3
  import { Box } from "@mui/material";
4
+ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
3
5
  import { jsx as _jsx } from "react/jsx-runtime";
4
6
  const AccordionSummary = props => {
5
7
  const {
@@ -7,12 +9,32 @@ const AccordionSummary = props => {
7
9
  children,
8
10
  element
9
11
  } = props;
12
+ const {
13
+ textColor,
14
+ bgColor,
15
+ borderColor,
16
+ borderRadius,
17
+ bannerSpacing
18
+ } = element;
19
+ const textStyles = getTextColor(textColor);
20
+ const borderStyle = getBorderColor(borderColor);
10
21
  return /*#__PURE__*/_jsx(Box, {
11
22
  className: `accordion-summary-container`,
12
23
  ...attributes,
13
24
  style: {
14
25
  width: "100%",
15
- position: "relative"
26
+ position: "relative",
27
+ background: bgColor,
28
+ ...borderStyle
29
+ },
30
+ sx: {
31
+ borderRadius: {
32
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
33
+ },
34
+ padding: {
35
+ ...getTRBLBreakPoints(bannerSpacing)
36
+ },
37
+ '& span[data-slate-string="true"]': textStyles
16
38
  },
17
39
  component: "div",
18
40
  children: children
@@ -18,7 +18,7 @@ import Typography from "@mui/material/Typography";
18
18
  import Button from "@mui/material/Button";
19
19
  import AppHeaderPopup from "./AppHeaderPopup";
20
20
  import { getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
21
- import { handleLinkType, isHavingColor } from "../../utils/helper";
21
+ import { handleLinkType } from "../../utils/helper";
22
22
  import { jsx as _jsx } from "react/jsx-runtime";
23
23
  import { jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import { createElement as _createElement } from "react";
@@ -45,8 +45,6 @@ function AppHeader(props) {
45
45
  bgColorHover,
46
46
  textColor,
47
47
  textColorHover,
48
- borderColor,
49
- borderColorHover,
50
48
  menuStyle,
51
49
  bannerSpacing,
52
50
  fontSize,
@@ -151,7 +149,7 @@ function AppHeader(props) {
151
149
  }) : appTitle
152
150
  }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
153
151
  children: menus.map((item, i) => {
154
- const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank", () => {}, !readOnly, true);
152
+ const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
155
153
  const onButtonClick = e => {
156
154
  closeDrawer();
157
155
  setTimeout(() => {
@@ -227,7 +225,6 @@ function AppHeader(props) {
227
225
  sx: {
228
226
  ...elevateStyle,
229
227
  background: bgColor,
230
- border: isHavingColor(borderColor) ? `1px solid ${borderColor}` : "none",
231
228
  boxShadow: "none",
232
229
  ...appbarSp,
233
230
  zIndex: 999
@@ -268,7 +265,7 @@ function AppHeader(props) {
268
265
  style: {
269
266
  display: "inline-flex",
270
267
  alignItems: "center",
271
- color: textColor || "#000000",
268
+ color: textColor,
272
269
  fontSize: logoFontSize,
273
270
  fontFamily: titleFontFamily,
274
271
  justifyContent: isLogoRight ? "end" : "start"
@@ -323,9 +320,8 @@ function AppHeader(props) {
323
320
  fontFamily: fontFamily,
324
321
  textTransform: "none",
325
322
  fontSize: fontSize || "16px",
326
- color: textColor || "#000",
323
+ color: textColor || "#FFF",
327
324
  background: bgColor || "none",
328
- border: borderColorHover ? `1px solid transparent` : "none",
329
325
  "& .m-settings": {
330
326
  display: "none",
331
327
  position: "absolute",
@@ -339,9 +335,8 @@ function AppHeader(props) {
339
335
  background: "#FFF"
340
336
  },
341
337
  "&:hover": {
342
- color: textColorHover || textColor || "#000",
338
+ color: textColorHover || textColor || "#FFF",
343
339
  background: bgColorHover || bgColor || "none",
344
- border: borderColorHover ? `1px solid ${borderColorHover}` : "none",
345
340
  "& .m-settings": {
346
341
  display: "block"
347
342
  }
@@ -9,8 +9,6 @@ import { WorkflowIcon } from "../../common/iconslist";
9
9
  import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
10
10
  import { handleLinkType, windowVar } from "../../utils/helper";
11
11
  import LinkSettings from "../../common/LinkSettings";
12
- import { useEditorTheme } from "../../hooks/useEditorTheme";
13
- import { getTheme } from "../../theme";
14
12
  import Icon from "../../common/Icon";
15
13
  import { useEditorContext } from "../../hooks/useMouseMove";
16
14
  import useCommonStyle from "../../commonStyle";
@@ -42,12 +40,6 @@ const EditorButton = props => {
42
40
  const [openMoreOptions, setOpenMoreOptions] = useState(false);
43
41
  const [, setIconLoaded] = useState(false);
44
42
  const classes = useCommonStyle(appTheme);
45
- const {
46
- theme: selectedTheme
47
- } = useEditorTheme();
48
- const {
49
- buttonTheme
50
- } = getTheme(selectedTheme);
51
43
  const {
52
44
  label,
53
45
  bgColor,
@@ -61,8 +53,7 @@ const EditorButton = props => {
61
53
  fontFamily,
62
54
  textColorHover,
63
55
  bgColorHover,
64
- borderColorHover,
65
- // buttonIcon,
56
+ buttonIcon,
66
57
  iconPosition = "start",
67
58
  borderStyle,
68
59
  borderWidth,
@@ -83,7 +74,6 @@ const EditorButton = props => {
83
74
  };
84
75
  const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
85
76
  const refURl = isTrigger ? buttonLink?.url : url;
86
- const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
87
77
  const BtnIcon = buttonIcon ? buttonIcon : null;
88
78
  windowVar.lastButtonProps = element;
89
79
  const handleTrigger = async () => {
@@ -106,7 +96,7 @@ const EditorButton = props => {
106
96
  };
107
97
  const buttonProps = handleLinkType(refURl, linkType, true,
108
98
  // button functionalities have to work on both edit mode and normal mode
109
- openInNewTab, handleTrigger, metadata, !readOnly);
99
+ openInNewTab, handleTrigger, metadata);
110
100
  const onMenuClick = val => () => {
111
101
  switch (val) {
112
102
  case "edit":
@@ -174,7 +164,6 @@ const EditorButton = props => {
174
164
  display: "inline-flex",
175
165
  color: "rgba(0, 0, 0, 0.54)",
176
166
  marginBottom: "0px !important",
177
- ...classes.buttonMoreOption,
178
167
  ...classes.buttonMoreOption3
179
168
  },
180
169
  ...btnProps,
@@ -275,14 +264,19 @@ const EditorButton = props => {
275
264
  display: "inline-block"
276
265
  },
277
266
  children: [/*#__PURE__*/_jsxs(Box, {
278
- className: `btn textAlign-${tAlign} button theme-element`,
279
267
  ref: buttonRef,
268
+ className: `btn textAlign-${tAlign}`,
280
269
  sx: {
281
270
  textDecoration: "none",
271
+ background: bgColor || "rgb(30, 75, 122)",
282
272
  borderBlockStyle: "solid",
283
- borderWidth: borderWidth !== undefined ? borderWidth : borderColor || borderColorHover ? "1px" : "0px",
273
+ borderColor: borderColor || "transparent",
274
+ borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
284
275
  ...btnSp,
285
276
  borderStyle: borderStyle || "solid",
277
+ color: `${textColor || "#FFFFFF"}`,
278
+ fontSize: textSize || "inherit",
279
+ fontFamily: fontFamily || "PoppinsRegular",
286
280
  display: "inline-flex",
287
281
  alignItems: "center",
288
282
  position: "relative",
@@ -293,21 +287,9 @@ const EditorButton = props => {
293
287
  "&:hover": {
294
288
  color: `${textColorHover || textColor || "#FFFFFF"}`,
295
289
  background: bgColorHover || bgColor || "rgb(30, 75, 122)",
296
- borderColor: borderColorHover || borderColor || "",
297
290
  "& .element-toolbar": {
298
291
  display: "flex"
299
292
  }
300
- },
301
- color: textColor ? `${textColor} !important` : "#FFFFFF",
302
- fontSize: textSize ? `${textSize}px !important` : "inherit",
303
- fontFamily: fontFamily ? `${fontFamily} !important` : "PoppinsRegular",
304
- background: `${bgColor} !important`,
305
- borderColor: `${borderColor} !important`,
306
- borderRadius: {
307
- ...getBreakPointsValue(borderRadius || buttonTheme?.borderRadius || {}, null, "overrideBorderRadius", true)
308
- },
309
- padding: {
310
- ...getTRBLBreakPoints(bannerSpacing || buttonTheme?.bannerSpacing || {})
311
293
  }
312
294
  },
313
295
  ...buttonProps,
@@ -38,8 +38,7 @@ const CarouselItem = props => {
38
38
  className: "element-toolbar hr",
39
39
  style: {
40
40
  top: "0px",
41
- left: "0px",
42
- width: "fit-content"
41
+ left: "0px"
43
42
  },
44
43
  contentEditable: false,
45
44
  children: /*#__PURE__*/_jsx(Tooltip, {
@@ -1,15 +1,11 @@
1
1
  import React, { useState } from "react";
2
- import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
2
+ import { Box, IconButton, Popover } from "@mui/material";
3
3
  import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
4
4
  import Button from "../../common/Button";
5
5
  import { colors } from "./defaultColors";
6
6
  import ColorPicker from "./colorPicker.svg";
7
- import { useSlateStatic } from "slate-react";
8
- import { Transforms } from "slate";
9
- import { useEditorContext } from "../../hooks/useMouseMove";
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) {
@@ -36,8 +32,8 @@ const SingleColorButton = ({
36
32
  width: "100%",
37
33
  display: "flex",
38
34
  alignItems: "center",
39
- padding: padding || "8px 0px"
40
- // justifyContent: "center",
35
+ padding: padding || "8px 0px",
36
+ justifyContent: "center"
41
37
  },
42
38
  children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
43
39
  onClick: handleSelect(m),
@@ -114,18 +110,12 @@ const ColorButtons = props => {
114
110
  openColorTool,
115
111
  onClose,
116
112
  onColorPickerClick,
117
- disableEditTheme,
118
113
  defaultColors = []
119
114
  } = props;
120
115
  const [row1, ...restRows] = ColorChunks([]);
121
116
  const [anchorEl, setAnchorEl] = useState(null);
122
117
  const open = Boolean(anchorEl);
123
118
  const firstRow = defaultColors?.length ? defaultColors : row1;
124
- const theme = useTheme();
125
- const editor = useSlateStatic();
126
- const {
127
- setOpenTheme
128
- } = useEditorContext();
129
119
  const handleMore = e => {
130
120
  setAnchorEl(e.currentTarget);
131
121
  };
@@ -138,7 +128,6 @@ const ColorButtons = props => {
138
128
  const handleSelect = color => () => {
139
129
  onSelect(color);
140
130
  };
141
- const colorVars = theme?.vars?.colors || {};
142
131
  return /*#__PURE__*/_jsxs(Box, {
143
132
  component: "span",
144
133
  sx: classes.colorButtons,
@@ -155,7 +144,7 @@ const ColorButtons = props => {
155
144
  activeColor: activeColor
156
145
  }, `si_btn_row1_${m}_${i}`);
157
146
  })
158
- }), /*#__PURE__*/_jsx(Popover, {
147
+ }), /*#__PURE__*/_jsxs(Popover, {
159
148
  open: open || openColorTool,
160
149
  anchorEl: anchorEl || openColorTool,
161
150
  onClose: handleClose,
@@ -169,40 +158,9 @@ const ColorButtons = props => {
169
158
  },
170
159
  sx: classes.colorPopper,
171
160
  className: "colorPopper",
172
- children: /*#__PURE__*/_jsxs(Box, {
161
+ children: [/*#__PURE__*/_jsx(Box, {
173
162
  sx: classes.colorButtonsInner,
174
- children: [Object.values(colorVars)?.length ? /*#__PURE__*/_jsxs(_Fragment, {
175
- children: [/*#__PURE__*/_jsxs(Box, {
176
- component: "div",
177
- className: "singleColorTitleWrapper",
178
- children: [/*#__PURE__*/_jsx(Typography, {
179
- variant: "subtitle2",
180
- children: "Theme colours"
181
- }), disableEditTheme ? null : /*#__PURE__*/_jsx("div", {
182
- className: "editBtn",
183
- onClick: () => {
184
- Transforms.deselect(editor, {
185
- at: editor.selection
186
- });
187
- handleClose();
188
- setOpenTheme("editThemeColor");
189
- },
190
- children: "Edit"
191
- })]
192
- }), /*#__PURE__*/_jsx(SingleColorButton, {
193
- crs: Object.values(colorVars),
194
- handleSelect: handleSelect,
195
- classes: classes,
196
- activeColor: activeColor
197
- })]
198
- }) : null, /*#__PURE__*/_jsx(Box, {
199
- component: "div",
200
- className: "singleColorTitleWrapper",
201
- children: /*#__PURE__*/_jsx(Typography, {
202
- variant: "subtitle2",
203
- children: "Custom colour"
204
- })
205
- }), restRows.map((m, i) => {
163
+ children: restRows.map((m, i) => {
206
164
  return /*#__PURE__*/_jsx(SingleColorButton, {
207
165
  id: `p2_${id}`,
208
166
  crs: m,
@@ -211,19 +169,14 @@ const ColorButtons = props => {
211
169
  classes: classes,
212
170
  activeColor: activeColor
213
171
  }, `si_btn_${m}_${i}`);
214
- }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
215
- onClick: onColorPickerClick,
216
- style: {
217
- alignSelf: "start",
218
- margin: "6px",
219
- padding: "0px"
220
- },
221
- children: /*#__PURE__*/_jsx("img", {
222
- src: ColorPicker,
223
- alt: "color wheel"
224
- })
225
- }) : null]
226
- })
172
+ })
173
+ }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
174
+ onClick: onColorPickerClick,
175
+ children: /*#__PURE__*/_jsx("img", {
176
+ src: ColorPicker,
177
+ alt: "color wheel"
178
+ })
179
+ }) : null]
227
180
  })]
228
181
  });
229
182
  };
@@ -60,28 +60,4 @@
60
60
  padding: 0 15px !important;
61
61
  width: 60px !important;
62
62
  flex-shrink: 0;
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
- }
63
+ }
@@ -1,14 +1,13 @@
1
1
  import React, { useState } from "react";
2
2
  import { ReactEditor } from "slate-react";
3
- import { IconButton, Tooltip, Box, Popover, useTheme } from "@mui/material";
3
+ import ColorPickerTool from "react-gcolor-picker";
4
+ import { IconButton, Tooltip, Box, Popover } from "@mui/material";
4
5
  import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
5
6
  import ColorButtons from "./ColorButtons";
6
7
  import ColorPickerStyles from "./Styles";
7
8
  import colorWheel from "./colorWheel.png";
8
9
  import "./ColorPicker.css";
9
10
  import { useEditorContext } from "../../hooks/useMouseMove";
10
- import CustomColorPicker from "../../common/CustomColorPicker";
11
- import { getSelectedElementColor } from "../../utils/helper";
12
11
  import { jsx as _jsx } from "react/jsx-runtime";
13
12
  import { Fragment as _Fragment } from "react/jsx-runtime";
14
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,8 +25,7 @@ const ColorPicker = props => {
26
25
  classes,
27
26
  forMiniTool,
28
27
  openColorTool,
29
- closeColorTool,
30
- type
28
+ closeColorTool
31
29
  } = props;
32
30
  const {
33
31
  theme
@@ -36,7 +34,6 @@ const ColorPicker = props => {
36
34
  const [anchorEl, setAnchorEl] = useState(null);
37
35
  const open = Boolean(anchorEl);
38
36
  const pickerStyles = ColorPickerStyles(theme);
39
- const muiTheme = useTheme();
40
37
  const onOpen = e => {
41
38
  e.preventDefault();
42
39
  setAnchorEl(e.currentTarget);
@@ -61,7 +58,7 @@ const ColorPicker = props => {
61
58
  setAnchorEl(null);
62
59
  setSelection(null);
63
60
  };
64
- const activeColor = type === "textColor" ? getSelectedElementColor(editor, format, muiTheme) : activeMark(editor, format) || DEFAULT_COLOR[format];
61
+ const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
65
62
  return /*#__PURE__*/_jsxs(_Fragment, {
66
63
  children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
67
64
  title: title,
@@ -99,10 +96,10 @@ const ColorPicker = props => {
99
96
  horizontal: "top"
100
97
  },
101
98
  sx: classes.colorPickerPopup,
102
- children: /*#__PURE__*/_jsx(CustomColorPicker, {
99
+ children: /*#__PURE__*/_jsx(ColorPickerTool, {
103
100
  gradient: true,
104
- onChange: handleFormSubmit,
105
- color: activeColor
101
+ value: activeColor,
102
+ onChange: handleFormSubmit
106
103
  })
107
104
  })]
108
105
  });
@@ -20,26 +20,24 @@ const ColorPickerStyles = theme => ({
20
20
  background: `${theme?.palette?.editor?.miniToolBarBackground}`,
21
21
  border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
22
22
  borderRadius: "7px !important",
23
- padding: "0px 10px",
24
- "@media only screen and (max-width: 600px)": {
23
+ padding: "0px 5px",
24
+ '@media only screen and (max-width: 600px)': {
25
25
  marginTop: "-40px"
26
26
  }
27
27
  }
28
28
  },
29
29
  colorButtonSingle: {
30
- border: "1.5px solid #DCE4EC !important",
31
30
  "&.active": {
32
- // "&:before": {
33
- // content: '" "',
34
- // position: "absolute",
35
- // top: "-4px",
36
- // left: "-4px",
37
- // width: "calc(100% + 8px)",
38
- // height: "calc(100% + 8px)",
39
- // border: "2px solid #2563EB",
40
- // borderRadius: "50%",
41
- // },
42
- outline: "2px solid #2563EB"
31
+ "&:before": {
32
+ content: '" "',
33
+ position: "absolute",
34
+ top: "-4px",
35
+ left: "-4px",
36
+ width: "calc(100% + 8px)",
37
+ height: "calc(100% + 8px)",
38
+ border: "2px solid #2563EB",
39
+ borderRadius: "50%"
40
+ }
43
41
  }
44
42
  },
45
43
  colorButtonsInner: {
@@ -61,7 +59,7 @@ const ColorPickerStyles = theme => ({
61
59
  width: "24px",
62
60
  height: "24px",
63
61
  margin: "0px 4px",
64
- border: "1.5px solid #DCE4EC"
62
+ border: "unset"
65
63
  }
66
64
  },
67
65
  colorPickerIcon: {