@flozy/editor 1.8.2 → 1.8.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. package/dist/Editor/CommonEditor.js +13 -9
  2. package/dist/Editor/Editor.css +15 -12
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -11
  4. package/dist/Editor/Elements/Attachments/Attachments.js +3 -0
  5. package/dist/Editor/Elements/Button/EditorButton.js +4 -10
  6. package/dist/Editor/Elements/Carousel/Arrows.js +13 -6
  7. package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
  8. package/dist/Editor/Elements/Carousel/slick-theme.min.css +5 -22
  9. package/dist/Editor/Elements/ChipText/ChipText.js +8 -12
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +5 -3
  11. package/dist/Editor/Elements/Color Picker/Styles.js +3 -17
  12. package/dist/Editor/Elements/Color Picker/colorWheel.png +0 -0
  13. package/dist/Editor/Elements/Embed/Embed.css +48 -45
  14. package/dist/Editor/Elements/Embed/Image.js +8 -14
  15. package/dist/Editor/Elements/Embed/Video.js +1 -7
  16. package/dist/Editor/Elements/Form/Form.js +17 -23
  17. package/dist/Editor/Elements/Form/FormElements/FormText.js +8 -12
  18. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +8 -12
  19. package/dist/Editor/Elements/Grid/Grid.js +8 -20
  20. package/dist/Editor/Elements/Grid/GridItem.js +13 -23
  21. package/dist/Editor/Elements/Grid/templates/carousel_item.js +9 -4
  22. package/dist/Editor/Elements/Grid/templates/default_grid.js +2 -2
  23. package/dist/Editor/Elements/List/CheckList.js +10 -4
  24. package/dist/Editor/Elements/List/CheckListStyles.js +12 -0
  25. package/dist/Editor/Elements/SimpleText.js +0 -1
  26. package/dist/Editor/Elements/Table/Table.js +3 -1
  27. package/dist/Editor/Elements/TopBanner/TopBanner.js +3 -1
  28. package/dist/Editor/Elements/Variables/Style.js +12 -0
  29. package/dist/Editor/Elements/Variables/Variable.js +27 -0
  30. package/dist/Editor/Elements/Variables/VariableButton.js +40 -0
  31. package/dist/Editor/IframeEditor.js +36 -0
  32. package/dist/Editor/MiniEditor.js +7 -10
  33. package/dist/Editor/Styles/EditorStyles.js +15 -7
  34. package/dist/Editor/Toolbar/Basic/index.js +18 -5
  35. package/dist/Editor/Toolbar/FormatTools/TextSize.js +30 -13
  36. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +7 -1
  37. package/dist/Editor/common/Icon.js +10 -2
  38. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  39. package/dist/Editor/common/Section/index.js +13 -16
  40. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -4
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +10 -3
  42. package/dist/Editor/common/StyleBuilder/formStyle.js +3 -0
  43. package/dist/Editor/common/StyleBuilder/sectionStyle.js +1 -1
  44. package/dist/Editor/common/iconslist.js +93 -1
  45. package/dist/Editor/helper/theme.js +83 -0
  46. package/dist/Editor/hooks/useWindowMessage.js +35 -0
  47. package/dist/Editor/hooks/useWindowResize.js +5 -2
  48. package/dist/Editor/plugins/withLayout.js +42 -27
  49. package/dist/Editor/plugins/withLinks.js +1 -1
  50. package/dist/Editor/utils/SlateUtilityFunctions.js +28 -5
  51. package/dist/Editor/utils/attachments.js +2 -1
  52. package/dist/Editor/utils/variables.js +45 -0
  53. package/dist/index.js +3 -1
  54. package/package.json +1 -1
  55. package/dist/Editor/Elements/Color Picker/LogoIcon.js +0 -25
@@ -1,7 +1,7 @@
1
1
  import React, { useState, useRef } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSlateStatic, ReactEditor } from "slate-react";
4
- import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mui/material";
4
+ import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box } from "@mui/material";
5
5
  import DeleteIcon from "@mui/icons-material/Delete";
