@flozy/editor 10.3.0 → 10.3.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 (162) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +14 -128
  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 +7 -30
  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/Components/MultiSelect.js +28 -30
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +7 -9
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  20. package/dist/Editor/Elements/Embed/Video.js +1 -1
  21. package/dist/Editor/Elements/Form/Form.js +3 -1
  22. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
  23. package/dist/Editor/Elements/Form/FormField.js +2 -3
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +30 -31
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  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 +26 -13
  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/RnD/ElementOptions/Actions.js +5 -4
  69. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  70. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  80. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  81. package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
  82. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
  83. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  84. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  85. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  86. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  87. package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -321
  88. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  89. package/dist/Editor/common/RnD/index.js +11 -25
  90. package/dist/Editor/common/Select/index.js +7 -44
  91. package/dist/Editor/common/Select/styles.js +2 -30
  92. package/dist/Editor/common/Shorthands/elements.js +0 -54
  93. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  94. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  95. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  96. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  99. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  100. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  101. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  102. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  103. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  104. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  105. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  106. package/dist/Editor/common/Uploader.js +0 -16
  107. package/dist/Editor/common/iconListV2.js +0 -76
  108. package/dist/Editor/common/iconslist.js +0 -21
  109. package/dist/Editor/commonStyle.js +61 -116
  110. package/dist/Editor/helper/index.js +0 -4
  111. package/dist/Editor/helper/theme.js +2 -203
  112. package/dist/Editor/hooks/useMouseMove.js +3 -9
  113. package/dist/Editor/hooks/useTable.js +4 -5
  114. package/dist/Editor/plugins/withEmbeds.js +1 -1
  115. package/dist/Editor/plugins/withHTML.js +1 -3
  116. package/dist/Editor/plugins/withTable.js +1 -1
  117. package/dist/Editor/theme/ThemeList.js +173 -50
  118. package/dist/Editor/utils/SlateUtilityFunctions.js +36 -158
  119. package/dist/Editor/utils/accordion.js +4 -14
  120. package/dist/Editor/utils/button.js +17 -1
  121. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  122. package/dist/Editor/utils/draftToSlate.js +2 -3
  123. package/dist/Editor/utils/events.js +6 -50
  124. package/dist/Editor/utils/font.js +37 -40
  125. package/dist/Editor/utils/helper.js +30 -143
  126. package/dist/Editor/utils/insertAppHeader.js +1 -1
  127. package/dist/Editor/utils/signature.js +9 -2
  128. package/package.json +4 -4
  129. package/dist/Editor/Elements/FreeGrid/helper.js +0 -113
  130. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  131. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  132. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  133. package/dist/Editor/common/Checkbox/index.js +0 -46
  134. package/dist/Editor/common/Checkbox/styles.js +0 -45
  135. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  136. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  137. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  138. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  139. package/dist/Editor/common/CustomSelect.js +0 -43
  140. package/dist/Editor/common/RadioGroup/index.js +0 -48
  141. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  142. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  144. package/dist/Editor/helper/textIndeces.js +0 -58
  145. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  146. package/dist/Editor/hooks/useThemeValues.js +0 -63
  147. package/dist/Editor/theme/index.js +0 -149
  148. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  149. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  150. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  151. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  152. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  153. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  154. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  155. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  156. package/dist/Editor/themeSettings/icons.js +0 -60
  157. package/dist/Editor/themeSettings/index.js +0 -380
  158. package/dist/Editor/themeSettings/style.js +0 -299
  159. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  160. package/dist/Editor/themeSettingsAI/index.js +0 -355
  161. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  162. package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -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);
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,
@@ -33,8 +33,7 @@ const MultiSelectWithPopover = props => {
33
33
  onChange,
34
34
  onUpdate,
35
35
  property,
36
- wrapColumn = false,
37
- translation
36
+ wrapColumn = false
38
37
  } = props;
39
38
  const [anchorEl, setAnchorEl] = useState(null);
40
39
  const [anchorElOption, setAnchorElOption] = useState(null);
