@flozy/editor 10.4.5 → 10.4.7

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 (192) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +134 -18
  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 +26 -10
  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 +482 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +513 -0
  18. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +27 -11
  19. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +29 -9
  20. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +17 -6
  21. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +4 -3
  22. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  23. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  24. package/dist/Editor/Elements/Embed/Image.js +3 -2
  25. package/dist/Editor/Elements/Embed/Video.js +1 -1
  26. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  27. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  28. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  29. package/dist/Editor/Elements/Form/Form.js +184 -171
  30. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  31. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  32. package/dist/Editor/Elements/Form/FormField.js +13 -6
  33. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  34. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
  35. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  36. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  37. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  38. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  39. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  40. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  41. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  42. package/dist/Editor/Elements/List/CheckList.js +3 -2
  43. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  44. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  45. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  46. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  47. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  48. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  49. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  50. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  51. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  52. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  53. package/dist/Editor/Elements/Table/Styles.js +7 -0
  54. package/dist/Editor/Elements/Table/Table.js +3 -3
  55. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  56. package/dist/Editor/Elements/Title/title.js +6 -6
  57. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  58. package/dist/Editor/MiniEditor.js +2 -1
  59. package/dist/Editor/Styles/EditorStyles.js +5 -5
  60. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  61. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  62. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  63. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  64. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  67. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  68. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  69. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  70. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  71. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  72. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  73. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  74. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  75. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  76. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  77. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  78. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  79. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  80. package/dist/Editor/common/Checkbox/index.js +46 -0
  81. package/dist/Editor/common/Checkbox/styles.js +45 -0
  82. package/dist/Editor/common/ColorPickerButton.js +41 -16
  83. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  84. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  85. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  86. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  87. package/dist/Editor/common/CustomSelect.js +43 -0
  88. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  89. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  90. package/dist/Editor/common/Icon.js +31 -1
  91. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  92. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  93. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
  94. package/dist/Editor/common/LinkSettings/index.js +82 -80
  95. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  96. package/dist/Editor/common/LinkSettings/style.js +209 -74
  97. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  98. package/dist/Editor/common/RadioGroup/index.js +48 -0
  99. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  100. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  101. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  102. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  103. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  104. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  105. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  114. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  115. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  116. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  117. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  118. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  119. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  120. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  121. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  122. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  123. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  124. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  125. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  126. package/dist/Editor/common/RnD/index.js +67 -38
  127. package/dist/Editor/common/Select/index.js +44 -5
  128. package/dist/Editor/common/Select/styles.js +30 -2
  129. package/dist/Editor/common/Shorthands/elements.js +65 -11
  130. package/dist/Editor/common/SnackBar/index.js +43 -0
  131. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  132. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  133. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  134. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  144. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  145. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  146. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  147. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  148. package/dist/Editor/common/Uploader.js +16 -0
  149. package/dist/Editor/common/iconListV2.js +177 -6
  150. package/dist/Editor/common/iconslist.js +24 -0
  151. package/dist/Editor/commonStyle.js +186 -62
  152. package/dist/Editor/helper/index.js +5 -1
  153. package/dist/Editor/helper/textIndeces.js +58 -0
  154. package/dist/Editor/helper/theme.js +203 -2
  155. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  156. package/dist/Editor/hooks/useMouseMove.js +8 -5
  157. package/dist/Editor/hooks/useTable.js +5 -4
  158. package/dist/Editor/hooks/useThemeValues.js +63 -0
  159. package/dist/Editor/plugins/withEmbeds.js +1 -1
  160. package/dist/Editor/plugins/withHTML.js +3 -1
  161. package/dist/Editor/plugins/withTable.js +1 -1
  162. package/dist/Editor/theme/ThemeList.js +50 -173
  163. package/dist/Editor/theme/index.js +149 -0
  164. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  165. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  166. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  167. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  168. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  169. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  170. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  171. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  172. package/dist/Editor/themeSettings/icons.js +60 -0
  173. package/dist/Editor/themeSettings/index.js +380 -0
  174. package/dist/Editor/themeSettings/style.js +299 -0
  175. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  176. package/dist/Editor/themeSettingsAI/index.js +355 -0
  177. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  178. package/dist/Editor/themeSettingsAI/style.js +332 -0
  179. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  180. package/dist/Editor/utils/accordion.js +14 -4
  181. package/dist/Editor/utils/button.js +1 -17
  182. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  183. package/dist/Editor/utils/draftToSlate.js +3 -2
  184. package/dist/Editor/utils/events.js +50 -6
  185. package/dist/Editor/utils/font.js +40 -37
  186. package/dist/Editor/utils/form.js +4 -4
  187. package/dist/Editor/utils/formfield.js +9 -2
  188. package/dist/Editor/utils/helper.js +210 -26
  189. package/dist/Editor/utils/insertAppHeader.js +1 -1
  190. package/dist/Editor/utils/signature.js +2 -9
  191. package/dist/Editor/utils/updateFormName.js +22 -0
  192. package/package.json +4 -4