6
6
  import BackupIcon from "@mui/icons-material/Backup";
7
7
  import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
@@ -11,6 +11,7 @@ import { formField } from "../../utils/formfield";
11
11
  import { formSubmit } from "../../service/formSubmit";
12
12
  import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
13
13
  import Workflow from "./Workflow";
14
+ import { getTRBLBreakPoints } from "../../helper/theme";
14
15
  import { jsx as _jsx } from "react/jsx-runtime";
15
16
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
17
  const Form = props => {
@@ -39,12 +40,6 @@ const Form = props => {
39
40
  fontFamily,
40
41
  textAlign
41
42
  } = element;
42
- const {
43
- left,
44
- top,
45
- right,
46
- bottom
47
- } = bannerSpacing || {};
48
43
  const {
49
44
  topLeft,
50
45
  topRight,
@@ -237,20 +232,20 @@ const Form = props => {
237
232
  },
238
233
  onMouseOver: onMouseOver,
239
234
  onMouseLeave: onMouseLeave,
240
- children: [/*#__PURE__*/_jsxs("form", {
235
+ children: [/*#__PURE__*/_jsxs(Box, {
236
+ component: "form",
241
237
  id: `${formName}`,
242
238
  onSubmit: handleSubmit,
243
- style: {
239
+ sx: {
244
240
  color: textColor || "#FFF",
245
241
  borderColor: borderColor || "transparent",
246
242
  borderWidth: borderWidth || "1px",
247
243
  borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
248
244
  borderStyle: borderStyle || "solid",
249
245
  background: bgColor || "transparent",
250
- paddingLeft: `${left}px`,
251
- paddingRight: `${right}px`,
252
- paddingTop: `${top}px`,
253
- paddingBottom: `${bottom}px`,
246
+ padding: {
247
+ ...getTRBLBreakPoints(bannerSpacing)
248
+ },
254
249
  position: "relative"
255
250
  },
256
251
  ref: formEle,
@@ -279,23 +274,22 @@ const Form = props => {
279
274
  justifyContent: btnAlign?.horizantal || "start",
280
275
  alignItems: btnAlign?.vertical || "start"
281
276
  },
282
- children: /*#__PURE__*/_jsx("button", {
277
+ children: /*#__PURE__*/_jsx(Box, {
278
+ component: "button",
283
279
  onClick: onSubmitClick,
284
280
  disabled: loading,
285
- style: {
281
+ sx: {
286
282
  background: buttonProps?.bgColor || "rgb(30, 75, 122)",
287
283
  borderWidth: "1px",
288
284
  borderBlockStyle: "solid",
289
285
  ...btnBorderStyle,
290
286
  borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
291
- paddingLeft: `${btnSpacing?.left || 8}px`,
292
- paddingRight: `${btnSpacing?.right || 8}px`,
293
- paddingTop: `${btnSpacing?.top || 8}px`,
294
- paddingBottom: `${btnSpacing?.bottom || 8}px`,
295
- marginLeft: `${btnM?.left || 0}px`,
296
- marginRight: `${btnM?.right || 0}px`,
297
- marginTop: `${btnM?.top || 0}px`,
298
- marginBottom: `${btnM?.bottom || 0}px`,
287
+ padding: {
288
+ ...getTRBLBreakPoints(btnSpacing)
289
+ },
290
+ margin: {
291
+ ...getTRBLBreakPoints(btnM)
292
+ },
299
293
  color: `${buttonProps?.textColor || "#FFFFFF"}`,
300
294
  fontSize: buttonProps?.textSize || "inherit",
301
295
  height: "fit-content",
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
+ import { getTRBLBreakPoints } from "../../../helper/theme";
3
+ import { Box } from "@mui/material";
2
4
  import { jsx as _jsx } from "react/jsx-runtime";
3
5
  const FormText = props => {
4
6
  const {
@@ -16,12 +18,6 @@ const FormText = props => {
16
18
  lockSpacing,
17
19
  ...rest
18
20
  } = fieldProps;
19
- const {
20
- left,
21
- top,
22
- right,
23
- bottom
24
- } = bannerSpacing || {};
25
21
  const {
26
22
  topLeft,
27
23
  topRight,
@@ -37,16 +33,16 @@ const FormText = props => {
37
33
  display: "flex"
38
34
  },
39
35
  contentEditable: false,
40
- children: /*#__PURE__*/_jsx("input", {
36
+ children: /*#__PURE__*/_jsx(Box, {
37
+ component: "input",
41
38
  ...rest,
42
39
  onChange: onChange,
43
- style: {
40
+ sx: {
44
41
  width: "100%",
45
42
  border: `1px solid ${borderColor || "#FFF"}`,
46
- paddingLeft: `${left || 8}px`,
47
- paddingRight: `${right || 8}px`,
48
- paddingTop: `${top || 8}px`,
49
- paddingBottom: `${bottom || 8}px`,
43
+ padding: {
44
+ ...getTRBLBreakPoints(bannerSpacing)
45
+ },
50
46
  height: height || "auto",
51
47
  borderColor: borderColor || "transparent",
52
48
  borderWidth: borderWidth || "1px",
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
+ import { Box } from "@mui/material";
3
+ import { getTRBLBreakPoints } from "../../../helper/theme";
2
4
  import { jsx as _jsx } from "react/jsx-runtime";
3
5
  const FormTextArea = props => {
4
6
  const {
@@ -15,12 +17,6 @@ const FormTextArea = props => {
15
17
  bgColor,
16
18
  ...rest
17
19
  } = fieldProps;
18
- const {
19
- left,
20
- top,
21
- right,
22
- bottom
23
- } = bannerSpacing || {};
24
20
  const {
25
21
  topLeft,
26
22
  topRight,
@@ -36,16 +32,16 @@ const FormTextArea = props => {
36
32
  display: "flex"
37
33
  },
38
34
  contentEditable: false,
39
- children: /*#__PURE__*/_jsx("textarea", {
35
+ children: /*#__PURE__*/_jsx(Box, {
36
+ component: "textarea",
40
37
  ...rest,
41
38
  onChange: onChange,
42
- style: {
39
+ sx: {
43
40
  width: "100%",
44
41
  border: `1px solid ${borderColor || "#FFF"}`,
45
- paddingLeft: `${left || 8}px`,
46
- paddingRight: `${right || 8}px`,
47
- paddingTop: `${top || 8}px`,
48
- paddingBottom: `${bottom || 8}px`,
42
+ padding: {
43
+ ...getTRBLBreakPoints(bannerSpacing)
44
+ },
49
45
  height: height || "150px",
50
46
  borderColor: borderColor || "transparent",
51
47
  borderWidth: borderWidth || "1px",
@@ -12,6 +12,7 @@ import GridPopup from "./GridPopup";
12
12
  import SectionPopup from "./SectionPopup";
13
13
  import { gridItem } from "../../utils/gridItem";
14
14
  import { useEditorContext } from "../../hooks/useMouseMove";
15
+ import { getTRBLBreakPoints } from "../../helper/theme";
15
16
  import { jsx as _jsx } from "react/jsx-runtime";
16
17
  import { Fragment as _Fragment } from "react/jsx-runtime";
17
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,15 +42,8 @@ const Grid = props => {
41
42
  borderWidth,
42
43
  borderColor,
43
44
  borderStyle,
44
- borderRadius,
45
- gridSize
45
+ borderRadius
46
46
  } = element;
47
- const {
48
- left,
49
- top,
50
- right,
51
- bottom
52
- } = bannerSpacing || {};
53
47
  const {
54
48
  vertical,
55
49
  horizantal,
@@ -267,11 +261,7 @@ const Grid = props => {
267
261
  borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
268
262
  borderStyle: borderStyle || "solid"
269
263
  },
270
- "data-path": path.join(",")
271
- // sx={{
272
- // width: `${((gridSize || 12) / 12) * 100}%`,
273
- // }}
274
- ,
264
+ "data-path": path.join(","),
275
265
  children: [fgColor && /*#__PURE__*/_jsx("div", {
276
266
  style: {
277
267
  position: "absolute",
@@ -305,15 +295,13 @@ const Grid = props => {
305
295
  onDelete: onDelete,
306
296
  customProps: customProps
307
297
  }) : null, /*#__PURE__*/_jsx(GridContainer, {
308
- item: true,
309
- xs: 12,
298
+ container: true,
310
299
  className: "grid-c-wrpr",
311
- style: {
300
+ sx: {
312
301
  display: "flex",
313
- paddingLeft: `${left}px`,
314
- paddingRight: `${right}px`,
315
- paddingTop: `${top}px`,
316
- paddingBottom: `${bottom}px`,
302
+ padding: {
303
+ ...getTRBLBreakPoints(bannerSpacing)
304
+ },
317
305
  alignItems: vertical || "start",
318
306
  justifyContent: horizantal || "start",
319
307
  flexDirection: flexDirection || "row",
@@ -6,6 +6,7 @@ import GridItemPopup from "./GridItemPopup";
6
6
  import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
7
7
  import { GridSettingsIcon } from "../../common/iconslist";
8
8
  import { useEditorContext } from "../../hooks/useMouseMove";
9
+ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
12
  const GridItem = props => {
@@ -24,7 +25,6 @@ const GridItem = props => {
24
25
  bannerSpacing,
25
26
  bgColor,
26
27
  alignment,
27
- gridHeight,
28
28
  borderRadius,
29
29
  borderStyle,
30
30
  borderWidth,
@@ -35,12 +35,6 @@ const GridItem = props => {
35
35
  textColor,
36
36
  animation
37
37
  } = element;
38
- const {
39
- left,
40
- top,
41
- right,
42
- bottom
43
- } = bannerSpacing || {};
44
38
  const {
45
39
  vertical,
46
40
  horizantal,
@@ -53,7 +47,6 @@ const GridItem = props => {
53
47
  bottomRight
54
48
  } = borderRadius || {};
55
49
  const editor = useSlateStatic();
56
- const itemWidth = (grid || 6) / 12 * 100;
57
50
  const path = ReactEditor.findPath(editor, element);
58
51
  const {
59
52
  hoverPath
@@ -104,11 +97,13 @@ const GridItem = props => {
104
97
  };
105
98
  return /*#__PURE__*/_jsxs(Item, {
106
99
  item: true,
107
- xs: grid,
108
100
  component: "div",
109
- className: `grid-item xs-${grid} element-root gi-top-wrpr content-editable`,
101
+ className: `grid-item element-root gi-top-wrpr content-editable`,
110
102
  ...attributes,
111
103
  sx: {
104
+ width: {
105
+ ...getBreakPointsValue(grid, null, "overrideGridSize", true)
106
+ },
112
107
  display: "flex",
113
108
  flexDirection: flexDirection || "column",
114
109
  background: bgColor || "transparent",
@@ -118,15 +113,12 @@ const GridItem = props => {
118
113
  borderStyle: borderStyle || "solid",
119
114
  alignItems: horizantal,
120
115
  justifyContent: vertical,
121
- width: `${itemWidth}%`,
122
- marginLeft: `${margin?.left || 0}px`,
123
- marginRight: `${margin?.right || 0}px`,
124
- marginTop: `${margin?.top || 0}px`,
125
- marginBottom: `${margin?.bottom || 0}px`,
116
+ margin: {
117
+ ...getTRBLBreakPoints(margin)
118
+ },
126
119
  "&:hover": {
127
120
  background: `${bgColorHover || bgColor || "transparent"}`
128
- },
129
- height: "100%"
121
+ }
130
122
  },
131
123
  "data-path": path.join(","),
132
124
  style: {
@@ -159,13 +151,11 @@ const GridItem = props => {
159
151
  sx: {
160
152
  display: "flex",
161
153
  flexDirection: flexDirection || "column",
162
- paddingLeft: `${left}px`,
163
- paddingRight: `${right}px`,
164
- paddingTop: `${top}px`,
165
- paddingBottom: `${bottom}px`,
166
- justifyContent: vertical,
167
- height: gridHeight || "100%",
154
+ padding: {
155
+ ...getTRBLBreakPoints(bannerSpacing)
156
+ },
168
157
  width: "100%",
158
+ height: "100%",
169
159
  color: textColor || "#000",
170
160
  "&:hover": {
171
161
  borderColor: borderColorHover || borderColor || "transparent"
@@ -31,8 +31,13 @@ const carousel_item = itemNo => ({
31
31
  }]
32
32
  }]
33
33
  }],
34
- bgColor: "rgba(185, 179, 179, 0)",
35
34
  lockSpacing: true,
35
+ borderRadius: {
36
+ topLeft: 8,
37
+ topRight: 8,
38
+ bottomRight: 8,
39
+ bottomLeft: 8
40
+ },
36
41
  bannerSpacing: {
37
42
  top: 16,
38
43
  left: 16,
@@ -41,9 +46,10 @@ const carousel_item = itemNo => ({
41
46
  undefined: 16
42
47
  },
43
48
  alignment: {
44
- horizantal: "center"
49
+ horizontal: "center"
45
50
  }
46
51
  }],
52
+ bgColor: "#ECF4FF",
47
53
  alignment: {
48
54
  flexDirection: "row"
49
55
  },
@@ -53,8 +59,7 @@ const carousel_item = itemNo => ({
53
59
  left: "16",
54
60
  right: "16",
55
61
  bottom: "16"
56
- },
57
- bgColor: "#ECF4FF"
62
+ }
58
63
  }]
59
64
  });
60
65
  export default carousel_item;
@@ -3,7 +3,7 @@ const default_grid = [{
3
3
  grid: "container",
4
4
  children: [{
5
5
  type: "grid-item",
6
- grid: 12,
6
+ grid: 6,
7
7
  children: [{
8
8
  type: "alignLeft",
9
9
  children: [{
@@ -63,7 +63,7 @@ const default_grid = [{
63
63
  }
64
64
  }, {
65
65
  type: "grid-item",
66
- grid: 12,
66
+ grid: 6,
67
67
  children: [{
68
68
  type: "alignLeft",
69
69
  children: [{
@@ -2,8 +2,8 @@ import React from "react";
2
2
  import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
3
3
  import { Transforms } from "slate";
4
4
  import { Checkbox, FormControlLabel } from "@mui/material";
5
- import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
6
- import CheckCircleIcon from "@mui/icons-material/CheckCircle";
5
+ import Icon from "../../common/Icon";
6
+ import CheckListStyle from "./CheckListStyles";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  const CheckList = ({
@@ -14,6 +14,7 @@ const CheckList = ({
14
14
  }) => {
15
15
  const editor = useSlateStatic();
16
16
  const readOnly = useReadOnly();
17
+ const classes = CheckListStyle();
17
18
  const {
18
19
  checked
19
20
  } = element;
@@ -38,8 +39,13 @@ const CheckList = ({
38
39
  className: "checkbox-edit",
39
40
  children: [/*#__PURE__*/_jsx(FormControlLabel, {
40
41
  control: /*#__PURE__*/_jsx(Checkbox, {
41
- icon: /*#__PURE__*/_jsx(CheckCircleOutlineIcon, {}),
42
- checkedIcon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
42
+ icon: /*#__PURE__*/_jsx(Icon, {
43
+ icon: "checkListButton"
44
+ }),
45
+ checkedIcon: /*#__PURE__*/_jsx(Icon, {
46
+ icon: "checkListButtonActive"
47
+ }),
48
+ sx: classes.checkBoxHover,
43
49
  checked: checked,
44
50
  onChange: handleCheck
45
51
  })
@@ -0,0 +1,12 @@
1
+ const CheckListStyle = () => ({
2
+ checkBoxHover: {
3
+ "&:hover": {
4
+ "& svg": {
5
+ "& rect": {
6
+ stroke: "#2563EB"
7
+ }
8
+ }
9
+ }
10
+ }
11
+ });
12
+ export default CheckListStyle;
@@ -18,7 +18,6 @@ const SimpleTextStyle = ({
18
18
  position: "absolute",
19
19
  zIndex: -1,
20
20
  left: "0px",
21
- paddingLeft: "4px",
22
21
  top: "-1px",
23
22
  bottom: 0,
24
23
  margin: "auto",
@@ -176,7 +176,9 @@ const Table = props => {
176
176
  style: {
177
177
  minWidth: "100%",
178
178
  maxWidth: "100%",
179
- position: "relative"
179
+ position: "relative",
180
+ overflowX: "auto",
181
+ overflowY: "hidden"
180
182
  },
181
183
  children: [/*#__PURE__*/_jsx(TableComp, {
182
184
  sx: classes.table,
@@ -92,8 +92,10 @@ const TopBanner = props => {
92
92
  ...props,
93
93
  classes: classes
94
94
  }) : null, /*#__PURE__*/_jsx("span", {
95
+ className: "hidden-children",
95
96
  style: {
96
- display: "none"
97
+ display: "none",
98
+ height: "0px"
97
99
  },
98
100
  children: children
99
101
  })]
@@ -0,0 +1,12 @@
1
+ const VariableStyles = () => ({
2
+ variablesItem: {
3
+ color: "#2563EB",
4
+ background: "#EEEEEE"
5
+ },
6
+ variableSelectBtn: {
7
+ height: "31px",
8
+ borderRadius: "10px",
9
+ marginLeft: "8px"
10
+ }
11
+ });
12
+ export default VariableStyles;
@@ -0,0 +1,27 @@
1
+ import React from "react";
2
+ import VariableStyles from "./Style";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ const Variables = props => {
6
+ const classes = VariableStyles();
7
+ const {
8
+ attributes,
9
+ element,
10
+ children
11
+ } = props;
12
+ const {
13
+ name
14
+ } = element;
15
+ return /*#__PURE__*/_jsxs("span", {
16
+ ...attributes,
17
+ contentEditable: false,
18
+ children: [/*#__PURE__*/_jsx("span", {
19
+ className: `variables-item`,
20
+ style: classes.variablesItem,
21
+ children: `{{${name}}}`
22
+ }), /*#__PURE__*/_jsx("span", {
23
+ children: children
24
+ })]
25
+ });
26
+ };
27
+ export default Variables;
@@ -0,0 +1,40 @@
1
+ import React from "react";
2
+ import { useSlateStatic } from "slate-react";
3
+ import { MenuItem, Select } from "@mui/material";
4
+ import { insertVariables } from "../../utils/variables";
5
+ import VariableStyles from "./Style";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ const VariableButton = props => {
9
+ const classes = VariableStyles();
10
+ const editor = useSlateStatic();
11
+ const {
12
+ options
13
+ } = props;
14
+ const updateVariable = e => {
15
+ insertVariables(editor, {
16
+ name: e.target.value
17
+ });
18
+ };
19
+ return /*#__PURE__*/_jsxs(Select, {
20
+ labelId: "variable-selection",
21
+ id: "variable-selection-mini",
22
+ displayEmpty: true,
23
+ value: '',
24
+ sx: classes.variableSelectBtn,
25
+ onChange: updateVariable,
26
+ children: [/*#__PURE__*/_jsx(MenuItem, {
27
+ value: "",
28
+ children: /*#__PURE__*/_jsx("em", {
29
+ children: "Variables"
30
+ })
31
+ }), (options || []).map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
32
+ value: item.key,
33
+ children: item.label
34
+ }, `mini-edit-sele-${index}`))]
35
+ });
36
+ };
37
+ VariableButton.defaultProps = {
38
+ options: []
39
+ };
40
+ export default VariableButton;
@@ -0,0 +1,36 @@
1
+ import React from "react";
2
+ import CommonEditor from "./CommonEditor";
3
+ import useWindowMessage from "./hooks/useWindowMessage";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const IframeEditor = () => {
6
+ const [message, sendMessage] = useWindowMessage({
7
+ type: "editorProps"
8
+ });
9
+ const device = {
10
+ label: "Mobile",
11
+ breakpoint: "sm",
12
+ width: 425
13
+ };
14
+ const onSave = (a, b) => {
15
+ sendMessage({
16
+ type: "Editor:onSave",
17
+ payload: {
18
+ a,
19
+ b
20
+ }
21
+ });
22
+ };
23
+ if (message?.id && message?.content_status) {
24
+ return /*#__PURE__*/_jsx(CommonEditor, {
25
+ ...message,
26
+ isIframe: true,
27
+ onSave: onSave,
28
+ device: device
29
+ });
30
+ } else {
31
+ return /*#__PURE__*/_jsx("div", {
32
+ children: "Waiting to receive data"
33
+ });
34
+ }
35
+ };
36
+ export default IframeEditor;
@@ -10,21 +10,16 @@ import withCommon from "./hooks/withCommon";
10
10
  import "./Editor.css";
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
- const initialValue = [{
14
- type: "paragraph",
15
- children: [{
16
- text: ""
17
- }]
18
- }];
19
13
  const MiniEditor = props => {
20
14
  const {
21
15
  id,
22
- // content,
16
+ content,
17
+ handleEditorChange,
23
18
  // onSave,
24
19
  // editor: collaborativeEditor,
25
20
  readOnly,
26
21
  miniEditorPlaceholder,
27
- toolbars,
22
+ className,
28
23
  otherProps
29
24
  } = props;
30
25
  const {
@@ -104,10 +99,12 @@ const MiniEditor = props => {
104
99
  }, []);
105
100
  return /*#__PURE__*/_jsxs(Slate, {
106
101
  editor: editor,
107
- initialValue: initialValue,
102
+ initialValue: content,
103
+ onChange: handleEditorChange,
108
104
  children: [/*#__PURE__*/_jsx(BasicToolbar, {
109
- toolbars: toolbars || []
105
+ ...props
110
106
  }), /*#__PURE__*/_jsx(Editable, {
107
+ className: className || "mini-editor-cls",
111
108
  renderElement: renderElement,
112
109
  renderLeaf: renderLeaf,
113
110
  onKeyDown: onKeyDown
@@ -7,7 +7,15 @@ const editorStyles = ({
7
7
  position: "relative",
8
8
  padding: "0px",
9
9
  alignItems: "center",
10
- justifyContent: "center"
10
+ justifyContent: "center",
11
+ "*": {
12
+ boxSizing: "border-box"
13
+ },
14
+ "&.iframe-editor": {
15
+ "& .mini-tool-wrpr-ei": {
16
+ display: "none"
17
+ }
18
+ }
11
19
  },
12
20
  slateWrapper: {
13
21
  paddingTop: "0px",
@@ -109,7 +117,7 @@ const editorStyles = ({
109
117
  display: "none"
110
118
  }
111
119
  },
112
- "&:before": {
120
+ "&.needHover:before": {
113
121
  content: '" "',
114
122
  position: "absolute",
115
123
  width: "calc(100% - 2px)",
@@ -168,14 +176,14 @@ const editorStyles = ({
168
176
  }
169
177
  }
170
178
  },
179
+ "& .carousel-item": {
180
+ padding: "12px 32px"
181
+ },
171
182
  "& .slick-arrow": {
172
183
  borderRadius: "50%",
173
- backgroundColor: "#FFF",
184
+ backgroundColor: "#F8FAFF",
174
185
  textAlign: "center",
175
- "& svg": {
176
- width: "16px",
177
- height: "16px"
178
- }
186
+ border: "1px solid #CFD8F5"
179
187
  }
180
188
  }
181
189
  });