@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
@@ -1,7 +1,7 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
2
  import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
3
3
  import { squreStyle } from "./radiusStyle";
4
- import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
4
+ import { getBreakPointsValue } from "../../../helper/theme";
5
5
  import useWindowResize from "../../../hooks/useWindowResize";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,7 +23,11 @@ const BannerSpacing = props => {
23
23
  lockSpacing = true;
24
24
  }
25
25
  const [size] = useWindowResize();
26
- const value = getBreakPointsValue(val, size?.device);
26
+ const pro_value = getBreakPointsValue(val, size?.device);
27
+ const [value, setValue] = useState(pro_value);
28
+ useState(() => {
29
+ setValue(pro_value);
30
+ }, [pro_value]);
27
31
  const handleChange = e => {
28
32
  let changeAll = {};
29
33
  if (lockSpacing) {
@@ -31,13 +35,16 @@ const BannerSpacing = props => {
31
35
  changeAll[m] = e.target.value;
32
36
  });
33
37
  }
38
+ const up_value = {
39
+ ...value,
40
+ ...changeAll,
41
+ [e.target.name]: e.target.value
42
+ };
34
43
  onChange({
35
44
  [key]: {
36
45
  ...getBreakPointsValue(val, null),
37
46
  [size?.device]: {
38
- ...value,
39
- ...changeAll,
40
- [e.target.name]: e.target.value
47
+ ...up_value
41
48
  }
42
49
  }
43
50
  });
@@ -78,12 +85,10 @@ const BannerSpacing = props => {
78
85
  component: "input",
79
86
  sx: classes.sapcingInput,
80
87
  name: "top",
81
- value: !lockSpacing ? "" : getCustomizationValue(value?.top),
82
- className: "sliderInput removeScroll",
88
+ value: !lockSpacing ? "" : pro_value?.top,
89
+ className: "sliderInput",
83
90
  disabled: !lockSpacing,
84
- onChange: handleChange,
85
- type: "number",
86
- placeholder: "0"
91
+ onChange: handleChange
87
92
  })]
88
93
  }), /*#__PURE__*/_jsx(FormControlLabel, {
89
94
  className: "ccheckbox-primary",
@@ -125,54 +130,50 @@ const BannerSpacing = props => {
125
130
  children: [/*#__PURE__*/_jsx("div", {
126
131
  className: "bannerSpaceBoxTop",
127
132
  children: /*#__PURE__*/_jsx("input", {
128
- type: "number",
133
+ type: "text",
129
134
  name: "top",
130
- value: getCustomizationValue(value?.top),
131
- className: "borderInput removeScroll",
135
+ value: value?.top,
136
+ className: "borderInput",
132
137
  style: {
133
138
  ...squreStyle.topRight
134
139
  },
135
- onChange: handleChange,
136
- placeholder: "0"
140
+ onChange: handleChange
137
141
  })
138
142
  }), /*#__PURE__*/_jsx("div", {
139
143
  className: "bannerSpaceBoxRight",
140
144
  children: /*#__PURE__*/_jsx("input", {
141
- type: "number",
145
+ type: "text",
142
146
  name: "right",
143
- value: getCustomizationValue(value?.right),
144
- className: "borderInput removeScroll",
147
+ value: value?.right,
148
+ className: "borderInput",
145
149
  style: {
146
150
  ...squreStyle.bottomLeft
147
151
  },
148
- onChange: handleChange,
149
- placeholder: "0"
152
+ onChange: handleChange
150
153
  })
151
154
  }), /*#__PURE__*/_jsx("div", {
152
155
  className: "bannerSpaceBoxBottom",
153
156
  children: /*#__PURE__*/_jsx("input", {
154
- type: "number",
157
+ type: "text",
155
158
  name: "bottom",
156
- value: getCustomizationValue(value?.bottom),
157
- className: "borderInput removeScroll",
159
+ value: value?.bottom,
160
+ className: "borderInput",
158
161
  style: {
159
162
  ...squreStyle.bottomRight
160
163
  },
161
- onChange: handleChange,
162
- placeholder: "0"
164
+ onChange: handleChange
163
165
  })
164
166
  }), /*#__PURE__*/_jsx("div", {
165
167
  className: "bannerSpaceBoxLeft",
166
168
  children: /*#__PURE__*/_jsx("input", {
167
- type: "number",
169
+ type: "text",
168
170
  name: "left",
169
- className: "borderInput removeScroll",
170
- value: getCustomizationValue(value?.left),
171
+ className: "borderInput",
172
+ value: value?.left,
171
173
  style: {
172
174
  ...squreStyle.topLeft
173
175
  },
174
- onChange: handleChange,
175
- placeholder: "0"
176
+ onChange: handleChange
176
177
  })
177
178
  })]
178
179
  })
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
3
3
  import { radiusStyle } from "./radiusStyle";
4
4
  import useWindowResize from "../../../hooks/useWindowResize";
5
- import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
5
+ import { getBreakPointsValue } from "../../../helper/theme";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
8
  const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -80,13 +80,11 @@ const BorderRadius = props => {
80
80
  }), /*#__PURE__*/_jsx(Box, {
81
81
  sx: classes.sapcingInput,
82
82
  component: "input",
83
- value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
84
- className: "sliderInput removeScroll",
83
+ value: !lockRadius ? "" : value?.topLeft || 0,
84
+ className: "sliderInput",
85
85
  name: "topLeft",
86
86
  disabled: !lockRadius,
87
- onChange: handleChange,
88
- type: "number",
89
- placeholder: "0"
87
+ onChange: handleChange
90
88
  })]
