@flozy/editor 10.3.9 → 10.4.1

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