@flozy/editor 1.3.1 → 1.3.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. package/dist/Editor/CommonEditor.js +11 -6
  2. package/dist/Editor/DialogWrapper.js +5 -0
  3. package/dist/Editor/Elements/Accordion/AccordionButton.js +10 -7
  4. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +7 -4
  5. package/dist/Editor/Elements/Button/ButtonToolIcon.js +7 -4
  6. package/dist/Editor/Elements/Carousel/Carousel.js +6 -2
  7. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -4
  8. package/dist/Editor/Elements/Color Picker/ColorPicker.js +3 -1
  9. package/dist/Editor/Elements/Embed/Embed.css +2 -2
  10. package/dist/Editor/Elements/Embed/Embed.js +17 -12
  11. package/dist/Editor/Elements/Embed/Image.js +11 -11
  12. package/dist/Editor/Elements/Embed/Video.js +13 -10
  13. package/dist/Editor/Elements/Grid/Grid.js +14 -1
  14. package/dist/Editor/Elements/Grid/GridButton.js +47 -7
  15. package/dist/Editor/Elements/Grid/GridItem.js +16 -26
  16. package/dist/Editor/Elements/Grid/templates/full_grid.png +0 -0
  17. package/dist/Editor/Elements/Grid/templates/index.js +5 -0
  18. package/dist/Editor/Elements/Link/LinkButton.js +12 -8
  19. package/dist/Editor/Elements/NewLine/NewLineButton.js +12 -9
  20. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +7 -4
  21. package/dist/Editor/Elements/Signature/SignatureButton.js +7 -4
  22. package/dist/Editor/Elements/Signature/SignaturePopup.js +2 -4
  23. package/dist/Editor/Elements/Table/Table.js +4 -1
  24. package/dist/Editor/Elements/Table/TableCell.js +17 -9
  25. package/dist/Editor/Elements/Table/TableSelector.js +12 -9
  26. package/dist/Editor/Toolbar/FormatTools/BlockButton.js +3 -1
  27. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +3 -1
  28. package/dist/Editor/Toolbar/Toolbar.js +18 -13
  29. package/dist/Editor/Toolbar/toolbarGroups.js +34 -17
  30. package/dist/Editor/common/Button.js +10 -6
  31. package/dist/Editor/common/ColorPickerButton.js +6 -1
  32. package/dist/Editor/common/Icon.js +1 -1
  33. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +20 -20
  34. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +19 -19
  35. package/dist/Editor/common/Uploader.js +4 -3
  36. package/dist/Editor/plugins/withEmbeds.js +0 -1
  37. package/package.json +1 -1
@@ -16,7 +16,6 @@ import "./Editor.css";
16
16
  import { serialize } from "./utils/serializer";
17
17
  import { getThumbnailImage } from "./helper";
18
18
  import PopupTool from "./Toolbar/PopupTool";
19
- import { Button } from "@mui/material";
20
19
  import { jsx as _jsx } from "react/jsx-runtime";
21
20
  import { jsxs as _jsxs } from "react/jsx-runtime";
22
21
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -57,7 +56,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
57
56
  h: null
58
57
  });
59
58
  const {
60
- defaultBG
59
+ defaultBG,
60
+ needDotsBG,
61
+ footer
61
62
  } = otherProps || {};
62
63
  const editor = useMemo(() => {
63
64
  if (collaborativeEditor) return collaborativeEditor;
@@ -218,19 +219,23 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
218
219
  }
219
220
  }, [chars, editor, target, mentions, setMentions]);
220
221
  const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
