@flozy/editor 1.3.1 → 1.3.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. package/dist/Editor/CommonEditor.js +17 -9
  2. package/dist/Editor/DialogWrapper.js +5 -0
  3. package/dist/Editor/Editor.css +25 -3
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +10 -7
  5. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +7 -4
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +7 -4
  7. package/dist/Editor/Elements/Button/EditorButton.js +9 -1
  8. package/dist/Editor/Elements/Carousel/Carousel.js +6 -2
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -4
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +3 -1
  11. package/dist/Editor/Elements/Embed/Embed.css +2 -2
  12. package/dist/Editor/Elements/Embed/Embed.js +17 -12
  13. package/dist/Editor/Elements/Embed/EmbedPopup.js +4 -3
  14. package/dist/Editor/Elements/Embed/Image.js +55 -21
  15. package/dist/Editor/Elements/Embed/Video.js +76 -14
  16. package/dist/Editor/Elements/Grid/Grid.js +50 -15
  17. package/dist/Editor/Elements/Grid/GridButton.js +73 -9
  18. package/dist/Editor/Elements/Grid/GridItem.js +40 -34
  19. package/dist/Editor/Elements/Grid/full_grid.png +0 -0
  20. package/dist/Editor/Elements/Grid/templates/full_grid.png +0 -0
  21. package/dist/Editor/Elements/Grid/templates/image_banner_text.js +56 -0
  22. package/dist/Editor/Elements/Grid/templates/index.js +17 -0
  23. package/dist/Editor/Elements/Grid/templates/right_image_left_text.js +81 -0
  24. package/dist/Editor/Elements/Grid/templates/white_LTRI.js +116 -0
  25. package/dist/Editor/Elements/Link/LinkButton.js +12 -8
  26. package/dist/Editor/Elements/Mentions/Mentions.js +2 -2
  27. package/dist/Editor/Elements/NewLine/NewLineButton.js +12 -9
  28. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +7 -4
  29. package/dist/Editor/Elements/Signature/SignatureButton.js +7 -4
  30. package/dist/Editor/Elements/Signature/SignaturePopup.js +2 -4
  31. package/dist/Editor/Elements/Table/Table.js +4 -1
  32. package/dist/Editor/Elements/Table/TableCell.js +17 -9
  33. package/dist/Editor/Elements/Table/TableSelector.js +12 -9
  34. package/dist/Editor/Toolbar/FormatTools/BlockButton.js +3 -1
  35. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +3 -1
  36. package/dist/Editor/Toolbar/Toolbar.js +20 -14
  37. package/dist/Editor/Toolbar/toolbarGroups.js +34 -17
  38. package/dist/Editor/common/Button.js +10 -6
  39. package/dist/Editor/common/ColorPickerButton.js +6 -1
  40. package/dist/Editor/common/Icon.js +1 -1
  41. package/dist/Editor/common/MentionsPopup.js +1 -1
  42. package/dist/Editor/common/StyleBuilder/buttonStyle.js +9 -0
  43. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +8 -0
  44. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +10 -0
  45. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +20 -20
  46. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +19 -19
  47. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  48. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +163 -0
  49. package/dist/Editor/common/StyleBuilder/gridStyle.js +13 -0
  50. package/dist/Editor/common/StyleBuilder/index.js +17 -5
  51. package/dist/Editor/common/Uploader.js +4 -3
  52. package/dist/Editor/hooks/withCommon.js +2 -2
  53. package/dist/Editor/plugins/withEmbeds.js +0 -1
  54. package/dist/Editor/utils/grid.js +10 -4
  55. package/dist/Editor/utils/gridItem.js +3 -2
  56. package/dist/Editor/utils/insertAppHeader.js +28 -23
  57. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms, Editor, Element } from "slate";
3
- import { IconButton } from "@mui/material";
3
+ import { IconButton, Tooltip } from "@mui/material";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import PageSettingsPopup from "./PageSettingsPopup";
6
6
  import { PageSettings } from "../../common/iconslist";
@@ -79,10 +79,13 @@ const PageSettingsButton = props => {
79
79
  setOpenSettings(false);
80
80
  };
