@flozy/editor 1.8.3 → 1.8.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. package/dist/Editor/CommonEditor.js +11 -9
  2. package/dist/Editor/Editor.css +15 -12
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -11
  4. package/dist/Editor/Elements/Button/EditorButton.js +4 -10
  5. package/dist/Editor/Elements/Carousel/Arrows.js +16 -2
  6. package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
  7. package/dist/Editor/Elements/Carousel/slick-theme.min.css +1 -0
  8. package/dist/Editor/Elements/ChipText/ChipText.js +8 -12
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.js +5 -3
  10. package/dist/Editor/Elements/Color Picker/Styles.js +3 -17
  11. package/dist/Editor/Elements/Color Picker/colorWheel.png +0 -0
  12. package/dist/Editor/Elements/Embed/Embed.css +48 -45
  13. package/dist/Editor/Elements/Embed/Image.js +8 -14
  14. package/dist/Editor/Elements/Embed/Video.js +1 -7
  15. package/dist/Editor/Elements/Form/Form.js +17 -23
  16. package/dist/Editor/Elements/Form/FormElements/FormText.js +8 -12
  17. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +8 -12
  18. package/dist/Editor/Elements/Grid/Grid.js +12 -20
  19. package/dist/Editor/Elements/Grid/GridItem.js +18 -24
  20. package/dist/Editor/Elements/Grid/templates/carousel_item.js +2 -3
  21. package/dist/Editor/Elements/Grid/templates/default_grid.js +2 -2
  22. package/dist/Editor/Elements/SimpleText.js +0 -1
  23. package/dist/Editor/Elements/Table/Table.js +3 -1
  24. package/dist/Editor/Elements/TopBanner/TopBanner.js +3 -1
  25. package/dist/Editor/IframeEditor.js +30 -0
  26. package/dist/Editor/MiniEditor.js +6 -8
  27. package/dist/Editor/Styles/EditorStyles.js +13 -3
  28. package/dist/Editor/Toolbar/Basic/index.js +3 -1
  29. package/dist/Editor/Toolbar/FormatTools/TextSize.js +30 -13
  30. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +7 -1
  31. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +3 -0
  32. package/dist/Editor/Toolbar/PopupTool/index.js +4 -2
  33. package/dist/Editor/common/Icon.js +3 -0
  34. package/dist/Editor/common/Section/index.js +13 -16
  35. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -4
  36. package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +10 -3
  37. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +18 -4
  38. package/dist/Editor/common/StyleBuilder/formStyle.js +3 -0
  39. package/dist/Editor/common/StyleBuilder/gridItemStyle.js +18 -1
  40. package/dist/Editor/common/StyleBuilder/gridStyle.js +19 -1
  41. package/dist/Editor/common/StyleBuilder/sectionStyle.js +1 -1
  42. package/dist/Editor/helper/theme.js +83 -0
  43. package/dist/Editor/hooks/useWindowMessage.js +35 -0
  44. package/dist/Editor/hooks/useWindowResize.js +5 -2
  45. package/dist/Editor/plugins/withLayout.js +42 -27
  46. package/dist/Editor/utils/SlateUtilityFunctions.js +22 -5
  47. package/dist/Editor/utils/pageSettings.js +17 -0
  48. package/dist/index.js +3 -1
  49. package/package.json +1 -1
  50. package/dist/Editor/Elements/Color Picker/LogoIcon.js +0 -25
@@ -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, getBreakPointsValue } 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";
@@ -42,14 +43,8 @@ const Grid = props => {
42
43
  borderColor,
43
44
  borderStyle,
44
45
  borderRadius,
45
- gridSize
46
+ flexWrap
46
47
  } = element;
