@flozy/editor 3.8.7 → 3.8.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (188) hide show
  1. package/dist/Editor/ChatEditor.js +2 -2
  2. package/dist/Editor/CommonEditor.js +170 -166
  3. package/dist/Editor/DialogWrapper.js +4 -3
  4. package/dist/Editor/Editor.css +4 -7
  5. package/dist/Editor/Elements/AI/AIInput.js +5 -16
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +64 -67
  7. package/dist/Editor/Elements/AI/Styles.js +1 -2
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +40 -49
  9. package/dist/Editor/Elements/Button/EditorButton.js +33 -38
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  13. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  14. package/dist/Editor/Elements/Embed/Image.js +15 -14
  15. package/dist/Editor/Elements/Embed/Video.js +12 -8
  16. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  17. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  18. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  19. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +391 -0
  20. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +193 -0
  21. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  22. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +184 -0
  23. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +36 -0
  24. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  25. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  26. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +11 -0
  27. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  28. package/dist/Editor/Elements/FreeGrid/styles.js +159 -0
  29. package/dist/Editor/Elements/Grid/Grid.js +14 -34
  30. package/dist/Editor/Elements/Grid/GridItem.js +31 -23
  31. package/dist/Editor/Elements/Link/Link.js +1 -6
  32. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  33. package/dist/Editor/Elements/Link/LinkPopup.js +3 -10
  34. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  35. package/dist/Editor/Elements/Signature/SignaturePopup.js +3 -14
  36. package/dist/Editor/Elements/SimpleText/index.js +9 -8
  37. package/dist/Editor/Elements/SimpleText/style.js +37 -0
  38. package/dist/Editor/Elements/Table/Styles.js +1 -23
  39. package/dist/Editor/Elements/Table/Table.js +1 -2
  40. package/dist/Editor/Elements/Table/TableCell.js +7 -69
  41. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +0 -1
  42. package/dist/Editor/ErrorBoundary.js +30 -0
  43. package/dist/Editor/MiniEditor.js +1 -3
  44. package/dist/Editor/Styles/EditorStyles.js +23 -0
  45. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  46. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  47. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  48. package/dist/Editor/Toolbar/FormatTools/TextSize.js +18 -29
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -4
  50. package/dist/Editor/Toolbar/Mini/Options/Options.js +0 -10
  51. package/dist/Editor/Toolbar/Mini/Styles.js +0 -7
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  53. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  54. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +8 -52
  57. package/dist/Editor/Toolbar/PopupTool/index.js +13 -6
  58. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  59. package/dist/Editor/Toolbar/toolbarGroups.js +11 -48
  60. package/dist/Editor/assets/svg/AIIcons.js +1 -153
  61. package/dist/Editor/assets/svg/AddTemplateIcon.js +10 -13
  62. package/dist/Editor/assets/svg/TextIcon.js +5 -8
  63. package/dist/Editor/common/ColorPickerButton.js +9 -25
  64. package/dist/Editor/common/DnD/DragHandleButton.js +47 -56
  65. package/dist/Editor/common/Icon.js +8 -41
  66. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  67. package/dist/Editor/common/LinkSettings/index.js +2 -4
  68. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  69. package/dist/Editor/common/LinkSettings/style.js +8 -11
  70. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  71. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +105 -0
  72. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  73. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  74. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  75. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  76. package/dist/Editor/common/RnD/DragOver/index.js +46 -0
  77. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  78. package/dist/Editor/common/RnD/ElementOptions/Actions.js +82 -0
  79. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  80. package/dist/Editor/common/RnD/ElementOptions/index.js +93 -0
  81. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  82. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  83. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +58 -0
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +7 -0
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +46 -0
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +46 -0
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +46 -0
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +46 -0
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +13 -0
  91. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  92. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +14 -0
  93. package/dist/Editor/common/RnD/ElementSettings/styles.js +76 -0
  94. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  95. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  96. package/dist/Editor/common/RnD/GuideLines/styles.js +60 -0
  97. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  98. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  99. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  100. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  101. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  102. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  103. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  104. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  105. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  106. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +18 -0
  107. package/dist/Editor/common/RnD/TransformHandles/index.js +62 -0
  108. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  109. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  110. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  111. package/dist/Editor/common/RnD/Utils/gridDropItem.js +148 -0
  112. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  113. package/dist/Editor/common/RnD/VirtualElement/index.js +76 -0
  114. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  115. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  116. package/dist/Editor/common/RnD/index.js +503 -0
  117. package/dist/Editor/common/RnD/styles.js +4 -0
  118. package/dist/Editor/common/Section/index.js +28 -69
  119. package/dist/Editor/common/Section/styles.js +6 -12
  120. package/dist/Editor/common/Shorthands/elements.js +12 -54
  121. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  122. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +16 -19
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  126. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  127. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  128. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  129. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  130. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  131. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  132. package/dist/Editor/common/iconslist.js +31 -0
  133. package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
  134. package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
  135. package/dist/Editor/helper/breakpoint.js +5 -0
  136. package/dist/Editor/helper/index.js +139 -0
  137. package/dist/Editor/helper/theme.js +48 -185
  138. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  139. package/dist/Editor/hooks/useMouseMove.js +37 -12
  140. package/dist/Editor/hooks/useWindowMessage.js +7 -10
  141. package/dist/Editor/hooks/withCommon.js +2 -1
  142. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  143. package/dist/Editor/plugins/withEmbeds.js +1 -1
  144. package/dist/Editor/plugins/withHTML.js +1 -1
  145. package/dist/Editor/plugins/withTable.js +1 -1
  146. package/dist/Editor/theme/ThemeList.js +173 -50
  147. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +168 -0
  148. package/dist/Editor/utils/SlateUtilityFunctions.js +47 -163
  149. package/dist/Editor/utils/button.js +17 -1
  150. package/dist/Editor/utils/events.js +7 -54
  151. package/dist/Editor/utils/font.js +37 -40
  152. package/dist/Editor/utils/freegrid.js +49 -0
  153. package/dist/Editor/utils/helper.js +31 -31
  154. package/dist/Editor/utils/table.js +43 -51
  155. package/package.json +6 -4
  156. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
  157. package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -167
  158. package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
  159. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  160. package/dist/Editor/Elements/Redo/RedoButton.js +0 -14
  161. package/dist/Editor/Elements/Undo/UndoButton.js +0 -14
  162. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  163. package/dist/Editor/assets/svg/RedoIcon.js +0 -27
  164. package/dist/Editor/assets/svg/SettingsIcon.js +0 -28
  165. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  166. package/dist/Editor/assets/svg/UndoIcon.js +0 -27
  167. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  168. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  169. package/dist/Editor/common/CustomDialog/index.js +0 -94
  170. package/dist/Editor/common/CustomDialog/style.js +0 -67
  171. package/dist/Editor/common/CustomSelect.js +0 -33
  172. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  173. package/dist/Editor/theme/index.js +0 -144
  174. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  175. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  176. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  177. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  178. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  179. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  180. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  181. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  182. package/dist/Editor/themeSettings/icons.js +0 -60
  183. package/dist/Editor/themeSettings/index.js +0 -320
  184. package/dist/Editor/themeSettings/style.js +0 -152
  185. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  186. package/dist/Editor/themeSettingsAI/index.js +0 -356
  187. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  188. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -0,0 +1,503 @@
