@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
@@ -1,35 +1,32 @@
1
- const ButtonNavSettingsStyles = themeType => ({
1
+ const ButtonNavSettingsStyles = () => ({
2
2
  dialogContainer: {
3
- "& .MuiPaper-root": {
4
- background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
5
- },
6
- "& .MuiDialogContent-root": {
3
+ '& .MuiDialogContent-root': {
7
4
  padding: "0px 20px"
8
5
  },
9
- "& .MuiDialogActions-root": {
6
+ '& .MuiDialogActions-root': {
10
7
  padding: "10px"
11
8
  },
12
- "& .MuiTypography-h6": {
9
+ '& .MuiTypography-h6': {
13
10
  fontWeight: 600,
14
11
  fontSize: "16px",
15
12
  paddingRight: "20px"
16
13
  },
17
14
  "& .MuiGrid-container": {
18
- marginTop: "0px"
15
+ marginTop: '0px'
19
16
  },
20
17
  "& .MuiGrid-item": {
21
18
  padding: "14px"
22
19
  }
23
20
  },
24
21
  saveBtn: {
25
- color: "#fff",
22
+ color: '#fff',
26
23
  background: "#2563EB",
27
24
  fontSize: "14px",
28
25
  fontWeight: 500,
29
26
  padding: "4px 24px",
30
27
  textTransform: "none",
31
28
  "&:hover": {
32
- color: "#fff",
29
+ color: '#fff',
33
30
  background: "#2563EB"
34
31
  }
35
32
  },
@@ -46,7 +43,7 @@ const ButtonNavSettingsStyles = themeType => ({
46
43
  }
47
44
  },
48
45
  closeIcon: {
49
- position: "absolute",
46
+ position: 'absolute',
50
47
  right: 8,
51
48
  top: 8,
52
49
  color: theme => theme.palette.grey[500]
@@ -35,14 +35,18 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
35
35
  setOpenAI
36
36
  } = useEditorContext();
37
37
  useEffect(() => {
38
- if (target && chars.length > 0) {
39
- const domRange = ReactEditor.toDOMRange(editor, target);
40
- const rect = domRange.getBoundingClientRect();
41
- setAnchorEl({
42
- clientWidth: rect.width,
43
- clientHeight: rect.height,
44
- getBoundingClientRect: () => rect
45
- });
38
+ try {
39
+ if (target && chars.length > 0) {
40
+ const domRange = ReactEditor.toDOMRange(editor, target);
41
+ const rect = domRange?.getBoundingClientRect();
42
+ setAnchorEl({
43
+ clientWidth: rect.width,
44
+ clientHeight: rect.height,
45
+ getBoundingClientRect: () => rect
46
+ });
47
+ }
48
+ } catch (err) {
49
+ console.log(err);
46
50
  }
47
51
  }, [chars.length, editor, index, target]);
48
52
  useEffect(() => {
@@ -0,0 +1,105 @@
1
+ import CMDIcon from "@mui/icons-material/KeyboardCommandKey";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { jsxs as _jsxs } from "react/jsx-runtime";
4
+ import { Fragment as _Fragment } from "react/jsx-runtime";
5
+ const CMenus = {
6
+ child: [{
7
+ name: "bringForward",
8
+ label: "Move to Front",
9
+ autoClose: false,
10
+ render: () => {
11
+ return /*#__PURE__*/_jsxs(_Fragment, {
12
+ children: ["Move to Front", " ", /*#__PURE__*/_jsxs("span", {
13
+ className: "shortcut-help-info",
14
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " \u2191"]
15
+ })]
16
+ });
17
+ }
18
+ }, {
19
+ name: "bringBackward",
20
+ label: "Move to Back",
21
+ autoClose: false,
22
+ render: () => {
23
+ return /*#__PURE__*/_jsxs(_Fragment, {
24
+ children: ["Move to Back", " ", /*#__PURE__*/_jsxs("span", {
25
+ className: "shortcut-help-info",
26
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " \u2193"]
27
+ })]
28
+ });
29
+ }
30
+ }, {
31
+ name: "cut",
32
+ label: "Cut",
33
+ render: () => {
34
+ return /*#__PURE__*/_jsxs(_Fragment, {
35
+ children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
36
+ className: "shortcut-help-info",
37
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
38
+ })]
39
+ });
40
+ }
41
+ }, {
42
+ name: "copy",
43
+ label: "Copy",
44
+ render: () => {
45
+ return /*#__PURE__*/_jsxs(_Fragment, {
46
+ children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
47
+ className: "shortcut-help-info",
48
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
49
+ })]
50
+ });
51
+ }
52
+ }, {
53
+ name: "paste",
54
+ label: "Paste",
55
+ render: () => {
56
+ return /*#__PURE__*/_jsxs(_Fragment, {
57
+ children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
58
+ className: "shortcut-help-info",
59
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
60
+ })]
61
+ });
62
+ }
63
+ }, {
64
+ name: "delete",
65
+ label: "Delete"
66
+ }],
67
+ parent: [{
68
+ name: "cut",
69
+ label: "Cut",
70
+ render: () => {
71
+ return /*#__PURE__*/_jsxs(_Fragment, {
72
+ children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
73
+ className: "shortcut-help-info",
74
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
75
+ })]
76
+ });
77
+ }
78
+ }, {
79
+ name: "copy",
80
+ label: "Copy",
81
+ render: () => {
82
+ return /*#__PURE__*/_jsxs(_Fragment, {
83
+ children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
84
+ className: "shortcut-help-info",
85
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
86
+ })]
87
+ });
88
+ }
89
+ }, {
90
+ name: "paste",
91
+ label: "Paste",
92
+ render: () => {
93
+ return /*#__PURE__*/_jsxs(_Fragment, {
94
+ children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
95
+ className: "shortcut-help-info",
96
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
97
+ })]
98
+ });
99
+ }
100
+ }, {
101
+ name: "delete",
102
+ label: "Delete"
103
+ }]
104
+ };
105
+ export default CMenus;
@@ -0,0 +1,38 @@
1
+ import React from "react";
2
+ import { Popover, MenuItem } from "@mui/material";
3
+ import CMenus from "./CMenus";
4
+ import useContextMenuStyle from "./styles";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const ContextMenu = props => {
7
+ const classes = useContextMenuStyle();
8
+ const {
9
+ open,
10
+ type,
11
+ contextMenu,
12
+ handleClose
13
+ } = props;
14
+ const {
15
+ path,
16
+ x,
17
+ y
18
+ } = contextMenu;
19
+ const menus = CMenus[type] || [];
20
+ return open && path ? /*#__PURE__*/_jsx(Popover, {
21
+ open: contextMenu !== null,
22
+ sx: classes.root,
23
+ onClose: handleClose(null),
24
+ anchorReference: "anchorPosition",
25
+ anchorPosition: contextMenu !== null ? {
26
+ top: y,
27
+ left: x
28
+ } : undefined,
29
+ children: menus.map((m, i) => {
30
+ return /*#__PURE__*/_jsx(MenuItem, {
31
+ className: "cm-menu-item",
32
+ onClick: handleClose(m),
33
+ children: m?.render ? m.render() : m.label
34
+ }, `cm_${i}`);
35
+ })
36
+ }) : null;
37
+ };
38
+ export default ContextMenu;
@@ -0,0 +1,21 @@
1
+ const useContextMenuStyle = () => ({
2
+ root: {
3
+ zIndex: 1200,
4
+ "& .cm-menu-item": {
5
+ width: "190px",
6
+ justifyContent: "space-between",
7
+ "& .shortcut-help-info": {
8
+ display: "flex",
9
+ justifyContent: "center",
10
+ alignItems: "center",
11
+ fontSize: "12px",
12
+ color: "#bbb",
13
+ "& svg": {
14
+ width: "12px",
15
+ marginRight: "4px"
16
+ }
17
+ }
18
+ }
19
+ }
20
+ });
21
+ export default useContextMenuStyle;
@@ -0,0 +1,31 @@
1
+ import React from "react";
2
+ import { Paper, Popper } from "@mui/material";
3
+ import useDragInfoStyle from "./styles";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const DragInfo = props => {
7
+ const {
8
+ open,
9
+ dragging,
10
+ anchorEl
11
+ } = props;
12
+ const {
13
+ position
14
+ } = dragging;
15
+ const {
16
+ diffX
17
+ } = position || {};
18
+ const classes = useDragInfoStyle();
19
+ const x = parseInt(position?.x - window.innerWidth / 2 + 490 - diffX);
20
+ return open ? /*#__PURE__*/_jsx(Popper, {
21
+ open: open,
22
+ anchorEl: anchorEl,
23
+ placement: "top-start",
24
+ sx: classes.root,
25
+ children: /*#__PURE__*/_jsxs(Paper, {
26
+ className: "papper-root",
27
+ children: ["x: ", x, ", y: ", position?.y]
28
+ })
29
+ }) : null;
30
+ };
31
+ export default DragInfo;
@@ -0,0 +1,15 @@
1
+ const useDragInfoStyle = () => ({
2
+ root: {
3
+ zIndex: 1200,
4
+ "& .papper-root": {
5
+ padding: "4px 6px",
6
+ background: "#2563EB",
7
+ color: "#FFF",
8
+ fontSize: "12px",
9
+ left: "12px",
10
+ marginLeft: "6px",
11
+ borderRadius: "2px"
12
+ }
13
+ }
14
+ });
15
+ export default useDragInfoStyle;
@@ -0,0 +1,46 @@
1
+ import React, { useEffect, useRef, useState } from "react";
2
+ import { Box, Paper, Popover } from "@mui/material";
3
+ import useDragOverStyle from "./styles";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { Fragment as _Fragment } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ const DragOver = props => {
8
+ const ref = useRef();
9
+ const classes = useDragOverStyle();
10
+ const {
11
+ status
12
+ } = props;
13
+ const [anchorEl, setAnchorEl] = useState(null);
14
+ const open = Boolean(anchorEl);
15
+ useEffect(() => {
16
+ if (ref?.current) {
17
+ const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();
18
+ setAnchorEl({
19
+ getBoundingClientRect,
20
+ nodeType: 1
21
+ });
22
+ }
23
+ }, [ref?.current]);
24
+ const handleClose = () => {};
25
+ return status ? /*#__PURE__*/_jsxs(_Fragment, {
26
+ children: [/*#__PURE__*/_jsx(Box, {
27
+ component: "div",
28
+ sx: classes.root,
29
+ ref: ref
30
+ }), /*#__PURE__*/_jsx(Popover, {
31
+ sx: classes.popper,
32
+ open: open,
33
+ anchorEl: anchorEl,
34
+ onClose: handleClose,
35
+ anchorOrigin: {
36
+ vertical: "top",
37
+ horizontal: "center"
38
+ },
39
+ children: /*#__PURE__*/_jsx(Paper, {
40
+ className: "papper-root",
41
+ children: "Attach to this Section"
42
+ })
43
+ })]
44
+ }) : null;
45
+ };
46
+ export default DragOver;
@@ -0,0 +1,23 @@
1
+ const useDragOverStyle = () => ({
2
+ root: {
3
+ pointerEvents: "none",
4
+ position: "absolute",
5
+ left: 0,
6
+ top: 0,
7
+ width: "100%",
8
+ height: "100%",
9
+ outline: "2px solid #116dff"
10
+ },
11
+ popper: {
12
+ pointerEvents: "none",
13
+ zIndex: 1200,
14
+ "& .papper-root": {
15
+ padding: "8px 12px",
16
+ color: "#FFF",
17
+ fontSize: "14px",
18
+ left: "12px",
19
+ background: "#116dff"
20
+ }
21
+ }
22
+ });
23
+ export default useDragOverStyle;
@@ -0,0 +1,82 @@
1
+ import { Button, IconButton } from "@mui/material";
2
+ import CloseIcon from "@mui/icons-material/Close";
3
+ import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
4
+ import SettingsIcon from "@mui/icons-material/Settings";
5
+ import EditIcon from "@mui/icons-material/Edit";
6
+ import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
7
+ import MoreVertIcon from "@mui/icons-material/MoreVert";
8
+ import AddIcon from "@mui/icons-material/Add";
9
+ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
10
+ import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
11
+ import LinkIcon from "./Icons/LinkIcon";
12
+ const Actions = {
13
+ ai: {
14
+ type: "ai",
15
+ Button: IconButton,
16
+ Icon: AutoAwesomeIcon,
17
+ title: "Auto Generate using AI"
18
+ },
19
+ addSection: {
20
+ type: "addSection",
21
+ Button: Button,
22
+ Icon: null,
23
+ title: "Add Section"
24
+ },
25
+ addElement: {
26
+ type: "addElement",
27
+ Button: IconButton,
28
+ Icon: AddIcon,
29
+ title: "Add Element"
30
+ },
31
+ settings: {
32
+ type: "settings",
33
+ Button: IconButton,
34
+ Icon: SettingsIcon,
35
+ title: "Settings",
36
+ cb: "settings"
37
+ },
38
+ link: {
39
+ type: "link",
40
+ Button: IconButton,
41
+ Icon: LinkIcon,
42
+ title: "Link"
43
+ },
44
+ more: {
45
+ type: "more",
46
+ Button: IconButton,
47
+ Icon: MoreVertIcon,
48
+ title: "More",
49
+ cb: "more"
50
+ },
51
+ drag: {
52
+ type: 1,
53
+ Button: IconButton,
54
+ Icon: DragIndicatorIcon,
55
+ title: "Drag"
56
+ },
57
+ edit: {
58
+ type: 2,
59
+ Button: IconButton,
60
+ Icon: EditIcon,
61
+ title: "Edit"
62
+ },
63
+ close: {
64
+ type: 3,
65
+ Button: IconButton,
66
+ Icon: CloseIcon,
67
+ title: "close"
68
+ },
69
+ moveUp: {
70
+ type: "moveUp",
71
+ Button: IconButton,
72
+ Icon: ArrowUpwardIcon,
73
+ title: "Move Up"
74
+ },
75
+ moveDown: {
76
+ type: "moveDown",
77
+ Button: IconButton,
78
+ Icon: ArrowDownwardIcon,
79
+ title: "Move Down"
80
+ }
81
+ };
82
+ export default Actions;
@@ -0,0 +1,26 @@
1
+ import React from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { jsxs as _jsxs } from "react/jsx-runtime";
4
+ const LinkIcon = () => {
5
+ return /*#__PURE__*/_jsxs("svg", {
6
+ xmlns: "http://www.w3.org/2000/svg",
7
+ width: "18",
8
+ height: "18",
9
+ viewBox: "0 0 18 18",
10
+ fill: "none",
11
+ children: [/*#__PURE__*/_jsx("path", {
12
+ d: "M10.1582 7.84185C9.54389 7.22778 8.71084 6.88281 7.84222 6.88281C6.97361 6.88281 6.14055 7.22778 5.52622 7.84185L3.20947 10.1578C2.59513 10.7722 2.25 11.6054 2.25 12.4742C2.25 13.343 2.59513 14.1763 3.20947 14.7906C3.82381 15.4049 4.65704 15.7501 5.52585 15.7501C6.39466 15.7501 7.22788 15.4049 7.84222 14.7906L9.00022 13.6326",
13
+ stroke: "#000000",
14
+ strokeWidth: "1.5",
15
+ strokeLinecap: "round",
16
+ strokeLinejoin: "round"
17
+ }), /*#__PURE__*/_jsx("path", {
18
+ d: "M7.8418 10.1582C8.45613 10.7723 9.28918 11.1173 10.1578 11.1173C11.0264 11.1173 11.8595 10.7723 12.4738 10.1582L14.7905 7.84222C15.4049 7.22788 15.75 6.39466 15.75 5.52585C15.75 4.65704 15.4049 3.82381 14.7905 3.20947C14.1762 2.59513 13.343 2.25 12.4742 2.25C11.6054 2.25 10.7721 2.59513 10.1578 3.20947L8.9998 4.36747",
19
+ stroke: "#000000",
20
+ strokeWidth: "1.5",
21
+ strokeLinecap: "round",
22
+ strokeLinejoin: "round"
23
+ })]
24
+ });
25
+ };
26
+ export default LinkIcon;
@@ -0,0 +1,93 @@
1
+ import React, { useState } from "react";
2
+ import { Paper, Popper, Tooltip } from "@mui/material";
3
+ import Actions from "./Actions";
4
+ import useElementOptionsStyle from "./styles";
5
+ import OptionsPopup from "../OptionsPopup";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { Fragment as _Fragment } from "react/jsx-runtime";
8
+ import { jsxs as _jsxs } from "react/jsx-runtime";
9
+ const ElementOptions = props => {
10
+ const {
11
+ open,
12
+ anchorEl,
13
+ enable,
14
+ handleAction,
15
+ actions,
16
+ actionsMap,
17
+ optionsProps,
18
+ selectedAction
19
+ } = props;
20
+ const classes = useElementOptionsStyle();
21
+ const [menu, setMenu] = useState({});
22
+ const openMenu = Boolean(menu.anchorEl);
23
+ const {
24
+ MenuComp,
25
+ menuProps
26
+ } = menu;
27
+ const isOpen = Boolean(anchorEl) && open;
28
+ const handleOptionClick = type => e => {
29
+ if (actionsMap[type]) {
30
+ const {
31
+ title,
32
+ placement,
33
+ Component,
34
+ props
35
+ } = actionsMap[type];
36
+ setMenu({
37
+ title,
38
+ type,
39
+ anchorEl: e.currentTarget,
40
+ placement,
41
+ isComponent: true,
42
+ MenuComp: Component,
43
+ menuProps: props
44
+ });
45
+ } else {
46
+ handleAction(type);
47
+ }
48
+ };
49
+ const renderAction = (action, index) => {
50
+ const {
51
+ Button,
52
+ Icon,
53
+ type,
54
+ title
55
+ } = Actions[action] || {};
56
+ return type ? /*#__PURE__*/_jsx(Tooltip, {
57
+ title: title,
58
+ arrow: true,
59
+ children: /*#__PURE__*/_jsx(Button, {
60
+ onClick: handleOptionClick(type),
61
+ className: enable === type || selectedAction === type ? "active" : "",
62
+ children: Icon ? /*#__PURE__*/_jsx(Icon, {}) : title
63
+ })
64
+ }, `actions_fgele_${type}_${index}`) : null;
65
+ };
66
+ const handleClose = () => {
67
+ setMenu({});
68
+ };
69
+ return isOpen ? /*#__PURE__*/_jsxs(_Fragment, {
70
+ children: [/*#__PURE__*/_jsx(Popper, {
71
+ open: open,
72
+ anchorEl: anchorEl,
73
+ placement: "top-start",
74
+ sx: classes.root,
75
+ ...optionsProps,
76
+ children: /*#__PURE__*/_jsx(Paper, {
77
+ className: "papper-root",
78
+ children: actions.map(renderAction)
79
+ })
80
+ }), open && MenuComp ? /*#__PURE__*/_jsx(OptionsPopup, {
81
+ open: openMenu,
82
+ ...menu,
83
+ handleClose: handleClose,
84
+ children: /*#__PURE__*/_jsx(MenuComp, {
85
+ ...menuProps
86
+ })
87
+ }) : null]
88
+ }) : null;
89
+ };
90
+ ElementOptions.defaultProps = {
91
+ actions: []
92
+ };
93
+ export default ElementOptions;
@@ -0,0 +1,41 @@
1
+ const useElementOptionsStyle = () => ({
2
+ root: {
3
+ zIndex: 1200,
4
+ "& .papper-root": {
5
+ background: "transparent",
6
+ boxShadow: "none"
7
+ },
8
+ "& .MuiButton-root": {
9
+ padding: "4px",
10
+ fontSize: "10px",
11
+ textTransform: "none",
12
+ marginRight: "6px",
13
+ background: "#FFF",
14
+ boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
15
+ "&.active,&:hover ": {
16
+ color: "#FFF",
17
+ background: "#1976d2"
18
+ }
19
+ },
20
+ "& .MuiIconButton-root": {
21
+ padding: "4px",
22
+ color: "#000",
23
+ background: "#FFF",
24
+ borderRadius: "50%",
25
+ marginRight: "6px",
26
+ boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
27
+ border: "1px solid transparent",
28
+ "& svg": {
29
+ width: "16px",
30
+ height: "16px"
31
+ },
32
+ "&.active,&:hover ": {
33
+ color: "#2563EB",
34
+ background: "#FFF",
35
+ border: "1px solid #2563EB",
36
+ boxShadow: "1px 1px 3px #2563EB"
37
+ }
38
+ }
39
+ }
40
+ });
41
+ export default useElementOptionsStyle;