@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
@@ -0,0 +1,60 @@
1
+ const useGuideLineStyle = ({
2
+ theme
3
+ }) => ({
4
+ root: {
5
+ position: "fixed",
6
+ top: "0",
7
+ left: "0",
8
+ width: "2px",
9
+ height: "1px",
10
+ backgroundColor: "#FF70B4",
11
+ opacity: 1,
12
+ pointerEvents: "none",
13
+ zIndex: 1200
14
+ },
15
+ boundaryLine: {
16
+ "& .rnd-guideline-lv": {
17
+ position: "absolute",
18
+ left: "calc(50% - 490px)",
19
+ top: "0",
20
+ height: "100%",
21
+ width: "1px",
22
+ backgroundColor: "#FFF",
23
+ pointerEvents: "none",
24
+ [theme.breakpoints.between("xs", "md")]: {
25
+ left: "calc(50% - 160px)"
26
+ }
27
+ },
28
+ "& .rnd-guideline-rv": {
29
+ position: "absolute",
30
+ left: "calc(50% + 490px)",
31
+ top: "0",
32
+ height: "100%",
33
+ width: "1px",
34
+ backgroundColor: "#FFF",
35
+ pointerEvents: "none",
36
+ [theme.breakpoints.between("xs", "md")]: {
37
+ left: "calc(50% + 160px)"
38
+ }
39
+ },
40
+ "& .white-wrapper": {
41
+ overflowX: "hidden",
42
+ [theme.breakpoints.between("xs", "md")]: {
43
+ position: "absolute",
44
+ width: "calc(50% - 162px)",
45
+ height: "calc(100% - 2px)",
46
+ backgroundColor: "rgba(255,255,255,1)",
47
+ pointerEvents: "none",
48
+ top: 2,
49
+ "&.w_left": {
50
+ left: 2
51
+ },
52
+ "&.w_right": {
53
+ right: 2,
54
+ width: "calc(50% - 163px)"
55
+ }
56
+ }
57
+ }
58
+ }
59
+ });
60
+ export default useGuideLineStyle;
@@ -0,0 +1,50 @@
1
+ import React from "react";
2
+ import { Box, Paper, Popper, Typography, Tooltip, IconButton } from "@mui/material";
3
+ import CloseIcon from "@mui/icons-material/Close";
4
+ import HelpIcon from "@mui/icons-material/Help";
5
+ import useOptionsPopupStyle from "./style";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ const OptionsPopup = props => {
9
+ const classes = useOptionsPopupStyle();
10
+ const {
11
+ title,
12
+ children,
13
+ open,
14
+ anchorEl,
15
+ placement,
16
+ handleClose
17
+ } = props;
18
+ return anchorEl ? /*#__PURE__*/_jsx(Popper, {
19
+ sx: classes.root,
20
+ open: open,
21
+ anchorEl: anchorEl,
22
+ placement: placement,
23
+ onClose: handleClose,
24
+ children: /*#__PURE__*/_jsxs(Paper, {
25
+ className: "papper-root",
26
+ children: [/*#__PURE__*/_jsxs(Typography, {
27
+ variant: "div",
28
+ className: "item-wrapper title",
29
+ children: [title, /*#__PURE__*/_jsxs(Box, {
30
+ component: "div",
31
+ children: [/*#__PURE__*/_jsx(Tooltip, {
32
+ title: "Help",
33
+ arrow: true,
34
+ children: /*#__PURE__*/_jsx(IconButton, {
35
+ children: /*#__PURE__*/_jsx(HelpIcon, {})
36
+ })
37
+ }), /*#__PURE__*/_jsx(Tooltip, {
38
+ title: "Close",
39
+ arrow: true,
40
+ children: /*#__PURE__*/_jsx(IconButton, {
41
+ onClick: handleClose,
42
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
43
+ })
44
+ })]
45
+ })]
46
+ }), children]
47
+ })
48
+ }) : null;
49
+ };
50
+ export default OptionsPopup;
@@ -0,0 +1,36 @@
1
+ const useOptionsPopupStyle = () => ({
2
+ root: {
3
+ zIndex: 1200,
4
+ background: "#FFF",
5
+ borderRadius: "5px",
6
+ overflow: "hidden",
7
+ boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
8
+ "& .papper-root": {
9
+ borderTop: "8px solid #1976d2",
10
+ width: "270px",
11
+ boxShadow: "none"
12
+ },
13
+ "& .item-list-wrpr": {
14
+ paddingTop: "0px",
15
+ paddingBottom: "0px"
16
+ },
17
+ "& .item-wrapper": {
18
+ padding: "12px",
19
+ fontFamily: "sans-serif",
20
+ "&.title": {
21
+ display: "flex",
22
+ fontWeight: "bold",
23
+ justifyContent: "space-between",
24
+ alignItems: "center",
25
+ "& .MuiIconButton-root": {
26
+ padding: "4px",
27
+ "& svg": {
28
+ width: "16px",
29
+ height: "16px"
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ });
36
+ export default useOptionsPopupStyle;
@@ -0,0 +1,23 @@
1
+ import Box from "@mui/material/Box";
2
+ import { useEditorContext } from "../../hooks/useMouseMove";
3
+ import { useEffect } from "react";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const RnDCopy = props => {
6
+ const {
7
+ readOnly
8
+ } = props;
9
+ const {
10
+ selectedElement
11
+ } = useEditorContext();
12
+ useEffect(() => {
13
+ if (selectedElement?.path) {
14
+ window.selectedRnDElement = selectedElement;
15
+ }
16
+ }, [selectedElement?.path, selectedElement?.enable]);
17
+ return !readOnly ? /*#__PURE__*/_jsx(Box, {
18
+ sx: {
19
+ display: "none"
20
+ }
21
+ }) : null;
22
+ };
23
+ export default RnDCopy;
@@ -0,0 +1,34 @@
1
+ import React from "react";
2
+ import { Box, useTheme } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ const useShadowElementStyles = ({
5
+ theme,
6
+ style
7
+ }) => ({
8
+ root: {
9
+ ...style,
10
+ position: "relative",
11
+ backgroundColor: "rgba(0,0,0,0)",
12
+ marginLeft: `calc((100% - 980px) * 0.5)`,
13
+ [theme.breakpoints.between("xs", "md")]: {
14
+ marginLeft: `calc((100% - 320px) * 0.5)`
15
+ }
16
+ }
17
+ });
18
+ const ShadowElement = props => {
19
+ const theme = useTheme();
20
+ const {
21
+ type,
22
+ enable,
23
+ style
24
+ } = props;
25
+ const classes = useShadowElementStyles({
26
+ theme,
27
+ style
28
+ });
29
+ return type === "child" && enable === 1 ? /*#__PURE__*/_jsx(Box, {
30
+ component: "div",
31
+ sx: classes.root
32
+ }) : null;
33
+ };
34
+ export default ShadowElement;
@@ -0,0 +1,40 @@
1
+ import { Box, IconButton, Tooltip } from "@mui/material";
2
+ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
3
+ import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
4
+ import useSwitchViewport from "./styles";
5
+ import { useEffect } from "react";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ const SwitchViewport = props => {
9
+ const {
10
+ breakpoint,
11
+ onChange
12
+ } = props;
13
+ const classes = useSwitchViewport();
14
+ useEffect(() => {
15
+ console.log(breakpoint);
16
+ }, [breakpoint]);
17
+ return /*#__PURE__*/_jsxs(Box, {
18
+ sx: classes.root,
19
+ children: [/*#__PURE__*/_jsx(Tooltip, {
20
+ title: "Desktop View",
21
+ children: /*#__PURE__*/_jsx(IconButton, {
22
+ className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
23
+ onClick: () => {
24
+ onChange("");
25
+ },
26
+ children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
27
+ })
28
+ }), /*#__PURE__*/_jsx(Tooltip, {
29
+ title: "Mobile View",
30
+ children: /*#__PURE__*/_jsx(IconButton, {
31
+ className: `${breakpoint === "xs" ? "active" : ""}`,
32
+ onClick: () => {
33
+ onChange("xs");
34
+ },
35
+ children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
36
+ })
37
+ })]
38
+ });
39
+ };
40
+ export default SwitchViewport;
@@ -0,0 +1,24 @@
1
+ const useSwitchViewport = () => ({
2
+ root: {
3
+ position: "absolute",
4
+ right: 4,
5
+ top: 4,
6
+ margin: "auto",
7
+ padding: "4px",
8
+ zIndex: 100,
9
+ backgroundColor: "#FFF",
10
+ borderRadius: "12px",
11
+ display: "flex",
12
+ justifyContent: "center",
13
+ "& .MuiIconButton-root": {
14
+ padding: "4px",
15
+ "&.active": {
16
+ color: "#2563EB"
17
+ },
18
+ "& svg": {
19
+ height: "20px"
20
+ }
21
+ }
22
+ }
23
+ });
24
+ export default useSwitchViewport;
@@ -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,18 @@
1
+ import React from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const SizeHandle = ({
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
+ margin: "auto",
14
+ ...style
15
+ }
16
+ });
17
+ };
18
+ export default SizeHandle;
@@ -0,0 +1,62 @@
1
+ import CornerHandle from "./CornerHandle";
2
+ import SizeHandle from "./SizeHandle";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ const Handles = {
5
+ top: /*#__PURE__*/_jsx(SizeHandle, {
6
+ style: {
7
+ left: 0,
8
+ right: 0
9
+ }
10
+ }),
11
+ bottom: /*#__PURE__*/_jsx(SizeHandle, {
12
+ style: {
13
+ left: 0,
14
+ right: 0,
15
+ bottom: 0
16
+ }
17
+ }),
18
+ right: /*#__PURE__*/_jsx(SizeHandle, {
19
+ style: {
20
+ top: 0,
21
+ right: "0px",
22
+ bottom: 0,
23
+ width: "8px",
24
+ height: "8px"
25
+ }
26
+ }),
27
+ left: /*#__PURE__*/_jsx(SizeHandle, {
28
+ style: {
29
+ top: 0,
30
+ left: "0px",
31
+ bottom: 0,
32
+ width: "8px",
33
+ height: "8px"
34
+ }
35
+ }),
36
+ topLeft: /*#__PURE__*/_jsx(CornerHandle, {
37
+ style: {
38
+ left: "6px",
39
+ top: "6px",
40
+ display: "none"
41
+ }
42
+ }),
43
+ topRight: /*#__PURE__*/_jsx(CornerHandle, {
44
+ style: {
45
+ right: "6px",
46
+ top: "6px"
47
+ }
48
+ }),
49
+ bottomLeft: /*#__PURE__*/_jsx(CornerHandle, {
50
+ style: {
51
+ left: "6px",
52
+ top: "6px"
53
+ }
54
+ }),
55
+ bottomRight: /*#__PURE__*/_jsx(CornerHandle, {
56
+ style: {
57
+ left: "6px",
58
+ top: "6px"
59
+ }
60
+ })
61
+ };
62
+ 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
+ }