1
+ import React, { useEffect, useRef, useState } from "react";
2
+ import { Box } from "@mui/material";
3
+ import { Rnd } from "react-rnd";
4
+ import Handles from "./TransformHandles";
5
+ import { useEditorContext } from "../../hooks/useMouseMove";
6
+ import ElementOptions from "./ElementOptions";
7
+ import ElementSettings from "./ElementSettings";
8
+ import { getClosestDraggable, getParentSectionPath, isDragOver } from "./Utils";
9
+ import DragInfo from "./DragInfo";
10
+ import GuideLines from "./GuideLines";
11
+ import ShadowElement from "./ShadowElement";
12
+ import BoundaryLine from "./GuideLines/BoundaryLine";
13
+ import DragOver from "./DragOver";
14
+ import ContextMenu from "./ContextMenu";
15
+ import VirtualElement from "./VirtualElement";
16
+ import { ItemTypes } from "./ElementSettings/settingsConstants";
17
+ import { focusSelection, clearSelection } from "../../helper";
18
+ import { selectText } from "../../utils/helper";
19
+ import { jsx as _jsx } from "react/jsx-runtime";
20
+ import { jsxs as _jsxs } from "react/jsx-runtime";
21
+ import { Fragment as _Fragment } from "react/jsx-runtime";
22
+ const RnD = props => {
23
+ const rndRef = useRef(null);
24
+ const {
25
+ id: eId,
26
+ className,
27
+ path,
28
+ children,
29
+ style,
30
+ defaultStyle,
31
+ disableDragging,
32
+ enableResizing,
33
+ actions,
34
+ actionsMap = {},
35
+ type = "child",
36
+ optionsProps = {},
37
+ settingsProps = {},
38
+ onChange = () => {},
39
+ delta = {
40
+ width: 0,
41
+ height: 0
42
+ },
43
+ handleDragEvent = () => {},
44
+ handleResizeEvent = () => {},
45
+ handleActionClick = () => {},
46
+ readOnly,
47
+ childType = "",
48
+ updated_at = null,
49
+ editor,
50
+ breakpoint = "",
51
+ handleContextMenuClick = () => {}
52
+ } = props;
53
+ const {
54
+ isSelectedElement,
55
+ setSelectedElement,
56
+ dragging,
57
+ setDragging,
58
+ contextMenu,
59
+ setContextMenu
60
+ } = useEditorContext();
61
+ const str_path = path.join("|");
62
+ const selectedElementProps = isSelectedElement(str_path, type);
63
+ const {
64
+ enable,
65
+ cursor,
66
+ path: sp,
67
+ selectedAction
68
+ } = selectedElementProps;
69
+ const open = Boolean(enable);
70
+ const currentAction = str_path === sp ? selectedAction : null;
71
+ const positionRef = useRef();
72
+ const {
73
+ active,
74
+ id,
75
+ lines,
76
+ position,
77
+ dragOver,
78
+ parentPath
79
+ } = dragging;
80
+ const dragInfoOpen = id === str_path;
81
+ const dragOverStatus = dragOver === str_path && parentPath !== str_path;
82
+ const [absPosition, setAbsPosition] = useState({});
83
+ const openContextMenu = contextMenu?.path === str_path;
84
+ useEffect(() => {
85
+ if (type === "child") {
86
+ if (enable === 1) {
87
+ updatePosition();
88
+ } else {
89
+ rndRef.current.posUpdated = false;
90
+ setAbsPosition({});
91
+ }
92
+ }
93
+ }, [enable]);
94
+ useEffect(() => {
95
+ if (position?.x !== undefined && position?.y !== undefined && active && type === "parent") {
96
+ const dragOver = isDragOver(rndRef?.current?.getBoundingClientRect(), {
97
+ x: position.x,
98
+ y: position.y
99
+ });
100
+ if (dragOver) {
101
+ setDragging({
102
+ ...dragging,
103
+ dragOver: str_path
104
+ });
105
+ }
106
+ }
107
+ }, [active, position?.x, position?.y]);
108
+ const getCurrentEle = () => {
109
+ return positionRef.current?.resizableElement?.current;
110
+ };
111
+ const updatePosition = () => {
112
+ if (rndRef?.current && !rndRef.current.posUpdated) {
113
+ const currentEle = getCurrentEle();
114
+ const parentDom = currentEle?.closest(".freegrid-container");
115
+ const parentRect = parentDom?.getBoundingClientRect();
116
+ const {
117
+ left,
118
+ top,
119
+ width,
120
+ height
121
+ } = currentEle.getBoundingClientRect();
122
+ positionRef.current.updatePosition({
123
+ x: 0,
124
+ y: 0
125
+ });
126
+ positionRef.current.updateSize({
127
+ width: width,
128
+ height: height
129
+ });
130
+ rndRef.current.posUpdated = true;
131
+ setAbsPosition({
132
+ position: "absolute",
133
+ left: left - 16,
134
+ top: Math.abs(parentRect?.top - top),
135
+ marginTop: 0,
136
+ marginLeft: 0
137
+ });
138
+ }
139
+ };
140
+ const onClick = e => {
141
+ if (readOnly) {
142
+ return;
143
+ }
144
+
145
+ // for context menu
146
+ setContextMenu({
147
+ path: null
148
+ });
149
+ if (e?.preventDefault && e?.stopPropagation && !enable) {
150
+ e.preventDefault();
151
+ e.stopPropagation();
152
+ }
153
+ switch (e.detail) {
154
+ case 1:
155
+ if (!enable) {
156
+ setSelectedElement({
157
+ path: str_path,
158
+ enable: 1,
159
+ cursor: "move",
160
+ anchorEl: rndRef?.current
161
+ });
162
+ }
163
+ break;
164
+ case 2:
165
+ focusSelection(editor, {
166
+ path
167
+ });
168
+ setSelectedElement({
169
+ path: str_path,
170
+ enable: 2,
171
+ cursor: "auto",
172
+ anchorEl: rndRef?.current
173
+ });
174
+ // for default selection
175
+ if (childType === "text" && type === "child") {
176
+ setTimeout(() => {
177
+ selectText(editor, {
178
+ path: [...path, 0],
179
+ cursorOnly: false
180
+ });
181
+ }, 10);
182
+ }
183
+ break;
184
+ default:
185
+ return;
186
+ }
187
+ };
188
+ const handleAction = type => {
189
+ switch (type) {
190
+ case 1:
191
+ setSelectedElement({
192
+ path: str_path,
193
+ enable: 1,
194
+ cursor: disableDragging ? "auto" : "move"
195
+ });
196
+ break;
197
+ case 2:
198
+ onClick({
199
+ detail: type
200
+ });
201
+ break;
202
+ case 3:
203
+ clearSelection(editor);
204
+ setSelectedElement({});
205
+ break;
206
+ case "settings":
207
+ setSelectedElement({
208
+ ...selectedElementProps,
209
+ selectedAction: type,
210
+ selectedActionPath: path
211
+ });
212
+ break;
213
+ case "link":
214
+ setSelectedElement({
215
+ ...selectedElementProps,
216
+ selectedAction: type,
217
+ selectedActionPath: path
218
+ });
219
+ break;
220
+ default:
221
+ handleActionClick(type);
222
+ return;
223
+ }
224
+ };
225
+ const onAfterDrop = updated_data => {
226
+ const {
227
+ updated_at
228
+ } = updated_data || {};
229
+ setSelectedElement({});
230
+ // to maitain absolute
231
+ rndRef.current.posUpdated = false;
232
+ // need to retain drag option if section changes
233
+ setAbsPosition({});
234
+ updatePosition();
235
+ if (updated_at) {
236
+ // disable dragging
237
+ setDragging({
238
+ active: false,
239
+ id: null,
240
+ isDragging: false
241
+ });
242
+ }
243
+ };
244
+ const onDragStart = e => {
245
+ e.preventDefault();
246
+ const {
247
+ left,
248
+ top,
249
+ width,
250
+ height
251
+ } = e?.target?.getBoundingClientRect();
252
+ const ref = positionRef.current?.resizableElement?.current;
253
+ setDragging({
254
+ active: true,
255
+ id: str_path,
256
+ position: {
257
+ x: e.clientX,
258
+ y: e.clientY,
259
+ strXY: `${e.clientX},${e.clientY}`,
260
+ diffX: parseInt(Math.abs(Math.floor(left - e.clientX))),
261
+ diffY: parseInt(Math.abs(Math.floor(top - e.clientY)))
262
+ },
263
+ dimension: {
264
+ width,
265
+ height
266
+ },
267
+ isDragging: true,
268
+ parentPath: getParentSectionPath({
269
+ ref
270
+ }, ".freegrid-container")
271
+ });
272
+ };
273
+ const onDrag = (e, d) => {
274
+ e.preventDefault();
275
+ const lines = getClosestDraggable(e.clientX, e.clientY, ".freegrid-item.inactive-drag:not(.exclude-virtual)", ".freegrid-item.active-drag:not(.exclude-virtual)");
276
+ setAbsPosition({
277
+ ...absPosition,
278
+ "--zIndex": 2000
279
+ });
280
+ setDragging({
281
+ isDragging: true,
282
+ ...dragging,
283
+ position: {
284
+ ...dragging.position,
285
+ x: e.clientX,
286
+ y: e.clientY
287
+ },
288
+ lines: lines
289
+ });
290
+ };
291
+ const onDragStop = (e, d) => {
292
+ e.preventDefault();
293
+ e.stopPropagation();
294
+ d.x = e.x;
295
+ d.y = e.y;
296
+ d.offsetX = e.offsetX;
297
+ d.offsetY = e.offsetY;
298
+ d.dragOver = dragOver;
299
+ d.parentPath = parentPath;
300
+ d.diffX = position?.diffX;
301
+ d.diffY = position?.diffY;
302
+ // avoid x, y value replace issue
303
+ const [x, y] = position.strXY.split(",");
304
+ d.startPosition = {
305
+ ...position,
306
+ x: parseInt(x),
307
+ y: parseInt(y)
308
+ };
309
+ d.endPosition = {
310
+ x: e.x,
311
+ y: e.y
312
+ };
313
+ handleDragEvent("stop", d, onAfterDrop);
314
+ // reset zIndex var on drag stop
315
+ const ud = {
316
+ ...absPosition
317
+ };
318
+ delete ud["--zIndex"];
319
+ setAbsPosition({
320
+ ...ud
321
+ });
322
+ };
323
+ const onResizeStop = (e, direction, ref, d, position) => {
324
+ e.preventDefault();
325
+ // calculate the text height
326
+ const nodeList = positionRef?.current?.resizableElement?.current?.childNodes || [];
327
+ const textElement = Array.from(nodeList).filter(node => node.classList.contains("fgi_type_text"));
328
+ const updatedSize = {
329
+ width: delta?.width + d.width,
330
+ height: delta?.height + d.height
331
+ };
332
+ if (textElement[0] && type === "child") {
333
+ const textRect = textElement[0]?.getBoundingClientRect();
334
+ updatedSize.height = textRect.height;
335
+ positionRef.current.updateSize({
336
+ ...updatedSize
337
+ });
338
+ }
339
+ onChange({
340
+ ...updatedSize
341
+ });
342
+ handleResizeEvent("stop");
343
+ };
344
+ const onCloseSettings = () => {
345
+ setSelectedElement({
346
+ ...selectedElementProps,
347
+ selectedAction: null,
348
+ selectedActionPath: null
349
+ });
350
+ };
351
+ const handleContextMenu = e => {
352
+ if (readOnly) {
353
+ return;
354
+ }
355
+ e.preventDefault();
356
+ e.stopPropagation();
357
+ onClick({
358
+ detail: 1
359
+ });
360
+ setContextMenu({
361
+ x: e.clientX + 2,
362
+ y: e.clientY - 6,
363
+ path: path.join("|")
364
+ });
365
+ };
366
+ const handleClose = d => () => {
367
+ if (d) {
368
+ handleContextMenuClick(d);
369
+ }
370
+ if (d?.autoClose !== false) {
371
+ setContextMenu({
372
+ path: null
373
+ });
374
+ }
375
+ };
376
+ const getEventProps = () => {
377
+ if (!readOnly) {
378
+ return {
379
+ onResizeStart: e => {
380
+ e.preventDefault();
381
+ },
382
+ onDragStart: onDragStart,
383
+ onDrag: onDrag,
384
+ onDragStop: onDragStop,
385
+ onResizeStop: onResizeStop,
386
+ onClick: onClick,
387
+ onContextMenu: handleContextMenu
388
+ };
389
+ } else {
390
+ return {};
391
+ }
392
+ };
393
+ return /*#__PURE__*/_jsxs(_Fragment, {
394
+ children: [/*#__PURE__*/_jsxs(Box, {
395
+ component: Rnd,
396
+ placeholder: ItemTypes[childType] || "Item",
397
+ id: eId || "",
398
+ ref: c => {
399
+ positionRef.current = c;
400
+ },
401
+ className: `${className || ""} ${dragInfoOpen ? "active-drag" : "inactive-drag"} enable-${enable} type_${childType} section_type_${type || "parent"}`,
402
+ "data-path": str_path,
403
+ style: {
404
+ position: "relative",
405
+ outline: enable && type === "child" ? "#2563EB solid 2px" : 0,
406
+ cursor: cursor,
407
+ caretColor: enable === 2 ? "auto" : "transparent",
408
+ userSelect: enable === 2 || readOnly ? "auto" : "none",
409
+ ...style,
410
+ zIndex: enable === 1 ? 1 : "inherit",
411
+ left: "var(--left)",
412
+ ...absPosition
413
+ },
414
+ default: {
415
+ ...(defaultStyle || {})
416
+ },
417
+ dragGrid: [2, 2],
418
+ resizeHandleComponent: enable ? Handles : {},
419
+ disableDragging: readOnly || disableDragging || enable !== 1,
420
+ suppressContentEditableWarning: true,
421
+ enableResizing: readOnly ? false : enable && !active ? enableResizing : {},
422
+ ...getEventProps(),
423
+ children: [/*#__PURE__*/_jsx("span", {
424
+ id: `opt_ref_${sp}`,
425
+ style: {
426
+ position: "absolute",
427
+ left: "-8px",
428
+ top: "-30px",
429
+ width: "calc(100% + 24px)",
430
+ height: "calc(100% + 42px)",
431
+ pointerEvents: "none"
432
+ },
433
+ ref: rndRef,
434
+ className: "options-wrapper",
435
+ contentEditable: false
436
+ }), children, enable !== 2 && type !== "parent" && !readOnly ? /*#__PURE__*/_jsx("button", {
437
+ className: "editor-blocker",
438
+ contentEditable: false
439
+ }) : null, /*#__PURE__*/_jsx(DragOver, {
440
+ status: dragOverStatus
441
+ })]
442
+ }, eId), !active ? /*#__PURE__*/_jsx(ElementOptions, {
443
+ open: open,
444
+ anchorEl: rndRef?.current,
445
+ enable: enable,
446
+ handleAction: handleAction,
447
+ actions: actions,
448
+ actionsMap: actionsMap,
449
+ optionsProps: optionsProps,
450
+ selectedAction: currentAction
451
+ }) : null, /*#__PURE__*/_jsx(ElementSettings, {
452
+ open: Boolean(currentAction),
453
+ currentAction: currentAction,
454
+ anchorEl: rndRef?.current,
455
+ placement: "right-start",
456
+ onClose: onCloseSettings,
457
+ childType: childType,
458
+ editor: editor,
459
+ path: sp,
460
+ ...settingsProps
461
+ }), /*#__PURE__*/_jsx(DragInfo, {
462
+ anchorEl: rndRef?.current,
463
+ open: dragInfoOpen,
464
+ dragging: dragging
465
+ }), /*#__PURE__*/_jsx(GuideLines, {
466
+ lines: lines
467
+ }), !readOnly ? /*#__PURE__*/_jsx(BoundaryLine, {}) : null, /*#__PURE__*/_jsx(ShadowElement, {
468
+ type: type,
469
+ enable: enable,
470
+ style: {
471
+ ...style,
472
+ ...defaultStyle,
473
+ left: "var(--left)",
474
+ marginTop: "var(--marginTop)",
475
+ gridArea: "var(--gridArea)"
476
+ }
477
+ }), /*#__PURE__*/_jsx(ContextMenu, {
478
+ type: type,
479
+ open: openContextMenu,
480
+ contextMenu: contextMenu,
481
+ handleClose: handleClose
482
+ }), type === "parent" && breakpoint === "lg" ? /*#__PURE__*/_jsx(VirtualElement, {
483
+ parentEle: positionRef?.current?.resizableElement?.current,
484
+ updated_at: updated_at,
485
+ path: str_path,
486
+ editor: editor
487
+ }) : null]
488
+ });
489
+ };
490
+ RnD.defaultProps = {
491
+ disableDragging: false,
492
+ enableResizing: {
493
+ bottom: true,
494
+ bottomLeft: true,
495
+ bottomRight: true,
496
+ left: true,
497
+ right: true,
498
+ top: true,
499
+ topLeft: true,
500
+ topRight: true
501
+ }
502
+ };
503
+ export default RnD;
@@ -0,0 +1,4 @@
1
+ const useRnDStyles = () => ({
2
+ root: {}
3
+ });
4
+ export default useRnDStyles;
@@ -1,20 +1,20 @@
1
- import React, { useRef, useState } from "react";
1
+ import React, { useState } from "react";
2
+ import { useTheme } from "@mui/material";
2
3
  import { Transforms } from "slate";
