@flozy/editor 10.3.8 → 10.4.0

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 (189) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +18 -134
  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/ColumnView.js +2 -4
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +8 -23
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +2 -5
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  21. package/dist/Editor/Elements/Embed/Image.js +2 -3
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  25. package/dist/Editor/Elements/Form/Form.js +171 -184
  26. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  27. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  28. package/dist/Editor/Elements/Form/FormField.js +6 -13
  29. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  30. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +32 -40
  31. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  32. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/styles.js +7 -75
  35. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  36. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  37. package/dist/Editor/Elements/List/CheckList.js +2 -3
  38. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  39. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  40. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  41. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  42. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  43. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  44. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  45. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  46. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  47. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  48. package/dist/Editor/Elements/Table/Styles.js +0 -7
  49. package/dist/Editor/Elements/Table/Table.js +3 -3
  50. package/dist/Editor/Elements/Table/TableCell.js +8 -31
  51. package/dist/Editor/Elements/Title/title.js +6 -6
  52. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  53. package/dist/Editor/MiniEditor.js +1 -2
  54. package/dist/Editor/Styles/EditorStyles.js +5 -5
  55. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  56. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  57. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  58. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  59. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  64. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  65. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  66. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  67. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  68. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  69. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  70. package/dist/Editor/common/ColorPickerButton.js +16 -41
  71. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  72. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  73. package/dist/Editor/common/Icon.js +1 -31
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  75. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  76. package/dist/Editor/common/LinkSettings/NavComponents.js +56 -61
  77. package/dist/Editor/common/LinkSettings/index.js +81 -82
  78. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  79. package/dist/Editor/common/LinkSettings/style.js +74 -209
  80. package/dist/Editor/common/RnD/ElementOptions/Actions.js +15 -13
  81. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  82. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  83. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  85. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  95. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -146
  96. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  97. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -120
  98. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  99. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  100. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  101. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  102. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  103. package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
  104. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  105. package/dist/Editor/common/RnD/index.js +39 -68
  106. package/dist/Editor/common/Select/index.js +5 -44
  107. package/dist/Editor/common/Select/styles.js +2 -30
  108. package/dist/Editor/common/Shorthands/elements.js +11 -65
  109. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  110. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  111. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  112. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  123. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  124. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  125. package/dist/Editor/common/Uploader.js +0 -16
  126. package/dist/Editor/common/iconListV2.js +6 -177
  127. package/dist/Editor/common/iconslist.js +0 -24
  128. package/dist/Editor/commonStyle.js +62 -186
  129. package/dist/Editor/helper/index.js +1 -5
  130. package/dist/Editor/helper/theme.js +2 -203
  131. package/dist/Editor/hooks/useMouseMove.js +5 -8
  132. package/dist/Editor/hooks/useTable.js +4 -5
  133. package/dist/Editor/plugins/withEmbeds.js +1 -1
  134. package/dist/Editor/plugins/withHTML.js +1 -3
  135. package/dist/Editor/plugins/withTable.js +1 -1
  136. package/dist/Editor/theme/ThemeList.js +173 -50
  137. package/dist/Editor/utils/SlateUtilityFunctions.js +46 -172
  138. package/dist/Editor/utils/accordion.js +4 -14
  139. package/dist/Editor/utils/button.js +17 -1
  140. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  141. package/dist/Editor/utils/draftToSlate.js +2 -3
  142. package/dist/Editor/utils/events.js +6 -50
  143. package/dist/Editor/utils/font.js +37 -40
  144. package/dist/Editor/utils/form.js +4 -4
  145. package/dist/Editor/utils/formfield.js +2 -9
  146. package/dist/Editor/utils/helper.js +26 -188
  147. package/dist/Editor/utils/insertAppHeader.js +1 -1
  148. package/dist/Editor/utils/signature.js +9 -2
  149. package/package.json +4 -4
  150. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  151. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  152. package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
  153. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  154. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  155. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  156. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  157. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  158. package/dist/Editor/common/Checkbox/index.js +0 -46
  159. package/dist/Editor/common/Checkbox/styles.js +0 -45
  160. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  161. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  162. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  163. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  164. package/dist/Editor/common/CustomSelect.js +0 -43
  165. package/dist/Editor/common/RadioGroup/index.js +0 -48
  166. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  167. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  168. package/dist/Editor/common/SnackBar/index.js +0 -43
  169. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  170. package/dist/Editor/helper/textIndeces.js +0 -58
  171. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  172. package/dist/Editor/hooks/useThemeValues.js +0 -63
  173. package/dist/Editor/theme/index.js +0 -149
  174. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  175. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  176. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  177. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  178. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  179. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  180. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  181. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  182. package/dist/Editor/themeSettings/icons.js +0 -60
  183. package/dist/Editor/themeSettings/index.js +0 -380
  184. package/dist/Editor/themeSettings/style.js +0 -299
  185. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  186. package/dist/Editor/themeSettingsAI/index.js +0 -355
  187. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  188. package/dist/Editor/themeSettingsAI/style.js +0 -332
  189. 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: {
@@ -14,8 +14,7 @@ const ColumnView = props => {
14
14
  property,
15
15
  onSelect,
16
16
  selected,
17
- readOnly,
18
- translation
17
+ readOnly
19
18
  } = props;
20
19
  const {
21
20
  type
@@ -61,8 +60,7 @@ const ColumnView = props => {
61
60
  readOnly: readOnly,
62
61
  settings: {
63
62
  wrapColumn: property?.wrapColumn
64
- },
65
- translation: translation
63
+ }
66
64
  }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
67
65
  sx: classes.root,
68
66
  open: open,
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { useDataView } from "../../Providers/DataViewProvider";
3
- import MultiSelectWithPopover from "./Components/MultiSelect";
3
+ import Select from "./Components/Select";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
5
  const MultiSelectType = props => {
6
6
  const {
@@ -10,16 +10,14 @@ const MultiSelectType = props => {
10
10
  options,
11
11
  label = "",
12
12
  readOnly,
13
- settings,
14
- translation
13
+ settings
15
14
  } = props;
16
- const {
17
- onChange,
18
- onUpdateProperty
19
- } = useDataView();
20
15
  const {
21
16
  wrapColumn
22
17
  } = settings;
18
+ const {
19
+ onChange
20
+ } = useDataView();
23
21
  const value = Array.isArray(pValue) ? pValue : [];
24
22
  const coloredValues = [...(value || [])]?.map(m => {
25
23
  return {
@@ -32,28 +30,15 @@ const MultiSelectType = props => {
32
30
  [property]: data?.filter(f => f?.value)
33
31
  });
34
32
  };
35
- const handleUpdate = data => {
36
- const updateData = {
37
- label: "Multi Select",
38
- visible: true,
39
- key: property,
40
- type: "multi-select",
41
- options: data
42
- };
43
- onUpdateProperty(updateData);
44
- };
45
- return /*#__PURE__*/_jsx(MultiSelectWithPopover, {
33
+ return /*#__PURE__*/_jsx(Select, {
34
+ className: `wrap-${wrapColumn}`,
46
35
  value: coloredValues,
47
36
  onChange: handleChange,
48
- onUpdate: handleUpdate,
49
37
  options: options,
50
38
  multiple: true,
51
39
  limitTags: 2,
52
40
  placeholder: label,
53
- disabled: readOnly,
54
- property: property,
55
- wrapColumn: wrapColumn,
56
- translation: translation
41
+ disabled: readOnly
57
42
  });
58
43
  };
59
44
  export default MultiSelectType;