@flozy/editor 4.0.3 → 4.0.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (148) hide show
  1. package/dist/Editor/CommonEditor.js +85 -13
  2. package/dist/Editor/DialogWrapper.js +4 -3
  3. package/dist/Editor/Editor.css +28 -2
  4. package/dist/Editor/Elements/AI/AIInput.js +31 -33
  5. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +124 -133
  7. package/dist/Editor/Elements/AI/Styles.js +2 -2
  8. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  9. package/dist/Editor/Elements/AI/VoiceToText/index.js +184 -0
  10. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  11. package/dist/Editor/Elements/AI/helper.js +5 -3
  12. package/dist/Editor/Elements/AppHeader/AppHeader.js +36 -23
  13. package/dist/Editor/Elements/Button/EditorButton.js +23 -16
  14. package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -2
  15. package/dist/Editor/Elements/Color Picker/ColorButtons.js +1 -1
  16. package/dist/Editor/Elements/Color Picker/Styles.js +1 -0
  17. package/dist/Editor/Elements/Embed/Image.js +15 -14
  18. package/dist/Editor/Elements/Embed/Video.js +12 -8
  19. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  20. package/dist/Editor/Elements/Form/Form.js +43 -27
  21. package/dist/Editor/Elements/Form/FormField.js +21 -10
  22. package/dist/Editor/Elements/Form/Workflow/index.js +5 -2
  23. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +437 -0
  24. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +206 -0
  25. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  26. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +236 -0
  27. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +44 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  29. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  30. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +19 -0
  31. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  32. package/dist/Editor/Elements/FreeGrid/styles.js +214 -0
  33. package/dist/Editor/Elements/Grid/Grid.js +12 -8
  34. package/dist/Editor/Elements/Grid/GridItem.js +31 -21
  35. package/dist/Editor/Elements/Link/LinkPopup.js +69 -13
  36. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  37. package/dist/Editor/Elements/NewLine/NewLineButton.js +2 -2
  38. package/dist/Editor/Elements/Signature/Signature.css +13 -6
  39. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +2 -1
  40. package/dist/Editor/Elements/Signature/SignaturePopup.js +186 -31
  41. package/dist/Editor/Elements/SimpleText/index.js +19 -7
  42. package/dist/Editor/Elements/SimpleText/style.js +44 -1
  43. package/dist/Editor/ErrorBoundary.js +30 -0
  44. package/dist/Editor/Styles/EditorStyles.js +28 -0
  45. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +1 -1
  46. package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -2
  47. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +33 -5
  48. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +12 -13
  49. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +12 -13
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +3 -0
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +59 -0
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  53. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +107 -40
  54. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +57 -61
  55. package/dist/Editor/Toolbar/PopupTool/index.js +13 -3
  56. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  57. package/dist/Editor/Toolbar/toolbarGroups.js +15 -5
  58. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  59. package/dist/Editor/common/EditorCmds.js +0 -3
  60. package/dist/Editor/common/EditorIcons.js +7 -7
  61. package/dist/Editor/common/Icon.js +39 -30
  62. package/dist/Editor/common/ImageList.js +16 -3
  63. package/dist/Editor/common/ImageSelector/ImageSelector.js +30 -9
  64. package/dist/Editor/common/ImageSelector/Styles.js +2 -1
  65. package/dist/Editor/common/LinkSettings/index.js +2 -1
  66. package/dist/Editor/common/LinkSettings/style.js +11 -8
  67. package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
  68. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  69. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +142 -0
  70. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  71. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  72. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  73. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  74. package/dist/Editor/common/RnD/DragOver/index.js +55 -0
  75. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  76. package/dist/Editor/common/RnD/ElementOptions/Actions.js +102 -0
  77. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  78. package/dist/Editor/common/RnD/ElementOptions/index.js +95 -0
  79. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  80. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  81. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +36 -0
  82. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +60 -0
  83. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +9 -0
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +47 -0
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +47 -0
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +47 -0
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +48 -0
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +47 -0
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +47 -0
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +17 -0
  92. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  93. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +18 -0
  94. package/dist/Editor/common/RnD/ElementSettings/styles.js +94 -0
  95. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  96. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  97. package/dist/Editor/common/RnD/GuideLines/styles.js +62 -0
  98. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  99. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  100. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  101. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  102. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  103. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  104. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  105. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  106. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  107. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +20 -0
  108. package/dist/Editor/common/RnD/TransformHandles/index.js +67 -0
  109. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  110. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  111. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  112. package/dist/Editor/common/RnD/Utils/gridDropItem.js +181 -0
  113. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  114. package/dist/Editor/common/RnD/VirtualElement/index.js +77 -0
  115. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  116. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  117. package/dist/Editor/common/RnD/index.js +567 -0
  118. package/dist/Editor/common/RnD/styles.js +4 -0
  119. package/dist/Editor/common/Section/index.js +21 -12
  120. package/dist/Editor/common/Section/styles.js +7 -4
  121. package/dist/Editor/common/Shorthands/elements.js +21 -9
  122. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +18 -10
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +18 -5
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  126. package/dist/Editor/common/StyleBuilder/index.js +6 -4
  127. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  128. package/dist/Editor/common/iconListV2.js +843 -0
  129. package/dist/Editor/commonStyle.js +6 -0
  130. package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
  131. package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
  132. package/dist/Editor/helper/breakpoint.js +5 -0
  133. package/dist/Editor/helper/index.js +139 -0
  134. package/dist/Editor/helper/theme.js +50 -1
  135. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  136. package/dist/Editor/hooks/useMouseMove.js +36 -8
  137. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  138. package/dist/Editor/hooks/withCommon.js +2 -1
  139. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  140. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +197 -0
  141. package/dist/Editor/utils/SlateUtilityFunctions.js +36 -4
  142. package/dist/Editor/utils/events.js +5 -0
  143. package/dist/Editor/utils/form.js +7 -2
  144. package/dist/Editor/utils/formfield.js +1 -1
  145. package/dist/Editor/utils/freegrid.js +91 -0
  146. package/dist/Editor/utils/helper.js +43 -0
  147. package/dist/Editor/utils/insertAppHeader.js +47 -40
  148. package/package.json +6 -2
