@flozy/editor 1.6.7 → 1.6.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -125,7 +125,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
125
125
  }));
126
126
  }, [id, content]);
127
127
  useEffect(() => {
128
- if (editorWrapper && editorWrapper?.current && loadedValue !== deboundedValue && isInteracted && onSave) {
128
+ if (editorWrapper && editorWrapper?.current && JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
129
129
  const {
130
130
  value: strVal,
131
131
  ...restVal
@@ -410,8 +410,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
410
410
  className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
411
411
  style: {
412
412
  backgroundColor: "transparent",
413
- paddingLeft: `${bannerSpacing?.left || 12}px`,
414
- paddingRight: `${bannerSpacing?.right || 12}px`,
413
+ paddingLeft: `${bannerSpacing?.left || 0}px`,
414
+ paddingRight: `${bannerSpacing?.right || 0}px`,
415
415
  paddingTop: `${bannerSpacing?.top}px`,
416
416
  paddingBottom: `${bannerSpacing?.bottom}px`,
417
417
  width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
@@ -494,6 +494,12 @@ blockquote {
494
494
  .form-btn-wrpr {
495
495
  justify-content: center !important;
496
496
  }
497
+ .section-wrapper-fluid .grid-container {
498
+ width: 100% !important;
499
+ }
500
+ .app-drawer-btn {
501
+ color: #000;
502
+ }
497
503
  }
498
504
 
499
505
  .editorTabs {
@@ -803,25 +809,25 @@ blockquote {
803
809
  visibility: hidden;
804
810
  opacity: 0;
805
811
  transition: all 0.5s;
812
+ text-align: center;
806
813
  }
807
814
 
808
815
  .uploadImageSection:hover .removeImageText {
809
816
  visibility: visible;
810
817
  opacity: 1;
818
+ text-align: center;
811
819
  }
812
820
 
813
821
  .uploadImageText,
814
822
  .removeImageText {
815
- border: 2px dashed #fff;
816
- border-radius: 8px;
817
- color: #fff;
818
- padding: 2px 8px;
819
- background-color: #00000090;
820
- font-size: 13px;
821
- font-weight: 600;
823
+ font-size: 16px;
824
+ font-weight: 400;
825
+ width: 200px;
822
826
  cursor: pointer;
823
- display: flex;
824
- align-items: center;
827
+ color:#464646;
828
+ span {
829
+ text-transform: capitalize;
830
+ }
825
831
  }
826
832
 
827
833
  .textFontArrows {
@@ -215,10 +215,14 @@ function AppHeader(props) {
215
215
  paddingRight: "0px"
216
216
  },
217
217
  children: [/*#__PURE__*/_jsx(IconButton, {
218
+ className: "app-drawer-btn",
218
219
  color: "inherit",
219
220
  "aria-label": "open drawer",
220
221
  edge: "start",
221
222
  onClick: handleDrawerToggle,
223
+ style: {
224
+ color: textColor
225
+ },
222
226
  sx: {
223
227
  mr: 2,
224
228
  display: {
@@ -262,10 +266,14 @@ function AppHeader(props) {
262
266
  }
263
267
  },
264
268
  children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
269
+ className: "app-drawer-btn",
265
270
  color: "inherit",
266
271
  "aria-label": "open drawer",
267
272
  edge: "start",
268
273
  onClick: handleDrawerToggle,
274
+ style: {
275
+ color: textColor
276
+ },
269
277
  children: /*#__PURE__*/_jsx(MenuIcon, {})
270
278
  }) : null, !isDrawer ? menus.map((item, i) => /*#__PURE__*/_jsx(Button, {
271
279
  component: "a",
@@ -1,7 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
- import { IconButton, Menu, MenuItem, Tooltip, Box } from "@mui/material";
4
+ import { IconButton, Tooltip, Box } from "@mui/material";
5
5
  import * as fIcons from "@mui/icons-material";
6
6
  import SettingsIcon from "@mui/icons-material/Settings";
7
7
  import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -24,7 +24,6 @@ const EditorButton = props => {
24
24
  const editor = useSlateStatic();
25
25
  const path = ReactEditor.findPath(editor, element);
26
26
  const [edit, setEdit] = useState(false);
27
- const [anchorEl, setAnchorEl] = useState(null);
28
27
  const {
29
28
  label,
30
29
  bgColor,
@@ -80,13 +79,8 @@ const EditorButton = props => {
80
79
  const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
81
80
  window.open(refUrl, "_blank").focus();
82
81
  }
83
- } else {
84
- setAnchorEl(e.currentTarget);
85
82
  }
86
83
  };
87
- const handleClose = () => {
88
- setAnchorEl(null);
89
- };
90
84
  const onMenuClick = val => () => {
91
85
  switch (val) {
92
86
  case "open":
@@ -105,6 +99,36 @@ const EditorButton = props => {
105
99
  return;
106
100
  }
107
101
  };
102
+ const Toolbar = () => {
103
+ return !readOnly ? /*#__PURE__*/_jsxs("div", {
104
+ className: "element-toolbar hr",
105
+ style: {
106
+ width: "max-content"
107
+ },
108
+ children: [/*#__PURE__*/_jsx(Tooltip, {
109
+ title: "Settings",
110
+ arrow: true,
111
+ children: /*#__PURE__*/_jsx(IconButton, {
112
+ onClick: onMenuClick("edit"),
113
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
114
+ })
115
+ }), /*#__PURE__*/_jsxs(Tooltip, {
116
+ title: "Open Link",
117
+ arrow: true,
118
+ children: [/*#__PURE__*/_jsx(IconButton, {
119
+ onClick: onMenuClick("open"),
120
+ children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
121
+ }), /*#__PURE__*/_jsx(Tooltip, {
122
+ title: "Delete",
123
+ arrow: true,
124
+ children: /*#__PURE__*/_jsx(IconButton, {
125
+ onClick: onMenuClick("delete"),
126
+ children: /*#__PURE__*/_jsx(DeleteIcon, {})
127
+ })
128
+ })]
129
+ })]
130
+ }) : null;
131
+ };
108
132
  const onSave = data => {
109
133
  const updateData = {
110
134
  ...data
@@ -152,9 +176,16 @@ const EditorButton = props => {
152
176
  fontFamily: fontFamily || "PoppinsRegular",
153
177
  display: "inline-flex",
154
178
  alignItems: "center",
179
+ position: "relative",
180
+ "& .element-toolbar": {
181
+ display: "none"
182
+ },
155
183
  "&:hover": {
156
184
  color: `${textColorHover || textColor || "#FFFFFF"}`,
157
- background: bgColorHover || bgColor || "rgb(30, 75, 122)"
185
+ background: bgColorHover || bgColor || "rgb(30, 75, 122)",
186
+ "& .element-toolbar": {
187
+ display: "block"
188
+ }
158
189
  }
159
190
  },
160
191
  onClick: onClick,
@@ -168,7 +199,7 @@ const EditorButton = props => {
168
199
  paddingLeft: "4px",
169
200
  paddingRight: "4px"
170
201
  }
171
- })]
202
+ }), /*#__PURE__*/_jsx(Toolbar, {})]
172
203
  })
173
204
  }), /*#__PURE__*/_jsx("div", {
174
205
  contentEditable: false,
@@ -176,39 +207,6 @@ const EditorButton = props => {
176
207
  display: "inline"
177
208
  },
178
209
  children: children
179
- }), /*#__PURE__*/_jsxs(Menu, {
180
- className: "editor-btn-options",
181
- open: anchorEl !== null,
182
- anchorEl: anchorEl,
183
- onClose: handleClose,
184
- children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
185
- onClick: onMenuClick("edit"),
186
- children: /*#__PURE__*/_jsx(Tooltip, {
187
- title: "Settings",
188
- arrow: true,
189
- children: /*#__PURE__*/_jsx(IconButton, {
190
- children: /*#__PURE__*/_jsx(SettingsIcon, {})
191
- })
192
- })
193
- }), /*#__PURE__*/_jsx(MenuItem, {
194
- title: "Open Link",
195
- arrow: true,
196
- onClick: onMenuClick("open"),
197
- children: /*#__PURE__*/_jsx(Tooltip, {
198
- children: /*#__PURE__*/_jsx(IconButton, {
199
- children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
200
- })
201
- })
202
- }), !readOnly && /*#__PURE__*/_jsx(MenuItem, {
203
- title: "Delete",
204
- arrow: true,
205
- onClick: onMenuClick("delete"),
206
- children: /*#__PURE__*/_jsx(Tooltip, {
207
- children: /*#__PURE__*/_jsx(IconButton, {
208
- children: /*#__PURE__*/_jsx(DeleteIcon, {})
209
- })
210
- })
211
- })]
212
210
  }), edit && /*#__PURE__*/_jsx(ButtonPopup, {
213
211
  element: element,
214
212
  onSave: onSave,
@@ -26,7 +26,8 @@ const Image = ({
26
26
  borderColor,
27
27
  borderRadius,
28
28
  cols,
29
- rowHeight
29
+ rowHeight,
30
+ boxShadow
30
31
  } = element;
31
32
  const {
32
33
  readOnly
@@ -48,16 +49,22 @@ const Image = ({
48
49
  horizantal
49
50
  } = alignment || {};
50
51
  const editor = useSlateStatic();
51
- // const selected = useSelected();
52
52
  const [parentDOM, setParentDOM] = useState(null);
53
53
  const [openSetttings, setOpenSettings] = useState(false);
54
+ const path = ReactEditor.findPath(editor, element);
54
55
  const [size, onMouseDown, resizing, onLoad] = useResize({
55
56
  parentDOM,
56
- size: element?.size
57
+ size: element?.size,
58
+ onChange: uSize => {
59
+ Transforms.setNodes(editor, {
60
+ size: uSize
61
+ }, {
62
+ at: path
63
+ });
64
+ }
57
65
  });
58
66
  const arr = Array.from(Node.elements(editor));
59
67
  const ele = arr.find(([elem]) => element === elem);
60
- const path = ReactEditor.findPath(editor, element);
61
68
  const {
62
69
  hoverPath
63
70
  } = useEditorContext();
@@ -69,18 +76,6 @@ const Image = ({
69
76
  onLoad(element?.size || {});
70
77
  }
71
78
  }, []);
72
- useEffect(() => {
73
- if (!resizing) {
74
- onLoad(element?.size || {});
75
- }
76
- }, [element?.size]);
77
- useEffect(() => {
78
- if (!resizing) {
79
- Transforms.setNodes(editor, {
80
- size: size
81
- });
82
- }
83
- }, [resizing]);
84
79
  const handleImageClick = () => {
85
80
  Transforms.select(editor, {
86
81
  anchor: Editor.start(editor, path),
@@ -121,7 +116,7 @@ const Image = ({
121
116
 
122
117
  const ToolBar = () => {
123
118
  return selected ? /*#__PURE__*/_jsx("div", {
124
- className: "element-toolbar",
119
+ className: "element-toolbar visible-on-hover",
125
120
  contentEditable: false,
126
121
  children: /*#__PURE__*/_jsx(Tooltip, {
127
122
  title: "Image Settings",
@@ -174,12 +169,15 @@ const Image = ({
174
169
  cols: cols
175
170
  }) : /*#__PURE__*/_jsx("img", {
176
171
  style: {
177
- borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`
172
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
173
+ objectFit: "cover",
174
+ boxShadow: boxShadow || "none"
178
175
  },
179
176
  alt: alt,
180
177
  src: url,
181
178
  onClick: handleImageClick,
182
- "data-path": path.join(",")
179
+ "data-path": path.join(","),
180
+ draggable: false
183
181
  }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
184
182
  onPointerDown: onMouseDown,
185
183
  style: {
@@ -38,27 +38,27 @@ const Video = ({
38
38
  left,
39
39
  right
40
40
  } = bannerSpacing || {};
41
+ const path = ReactEditor.findPath(editor, element);
41
42
  const [size, onMouseDown, resizing, onLoad] = useResize({
42
43
  parentDOM,
43
- size: element?.size
44
+ size: element?.size,
45
+ onChange: uSize => {
46
+ Transforms.setNodes(editor, {
47
+ size: uSize
48
+ }, {
49
+ at: path
50
+ });
51
+ }
44
52
  });
45
53
  const arr = Array.from(Node.elements(editor));
46
54
  const ele = arr.find(([elem]) => element === elem);
47
- const path = ReactEditor.findPath(editor, element);
48
55
  useEffect(() => {
49
56
  if (editor && ele[1] !== undefined) {
50
57
  const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
51
58
  setParentDOM(dom);
52
- onLoad(dom);
59
+ onLoad(element?.size || {});
53
60
  }
54
61
  }, []);
55
- useEffect(() => {
56
- if (!resizing) {
57
- Transforms.setNodes(editor, {
58
- size: size
59
- });
60
- }
61
- }, [resizing]);
62
62
  const ToolBar = () => {
63
63
  return /*#__PURE__*/_jsxs("div", {
64
64
  className: "element-toolbar visible-on-hover",
@@ -104,7 +104,7 @@ const Video = ({
104
104
  });
105
105
  };
106
106
  const totalMinus = parseInt(left || 0) + parseInt(right || 0);
107
- const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
107
+ const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
108
108
  return /*#__PURE__*/_jsxs("div", {
109
109
  ...attributes,
110
110
  className: "embed has-hover",
@@ -1,4 +1,4 @@
1
- import { Button, Divider, Grid, IconButton, Menu, MenuItem, TextField, TextareaAutosize, Tooltip } from "@mui/material";
1
+ import { Button, Divider, Grid, IconButton, Menu, MenuItem, TextareaAutosize, Tooltip } from "@mui/material";
2
2
  import React, { useState } from "react";
3
3
  import FormStyles from "./Styles";
4
4
  import Icon from "../../../common/Icon";
@@ -6,8 +6,6 @@ import { gridItem } from "../../utils/gridItem";
6
6
  import GridPopup from "./GridPopup";
7
7
  import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
8
8
  import { insertGrid } from "../../utils/grid";
9
- // import useDragAndDrop from "../../common/useDragAndDrop";
10
- import useResize from "../../utils/customHooks/useResize";
11
9
  import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
12
10
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
13
11
  import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
@@ -34,7 +32,6 @@ const Grid = props => {
34
32
  bgColor,
35
33
  alignment,
36
34
  backgroundImage,
37
- // size: elSize,
38
35
  fgColor,
39
36
  borderWidth,
40
37
  borderColor,
@@ -58,47 +55,14 @@ const Grid = props => {
58
55
  bottomLeft,
59
56
  bottomRight
60
57
  } = borderRadius || {};
61
- // const { height: elHeight } = elSize || {};
62
58
  const editor = useSlateStatic();
63
- // const selected = useSelected();
64
- // const [selected, setSelected] = useState(false);
65
59
  const path = ReactEditor.findPath(editor, element);
66
- const [parentDOM, setParentDOM] = useState(null);
67
- // resize
68
- const [size,, resizing, onLoad] = useResize({
69
- parentDOM,
70
- size: element?.size,
71
- isGrid: true
72
- });
73
60
  const arr = Array.from(Node.elements(editor));
74
61
  const ele = arr.find(([elem]) => element === elem);
75
62
  const {
76
63
  hoverPath
77
64
  } = useEditorContext();
78
65
  const selected = hoverPath === path.join(",");
79
- useEffect(() => {
80
- if (editor && ele[1] !== undefined) {
81
- const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
82
- const {
83
- height
84
- } = dom?.getBoundingClientRect();
85
- setParentDOM(dom);
86
- onLoad(element?.size || {
87
- height: height
88
- });
89
- }
90
- }, []);
91
-
92
- // upadate resize data once resize done
93
- useEffect(() => {
94
- if (!resizing) {
95
- Transforms.setNodes(editor, {
96
- size: size
97
- }, {
98
- at: path
99
- });
100
- }
101
- }, [resizing]);
102
66
  const onAddGridItem = () => {
103
67
  const currentPath = editor.selection?.anchor?.path;
104
68
  const ancestorsPath = Path.ancestors(currentPath, {
@@ -209,41 +173,6 @@ const Grid = props => {
209
173
  console.log(err);
210
174
  }
211
175
  };
212
-
213
- // const onDrop = (dropElement) => {
214
- // try {
215
- // Transforms.insertNodes(editor, JSON.parse(dropElement), {
216
- // at: path,
217
- // select: true,
218
- // });
219
- // } catch (err) {
220
- // console.log(err);
221
- // }
222
- // };
223
-
224
- // const onDragEnd = () => {
225
- // try {
226
- // const currentDelpath = ReactEditor.findPath(editor, element);
227
- // if (currentDelpath) {
228
- // Transforms.removeNodes(editor, { at: currentDelpath });
229
- // }
230
- // } catch (err) {
231
- // console.log(err);
232
- // }
233
- // };
234
-
235
- // const grid_drag_id = `grid_drag_${path.join("_")}`;
236
-
237
- // const [dndElements, isDragging, isActiveDrag] = useDragAndDrop({
238
- // editor,
239
- // id: grid_drag_id,
240
- // selected,
241
- // path,
242
- // element,
243
- // onDragEnd,
244
- // onDrop,
245
- // });
246
-
247
176
  const NewLineButtons = () => {
248
177
  return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
249
178
  children: [/*#__PURE__*/_jsx("div", {
@@ -319,78 +248,85 @@ const Grid = props => {
319
248
  const bgImage = backgroundImage && backgroundImage !== "none" ? {
320
249
  backgroundImage: `url(${backgroundImage})`
321
250
  } : {};
322
- return /*#__PURE__*/_jsxs(GridContainer, {
323
- container: true,
324
- className: `grid-container ${grid} has-hover element-root`,
325
- ...attributes,
326
- ...sectionId,
251
+ return /*#__PURE__*/_jsx("section", {
252
+ className: "section-wrapper-fluid",
327
253
  style: {
254
+ display: "flex",
255
+ width: "100%",
328
256
  background: bgColor,
329
- alignContent: vertical,
330
257
  ...bgImage,
331
- borderColor: borderColor || "transparent",
332
- borderWidth: borderWidth || "1px",
333
- borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
334
- borderStyle: borderStyle || "solid"
258
+ backgroundSize: "cover",
259
+ justifyContent: "center",
260
+ alignItems: "center"
335
261
  },
336
- "data-path": path.join(","),
337
- children: [fgColor && /*#__PURE__*/_jsx("div", {
262
+ children: /*#__PURE__*/_jsxs(GridContainer, {
263
+ container: true,
264
+ className: `grid-container ${grid} has-hover element-root`,
265
+ ...attributes,
266
+ ...sectionId,
338
267
  style: {
339
- position: "absolute",
340
- pointerEvents: "none",
341
- width: "100%",
342
- height: "100%",
343
- background: fgColor,
344
- backgroundRepeat: "no-repeat",
345
- backgroundSize: "cover"
346
- }
347
- }), !readOnly && /*#__PURE__*/_jsxs("div", {
348
- className: `element-selector ${selected ? "selected" : ""}`,
349
- contentEditable: false,
350
- children: [/*#__PURE__*/_jsx("div", {
351
- className: "element-selector-dots tl",
352
- children: " "
353
- }), /*#__PURE__*/_jsx("div", {
354
- className: "element-selector-dots tr",
355
- children: " "
356
- }), /*#__PURE__*/_jsx("div", {
357
- className: "element-selector-dots bl",
358
- children: " "
359
- }), /*#__PURE__*/_jsx("div", {
360
- className: "element-selector-dots br",
361
- children: " "
362
- }), /*#__PURE__*/_jsx(GridToolBar, {})]
363
- }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
364
- element: element,
365
- onSave: onSave,
366
- onClose: onClose,
367
- onDelete: onDelete,
368
- customProps: customProps
369
- }) : null, /*#__PURE__*/_jsx(GridContainer, {
370
- item: true,
371
- xs: 12,
372
- className: "grid-c-wrpr",
373
- style: {
374
- display: "flex",
375
- paddingLeft: `${left}px`,
376
- paddingRight: `${right}px`,
377
- paddingTop: `${top}px`,
378
- paddingBottom: `${bottom}px`,
379
- alignItems: vertical || "start",
380
- justifyContent: horizantal || "start",
381
- flexDirection: flexDirection || "row",
382
- width: "100%"
383
- // height cause overlap issues TBD
384
- // height: resizing
385
- // ? `${size?.height}px`
386
- // : elHeight
387
- // ? `${elHeight}px`
388
- // : "fit-content",
268
+ // background: bgColor,
269
+ alignContent: vertical,
270
+ // ...bgImage,
271
+ borderColor: borderColor || "transparent",
272
+ borderWidth: borderWidth || "1px",
273
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
274
+ borderStyle: borderStyle || "solid",
275
+ maxWidth: "1440px",
276
+ width: "80%"
389
277
  },
390
-
391
278
  "data-path": path.join(","),
392
- children: children
393
- }), /*#__PURE__*/_jsx(NewLineButtons, {})]
279
+ children: [fgColor && /*#__PURE__*/_jsx("div", {
280
+ style: {
281
+ position: "absolute",
282
+ pointerEvents: "none",
283
+ width: "100%",
284
+ height: "100%",
285
+ background: fgColor,
286
+ backgroundRepeat: "no-repeat",
287
+ backgroundSize: "cover"
288
+ }
289
+ }), !readOnly && /*#__PURE__*/_jsxs("div", {
290
+ className: `element-selector ${selected ? "selected" : ""}`,
291
+ contentEditable: false,
292
+ children: [/*#__PURE__*/_jsx("div", {
293
+ className: "element-selector-dots tl",
294
+ children: " "
295
+ }), /*#__PURE__*/_jsx("div", {
296
+ className: "element-selector-dots tr",
297
+ children: " "
298
+ }), /*#__PURE__*/_jsx("div", {
299
+ className: "element-selector-dots bl",
300
+ children: " "
301
+ }), /*#__PURE__*/_jsx("div", {
302
+ className: "element-selector-dots br",
303
+ children: " "
304
+ }), /*#__PURE__*/_jsx(GridToolBar, {})]
305
+ }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
306
+ element: element,
307
+ onSave: onSave,
308
+ onClose: onClose,
309
+ onDelete: onDelete,
310
+ customProps: customProps
311
+ }) : null, /*#__PURE__*/_jsx(GridContainer, {
312
+ item: true,
313
+ xs: 12,
314
+ className: "grid-c-wrpr",
315
+ style: {
316
+ display: "flex",
317
+ paddingLeft: `${left}px`,
318
+ paddingRight: `${right}px`,
319
+ paddingTop: `${top}px`,
320
+ paddingBottom: `${bottom}px`,
321
+ alignItems: vertical || "start",
322
+ justifyContent: horizantal || "start",
323
+ flexDirection: flexDirection || "row",
324
+ width: "100%"
325
+ },
326
+ "data-path": path.join(","),
327
+ children: children
328
+ }), /*#__PURE__*/_jsx(NewLineButtons, {})]
329
+ })
394
330
  });
395
331
  };
396
332
  export default Grid;
@@ -27,7 +27,17 @@ const Signed = props => {
27
27
  };
28
28
  const onDelete = () => {
29
29
  const path = ReactEditor.findPath(editor, element);
30
- Transforms.removeNodes(editor, {
30
+ Transforms.setNodes(editor, {
31
+ type: "signature",
32
+ signature: null,
33
+ fontFamily: "",
34
+ signedBy: "",
35
+ signedOn: formatDate(new Date(), "MM/DD/YYYY"),
36
+ signedText: "",
37
+ children: [{
38
+ text: ""
39
+ }]
40
+ }, {
31
41
  at: path
32
42
  });
33
43
  };
@@ -26,6 +26,17 @@ const SimpleTextStyle = () => ({
26
26
  fontSize: "12px"
27
27
  }
28
28
  }
29
+ },
30
+ section: {
31
+ display: "flex",
32
+ width: "100%",
33
+ backgroundSize: "cover",
34
+ justifyContent: "center",
35
+ alignItems: "center",
36
+ "& .simple-text": {
37
+ width: "80%",
38
+ maxWidth: "1440px"
39
+ }
29
40
  }
30
41
  });
31
42
  const SimpleText = props => {
@@ -73,7 +73,7 @@ const TopBanner = props => {
73
73
  ...attributes,
74
74
  style: {
75
75
  position: "relative",
76
- height: "320px",
76
+ height: "280px",
77
77
  textAlign: "center"
78
78
  },
79
79
  contentEditable: false,
@@ -83,7 +83,7 @@ const TopBanner = props => {
83
83
  alt: "Top Banner",
84
84
  style: {
85
85
  width: "100%",
86
- height: "320px",
86
+ height: "280px",
87
87
  objectFit: "cover",
88
88
  borderRadius: "0px",
89
89
  margin: "0px 0px"