3
4
  import { ReactEditor, useSlateStatic } from "slate-react";
4
- import { Box, IconButton, Popper, Tooltip } from "@mui/material";
5
+ import { Box, IconButton, Tooltip } from "@mui/material";
5
6
  import TuneIcon from "@mui/icons-material/Tune";
6
7
  import SectionPopup from "../../Elements/Grid/SectionPopup";
7
- import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
8
+ import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
8
9
  import DragHandle from "../DnD/DragHandleButton";
9
10
  import { useEditorSelection } from "../../hooks/useMouseMove";
10
11
  import SectionStyle from "./styles";
11
- import useWindowResize from "../../hooks/useWindowResize";
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
- import { Fragment as _Fragment } from "react/jsx-runtime";
15
14
  const list_types = ["orderedList", "unorderedList"];
16
15
  const Section = props => {
17
- const classes = SectionStyle();
16
+ const theme = useTheme();
17
+ const classes = SectionStyle(theme);
18
18
  const {
19
19
  children,
20
20
  element,
@@ -40,33 +40,14 @@ const Section = props => {
40
40
  flexDirection
41
41
  } = sectionAlignment || {};
42
42
  const path = ReactEditor.findPath(editor, element);
43
- const anchorEl = useRef(null);
44
- const popperEl = useRef(null);
45
- const [size] = useWindowResize();
46
- const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
47
- const [isHovering, setIsHovering] = useState(false);
48
- const onMouseEnter = () => {
49
- setIsHovering(true);
50
- };
51
- const onMouseLeave = () => {
52
- setIsHovering(false);
53
- };
54
43
  const onSettings = () => {
55
44
  setOpenSettings(true);
56
45
  };
57
- const Toolbar = ({
58
- fromPopper
59
- }) => {
46
+ const Toolbar = () => {
60
47
  return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
61
48
  component: "div",
62
49
  className: `element-toolbar no-border-button hr section-tw sectionIcon`,
63
- style: fromPopper ? {
64
- position: "unset",
65
- marginLeft: "28px",
66
- paddingTop: "4px",
67
- marginRight: "10px",
68
- height: "100%"
69
- } : {
50
+ style: {
70
51
  left: "-28px",
71
52
  top: "3px"
72
53
  },
@@ -99,67 +80,45 @@ const Section = props => {
99
80
  at: path
100
81
  });
101
82
  };
83
+ const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
102
84
  const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "needHover" : "";
103
85
  const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
104
86
  backgroundImage: `url(${sectionBackgroundImage})`
105
87
  } : {};
106
- return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
88
+ const edSectionSp = groupByBreakpoint({
89
+ padding: {
90
+ ...getTRBLBreakPoints(sectionBannerSpacing)
91
+ },
92
+ borderRadius: {
93
+ ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
94
+ }
95
+ }, theme);
96
+ const edInnerSp = groupByBreakpoint({
97
+ width: {
98
+ ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
99
+ }
100
+ }, theme);
101
+ return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
107
102
  component: "div",
108
103
  className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
109
104
  sx: {
110
105
  ...classes.root,
111
106
  background: sectionBgColor,
112
107
  ...sectionBgImage,
113
- padding: {
114
- ...getTRBLBreakPoints(sectionBannerSpacing)
115
- },
116
- borderRadius: {
117
- ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
118
- },
108
+ ...edSectionSp,
119
109
  flexDirection: flexDirection || "column",
120
110
  alignItems: horizantal,
121
111
  justifyContent: vertical
122
112
  },
123
- onMouseEnter: onMouseEnter,
124
- onMouseLeave: onMouseLeave,
125
113
  children: [/*#__PURE__*/_jsxs(Box, {
126
114
  className: "ed-section-inner",
127
115
  sx: {
128
116
  position: "relative",
129
- width: {
130
- ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
131
- }
117
+ ...edInnerSp
132
118
  },
133
- ref: anchorEl,
134
- children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
135
- open: isHovering && isSectionFullWidth,
136
- anchorEl: anchorEl?.current,
137
- placement: "top-start",
138
- sx: {
139
- zIndex: 9999
140
- },
141
- disablePortal: true,
142
- ref: popperEl,
143
- className: "sectionPopper",
144
- children: /*#__PURE__*/_jsxs(Box, {
145
- sx: {
146
- bgcolor: "background.paper",
147
- background: "#F6F6F6",
148
- height: "30px",
149
- position: "relative"
150
- },
151
- children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
152
- ...props,
153
- fromPopper: true
154
- }) : null, /*#__PURE__*/_jsx(Toolbar, {
155
- fromPopper: true
156
- })]
157
- })
158
- }) : /*#__PURE__*/_jsxs(_Fragment, {
159
- children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
160
- ...props
161
- }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
162
- }), children]
119
+ children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
120
+ ...props
121
+ }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
163
122
  }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
