@flozy/editor 4.0.2 → 4.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (177) hide show
  1. package/dist/Editor/ChatEditor.js +14 -9
  2. package/dist/Editor/CommonEditor.js +185 -170
  3. package/dist/Editor/DialogWrapper.js +4 -3
  4. package/dist/Editor/Editor.css +5 -19
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +52 -41
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +39 -26
  8. package/dist/Editor/Elements/Button/EditorButton.js +33 -38
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +0 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -59
  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/Form.js +43 -27
  18. package/dist/Editor/Elements/Form/FormField.js +21 -10
  19. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  20. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  21. package/dist/Editor/Elements/Form/Workflow/index.js +5 -2
  22. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +437 -0
  23. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +206 -0
  24. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  25. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +236 -0
  26. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +44 -0
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  29. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +19 -0
  30. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  31. package/dist/Editor/Elements/FreeGrid/styles.js +214 -0
  32. package/dist/Editor/Elements/Grid/Grid.js +11 -9
  33. package/dist/Editor/Elements/Grid/GridItem.js +31 -23
  34. package/dist/Editor/Elements/Link/Link.js +1 -6
  35. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  36. package/dist/Editor/Elements/Link/LinkPopup.js +15 -18
  37. package/dist/Editor/Elements/NewLine/NewLineButton.js +0 -1
  38. package/dist/Editor/Elements/Signature/SignaturePopup.js +1 -1
  39. package/dist/Editor/Elements/SimpleText/index.js +18 -16
  40. package/dist/Editor/Elements/SimpleText/style.js +43 -0
  41. package/dist/Editor/ErrorBoundary.js +30 -0
  42. package/dist/Editor/MiniEditor.js +1 -3
  43. package/dist/Editor/Styles/EditorStyles.js +28 -0
  44. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  45. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  46. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  48. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -3
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  52. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +14 -26
  53. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +2 -68
  54. package/dist/Editor/Toolbar/PopupTool/index.js +8 -0
  55. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  56. package/dist/Editor/Toolbar/toolbarGroups.js +16 -48
  57. package/dist/Editor/common/ColorPickerButton.js +9 -25
  58. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  59. package/dist/Editor/common/EditorCmds.js +0 -3
  60. package/dist/Editor/common/Icon.js +16 -34
  61. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  62. package/dist/Editor/common/LinkSettings/index.js +1 -2
  63. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  64. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  65. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +142 -0
  66. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  67. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  68. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  69. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  70. package/dist/Editor/common/RnD/DragOver/index.js +55 -0
  71. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  72. package/dist/Editor/common/RnD/ElementOptions/Actions.js +102 -0
  73. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  74. package/dist/Editor/common/RnD/ElementOptions/index.js +95 -0
  75. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  76. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  77. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +36 -0
  78. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +60 -0
  79. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +9 -0
  80. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +47 -0
  81. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +47 -0
  82. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +47 -0
  83. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +48 -0
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +47 -0
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +47 -0
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +17 -0
  88. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  89. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +18 -0
  90. package/dist/Editor/common/RnD/ElementSettings/styles.js +94 -0
  91. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  92. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  93. package/dist/Editor/common/RnD/GuideLines/styles.js +62 -0
  94. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  95. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  96. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  97. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  98. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  99. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  100. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  101. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  102. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  103. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +20 -0
  104. package/dist/Editor/common/RnD/TransformHandles/index.js +67 -0
  105. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  106. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  107. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  108. package/dist/Editor/common/RnD/Utils/gridDropItem.js +181 -0
  109. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  110. package/dist/Editor/common/RnD/VirtualElement/index.js +77 -0
  111. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  112. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  113. package/dist/Editor/common/RnD/index.js +567 -0
  114. package/dist/Editor/common/RnD/styles.js +4 -0
  115. package/dist/Editor/common/Section/index.js +21 -12
  116. package/dist/Editor/common/Section/styles.js +7 -4
  117. package/dist/Editor/common/Shorthands/elements.js +12 -54
  118. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  119. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +36 -44
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +23 -33
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +18 -5
  126. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  127. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  128. package/dist/Editor/common/StyleBuilder/index.js +5 -3
  129. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  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 +48 -186
  135. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  136. package/dist/Editor/hooks/useMouseMove.js +37 -12
  137. package/dist/Editor/hooks/withCommon.js +2 -1
  138. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  139. package/dist/Editor/plugins/withEmbeds.js +1 -1
  140. package/dist/Editor/plugins/withHTML.js +1 -1
  141. package/dist/Editor/plugins/withTable.js +1 -1
  142. package/dist/Editor/theme/ThemeList.js +173 -50
  143. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +197 -0
  144. package/dist/Editor/utils/SlateUtilityFunctions.js +60 -164
  145. package/dist/Editor/utils/button.js +17 -1
  146. package/dist/Editor/utils/events.js +5 -0
  147. package/dist/Editor/utils/font.js +37 -40
  148. package/dist/Editor/utils/form.js +7 -2
  149. package/dist/Editor/utils/formfield.js +1 -1
  150. package/dist/Editor/utils/freegrid.js +91 -0
  151. package/dist/Editor/utils/helper.js +44 -30
  152. package/dist/Editor/utils/insertAppHeader.js +47 -40
  153. package/package.json +5 -2
  154. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  155. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  156. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  157. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  158. package/dist/Editor/common/CustomDialog/index.js +0 -94
  159. package/dist/Editor/common/CustomDialog/style.js +0 -67
  160. package/dist/Editor/common/CustomSelect.js +0 -33
  161. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  162. package/dist/Editor/theme/index.js +0 -144
  163. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  164. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  165. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  166. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  167. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  168. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  169. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  170. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  171. package/dist/Editor/themeSettings/icons.js +0 -60
  172. package/dist/Editor/themeSettings/index.js +0 -320
  173. package/dist/Editor/themeSettings/style.js +0 -152
  174. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  175. package/dist/Editor/themeSettingsAI/index.js +0 -356
  176. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  177. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -0,0 +1,63 @@
