@flozy/editor 1.6.0 → 1.6.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/Editor/CommonEditor.js +131 -104
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +27 -36
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -2
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -20
  8. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +39 -19
  12. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  13. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  14. package/dist/Editor/Elements/Embed/Embed.js +33 -126
  15. package/dist/Editor/Elements/Embed/Image.js +15 -7
  16. package/dist/Editor/Elements/Embed/Video.js +12 -5
  17. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  18. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  19. package/dist/Editor/Elements/Form/Form.js +24 -12
  20. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  21. package/dist/Editor/Elements/Form/FormElements/FormText.js +1 -0
  22. package/dist/Editor/Elements/Form/FormField.js +7 -1
  23. package/dist/Editor/Elements/Grid/Grid.js +15 -4
  24. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  25. package/dist/Editor/Elements/Grid/GridItem.js +30 -19
  26. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  27. package/dist/Editor/Elements/List/CheckList.js +57 -0
  28. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  29. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  30. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -60
  31. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  32. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +50 -7
  34. package/dist/Editor/Elements/SimpleText.js +62 -0
  35. package/dist/Editor/Elements/Table/Styles.js +66 -0
  36. package/dist/Editor/Elements/Table/Table.js +33 -16
  37. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  38. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  39. package/dist/Editor/Elements/Table/table.css +0 -10
  40. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  41. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  42. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  43. package/dist/Editor/Styles/EditorStyles.js +50 -0
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +16 -16
  46. package/dist/Editor/Toolbar/FormatTools/FontSize.js +17 -17
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  48. package/dist/Editor/Toolbar/FormatTools/index.js +3 -2
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  50. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  51. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  52. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  53. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  54. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  57. package/dist/Editor/Toolbar/PopupTool/index.js +33 -44
  58. package/dist/Editor/Toolbar/Toolbar.js +178 -134
  59. package/dist/Editor/Toolbar/styles.css +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +83 -34
  61. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  62. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  63. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  64. package/dist/Editor/common/Icon.js +48 -5
  65. package/dist/Editor/common/ImageList.js +10 -4
  66. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  67. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  68. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  69. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  70. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  71. package/dist/Editor/common/ImageUploader.js +19 -8
  72. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  73. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  74. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  75. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  76. package/dist/Editor/common/Shorthands/elements.js +191 -0
  77. package/dist/Editor/common/Shorthands/index.js +7 -0
  78. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +21 -73
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  81. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  82. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  83. package/dist/Editor/common/ToolbarIcon.js +43 -0
  84. package/dist/Editor/common/Uploader.js +10 -7
  85. package/dist/Editor/common/iconslist.js +46 -1
  86. package/dist/Editor/hooks/useMentions.js +104 -17
  87. package/dist/Editor/hooks/useMouseMove.js +53 -0
  88. package/dist/Editor/hooks/useScroll.js +26 -0
  89. package/dist/Editor/plugins/withEmbeds.js +12 -0
  90. package/dist/Editor/service/fileupload.js +2 -2
  91. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -10
  92. package/dist/Editor/utils/carousel.js +5 -2
  93. package/dist/Editor/utils/carouselItem.js +2 -2
  94. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  95. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  96. package/dist/Editor/utils/embed.js +19 -5
  97. package/dist/Editor/utils/emoji.js +8 -0
  98. package/dist/Editor/utils/events.js +49 -12
  99. package/dist/Editor/utils/form.js +3 -9
  100. package/dist/Editor/utils/formfield.js +2 -1
  101. package/dist/Editor/utils/grid.js +44 -8
  102. package/dist/Editor/utils/gridItem.js +4 -3
  103. package/dist/Editor/utils/insertNewLine.js +12 -0
  104. package/dist/Editor/utils/mentions.js +14 -10
  105. package/dist/Editor/utils/pageSettings.js +67 -0
  106. package/dist/Editor/utils/signature.js +6 -8
  107. package/dist/Editor/utils/table.js +79 -18
  108. package/dist/Editor/utils/topBanner.js +58 -0
  109. package/package.json +4 -1
  110. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
2
+ import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Node, Transforms, Editor } from "slate";
4
4
  import AspectRatioIcon from "@mui/icons-material/AspectRatio";
5
5
  import useResize from "../../utils/customHooks/useResize";
@@ -7,6 +7,7 @@ import EmbedPopup from "./EmbedPopup";
7
7
  import { IconButton, Tooltip } from "@mui/material";
8
8
  import { GridSettingsIcon } from "../../common/iconslist";
9
9
  import QuiltedImageList from "../../common/ImageList";
10
+ import { useEditorContext } from "../../hooks/useMouseMove";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
13
  const Image = ({
@@ -47,7 +48,7 @@ const Image = ({
47
48
  horizantal
48
49
  } = alignment || {};
49
50
  const editor = useSlateStatic();
50
- const selected = useSelected();
51
+ // const selected = useSelected();
51
52
  const [parentDOM, setParentDOM] = useState(null);
52
53
  const [openSetttings, setOpenSettings] = useState(false);
53
54
  const [size, onMouseDown, resizing, onLoad] = useResize({
@@ -57,8 +58,12 @@ const Image = ({
57
58
  const arr = Array.from(Node.elements(editor));
58
59
  const ele = arr.find(([elem]) => element === elem);
59
60
  const path = ReactEditor.findPath(editor, element);
61
+ const {
62
+ hoverPath
63
+ } = useEditorContext();
64
+ const selected = hoverPath === path.join(",");
60
65
  useEffect(() => {
61
- if (editor && ele[1] !== undefined) {
66
+ if (editor && ele && ele[1] !== undefined) {
62
67
  const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
63
68
  setParentDOM(dom);
64
69
  onLoad(element?.size || {});
@@ -129,6 +134,7 @@ const Image = ({
129
134
  }) : null;
130
135
  };
131
136
  const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
137
+ const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
132
138
  return /*#__PURE__*/_jsxs("div", {
133
139
  ...attributes,
134
140
  className: "embed has-hover",
@@ -146,6 +152,7 @@ const Image = ({
146
152
  border: `1px solid ${borderColor}`
147
153
  },
148
154
  ...element.attr,
155
+ "data-path": path.join(","),
149
156
  children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
150
157
  element: element,
151
158
  onSave: onSave,
@@ -157,11 +164,11 @@ const Image = ({
157
164
  contentEditable: false,
158
165
  style: {
159
166
  position: "relative",
160
- width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
167
+ width: `${width}`,
161
168
  height: `${size.height}px`
162
169
  },
163
- children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), images.length > 1 ? /*#__PURE__*/_jsx(QuiltedImageList, {
164
- itemData: images,
170
+ children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), images?.length > 1 ? /*#__PURE__*/_jsx(QuiltedImageList, {
171
+ itemData: images || [],
165
172
  readOnly: true,
166
173
  rowHeight: rowHeight,
167
174
  cols: cols
@@ -171,7 +178,8 @@ const Image = ({
171
178
  },
172
179
  alt: alt,
173
180
  src: url,
174
- onClick: handleImageClick
181
+ onClick: handleImageClick,
182
+ "data-path": path.join(",")
175
183
  }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
176
184
  onPointerDown: onMouseDown,
177
185
  style: {
@@ -19,7 +19,8 @@ const Video = ({
19
19
  const {
20
20
  url,
21
21
  alt,
22
- alignment
22
+ alignment,
23
+ bannerSpacing
23
24
  } = element;
24
25
  const editor = useSlateStatic();
25
26
  const selected = useSelected();
@@ -33,6 +34,10 @@ const Video = ({
33
34
  vertical,
34
35
  horizantal
35
36
  } = alignment || {};
37
+ const {
38
+ left,
39
+ right
40
+ } = bannerSpacing || {};
36
41
  const [size, onMouseDown, resizing, onLoad] = useResize({
37
42
  parentDOM,
38
43
  size: element?.size
@@ -98,13 +103,14 @@ const Video = ({
98
103
  at: path
99
104
  });
100
105
  };
106
+ const totalMinus = parseInt(left || 0) + parseInt(right || 0);
107
+ const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
101
108
  return /*#__PURE__*/_jsxs("div", {
102
109
  ...attributes,
103
110
  className: "embed has-hover",
104
111
  style: {
105
112
  display: "flex",
106
- width: "100%",
107
- maxWidth: "100%",
113
+ width: `calc(100% - ${totalMinus}px)`,
108
114
  boxShadow: selected && focused && "0 0 3px 3px lightgray",
109
115
  justifyContent: horizantal,
110
116
  alignContent: vertical
@@ -121,7 +127,7 @@ const Video = ({
121
127
  contentEditable: false,
122
128
  style: {
123
129
  position: "relative",
124
- width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
130
+ width: `${width}`,
125
131
  height: `${size.height}px`
126
132
  },
127
133
  children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
@@ -145,7 +151,8 @@ const Video = ({
145
151
  border: "none",
146
152
  position: "absolute",
147
153
  width: "100%",
148
- height: "100%"
154
+ height: "100%",
155
+ left: "0px"
149
156
  },
150
157
  src: url,
151
158
  title: alt
@@ -0,0 +1,73 @@
1
+ import React, { useState, forwardRef, useImperativeHandle } from "react";
2
+ import { useSlateStatic, ReactEditor } from "slate-react";
3
+ import { Paper, Popover } from "@mui/material";
4
+ import data from "@emoji-mart/data";
5
+ import Picker from "@emoji-mart/react";
6
+ import { insertEmoji } from "../../utils/emoji";
7
+ import ToolbarIcon from "../../common/ToolbarIcon";
8
+ import Icon from "../../common/Icon";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { Fragment as _Fragment } from "react/jsx-runtime";
11
+ import { jsxs as _jsxs } from "react/jsx-runtime";
12
+ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
13
+ const {
14
+ icoBtnType,
15
+ selectionTarget
16
+ } = props;
17
+ const editor = useSlateStatic();
18
+ const [anchorEl, setAnchorEl] = useState(null);
19
+ const [target, setTarget] = useState(selectionTarget);
20
+ const open = Boolean(anchorEl);
21
+ useImperativeHandle(ref, () => ({
22
+ triggerClick: target => {
23
+ setTarget(target);
24
+ onClick();
25
+ }
26
+ }));
27
+ const onClick = () => {
28
+ if (editor.selection) {
29
+ const domRange = ReactEditor.toDOMRange(editor, editor.selection);
30
+ const rect = domRange.getBoundingClientRect();
31
+ setAnchorEl({
32
+ getBoundingClientRect: () => rect,
33
+ nodeType: 1
34
+ });
35
+ }
36
+ };
37
+ const onEmojiSelect = emoji => {
38
+ insertEmoji(editor, emoji?.native, target || editor.selection);
39
+ setAnchorEl(null);
40
+ };
41
+ const handleClose = () => {
42
+ setAnchorEl(null);
43
+ };
44
+ return /*#__PURE__*/_jsxs(_Fragment, {
45
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
46
+ title: "Emoji",
47
+ onClick: onClick,
48
+ icon: /*#__PURE__*/_jsx(Icon, {
49
+ icon: "emoji"
50
+ }),
51
+ icoBtnType: icoBtnType
52
+ }), /*#__PURE__*/_jsx(Popover, {
53
+ style: {
54
+ zIndex: 10001
55
+ },
56
+ open: open,
57
+ anchorEl: anchorEl,
58
+ anchorOrigin: {
59
+ vertical: "bottom",
60
+ horizontal: "left"
61
+ },
62
+ onClose: handleClose,
63
+ children: /*#__PURE__*/_jsx(Paper, {
64
+ children: /*#__PURE__*/_jsx(Picker, {
65
+ data: data,
66
+ onEmojiSelect: onEmojiSelect
67
+ })
68
+ })
69
+ })]
70
+ });
71
+ });
72
+ EmojiButton.displayName = "EmojiButton";
73
+ export default EmojiButton;
File without changes
@@ -3,9 +3,8 @@ import { Transforms } from "slate";
3
3
  import { useSlateStatic, ReactEditor } from "slate-react";
4
4
  import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mui/material";
5
5
  import DeleteIcon from "@mui/icons-material/Delete";
6
- import SettingsIcon from "@mui/icons-material/Settings";
7
- import AddIcon from "@mui/icons-material/Add";
8
6
  import BackupIcon from "@mui/icons-material/Backup";
7
+ import { GridSettingsIcon, GridAddSectionIcon } from "../../common/iconslist";
9
8
  import FormPopup from "./FormPopup";
10
9
  import ButtonPopup from "../Button/ButtonPopup";
11
10
  import { formField } from "../../utils/formfield";
@@ -61,6 +60,7 @@ const Form = props => {
61
60
  const [editButton, setEditButton] = useState(false);
62
61
  const [anchorEl, setAnchorEl] = useState(null);
63
62
  const [loading, setLoading] = useState(false);
63
+ const [showOptions, setShowOptions] = useState(false);
64
64
  const path = ReactEditor.findPath(editor, element);
65
65
  const btnBorderStyle = buttonProps?.borderColor?.indexOf("linear") >= 0 ? {
66
66
  borderImageSource: buttonProps?.borderColor,
@@ -170,33 +170,42 @@ const Form = props => {
170
170
  setAnchorEl(e.currentTarget);
171
171
  }
172
172
  };
173
+ const onMouseOver = () => {
174
+ setShowOptions(true);
175
+ };
176
+ const onMouseLeave = () => {
177
+ setShowOptions(false);
178
+ };
173
179
  const FormToolbar = () => {
174
180
  return /*#__PURE__*/_jsxs("div", {
175
- className: "",
181
+ className: "element-toolbar hr",
176
182
  contentEditable: false,
177
183
  style: {
178
- backgroundColor: "#ccc",
179
- width: "fit-content"
184
+ top: "-42px",
185
+ left: "0px"
180
186
  },
181
187
  children: [/*#__PURE__*/_jsx(Tooltip, {
182
188
  title: "Form Settings",
183
189
  arrow: true,
184
190
  children: /*#__PURE__*/_jsx(IconButton, {
185
191
  onClick: onSettings,
186
- children: /*#__PURE__*/_jsx(SettingsIcon, {})
192
+ className: "mr",
193
+ children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
187
194
  })
188
195
  }), /*#__PURE__*/_jsx(Tooltip, {
189
196
  title: "Add Form Field",
190
197
  arrow: true,
191
198
  children: /*#__PURE__*/_jsx(IconButton, {
192
199
  onClick: onAddFormField,
193
- children: /*#__PURE__*/_jsx(AddIcon, {})
200
+ className: "mr",
201
+ children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
194
202
  })
195
203
  }), /*#__PURE__*/_jsx(Tooltip, {
196
204
  title: "Delete Form",
197
205
  arrow: true,
198
206
  children: /*#__PURE__*/_jsx(IconButton, {
199
207
  onClick: onDelete,
208
+ className: "mr",
200
209
  children: /*#__PURE__*/_jsx(DeleteIcon, {})
201
210
  })
202
211
  })]
@@ -206,10 +215,12 @@ const Form = props => {
206
215
  ...attributes,
207
216
  className: "form-wrapper element-root",
208
217
  style: {
209
- border: !readOnly ? "1px dotted red" : "none",
218
+ border: !readOnly ? "none" : "none",
210
219
  padding: "10px"
211
220
  },
212
- children: [!readOnly && /*#__PURE__*/_jsx(FormToolbar, {}), /*#__PURE__*/_jsxs("form", {
221
+ onMouseOver: onMouseOver,
222
+ onMouseLeave: onMouseLeave,
223
+ children: [/*#__PURE__*/_jsxs("form", {
213
224
  id: `${formName}`,
214
225
  onSubmit: handleSubmit,
215
226
  style: {
@@ -222,7 +233,8 @@ const Form = props => {
222
233
  paddingLeft: `${left}px`,
223
234
  paddingRight: `${right}px`,
224
235
  paddingTop: `${top}px`,
225
- paddingBottom: `${bottom}px`
236
+ paddingBottom: `${bottom}px`,
237
+ position: "relative"
226
238
  },
227
239
  ref: formEle,
228
240
  children: [/*#__PURE__*/_jsx(Grid, {
@@ -277,7 +289,7 @@ const Form = props => {
277
289
  })
278
290
  })]
279
291
  })
280
- }), loading && /*#__PURE__*/_jsx("div", {
292
+ }), !readOnly && showOptions && /*#__PURE__*/_jsx(FormToolbar, {}), loading && /*#__PURE__*/_jsx("div", {
281
293
  style: {
282
294
  position: "absolute",
283
295
  top: 0,
@@ -313,7 +325,7 @@ const Form = props => {
313
325
  title: "Button Settings",
314
326
  arrow: true,
315
327
  children: /*#__PURE__*/_jsx(IconButton, {
316
- children: /*#__PURE__*/_jsx(SettingsIcon, {})
328
+ children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
317
329
  })
318
330
  })
319
331
  }), /*#__PURE__*/_jsx(MenuItem, {
@@ -1,21 +1,23 @@
1
1
  import React from "react";
2
2
  import { useSlateStatic } from "slate-react";
3
- import { IconButton, Tooltip } from "@mui/material";
4
- import { FormIcon } from "../../common/iconslist";
5
3
  import { insertForm } from "../../utils/form";
4
+ import ToolbarIcon from "../../common/ToolbarIcon";
5
+ import Icon from "../../common/Icon";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
- const FormButton = props => {
7
+ const FormButton = ({
8
+ icoBtnType
9
+ }) => {
8
10
  const editor = useSlateStatic();
9
11
  const onClick = () => {
10
12
  insertForm(editor);
11
13
  };
12
- return /*#__PURE__*/_jsx(Tooltip, {
14
+ return /*#__PURE__*/_jsx(ToolbarIcon, {
13
15
  title: "Form",
14
- arrow: true,
15
- children: /*#__PURE__*/_jsx(IconButton, {
16
- onClick: onClick,
17
- children: /*#__PURE__*/_jsx(FormIcon, {})
18
- })
16
+ onClick: onClick,
17
+ icon: /*#__PURE__*/_jsx(Icon, {
18
+ icon: "form"
19
+ }),
20
+ icoBtnType: icoBtnType
19
21
  });
20
22
  };
21
23
  export default FormButton;
@@ -13,6 +13,7 @@ const FormText = props => {
13
13
  borderColor,
14
14
  textColor,
15
15
  bgColor,
16
+ lockSpacing,
16
17
  ...rest
17
18
  } = fieldProps;
18
19
  const {
@@ -12,6 +12,7 @@ const FormField = props => {
12
12
  const {
13
13
  attributes,
14
14
  element,
15
+ children: rootChildren,
15
16
  customProps
16
17
  } = props;
17
18
  const {
@@ -94,7 +95,12 @@ const FormField = props => {
94
95
  element: element,
95
96
  onSave: onSave,
96
97
  onClose: onClose
97
- }) : null]
98
+ }) : null, /*#__PURE__*/_jsx("span", {
99
+ style: {
100
+ display: "none"
101
+ },
102
+ children: rootChildren
103
+ })]
98
104
  });
99
105
  };
100
106
  export default FormField;
@@ -4,7 +4,7 @@ import { Transforms, Path, Node } from "slate";
4
4
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
5
5
  import { gridItem } from "../../utils/gridItem";
6
6
  import GridPopup from "./GridPopup";
7
- import { IconButton, Tooltip } from "@mui/material";
7
+ import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
8
8
  import { insertGrid } from "../../utils/grid";
9
9
  // import useDragAndDrop from "../../common/useDragAndDrop";
10
10
  import useResize from "../../utils/customHooks/useResize";
@@ -12,6 +12,7 @@ import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../com
12
12
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
13
13
  import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
14
14
  import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
15
+ import { useEditorContext } from "../../hooks/useMouseMove";
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";
@@ -59,7 +60,7 @@ const Grid = props => {
59
60
  } = borderRadius || {};
60
61
  // const { height: elHeight } = elSize || {};
61
62
  const editor = useSlateStatic();
62
- const selected = useSelected();
63
+ // const selected = useSelected();
63
64
  // const [selected, setSelected] = useState(false);
64
65
  const path = ReactEditor.findPath(editor, element);
65
66
  const [parentDOM, setParentDOM] = useState(null);
@@ -71,6 +72,10 @@ const Grid = props => {
71
72
  });
72
73
  const arr = Array.from(Node.elements(editor));
73
74
  const ele = arr.find(([elem]) => element === elem);
75
+ const {
76
+ hoverPath
77
+ } = useEditorContext();
78
+ const selected = hoverPath === path.join(",");
74
79
  useEffect(() => {
75
80
  if (editor && ele[1] !== undefined) {
76
81
  const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
@@ -314,7 +319,8 @@ const Grid = props => {
314
319
  const bgImage = backgroundImage && backgroundImage !== "none" ? {
315
320
  backgroundImage: `url(${backgroundImage})`
316
321
  } : {};
317
- return /*#__PURE__*/_jsxs("div", {
322
+ return /*#__PURE__*/_jsxs(GridContainer, {
323
+ container: true,
318
324
  className: `grid-container ${grid} has-hover element-root`,
319
325
  ...attributes,
320
326
  ...sectionId,
@@ -327,6 +333,7 @@ const Grid = props => {
327
333
  borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
328
334
  borderStyle: borderStyle || "solid"
329
335
  },
336
+ "data-path": path.join(","),
330
337
  children: [fgColor && /*#__PURE__*/_jsx("div", {
331
338
  style: {
332
339
  position: "absolute",
@@ -359,7 +366,9 @@ const Grid = props => {
359
366
  onClose: onClose,
360
367
  onDelete: onDelete,
361
368
  customProps: customProps
362
- }) : null, /*#__PURE__*/_jsx("div", {
369
+ }) : null, /*#__PURE__*/_jsx(GridContainer, {
370
+ item: true,
371
+ xs: 12,
363
372
  className: "grid-c-wrpr",
364
373
  style: {
365
374
  display: "flex",
@@ -378,6 +387,8 @@ const Grid = props => {
378
387
  // ? `${elHeight}px`
379
388
  // : "fit-content",
380
389
  },
390
+
391
+ "data-path": path.join(","),
381
392
  children: children
382
393
  }), /*#__PURE__*/_jsx(NewLineButtons, {})]
383
394
  });
@@ -1,15 +1,21 @@
1
1
  import React, { useState } from "react";
2
- import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
3
- import { insertGrid } from "../../utils/grid";
2
+ import { Button, Dialog, DialogContent, DialogTitle, Grid,
3
+ // ImageListItemBar,
4
+ Tooltip, Box } from "@mui/material";
5
+ import { insertGrid, insertPlainGrid } from "../../utils/grid";
4
6
  import { GridIcon } from "../../common/iconslist";
5
- import { ImageList, ImageListItem } from "@mui/material";
7
+ // import { ImageList, ImageListItem } from "@mui/material";
8
+ import ToolbarIcon from "../../common/ToolbarIcon";
9
+ import GridStyles from "./Styles";
6
10
  import { jsx as _jsx } from "react/jsx-runtime";
7
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
12
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
13
  const GridButton = props => {
14
+ const classes = GridStyles();
10
15
  const {
11
16
  editor,
12
- customProps
17
+ customProps,
18
+ icoBtnType
13
19
  } = props;
14
20
  const {
15
21
  services
@@ -48,17 +54,19 @@ const GridButton = props => {
48
54
  const handleClose = () => {
49
55
  setOpen(false);
50
56
  };
51
- const {
52
- list
53
- } = templates;
57
+ const handleGridClick = count => () => {
58
+ insertGrid(editor, insertPlainGrid(count));
59
+ handleClose();
60
+ };
61
+
62
+ // const { list } = templates;
63
+
54
64
  return /*#__PURE__*/_jsxs(_Fragment, {
55
- children: [/*#__PURE__*/_jsx(Tooltip, {
65
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
56
66
  title: "Grid",
57
- arrow: true,
58
- children: /*#__PURE__*/_jsx(IconButton, {
59
- onClick: onButtonClick,
60
- children: /*#__PURE__*/_jsx(GridIcon, {})
61
- })
67
+ onClick: onButtonClick,
68
+ icon: /*#__PURE__*/_jsx(GridIcon, {}),
69
+ icoBtnType: icoBtnType
62
70
  }), /*#__PURE__*/_jsxs(Dialog, {
63
71
  open: open,
64
72
  onClose: handleClose,
@@ -69,7 +77,7 @@ const GridButton = props => {
69
77
  children: [/*#__PURE__*/_jsx(Grid, {
70
78
  item: true,
71
79
  xs: 6,
72
- children: "Templates"
80
+ children: "Grid"
73
81
  }), /*#__PURE__*/_jsx(Grid, {
74
82
  item: true,
75
83
  xs: 6,
@@ -81,21 +89,36 @@ const GridButton = props => {
81
89
  })]
82
90
  })
83
91
  }), /*#__PURE__*/_jsx(DialogContent, {
84
- children: /*#__PURE__*/_jsx(ImageList, {
85
- variant: "quilted",
86
- cols: 1,
87
- children: list.map(item => {
88
- return /*#__PURE__*/_jsxs(ImageListItem, {
89
- onClick: handleInsertGrid(item),
90
- children: [/*#__PURE__*/_jsx("img", {
91
- src: item.thumbnail,
92
- alt: item.title,
93
- width: "auto",
94
- height: "250px"
95
- }), /*#__PURE__*/_jsx(ImageListItemBar, {
96
- title: item.title
97
- })]
98
- }, item.thumbnail);
92
+ children: /*#__PURE__*/_jsx(Grid, {
93
+ container: true,
94
+ spacing: 2,
95
+ style: {
96
+ display: "flex"
97
+ },
98
+ children: Array.from(Array(12).keys()).map(m => {
99
+ m = m + 1;
100
+ return /*#__PURE__*/_jsx(Grid, {
101
+ item: true,
102
+ xs: 2,
103
+ style: {
104
+ display: "flex"
105
+ },
106
+ children: /*#__PURE__*/_jsx(Box, {
107
+ component: "div",
108
+ style: {
109
+ display: "flex"
110
+ },
111
+ children: /*#__PURE__*/_jsx(Tooltip, {
112
+ title: `Insert ${m} Column Grid`,
113
+ arrow: true,
114
+ children: /*#__PURE__*/_jsx(Button, {
115
+ sx: classes.gridButton,
116
+ onClick: handleGridClick(m),
117
+ children: m
118
+ })
119
+ })
120
+ })
121
+ }, `in_grid_co_${m}`);
99
122
  })
100
123
  })
101
124
  })]
@@ -3,8 +3,9 @@ import React, { useState } from "react";
3
3
  import { Transforms } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import GridItemPopup from "./GridItemPopup";
6
- import { IconButton, Tooltip, Box } from "@mui/material";
6
+ import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
7
7
  import { GridSettingsIcon } from "../../common/iconslist";
8
+ import { useEditorContext } from "../../hooks/useMouseMove";
8
9
  import { jsx as _jsx } from "react/jsx-runtime";
9
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
11
  const GridItem = props => {
@@ -52,9 +53,13 @@ const GridItem = props => {
52
53
  } = borderRadius || {};
53
54
  const editor = useSlateStatic();
54
55
  // const selected = useSelected();
55
- const [selected, setSelected] = useState(false);
56
+ // const [selected, setSelected] = useState(false);
56
57
  const itemWidth = (grid || 6) / 12 * 100;
57
58
  const path = ReactEditor.findPath(editor, element);
59
+ const {
60
+ hoverPath
61
+ } = useEditorContext();
62
+ const selected = hoverPath === path.join(",");
58
63
  const GridItemToolbar = () => {
59
64
  return selected ? /*#__PURE__*/_jsx("div", {
60
65
  contentEditable: false,
@@ -98,18 +103,21 @@ const GridItem = props => {
98
103
  });
99
104
  }
100
105
  };
101
- const onMouseOver = e => {
102
- if (!readOnly) {
103
- e.stopPropagation();
104
- setSelected(true);
105
- }
106
- };
107
- const onMouseLeave = e => {
108
- if (!readOnly) {
109
- e.stopPropagation();
110
- setSelected(false);
111
- }
112
- };
106
+
107
+ // const onMouseOver = (e) => {
108
+ // if (!readOnly) {
109
+ // e.stopPropagation();
110
+ // setSelected(true);
111
+ // }
112
+ // };
113
+
114
+ // const onMouseLeave = (e) => {
115
+ // if (!readOnly) {
116
+ // e.stopPropagation();
117
+ // setSelected(false);
118
+ // }
119
+ // };
120
+
113
121
  return /*#__PURE__*/_jsxs(Box, {
114
122
  component: "div",
115
123
  className: `grid-item xs-${grid} element-root gi-top-wrpr`,
@@ -127,10 +135,13 @@ const GridItem = props => {
127
135
  marginBottom: `${margin?.bottom || 0}px`,
128
136
  "&:hover": {
129
137
  background: `${bgColorHover || bgColor || "transparent"}`
130
- }
138
+ },
139
+ height: "100%"
131
140
  },
132
- onMouseOver: onMouseOver,
133
- onMouseLeave: onMouseLeave,
141
+ "data-path": path.join(",")
142
+ // onMouseOver={onMouseOver}
143
+ // onMouseLeave={onMouseLeave}
144
+ ,
134
145
  children: [!readOnly && /*#__PURE__*/_jsxs("div", {
135
146
  className: `element-selector ${selected ? "selected" : ""}`,
136
147
  contentEditable: false,
@@ -150,16 +161,16 @@ const GridItem = props => {
150
161
  }), /*#__PURE__*/_jsx(Box, {
151
162
  className: "gi-inner-cw",
152
163
  component: "div",
164
+ "data-path": path.join(","),
153
165
  sx: {
154
166
  display: "flex",
155
167
  flexDirection: flexDirection || "column",
156
- width: "100%",
157
168
  paddingLeft: `${left}px`,
158
169
  paddingRight: `${right}px`,
159
170
  paddingTop: `${top}px`,
160
171
  paddingBottom: `${bottom}px`,
161
172
  justifyContent: vertical,
162
- height: gridHeight || "auto",
173
+ height: gridHeight || "100%",
163
174
  borderColor: borderColor || "transparent",
164
175
  borderWidth: borderWidth || "1px",
165
176
  borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
@@ -0,0 +1,11 @@
1
+ const GridStyles = () => ({
2
+ gridButton: {
3
+ background: "#007FFF",
4
+ color: "#fff",
5
+ "&:hover": {
6
+ background: "#0066CC",
7
+ color: "#FFF"
8
+ }
9
+ }
10
+ });
11
+ export default GridStyles;