164
123
  element: {
165
124
  ...element,
@@ -1,4 +1,4 @@
1
- const SectionStyle = () => ({
1
+ const SectionStyle = theme => ({
2
2
  root: {
3
3
  "&:hover": {
4
4
  "& .dh-para": {
@@ -6,9 +6,6 @@ const SectionStyle = () => ({
6
6
  },
7
7
  "& .sectionIcon": {
8
8
  opacity: 1
9
- },
10
- "& .sectionPopper": {
11
- opacity: 1
12
9
  }
13
10
  },
14
11
  "& .element-toolbar": {
@@ -16,14 +13,6 @@ const SectionStyle = () => ({
16
13
  display: "block"
17
14
  }
18
15
  },
19
- "& .sectionPopper": {
20
- "&:hover": {
21
- opacity: 1
22
- }
23
- },
24
- "& .sectionPopper": {
25
- opacity: 0
26
- },
27
16
  "& .sectionIcon": {
28
17
  opacity: 0,
29
18
  padding: "0px",
@@ -49,6 +38,11 @@ const SectionStyle = () => ({
49
38
  "&.active": {
50
39
  opacity: 1
51
40
  }
41
+ },
42
+ "& .ed-section-inner": {
43
+ [theme.breakpoints.between("xs", "md")]: {
44
+ maxWidth: `320px !important`
45
+ }
52
46
  }
53
47
  }
54
48
  });