47
- const {
48
- left,
49
- top,
50
- right,
51
- bottom
52
- } = bannerSpacing || {};
53
48
  const {
54
49
  vertical,
55
50
  horizantal,
@@ -267,11 +262,7 @@ const Grid = props => {
267
262
  borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
268
263
  borderStyle: borderStyle || "solid"
269
264
  },
270
- "data-path": path.join(",")
271
- // sx={{
272
- // width: `${((gridSize || 12) / 12) * 100}%`,
273
- // }}
274
- ,
265
+ "data-path": path.join(","),
275
266
  children: [fgColor && /*#__PURE__*/_jsx("div", {
276
267
  style: {
277
268
  position: "absolute",
@@ -305,19 +296,20 @@ const Grid = props => {
305
296
  onDelete: onDelete,
306
297
  customProps: customProps
307
298
  }) : null, /*#__PURE__*/_jsx(GridContainer, {
308
- item: true,
309
- xs: 12,
299
+ container: true,
310
300
  className: "grid-c-wrpr",
311
- style: {
301
+ sx: {
312
302
  display: "flex",
313
- paddingLeft: `${left}px`,
314
- paddingRight: `${right}px`,
315
- paddingTop: `${top}px`,
316
- paddingBottom: `${bottom}px`,
303
+ padding: {
304
+ ...getTRBLBreakPoints(bannerSpacing)
305
+ },
317
306
  alignItems: vertical || "start",
318
307
  justifyContent: horizantal || "start",
319
308
  flexDirection: flexDirection || "row",
320
- width: "100%"
309
+ width: "100%",
310
+ flexWrap: {
311
+ ...getBreakPointsValue(flexWrap || "wrap")
312
+ }
321
313
  },
322
314
  "data-path": path.join(","),
323
315
  children: children
@@ -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,
@@ -33,14 +33,9 @@ const GridItem = props => {
33
33
  bgColorHover,
34
34
  borderColorHover,
35
35
  textColor,
36
- animation
36
+ animation,
37
+ cellGHeight
37
38
  } = element;
38
- const {
39
- left,
40
- top,
41
- right,
42
- bottom
43
- } = bannerSpacing || {};
44
39
  const {
45
40
  vertical,
46
41
  horizantal,
@@ -53,7 +48,6 @@ const GridItem = props => {
53
48
  bottomRight
54
49
  } = borderRadius || {};
55
50
  const editor = useSlateStatic();
56
- const itemWidth = (grid || 6) / 12 * 100;
57
51
  const path = ReactEditor.findPath(editor, element);
58
52
  const {
59
53
  hoverPath
@@ -104,11 +98,16 @@ const GridItem = props => {
104
98
  };
105
99
  return /*#__PURE__*/_jsxs(Item, {
106
100
  item: true,
107
- xs: grid,
108
101
  component: "div",
109
- className: `grid-item xs-${grid} element-root gi-top-wrpr content-editable`,
102
+ className: `grid-item element-root gi-top-wrpr content-editable`,
110
103
  ...attributes,
111
104
  sx: {
105
+ width: {
106
+ ...getBreakPointsValue(grid, null, "overrideGridSize", true)
107
+ },
108
+ height: {
109
+ ...getBreakPointsValue(cellGHeight || "auto")
110
+ },
112
111
  display: "flex",
113
112
  flexDirection: flexDirection || "column",
114
113
  background: bgColor || "transparent",
@@ -118,15 +117,12 @@ const GridItem = props => {
118
117
  borderStyle: borderStyle || "solid",
119
118
  alignItems: horizantal,
120
119
  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`,
120
+ margin: {
121
+ ...getTRBLBreakPoints(margin)
122
+ },
126
123
  "&:hover": {
127
124
  background: `${bgColorHover || bgColor || "transparent"}`
128
- },
129
- height: "100%"
125
+ }
130
126
  },
131
127
  "data-path": path.join(","),
132
128
  style: {
@@ -159,13 +155,11 @@ const GridItem = props => {
159
155
  sx: {
160
156
  display: "flex",
161
157
  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%",
158
+ padding: {
159
+ ...getTRBLBreakPoints(bannerSpacing)
160
+ },
168
161
  width: "100%",
162
+ height: "100%",
169
163
  color: textColor || "#000",
170
164
  "&:hover": {
171
165
  borderColor: borderColorHover || borderColor || "transparent"
@@ -31,7 +31,6 @@ const carousel_item = itemNo => ({
31
31
  }]
32
32
  }]
33
33
  }],
34
- bgColor: "#ECF4FF",
35
34
  lockSpacing: true,
36
35
  borderRadius: {
37
36
  topLeft: 8,
@@ -50,6 +49,7 @@ const carousel_item = itemNo => ({
50
49
  horizontal: "center"
51
50
  }
52
51
  }],
52
+ bgColor: "#ECF4FF",
53
53
  alignment: {
54
54
  flexDirection: "row"
55
55
  },
@@ -59,8 +59,7 @@ const carousel_item = itemNo => ({
59
59
  left: "16",
60
60
  right: "16",
61
61
  bottom: "16"
62
- },
63
- bgColor: "transparent"
62
+ }
64
63
  }]
65
64
  });
66
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: [{
@@ -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,30 @@
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 onSave = (a, b) => {
10
+ sendMessage({
11
+ type: "Editor:onSave",
12
+ payload: {
13
+ a,
14
+ b
15
+ }
16
+ });
17
+ };
18
+ if (message?.id && message?.content_status) {
19
+ return /*#__PURE__*/_jsx(CommonEditor, {
20
+ ...message,
21
+ isIframe: true,
22
+ onSave: onSave
23
+ });
24
+ } else {
25
+ return /*#__PURE__*/_jsx("div", {
26
+ children: "Waiting to receive data"
27
+ });
28
+ }
29
+ };
30
+ export default IframeEditor;
@@ -10,20 +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,
22
+ className,
27
23
  otherProps
28
24
  } = props;
29
25
  const {
@@ -103,10 +99,12 @@ const MiniEditor = props => {
103
99
  }, []);
104
100
  return /*#__PURE__*/_jsxs(Slate, {
105
101
  editor: editor,
106
- initialValue: initialValue,
102
+ initialValue: content,
103
+ onChange: handleEditorChange,
107
104
  children: [/*#__PURE__*/_jsx(BasicToolbar, {
108
105
  ...props
109
106
  }), /*#__PURE__*/_jsx(Editable, {
107
+ className: className || "mini-editor-cls",
110
108
  renderElement: renderElement,
111
109
  renderLeaf: renderLeaf,
112
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",
@@ -33,7 +41,6 @@ const editorStyles = ({
33
41
  "& .editor-wrapper": {
34
42
  maxWidth: "100%",
35
43
  height: "100%",
36
- backgroundColor: "#FFF",
37
44
  overflow: "visible",
38
45
  "& .section-wrapper-fluid": {
39
46
  "& .grid-container": {
@@ -109,7 +116,7 @@ const editorStyles = ({
109
116
  display: "none"
110
117
  }
111
118
  },
112
- "&:before": {
119
+ "&.needHover:before": {
113
120
  content: '" "',
114
121
  position: "absolute",
115
122
  width: "calc(100% - 2px)",
@@ -168,6 +175,9 @@ const editorStyles = ({
168
175
  }
169
176
  }
170
177
  },
178
+ "& .carousel-item": {
179
+ padding: "12px 32px"
180
+ },
171
181
  "& .slick-arrow": {
172
182
  borderRadius: "50%",
173
183
  backgroundColor: "#F8FAFF",
@@ -59,6 +59,8 @@ const BasicToolbar = props => {
59
59
  });
60
60
  };
61
61
  BasicToolbar.defaultProps = {
62
- variableOptions: []
62
+ otherProps: {
63
+ variableOptions: []
64
+ }
63
65
  };
64
66
  export default BasicToolbar;
@@ -3,6 +3,9 @@ import { TextField, IconButton } from "@mui/material";
3
3
  import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
4
4
  import { sizeMap } from "../../utils/font.js";
5
5
  import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
6
+ import { getBreakPointsValue } from "../../helper/theme.js";
7
+ import useWindowResize from "../../hooks/useWindowResize.js";
8
+ import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
6
9
  import { jsx as _jsx } from "react/jsx-runtime";
7
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
11
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -11,15 +14,35 @@ const TextSize = ({
11
14
  format,
12
15
  fullWidth
13
16
  }) => {
14
- const value = activeMark(editor, format);
15
- const onChangeSize = e => {
16
- let inc = parseInt(e.target.value) || 8;
17
- inc = inc > 200 ? 200 : inc;
17
+ const [size] = useWindowResize();
18
+ const val = activeMark(editor, format);
19
+ const value = getBreakPointsValue(val, size?.device);
20
+ const updateMarkData = newVal => {
21
+ let upData = {
22
+ ...getBreakPointsValue(val),
23
+ [size?.device]: `${newVal}px`
24
+ };
25
+
26
+ // if desktop update to all other devices
27
+ // to avoid default normal size
28
+ if (size?.device === "lg") {
29
+ upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
30
+ a[b] = `${newVal}px`;
31
+ return a;
32
+ }, {});
33
+ }
18
34
  addMarkData(editor, {
19
35
  format,
20
- value: `${inc || 8}px`
36
+ value: {
37
+ ...upData
38
+ }
21
39
  });
22
40
  };
41
+ const onChangeSize = e => {
42
+ let inc = parseInt(e.target.value) || 8;
43
+ inc = inc > 200 ? 200 : inc;
44
+ updateMarkData(inc || 8);
45
+ };
23
46
  const getSizeVal = () => {
24
47
  try {
25
48
  const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
@@ -32,17 +55,11 @@ const TextSize = ({
32
55
  const onIncreaseSize = () => {
33
56
  let inc = (combinedOldVal || 0) + 1;
34
57
  inc = inc > 200 ? 200 : inc;
35
- addMarkData(editor, {
36
- format,
37
- value: `${inc}px`
38
- });
58
+ updateMarkData(inc);
39
59
  };
40
60
  const onDecreaseSize = () => {
41
61
  const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
42
- addMarkData(editor, {
43
- format,
44
- value: `${newVal}px`
45
- });
62
+ updateMarkData(newVal);
46
63
  };
47
64
  return /*#__PURE__*/_jsx(_Fragment, {
48
65
  children: /*#__PURE__*/_jsx(TextField, {
@@ -1,4 +1,4 @@
1
- import React, { useState } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import { useSlate } from "slate-react";
3
3
  import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
4
4
  import MENU_OPTIONS from "./Options/Options";
@@ -37,6 +37,11 @@ const MiniToolbar = props => {
37
37
  const PopupComponent = POPUP_TYPES[popper] || null;
38
38
  const open = Boolean(PopupComponent);
39
39
  const DialogComp = !fullScreen ? Popper : Dialog;
40
+ useEffect(() => {
41
+ if (popper) {
42
+ setPopper(null);
43
+ }
44
+ }, [editor.selection]);
40
45
  const handleClick = type => e => {
41
46
  setPopper(type);
42
47
  setAnchorEl(e.currentTarget);
@@ -51,6 +56,7 @@ const MiniToolbar = props => {
51
56
  return /*#__PURE__*/_jsxs(_Fragment, {
52
57
  children: [/*#__PURE__*/_jsx(Box, {
53
58
  component: "div",
59
+ className: "mini-tool-wrpr-ei",
54
60
  sx: classes.root,
55
61
  children: MENU_OPTIONS.map(({
56
62
  type,
@@ -10,6 +10,9 @@ const usePopupStyle = () => ({
10
10
  "& .papper-wrpr": {
11
11
  boxShadow: "none"
12
12
  }
13
+ },
14
+ "&.xs": {
15
+ transform: "none !important"
13
16
  }
14
17
  },
15
18
  textFormatWrapper: {
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Popper, Fade, Paper } from "@mui/material";
2
+ import { Popper, Fade, Paper, Popover } from "@mui/material";
3
3
  import { Editor, Range } from "slate";
4
4
  import { useSlate, useFocused } from "slate-react";
5
5
  import TextFormat from "./TextFormat";
@@ -7,6 +7,7 @@ import usePopupStyle from "./PopupToolStyle";
7
7
  import useDrag from "../../hooks/useDrag";
8
8
  import PopperHeader from "./PopperHeader";
9
9
  import { TableUtil } from "../../utils/table";
10
+ import useWindowResize from "../../hooks/useWindowResize";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
13
  const PopupTool = props => {
@@ -21,6 +22,7 @@ const PopupTool = props => {
21
22
  const [event] = useDrag(anchorEl);
22
23
  const id = open ? "popup-edit-tool" : "";
23
24
  const table = new TableUtil(editor);
25
+ const [size] = useWindowResize();
24
26
  useEffect(() => {
25
27
  if (event === "end" && anchorEl && !open) {
26
28
  // for table cell selection
@@ -66,7 +68,7 @@ const PopupTool = props => {
66
68
  transition: true,
67
69
  placement: "auto-end",
68
70
  sx: classes.popupWrapper,
69
- className: "tools-drawer",
71
+ className: `tools-drawer ${size?.device}`,
70
72
  children: ({
71
73
  TransitionProps
72
74
  }) => /*#__PURE__*/_jsx(Fade, {
@@ -185,6 +185,9 @@ const iconList = {
185
185
  moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
186
186
  docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
187
187
  colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
188
+ style: {
189
+ fill: "#64748B"
190
+ },
188
191
  size: 20
189
192
  }),
190
193
  leftArrow: /*#__PURE__*/_jsx(LeftArrow, {}),
@@ -4,6 +4,7 @@ import { ReactEditor, useSlateStatic } from "slate-react";
4
4
  import { Box, IconButton, Tooltip } from "@mui/material";
5
5
  import TuneIcon from "@mui/icons-material/Tune";
6
6
  import SectionPopup from "../../Elements/Grid/SectionPopup";
7
+ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const Section = props => {
@@ -25,12 +26,6 @@ const Section = props => {
25
26
  sectionGridSize,
26
27
  sectionAlignment
27
28
  } = element;
28
- const {
29
- left: ssleft,
30
- top: sstop,
31
- right: ssright,
32
- bottom: ssbottom
33
- } = sectionBannerSpacing || {};
34
29
  const {
35
30
  topLeft: ssTopLeft,
36
31
  topRight: ssTopRight,
@@ -49,9 +44,9 @@ const Section = props => {
49
44
  const Toolbar = () => {
50
45
  return !readOnly ? /*#__PURE__*/_jsx(Box, {
51
46
  component: "div",
52
- className: "element-toolbar ss hr section-tw",
47
+ className: "element-toolbar no-border-button ss hr section-tw",
53
48
  style: {
54
- left: "20px",
49
+ left: "-28px",
55
50
  top: "0px"
56
51
  },
57
52
  children: /*#__PURE__*/_jsx(Tooltip, {
@@ -83,20 +78,19 @@ const Section = props => {
83
78
  at: path
84
79
  });
85
80
  };
81
+ const needHover = element?.children?.find(f => f.type === "grid") ? "needHover" : "";
86
82
  const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
87
83
  backgroundImage: `url(${sectionBackgroundImage})`
88
84
  } : {};
89
85
  return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
90
86
  component: "section",
91
- className: `ed-section-wrapper ${readOnly ? "" : "hselect"}`,
92
- style: {
93
- position: "relative",
87
+ className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
88
+ sx: {
94
89
  background: sectionBgColor,
95
90
  ...sectionBgImage,
96
- paddingLeft: `${ssleft}px`,
97
- paddingRight: `${ssright}px`,
98
- paddingTop: `${sstop || 2}px`,
99
- paddingBottom: `${ssbottom || 2}px`,
91
+ padding: {
92
+ ...getTRBLBreakPoints(sectionBannerSpacing)
93
+ },
100
94
  borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
101
95
  flexDirection: flexDirection || "column",
102
96
  alignItems: horizantal,
@@ -105,7 +99,10 @@ const Section = props => {
105
99
  children: [/*#__PURE__*/_jsxs(Box, {
106
100
  className: "ed-section-inner",
107
101
  sx: {
108
- width: `${(sectionGridSize || 8) / 12 * 100}%`
102
+ position: "relative",
103
+ width: {
104
+ ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
105
+ }
109
106
  },
110
107
  children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
111
108
  }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {