@flozy/editor 3.8.8 → 3.8.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) hide show
  1. package/dist/Editor/ChatEditor.js +31 -57
  2. package/dist/Editor/CommonEditor.js +69 -8
  3. package/dist/Editor/DialogWrapper.js +4 -3
  4. package/dist/Editor/Editor.css +5 -12
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +47 -36
  6. package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +6 -20
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +36 -23
  9. package/dist/Editor/Elements/Button/EditorButton.js +23 -16
  10. package/dist/Editor/Elements/Embed/Image.js +15 -14
  11. package/dist/Editor/Elements/Embed/Video.js +12 -8
  12. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  13. package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
  14. package/dist/Editor/Elements/Form/Form.js +1 -1
  15. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +391 -0
  16. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +193 -0
  17. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  18. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +184 -0
  19. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +36 -0
  20. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  21. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  22. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +11 -0
  23. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  24. package/dist/Editor/Elements/FreeGrid/styles.js +159 -0
  25. package/dist/Editor/Elements/Grid/Grid.js +12 -8
  26. package/dist/Editor/Elements/Grid/GridItem.js +31 -21
  27. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -5
  28. package/dist/Editor/Elements/SimpleText/index.js +9 -8
  29. package/dist/Editor/Elements/SimpleText/style.js +37 -0
  30. package/dist/Editor/ErrorBoundary.js +30 -0
  31. package/dist/Editor/Styles/EditorStyles.js +23 -0
  32. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -25
  33. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -0
  34. package/dist/Editor/Toolbar/PopupTool/index.js +8 -0
  35. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  36. package/dist/Editor/Toolbar/toolbarGroups.js +5 -0
  37. package/dist/Editor/common/Icon.js +9 -2
  38. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +1 -6
  39. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  40. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +105 -0
  41. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  42. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  43. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  44. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  45. package/dist/Editor/common/RnD/DragOver/index.js +46 -0
  46. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  47. package/dist/Editor/common/RnD/ElementOptions/Actions.js +82 -0
  48. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  49. package/dist/Editor/common/RnD/ElementOptions/index.js +93 -0
  50. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  51. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  52. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +58 -0
  53. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +7 -0
  54. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +46 -0
  55. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +46 -0
  56. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +46 -0
  57. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  58. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +46 -0
  59. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +13 -0
  60. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  61. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +14 -0
  62. package/dist/Editor/common/RnD/ElementSettings/styles.js +76 -0
  63. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  64. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  65. package/dist/Editor/common/RnD/GuideLines/styles.js +60 -0
  66. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  67. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  68. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  69. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  70. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  71. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  72. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  73. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  74. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  75. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +18 -0
  76. package/dist/Editor/common/RnD/TransformHandles/index.js +62 -0
  77. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  78. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  79. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  80. package/dist/Editor/common/RnD/Utils/gridDropItem.js +148 -0
  81. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  82. package/dist/Editor/common/RnD/VirtualElement/index.js +76 -0
  83. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  84. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  85. package/dist/Editor/common/RnD/index.js +503 -0
  86. package/dist/Editor/common/RnD/styles.js +4 -0
  87. package/dist/Editor/common/Section/index.js +21 -12
  88. package/dist/Editor/common/Section/styles.js +6 -1
  89. package/dist/Editor/common/Shorthands/elements.js +12 -0
  90. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +32 -31
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +16 -18
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +3 -14
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  95. package/dist/Editor/common/StyleBuilder/index.js +2 -2
  96. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  97. package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
  98. package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
  99. package/dist/Editor/helper/breakpoint.js +5 -0
  100. package/dist/Editor/helper/index.js +139 -22
  101. package/dist/Editor/helper/theme.js +50 -2
  102. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  103. package/dist/Editor/hooks/useMouseMove.js +36 -8
  104. package/dist/Editor/hooks/withCommon.js +2 -1
  105. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  106. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +168 -0
  107. package/dist/Editor/utils/SlateUtilityFunctions.js +31 -5
  108. package/dist/Editor/utils/draftToSlate.js +1 -1
  109. package/dist/Editor/utils/events.js +5 -0
  110. package/dist/Editor/utils/freegrid.js +49 -0
  111. package/dist/Editor/utils/helper.js +29 -0
  112. package/package.json +5 -2
@@ -1,8 +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, Tooltip, Box } from "@mui/material";
5
- // import * as fIcons from "@mui/icons-material";
4
+ import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
6
5
  import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
7
6
  import SettingsIcon from "@mui/icons-material/Settings";
8
7
  import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -10,12 +9,13 @@ import LinkIcon from "@mui/icons-material/Link";
10
9
  import ButtonPopup from "./ButtonPopup";
11
10
  import { actionButtonRedirect } from "../../service/actionTrigger";
12
11
  import { WorkflowIcon } from "../../common/iconslist";
13
- import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
12
+ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
14
13
  import { handleLinkType, windowVar } from "../../utils/helper";
15
14
  import LinkSettings from "../../common/LinkSettings";
16
15
  import { jsx as _jsx } from "react/jsx-runtime";
17
16
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
17
  const EditorButton = props => {
18
+ const theme = useTheme();
19
19
  const {
20
20
  attributes,
21
21
  element,
@@ -81,7 +81,6 @@ const EditorButton = props => {
81
81
  }
82
82
  };
83
83
  const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
84
- console.log(openInNewTab);
85
84
  const onMenuClick = val => () => {
86
85
  switch (val) {
87
86
  case "edit":
@@ -154,21 +153,33 @@ const EditorButton = props => {
154
153
  const onClose = () => {
155
154
  setEdit(false);
156
155
  };
156
+ const tAlign = alignment || textAlign || "left";
157
+ const btnSp = groupByBreakpoint({
158
+ borderRadius: {
159
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
160
+ },
161
+ padding: {
162
+ ...getTRBLBreakPoints(bannerSpacing)
163
+ }
164
+ }, theme);
165
+ const pSp = groupByBreakpoint({
166
+ display: {
167
+ xs: xsHidden ? "none" : "inline-block",
168
+ lg: "inline-block"
169
+ }
170
+ }, theme);
157
171
  return /*#__PURE__*/_jsxs("div", {
158
- className: "editor-btn-wrapper",
172
+ className: `editor-btn-wrapper`,
159
173
  ...attributes,
160
174
  style: {
161
- textAlign: alignment || textAlign || "left"
175
+ textAlign: tAlign
162
176
  },
163
177
  contentEditable: false,
164
178
  children: [/*#__PURE__*/_jsx(Box, {
165
179
  component: "div",
166
180
  className: "editor-btn-wrapper-inner",
167
181
  sx: {
168
- display: {
169
- lg: "inline-block",
170
- xs: xsHidden ? "none" : "inline-block"
171
- },
182
+ ...pSp,
172
183
  "& .element-toolbar": {
173
184
  display: "none"
174
185
  },
@@ -184,19 +195,15 @@ const EditorButton = props => {
184
195
  display: "inline-block"
185
196
  },
186
197
  children: [/*#__PURE__*/_jsxs(Box, {
198
+ className: `btn textAlign-${tAlign}`,
187
199
  sx: {
188
200
  textDecoration: "none",
189
201
  background: bgColor || "rgb(30, 75, 122)",
190
202
  borderBlockStyle: "solid",
191
203
  borderColor: borderColor || "transparent",
192
204
  borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
193
- borderRadius: {
194
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
195
- },
205
+ ...btnSp,
196
206
  borderStyle: borderStyle || "solid",
197
- padding: {
198
- ...getTRBLBreakPoints(bannerSpacing)
199
- },
200
207
  color: `${textColor || "#FFFFFF"}`,
201
208
  fontSize: textSize || "inherit",
202
209
  fontFamily: fontFamily || "PoppinsRegular",
@@ -4,15 +4,16 @@ import { Node, Transforms, Editor } from "slate";
4
4
  import AspectRatioIcon from "@mui/icons-material/AspectRatio";
5
5
  import useResize from "../../utils/customHooks/useResize";
6
6
  import EmbedPopup from "./EmbedPopup";
7
- import { IconButton, Tooltip, Box } from "@mui/material";
7
+ import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
8
8
  import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
9
9
  import { useEditorContext } from "../../hooks/useMouseMove";
10
- import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
10
+ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
11
11
  import Icon from "../../common/Icon";
12
12
  import frames from "./Frames";
13
13
  import ImageFrame from "./Frames/ImageFrame";
14
14
  import LinkSettings from "../../common/LinkSettings";
15
15
  import { handleLinkType } from "../../utils/helper";
16
+ import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
16
17
  import { jsx as _jsx } from "react/jsx-runtime";
17
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
19
  const ToolBar = ({
@@ -65,6 +66,7 @@ const ImageContent = ({
65
66
  objectFit,
66
67
  webAddress
67
68
  } = element;
69
+ const theme = useTheme();
68
70
  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
69
71
  component: "button",
70
72
  className: "element-empty-btn",
@@ -79,9 +81,7 @@ const ImageContent = ({
79
81
  component: "img",
80
82
  className: "emb-img",
81
83
  sx: {
82
- borderRadius: {
83
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
84
- },
84
+ ...wrapThemeBreakpoints(getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true), "borderRadius", theme),
85
85
  objectFit: "cover",
86
86
  boxShadow: boxShadow || "none",
87
87
  height: objectFit ? "100%" : "auto",
@@ -105,6 +105,7 @@ const Image = ({
105
105
  children,
106
106
  customProps
107
107
  }) => {
108
+ const theme = useTheme();
108
109
  const {
109
110
  url,
110
111
  bannerSpacing,
@@ -227,12 +228,14 @@ const Image = ({
227
228
  };
228
229
  } else {
229
230
  return {
230
- width: url ? {
231
- ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
232
- } : "100%",
233
- height: objectFit && url ? {
234
- ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
235
- } : "auto"
231
+ ...groupByBreakpoint({
232
+ width: url ? {
233
+ ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
234
+ } : "100%",
235
+ height: objectFit && url ? {
236
+ ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
237
+ } : "auto"
238
+ }, theme)
236
239
  };
237
240
  }
238
241
  };
@@ -247,9 +250,7 @@ const Image = ({
247
250
  },
248
251
  width: `100%`,
249
252
  maxWidth: "100%",
250
- padding: {
251
- ...getTRBLBreakPoints(bannerSpacing)
252
- },
253
+ ...wrapThemeBreakpoints(getTRBLBreakPoints(bannerSpacing), "padding", theme),
253
254
  backgroundColor: bgColor,
254
255
  justifyContent: horizantal,
255
256
  alignContent: vertical
@@ -1,7 +1,7 @@
1
1
  import React, { useState, useEffect } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Node, Transforms } from "slate";
4
- import { IconButton, Tooltip, Box } from "@mui/material";
4
+ import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
5
5
  import DeleteIcon from "@mui/icons-material/Delete";
6
6
  import AspectRatioIcon from "@mui/icons-material/AspectRatio";
7
7
  import Icon from "../../common/Icon";
@@ -10,7 +10,7 @@ import EmbedPopup from "./EmbedPopup";
10
10
  import { GridSettingsIcon } from "../../common/iconslist";
11
11
  import { gradientBorder } from "../../utils/helper";
12
12
  import { getEmbedURL } from "../../helper";
13
- import { getBreakPointsValue } from "../../helper/theme";
13
+ import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
16
  const Video = ({
@@ -19,6 +19,7 @@ const Video = ({
19
19
  children,
20
20
  customProps
21
21
  }) => {
22
+ const theme = useTheme();
22
23
  const {
23
24
  alt,
24
25
  alignment,
@@ -126,12 +127,14 @@ const Video = ({
126
127
  };
127
128
  } else {
128
129
  return {
129
- width: {
130
- ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
131
- },
132
- height: url ? {
133
- ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
134
- } : "auto"
130
+ ...groupByBreakpoint({
131
+ width: {
132
+ ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
133
+ },
134
+ height: url ? {
135
+ ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
136
+ } : "auto"
137
+ }, theme)
135
138
  };
136
139
  }
137
140
  };
@@ -205,6 +208,7 @@ const Video = ({
205
208
  onDelete: onDelete
206
209
  }) : null, /*#__PURE__*/_jsxs(Box, {
207
210
  component: "div",
211
+ className: "embed-video-wrpr-in",
208
212
  contentEditable: false,
209
213
  sx: {
210
214
  position: "relative",
@@ -25,13 +25,17 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
25
25
  }
26
26
  }));
27
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
- });
28
+ try {
29
+ if (editor.selection) {
30
+ const domRange = ReactEditor.toDOMRange(editor, editor.selection);
31
+ const rect = domRange.getBoundingClientRect();
32
+ setAnchorEl({
33
+ getBoundingClientRect: () => rect,
34
+ nodeType: 1
35
+ });
36
+ }
37
+ } catch (err) {
38
+ console.log(err);
35
39
  }
36
40
  };
37
41
  const onEmojiSelect = emoji => {
@@ -4,14 +4,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { Fragment as _Fragment } from "react/jsx-runtime";
5
5
  const EmojiPicker = props => {
6
6
  const {
7
- onEmojiSelect,
8
- onClose
7
+ onEmojiSelect
9
8
  } = props;
10
9
  return /*#__PURE__*/_jsx(_Fragment, {
11
10
  children: /*#__PURE__*/_jsx(Picker, {
12
11
  data: data,
13
- onEmojiSelect: onEmojiSelect,
14
- onClickOutside: onClose
12
+ onEmojiSelect: onEmojiSelect
15
13
  })
16
14
  });
17
15
  };
@@ -119,7 +119,7 @@ const Form = props => {
119
119
  if (fieldData?.element === "email") {
120
120
  rule.push(`isEmail`);
121
121
  }
122
- if (fieldData?.required && fieldData?.element === "email") {
122
+ if (fieldData?.required || fieldData?.element === "email") {
123
123
  validations.push({
124
124
  name: pair[0],
125
125
  value: pair[1],
@@ -0,0 +1,391 @@
1
+ import React from "react";
2
+ import { Path, Transforms, Node } from "slate";
3
+ import { ReactEditor, useSlateStatic } from "slate-react";
4
+ import { Box, useTheme } from "@mui/material";
5
+ import RnD from "../../common/RnD";
6
+ import More from "./Options/More";
7
+ import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
8
+ import AddElement from "./Options/AddElement";
9
+ import useBreakpoints from "../../hooks/useBreakpoints";
10
+ import { breakpointValues } from "./breakpointConstants";
11
+ import useFreeGridStyles from "./styles";
12
+ import { insertFreeGrid, insertFreeGridItem } from "../../utils/freegrid";
13
+ import { useEditorContext } from "../../hooks/useMouseMove";
14
+ import SectionSettings from "./Options/SectionSettings";
15
+ import scrollToNewSection from "../../helper/RnD/scrollToNewSection";
16
+ import { createEmbedNode } from "../../utils/embed";
17
+ import { onPasteRnDNode } from "../../helper";
18
+ import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
19
+ import { jsx as _jsx } from "react/jsx-runtime";
20
+ import { jsxs as _jsxs } from "react/jsx-runtime";
21
+ const MAX_DEVICE_WIDTH = {
22
+ lg: 980,
23
+ xs: 320
24
+ };
25
+ const FreeGrid = props => {
26
+ const theme = useTheme();
27
+ const breakpoint = useBreakpoints(theme);
28
+ const classes = useFreeGridStyles({
29
+ theme,
30
+ MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint]
31
+ });
32
+ const editor = useSlateStatic();
33
+ const {
34
+ element,
35
+ attributes,
36
+ children,
37
+ customProps
38
+ } = props;
39
+ const {
40
+ sectionName
41
+ } = element;
42
+ const {
43
+ readOnly
44
+ } = customProps;
45
+ const {
46
+ updated_at,
47
+ sectionBgColor,
48
+ sectionBackgroundImage
49
+ } = element;
50
+ const path = ReactEditor.findPath(editor, element);
51
+ // get values based on breakpoint size
52
+ const {
53
+ height
54
+ } = breakpointValues(element.type, breakpoint, element);
55
+ const {
56
+ setSelectedElement
57
+ } = useEditorContext();
58
+ const onChange = data => {
59
+ const append = breakpoint === "lg" ? "" : `_${breakpoint}`;
60
+ const updateData = {
61
+ ...data,
62
+ [`height${append}`]: height + data.height
63
+ };
64
+ if (append !== "") {
65
+ delete updateData.height;
66
+ }
67
+ if (breakpoint === "xs") {
68
+ updateData.xs_updatedOn = new Date().getTime();
69
+ }
70
+ delete updateData.children;
71
+ Transforms.setNodes(editor, {
72
+ ...updateData
73
+ }, {
74
+ at: path
75
+ });
76
+ };
77
+ const moveUp = () => {
78
+ const cur_root_path = Path.parent(path);
79
+ if (Path.hasPrevious(cur_root_path)) {
80
+ Transforms.moveNodes(editor, {
81
+ at: cur_root_path,
82
+ to: Path.previous(cur_root_path)
83
+ });
84
+ }
85
+ };
86
+ const moveDown = () => {
87
+ const cur_root_path = Path.parent(path);
88
+ Transforms.moveNodes(editor, {
89
+ at: cur_root_path,
90
+ to: Path.next(cur_root_path)
91
+ });
92
+ };
93
+ const handleActionClick = actionType => {
94
+ switch (actionType) {
95
+ case "moveUp":
96
+ moveUp();
97
+ break;
98
+ case "moveDown":
99
+ moveDown();
100
+ break;
101
+ default:
102
+ }
103
+ };
104
+ const handleMoreClick = moreAction => () => {
105
+ try {
106
+ const cur_root_path = Path.parent(path);
107
+ const next_path = Path.next(cur_root_path);
108
+ switch (moreAction) {
109
+ case "addSection":
110
+ insertFreeGrid(editor, next_path, {
111
+ setSelectedElement
112
+ });
113
+ break;
114
+ case "duplicateSection":
115
+ Transforms.insertNodes(editor, [{
116
+ ...JSON.parse(JSON.stringify(Node.get(editor, cur_root_path)))
117
+ }], {
118
+ at: next_path
119
+ });
120
+ scrollToNewSection(editor, next_path, {
121
+ setSelectedElement
122
+ });
123
+ break;
124
+ default:
125
+ }
126
+ } catch (err) {
127
+ console.log(err);
128
+ }
129
+ };
130
+ const isEmptySection = () => {
131
+ try {
132
+ const emptyNode = element?.children?.find(f => !f.type) && element?.children.length === 1;
133
+ return emptyNode;
134
+ } catch (err) {
135
+ console.log(err);
136
+ }
137
+ };
138
+ const handleAddElementClick = type => () => {
139
+ const isEmpty = isEmptySection();
140
+ const insertAt = isEmpty ? [...path, 0] : [...path, element?.children?.length];
141
+ switch (type) {
142
+ case "addText":
143
+ Transforms.insertNodes(editor, [{
144
+ type: "freegridItem",
145
+ childType: "text",
146
+ children: [{
147
+ type: "paragraph",
148
+ children: [{
149
+ text: "Text"
150
+ }]
151
+ }],
152
+ gridArea: "3 / 1 / 4 / 2",
153
+ left: 50,
154
+ marginTop: 0,
155
+ top: 0,
156
+ width: 170,
157
+ height: 80
158
+ }], {
159
+ at: [...insertAt]
160
+ });
161
+ break;
162
+ case "addButton":
163
+ Transforms.insertNodes(editor, [{
164
+ type: "freegridItem",
165
+ childType: "button",
166
+ children: [{
167
+ type: "button",
168
+ children: [{
169
+ text: ""
170
+ }],
171
+ buttonLink: {
172
+ linkType: "webAddress"
173
+ },
174
+ iconPosition: "start",
175
+ bgColor: "#2563EB",
176
+ textColor: "#FFF",
177
+ borderRadius: {
178
+ topLeft: 30,
179
+ topRight: 30,
180
+ bottomLeft: 30,
181
+ bottomRight: 30
182
+ },
183
+ bannerSpacing: {
184
+ left: 12,
185
+ top: 12,
186
+ right: 12,
187
+ bottom: 12
188
+ }
189
+ }],
190
+ gridArea: "3 / 1 / 4 / 2",
191
+ left: 50,
192
+ marginTop: 0,
193
+ top: 0,
194
+ width: 170,
195
+ height: 80
196
+ }], {
197
+ at: [...insertAt]
198
+ });
199
+ break;
200
+ case "addImage":
201
+ Transforms.insertNodes(editor, [{
202
+ type: "freegridItem",
203
+ childType: "image",
204
+ children: [{
205
+ type: "image",
206
+ url: "",
207
+ images: [],
208
+ children: [{
209
+ text: ""
210
+ }]
211
+ }],
212
+ gridArea: "3 / 1 / 4 / 2",
213
+ left: 50,
214
+ marginTop: 0,
215
+ top: 0,
216
+ width: 170,
217
+ height: 80
218
+ }], {
219
+ at: [...insertAt]
220
+ });
221
+ break;
222
+ case "addVideo":
223
+ Transforms.insertNodes(editor, [{
224
+ ...insertFreeGridItem("video", createEmbedNode("video", {
225
+ url: "",
226
+ alt: "",
227
+ images: []
228
+ }), {
229
+ height: 300,
230
+ width: 250
231
+ })
232
+ }], {
233
+ at: [...insertAt]
234
+ });
235
+ break;
236
+ case "addBox":
237
+ Transforms.insertNodes(editor, [{
238
+ ...insertFreeGridItem("box", {
239
+ type: "paragraph",
240
+ children: [{
241
+ text: ""
242
+ }]
243
+ }, {}, "freegridBox")
244
+ }], {
245
+ at: [...insertAt]
246
+ });
247
+ break;
248
+ default:
249
+ }
250
+ // focus on newly added element
251
+ focusOnNewItem(editor, insertAt, {
252
+ setSelectedElement
253
+ });
254
+ };
255
+ const onPaste = () => {
256
+ try {
257
+ const cur_root_path = Path.parent(path);
258
+ const parsed_node = JSON.parse(window.copiedNode);
259
+ if (parsed_node?.type === "freegridItem" || parsed_node?.type === "freegridBox") {
260
+ const np = onPasteRnDNode(editor, {
261
+ path,
262
+ children: children
263
+ });
264
+ if (np) {
265
+ focusOnNewItem(editor, np, {
266
+ setSelectedElement
267
+ });
268
+ }
269
+ } else {
270
+ // for pasting whole section
271
+ const new_path = Path.next(cur_root_path);
272
+ Transforms.insertNodes(editor, [{
273
+ ...parsed_node
274
+ }], {
275
+ at: new_path
276
+ });
277
+ scrollToNewSection(editor, new_path, {
278
+ setSelectedElement
279
+ });
280
+ }
281
+ } catch (err) {
282
+ console.log(err);
283
+ }
284
+ };
285
+ const onDelete = () => {
286
+ try {
287
+ Transforms.removeNodes(editor, {
288
+ at: Path.parent(path)
289
+ });
290
+ } catch (err) {
291
+ console.log(err);
292
+ }
293
+ };
294
+ const handleContextMenuClick = d => {
295
+ switch (d?.name) {
296
+ case "cut":
297
+ window.copiedNode = JSON.stringify(Node.get(editor, Path.parent(path)));
298
+ onDelete();
299
+ break;
300
+ case "copy":
301
+ window.copiedNode = JSON.stringify(Node.get(editor, Path.parent(path)));
302
+ break;
303
+ case "paste":
304
+ onPaste();
305
+ break;
306
+ case "delete":
307
+ onDelete();
308
+ break;
309
+ default:
310
+ return;
311
+ }
312
+ };
313
+ const repeatTimes = Math.floor(height / ROW_HEIGHT);
314
+ return /*#__PURE__*/_jsx(RnD, {
315
+ id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
316
+ className: `freegrid-section breakpoint-${breakpoint}`,
317
+ editor: editor,
318
+ path: path,
319
+ disableDragging: true,
320
+ style: {
321
+ position: "relative",
322
+ "--height": `${height}px`
323
+ },
324
+ defaultStyle: {
325
+ width: "100%",
326
+ height: height ? `${height}px` : "auto"
327
+ },
328
+ enableResizing: {
329
+ bottom: true
330
+ },
331
+ actions: ["addElement", "settings", "moveUp", "moveDown", "more"],
332
+ type: "parent",
333
+ optionsProps: {
334
+ placement: "right",
335
+ sx: classes.sectionPopper
336
+ },
337
+ onChange: onChange,
338
+ handleActionClick: handleActionClick,
339
+ actionsMap: {
340
+ addElement: {
341
+ Component: AddElement,
342
+ placement: "left",
343
+ title: "Add Element",
344
+ props: {
345
+ handleClick: handleAddElementClick
346
+ }
347
+ },
348
+ more: {
349
+ Component: More,
350
+ placement: "left",
351
+ title: "More Options",
352
+ props: {
353
+ handleClick: handleMoreClick
354
+ }
355
+ },
356
+ settings: {
357
+ Component: SectionSettings,
358
+ placement: "left",
359
+ title: "Section Settings",
360
+ props: {
361
+ editor,
362
+ path,
363
+ classes
364
+ }
365
+ }
366
+ },
367
+ readOnly: readOnly,
368
+ updated_at: updated_at,
369
+ breakpoint: breakpoint,
370
+ handleContextMenuClick: handleContextMenuClick,
371
+ children: /*#__PURE__*/_jsxs(Box, {
372
+ ...attributes,
373
+ className: "freegrid-container",
374
+ sx: classes.root,
375
+ "data-path": path.join("|"),
376
+ style: {
377
+ "--cols": `100%`,
378
+ "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`,
379
+ background: sectionBgColor,
380
+ backgroundImage: `url('${sectionBackgroundImage}')`,
381
+ backgroundSize: "cover"
382
+ },
383
+ children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
384
+ placeholder: `Section (${sectionName || "Welcome"})`,
385
+ className: "freegrid-section-infos",
386
+ contentEditable: false
387
+ }) : null]
388
+ })
389
+ });
390
+ };
391
+ export default FreeGrid;