@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,48 @@
1
+ import React from "react";
2
+ import { Transforms, Node } from "slate";
3
+ import { Box } from "@mui/material";
4
+ import { StyleContent } from "../../../StyleBuilder";
5
+ import formStyle from "../../../StyleBuilder/formStyle";
6
+ import { ReactEditor } from "slate-react";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ const FormSettings = props => {
9
+ const {
10
+ editor,
11
+ path,
12
+ customProps
13
+ } = props;
14
+ const item_path = path?.split("|").map(m => parseInt(m));
15
+ const element_path = [...item_path];
16
+ const element = Node.get(editor, element_path);
17
+ const onChange = data => {
18
+ const currentPath = ReactEditor.findPath(editor, element);
19
+ const updateData = {
20
+ ...data
21
+ };
22
+ delete updateData.children;
23
+ Transforms.setNodes(editor, {
24
+ ...updateData
25
+ }, {
26
+ at: [...currentPath, 0]
27
+ });
28
+ };
29
+ const handleClose = () => {
30
+ console.log("close");
31
+ };
32
+ return /*#__PURE__*/_jsx(Box, {
33
+ component: "div",
34
+ className: "item-w",
35
+ children: formStyle?.map((m, i) => {
36
+ return /*#__PURE__*/_jsx(StyleContent, {
37
+ renderTabs: formStyle,
38
+ value: m.value,
39
+ element: element,
40
+ customElement: element?.children?.[0] || null,
41
+ onChange: onChange,
42
+ customProps: customProps,
43
+ handleClose: handleClose
44
+ }, `tab_${m.value}_$${i}`);
45
+ })
46
+ });
47
+ };
48
+ export default FormSettings;
@@ -0,0 +1,47 @@
1
+ import React from "react";
2
+ import { Transforms, Node } from "slate";
3
+ import { Box } from "@mui/material";
4
+ import { StyleContent } from "../../../StyleBuilder";
5
+ import embedImageStyle from "../../../StyleBuilder/embedImageStyle";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const ImageSettings = props => {
8
+ const {
9
+ editor,
10
+ path,
11
+ customProps
12
+ } = props;
13
+ const item_path = path?.split("|").map(m => parseInt(m));
14
+ const element_path = [...item_path, 0];
15
+ const element = Node.get(editor, element_path);
16
+ const onChange = data => {
17
+ const updated_props = {
18
+ ...element,
19
+ ...data,
20
+ field_type: data?.element
21
+ };
22
+ delete updated_props.children;
23
+ Transforms.setNodes(editor, {
24
+ ...updated_props
25
+ }, {
26
+ at: element_path
27
+ });
28
+ };
29
+ const handleClose = () => {
30
+ console.log("close");
31
+ };
32
+ return /*#__PURE__*/_jsx(Box, {
33
+ component: "div",
34
+ className: "item-w",
35
+ children: embedImageStyle?.map((m, i) => {
36
+ return /*#__PURE__*/_jsx(StyleContent, {
37
+ renderTabs: embedImageStyle,
38
+ value: m.value,
39
+ element: element,
40
+ onChange: onChange,
41
+ customProps: customProps,
42
+ handleClose: handleClose
43
+ }, `tab_${m.value}_$${i}`);
44
+ })
45
+ });
46
+ };
47
+ export default ImageSettings;
@@ -0,0 +1,30 @@
1
+ import React, { useEffect } from "react";
2
+ import { Editor, Transforms } from "slate";
3
+ import TextFormat from "../../../../Toolbar/PopupTool/TextFormat";
4
+ import usePopupStyle from "../../../../Toolbar/PopupTool/PopupToolStyle";
5
+ import { ReactEditor } from "slate-react";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const TextSettings = props => {
8
+ const {
9
+ editor,
10
+ path
11
+ } = props;
12
+ const item_path = path.split("|").map(m => parseInt(m));
13
+ const element_path = [...item_path, 0];
14
+ const classes = usePopupStyle();
15
+ useEffect(() => {
16
+ try {
17
+ ReactEditor.focus(editor);
18
+ const range = Editor.range(editor, element_path);
19
+ Transforms.select(editor, range);
20
+ ReactEditor.focus(editor);
21
+ } catch (err) {
22
+ console.log(err);
23
+ }
24
+ }, []);
25
+ return /*#__PURE__*/_jsx(TextFormat, {
26
+ classes: classes,
27
+ editor: editor
28
+ });
29
+ };
30
+ export default TextSettings;
@@ -0,0 +1,47 @@
1
+ import React from "react";
2
+ import { Transforms, Node } from "slate";
3
+ import { Box } from "@mui/material";
4
+ import { StyleContent } from "../../../StyleBuilder";
5
+ import embedVideoStyle from "../../../StyleBuilder/embedVideoStyle";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ const VideoSettings = props => {
8
+ const {
9
+ editor,
10
+ path,
11
+ customProps
12
+ } = props;
13
+ const item_path = path?.split("|").map(m => parseInt(m));
14
+ const element_path = [...item_path, 0];
15
+ const element = Node.get(editor, element_path);
16
+ const onChange = data => {
17
+ const updated_props = {
18
+ ...element,
19
+ ...data,
20
+ field_type: data?.element
21
+ };
22
+ delete updated_props.children;
23
+ Transforms.setNodes(editor, {
24
+ ...updated_props
25
+ }, {
26
+ at: element_path
27
+ });
28
+ };
29
+ const handleClose = () => {
30
+ console.log("close");
31
+ };
32
+ return /*#__PURE__*/_jsx(Box, {
33
+ component: "div",
34
+ className: "item-w",
35
+ children: embedVideoStyle?.map((m, i) => {
36
+ return /*#__PURE__*/_jsx(StyleContent, {
37
+ renderTabs: embedVideoStyle,
38
+ value: m.value,
39
+ element: element,
40
+ onChange: onChange,
41
+ customProps: customProps,
42
+ handleClose: handleClose
43
+ }, `tab_${m.value}_$${i}`);
44
+ })
45
+ });
46
+ };
47
+ export default VideoSettings;
@@ -0,0 +1,17 @@
1
+ import TextSettings from "./TextSettings";
2
+ import ButtonSettings from "./ButtonSettings";
3
+ import ImageSettings from "./ImageSettings";
4
+ import VideoSettings from "./VideoSettings";
5
+ import BoxSettings from "./BoxSettings";
6
+ import AppHeaderSettings from "./AppHeaderSettings";
7
+ import FormSettings from "./FormSettings";
8
+ const SettingsComponents = {
9
+ text: TextSettings,
10
+ button: ButtonSettings,
11
+ image: ImageSettings,
12
+ video: VideoSettings,
13
+ box: BoxSettings,
14
+ appHeader: AppHeaderSettings,
15
+ form: FormSettings
16
+ };
17
+ export default SettingsComponents;
@@ -0,0 +1,17 @@
1
+ import React from "react";
2
+ import useElementSettingsStyle from "./styles";
3
+ import OtherSettings from "./OtherSettings";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const ElementSettings = props => {
6
+ const {
7
+ currentAction
8
+ } = props;
9
+ const classes = useElementSettingsStyle();
10
+ const Settings = OtherSettings[currentAction];
11
+ return Settings ? /*#__PURE__*/_jsx(Settings, {
12
+ classes: classes,
13
+ ...props
14
+ }) : null;
15
+ };
16
+ ElementSettings.defaultProps = {};
17
+ export default ElementSettings;
@@ -0,0 +1,18 @@
1
+ export const settingsLabel = {
2
+ text: "Text Settings",
3
+ button: "Button Settings",
4
+ image: "Image Settings",
5
+ video: "Video Settings",
6
+ box: "Box Settings",
7
+ appHeader: "App Header Settings",
8
+ form: "Form Settings"
9
+ };
10
+ export const ItemTypes = {
11
+ text: "Text",
12
+ button: "Button",
13
+ image: "Image",
14
+ video: "Video",
15
+ box: "Box",
16
+ appHeader: "App Header",
17
+ form: "Form"
18
+ };
@@ -0,0 +1,94 @@
1
+ const useElementSettingsStyle = theme => ({
2
+ root: {
3
+ zIndex: 1200,
4
+ background: "#FFF",
5
+ borderRadius: "10px",
6
+ overflow: "hidden",
7
+ boxShadow: "0px 0px 12px 4px #00000014",
8
+ padding: "10px 16px",
9
+ "& .papper-root": {
10
+ width: "312px",
11
+ boxShadow: "none"
12
+ },
13
+ ".MuiDivider-root": {
14
+ background: "#DCE4EC"
15
+ },
16
+ "& .closeBtn": {
17
+ borderRadius: "4px",
18
+ width: "26px",
19
+ height: "26px",
20
+ background: "#F8FAFC",
21
+ padding: "7px"
22
+ },
23
+ ".MuiAccordionSummary-root": {
24
+ minHeight: "40px !important",
25
+ padding: "0px"
26
+ },
27
+ ".MuiAccordionSummary-content": {
28
+ margin: "0px"
29
+ },
30
+ "& .MuiAccordion-root": {
31
+ boxShadow: "none",
32
+ "& .accordionTitle": {
33
+ display: "flex",
34
+ alignItems: "center"
35
+ },
36
+ "& .expandIcon": {
37
+ transform: "rotate(270deg)",
38
+ transition: "all 0.5s",
39
+ fill: "#64748B"
40
+ },
41
+ "&.Mui-expanded": {
42
+ "& .expandIcon": {
43
+ transform: "rotate(360deg)"
44
+ }
45
+ }
46
+ },
47
+ "& .item-w": {
48
+ maxHeight: "300px",
49
+ overflowX: "hidden",
50
+ overflowY: "auto"
51
+ },
52
+ "& .item-wrapper": {
53
+ fontFamily: "sans-serif",
54
+ padding: "5px 0px 12px 0px",
55
+ "& .text-formatter-popup": {
56
+ padding: "0px",
57
+ overflowX: "hidden"
58
+ },
59
+ "&.title": {
60
+ display: "flex",
61
+ fontSize: "16px",
62
+ fontWeight: "bold",
63
+ justifyContent: "space-between",
64
+ alignItems: "center",
65
+ "& .MuiIconButton-root": {
66
+ padding: "4px",
67
+ "& svg": {
68
+ width: "16px",
69
+ height: "16px"
70
+ }
71
+ }
72
+ }
73
+ }
74
+ },
75
+ dialog: {
76
+ "& .MuiDialogTitle-root": {
77
+ display: "flex",
78
+ justifyContent: "space-between"
79
+ },
80
+ "& .MuiGrid-root": {
81
+ marginBottom: "12px"
82
+ },
83
+ "& .action-btn-wrpr": {
84
+ justifyContent: "flex-end !important",
85
+ "& .savebtn": {
86
+ marginRight: "12px"
87
+ },
88
+ "& .close": {
89
+ marginRight: "12px"
90
+ }
91
+ }
92
+ }
93
+ });
94
+ export default useElementSettingsStyle;
@@ -0,0 +1,52 @@
1
+ import React from "react";
2
+ import { Box, useTheme } from "@mui/material";
3
+ import useGuideLineStyle from "./styles";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ const SVGDashed = () => {
7
+ return /*#__PURE__*/_jsx("svg", {
8
+ width: "1",
9
+ height: "100%",
10
+ version: "1.1",
11
+ xmlns: "http://www.w3.org/2000/svg",
12
+ children: /*#__PURE__*/_jsx("line", {
13
+ strokeDasharray: "5, 5",
14
+ x1: "0",
15
+ y1: "100%",
16
+ x2: "1",
17
+ y2: "1",
18
+ style: {
19
+ stroke: "rgb(0, 0, 0)",
20
+ strokeWidth: 2
21
+ }
22
+ })
23
+ });
24
+ };
25
+ const BoundaryLine = () => {
26
+ const theme = useTheme();
27
+ const classes = useGuideLineStyle({
28
+ theme
29
+ });
30
+ return /*#__PURE__*/_jsxs(Box, {
31
+ component: "div",
32
+ sx: classes.boundaryLine,
33
+ children: [/*#__PURE__*/_jsx(Box, {
34
+ component: "div",
35
+ className: "rnd-guideline-lv",
36
+ contentEditable: false,
37
+ children: /*#__PURE__*/_jsx(SVGDashed, {})
38
+ }), /*#__PURE__*/_jsx(Box, {
39
+ component: "div",
40
+ className: "rnd-guideline-rv",
41
+ contentEditable: false,
42
+ children: /*#__PURE__*/_jsx(SVGDashed, {})
43
+ }), /*#__PURE__*/_jsx(Box, {
44
+ component: "div",
45
+ className: "white-wrapper w_left"
46
+ }), /*#__PURE__*/_jsx(Box, {
47
+ component: "div",
48
+ className: "white-wrapper w_right"
49
+ })]
50
+ });
51
+ };
52
+ export default BoundaryLine;
@@ -0,0 +1,33 @@
1
+ import React from "react";
2
+ import { Box, useTheme } from "@mui/material";
3
+ import useGuideLineStyle from "./styles";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const GuideLines = props => {
6
+ const theme = useTheme();
7
+ const classes = useGuideLineStyle({
8
+ theme
9
+ });
10
+ const {
11
+ lines
12
+ } = props;
13
+ const renderGuideLine = ({
14
+ x,
15
+ y,
16
+ width,
17
+ height
18
+ }, index) => {
19
+ return /*#__PURE__*/_jsx(Box, {
20
+ sx: classes.root,
21
+ component: "span",
22
+ className: "rnd-guideline",
23
+ style: {
24
+ left: x,
25
+ top: y,
26
+ width,
27
+ height
28
+ }
29
+ }, `rnd-gl-${index}_${x}_${y}`);
30
+ };
31
+ return lines?.length ? lines?.map(renderGuideLine) : null;
32
+ };
33
+ export default GuideLines;
@@ -0,0 +1,62 @@
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
+ zIndex: 1,
25
+ [theme.breakpoints.between("xs", "md")]: {
26
+ left: "calc(50% - 160px)"
27
+ }
28
+ },
29
+ "& .rnd-guideline-rv": {
30
+ position: "absolute",
31
+ left: "calc(50% + 490px)",
32
+ top: "0",
33
+ height: "100%",
34
+ width: "1px",
35
+ backgroundColor: "#FFF",
36
+ pointerEvents: "none",
37
+ zIndex: 1,
38
+ [theme.breakpoints.between("xs", "md")]: {
39
+ left: "calc(50% + 160px)"
40
+ }
41
+ },
42
+ "& .white-wrapper": {
43
+ overflowX: "hidden",
44
+ [theme.breakpoints.between("xs", "md")]: {
45
+ position: "absolute",
46
+ width: "calc(50% - 162px)",
47
+ height: "calc(100% - 2px)",
48
+ backgroundColor: "rgba(255,255,255,1)",
49
+ pointerEvents: "none",
50
+ top: 2,
51
+ "&.w_left": {
52
+ left: 2
53
+ },
54
+ "&.w_right": {
55
+ right: 2,
56
+ width: "calc(50% - 163px)"
57
+ }
58
+ }
59
+ }
60
+ }
61
+ });
62
+ 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;