1
+ import React from "react";
2
+ import { useTheme, ThemeProvider, createTheme } from "@mui/material";
3
+ import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
4
+
5
+ // Custom breakpoints functions
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const customUp = (key, breakpoints) => {
8
+ const MOCK_BREAKPOINT = isStimulator();
9
+ if (key === "xs") {
10
+ // Simulate xs 'up' as being up from 0px (xs)
11
+ return "@media (min-width: 0px)";
12
+ }
13
+ if (MOCK_BREAKPOINT && key === "lg") {
14
+ return `@media (min-width: 10000px)`;
15
+ }
16
+ return `@media (min-width: ${breakpoints[key]}px)`;
17
+ };
18
+ const customDown = (key, breakpoints) => {
19
+ if (key === "md") {
20
+ // Simulate 'down' from md
21
+ return "@media (max-width: 960px)";
22
+ }
23
+ return `@media (max-width: ${breakpoints[key]}px)`;
24
+ };
25
+ const customBetween = (start, end, breakpoints) => {
26
+ // Custom logic for between, simulating xs for demonstration
27
+ const MOCK_BREAKPOINT = isStimulator();
28
+ if (MOCK_BREAKPOINT && start === "xs" && end === "md") {
29
+ return STIMULATOR_MOCK[MOCK_BREAKPOINT];
30
+ }
31
+ return `@media (min-width: ${breakpoints[start]}px) and (max-width: ${breakpoints[end]}px)`;
32
+ };
33
+ const customOnly = (key, breakpoints) => {
34
+ // Custom logic for between, simulating xs for demonstration
35
+ const MOCK_BREAKPOINT = isStimulator();
36
+ if (MOCK_BREAKPOINT && key === "xs") {
37
+ return STIMULATOR_MOCK[MOCK_BREAKPOINT];
38
+ }
39
+ return `@media (min-width: ${breakpoints[key]}px) and (max-width: ${breakpoints[key + 1]}px)`;
40
+ };
41
+
42
+ // Extend the existing theme with custom breakpoint functions
43
+ const extendedTheme = prevTheme => createTheme({
44
+ ...prevTheme,
45
+ breakpoints: {
46
+ ...prevTheme.breakpoints,
47
+ up: key => customUp(key, prevTheme.breakpoints.values),
48
+ down: key => customDown(key, prevTheme.breakpoints.values),
49
+ between: (start, end) => customBetween(start, end, prevTheme.breakpoints.values),
50
+ only: key => customOnly(key, prevTheme.breakpoints.values)
51
+ }
52
+ });
53
+ const ViewportStimulator = ({
54
+ children
55
+ }) => {
56
+ const theme = useTheme();
57
+ const viewportTheme = extendedTheme(theme);
58
+ return /*#__PURE__*/_jsx(ThemeProvider, {
59
+ theme: viewportTheme,
60
+ children: children
61
+ });
62
+ };
63
+ export default ViewportStimulator;
@@ -0,0 +1,19 @@
1
+ import React from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const CornerHandle = ({
4
+ style
5
+ }) => {
6
+ return /*#__PURE__*/_jsx("div", {
7
+ style: {
8
+ width: "8px",
9
+ height: "8px",
10
+ background: "#FFF",
11
+ border: "1px solid #2563EB",
12
+ position: "absolute",
13
+ left: "6px",
14
+ top: "6px",
15
+ ...style
16
+ }
17
+ });
18
+ };
19
+ export default CornerHandle;
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const BottomRightIcon = () => /*#__PURE__*/_jsx("svg", {
4
+ width: "20px",
5
+ height: "20px",
6
+ version: "1.1",
7
+ viewBox: "0 0 100 100",
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ children: /*#__PURE__*/_jsx("path", {
10
+ d: "m70.129 67.086l1.75-36.367c-0.035156-2.6523-2.9414-3.6523-4.8164-1.7773l-8.4531 8.4531-17.578-17.574c-2.3438-2.3438-5.7188-1.5625-8.0586 0.78125l-13.078 13.078c-2.3438 2.3438-2.4141 5.0117-0.074219 7.3516l17.574 17.574-8.4531 8.4531c-1.875 1.875-0.83594 4.8203 1.8164 4.8555l36.258-1.8594c1.6836 0.019531 3.1328-1.2812 3.1133-2.9688z"
11
+ })
12
+ });
13
+ export default BottomRightIcon;
@@ -0,0 +1,20 @@
1
+ import React from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const SizeHandle = ({
4
+ style,
5
+ className
6
+ }) => {
7
+ return /*#__PURE__*/_jsx("div", {
8
+ className: className,
9
+ style: {
10
+ width: "8px",
11
+ height: "8px",
12
+ background: "#FFF",
13
+ border: "1px solid #2563EB",
14
+ position: "absolute",
15
+ margin: "auto",
16
+ ...style
17
+ }
18
+ });
19
+ };
20
+ export default SizeHandle;
@@ -0,0 +1,67 @@
1
+ import CornerHandle from "./CornerHandle";
2
+ import SizeHandle from "./SizeHandle";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ const Handles = ({
5
+ type
6
+ }) => {
7
+ return {
8
+ top: /*#__PURE__*/_jsx(SizeHandle, {
9
+ style: {
10
+ left: 0,
11
+ right: 0
12
+ }
13
+ }),
14
+ bottom: /*#__PURE__*/_jsx(SizeHandle, {
15
+ className: `bottom-handle ${type}`,
16
+ style: {
17
+ left: 0,
18
+ right: 0,
19
+ bottom: 0
20
+ }
21
+ }),
22
+ right: /*#__PURE__*/_jsx(SizeHandle, {
23
+ style: {
24
+ top: 0,
25
+ right: "0px",
26
+ bottom: 0,
27
+ width: "8px",
28
+ height: "8px"
29
+ }
30
+ }),
31
+ left: /*#__PURE__*/_jsx(SizeHandle, {
32
+ style: {
33
+ top: 0,
34
+ left: "0px",
35
+ bottom: 0,
36
+ width: "8px",
37
+ height: "8px"
38
+ }
39
+ }),
40
+ topLeft: /*#__PURE__*/_jsx(CornerHandle, {
41
+ style: {
42
+ left: "6px",
43
+ top: "6px",
44
+ display: "none"
45
+ }
46
+ }),
47
+ topRight: /*#__PURE__*/_jsx(CornerHandle, {
48
+ style: {
49
+ right: "6px",
50
+ top: "6px"
51
+ }
52
+ }),
53
+ bottomLeft: /*#__PURE__*/_jsx(CornerHandle, {
54
+ style: {
55
+ left: "6px",
56
+ top: "6px"
57
+ }
58
+ }),
59
+ bottomRight: /*#__PURE__*/_jsx(CornerHandle, {
60
+ style: {
61
+ left: "6px",
62
+ top: "6px"
63
+ }
64
+ })
65
+ };
66
+ };
67
+ export default Handles;
@@ -0,0 +1,26 @@
1
+ function horizantalAlignment(rect1, rect2) {
2
+ const diff = Math.abs(rect2.top - rect1.bottom);
3
+ return {
4
+ horizantal: rect2.top < rect1.bottom,
5
+ hdiff: diff,
6
+ hpercent: diff / rect2.height * 100
7
+ };
8
+ }
9
+ function verticalAlignment(rect1, rect2) {
10
+ const diff = Math.abs(rect1.right - rect2.left);
11
+ return {
12
+ vertical: rect2.left > rect1.left && rect2.left < rect1.right,
13
+ vdiff: diff,
14
+ vpercent: diff / rect2.width * 100
15
+ };
16
+ }
17
+ export function alignmentDetection(rect1, rect2) {
18
+ try {
19
+ return {
20
+ ...horizantalAlignment(rect1, rect2),
21
+ ...verticalAlignment(rect1, rect2)
22
+ };
23
+ } catch (err) {
24
+ console.log(err);
25
+ }
26
+ }
@@ -0,0 +1,98 @@
1
+ import { Transforms, Node } from "slate";
2
+ import { ReactEditor } from "slate-react";
3
+ import { alignmentDetection } from "./alignmentDetection";
4
+
5
+ /**
6
+ * This method will return the list of items inside the give section
7
+ * @param {*} sectionPath - paresent section path to get items
8
+ */
9
+ export function getItems(editor, sectionPath = []) {
10
+ try {
11
+ const parentNode = Node.get(editor, sectionPath);
12
+ let doms = parentNode?.children?.map((item, itemIndex) => {
13
+ const itemDom = ReactEditor.toDOMNode(editor, item)?.closest(".freegrid-item");
14
+ const {
15
+ left,
16
+ top,
17
+ width,
18
+ height,
19
+ right,
20
+ bottom
21
+ } = itemDom?.getBoundingClientRect();
22
+ return {
23
+ node: itemDom,
24
+ rect: {
25
+ left,
26
+ top,
27
+ width,
28
+ height,
29
+ right,
30
+ bottom
31
+ },
32
+ path: [...sectionPath, itemIndex],
33
+ item
34
+ };
35
+ });
36
+ // sort by top position
37
+ doms = doms.sort((a, b) => a.rect.top - b.rect.top);
38
+ return {
39
+ items: parentNode?.children,
40
+ doms
41
+ };
42
+ } catch (err) {
43
+ console.log(err);
44
+ }
45
+ }
46
+
47
+ /**
48
+ * This method will get the nearest top element
49
+ * @param {*} editor
50
+ * @param {*} sectionPath
51
+ * @param {*} props
52
+ */
53
+ export function getNearestItem(editor, sectionPath = [], props) {
54
+ try {
55
+ const {
56
+ items,
57
+ doms
58
+ } = getItems(editor, sectionPath);
59
+ console.log(items, doms);
60
+ for (let i = 0; i < doms.length; i++) {
61
+ const prev = doms[i - 1];
62
+ const current = doms[i];
63
+ if (i > 0) {
64
+ const res = alignmentDetection(prev.rect, current.rect);
65
+ console.log(res, current?.path);
66
+ const {
67
+ vertical,
68
+ horizantal,
69
+ hpercent
70
+ } = res;
71
+ if (!vertical && !horizantal) {
72
+ const row = i + 1;
73
+ Transforms.setNodes(editor, {
74
+ gridArea: `${i + 1} / 1 / ${row + 1} / 2`,
75
+ top: 0,
76
+ marginTop: 0
77
+ }, {
78
+ at: current?.path
79
+ });
80
+ } else if (horizantal && hpercent > 5) {
81
+ Transforms.setNodes(editor, {
82
+ gridArea: `${i - 1 || 1} / 1 / ${(i - 1 || 1) + 1} / 2`
83
+ }, {
84
+ at: current?.path
85
+ });
86
+ }
87
+ } else {
88
+ Transforms.setNodes(editor, {
89
+ gridArea: `1 / 1 / 2 / 2`
90
+ }, {
91
+ at: current?.path
92
+ });
93
+ }
94
+ }
95
+ } catch (err) {
96
+ console.log(err);
97
+ }
98
+ }
@@ -0,0 +1,52 @@
1
+ function isColliding(rect1, rect2) {
2
+ return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
3
+ }
4
+ function getCollisionSides(rect1, rect2) {
5
+ const collisionSides = {
6
+ top: rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.left < rect2.right && rect1.right > rect2.left && rect1.top <= rect2.top,
7
+ bottom: rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.left < rect2.right && rect1.right > rect2.left && rect1.bottom >= rect2.bottom,
8
+ left: rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.left <= rect2.left && rect1.right > rect2.left,
9
+ right: rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.right >= rect2.right && rect1.left < rect2.right
10
+ };
11
+ return collisionSides;
12
+ }
13
+ function getCollisionDetails(rect1, rect2) {
14
+ if (!isColliding(rect1, rect2)) {
15
+ return null;
16
+ }
17
+ const overlapX = Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left);
18
+ const overlapY = Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top);
19
+ let collisionSide = "";
20
+ let penetrationDepth = Math.min(overlapX, overlapY); // Basic depth calculation
21
+
22
+ if (overlapX < overlapY) {
23
+ collisionSide = rect1.left < rect2.left ? "right" : "left";
24
+ penetrationDepth = overlapX;
25
+ } else {
26
+ collisionSide = rect1.top < rect2.top ? "bottom" : "top";
27
+ penetrationDepth = overlapY;
28
+ }
29
+ return {
30
+ collision: true,
31
+ side: collisionSide,
32
+ depth: penetrationDepth
33
+ };
34
+ }
35
+ export function detectCollisionAndSides(rect1, rect2) {
36
+ const isColliding = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
37
+ if (isColliding) {
38
+ const sides = getCollisionSides(rect1, rect2);
39
+ const collisionDetails = getCollisionDetails(rect1, rect2);
40
+ return {
41
+ isColliding,
42
+ sides,
43
+ collisionDetails
44
+ };
45
+ } else {
46
+ return {
47
+ isColliding,
48
+ sides: {},
49
+ collisionDetails: null
50
+ };
51
+ }
52
+ }
@@ -0,0 +1,181 @@
1
+ import { Transforms, Node, Path } from "slate";
2
+ import { ReactEditor } from "slate-react";
3
+ export const ROW_HEIGHT = 50;
4
+ const MARGIN_OF = {
5
+ xs: 160,
6
+ lg: 490
7
+ };
8
+
9
+ /**
10
+ * This method will update the grid template rows of parent section based on height
11
+ * @param {*} path
12
+ */
13
+ export function updateRows() {}
14
+
15
+ /**
16
+ * This method will update the grid template columns of parent section based on height
17
+ * @param {*} path
18
+ */
19
+ export function updateCols() {}
20
+ const handleMoveNode = (editor, path, newPath, {
21
+ isEmpty
22
+ }) => {
23
+ try {
24
+ const replaceNode = Node.get(editor, path);
25
+ if (isEmpty) {
26
+ const toPath = [...newPath, 0];
27
+ Transforms.insertNodes(editor, [{
28
+ ...replaceNode
29
+ }], {
30
+ at: toPath
31
+ });
32
+ Transforms.removeNodes(editor, {
33
+ at: path
34
+ });
35
+ return toPath;
36
+ } else {
37
+ Transforms.insertNodes(editor, [{
38
+ ...replaceNode
39
+ }], {
40
+ at: newPath
41
+ });
42
+ Transforms.removeNodes(editor, {
43
+ at: path
44
+ });
45
+ return newPath;
46
+ }
47
+ } catch (err) {
48
+ console.log(err);
49
+ console.log("Drop Node error");
50
+ return null;
51
+ }
52
+ };
53
+
54
+ /**
55
+ * This method will update prop in child node so it will re-render and update the path
56
+ * @param {*} path - contains the parent section path
57
+ */
58
+ const reRenderChildNodes = (editor, path) => {
59
+ try {
60
+ const sectionNode = Node.get(editor, path);
61
+ // parent node
62
+ Transforms.setNodes(editor, {
63
+ updated_at: new Date().getTime()
64
+ }, {
65
+ at: path
66
+ });
67
+ sectionNode?.children?.forEach((item, itemIndex) => {
68
+ Transforms.setNodes(editor, {
69
+ updated_at: new Date().getTime()
70
+ }, {
71
+ at: [...path, itemIndex]
72
+ });
73
+ });
74
+ } catch (err) {
75
+ console.log(err);
76
+ }
77
+ };
78
+ function isContainerElement(editor, moveTopath, props) {
79
+ try {
80
+ const dragItemPath = props.path;
81
+ const dragItem = Node.get(editor, dragItemPath);
82
+ let parentNode = null;
83
+ // if freegrid item
84
+ if (dragItem?.type === "freegridItem" || dragItem?.type === "freegridBox") {
85
+ // get parent node
86
+ parentNode = Node.get(editor, Path.parent(dragItemPath));
87
+ }
88
+ const moveToNode = Node.get(editor, moveTopath);
89
+ console.log(parentNode, moveToNode);
90
+ if (moveToNode.type === "freegridBox") {
91
+ if (parentNode.type === "freegridBox") {
92
+ return props.calX;
93
+ } else {
94
+ return props.calX - moveToNode?.left;
95
+ }
96
+ } else if (moveToNode.type === "freegrid") {
97
+ if (parentNode.type === "freegridBox") {
98
+ console.log(props.x);
99
+ return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX);
100
+ } else {
101
+ return props.calX;
102
+ }
103
+ }
104
+ } catch (err) {
105
+ console.log(err);
106
+ }
107
+ }
108
+ export function onDropItem(props, parentClass) {
109
+ try {
110
+ const {
111
+ editor,
112
+ startPosition,
113
+ endPosition,
114
+ dragOver,
115
+ parentPath,
116
+ path,
117
+ diffX,
118
+ x: cx,
119
+ breakpoint
120
+ // calX,
121
+ } = props;
122
+ const needMove = dragOver !== parentPath;
123
+ const moveTo = dragOver.split("|").map(m => parseInt(m));
124
+ const from = parentPath.split("|").map(m => parseInt(m));
125
+ let newPath = [];
126
+ newPath = moveTo;
127
+ const cCalx = isContainerElement(editor, moveTo, props);
128
+ const posX = parseInt(cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX);
129
+ const toSectionNode = Node.get(editor, newPath);
130
+ const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
131
+ const rect = addToSectionDOM.getBoundingClientRect();
132
+ const y = endPosition.y - startPosition.diffY - rect.top;
133
+
134
+ // Calculate grid position
135
+ const row = Math.floor(y / ROW_HEIGHT) + 1;
136
+
137
+ // to calculate difference inside the grid
138
+ const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
139
+
140
+ // Update grid area
141
+ const gridArea = `${row} / 1 / ${row + 1} / 2`;
142
+ const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
143
+ console.log(breakpoint, path);
144
+ Transforms.setNodes(editor, {
145
+ [`gridArea${appenBp}`]: gridArea,
146
+ [`left${appenBp}`]: cCalx,
147
+ [`marginTop${appenBp}`]: marginTop,
148
+ // to avoid auto position / resize of the element
149
+ [`${breakpoint}_updatedOn`]: new Date().getTime()
150
+ }, {
151
+ at: path
152
+ });
153
+ reRenderChildNodes(editor, from);
154
+
155
+ // move the node if section parent changed
156
+ if (needMove) {
157
+ // move the node
158
+ const isEmpty = toSectionNode?.children[0]?.type === undefined;
159
+ if (!isEmpty) {
160
+ newPath = [...newPath, toSectionNode?.children?.length];
161
+ }
162
+ const rPath = handleMoveNode(editor, path, newPath, {
163
+ isEmpty
164
+ });
165
+ reRenderChildNodes(editor, moveTo);
166
+ return {
167
+ updated_at: rPath
168
+ };
169
+ } else {
170
+ return {
171
+ updated_at: path
172
+ };
173
+ }
174
+ } catch (err) {
175
+ console.log(err);
176
+ }
177
+ }
178
+ export function calculateGridArea(y) {
179
+ const row = Math.floor(y / ROW_HEIGHT) + 1;
180
+ return `${row} / 1 / ${row + 1} / 2`;
181
+ }