91
89
  }), /*#__PURE__*/_jsx(FormControlLabel, {
92
90
  className: "ccheckbox-primary",
@@ -127,10 +125,10 @@ const BorderRadius = props => {
127
125
  borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
128
126
  },
129
127
  children: [/*#__PURE__*/_jsx("input", {
130
- type: "number",
128
+ type: "text",
131
129
  name: "topLeft",
132
- value: getCustomizationValue(value?.topLeft),
133
- className: "borderInput removeScroll",
130
+ value: value?.topLeft,
131
+ className: "borderInput",
134
132
  placeholder: "0",
135
133
  style: {
136
134
  ...radiusStyle.topLeft,
@@ -138,10 +136,10 @@ const BorderRadius = props => {
138
136
  },
139
137
  onChange: handleChange
140
138
  }), /*#__PURE__*/_jsx("input", {
141
- type: "number",
139
+ type: "text",
142
140
  name: "topRight",
143
- value: getCustomizationValue(value?.topRight),
144
- className: "borderInput removeScroll",
141
+ value: value?.topRight,
142
+ className: "borderInput",
145
143
  placeholder: "0",
146
144
  style: {
147
145
  ...radiusStyle.topRight,
@@ -150,10 +148,10 @@ const BorderRadius = props => {
150
148
  },
151
149
  onChange: handleChange
152
150
  }), /*#__PURE__*/_jsx("input", {
153
- type: "number",
151
+ type: "text",
154
152
  name: "bottomLeft",
155
- value: getCustomizationValue(value?.bottomLeft),
156
- className: "borderInput removeScroll",
153
+ value: value?.bottomLeft,
154
+ className: "borderInput",
157
155
  placeholder: "0",
158
156
  style: {
159
157
  ...radiusStyle.bottomLeft,
@@ -162,10 +160,10 @@ const BorderRadius = props => {
162
160
  },
163
161
  onChange: handleChange
164
162
  }), /*#__PURE__*/_jsx("input", {
165
- type: "number",
163
+ type: "text",
166
164
  name: "bottomRight",
167
- value: getCustomizationValue(value?.bottomRight),
168
- className: "borderInput removeScroll",
165
+ value: value?.bottomRight,
166
+ className: "borderInput",
169
167
  placeholder: "0",
170
168
  style: {
171
169
  ...radiusStyle.bottomRight,
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState, useRef } from "react";
1
+ import React from "react";
2
2
  import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -6,23 +6,12 @@ const SelectBox = props => {
6
6
  const {
7
7
  value,
8
8
  data,
9
- onChange,
10
- elementProps
9
+ onChange
11
10
  } = props;
12
11
  const {
13
12
  key,
14
13
  placeholder
15
14
  } = data;
16
- const [checkedValue, setCheckedValue] = useState(false);
17
- const isFirstRender = useRef(true);
18
- useEffect(() => {
19
- if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
20
- setCheckedValue(true);
21
- isFirstRender.current = false;
22
- } else {
23
- setCheckedValue(value);
24
- }
25
- }, [elementProps.element, value]);
26
15
  const handleChange = e => {
27
16
  onChange({
28
17
  [key]: e.target.checked
@@ -37,7 +26,7 @@ const SelectBox = props => {
37
26
  children: [/*#__PURE__*/_jsx(FormControlLabel, {
38
27
  control: /*#__PURE__*/_jsx(Checkbox, {
39
28
  value: value,
40
- checked: checkedValue,
29
+ checked: value,
41
30
  onChange: handleChange
42
31
  }),
43
32
  label: placeholder
@@ -1,10 +1,10 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
2
  import { Grid, TextField, Typography } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
5
  const Text = props => {
6
6
  const {
7
- value,
7
+ value: pro_value,
8
8
  data,
9
9
  onChange
10
10
  } = props;
@@ -13,7 +13,9 @@ const Text = props => {
13
13
  placeholder,
14
14
  width
15
15
  } = data;
16
+ const [value, setValue] = useState(pro_value);
16
17
  const handleChange = e => {
18
+ setValue(e.target.value);
17
19
  onChange({
18
20
  [key]: e.target.value
19
21
  });
@@ -7,7 +7,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
10
- const StyleContent = props => {
10
+ export const StyleContent = props => {
11
11
  const {
12
12
  value,
13
13
  renderTabs,
@@ -87,7 +87,7 @@ const StyleBuilder = props => {
87
87
  ...data,
88
88
  field_type: data?.element
89
89
  });
90
- if (data?.hasOwnProperty('name')) {
90
+ if (data?.hasOwnProperty("name")) {
91
91
  setElementProps({
92
92
  ...elementProps,
93
93
  ...data,
@@ -1,4 +1,12 @@
1
- const gridStyle = [{
1
+ const sectionStyle = [{
2
+ tab: "General",
3
+ value: "sectionName",
4
+ fields: [{
5
+ label: "Section Name",
6
+ key: "sectionName",
7
+ type: "text"
8
+ }]
9
+ }, {
2
10
  tab: "Colors",
3
11
  value: "sectionColors",
4
12
  fields: [{
@@ -21,6 +29,7 @@ const gridStyle = [{
21
29
  }, {
22
30
  tab: "Padding",
23
31
  value: "sectionBannerSpacing",
32
+ hideOnFGS: true,
24
33
  fields: [{
25
34
  label: "Padding",
26
35
  key: "sectionBannerSpacing",
@@ -37,6 +46,7 @@ const gridStyle = [{
37
46
  }, {
38
47
  tab: "Position",
39
48
  value: "position",
49
+ hideOnFGS: true,
40
50
  fields: [{
41
51
  label: "Set Postion (Vertical & Horizantal)",
42
52
  key: "sectionAlignment",
@@ -45,10 +55,11 @@ const gridStyle = [{
45
55
  }, {
46
56
  tab: "Size",
47
57
  value: "gridSize",
58
+ hideOnFGS: true,
48
59
  fields: [{
49
60
  label: "Width Size",
50
61
  key: "sectionGridSize",
51
62
  type: "gridSize"
52
63
  }]
53
64
  }];
54
- export default gridStyle;
65
+ export default sectionStyle;
@@ -0,0 +1,39 @@
1
+ import { Node } from "slate";
2
+ import { ReactEditor } from "slate-react";
3
+ function safeToDOMNode(editor, node, np, extProps) {
4
+ try {
5
+ if (Node.has(editor, node)) {
6
+ const domNode = ReactEditor.toDOMNode(editor, node);
7
+ return domNode;
8
+ }
9
+ } catch (error) {
10
+ console.error("Focusing Again");
11
+ focusOnNewItem(editor, np, extProps);
12
+ }
13
+ return null;
14
+ }
15
+ function focusOnNewItem(editor, newPath, extProps) {
16
+ try {
17
+ const sectionNode = Node.get(editor, newPath);
18
+ requestAnimationFrame(() => {
19
+ const domNode = safeToDOMNode(editor, sectionNode, newPath, extProps);
20
+ if (domNode) {
21
+ const sectionDom = ReactEditor.toDOMNode(editor, sectionNode);
22
+ if (sectionDom) {
23
+ sectionDom.scrollIntoView({
24
+ behavior: "smooth",
25
+ block: "center"
26
+ });
27
+ extProps?.setSelectedElement({
28
+ enable: 1,
29
+ path: [...newPath].join("|"),
30
+ cursor: "move"
31
+ });
32
+ }
33
+ }
34
+ });
35
+ } catch (err) {
36
+ console.log(err);
37
+ }
38
+ }
39
+ export default focusOnNewItem;
@@ -0,0 +1,24 @@
1
+ import { Node } from "slate";
2
+ import { ReactEditor } from "slate-react";
3
+ function scrollToNewSection(editor, newPath, extProps) {
4
+ try {
5
+ const sectionNode = Node.get(editor, newPath);
6
+ requestAnimationFrame(() => {
7
+ const sectionDom = ReactEditor.toDOMNode(editor, sectionNode);
8
+ if (sectionDom) {
9
+ sectionDom.scrollIntoView({
10
+ behavior: "smooth",
11
+ block: "center"
12
+ });
13
+ extProps?.setSelectedElement({
14
+ enable: 1,
15
+ path: [...newPath, 0].join("|"),
16
+ cursor: "move"
17
+ });
18
+ }
19
+ });
20
+ } catch (err) {
21
+ console.log(err);
22
+ }
23
+ }
24
+ export default scrollToNewSection;
@@ -0,0 +1,5 @@
1
+ export function CssVar(device = "lg", key, props) {
2
+ const keyTo = `${key}_${device}`;
3
+ const value = props[keyTo] === undefined ? props[key] : props[keyTo];
4
+ return value;
5
+ }
@@ -1,9 +1,12 @@
1
+ import { Editor, Transforms, Path } from "slate";
2
+ import { ReactEditor } from "slate-react";
1
3
  import html2canvas from "html2canvas";
2
4
  import { rectIntersection, closestCenter } from "@dnd-kit/core";
3
5
  import { getQueryStrings } from "../utils/SlateUtilityFunctions";
4
6
  import { Node } from "slate";
5
7
  const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
6
8
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
9
+ const RND_ITEMS = ["freegridItem", "freegridBox"];
7
10
  export const getThumbnailImage = async (dom, options = {}) => {
8
11
  try {
9
12
  const canvas = await html2canvas(dom, {
@@ -140,6 +143,142 @@ export const isEmptyTextNode = element => {
140
143
  return false;
141
144
  }
142
145
  };
146
+ export const clearSelection = editor => {
147
+ try {
148
+ ReactEditor.focus(editor);
149
+ Transforms.collapse(editor, {
150
+ edge: "start"
151
+ });
152
+ Transforms.deselect(editor);
153
+ } catch (err) {
154
+ console.log(err);
155
+ }
156
+ };
157
+ export const isSelectionInNodeType = (editor, type) => {
158
+ const {
159
+ selection
160
+ } = editor;
161
+ if (selection) {
162
+ const [match] = Editor.nodes(editor, {
163
+ match: n => n.type === type,
164
+ mode: "lowest" // This ensures that we check the lowest node that matches the type
165
+ });
166
+
167
+ return {
168
+ selected: !!match,
169
+ match
170
+ };
171
+ }
172
+ return {
173
+ selected: false
174
+ };
175
+ };
176
+ export const getCaretPosition = editor => {
177
+ const {
178
+ selection
179
+ } = editor;
180
+ if (selection) {
181
+ const {
182
+ anchor
183
+ } = selection;
184
+ const {
185
+ path,
186
+ offset
187
+ } = anchor;
188
+ return path && offset ? {
189
+ path,
190
+ offset
191
+ } : null;
192
+ }
193
+ return null;
194
+ };
195
+ export const onPasteRnDNode = (editor, {
196
+ path,
197
+ children,
198
+ slateNodes
199
+ }) => {
200
+ try {
201
+ const cur_root_path = Path.parent(path);
202
+ const parsed_node = slateNodes || JSON.parse(window.copiedNode);
203
+ let new_path = [...path, children.length];
204
+ if (RND_ITEMS.indexOf(parsed_node?.type) > -1) {
205
+ Transforms.insertNodes(editor, [{
206
+ ...parsed_node,
207
+ // for differentiate the items
208
+ left: parsed_node?.left + 20,
209
+ marginTop: parsed_node?.marginTop + 20,
210
+ // to maintain unique drop location in different section also
211
+ gridArea: "1 / 1 / 2 / 2"
212
+ }], {
213
+ at: new_path
214
+ });
215
+ } else {
216
+ // for pasting whole section
217
+ new_path = Path.next(cur_root_path);
218
+ Transforms.insertNodes(editor, [{
219
+ ...parsed_node
220
+ }], {
221
+ at: new_path
222
+ });
223
+ }
224
+ return new_path;
225
+ } catch (err) {
226
+ console.log(err);
227
+ }
228
+ };
229
+ export const setSelection = (editor, {
230
+ path
231
+ }) => {
232
+ try {
233
+ ReactEditor.focus(editor);
234
+ const point = {
235
+ path,
236
+ offset: 0
237
+ };
238
+ Transforms.select(editor, {
239
+ anchor: point,
240
+ focus: point
241
+ });
242
+ ReactEditor.focus(editor);
243
+ } catch (err) {
244
+ console.log(err);
245
+ }
246
+ };
247
+ export const focusSelection = (editor, {
248
+ path
249
+ }) => {
250
+ try {
251
+ ReactEditor.focus(editor);
252
+ const selectedNode = Node.get(editor, path);
253
+ const selectedDOM = ReactEditor.toDOMNode(editor, selectedNode);
254
+ selectedDOM.scrollIntoView({
255
+ behavior: "smooth",
256
+ block: "center"
257
+ });
258
+ } catch (err) {
259
+ console.log(err);
260
+ }
261
+ };
262
+ export const bringItemToFB = (editor, {
263
+ path,
264
+ moveFront
265
+ }) => {
266
+ try {
267
+ const itemNode = Node.get(editor, path);
268
+ const {
269
+ zIndex
270
+ } = itemNode;
271
+ let arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
272
+ arrangeIndex = moveFront ? arrangeIndex + 1 : arrangeIndex - 1;
273
+ Transforms.setNodes(editor, {
274
+ zIndex: Math.min(arrangeIndex, editor.children.length)
275
+ }, {
276
+ at: path
277
+ });
278
+ } catch (err) {
279
+ console.log(err);
280
+ }
281
+ };
143
282
  export const debounce = function (func, wait, immediate) {
144
283
  let timeout;
145
284
  return function () {
@@ -154,26 +293,4 @@ export const debounce = function (func, wait, immediate) {
154
293
  timeout = setTimeout(later, wait);
155
294
  if (callNow) func.apply(context, args);
156
295
  };
157
- };
158
- export const getTextColor = (color = "") => {
159
- return color?.indexOf("gradient") >= 0 ? {
160
- background: color?.concat("text"),
161
- WebkitBackgroundClip: "text",
162
- WebkitTextFillColor: "transparent",
163
- color: "transparent",
164
- caretColor: "black"
165
- } : {
166
- color
167
- };
168
- };
169
- export const getBorderColor = (borderColor = "") => {
170
- const borderStyle = borderColor ? {
171
- border: "1px solid"
172
- } : {};
173
- if (borderColor?.indexOf("gradient") >= 0) {
174
- borderStyle.borderImage = `${borderColor} 1`;
175
- } else {
176
- borderStyle.borderColor = borderColor;
177
- }
178
- return borderStyle;
179
296
  };
@@ -6,6 +6,12 @@ export const breakpoints = {
6
6
  };
7
7
  export const BREAKPOINTS_DEVICES = ["xs", "sm", "md", "lg"];
8
8
  export const getDevice = width => {
9
+ // stimulated environment
10
+ const breakpoint = document.getElementsByClassName("et-wrpr")[0];
11
+ const etDataset = breakpoint?.dataset;
12
+ if (etDataset?.breakpoint) {
13
+ return etDataset?.breakpoint;
14
+ }
9
15
  if (width > 0 && width < breakpoints.mobile) {
10
16
  return "xs";
11
17
  } else {
@@ -42,7 +48,7 @@ const overrides = {
42
48
  return `${val?.widthInPercent || 100}%`;
43
49
  },
44
50
  overrideReSizeH: val => {
45
- return `${val?.height}px`;
51
+ return val ? `${val?.height}px` : "auto";
46
52
  },
47
53
  overrideBorderRadius: val => {
48
54
  return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
@@ -98,4 +104,46 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
98
104
  console.log(err);
99
105
  }
100
106
  };
101
- export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
107
+ export const getBRValue = (props, rbr = "lg") => {
108
+ const {
109
+ value,
110
+ breakpoint,
111
+ ot,
112
+ ov
113
+ } = props;
114
+ const val = getBreakPointsValue(value, breakpoint, ot, ov);
115
+ return val[rbr] || val["lg"];
116
+ };
117
+ const isObject = value => {
118
+ return Object.prototype.toString.call(value) === "[object Object]";
119
+ };
120
+ export const groupByBreakpoint = (styleProps, theme) => {
121
+ const tProps = Object.keys(styleProps);
122
+ const groupedXS = tProps.reduce((a, b) => {
123
+ if (isObject(styleProps[b])) {
124
+ a[b] = styleProps[b]["xs"];
125
+ if (b === "height" && !a[b]) {
126
+ a[b] = "auto";
127
+ }
128
+ } else {
129
+ a[b] = styleProps[b];
130
+ }
131
+ return a;
132
+ }, {});
133
+ const groupedLG = tProps.reduce((a, b) => {
134
+ if (isObject(styleProps[b])) {
135
+ a[b] = styleProps[b]["lg"] || styleProps[b];
136
+ } else {
137
+ a[b] = styleProps[b];
138
+ }
139
+ return a;
140
+ }, {});
141
+ return {
142
+ [theme.breakpoints.up("lg")]: {
143
+ ...groupedLG
144
+ },
145
+ [theme.breakpoints.between("xs", "md")]: {
146
+ ...groupedXS
147
+ }
148
+ };
149
+ };
@@ -0,0 +1,34 @@
1
+ import { useMediaQuery } from "@mui/material";
2
+ export const STIMULATOR_MOCK = {
3
+ xs: "@media (min-width: 1200px) and (max-width: 1980px)"
4
+ };
5
+ export const isStimulator = () => {
6
+ try {
7
+ const breakpoint = document.getElementsByClassName("et-wrpr")[0];
8
+ const etDataset = breakpoint?.dataset;
9
+ if (etDataset?.breakpoint) {
10
+ return etDataset?.breakpoint;
11
+ }
12
+ } catch (err) {
13
+ console.log(err);
14
+ }
15
+ };
16
+ const useBreakpoints = theme => {
17
+ const lg = useMediaQuery(theme.breakpoints.up("md"));
18
+ const xs = useMediaQuery(theme.breakpoints.between("xs", "md"));
19
+
20
+ // if stimulated environment
21
+ const breakpoint = document.getElementsByClassName("et-wrpr")[0];
22
+ const etDataset = breakpoint?.dataset;
23
+ if (etDataset?.breakpoint) {
24
+ return etDataset?.breakpoint;
25
+ }
26
+ if (lg) {
27
+ return "lg";
28
+ } else if (xs) {
29
+ return "xs";
30
+ } else {
31
+ return "lg";
32
+ }
33
+ };
34
+ export default useBreakpoints;