@@ -171,11 +170,11 @@ const MultiSelectWithPopover = props => {
171
170
  variant: "filled",
172
171
  sx: {
173
172
  backgroundColor: option?.color,
174
- color: "#0F172A",
173
+ color: '#0F172A',
175
174
  "& .MuiChip-deleteIcon": {
176
175
  flexShrink: 0,
177
176
  "& path": {
178
- stroke: "#0F172A !important"
177
+ stroke: '#0F172A !important'
179
178
  }
180
179
  },
181
180
  "&:hover": {
@@ -222,9 +221,9 @@ const MultiSelectWithPopover = props => {
222
221
  maxHeight: "250px",
223
222
  overflowY: "auto",
224
223
  overflowX: "hidden",
225
- pr: "12px",
226
- pl: "12px",
227
- marginTop: "12px",
224
+ pr: '12px',
225
+ pl: '12px',
226
+ marginTop: '12px',
228
227
  ...customScrollStyles
229
228
  }
230
229
  },
@@ -282,11 +281,11 @@ const MultiSelectWithPopover = props => {
282
281
  "& .MuiSvgIcon-root": {
283
282
  fontSize: 20
284
283
  },
285
- "& rect": {
284
+ '& rect': {
286
285
  fill: theme?.palette?.editor?.closeButtonSvgStroke
287
286
  },
288
- "&:hover": {
289
- backgroundColor: "transparent"
287
+ '&:hover': {
288
+ backgroundColor: 'transparent'
290
289
  }
291
290
  },
292
291
  children: /*#__PURE__*/_jsx(Icon, {
@@ -297,9 +296,9 @@ const MultiSelectWithPopover = props => {
297
296
  },
298
297
  sx: {
299
298
  backgroundColor: "transparent",
300
- fontFamily: "Inter",
299
+ fontFamily: 'Inter',
301
300
  fontWeight: 400,
302
- fontSize: "12px"
301
+ fontSize: '12px'
303
302
  },
304
303
  placeholder: "Create new one..."
305
304
  }),
@@ -315,11 +314,11 @@ const MultiSelectWithPopover = props => {
315
314
  deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
316
315
  sx: {
317
316
  backgroundColor: option?.color,
318
- color: "#0F172A",
317
+ color: '#0F172A',
319
318
  "& .MuiChip-deleteIcon": {
320
319
  flexShrink: 0,
321
320
  "& path": {
322
- stroke: "#0F172A !important"
321
+ stroke: '#0F172A !important'
323
322
  }
324
323
  },
325
324
  "&:hover": {
@@ -329,13 +328,13 @@ const MultiSelectWithPopover = props => {
329
328
  }, index))
330
329
  }), /*#__PURE__*/_jsx(Divider, {
331
330
  sx: {
332
- mt: "12px",
331
+ mt: '12px',
333
332
  borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
334
333
  boxShadow: theme?.palette?.editor?.dividerDropShadow
335
334
  }
336
335
  }), /*#__PURE__*/_jsx(Box, {
337
336
  sx: {
338
- pl: "4px"
337
+ pl: '4px'
339
338
  },
340
339
  children: /*#__PURE__*/_jsxs(List, {
341
340
  sx: {
@@ -346,11 +345,11 @@ const MultiSelectWithPopover = props => {
346
345
  children: [/*#__PURE__*/_jsx(Typography, {
347
346
  sx: {
348
347
  mb: 1,
349
- pl: "8px",
348
+ pl: '8px',
350
349
  color: theme?.palette?.editor?.secondaryTextColor,
351
- fontFamily: "Inter",
350
+ fontFamily: 'Inter',
352
351
  fontWeight: 400,
353
- fontSize: "12px"
352
+ fontSize: '12px'
354
353
  },
355
354
  children: "Choose an option or create one"
356
355
  }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
@@ -363,19 +362,19 @@ const MultiSelectWithPopover = props => {
363
362
  sx: {
364
363
  paddingTop: "4px",
365
364
  paddingBottom: "4px",
366
- justifyContent: "space-between",
367
- "&:hover": {
368
- "& path": {
365
+ justifyContent: 'space-between',
366
+ '&:hover': {
367
+ '& path': {
369
368
  stroke: theme?.palette?.editor?.activeColor
370
369
  },
371
- borderRadius: "12px"
370
+ borderRadius: '12px'
372
371
  }
373
372
  },
374
373
  children: [/*#__PURE__*/_jsx(Chip, {
375
374
  label: option?.value,
376
375
  sx: {
377
376
  backgroundColor: option?.color,
378
- color: "#0F172A",
377
+ color: '#0F172A',
379
378
  fontWeight: 500,
380
379
  fontSize: "12px",
381
380
  fontFamily: "Inter",
@@ -389,11 +388,11 @@ const MultiSelectWithPopover = props => {
389
388
  }), /*#__PURE__*/_jsx(IconButton, {
390
389
  size: "small",
391
390
  sx: {
392
- "& path": {
391
+ '& path': {
393
392
  stroke: theme?.palette?.editor?.closeButtonSvgStroke
394
393
  },
395
- "&:hover": {
396
- backgroundColor: "transparent"
394
+ '&:hover': {
395
+ backgroundColor: 'transparent'
397
396
  }
398
397
  },
399
398
  onClick: e => handleEditOption(e, index),
@@ -422,7 +421,7 @@ const MultiSelectWithPopover = props => {
422
421
  label: `${inputValue}`,
423
422
  sx: {
424
423
  backgroundColor: chipColor,
425
- color: "#0F172A",
424
+ color: '#0F172A',
426
425
  fontWeight: 500,
427
426
  fontSize: "12px",
428
427
  fontFamily: "Inter",
@@ -443,8 +442,7 @@ const MultiSelectWithPopover = props => {
443
442
  anchorEl: anchorElOption,
444
443
  mode: mode,
445
444
  onClose: onClose,
446
- onEvent: onEditOption,
447
- translation: translation
445
+ onEvent: onEditOption
448
446
  }) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
449
447
  message: "Option already selected!",
450
448
  setShowSnackBar: setShowSnackBar