@@ -1,8 +1,8 @@
1
1
  import React, { useMemo, useState } from "react";
2
2
  import { Grid, Button, Popover } from "@mui/material";
3
- import ColorPickerTool from "react-gcolor-picker";
4
3
  import { colors } from "../Elements/Color Picker/defaultColors";
5
4
  import SwipeableDrawerComponent from "./SwipeableDrawer";
5
+ import CustomColorPicker from "./CustomColorPicker";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -12,7 +12,10 @@ const ColorPickerToolComponent = ({
12
12
  onSave = () => {},
13
13
  recentColors = [],
14
14
  hideGradient,
15
- handleClose
15
+ handleClose,
16
+ closeDrawer,
17
+ hideThemeColors,
18
+ disableEditTheme
16
19
  }) => {
17
20
  const [color, setColor] = useState(value);
18
21
  const handleSave = () => {
@@ -32,26 +35,32 @@ const ColorPickerToolComponent = ({
32
35
  return /*#__PURE__*/_jsxs(Grid, {
33
36
  item: true,
34
37
  xs: 12,
38
+ style: {
39
+ position: "relative"
40
+ },
35
41
  children: [/*#__PURE__*/_jsx("div", {
36
- children: /*#__PURE__*/_jsx(ColorPickerTool, {
42
+ style: {
43
+ minHeight: "460px"
44
+ },
45
+ children: /*#__PURE__*/_jsx(CustomColorPicker, {
37
46
  gradient: hideGradient ? false : true,
38
- value: color,
47
+ color: color,
39
48
  onChange: handleColorChange,
40
- defaultColors: initialColors
49
+ recentColors: recentColors,
50
+ defaultColors: initialColors,
51
+ closeDrawer: closeDrawer,
52
+ hideThemeColors: hideThemeColors,
53
+ disableEditTheme: disableEditTheme
41
54
  })
42
55
  }), /*#__PURE__*/_jsxs("div", {
43
- style: {
44
- display: "flex",
45
- justifyContent: "end",
46
- margin: "8px"
47
- },
56
+ className: "colorPickerActionBtns",
48
57
  children: [/*#__PURE__*/_jsx(Button, {
49
58
  onClick: handleClose,
50
- className: "secondaryBtn",
59
+ className: "cancelBtn",
51
60
  children: "Cancel"
52
61
  }), /*#__PURE__*/_jsx(Button, {
53
62
  onClick: handleSave,
54
- className: "primaryBtn",
63
+ className: "confirmBtn",
55
64
  children: "Save"
56
65
  })]
57
66
  })]
@@ -64,7 +73,11 @@ const ColorPickerButton = props => {
64
73
  defaultColors = [],
65
74
  classes = {},
66
75
  recentColors = [],
67
- hideGradient
76
+ hideGradient,
77
+ children,
78
+ handleClose: closeDrawer,
79
+ hideThemeColors,
80
+ disableEditTheme
68
81
  } = props;
69
82
  const [anchorEl, setAnchorEl] = useState(null);
70
83
  const open = Boolean(anchorEl);
@@ -76,7 +89,13 @@ const ColorPickerButton = props => {
76
89
  setAnchorEl(null);
77
90
  };
78
91
  return /*#__PURE__*/_jsxs(_Fragment, {
79
- children: [/*#__PURE__*/_jsx(Button, {
92
+ children: [children ? /*#__PURE__*/_jsx("div", {
93
+ onClick: handleColorPicker,
94
+ style: {
95
+ cursor: "pointer"
96
+ },
97
+ children: children
98
+ }) : /*#__PURE__*/_jsx(Button, {
80
99
  style: {
81
100
  background: value,
82
101
  height: "22px",
@@ -103,7 +122,10 @@ const ColorPickerButton = props => {
103
122
  onSave: onSave,
104
123
  recentColors: recentColors,
105
124
  hideGradient: hideGradient,
106
- handleClose: handleClose
125
+ handleClose: handleClose,
126
+ closeDrawer: closeDrawer,
127
+ hideThemeColors: hideThemeColors,
128
+ disableEditTheme: disableEditTheme
107
129
  })
108
130
  })
109
131
  }) : /*#__PURE__*/_jsx(Popover, {
@@ -129,7 +151,10 @@ const ColorPickerButton = props => {
129
151
  onSave: onSave,
130
152
  recentColors: recentColors,
131
153
  hideGradient: hideGradient,
132
- handleClose: handleClose
154
+ handleClose: handleClose,
155
+ closeDrawer: closeDrawer,
156
+ hideThemeColors: hideThemeColors,
157
+ disableEditTheme: disableEditTheme
133
158
  })
134
159
  })
135
160
  })]
@@ -0,0 +1,130 @@
1
+ import { Box, Button, Paper, Typography, useTheme } from "@mui/material";
2
+ import ColorPickerTool from "react-gcolor-picker";
3
+ import customColorPickerStyles from "./style";
4
+ import { colors } from "../../Elements/Color Picker/defaultColors";
5
+ import { useCallback, useMemo, useState } from "react";
6
+ import { useEditorContext } from "../../hooks/useMouseMove";
7
+ import { getVariableValue } from "../../helper/theme";
8
+ import { getSelectedColor } from "../../utils/helper";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ const getColors = (colors, colorTab, key) => {
12
+ const newColors = [...new Set(colors)];
13
+ const solidColors = [];
14
+ const gradientColors = [];
15
+ newColors.forEach(color => {
16
+ if (color && color.includes("gradient")) {
17
+ gradientColors.push(color);
18
+ } else {
19
+ solidColors.push(color);
20
+ }
21
+ });
22
+ const showGradientColors = colorTab === "gradient" && key !== "themeColors";
23
+ return showGradientColors ? gradientColors : solidColors;
24
+ };
25
+ function CustomColorPicker(props) {
26
+ const {
27
+ gradient,
28
+ color,
29
+ onChange: onChangeColor,
30
+ defaultColors,
31
+ recentColors,
32
+ closeDrawer,
33
+ hideThemeColors,
34
+ disableEditTheme
35
+ } = props;
36
+ const [colorTab, setColorTab] = useState("solid");
37
+ const {
38
+ setOpenTheme
39
+ } = useEditorContext();
40
+ const classes = customColorPickerStyles();
41
+ const theme = useTheme();
42
+ const colorVars = theme?.vars?.colors || {};
43
+ const onChange = useCallback(color => {
44
+ onChangeColor(getSelectedColor(color, theme, hideThemeColors));
45
+ }, [onChangeColor, theme]);
46
+ const colorTabs = useMemo(() => {
47
+ const otherColors = {
48
+ title: "Recent colours",
49
+ colors: [...(recentColors || []), ...defaultColors],
50
+ onChange: onChange,
51
+ key: "recentColors"
52
+ };
53
+ const themeColors = Object.values(colorVars);
54
+ const tabs = [];
55
+ if (themeColors?.length && !hideThemeColors) {
56
+ tabs.push({
57
+ title: "Theme colours",
58
+ onEdit: () => {
59
+ setOpenTheme("editThemeColor");
60
+ closeDrawer();
61
+ },
62
+ colors: Object.values(colorVars),
63
+ onChange: onChange,
64
+ key: "themeColors"
65
+ });
66
+ }
67
+ tabs.push(otherColors);
68
+ return tabs;
69
+ }, [recentColors, defaultColors, onChange, colorVars]);
70
+ return /*#__PURE__*/_jsxs(Paper, {
71
+ component: "div",
72
+ sx: classes.customColorPickerContainer,
73
+ children: [/*#__PURE__*/_jsx(ColorPickerTool, {
74
+ gradient: gradient,
75
+ value: color?.startsWith("var") ? getVariableValue(color) : color,
76
+ onChange: onChange,
77
+ defaultColors: [],
78
+ popupWidth: "300",
79
+ onChangeTabs: tab => setColorTab(tab)
80
+ }), colorTabs.map((tab, i) => {
81
+ const {
82
+ title,
83
+ onEdit,
84
+ colors = [],
85
+ onChange,
86
+ key
87
+ } = tab;
88
+ return /*#__PURE__*/_jsxs(Box, {
89
+ component: "div",
90
+ className: "customColorPickerWrapper",
91
+ children: [/*#__PURE__*/_jsxs(Box, {
92
+ component: "div",
93
+ className: "colorTitleWrapper",
94
+ children: [/*#__PURE__*/_jsx(Typography, {
95
+ variant: "subtitle2",
96
+ children: title
97
+ }), onEdit && !disableEditTheme ? /*#__PURE__*/_jsx(Button, {
98
+ variant: "text",
99
+ className: "editBtn",
100
+ onClick: () => onEdit(tab),
101
+ children: "Edit"
102
+ }) : null]
103
+ }), /*#__PURE__*/_jsx(Box, {
104
+ component: "div",
105
+ className: "colorPickerBtnContainer",
106
+ children: getColors(colors, colorTab, key).map((colorVar, i) => {
107
+ const isSelected = colorVar === color;
108
+ return /*#__PURE__*/_jsx(Box, {
109
+ className: isSelected ? "colorPicketBtnActive" : "",
110
+ component: "div",
111
+ children: /*#__PURE__*/_jsx("button", {
112
+ style: {
113
+ background: colorVar
114
+ },
115
+ onClick: () => onChange(colorVar),
116
+ className: `colorPicketBtn`,
117
+ type: "button"
118
+ })
119
+ }, i);
120
+ })
121
+ })]
122
+ }, i);
123
+ })]
124
+ });
125
+ }
126
+ CustomColorPicker.defaultProps = {
127
+ defaultColors: [...colors],
128
+ closeDrawer: () => {}
129
+ };
130
+ export default CustomColorPicker;
@@ -0,0 +1,53 @@
1
+ const styles = () => ({
2
+ customColorPickerContainer: {
3
+ width: "300px",
4
+ boxShadow: "none",
5
+ "& .popup_tabs": {
6
+ boxShadow: "none"
7
+ },
8
+ ".customColorPickerWrapper": {
9
+ padding: "10px 0px",
10
+ margin: "0px 16px",
11
+ borderTop: "1px solid #DCE4EC"
12
+ },
13
+ ".colorTitleWrapper": {
14
+ display: "flex",
15
+ justifyContent: "space-between",
16
+ alignItems: "center",
17
+ paddingBottom: "10px",
18
+ ".MuiTypography-root": {
19
+ fontWeight: "600"
20
+ },
21
+ ".editBtn": {
22
+ textTransform: "none",
23
+ color: "#2563EB",
24
+ textDecoration: "underline",
25
+ padding: "0px",
26
+ minWidth: "unset"
27
+ }
28
+ },
29
+ ".colorPickerBtnContainer": {
30
+ display: "flex",
31
+ flexWrap: "wrap",
32
+ gap: "6px"
33
+ },
34
+ ".colorPicketBtn": {
35
+ width: "26px",
36
+ height: "26px",
37
+ outline: "none",
38
+ borderRadius: "50%",
39
+ cursor: "pointer",
40
+ border: "1.5px solid #DCE4EC",
41
+ margin: "1px"
42
+ },
43
+ ".colorPicketBtnActive": {
44
+ borderRadius: "50%",
45
+ outline: "1.5px solid rgb(83, 83, 249)",
46
+ width: "fit-content",
47
+ height: "fit-content",
48
+ display: "flex",
49
+ justifyContent: "center"
50
+ }
51
+ }
52
+ });
53
+ export default styles;
@@ -0,0 +1,94 @@
1
+ import Dialog from "@mui/material/Dialog";
2
+ import DialogTitle from "@mui/material/DialogTitle";
3
+ import DialogContent from "@mui/material/DialogContent";
4
+ import DialogActions from "@mui/material/DialogActions";
5
+ import IconButton from "@mui/material/IconButton";
6
+ import CloseIcon from "@mui/icons-material/Close";
7
+ import { Box, Typography, Button } from "@mui/material";
8
+ import SwipeableDrawer from "../SwipeableDrawer";
9
+ import customDialogStyles from "./style";
10
+ import { jsx as _jsx } from "react/jsx-runtime";
11
+ import { jsxs as _jsxs } from "react/jsx-runtime";
12
+ import { Fragment as _Fragment } from "react/jsx-runtime";
13
+ function CustomDialog(props) {
14
+ const {
15
+ handleClose,
16
+ customProps,
17
+ children,
18
+ onSubmit
19
+ } = props;
20
+ const {
21
+ isMobile
22
+ } = customProps;
23
+ const classes = customDialogStyles();
24
+ if (isMobile) {
25
+ return /*#__PURE__*/_jsx(Box, {
26
+ sx: classes.dialogContainer,
27
+ children: /*#__PURE__*/_jsxs(SwipeableDrawer, {
28
+ onClose: handleClose,
29
+ children: [/*#__PURE__*/_jsx(Typography, {
30
+ variant: "subtitle1",
31
+ gutterBottom: true,
32
+ sx: {
33
+ fontWeight: 600
34
+ },
35
+ children: "What do you want to link to?"
36
+ }), /*#__PURE__*/_jsx(Box, {
37
+ sx: classes.mobileDialogContent,
38
+ children: children
39
+ }), /*#__PURE__*/_jsx(Box, {
40
+ component: "div",
41
+ sx: classes.mobileActionBtns,
42
+ children: /*#__PURE__*/_jsx(ActionsButtons, {
43
+ classes: classes,
44
+ onCancel: handleClose,
45
+ onSave: onSubmit
46
+ })
47
+ })]
48
+ })
49
+ });
50
+ } else {
51
+ return /*#__PURE__*/_jsxs(Dialog, {
52
+ onClose: handleClose,
53
+ open: true,
54
+ sx: classes.dialogContainer,
55
+ fullWidth: true,
56
+ maxWidth: "sm",
57
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
58
+ children: "What do you want to link to?"
59
+ }), /*#__PURE__*/_jsx(IconButton, {
60
+ "aria-label": "close",
61
+ onClick: handleClose,
62
+ sx: classes.closeIcon,
63
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
64
+ }), /*#__PURE__*/_jsx(DialogContent, {
65
+ dividers: true,
66
+ children: children
67
+ }), /*#__PURE__*/_jsx(DialogActions, {
68
+ children: /*#__PURE__*/_jsx(ActionsButtons, {
69
+ classes: classes,
70
+ onCancel: handleClose,
71
+ onSave: onSubmit
72
+ })
73
+ })]
74
+ });
75
+ }
76
+ }
77
+ export default CustomDialog;
78
+ function ActionsButtons({
79
+ classes,
80
+ onCancel,
81
+ onSave
82
+ }) {
83
+ return /*#__PURE__*/_jsxs(_Fragment, {
84
+ children: [/*#__PURE__*/_jsx(Button, {
85
+ onClick: onCancel,
86
+ sx: classes.closeBtn,
87
+ children: "Cancel"
88
+ }), /*#__PURE__*/_jsx(Button, {
89
+ onClick: onSave,
90
+ sx: classes.saveBtn,
91
+ children: "Save"
92
+ })]
93
+ });
94
+ }
@@ -0,0 +1,67 @@
1
+ const styles = () => ({
2
+ dialogContainer: {
3
+ "& .MuiDialogContent-root": {
4
+ padding: "0px 20px"
5
+ },
6
+ "& .MuiDialogActions-root": {
7
+ padding: "10px"
8
+ },
9
+ "& .MuiTypography-h6": {
10
+ fontWeight: 600,
11
+ fontSize: "16px",
12
+ paddingRight: "20px"
13
+ },
14
+ "& .MuiGrid-container": {
15
+ marginTop: "0px"
16
+ },
17
+ "& .MuiGrid-item": {
18
+ padding: "14px"
19
+ }
20
+ },
21
+ saveBtn: {
22
+ color: "#fff",
23
+ background: "#2563EB",
24
+ fontSize: "14px",
25
+ fontWeight: 500,
26
+ padding: "4px 24px",
27
+ textTransform: "none",
28
+ "&:hover": {
29
+ color: "#fff",
30
+ background: "#2563EB"
31
+ }
32
+ },
33
+ closeBtn: {
34
+ backgroundColor: "#F4F6F9",
35
+ color: "#64748B",
36
+ fontSize: "14px",
37
+ fontWeight: 500,
38
+ padding: "4px 22px",
39
+ textTransform: "none",
40
+ border: "1px solid #D8DDE1",
41
+ "&:hover": {
42
+ border: "1px solid #64748B"
43
+ }
44
+ },
45
+ closeIcon: {
46
+ position: "absolute",
47
+ right: 8,
48
+ top: 8,
49
+ color: theme => theme.palette.grey[500]
50
+ },
51
+ gridDivider: {
52
+ borderRight: "1px solid rgba(0, 0, 0, 0.12)"
53
+ },
54
+ mobileActionBtns: {
55
+ display: "flex",
56
+ justifyContent: "flex-end",
57
+ gap: "8px",
58
+ paddingTop: "14px",
59
+ marginTop: "14px",
60
+ borderTop: theme => `1px solid ${theme.palette.grey[300]}`
61
+ },
62
+ mobileDialogContent: {
63
+ borderTop: theme => `1px solid ${theme.palette.grey[300]}`,
64
+ paddingTop: "14px"
65
+ }
66
+ });
67
+ export default styles;
@@ -0,0 +1,43 @@
1
+ import { MenuItem, Select } from "@mui/material";
2
+ import { fontFamilyMap } from "../utils/font";
3
+ import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ function CustomSelect(props) {
6
+ const {
7
+ classes,
8
+ onChange,
9
+ options = [],
10
+ value
11
+ } = props;
12
+ return /*#__PURE__*/_jsx(Select, {
13
+ fullWidth: true,
14
+ value: value,
15
+ onChange: onChange,
16
+ className: "editor-dd",
17
+ style: {
18
+ fontFamily: fontFamilyMap[value],
19
+ width: "100%",
20
+ height: "36px",
21
+ borderRadius: "10px",
22
+ fontSize: "14px"
23
+ },
24
+ MenuProps: {
25
+ PaperProps: {
26
+ sx: classes?.textOptions
27
+ }
28
+ },
29
+ sx: classes.textFormatSelect,
30
+ IconComponent: KeyboardArrowDownRoundedIcon,
31
+ children: options.map((option, i) => {
32
+ return /*#__PURE__*/_jsx(MenuItem, {
33
+ value: option.value,
34
+ style: {
35
+ fontFamily: option.text || "inherit"
36
+ },
37
+ sx: classes.textFormatSelectOptions,
38
+ children: option?.label || option?.text
39
+ }, i);
40
+ })
41
+ });
42
+ }
43
+ export default CustomSelect;
@@ -7,7 +7,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
7
7
  import { Transforms } from "slate";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
- const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
10
+ const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
11
11
  const DragHandleStyle = fromPopper => {
12
12
  const handleDragStyle = fromPopper ? {
13
13
  position: "absolute",
@@ -19,6 +19,8 @@ const FontLoader = props => {
19
19
  const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
20
20
  let currentIndex = 0;
21
21
  let retryCount = 0;
22
+ // let hideLoaderOn = 30;
23
+
22
24
  const loadNextBatch = () => {
23
25
  try {
24
26
  if (currentIndex >= families?.length) {
@@ -79,6 +81,7 @@ const FontLoader = props => {
79
81
  // console.log(err);
80
82
  // setLoading(false);
81
83
  });
84
+ // setLoading(true);
82
85
  } else {
83
86
  function correctFontArray(fontString) {
84
87
  let fontsArray = fontString?.split(",");
@@ -45,8 +45,19 @@ import TrashIcon from "../assets/svg/TrashCanIcon";
45
45
  import DataTableIcon from "../assets/svg/DataTableIcon";
46
46
  import ChervDown from "../assets/svg/ChervDown";
47
47
  import ChervUp from "../assets/svg/ChervUp";
48
+ import ResetIconNew from "../assets/svg/ResetIconNew";
48
49
  import { jsx as _jsx } from "react/jsx-runtime";
49
50
  import { jsxs as _jsxs } from "react/jsx-runtime";
51
+ const HeadingIcon = ({
52
+ variant
53
+ }) => {
54
+ return /*#__PURE__*/_jsx("div", {
55
+ style: {
56
+ color: "#64748B"
57
+ },
58
+ children: variant
59
+ });
60
+ };
50
61
  const iconList = {
51
62
  fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
52
63
  size: 20
@@ -79,6 +90,24 @@ const iconList = {
79
90
  size: 18,
80
91
  fill: "#64748B"
81
92
  }),
93
+ headingFour: /*#__PURE__*/_jsx(HeadingIcon, {
94
+ variant: "H4"
95
+ }),
96
+ headingFive: /*#__PURE__*/_jsx(HeadingIcon, {
97
+ variant: "H5"
98
+ }),
99
+ headingSix: /*#__PURE__*/_jsx(HeadingIcon, {
100
+ variant: "H6"
101
+ }),
102
+ paragraphOne: /*#__PURE__*/_jsx(HeadingIcon, {
103
+ variant: "P1"
104
+ }),
105
+ paragraphTwo: /*#__PURE__*/_jsx(HeadingIcon, {
106
+ variant: "P2"
107
+ }),
108
+ paragraphThree: /*#__PURE__*/_jsx(HeadingIcon, {
109
+ variant: "P3"
110
+ }),
82
111
  blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
83
112
  size: 20,
84
113
  fill: "#64748B",
@@ -329,7 +358,8 @@ const iconList = {
329
358
  stroke: "#64748B",
330
359
  color: "#64748B"
331
360
  }
332
- })
361
+ }),
362
+ resetIconNew: /*#__PURE__*/_jsx(ResetIconNew, {})
333
363
  };
334
364
  export const icons = {
335
365
  ...iconList
@@ -17,7 +17,7 @@ const IMAGE_SLECTOR_OPTIONS = {
17
17
  };
18
18
  const TAB_SHOW = {
19
19
  Image: ["upload", "choose", "addLink"],
20
- Video: ["addLink"],
20
+ Video: ["upload", "addLink"],
21
21
  Embed: ["addLink"],
22
22
  Document: ["addLink", "upload"]
23
23
  };
@@ -35,7 +35,7 @@ const ImageSelector = props => {
35
35
  customProps
36
36
  } = props;
37
37
  const translation = customProps?.translation;
38
- const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "addLink");
38
+ const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "Video" ? "upload" : "addLink");
39
39
  const [image, setImage] = useState(value || "");
40
40
  const handleTabChange = (e, newValue) => {
41
41
  setImage("");
@@ -76,7 +76,7 @@ const ImageSelectorStyles = theme => ({
76
76
  background: theme?.palette?.editor?.deviderBgColor,
77
77
  "@media only screen and (min-width: 899px)": {
78
78
  margin: "0px 24px",
79
- width: 'calc(100% - 48px)'
79
+ width: "calc(100% - 48px)"
80
80
  }
81
81
  },
82
82
  "& .primaryBtn": {
@@ -104,12 +104,6 @@ const ImageSelectorStyles = theme => ({
104
104
  marginRight: "8px !important"
105
105
  },
106
106
  "& .MuiGrid-root": {
107
- "&::-webkit-scrollbar-thumb": {
108
- background: `none !important`
109
- },
110
- "&::-webkit-scrollbar-track": {
111
- visibility: "hidden"
112
- },
113
107
  "&::-webkit-scrollbar-thumb": {
114
108
  background: `${theme?.palette?.editor?.brainPopupScroll} !important`
115
109
  },
@@ -118,10 +112,10 @@ const ImageSelectorStyles = theme => ({
118
112
  }
119
113
  },
120
114
  "& .MuiImageList-root": {
121
- margin: '0px'
115
+ margin: "0px"
122
116
  },
123
117
  "& .MuiDialogContent-root": {
124
- padding: '20px 24px 5px 24px'
118
+ padding: "20px 24px 5px 24px"
125
119
  }
126
120
  },
127
121
  titleTypo: {