@flozy/editor 1.3.7 → 1.4.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) hide show
  1. package/dist/Editor/CommonEditor.js +11 -7
  2. package/dist/Editor/Editor.css +29 -17
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +48 -13
  4. package/dist/Editor/Elements/Button/ButtonPopup.js +5 -3
  5. package/dist/Editor/Elements/Button/EditorButton.js +69 -13
  6. package/dist/Editor/Elements/ChipText/ChipText.js +7 -2
  7. package/dist/Editor/Elements/Embed/Image.js +5 -21
  8. package/dist/Editor/Elements/Embed/Video.js +2 -2
  9. package/dist/Editor/Elements/Form/Form.js +38 -17
  10. package/dist/Editor/Elements/Grid/Grid.js +7 -9
  11. package/dist/Editor/Elements/Grid/GridItem.js +14 -17
  12. package/dist/Editor/Elements/Grid/GridItemPopup.js +4 -2
  13. package/dist/Editor/Elements/Grid/GridPopup.js +3 -1
  14. package/dist/Editor/Elements/Grid/templates/default_grid.js +144 -0
  15. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +5 -1
  16. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +33 -0
  17. package/dist/Editor/Toolbar/FormatTools/Text.js +29 -0
  18. package/dist/Editor/Toolbar/FormatTools/index.js +3 -1
  19. package/dist/Editor/Toolbar/Toolbar.js +16 -9
  20. package/dist/Editor/assets/fonts/poppins/OFL.txt +93 -0
  21. package/dist/Editor/assets/fonts/poppins/Poppins-Black.ttf +0 -0
  22. package/dist/Editor/assets/fonts/poppins/Poppins-BlackItalic.ttf +0 -0
  23. package/dist/Editor/assets/fonts/poppins/Poppins-Bold.ttf +0 -0
  24. package/dist/Editor/assets/fonts/poppins/Poppins-BoldItalic.ttf +0 -0
  25. package/dist/Editor/assets/fonts/poppins/Poppins-ExtraBold.ttf +0 -0
  26. package/dist/Editor/assets/fonts/poppins/Poppins-ExtraBoldItalic.ttf +0 -0
  27. package/dist/Editor/assets/fonts/poppins/Poppins-ExtraLight.ttf +0 -0
  28. package/dist/Editor/assets/fonts/poppins/Poppins-ExtraLightItalic.ttf +0 -0
  29. package/dist/Editor/assets/fonts/poppins/Poppins-Italic.ttf +0 -0
  30. package/dist/Editor/assets/fonts/poppins/Poppins-Light.ttf +0 -0
  31. package/dist/Editor/assets/fonts/poppins/Poppins-LightItalic.ttf +0 -0
  32. package/dist/Editor/assets/fonts/poppins/Poppins-Medium.ttf +0 -0
  33. package/dist/Editor/assets/fonts/poppins/Poppins-MediumItalic.ttf +0 -0
  34. package/dist/Editor/assets/fonts/poppins/Poppins-Regular.ttf +0 -0
  35. package/dist/Editor/assets/fonts/poppins/Poppins-SemiBold.ttf +0 -0
  36. package/dist/Editor/assets/fonts/poppins/Poppins-SemiBoldItalic.ttf +0 -0
  37. package/dist/Editor/assets/fonts/poppins/Poppins-Thin.ttf +0 -0
  38. package/dist/Editor/assets/fonts/poppins/Poppins-ThinItalic.ttf +0 -0
  39. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +43 -5
  40. package/dist/Editor/common/StyleBuilder/buttonStyle.js +52 -1
  41. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +12 -12
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +1 -1
  43. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -1
  44. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +107 -0
  45. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  46. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +15 -9
  47. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +17 -12
  48. package/dist/Editor/common/StyleBuilder/formButtonStyle.js +93 -0
  49. package/dist/Editor/common/StyleBuilder/gridStyle.js +9 -0
  50. package/dist/Editor/common/StyleBuilder/index.js +2 -2
  51. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +2 -2
  52. package/dist/Editor/font.css +9 -0
  53. package/dist/Editor/service/formSubmit.js +2 -2
  54. package/dist/Editor/utils/SlateUtilityFunctions.js +2 -2
  55. package/dist/Editor/utils/customHooks/useFormat.js +11 -4
  56. package/dist/Editor/utils/font.js +3 -1
  57. package/dist/Editor/utils/grid.js +2 -8
  58. package/package.json +1 -1