81
81
  return /*#__PURE__*/_jsxs(_Fragment, {
82
- children: [/*#__PURE__*/_jsx(IconButton, {
82
+ children: [/*#__PURE__*/_jsx(Tooltip, {
83
83
  title: "Page Settings",
84
- onClick: onSettings,
85
- children: /*#__PURE__*/_jsx(PageSettings, {})
84
+ arrow: true,
85
+ children: /*#__PURE__*/_jsx(IconButton, {
86
+ onClick: onSettings,
87
+ children: /*#__PURE__*/_jsx(PageSettings, {})
88
+ })
86
89
  }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
87
90
  element: openSetttings?.element || {},
88
91
  onSave: onSave,
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { IconButton } from "@mui/material";
2
+ import { IconButton, Tooltip } from "@mui/material";
3
3
  import { insertSignature } from "../../utils/signature";
4
4
  import { SignatureIcon } from "../../common/iconslist";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,10 +10,13 @@ const SignatureButton = props => {
10
10
  const handleInsertSignature = () => {
11
11
  insertSignature(editor);
12
12
  };
13
- return /*#__PURE__*/_jsx(IconButton, {
14
- onClick: handleInsertSignature,
13
+ return /*#__PURE__*/_jsx(Tooltip, {
15
14
  title: "Signature",
16
- children: /*#__PURE__*/_jsx(SignatureIcon, {})
15
+ arrow: true,
16
+ children: /*#__PURE__*/_jsx(IconButton, {
17
+ onClick: handleInsertSignature,
18
+ children: /*#__PURE__*/_jsx(SignatureIcon, {})
19
+ })
17
20
  });
18
21
  };
19
22
  export default SignatureButton;
@@ -70,8 +70,6 @@ const SignaturePopup = props => {
70
70
  ...signedData,
71
71
  ...data
72
72
  });
73
- handleSave();
74
- setOpen(false);
75
73
  };
76
74
  return /*#__PURE__*/_jsxs(_Fragment, {
77
75
  children: [/*#__PURE__*/_jsx("div", {
@@ -281,7 +279,7 @@ const SignaturePopup = props => {
281
279
  })
282
280
  })
283
281
  })]
284
- }) : null, tab !== 2 ? /*#__PURE__*/_jsxs(_Fragment, {
282
+ }) : null, /*#__PURE__*/_jsxs(_Fragment, {
285
283
  children: [/*#__PURE__*/_jsx(Button, {
286
284
  onClick: handleClear,
287
285
  className: "secondaryBtn",
@@ -291,7 +289,7 @@ const SignaturePopup = props => {
291
289
  className: "primaryBtn",
292
290
  children: "Save"
293
291
  })]
294
- }) : null]
292
+ })]
295
293
  })]
296
294
  })
297
295
  })
@@ -75,6 +75,9 @@ const Table = props => {
75
75
  children,
76
76
  customProps
77
77
  } = props;
78
+ const {
79
+ readOnly
80
+ } = customProps;
78
81
  const [openSetttings, setOpenSettings] = useState(false);
79
82
  const {
80
83
  bgColor,
@@ -170,7 +173,7 @@ const Table = props => {
170
173
  ...attributes,
171
174
  children: children
172
175
  })
173
- }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
176
+ }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
174
177
  element: tableProps?.styleProps || {},
175
178
  onSave: onSave,
176
179
  onClose: onClose,
@@ -1,5 +1,7 @@
1
1
  import React, { useState, useEffect } from "react";
2
2
  import { Editor, Element } from "slate";
3
+ import { IconButton } from "@mui/material";
4
+ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
3
5
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
6
  import useTableResize from "../../utils/customHooks/useTableResize";
5
7
  import { TableUtil } from "../../utils/table";