222
+ const dotBg = needDotsBG ? {
223
+ background: "white",
224
+ backgroundImage: "radial-gradient(#CCC 2px, transparent 0)",
225
+ backgroundSize: "40px 40px",
226
+ backgroundPosition: "-19px -19px"
227
+ } : {};
221
228
  return /*#__PURE__*/_jsx(DialogWrapper, {
222
229
  ...props,
223
230
  fullScreen: fullScreen,
231
+ footer: footer || "",
224
232
  children: /*#__PURE__*/_jsx("div", {
225
233
  className: "editor-t-wrapper",
226
234
  style: {
227
235
  display: "flex",
228
236
  flexDirection: "column",
229
237
  padding: "0 8px",
230
- background: "white",
231
- backgroundImage: "radial-gradient(#CCC 2px, transparent 0)",
232
- backgroundSize: "40px 40px",
233
- backgroundPosition: "-19px -19px"
238
+ ...dotBg
234
239
  },
235
240
  children: /*#__PURE__*/_jsxs(Slate, {
236
241
  editor: editor,
@@ -33,6 +33,11 @@ const DialogWrapper = props => {
33
33
  }), /*#__PURE__*/_jsx(DialogContent, {
34
34
  children: children
35
35
  }), /*#__PURE__*/_jsx(DialogActions, {
36
+ style: {
37
+ justifyContent: "center",
38
+ color: "#64748B",
39
+ fontSize: "13px"
40
+ },
36
41
  children: footer
37
42
  })]
38
43
  }) : children;
@@ -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 { insertAccordion } from "../../utils/accordion";
4
4
  import { AccordionIcon } from "../../common/iconslist";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,13 +10,16 @@ const AccordionButton = props => {
10
10
  const handleInsertAccordion = () => {
11
11
  insertAccordion(editor);
12
12
  };
13
- return /*#__PURE__*/_jsx(IconButton, {
14
- onClick: handleInsertAccordion,
13
+ return /*#__PURE__*/_jsx(Tooltip, {
15
14
  title: "Accordion",
16
- style: {
17
- marginLeft: "0px"
18
- },
19
- children: /*#__PURE__*/_jsx(AccordionIcon, {})
15
+ arrow: true,
16
+ children: /*#__PURE__*/_jsx(IconButton, {
17
+ onClick: handleInsertAccordion,
18
+ style: {
19
+ marginLeft: "0px"
20
+ },
21
+ children: /*#__PURE__*/_jsx(AccordionIcon, {})
22
+ })
20
23
  });
21
24
  };
22
25
  export default AccordionButton;
@@ -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 { insertAppHeader } from "../../utils/insertAppHeader";
4
4
  import { AppHeader } from "../../common/iconslist";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,10 +10,13 @@ const AppHeaderButton = props => {
10
10
  const handleClick = () => {
11
11
  insertAppHeader(editor, {});
12
12
  };
13
- return /*#__PURE__*/_jsx(IconButton, {
13
+ return /*#__PURE__*/_jsx(Tooltip, {
14
14
  title: "App Header",
15
- onClick: handleClick,
16
- children: /*#__PURE__*/_jsx(AppHeader, {})
15
+ arrow: true,
16
+ children: /*#__PURE__*/_jsx(IconButton, {
17
+ onClick: handleClick,
18
+ children: /*#__PURE__*/_jsx(AppHeader, {})
19
+ })
17
20
  });
18
21
  };
19
22
  export default AppHeaderButton;
@@ -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 { insertButton } from "../../utils/button";
4
4
  import { ButtonIcon } from "../../common/iconslist";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,10 +10,13 @@ const ButtonToolIcon = props => {
10
10
  const handleInsertButton = () => {
11
11
  insertButton(editor);
12
12
  };
13
- return /*#__PURE__*/_jsx(IconButton, {
14
- onClick: handleInsertButton,
13
+ return /*#__PURE__*/_jsx(Tooltip, {
15
14
  title: "Button",
16
- children: /*#__PURE__*/_jsx(ButtonIcon, {})
15
+ arrow: true,
16
+ children: /*#__PURE__*/_jsx(IconButton, {
17
+ onClick: handleInsertButton,
18
+ children: /*#__PURE__*/_jsx(ButtonIcon, {})
19
+ })
17
20
  });
18
21
  };
19
22
  export default ButtonToolIcon;
@@ -20,8 +20,12 @@ const Carousel = props => {
20
20
  const {
21
21
  attributes,
22
22
  children,
23
- element
23
+ element,
24
+ customProps
24
25
  } = props;
26
+ const {
27
+ readOnly
28
+ } = customProps;
25
29
  const editor = useSlateStatic();
26
30
  const selected = useSelected();
27
31
  const [edit, setEdit] = useState(false);
@@ -91,7 +95,7 @@ const Carousel = props => {
91
95
  }) : /*#__PURE__*/_jsx(Slider, {
92
96
  ...settings,
93
97
  children: children
94
- }, reload), /*#__PURE__*/_jsx(ToolBar, {})]
98
+ }, reload), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
95
99
  });
96
100
  };
97
101
  export default Carousel;
@@ -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 { insertCarousel } from "../../utils/carousel";
4
4
  import { Carousal } from "../../common/iconslist";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,10 +10,13 @@ const CarouselButton = props => {
10
10
  const handleClick = () => {
11
11
  insertCarousel(editor);
12
12
  };
13
- return /*#__PURE__*/_jsx(IconButton, {
13
+ return /*#__PURE__*/_jsx(Tooltip, {
14
14
  title: "Carousel",
15
- onClick: handleClick,
16
- children: /*#__PURE__*/_jsx(Carousal, {})
15
+ arrow: true,
16
+ children: /*#__PURE__*/_jsx(IconButton, {
17
+ onClick: handleClick,
18
+ children: /*#__PURE__*/_jsx(Carousal, {})
19
+ })
17
20
  });
18
21
  };
19
22
  export default CarouselButton;
@@ -18,7 +18,8 @@ const DEFAULT_COLOR = {
18
18
  const ColorPicker = ({
19
19
  format,
20
20
  editor,
21
- showHex
21
+ showHex,
22
+ title
22
23
  }) => {
23
24
  const [selection, setSelection] = useState();
24
25
  const [hexValue, setHexValue] = useState("");
@@ -81,6 +82,7 @@ const ColorPicker = ({
81
82
  },
82
83
  className: showOptions ? "clicked" : "",
83
84
  onClick: toggleOption,
85
+ title: title,
84
86
  children: logo[format](activeColor)
85
87
  }), showOptions && /*#__PURE__*/_jsxs(_Fragment, {
86
88
  children: [/*#__PURE__*/_jsx("div", {
@@ -9,8 +9,8 @@
9
9
  }
10
10
  .embed button.resize{
11
11
  position: absolute;
12
- bottom: -6px;
13
- right: 0;
12
+ bottom: 2px;
13
+ right: 2px;
14
14
  }
15
15
 
16
16
  .image-text-wrapper {
@@ -1,7 +1,7 @@
1
1
  import React, { useRef, useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor } from "slate-react";
4
- import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography } from "@mui/material";
4
+ import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography, Tooltip } from "@mui/material";
5
5
  import CloseIcon from "@mui/icons-material/Close";
6
6
  import Icon from "../../common/Icon";
7
7
  import { isBlockActive } from "../../utils/SlateUtilityFunctions";
@@ -73,16 +73,20 @@ const Embed = ({
73
73
  };
74
74
  const imageURL = formData?.url === "none" || !formData?.url ? "" : formData?.url;
75
75
  return /*#__PURE__*/_jsxs(_Fragment, {
76
- children: [/*#__PURE__*/_jsx(IconButton, {
77
- className: isBlockActive(editor, format) ? "active" : "",
78
- style: {
79
- border: showInput ? "1px solid lightgray" : "",
80
- borderBottom: "none"
81
- },
82
- format: format,
83
- onClick: onToggle,
84
- children: /*#__PURE__*/_jsx(Icon, {
85
- icon: format
76
+ children: [/*#__PURE__*/_jsx(Tooltip, {
77
+ title: EMBED_LABEL[format],
78
+ arrow: true,
79
+ children: /*#__PURE__*/_jsx(IconButton, {
80
+ className: isBlockActive(editor, format) ? "active" : "",
81
+ style: {
82
+ border: showInput ? "1px solid lightgray" : "",
83
+ borderBottom: "none"
84
+ },
85
+ format: format,
86
+ onClick: onToggle,
87
+ children: /*#__PURE__*/_jsx(Icon, {
88
+ icon: format
89
+ })
86
90
  })
87
91
  }), /*#__PURE__*/_jsx(Dialog, {
88
92
  open: open,
@@ -141,7 +145,8 @@ const Embed = ({
141
145
  key: "url"
142
146
  },
143
147
  customProps: customProps,
144
- onUploaded: onUploaded
148
+ onUploaded: onUploaded,
149
+ disableUpload: format === "video"
145
150
  })]
146
151
  })
147
152
  }), /*#__PURE__*/_jsxs(DialogActions, {
@@ -1,10 +1,11 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
3
- import { Node, Transforms, Editor, Element, Path } from "slate";
4
- import Icon from "../../common/Icon";
3
+ import { Node, Transforms, Editor } from "slate";
4
+ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
5
5
  import useResize from "../../utils/customHooks/useResize";
6
6
  import { insertImageText } from "../../utils/imageText";
7
7
  import EmbedPopup from "./EmbedPopup";
8
+ import { IconButton } from "@mui/material";
8
9
  import { jsx as _jsx } from "react/jsx-runtime";
9
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
11
  const Image = ({
@@ -21,6 +22,9 @@ const Image = ({
21
22
  bgColor,
22
23
  borderColor
23
24
  } = element;
25
+ const {
26
+ readOnly
27
+ } = customProps;
24
28
  const {
25
29
  left,
26
30
  top,
@@ -123,7 +127,7 @@ const Image = ({
123
127
  border: `1px solid ${borderColor}`
124
128
  },
125
129
  ...element.attr,
126
- children: [/*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
130
+ children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
127
131
  element: element,
128
132
  onSave: onSave,
129
133
  onClose: onClose,
@@ -135,22 +139,18 @@ const Image = ({
135
139
  width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
136
140
  height: `${size.height}px`
137
141
  },
138
- children: [/*#__PURE__*/_jsx("img", {
142
+ children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx("img", {
139
143
  alt: alt,
140
144
  src: url,
141
145
  onClick: handleImageClick
142
- }), selected && /*#__PURE__*/_jsx("button", {
146
+ }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
143
147
  onPointerDown: onMouseDown,
144
148
  style: {
145
- width: "15px",
146
- height: "15px",
147
149
  opacity: 1,
148
- background: "transparent"
150
+ background: "#FFF"
149
151
  },
150
152
  className: "resize",
151
- children: /*#__PURE__*/_jsx(Icon, {
152
- icon: "resize"
153
- })
153
+ children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
154
154
  })]
155
155
  }), children]
156
156
  });
@@ -1,8 +1,10 @@
1
1
  import React, { useState, useEffect } from "react";
2
2
  import { useSelected, useFocused, useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Node, Transforms } from "slate";
4
+ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
4
5
  import Icon from "../../common/Icon";
5
6
  import useResize from "../../utils/customHooks/useResize";
7
+ import { IconButton } from "@mui/material";
6
8
  import { jsx as _jsx } from "react/jsx-runtime";
7
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
10
  const Video = ({
@@ -70,22 +72,23 @@ const Video = ({
70
72
  children: /*#__PURE__*/_jsx(Icon, {
71
73
  icon: "videoPlayer"
72
74
  })
73
- }) : /*#__PURE__*/_jsx("iframe", {
75
+ }) : /*#__PURE__*/_jsx("video", {
76
+ style: {
77
+ border: "none",
78
+ width: "100%",
79
+ height: "100%"
80
+ },
74
81
  src: url,
75
- frameBorder: "0",
76
- title: alt
77
- }), selected && /*#__PURE__*/_jsx("button", {
82
+ title: alt,
83
+ controls: true
84
+ }), selected && /*#__PURE__*/_jsx(IconButton, {
78
85
  onPointerDown: onMouseDown,
79
86
  style: {
80
- width: "15px",
81
- height: "15px",
82
87
  opacity: 1,
83
- background: "transparent"
88
+ background: "#FFF"
84
89
  },
85
90
  className: "resize",
86
- children: /*#__PURE__*/_jsx(Icon, {
87
- icon: "resize"
88
- })
91
+ children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
89
92
  })]
90
93
  }), children]
91
94
  });
@@ -12,6 +12,9 @@ const Grid = props => {
12
12
  element,
13
13
  customProps
14
14
  } = props;
15
+ const {
16
+ readOnly
17
+ } = customProps;
15
18
  const [openSetttings, setOpenSettings] = useState(false);
16
19
  const {
17
20
  grid,
@@ -76,6 +79,13 @@ const Grid = props => {
76
79
  const onClose = () => {
77
80
  setOpenSettings(false);
78
81
  };
82
+ const onDelete = () => {
83
+ if (path) {
84
+ Transforms.removeNodes(editor, {
85
+ at: path
86
+ });
87
+ }
88
+ };
79
89
  const GridToolBar = () => {
80
90
  return selected ? /*#__PURE__*/_jsxs("div", {
81
91
  className: "grid-container-toolbar",
@@ -83,6 +93,9 @@ const Grid = props => {
83
93
  children: [/*#__PURE__*/_jsx("button", {
84
94
  onClick: onSettings,
85
95
  children: "Settings"
96
+ }), /*#__PURE__*/_jsx("button", {
97
+ onClick: onDelete,
98
+ children: "Delete"
86
99
  }), /*#__PURE__*/_jsx("button", {
87
100
  onClick: onAddGridItem,
88
101
  children: "+ Add Item"
@@ -103,7 +116,7 @@ const Grid = props => {
103
116
  backgroundImage: backgroundImage ? `url(${backgroundImage})` : "none",
104
117
  border: `1px solid ${borderColor}`
105
118
  },
106
- children: [/*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
119
+ children: [!readOnly && /*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
107
120
  element: element,
108
121
  onSave: onSave,
109
122
  onClose: onClose,
@@ -1,19 +1,59 @@
1
- import React from "react";
2
- import { IconButton } from "@mui/material";
1
+ import React, { useState } from "react";
2
+ import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
3
3
  import { insertGrid } from "../../utils/grid";
4
4
  import { GridIcon } from "../../common/iconslist";
5
+ import { ImageList, ImageListItem } from "@mui/material";
6
+ import GRID_TEMPLATES from "./templates";
5
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
+ import { jsxs as _jsxs } from "react/jsx-runtime";
9
+ import { Fragment as _Fragment } from "react/jsx-runtime";
6
10
  const GridButton = props => {
7
11
  const {
8
12
  editor
9
13
  } = props;
10
- const handleInsertGrid = () => {
14
+ const [open, setOpen] = useState(false);
15
+ const onButtonClick = () => {
16
+ setOpen(true);
17
+ };
18
+ const handleInsertGrid = () => () => {
11
19
  insertGrid(editor);
20
+ handleClose();
21
+ };
22
+ const handleClose = () => {
23
+ setOpen(false);
12
24
  };
13
- return /*#__PURE__*/_jsx(IconButton, {
14
- onClick: handleInsertGrid,
15
- title: "Layout",
16
- children: /*#__PURE__*/_jsx(GridIcon, {})
25
+ return /*#__PURE__*/_jsxs(_Fragment, {
26
+ children: [/*#__PURE__*/_jsx(Tooltip, {
27
+ title: "Grid",
28
+ arrow: true,
29
+ children: /*#__PURE__*/_jsx(IconButton, {
30
+ onClick: onButtonClick,
31
+ children: /*#__PURE__*/_jsx(GridIcon, {})
32
+ })
33
+ }), /*#__PURE__*/_jsxs(Dialog, {
34
+ open: open,
35
+ onClose: handleClose,
36
+ fullWidth: true,
37
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
38
+ children: "Templates"
39
+ }), /*#__PURE__*/_jsx(DialogContent, {
40
+ children: /*#__PURE__*/_jsx(ImageList, {
41
+ variant: "quilted",
42
+ cols: 1,
43
+ children: GRID_TEMPLATES.map(item => {
44
+ return /*#__PURE__*/_jsx(ImageListItem, {
45
+ onClick: handleInsertGrid(item),
46
+ children: /*#__PURE__*/_jsx("img", {
47
+ src: item.img,
48
+ alt: item.title,
49
+ width: "auto",
50
+ height: "250px"
51
+ })
52
+ }, item.img);
53
+ })
54
+ })
55
+ })]
56
+ })]
17
57
  });
18
58
  };
19
59
  export default GridButton;
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Transforms, Element } from "slate";
2
+ import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
4
  import GridItemPopup from "./GridItemPopup";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -8,8 +8,12 @@ const GridItem = props => {
8
8
  const {
9
9
  attributes,
10
10
  children,
11
- element
11
+ element,
12
+ customProps
12
13
  } = props;
14
+ const {
15
+ readOnly
16
+ } = customProps;
13
17
  const [openSetttings, setOpenSettings] = useState(false);
14
18
  const {
15
19
  grid,
@@ -31,24 +35,6 @@ const GridItem = props => {
31
35
  const selected = useSelected();
32
36
  const itemWidth = (grid || 6) / 12 * 100;
33
37
  const path = ReactEditor.findPath(editor, element);
34
- const onItemSizeDecrease = () => {
35
- Transforms.setNodes(editor, {
36
- grid: grid <= 1 ? 1 : grid - 1
37
- }, {
38
- match: node => {
39
- return Element.matches(node, element);
40
- }
41
- });
42
- };
43
- const onItemSizeIncrease = () => {
44
- Transforms.setNodes(editor, {
45
- grid: grid >= 12 ? 12 : grid + 1
46
- }, {
47
- match: node => {
48
- return Element.matches(node, element);
49
- }
50
- });
51
- };
52
38
  const GridItemToolbar = () => {
53
39
  return selected ? /*#__PURE__*/_jsxs("div", {
54
40
  contentEditable: false,
@@ -60,11 +46,8 @@ const GridItem = props => {
60
46
  onClick: onSettings,
61
47
  children: "Settings"
62
48
  }), /*#__PURE__*/_jsx("button", {
63
- onClick: onItemSizeDecrease,
64
- children: "-"
65
- }), /*#__PURE__*/_jsx("button", {
66
- onClick: onItemSizeIncrease,
67
- children: "+"
49
+ onClick: onDelete,
50
+ children: "Delete"
68
51
  })]
69
52
  }) : null;
70
53
  };
@@ -86,6 +69,13 @@ const GridItem = props => {
86
69
  const onClose = () => {
87
70
  setOpenSettings(false);
88
71
  };
72
+ const onDelete = () => {
73
+ if (path) {
74
+ Transforms.removeNodes(editor, {
75
+ at: path
76
+ });
77
+ }
78
+ };
89
79
  return /*#__PURE__*/_jsxs("div", {
90
80
  className: `grid-item xs-${grid}`,
91
81
  ...attributes,
@@ -102,7 +92,7 @@ const GridItem = props => {
102
92
  width: `${itemWidth}%`,
103
93
  margin: "0px"
104
94
  },
105
- children: [children, /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
95
+ children: [children, !readOnly && /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
106
96
  element: element,
107
97
  onSave: onSave,
108
98
  onClose: onClose
@@ -0,0 +1,5 @@
1
+ const GRID_TEMPLATES = [{
2
+ title: "Image Banner with Text",
3
+ img: require("./full_grid.png")
4
+ }];
5
+ export default GRID_TEMPLATES;
@@ -1,6 +1,6 @@
1
1
  import { useRef, useState } from "react";
2
2
  import { Transforms } from "slate";
3
- import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox
3
+ import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Tooltip
4
4
  // styled,
5
5
  } from "@mui/material";
6
6
  // import { styled } from "@mui/material/styles";
@@ -49,13 +49,17 @@ const LinkButton = props => {
49
49
  return /*#__PURE__*/_jsxs("div", {
50
50
  ref: linkInputRef,
51
51
  className: "popup-wrapper1",
52
- children: [/*#__PURE__*/_jsx(IconButton, {
53
- className: showInput ? "clicked" : "",
54
- active: isBlockActive(editor, "link") ? "active" : "",
55
- format: "link",
56
- onClick: toggleLink,
57
- children: /*#__PURE__*/_jsx(Icon, {
58
- icon: "link"
52
+ children: [/*#__PURE__*/_jsx(Tooltip, {
53
+ title: "Link",
54
+ arrow: true,
55
+ children: /*#__PURE__*/_jsx(IconButton, {
56
+ className: showInput ? "clicked" : "",
57
+ active: isBlockActive(editor, "link") ? "active" : "",
58
+ format: "link",
59
+ onClick: toggleLink,
60
+ children: /*#__PURE__*/_jsx(Icon, {
61
+ icon: "link"
62
+ })
59
63
  })
60
64
  }), showInput && /*#__PURE__*/_jsx(Dialog, {
61
65
  open: true,
@@ -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 KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
4
4
  import { Transforms } from "slate";
5
5
  import { ReactEditor, useSlateStatic } from "slate-react";
@@ -18,15 +18,18 @@ const NewLineButton = () => {
18
18
  });
19
19
  ReactEditor.focus(editor);
20
20
  };
21
- return /*#__PURE__*/_jsx(IconButton, {
21
+ return /*#__PURE__*/_jsx(Tooltip, {
22
22
  title: "New Line",
23
- onClick: onAddNewLine,
24
- children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
25
- sx: {
26
- fill: "#64748B",
27
- width: "18px",
28
- height: "18px"
29
- }
23
+ arrow: true,
24
+ children: /*#__PURE__*/_jsx(IconButton, {
25
+ onClick: onAddNewLine,
26
+ children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
27
+ sx: {
28
+ fill: "#64748B",
29
+ width: "18px",
30
+ height: "18px"
31
+ }
32
+ })
30
33
  })
31
34
  });
32
35
  };
@@ -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,