@@ -12,10 +12,11 @@ import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
12
12
  import { mentionsEvent, commands } from "./utils/events";
13
13
  import withCommon from "./hooks/withCommon";
14
14
  import DialogWrapper from "./DialogWrapper";
15
- import "./Editor.css";
16
15
  import { serialize } from "./utils/serializer";
17
16
  import { getThumbnailImage } from "./helper";
18
17
  import PopupTool from "./Toolbar/PopupTool";
18
+ import "./font.css";
19
+ import "./Editor.css";
19
20
  import { jsx as _jsx } from "react/jsx-runtime";
20
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
21
22
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -74,13 +75,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
74
75
  pageProps
75
76
  } = pageSettings || {};
76
77
  const {
77
- bannerSpacing
78
+ bannerSpacing,
79
+ pageBgImage,
80
+ pageColor
78
81
  } = pageProps || {
79
82
  bannerSpacing: {
80
- left: 8,
81
- right: 8,
82
- top: 8,
83
- bottom: 8
83
+ left: 0,
84
+ right: 0,
85
+ top: 0,
86
+ bottom: 0
84
87
  }
85
88
  };
86
89
  useEffect(() => {
@@ -256,7 +259,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
256
259
  className: "editor-wrapper",
257
260
  style: {
258
261
  border: "1px solid #f3f3f3",
259
- background: pageProps?.pageColor || defaultBG || "#FFF",
262
+ backgroundImage: pageBgImage ? `url(${pageBgImage})` : "none",
263
+ backgroundColor: pageColor || defaultBG || "#FFF",
260
264
  color: pageProps?.color || "#000",
261
265
  paddingLeft: `${bannerSpacing?.left}px`,
262
266
  paddingRight: `${bannerSpacing?.right}px`,
@@ -1,5 +1,10 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
-
1
+ .editor-t-wrapper {
2
+ font-family: "PoppinsRegular", "Helvetica", "Arial", sans-serif;
3
+ }
4
+ .editor-t-wrapper strong,
5
+ .editor-t-wrapper strong * {
6
+ font-family: "PoppinsBold", "Helvetica", "Arial", sans-serif;
7
+ }
3
8
  .ml-1 {
4
9
  margin-left: 10px;
5
10
  }
@@ -33,8 +38,9 @@ blockquote {
33
38
  .editor-wrapper .btnActive {
34
39
  opacity: 1;
35
40
  }
41
+
36
42
  .editor-wrapper {
37
- font-family: "Helvetica", "Arial", sans-serif;
43
+
38
44
  background: #ffffff;
39
45
  min-height: 400px;
40
46
  height: fit-content;
@@ -102,11 +108,11 @@ blockquote {
102
108
  }
103
109
 
104
110
  .grid-container-toolbar {
105
- right: -52px;
111
+ right: -32px;
106
112
  }
107
113
 
108
114
  .grid-item-toolbar {
109
- left: -52px;
115
+ left: -32px;
110
116
  }
111
117
 
112
118
  .element-toolbar {
@@ -119,16 +125,22 @@ blockquote {
119
125
  .grid-container-toolbar button,
120
126
  .grid-item-toolbar button,
121
127
  .element-toolbar button {
122
- /* margin-right: 8px;
123
- background-color: rgba(0, 0, 0, 0.8);
124
- color: #FFF; */
125
- /* margin-left: 8px; */
126
- background-color: rgb(255 255 255);
127
- color: #64748b;
128
+ background-color: #2684ff;
129
+ color: #FFFFFF;
130
+ border: 1px solid transparent;
128
131
  font-size: 12px;
129
- border-radius: 4px;
130
- border: 1px solid #64748b;
131
- margin-bottom: 6px;
132
+ border-radius: 0px;
133
+ margin-bottom: 0px;
134
+ width: 24px;
135
+ height: 24px;
136
+ padding: 12px;
137
+ }
138
+ .grid-container-toolbar button:hover,
139
+ .grid-item-toolbar button:hover,
140
+ .element-toolbar button:hover {
141
+ background-color: #FFFFFF;
142
+ color: #2684ff;
143
+ border: 1px solid #2684ff;
132
144
  }
133
145
 
134
146
  .grid-item {
@@ -481,7 +493,7 @@ blockquote {
481
493
  left: 0;
482
494
  right: 0;
483
495
  bottom: 0;
484
- top: auto;
496
+ top: 0;
485
497
  width: fit-content;
486
498
  height: fit-content;
487
499
  margin: auto;
@@ -521,7 +533,7 @@ blockquote {
521
533
  }
522
534
 
523
535
  .element-toolbar button {
524
- margin-right: 6px;
536
+ margin-right: 0px;
525
537
  }
526
538
 
527
539
  .empty-carousel-wrapper .element-selector {
@@ -534,4 +546,4 @@ blockquote {
534
546
 
535
547
  .empty-carousel-wrapper .grid-item-toolbar {
536
548
  left: 0px;
537
- }
549
+ }
@@ -18,6 +18,7 @@ import Button from "@mui/material/Button";
18
18
  import SettingsIcon from "@mui/icons-material/Settings";
19
19
  import DeleteIcon from "@mui/icons-material/Delete";
20
20
  import AppHeaderPopup from "./AppHeaderPopup";
21
+ import { Tooltip } from "@mui/material";
21
22
  import { jsx as _jsx } from "react/jsx-runtime";
22
23
  import { jsxs as _jsxs } from "react/jsx-runtime";
23
24
  const drawerWidth = 240;
@@ -33,8 +34,20 @@ function AppHeader(props) {
33
34
  appLogo,
34
35
  menus,
35
36
  bgColor,
36
- menuStyle
37
+ bgColorHover,
38
+ textColor,
39
+ textColorHover,
40
+ menuStyle,
41
+ bannerSpacing,
42
+ fontSize,
43
+ fontFamily
37
44
  } = element;
45
+ const {
46
+ left,
47
+ top,
48
+ right,
49
+ bottom
50
+ } = bannerSpacing || {};
38
51
  const {
39
52
  window
40
53
  } = props;
@@ -53,16 +66,24 @@ function AppHeader(props) {
53
66
  className: "element-toolbar",
54
67
  contentEditable: false,
55
68
  style: {
56
- top: "-38px"
69
+ top: "-24px"
57
70
  },
58
- children: [/*#__PURE__*/_jsx(IconButton, {
59
- size: "small",
60
- onClick: onSettings,
61
- children: /*#__PURE__*/_jsx(SettingsIcon, {})
62
- }), /*#__PURE__*/_jsx(IconButton, {
63
- size: "small",
64
- onClick: onDelete,
65
- children: /*#__PURE__*/_jsx(DeleteIcon, {})
71
+ children: [/*#__PURE__*/_jsx(Tooltip, {
72
+ title: "App Header Settings",
73
+ arrow: true,
74
+ children: /*#__PURE__*/_jsx(IconButton, {
75
+ size: "small",
76
+ onClick: onSettings,
77
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
78
+ })
79
+ }), /*#__PURE__*/_jsx(Tooltip, {
80
+ title: "Delete App Header",
81
+ arrow: true,
82
+ children: /*#__PURE__*/_jsx(IconButton, {
83
+ size: "small",
84
+ onClick: onDelete,
85
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
86
+ })
66
87
  })]
67
88
  }) : null;
68
89
  };
@@ -107,6 +128,8 @@ function AppHeader(props) {
107
128
  children: menus.map(item => /*#__PURE__*/_jsx(ListItem, {
108
129
  disablePadding: true,
109
130
  children: /*#__PURE__*/_jsx(ListItemButton, {
131
+ component: "a",
132
+ href: item.url,
110
133
  sx: {
111
134
  textAlign: "center"
112
135
  },
@@ -130,7 +153,11 @@ function AppHeader(props) {
130
153
  style: {
131
154
  position: "relative",
132
155
  background: bgColor,
133
- boxShadow: "none"
156
+ boxShadow: "none",
157
+ paddingLeft: `${left}px`,
158
+ paddingRight: `${right}px`,
159
+ paddingTop: `${top}px`,
160
+ paddingBottom: `${bottom}px`
134
161
  },
135
162
  children: /*#__PURE__*/_jsxs(Toolbar, {
136
163
  children: [/*#__PURE__*/_jsx(IconButton, {
@@ -184,9 +211,17 @@ function AppHeader(props) {
184
211
  children: /*#__PURE__*/_jsx(MenuIcon, {})
185
212
  }) : null, !isDrawer ? menus.map(item => /*#__PURE__*/_jsx(Button, {
186
213
  component: "a",
187
- href: item.href,
214
+ href: item.url,
188
215
  sx: {
189
- color: "#fff"
216
+ fontFamily: fontFamily,
217
+ textTransform: "none",
218
+ fontSize: fontSize || "16px",
219
+ color: textColor || "#FFF",
220
+ background: bgColor || "none",
221
+ "&:hover": {
222
+ color: textColorHover || textColor || "#FFF",
223
+ background: bgColorHover || bgColor || "none"
224
+ }
190
225
  },
191
226
  children: item.text
192
227
  }, item)) : null]
@@ -7,15 +7,17 @@ const ButtonPopup = props => {
7
7
  element,
8
8
  onSave,
9
9
  customProps,
10
- onClose
10
+ onClose,
11
+ style,
12
+ styleName
11
13
  } = props;
12
14
  return /*#__PURE__*/_jsx(StyleBuilder, {
13
15
  title: "Button",
14
- type: "buttonStyle",
16
+ type: styleName ? "" : "buttonStyle",
15
17
  element: element,
16
18
  onSave: onSave,
17
19
  onClose: onClose,
18
- renderTabs: buttonStyle,
20
+ renderTabs: style ? style : buttonStyle,
19
21
  customProps: customProps
20
22
  });
21
23
  };
@@ -1,7 +1,11 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
- import { Menu, MenuItem } from "@mui/material";
4
+ import { IconButton, Menu, MenuItem, Tooltip, Box } from "@mui/material";
5
+ import * as fIcons from "@mui/icons-material";
6
+ import SettingsIcon from "@mui/icons-material/Settings";
7
+ import OpenInNewIcon from "@mui/icons-material/OpenInNew";
8
+ import DeleteIcon from "@mui/icons-material/Delete";
5
9
  import ButtonPopup from "./ButtonPopup";
6
10
  import { actionButtonRedirect } from "../../service/actionTrigger";
7
11
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,7 +14,8 @@ const EditorButton = props => {
10
14
  const {
11
15
  attributes,
12
16
  element,
13
- customProps
17
+ customProps,
18
+ children
14
19
  } = props;
15
20
  const {
16
21
  readOnly,
@@ -30,7 +35,12 @@ const EditorButton = props => {
30
35
  borderColor,
31
36
  buttonLink,
32
37
  textSize,
33
- textAlign
38
+ textAlign,
39
+ fontFamily,
40
+ textColorHover,
41
+ bgColorHover,
42
+ buttonIcon,
43
+ iconPosition
34
44
  } = element;
35
45
  const {
36
46
  linkType,
@@ -48,6 +58,7 @@ const EditorButton = props => {
48
58
  right,
49
59
  bottom
50
60
  } = bannerSpacing || {};
61
+ const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
51
62
  const onClick = async e => {
52
63
  if (readOnly) {
53
64
  if (metadata?.buttonLink?.handler) {
@@ -117,15 +128,19 @@ const EditorButton = props => {
117
128
  return /*#__PURE__*/_jsxs("div", {
118
129
  className: "editor-btn-wrapper",
119
130
  ...attributes,
131
+ style: {
132
+ display: "inline"
133
+ },
120
134
  children: [/*#__PURE__*/_jsx("div", {
121
135
  className: "editor-btn-wrapper-inner",
122
136
  style: {
123
- textAlign: textAlign || "left"
137
+ textAlign: textAlign || "left",
138
+ display: "inline"
124
139
  },
125
- children: /*#__PURE__*/_jsx("button", {
126
- contentEditable: false,
127
- className: "editor-btn",
128
- style: {
140
+ contentEditable: false,
141
+ children: /*#__PURE__*/_jsxs(Box, {
142
+ component: "button",
143
+ sx: {
129
144
  background: bgColor || "rgb(30, 75, 122)",
130
145
  borderWidth: "1px",
131
146
  borderBlockStyle: "solid",
@@ -136,11 +151,34 @@ const EditorButton = props => {
136
151
  paddingTop: `${top || 8}px`,
137
152
  paddingBottom: `${bottom || 8}px`,
138
153
  color: `${textColor || "#FFFFFF"}`,
139
- fontSize: textSize || "inherit"
154
+ fontSize: textSize || "inherit",
155
+ fontFamily: fontFamily || "PoppinsRegular",
156
+ display: "inline-flex",
157
+ alignItems: "center",
158
+ "&:hover": {
159
+ color: `${textColorHover || textColor || "#FFFFFF"}`,
160
+ background: bgColorHover || bgColor || "rgb(30, 75, 122)"
161
+ }
140
162
  },
141
163
  onClick: onClick,
142
- children: label || "My Button"
164
+ children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
165
+ style: {
166
+ paddingLeft: "4px",
167
+ paddingRight: "4px"
168
+ }
169
+ }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
170
+ style: {
171
+ paddingLeft: "4px",
172
+ paddingRight: "4px"
173
+ }
174
+ })]
143
175
  })
176
+ }), /*#__PURE__*/_jsx("div", {
177
+ contentEditable: true,
178
+ style: {
179
+ display: "inline"
180
+ },
181
+ children: children
144
182
  }), /*#__PURE__*/_jsxs(Menu, {
145
183
  className: "editor-btn-options",
146
184
  open: anchorEl !== null,
@@ -148,13 +186,31 @@ const EditorButton = props => {
148
186
  onClose: handleClose,
149
187
  children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
150
188
  onClick: onMenuClick("edit"),
151
- children: "Edit"
189
+ children: /*#__PURE__*/_jsx(Tooltip, {
190
+ title: "Settings",
191
+ arrow: true,
192
+ children: /*#__PURE__*/_jsx(IconButton, {
193
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
194
+ })
195
+ })
152
196
  }), /*#__PURE__*/_jsx(MenuItem, {
197
+ title: "Open Link",
198
+ arrow: true,
153
199
  onClick: onMenuClick("open"),
154
- children: "Open"
200
+ children: /*#__PURE__*/_jsx(Tooltip, {
201
+ children: /*#__PURE__*/_jsx(IconButton, {
202
+ children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
203
+ })
204
+ })
155
205
  }), !readOnly && /*#__PURE__*/_jsx(MenuItem, {
206
+ title: "Delete",
207
+ arrow: true,
156
208
  onClick: onMenuClick("delete"),
157
- children: "Delete"
209
+ children: /*#__PURE__*/_jsx(Tooltip, {
210
+ children: /*#__PURE__*/_jsx(IconButton, {
211
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
212
+ })
213
+ })
158
214
  })]
159
215
  }), edit && /*#__PURE__*/_jsx(ButtonPopup, {
160
216
  element: element,
@@ -25,10 +25,12 @@ const ChipText = props => {
25
25
  bottomLeft,
26
26
  bottomRight
27
27
  } = borderRadius || {};
28
- return /*#__PURE__*/_jsx("span", {
28
+ return /*#__PURE__*/_jsx("button", {
29
29
  ...attributes,
30
30
  className: "editor-chip-text",
31
+ contentEditable: false,
31
32
  style: {
33
+ display: "inline",
32
34
  paddingLeft: `${left}px`,
33
35
  paddingRight: `${right}px`,
34
36
  paddingTop: `${top}px`,
@@ -38,7 +40,10 @@ const ChipText = props => {
38
40
  background: bgColor || "#CCC",
39
41
  color: textColor
40
42
  },
41
- children: children
43
+ children: /*#__PURE__*/_jsx("div", {
44
+ contentEditable: true,
45
+ children: children
46
+ })
42
47
  });
43
48
  };
44
49
  export default ChipText;
@@ -6,9 +6,7 @@ import useResize from "../../utils/customHooks/useResize";
6
6
  import { insertImageText } from "../../utils/imageText";
7
7
  import EmbedPopup from "./EmbedPopup";
8
8
  import { IconButton, Tooltip } from "@mui/material";
9
- import DeleteIcon from "@mui/icons-material/Delete";
10
9
  import SettingsIcon from "@mui/icons-material/Settings";
11
- import AddIcon from "@mui/icons-material/Add";
12
10
  import { jsx as _jsx } from "react/jsx-runtime";
13
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
12
  const Image = ({
@@ -112,31 +110,17 @@ const Image = ({
112
110
  insertImageText(editor, [...path, 1]);
113
111
  };
114
112
  const ToolBar = () => {
115
- return selected ? /*#__PURE__*/_jsxs("div", {
113
+ return selected ? /*#__PURE__*/_jsx("div", {
116
114
  className: "element-toolbar",
117
115
  contentEditable: false,
118
- children: [/*#__PURE__*/_jsx(Tooltip, {
119
- title: "Add Text",
120
- arrow: true,
121
- children: /*#__PURE__*/_jsx(IconButton, {
122
- onClick: onAddText,
123
- children: /*#__PURE__*/_jsx(AddIcon, {})
124
- })
125
- }), /*#__PURE__*/_jsx(Tooltip, {
126
- title: "Settings",
116
+ children: /*#__PURE__*/_jsx(Tooltip, {
117
+ title: "Image Settings",
127
118
  arrow: true,
128
119
  children: /*#__PURE__*/_jsx(IconButton, {
129
120
  onClick: onSettings,
130
121
  children: /*#__PURE__*/_jsx(SettingsIcon, {})
131
122
  })
132
- }), /*#__PURE__*/_jsx(Tooltip, {
133
- title: "Delete",
134
- arrow: true,
135
- children: /*#__PURE__*/_jsx(IconButton, {
136
- onClick: onDelete,
137
- children: /*#__PURE__*/_jsx(DeleteIcon, {})
138
- })
139
- })]
123
+ })
140
124
  }) : null;
141
125
  };
142
126
  const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
@@ -177,7 +161,7 @@ const Image = ({
177
161
  alt: alt,
178
162
  src: url,
179
163
  onClick: handleImageClick
180
- }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
164
+ }), selected && !readOnly && size.width > 300 && size.height > 300 && /*#__PURE__*/_jsx(IconButton, {
181
165
  onPointerDown: onMouseDown,
182
166
  style: {
183
167
  opacity: 1,
@@ -54,14 +54,14 @@ const Video = ({
54
54
  className: "element-toolbar visible-on-hover",
55
55
  contentEditable: false,
56
56
  children: [/*#__PURE__*/_jsx(Tooltip, {
57
- title: "Settings",
57
+ title: "Video Settings",
58
58
  arrow: true,
59
59
  children: /*#__PURE__*/_jsx(IconButton, {
60
60
  onClick: onSettings,
61
61
  children: /*#__PURE__*/_jsx(SettingsIcon, {})
62
62
  })
63
63
  }), /*#__PURE__*/_jsx(Tooltip, {
64
- title: "Delete",
64
+ title: "Delete Video",
65
65
  arrow: true,
66
66
  children: /*#__PURE__*/_jsx(IconButton, {
67
67
  onClick: onDelete,
@@ -5,10 +5,12 @@ import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mu
5
5
  import DeleteIcon from "@mui/icons-material/Delete";
6
6
  import SettingsIcon from "@mui/icons-material/Settings";
7
7
  import AddIcon from "@mui/icons-material/Add";
8
+ import BackupIcon from "@mui/icons-material/Backup";
8
9
  import FormPopup from "./FormPopup";
9
10
  import ButtonPopup from "../Button/ButtonPopup";
10
11
  import { formField } from "../../utils/formfield";
11
12
  import { formSubmit } from "../../service/formSubmit";
13
+ import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
12
14
  import { jsx as _jsx } from "react/jsx-runtime";
13
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
16
  const Form = props => {
@@ -51,17 +53,23 @@ const Form = props => {
51
53
  if ((readOnly || test) && formEle && formEle?.current) {
52
54
  const formData = new FormData(formEle?.current);
53
55
  setLoading(true);
54
- let params = {
55
- page_id: page_id
56
- };
56
+ let response = {};
57
57
  for (let pair of formData.entries()) {
58
- params = {
59
- ...params,
58
+ response = {
59
+ ...response,
60
60
  [pair[0]]: pair[1]
61
61
  };
62
62
  }
63
- const result = await formSubmit(params);
64
- console.log(result);
63
+ let params = {
64
+ page_id: page_id,
65
+ form_id: `${formName}`,
66
+ response,
67
+ form_data: {
68
+ email: element?.email,
69
+ save_response: element?.saveResponse
70
+ }
71
+ };
72
+ await formSubmit(params, customProps);
65
73
  setLoading(false);
66
74
  }
67
75
  };
@@ -168,7 +176,6 @@ const Form = props => {
168
176
  })]
169
177
  });
170
178
  };
171
- console.log(element);
172
179
  return /*#__PURE__*/_jsxs("div", {
173
180
  ...attributes,
174
181
  className: "form-wrapper element-root",
@@ -177,7 +184,7 @@ const Form = props => {
177
184
  padding: "10px"
178
185
  },
179
186
  children: [!readOnly && /*#__PURE__*/_jsx(FormToolbar, {}), /*#__PURE__*/_jsxs("form", {
180
- id: `form_${formName}`,
187
+ id: `${formName}`,
181
188
  onSubmit: handleSubmit,
182
189
  style: {
183
190
  color: textColor || "#FFF"
@@ -192,7 +199,6 @@ const Form = props => {
192
199
  contentEditable: false,
193
200
  style: {
194
201
  display: "flex",
195
- flex: 1,
196
202
  justifyContent: btnAlign?.horizantal || "start",
197
203
  alignItems: btnAlign?.vertical || "start",
198
204
  marginLeft: "0px"
@@ -216,7 +222,8 @@ const Form = props => {
216
222
  marginBottom: `${btnM?.bottom || 0}px`,
217
223
  color: `${buttonProps?.textColor || "#FFFFFF"}`,
218
224
  fontSize: buttonProps?.textSize || "inherit",
219
- height: "fit-content"
225
+ height: "fit-content",
226
+ fontFamily: buttonProps?.fontFamily || "PoppinsRegular"
220
227
  },
221
228
  children: buttonProps?.label || "Submit"
222
229
  })
@@ -245,23 +252,37 @@ const Form = props => {
245
252
  element: element,
246
253
  onSave: onSave,
247
254
  onClose: onClose
248
- }) : null, /*#__PURE__*/_jsxs(Menu, {
255
+ }) : null, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
249
256
  className: "editor-btn-options",
250
257
  open: anchorEl !== null,
251
258
  anchorEl: anchorEl,
252
259
  onClose: handleClose,
253
- children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
260
+ children: [/*#__PURE__*/_jsx(MenuItem, {
254
261
  onClick: onMenuClick("edit"),
255
- children: "Settings"
262
+ children: /*#__PURE__*/_jsx(Tooltip, {
263
+ title: "Button Settings",
264
+ arrow: true,
265
+ children: /*#__PURE__*/_jsx(IconButton, {
266
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
267
+ })
268
+ })
256
269
  }), /*#__PURE__*/_jsx(MenuItem, {
257
270
  onClick: onMenuClick("test"),
258
- children: "Test Submit Form"
271
+ children: /*#__PURE__*/_jsx(Tooltip, {
272
+ title: "Test Submit",
273
+ arrow: true,
274
+ children: /*#__PURE__*/_jsx(IconButton, {
275
+ children: /*#__PURE__*/_jsx(BackupIcon, {})
276
+ })
277
+ })
259
278
  })]
260
- }), editButton && /*#__PURE__*/_jsx(ButtonPopup, {
279
+ }) : null, editButton && /*#__PURE__*/_jsx(ButtonPopup, {
261
280
  element: buttonProps || {},
262
281
  onSave: onSaveButtonSettings,
263
282
  onClose: onCloseButtonSettings,
264
- customProps: customProps
283
+ customProps: customProps,
284
+ style: formButtonStyle,
285
+ styleName: "formButtonStyle"
265
286
  })]
266
287
  });
267
288
  };
@@ -4,7 +4,6 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
4
  import { gridItem } from "../../utils/gridItem";
5
5
  import GridPopup from "./GridPopup";
6
6
  import { IconButton, Tooltip } from "@mui/material";
7
- import DeleteIcon from "@mui/icons-material/Delete";
8
7
  import SettingsIcon from "@mui/icons-material/Settings";
9
8
  import AddIcon from "@mui/icons-material/Add";
10
9
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,6 +20,7 @@ const Grid = props => {
21
20
  } = customProps;
22
21
  const [openSetttings, setOpenSettings] = useState(false);
23
22
  const {
23
+ id,
24
24
  grid,
25
25
  bannerSpacing,
26
26
  bgColor,
@@ -53,7 +53,7 @@ const Grid = props => {
53
53
  Transforms.insertNodes(editor, [{
54
54
  ...gridItem()
55
55
  }], {
56
- at: insertPath
56
+ at: [...path, children.length]
57
57
  });
58
58
  // new line
59
59
  Transforms.insertNodes(editor, [{
@@ -109,19 +109,16 @@ const Grid = props => {
109
109
  onClick: onAddGridItem,
110
110
  children: /*#__PURE__*/_jsx(AddIcon, {})
111
111
  })
112
- }), /*#__PURE__*/_jsx(Tooltip, {
113
- title: "Delete Grid",
114
- arrow: true,
115
- children: /*#__PURE__*/_jsx(IconButton, {
116
- onClick: onDelete,
117
- children: /*#__PURE__*/_jsx(DeleteIcon, {})
118
- })
119
112
  })]
120
113
  }) : null;
121
114
  };
115
+ const sectionId = id ? {
116
+ id
117
+ } : {};
122
118
  return /*#__PURE__*/_jsxs("div", {
123
119
  className: `grid-container ${grid} element-root`,
124
120
  ...attributes,
121
+ ...sectionId,
125
122
  style: {
126
123
  background: bgColor,
127
124
  alignContent: vertical,
@@ -136,6 +133,7 @@ const Grid = props => {
136
133
  element: element,
137
134
  onSave: onSave,
138
135
  onClose: onClose,
136
+ onDelete: onDelete,
139
137
  customProps: customProps
140
138
  }) : null, /*#__PURE__*/_jsx("div", {
141
139
  style: {