@@ -0,0 +1,437 @@
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 { appHeaderNode } from "../../utils/insertAppHeader";
20
+ import { FORM_NODE } from "../../utils/form";
21
+ import itemOptions from "./Options/sectionItemOptions";
22
+ import { jsx as _jsx } from "react/jsx-runtime";
23
+ import { jsxs as _jsxs } from "react/jsx-runtime";
24
+ const MAX_DEVICE_WIDTH = {
25
+ lg: 980,
26
+ xs: 320
27
+ };
28
+ const FreeGrid = props => {
29
+ const theme = useTheme();
30
+ const breakpoint = useBreakpoints(theme);
31
+ const classes = useFreeGridStyles({
32
+ theme,
33
+ MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint]
34
+ });
35
+ const editor = useSlateStatic();
36
+ const {
37
+ element,
38
+ attributes,
39
+ children,
40
+ customProps
41
+ } = props;
42
+ const {
43
+ sectionName
44
+ } = element;
45
+ const {
46
+ readOnly,
47
+ customSX
48
+ } = customProps;
49
+ const {
50
+ updated_at,
51
+ sectionBgColor,
52
+ sectionBackgroundImage
53
+ } = element;
54
+ const path = ReactEditor.findPath(editor, element);
55
+ // get values based on breakpoint size
56
+ const {
57
+ height
58
+ } = breakpointValues(element.type, breakpoint, element);
59
+ const {
60
+ setSelectedElement
61
+ } = useEditorContext();
62
+ const onChange = data => {
63
+ const append = breakpoint === "lg" ? "" : `_${breakpoint}`;
64
+ const updateData = {
65
+ ...data,
66
+ [`height${append}`]: height + data.height
67
+ };
68
+ if (append !== "") {
69
+ delete updateData.height;
70
+ }
71
+ if (breakpoint === "xs") {
72
+ updateData.xs_updatedOn = new Date().getTime();
73
+ }
74
+ delete updateData.children;
75
+ Transforms.setNodes(editor, {
76
+ ...updateData
77
+ }, {
78
+ at: path
79
+ });
80
+ };
81
+ const moveUp = () => {
82
+ const cur_root_path = Path.parent(path);
83
+ if (Path.hasPrevious(cur_root_path)) {
84
+ Transforms.moveNodes(editor, {
85
+ at: cur_root_path,
86
+ to: Path.previous(cur_root_path)
87
+ });
88
+ }
89
+ };
90
+ const moveDown = () => {
91
+ const cur_root_path = Path.parent(path);
92
+ Transforms.moveNodes(editor, {
93
+ at: cur_root_path,
94
+ to: Path.next(cur_root_path)
95
+ });
96
+ };
97
+ const handleActionClick = actionType => {
98
+ switch (actionType) {
99
+ case "moveUp":
100
+ moveUp();
101
+ break;
102
+ case "moveDown":
103
+ moveDown();
104
+ break;
105
+ default:
106
+ }
107
+ };
108
+ const handleMoreClick = moreAction => () => {
109
+ try {
110
+ const cur_root_path = Path.parent(path);
111
+ const next_path = Path.next(cur_root_path);
112
+ switch (moreAction) {
113
+ case "addSection":
114
+ insertFreeGrid(editor, next_path, {
115
+ setSelectedElement
116
+ });
117
+ break;
118
+ case "duplicateSection":
119
+ Transforms.insertNodes(editor, [{
120
+ ...JSON.parse(JSON.stringify(Node.get(editor, cur_root_path)))
121
+ }], {
122
+ at: next_path
123
+ });
124
+ scrollToNewSection(editor, next_path, {
125
+ setSelectedElement
126
+ });
127
+ break;
128
+ default:
129
+ }
130
+ } catch (err) {
131
+ console.log(err);
132
+ }
133
+ };
134
+ const isEmptySection = () => {
135
+ try {
136
+ const emptyNode = element?.children?.find(f => !f.type) && element?.children.length === 1;
137
+ return emptyNode;
138
+ } catch (err) {
139
+ console.log(err);
140
+ }
141
+ };
142
+ const handleAddElementClick = type => () => {
143
+ const isEmpty = isEmptySection();
144
+ const insertAt = isEmpty ? [...path, 0] : [...path, element?.children?.length];
145
+ switch (type) {
146
+ case "addText":
147
+ Transforms.insertNodes(editor, [{
148
+ type: "freegridItem",
149
+ childType: "text",
150
+ children: [{
151
+ type: "paragraph",
152
+ children: [{
153
+ text: "Text"
154
+ }]
155
+ }],
156
+ gridArea: "3 / 1 / 4 / 2",
157
+ left: 50,
158
+ marginTop: 0,
159
+ top: 0,
160
+ width: 170,
161
+ height: 80
162
+ }], {
163
+ at: [...insertAt]
164
+ });
165
+ break;
166
+ case "addButton":
167
+ Transforms.insertNodes(editor, [{
168
+ type: "freegridItem",
169
+ childType: "button",
170
+ children: [{
171
+ type: "button",
172
+ children: [{
173
+ text: ""
174
+ }],
175
+ buttonLink: {
176
+ linkType: "webAddress"
177
+ },
178
+ iconPosition: "start",
179
+ bgColor: "#2563EB",
180
+ textColor: "#FFF",
181
+ borderRadius: {
182
+ topLeft: 30,
183
+ topRight: 30,
184
+ bottomLeft: 30,
185
+ bottomRight: 30
186
+ },
187
+ bannerSpacing: {
188
+ left: 12,
189
+ top: 12,
190
+ right: 12,
191
+ bottom: 12
192
+ }
193
+ }],
194
+ gridArea: "3 / 1 / 4 / 2",
195
+ left: 50,
196
+ marginTop: 0,
197
+ top: 0,
198
+ width: 170,
199
+ height: 80
200
+ }], {
201
+ at: [...insertAt]
202
+ });
203
+ break;
204
+ case "addImage":
205
+ Transforms.insertNodes(editor, [{
206
+ type: "freegridItem",
207
+ childType: "image",
208
+ children: [{
209
+ type: "image",
210
+ url: "",
211
+ images: [],
212
+ children: [{
213
+ text: ""
214
+ }]
215
+ }],
216
+ gridArea: "3 / 1 / 4 / 2",
217
+ left: 50,
218
+ marginTop: 0,
219
+ top: 0,
220
+ width: 170,
221
+ height: 80
222
+ }], {
223
+ at: [...insertAt]
224
+ });
225
+ break;
226
+ case "addVideo":
227
+ Transforms.insertNodes(editor, [{
228
+ ...insertFreeGridItem("video", createEmbedNode("video", {
229
+ url: "",
230
+ alt: "",
231
+ images: []
232
+ }), {
233
+ height: 300,
234
+ width: 250
235
+ })
236
+ }], {
237
+ at: [...insertAt]
238
+ });
239
+ break;
240
+ case "addBox":
241
+ Transforms.insertNodes(editor, [{
242
+ ...insertFreeGridItem("box", {
243
+ type: "paragraph",
244
+ children: [{
245
+ text: ""
246
+ }]
247
+ }, {}, "freegridBox")
248
+ }], {
249
+ at: [...insertAt]
250
+ });
251
+ break;
252
+ case "addForm":
253
+ Transforms.insertNodes(editor, [{
254
+ ...insertFreeGridItem("form", {
255
+ ...FORM_NODE()
256
+ }, {
257
+ height: 100,
258
+ width: 400
259
+ })
260
+ }], {
261
+ at: [...insertAt]
262
+ });
263
+ break;
264
+ case "addAppHeader":
265
+ Transforms.insertNodes(editor, [{
266
+ ...insertFreeGridItem("appHeader", {
267
+ ...appHeaderNode({
268
+ menus: null
269
+ })
270
+ }, {
271
+ height: 60,
272
+ width: 400
273
+ })
274
+ }], {
275
+ at: [...insertAt]
276
+ });
277
+ break;
278
+ default:
279
+ }
280
+ // focus on newly added element
281
+ focusOnNewItem(editor, insertAt, {
282
+ setSelectedElement
283
+ });
284
+ };
285
+ const onPaste = () => {
286
+ try {
287
+ const cur_root_path = Path.parent(path);
288
+ const parsed_node = JSON.parse(window.copiedNode);
289
+ if (parsed_node?.type === "freegridItem" || parsed_node?.type === "freegridBox") {
290
+ const np = onPasteRnDNode(editor, {
291
+ path,
292
+ children: children
293
+ });
294
+ if (np) {
295
+ focusOnNewItem(editor, np, {
296
+ setSelectedElement
297
+ });
298
+ }
299
+ } else {
300
+ // for pasting whole section
301
+ const new_path = Path.next(cur_root_path);
302
+ Transforms.insertNodes(editor, [{
303
+ ...parsed_node
304
+ }], {
305
+ at: new_path
306
+ });
307
+ scrollToNewSection(editor, new_path, {
308
+ setSelectedElement
309
+ });
310
+ }
311
+ } catch (err) {
312
+ console.log(err);
313
+ }
314
+ };
315
+ const onDelete = () => {
316
+ try {
317
+ Transforms.removeNodes(editor, {
318
+ at: Path.parent(path)
319
+ });
320
+ } catch (err) {
321
+ console.log(err);
322
+ }
323
+ };
324
+ const handleContextMenuClick = d => {
325
+ switch (d?.name) {
326
+ case "cut":
327
+ window.copiedNode = JSON.stringify(Node.get(editor, Path.parent(path)));
328
+ onDelete();
329
+ break;
330
+ case "copy":
331
+ window.copiedNode = JSON.stringify(Node.get(editor, Path.parent(path)));
332
+ break;
333
+ case "paste":
334
+ onPaste();
335
+ break;
336
+ case "delete":
337
+ onDelete();
338
+ break;
339
+ default:
340
+ return;
341
+ }
342
+ };
343
+ const repeatTimes = Math.floor(height / ROW_HEIGHT);
344
+ return /*#__PURE__*/_jsx(RnD, {
345
+ id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
346
+ className: `freegrid-section breakpoint-${breakpoint}`,
347
+ editor: editor,
348
+ path: path,
349
+ disableDragging: true,
350
+ style: {
351
+ position: "relative",
352
+ "--height": `${height}px`
353
+ },
354
+ defaultStyle: {
355
+ width: "100%",
356
+ height: height ? `${height}px` : "auto"
357
+ },
358
+ enableResizing: {
359
+ bottom: true,
360
+ top: false,
361
+ left: false,
362
+ right: false,
363
+ topLeft: false,
364
+ topRight: false,
365
+ bottomLeft: false,
366
+ bottomRight: false
367
+ },
368
+ actions: itemOptions?.section || [],
369
+ type: "parent",
370
+ optionsProps: {
371
+ placement: "right",
372
+ sx: {
373
+ ...classes.sectionPopper,
374
+ ...(customSX?.sectionPopper || {})
375
+ }
376
+ },
377
+ settingsProps: {
378
+ settings: "freeGrid",
379
+ customProps
380
+ },
381
+ onChange: onChange,
382
+ handleActionClick: handleActionClick,
383
+ actionsMap: {
384
+ addElement: {
385
+ Component: AddElement,
386
+ placement: "left",
387
+ title: "Add Element",
388
+ props: {
389
+ handleClick: handleAddElementClick
390
+ }
391
+ },
392
+ more: {
393
+ Component: More,
394
+ placement: "left",
395
+ title: "More Options",
396
+ props: {
397
+ handleClick: handleMoreClick
398
+ }
399
+ },
400
+ settings: {
401
+ Component: SectionSettings,
402
+ placement: "left",
403
+ title: "Section Settings",
404
+ props: {
405
+ editor,
406
+ path,
407
+ classes
408
+ }
409
+ }
410
+ },
411
+ readOnly: readOnly,
412
+ updated_at: updated_at,
413
+ breakpoint: breakpoint,
414
+ handleContextMenuClick: handleContextMenuClick,
415
+ children: /*#__PURE__*/_jsxs(Box, {
416
+ ...attributes,
417
+ id: sectionName,
418
+ "data-event": "rnd-click",
419
+ className: "freegrid-container freegrid-container-parent",
420
+ sx: classes.root,
421
+ "data-path": path.join("|"),
422
+ style: {
423
+ "--cols": `100%`,
424
+ "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`,
425
+ background: sectionBgColor,
426
+ backgroundImage: `url('${sectionBackgroundImage}')`,
427
+ backgroundSize: "cover"
428
+ },
429
+ children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
430
+ placeholder: `Section (${sectionName || "Welcome"})`,
431
+ className: "freegrid-section-infos",
432
+ contentEditable: false
433
+ }) : null]
434
+ })
435
+ });
436
+ };
437
+ export default FreeGrid;
@@ -0,0 +1,206 @@
1
+ import React from "react";
2
+ import { Transforms, Node, Path } from "slate";
3
+ import { useSlateStatic } from "slate-react";
4
+ import { ReactEditor } from "slate-react";
5
+ import { Box, useTheme } from "@mui/material";
6
+ import RnD from "../../common/RnD";
7
+ import { onDropItem, ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
8
+ import useBreakpoints from "../../hooks/useBreakpoints";
9
+ import { breakpointValues, formatBreakpointValues } from "./breakpointConstants";
10
+ import { useEditorContext } from "../../hooks/useMouseMove";
11
+ import { getBreakPointsValue } from "../../helper/theme";
12
+ import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
13
+ import { bringItemToFB } from "../../helper";
14
+ import itemOptions from "./Options/sectionItemOptions";
15
+ import { jsx as _jsx } from "react/jsx-runtime";
16
+ const FreeGridBox = props => {
17
+ const theme = useTheme();
18
+ const breakpoint = useBreakpoints(theme);
19
+ const {
20
+ element,
21
+ attributes,
22
+ children,
23
+ customProps
24
+ } = props;
25
+ const editor = useSlateStatic();
26
+ const path = ReactEditor.findPath(editor, element);
27
+ const {
28
+ readOnly
29
+ } = customProps;
30
+ const {
31
+ updated_at,
32
+ zIndex,
33
+ sectionBgColor,
34
+ sectionBackgroundImage,
35
+ sectionBorderRadius
36
+ } = element;
37
+ // get values based on breakpoint size
38
+ const {
39
+ gridArea,
40
+ width,
41
+ height,
42
+ left,
43
+ top,
44
+ marginTop
45
+ } = breakpointValues(element.type, breakpoint, element);
46
+ const {
47
+ setSelectedElement
48
+ } = useEditorContext();
49
+ const arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
50
+ const onChangeSettings = () => {};
51
+ const onChange = data => {
52
+ let updateData = {
53
+ ...data
54
+ };
55
+ delete updateData.children;
56
+ updateData = formatBreakpointValues(element.type, breakpoint, updateData);
57
+ Transforms.setNodes(editor, {
58
+ ...updateData
59
+ }, {
60
+ at: path
61
+ });
62
+ };
63
+ const handleDragEvent = (type, data, cb) => {
64
+ const toPosition = {
65
+ left: left + data.lastX,
66
+ top: top + data.lastY
67
+ };
68
+ const {
69
+ node,
70
+ ...rest
71
+ } = data;
72
+ switch (type) {
73
+ case "stop":
74
+ const updated_data = onDropItem({
75
+ editor,
76
+ fromPosition: {
77
+ left,
78
+ top
79
+ },
80
+ toPosition,
81
+ path,
82
+ ref: node,
83
+ breakpoint,
84
+ ...rest
85
+ }, ".freegrid-container");
86
+ if (cb) {
87
+ cb(updated_data);
88
+ }
89
+ break;
90
+ default:
91
+ }
92
+ };
93
+ const handleResizeEvent = (type, data, cb) => {
94
+ switch (type) {
95
+ case "stop":
96
+ return;
97
+ default:
98
+ }
99
+ };
100
+ const onDelete = () => {
101
+ try {
102
+ Transforms.removeNodes(editor, {
103
+ at: path
104
+ });
105
+ } catch (err) {
106
+ console.log(err);
107
+ }
108
+ };
109
+ const handleContextMenuClick = d => {
110
+ switch (d?.name) {
111
+ case "bringForward":
112
+ bringItemToFB(editor, {
113
+ path,
114
+ moveFront: true
115
+ });
116
+ Transforms.setNodes(editor, {
117
+ zIndex: Math.min(arrangeIndex + 1, editor.children.length)
118
+ }, {
119
+ at: path
120
+ });
121
+ break;
122
+ case "bringBackward":
123
+ bringItemToFB(editor, {
124
+ path,
125
+ moveFront: false
126
+ });
127
+ break;
128
+ case "cut":
129
+ window.copiedNode = JSON.stringify(Node.get(editor, path));
130
+ onDelete();
131
+ focusOnNewItem(editor, Path.parent(path), {
132
+ setSelectedElement
133
+ });
134
+ break;
135
+ case "copy":
136
+ window.copiedNode = JSON.stringify(Node.get(editor, path));
137
+ break;
138
+ case "delete":
139
+ onDelete();
140
+ setSelectedElement({});
141
+ break;
142
+ default:
143
+ return;
144
+ }
145
+ };
146
+ const repeatTimes = Math.floor(height / ROW_HEIGHT);
147
+ return /*#__PURE__*/_jsx(RnD, {
148
+ id: `freegrid_box_item_${path.join("|")}_${updated_at}_${breakpoint}`,
149
+ className: `freegrid-item path-${path.length} breakpoint-${breakpoint}`,
150
+ editor: editor,
151
+ path: path,
152
+ actions: itemOptions?.box,
153
+ settingsProps: {
154
+ settings: "freegridBoxItem",
155
+ onChange: onChangeSettings,
156
+ customProps
157
+ },
158
+ style: {
159
+ "--left": `${left || 0}px`,
160
+ "--marginTop": `${marginTop || 0}px`,
161
+ "--gridArea": `${gridArea}`,
162
+ "--width": `${width}px`,
163
+ "--height": `${height}px`,
164
+ "--zIndex": 100 + arrangeIndex
165
+ },
166
+ defaultStyle: {
167
+ height: `${height}px`,
168
+ width: `${width}px`
169
+ },
170
+ gridArea: gridArea,
171
+ onChange: onChange,
172
+ delta: {
173
+ width,
174
+ height
175
+ },
176
+ handleDragEvent: handleDragEvent,
177
+ handleResizeEvent: handleResizeEvent,
178
+ readOnly: readOnly,
179
+ childType: "box",
180
+ handleContextMenuClick: handleContextMenuClick,
181
+ itemData: {
182
+ left: left || 0
183
+ },
184
+ type: "parent-container",
185
+ children: /*#__PURE__*/_jsx(Box, {
186
+ component: "div",
187
+ ...attributes,
188
+ className: "fgi_type_box freegrid-container-parent",
189
+ "data-path": path.join("|"),
190
+ style: {
191
+ "--height": `${height}px`,
192
+ "--cols": `100%`,
193
+ "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
194
+ },
195
+ sx: {
196
+ borderRadius: {
197
+ ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
198
+ },
199
+ background: sectionBgColor,
200
+ backgroundImage: `url(${sectionBackgroundImage})`
201
+ },
202
+ children: children
203
+ })
204
+ });
205
+ };
206
+ export default FreeGridBox;
@@ -0,0 +1,23 @@
1
+ import React from "react";
2
+ import ToolbarIcon from "../../common/ToolbarIcon";
3
+ import Icon from "../../common/Icon";
4
+ import { insertFreeGrid } from "../../utils/freegrid";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const FreeGridButton = props => {
7
+ const {
8
+ editor,
9
+ icoBtnType
10
+ } = props;
11
+ const onButtonClick = () => {
12
+ insertFreeGrid(editor);
13
+ };
14
+ return /*#__PURE__*/_jsx(ToolbarIcon, {
15
+ title: "Free Grid",
16
+ onClick: onButtonClick,
17
+ icon: /*#__PURE__*/_jsx(Icon, {
18
+ icon: "freegrid"
19
+ }),
20
+ icoBtnType: icoBtnType
21
+ });
22
+ };
23
+ export default FreeGridButton;