@@ -10,17 +12,19 @@ const Resizer = ({
10
12
  onMouseDown
11
13
  }) => {
12
14
  return /*#__PURE__*/_jsx(_Fragment, {
13
- children: /*#__PURE__*/_jsx("button", {
15
+ children: /*#__PURE__*/_jsx(IconButton, {
16
+ className: "cell-resizer",
14
17
  contentEditable: false,
15
18
  onPointerDown: onMouseDown,
16
- className: "cell-resizer",
17
19
  style: {
18
- width: "10px",
19
- height: "100%",
20
20
  position: "absolute",
21
- right: "0px",
22
- top: 0
23
- }
21
+ right: "-8px",
22
+ top: 0,
23
+ background: "none",
24
+ width: "15px",
25
+ height: "100%"
26
+ },
27
+ children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
24
28
  })
25
29
  });
26
30
  };
@@ -28,8 +32,12 @@ const TableCell = props => {
28
32
  const {
29
33
  element,
30
34
  attributes,
31
- children
35
+ children,
36
+ customProps
32
37
  } = props;
38
+ const {
39
+ readOnly
40
+ } = customProps;
33
41
  const {
34
42
  bgColor,
35
43
  borderColor
@@ -85,7 +93,7 @@ const TableCell = props => {
85
93
  border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`,
86
94
  ...(sizeProps || {})
87
95
  },
88
- children: [children, selected && isHeader ? /*#__PURE__*/_jsx(Resizer, {
96
+ children: [children, selected && isHeader && !readOnly ? /*#__PURE__*/_jsx(Resizer, {
89
97
  onMouseDown: onMouseDown
90
98
  }) : null]
91
99
  });
@@ -1,5 +1,5 @@
1
1
  import React, { useRef, useState } from "react";
2
- import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography } from "@mui/material";
2
+ import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography, Tooltip } from "@mui/material";
3
3
  import Icon from "../../common/Icon";
4
4
  import { Transforms } from "slate";
5
5
  import { TableUtil } from "../../utils/table.js";
@@ -41,14 +41,17 @@ const TableSelector = ({
41
41
  return /*#__PURE__*/_jsxs("div", {
42
42
  ref: tableOptionsRef,
43
43
  className: "popup-wrapper1 ",
44
- children: [/*#__PURE__*/_jsx(IconButton, {
45
- style: {
46
- border: showOptions ? "1px solid lightgray" : "none"
47
- },
48
- title: "table",
49
- onClick: handleButtonClick,
50
- children: /*#__PURE__*/_jsx(Icon, {
51
- icon: "table"
44
+ children: [/*#__PURE__*/_jsx(Tooltip, {
45
+ title: "Table",
46
+ arrow: true,
47
+ children: /*#__PURE__*/_jsx(IconButton, {
48
+ style: {
49
+ border: showOptions ? "1px solid lightgray" : "none"
50
+ },
51
+ onClick: handleButtonClick,
52
+ children: /*#__PURE__*/_jsx(Icon, {
53
+ icon: "table"
54
+ })
52
55
  })
53
56
  }), showOptions ? /*#__PURE__*/_jsx(Dialog, {
54
57
  open: showOptions,
@@ -5,7 +5,8 @@ import { toggleBlock, isBlockActive } from "../../utils/SlateUtilityFunctions.js
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const BlockButton = ({
7
7
  editor,
8
- format
8
+ format,
9
+ title
9
10
  }) => {
10
11
  return /*#__PURE__*/_jsx(Button, {
11
12
  active: isBlockActive(editor, format),
@@ -14,6 +15,7 @@ const BlockButton = ({
14
15
  e.preventDefault();
15
16
  toggleBlock(editor, format);
16
17
  },
18
+ title: title,
17
19
  children: /*#__PURE__*/_jsx(Icon, {
18
20
  icon: format
19
21
  })
@@ -5,7 +5,8 @@ import { toggleMark, isMarkActive } from "../../utils/SlateUtilityFunctions.js";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const MarkButton = ({
7
7
  editor,
8
- format
8
+ format,
9
+ title
9
10
  }) => {
10
11
  return /*#__PURE__*/_jsx(Button, {
11
12
  active: isMarkActive(editor, format),
@@ -14,6 +15,7 @@ const MarkButton = ({
14
15
  e.preventDefault();
15
16
  toggleMark(editor, format);
16
17
  },
18
+ title: title,
17
19
  children: /*#__PURE__*/_jsx(Icon, {
18
20
  icon: format
19
21
  })
@@ -19,8 +19,6 @@ import SignatureButton from "../Elements/Signature/SignatureButton";
19
19
  import ButtonToolIcon from "../Elements/Button/ButtonToolIcon";
20
20
  import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
21
21
  import CarouselButton from "../Elements/Carousel/CarouselButton";
22
- import ChipTextButton from "../Elements/ChipText/ChipTextButton";
23
- import DrawerMenuButton from "../Elements/DrawerMenu/DrawerMenuButton";
24
22
  import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
25
23
  import "./styles.css";
26
24
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -81,7 +79,8 @@ const Toolbar = props => {
81
79
  return /*#__PURE__*/_jsx(ColorPicker, {
82
80
  activeMark: activeMark,
83
81
  format: element.format,
84
- editor: editor
82
+ editor: editor,
83
+ title: element.title
85
84
  }, element.id);
86
85
  case "table":
87
86
  return /*#__PURE__*/_jsx(TableSelector, {
@@ -101,7 +100,8 @@ const Toolbar = props => {
101
100
  }, `gi_codeToText_${gi}`);
102
101
  case "grid":
103
102
  return /*#__PURE__*/_jsx(GridButton, {
104
- editor: editor
103
+ editor: editor,
104
+ customProps: customProps
105
105
  }, element.id);
106
106
  case "newLine":
107
107
  return /*#__PURE__*/_jsx(NewLineButton, {
@@ -127,16 +127,22 @@ const Toolbar = props => {
127
127
  return /*#__PURE__*/_jsx(CarouselButton, {
128
128
  editor: editor
129
129
  }, element.id);
130
- case "chip-text":
131
- return /*#__PURE__*/_jsx(ChipTextButton, {
132
- editor: editor,
133
- customProps: customProps
134
- }, element.id);
135
- case "drawer":
136
- return /*#__PURE__*/_jsx(DrawerMenuButton, {
137
- editor: editor,
138
- customProps: customProps
139
- }, element.id);
130
+ // case "chip-text":
131
+ // return (
132
+ // <ChipTextButton
133
+ // key={element.id}
134
+ // editor={editor}
135
+ // customProps={customProps}
136
+ // />
137
+ // );
138
+ // case "drawer":
139
+ // return (
140
+ // <DrawerMenuButton
141
+ // key={element.id}
142
+ // editor={editor}
143
+ // customProps={customProps}
144
+ // />
145
+ // );
140
146
  case "app-header":
141
147
  return /*#__PURE__*/_jsx(AppHeaderButton, {
142
148
  editor: editor,
@@ -24,71 +24,88 @@ const toolbarGroups = [[{
24
24
  }], [{
25
25
  id: 3,
26
26
  format: "bold",
27
- type: "mark"
27
+ type: "mark",
28
+ title: "Bold"
28
29
  }, {
29
30
  id: 4,
30
31
  format: "italic",
31
- type: "mark"
32
+ type: "mark",
33
+ title: "Italic"
32
34
  }, {
33
35
  id: 5,
34
36
  format: "underline",
35
- type: "mark"
37
+ type: "mark",
38
+ title: "Underline"
36
39
  }, {
37
40
  id: 6,
38
41
  format: "strikethrough",
39
- type: "mark"
42
+ type: "mark",
43
+ title: "Strike"
40
44
  }], [{
41
45
  id: 7,
42
46
  format: "color",
43
- type: "color-picker"
47
+ type: "color-picker",
48
+ title: "Font Color"
44
49
  }, {
45
50
  id: 8,
46
51
  format: "bgColor",
47
- type: "color-picker"
52
+ type: "color-picker",
53
+ title: "Background Color"
48
54
  }], [{
49
55
  id: 9,
50
56
  format: "superscript",
51
- type: "mark"
57
+ type: "mark",
58
+ title: "Superscript"
52
59
  }, {
53
60
  id: 10,
54
61
  format: "subscript",
55
- type: "mark"
62
+ type: "mark",
63
+ title: "Subcript"
56
64
  }], [{
57
65
  id: 11,
58
66
  format: "headingOne",
59
- type: "block"
67
+ type: "block",
68
+ title: "H1"
60
69
  }, {
61
70
  id: 12,
62
71
  format: "headingTwo",
63
- type: "block"
72
+ type: "block",
73
+ title: "H2"
64
74
  }, {
65
75
  id: 13,
66
76
  format: "headingThree",
67
- type: "block"
77
+ type: "block",
78
+ title: "H3"
68
79
  }, {
69
80
  id: 14,
70
81
  format: "blockquote",
71
- type: "block"
82
+ type: "block",
83
+ title: "Block Quote"
72
84
  }], [{
73
85
  id: 15,
74
86
  format: "orderedList",
75
- type: "block"
87
+ type: "block",
88
+ title: "Ordered List"
76
89
  }, {
77
90
  id: 16,
78
91
  format: "unorderedList",
79
- type: "block"
92
+ type: "block",
93
+ title: "Un-ordered List"
80
94
  }], [{
81
95
  id: 17,
82
96
  format: "alignLeft",
83
- type: "block"
97
+ type: "block",
98
+ title: "Left Align"
84
99
  }, {
85
100
  id: 18,
86
101
  format: "alignCenter",
87
- type: "block"
102
+ type: "block",
103
+ title: "Center Align"
88
104
  }, {
89
105
  id: 19,
90
106
  format: "alignRight",
91
- type: "block"
107
+ type: "block",
108
+ title: "Right Align"
92
109
  }], [{
93
110
  id: 20,
94
111
  format: "link",
@@ -1,18 +1,22 @@
1
1
  import React from "react";
2
- import { IconButton } from "@mui/material";
2
+ import { IconButton, Tooltip } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  const Button = props => {
5
5
  const {
6
6
  children,
7
7
  format,
8
8
  active,
9
+ title,
9
10
  ...rest
10
11
  } = props;
11
- return /*#__PURE__*/_jsx(IconButton, {
12
- className: active ? "btnActive" : "",
13
- title: format,
14
- ...rest,
15
- children: children
12
+ return /*#__PURE__*/_jsx(Tooltip, {
13
+ title: title,
14
+ arrow: true,
15
+ children: /*#__PURE__*/_jsx(IconButton, {
16
+ className: active ? "btnActive" : "",
17
+ ...rest,
18
+ children: children
19
+ })
16
20
  });
17
21
  };
18
22
  export default Button;
@@ -28,7 +28,7 @@ const ColorPickerButton = props => {
28
28
  background: value,
29
29
  height: "26px",
30
30
  minWidth: "26px",
31
- borderRadius: '26px',
31
+ borderRadius: "26px",
32
32
  border: "1px solid #64748B"
33
33
  },
34
34
  onClick: handleColorPicker
@@ -36,6 +36,11 @@ const ColorPickerButton = props => {
36
36
  open: open,
37
37
  anchorEl: anchorEl,
38
38
  onClose: handleClose,
39
+ sx: {
40
+ "& .MuiPaper-root": {
41
+ overflow: "hidden"
42
+ }
43
+ },
39
44
  children: /*#__PURE__*/_jsx(Grid, {
40
45
  container: true,
41
46
  padding: 2,
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward } from "react-icons/md";
3
3
  import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs";
4
4
  import { FaSuperscript, FaSubscript } from "react-icons/fa";
5
- import { AiFillEdit, AiOutlineTable, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
5
+ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
6
6
  import { SiLatex } from "react-icons/si";
7
7
  import { BoldIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon } from "./iconslist";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -49,7 +49,7 @@ const MentionsPopup = props => {
49
49
  borderRadius: "3px",
50
50
  background: i === index ? "#B4D5FF" : "transparent"
51
51
  },
52
- children: char
52
+ children: char.name
53
53
  }, char))
54
54
  }) : null;
55
55
  };
@@ -47,5 +47,14 @@ const buttonStyle = [{
47
47
  key: "borderColor",
48
48
  type: "color"
49
49
  }]
50
+ }, {
51
+ tab: "Save As Template",
52
+ value: "saveAsTemplate",
53
+ needActions: false,
54
+ fields: [{
55
+ label: "Template Image",
56
+ key: "saveAsTemplate",
57
+ type: "saveAsTemplate"
58
+ }]
50
59
  }];
51
60
  export default buttonStyle;
@@ -6,6 +6,14 @@ const embedImageStyle = [{
6
6
  key: "bannerSpacing",
7
7
  type: "bannerSpacing"
8
8
  }]
9
+ }, {
10
+ tab: "Border Radius",
11
+ value: "borderRadius",
12
+ fields: [{
13
+ label: "Border Radius",
14
+ key: "borderRadius",
15
+ type: "borderRadius"
16
+ }]
9
17
  }, {
10
18
  tab: "Position",
11
19
  value: "position",
@@ -0,0 +1,10 @@
1
+ const embedVideoStyle = [{
2
+ tab: "URL",
3
+ value: "url",
4
+ fields: [{
5
+ label: "URL",
6
+ key: "url",
7
+ type: "text"
8
+ }]
9
+ }];
10
+ export default embedVideoStyle;
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { Grid } from "@mui/material";
3
- import LockIcon from '@mui/icons-material/Lock';
4
- import LockOpenIcon from '@mui/icons-material/LockOpen';
3
+ import LockIcon from "@mui/icons-material/Lock";
4
+ import LockOpenIcon from "@mui/icons-material/LockOpen";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
7
  const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
@@ -47,7 +47,7 @@ const BannerSpacing = props => {
47
47
  sx: {
48
48
  pb: 2,
49
49
  display: "flex",
50
- justifyContent: 'center'
50
+ justifyContent: "center"
51
51
  },
52
52
  children: /*#__PURE__*/_jsxs("div", {
53
53
  style: {
@@ -76,10 +76,10 @@ const BannerSpacing = props => {
76
76
  width: "35px",
77
77
  height: "16px",
78
78
  margin: "auto",
79
- textAlign: 'center',
80
- border: '1px solid #cccccc',
81
- fontSize: '12px',
82
- borderRadius: '4px'
79
+ textAlign: "center",
80
+ border: "1px solid #cccccc",
81
+ fontSize: "12px",
82
+ borderRadius: "4px"
83
83
  },
84
84
  onChange: handleChange
85
85
  }), /*#__PURE__*/_jsx("input", {
@@ -94,10 +94,10 @@ const BannerSpacing = props => {
94
94
  width: "35px",
95
95
  height: "16px",
96
96
  margin: "auto",
97
- textAlign: 'center',
98
- border: '1px solid #cccccc',
99
- fontSize: '12px',
100
- borderRadius: '4px'
97
+ textAlign: "center",
98
+ border: "1px solid #cccccc",
99
+ fontSize: "12px",
100
+ borderRadius: "4px"
101
101
  },
102
102
  onChange: handleChange
103
103
  }), /*#__PURE__*/_jsx("input", {
@@ -112,10 +112,10 @@ const BannerSpacing = props => {
112
112
  width: "35px",
113
113
  height: "16px",
114
114
  margin: "auto",
115
- textAlign: 'center',
116
- border: '1px solid #cccccc',
117
- fontSize: '12px',
118
- borderRadius: '4px'
115
+ textAlign: "center",
116
+ border: "1px solid #cccccc",
117
+ fontSize: "12px",
118
+ borderRadius: "4px"
119
119
  },
120
120
  onChange: handleChange
121
121
  }), /*#__PURE__*/_jsx("input", {
@@ -130,10 +130,10 @@ const BannerSpacing = props => {
130
130
  width: "35px",
131
131
  height: "16px",
132
132
  margin: "auto",
133
- textAlign: 'center',
134
- border: '1px solid #cccccc',
135
- fontSize: '12px',
136
- borderRadius: '4px'
133
+ textAlign: "center",
134
+ border: "1px solid #cccccc",
135
+ fontSize: "12px",
136
+ borderRadius: "4px"
137
137
  },
138
138
  onChange: handleChange
139
139
  }), /*#__PURE__*/_jsx("button", {
@@ -146,7 +146,7 @@ const BannerSpacing = props => {
146
146
  background: "none"
147
147
  },
148
148
  onClick: onLockSpacing,
149
- children: lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
149
+ children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
150
150
  })]
151
151
  })
152
152
  })