@flozy/editor 4.0.3 → 4.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (148) hide show
  1. package/dist/Editor/CommonEditor.js +85 -13
  2. package/dist/Editor/DialogWrapper.js +4 -3
  3. package/dist/Editor/Editor.css +28 -2
  4. package/dist/Editor/Elements/AI/AIInput.js +31 -33
  5. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +119 -132
  7. package/dist/Editor/Elements/AI/Styles.js +2 -2
  8. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  9. package/dist/Editor/Elements/AI/VoiceToText/index.js +184 -0
  10. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  11. package/dist/Editor/Elements/AI/helper.js +5 -3
  12. package/dist/Editor/Elements/AppHeader/AppHeader.js +36 -23
  13. package/dist/Editor/Elements/Button/EditorButton.js +23 -16
  14. package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -2
  15. package/dist/Editor/Elements/Color Picker/ColorButtons.js +1 -1
  16. package/dist/Editor/Elements/Color Picker/Styles.js +1 -0
  17. package/dist/Editor/Elements/Embed/Image.js +15 -14
  18. package/dist/Editor/Elements/Embed/Video.js +12 -8
  19. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  20. package/dist/Editor/Elements/Form/Form.js +43 -27
  21. package/dist/Editor/Elements/Form/FormField.js +21 -10
  22. package/dist/Editor/Elements/Form/Workflow/index.js +5 -2
  23. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +437 -0
  24. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +206 -0
  25. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  26. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +236 -0
  27. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +44 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  29. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  30. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +19 -0
  31. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  32. package/dist/Editor/Elements/FreeGrid/styles.js +214 -0
  33. package/dist/Editor/Elements/Grid/Grid.js +12 -8
  34. package/dist/Editor/Elements/Grid/GridItem.js +31 -21
  35. package/dist/Editor/Elements/Link/LinkPopup.js +69 -13
  36. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  37. package/dist/Editor/Elements/NewLine/NewLineButton.js +2 -2
  38. package/dist/Editor/Elements/Signature/Signature.css +13 -6
  39. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +2 -1
  40. package/dist/Editor/Elements/Signature/SignaturePopup.js +186 -31
  41. package/dist/Editor/Elements/SimpleText/index.js +19 -7
  42. package/dist/Editor/Elements/SimpleText/style.js +44 -1
  43. package/dist/Editor/ErrorBoundary.js +30 -0
  44. package/dist/Editor/Styles/EditorStyles.js +28 -0
  45. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +1 -1
  46. package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -2
  47. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +33 -5
  48. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +12 -13
  49. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +12 -13
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +3 -0
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +59 -0
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  53. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +107 -40
  54. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +57 -61
  55. package/dist/Editor/Toolbar/PopupTool/index.js +13 -3
  56. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  57. package/dist/Editor/Toolbar/toolbarGroups.js +15 -5
  58. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  59. package/dist/Editor/common/EditorCmds.js +0 -3
  60. package/dist/Editor/common/EditorIcons.js +7 -7
  61. package/dist/Editor/common/Icon.js +39 -30
  62. package/dist/Editor/common/ImageList.js +16 -3
  63. package/dist/Editor/common/ImageSelector/ImageSelector.js +30 -9
  64. package/dist/Editor/common/ImageSelector/Styles.js +2 -1
  65. package/dist/Editor/common/LinkSettings/index.js +2 -1
  66. package/dist/Editor/common/LinkSettings/style.js +11 -8
  67. package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
  68. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  69. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +142 -0
  70. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  71. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  72. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  73. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  74. package/dist/Editor/common/RnD/DragOver/index.js +55 -0
  75. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  76. package/dist/Editor/common/RnD/ElementOptions/Actions.js +102 -0
  77. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  78. package/dist/Editor/common/RnD/ElementOptions/index.js +95 -0
  79. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  80. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  81. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +36 -0
  82. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +60 -0
  83. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +9 -0
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +47 -0
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +47 -0
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +47 -0
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +48 -0
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +47 -0
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +47 -0
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +17 -0
  92. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  93. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +18 -0
  94. package/dist/Editor/common/RnD/ElementSettings/styles.js +94 -0
  95. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  96. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  97. package/dist/Editor/common/RnD/GuideLines/styles.js +62 -0
  98. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  99. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  100. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  101. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  102. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  103. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  104. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  105. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  106. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  107. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +20 -0
  108. package/dist/Editor/common/RnD/TransformHandles/index.js +67 -0
  109. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  110. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  111. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  112. package/dist/Editor/common/RnD/Utils/gridDropItem.js +181 -0
  113. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  114. package/dist/Editor/common/RnD/VirtualElement/index.js +77 -0
  115. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  116. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  117. package/dist/Editor/common/RnD/index.js +567 -0
  118. package/dist/Editor/common/RnD/styles.js +4 -0
  119. package/dist/Editor/common/Section/index.js +21 -12
  120. package/dist/Editor/common/Section/styles.js +7 -4
  121. package/dist/Editor/common/Shorthands/elements.js +21 -9
  122. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +18 -10
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +18 -5
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  126. package/dist/Editor/common/StyleBuilder/index.js +6 -4
  127. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  128. package/dist/Editor/common/iconListV2.js +843 -0
  129. package/dist/Editor/commonStyle.js +6 -0
  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 +50 -1
  135. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  136. package/dist/Editor/hooks/useMouseMove.js +36 -8
  137. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  138. package/dist/Editor/hooks/withCommon.js +2 -1
  139. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  140. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +197 -0
  141. package/dist/Editor/utils/SlateUtilityFunctions.js +36 -4
  142. package/dist/Editor/utils/events.js +5 -0
  143. package/dist/Editor/utils/form.js +7 -2
  144. package/dist/Editor/utils/formfield.js +1 -1
  145. package/dist/Editor/utils/freegrid.js +91 -0
  146. package/dist/Editor/utils/helper.js +43 -0
  147. package/dist/Editor/utils/insertAppHeader.js +47 -40
  148. package/package.json +6 -2
@@ -99,6 +99,12 @@ const useCommonStyle = theme => ({
99
99
  }
100
100
  }
101
101
  },
102
+ popupTitle2: {
103
+ fontWeight: "600 !important",
104
+ fontSize: "20px",
105
+ display: "flex",
106
+ alignItems: "center"
107
+ },
102
108
  textOptions: {
103
109
  "& .MuiPopover-root": {
104
110
  backgroundColor: theme?.palette?.editor?.background
@@ -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 () {
@@ -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`;
@@ -97,4 +103,47 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
97
103
  } catch (err) {
98
104
  console.log(err);
99
105
  }
106
+ };
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
+ };
100
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;
@@ -22,16 +22,36 @@ export const EditorProvider = ({
22
22
  theme,
23
23
  children
24
24
  }) => {
25
- const [event] = useMouseMove();
26
25
  const [previous, setPrevious] = useState("");
27
26
  const [drop, setDrop] = useState(0);
28
27
  const [selectedPath, setSelectedPath] = useState(null);
28
+ const [selectedElement, setSelectedElement] = useState({});
29
+ const [dragging, setDragging] = useState({});
30
+ const [event] = useMouseMove(dragging);
29
31
  const path = event?.target?.getAttribute("data-path");
30
32
  const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
31
33
  const [openAI, setOpenAI] = useState("");
34
+ const [contextMenu, setContextMenu] = useState({
35
+ path: null
36
+ });
37
+ useEffect(() => {
38
+ window.updateSelectedItem = d => {
39
+ setSelectedElement(d);
40
+ };
41
+ }, []);
32
42
  const onDrop = () => {
33
43
  setDrop(drop + 1);
34
44
  };
45
+ const isSelectedElement = (path, type) => {
46
+ const cu_path = path.split("|");
47
+ const se_path = selectedElement?.path?.split("|");
48
+ const isParentSelected = se_path?.slice(0, cu_path.length).join("|") === path && type === "parent";
49
+ // check if child or parent is selected
50
+ if (selectedElement?.path === path || isParentSelected) {
51
+ return selectedElement;
52
+ }
53
+ return {};
54
+ };
35
55
  const value = useMemo(() => {
36
56
  if (path) {
37
57
  setPrevious(path);
@@ -52,8 +72,15 @@ export const EditorProvider = ({
52
72
  theme: theme,
53
73
  selectedPath: selectedPath,
54
74
  setSelectedPath: setSelectedPath,
75
+ selectedElement: selectedElement,
76
+ setSelectedElement: setSelectedElement,
77
+ isSelectedElement: isSelectedElement,
78
+ setDragging: setDragging,
79
+ dragging: dragging,
55
80
  popupType,
56
81
  setPopupType,
82
+ setContextMenu,
83
+ contextMenu,
57
84
  openAI,
58
85
  setOpenAI
59
86
  },
@@ -63,7 +90,7 @@ export const EditorProvider = ({
63
90
  export const useEditorContext = () => {
64
91
  return useContext(EditorContext);
65
92
  };
66
- const useMouseMove = () => {
93
+ const useMouseMove = dragging => {
67
94
  const [event, setEvent] = useState({
68
95
  target: null
69
96
  });
@@ -74,12 +101,13 @@ const useMouseMove = () => {
74
101
  };
75
102
  }, []);
76
103
  const onMouseMove = e => {
77
- const dpath = e?.target?.closest(".dpath");
78
- if (dpath) {
79
- console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
80
- setEvent({
81
- target: dpath
82
- });
104
+ if (!dragging?.id) {
105
+ const dpath = e?.target?.closest(".dpath");
106
+ if (dpath) {
107
+ setEvent({
108
+ target: dpath
109
+ });
110
+ }
83
111
  }
84
112
  };
85
113
  const debounceMouseMove = debounce(onMouseMove, 100);
@@ -4,9 +4,19 @@ const useWindowMessage = props => {
4
4
  type
5
5
  } = props;
6
6
  const [message, setMessage] = useState(null);
7
+ const sendMessage = action => {
8
+ if (window.parent) {
9
+ window.parent.postMessage({
10
+ ...action
11
+ }, "*");
12
+ }
13
+ };
7
14
  useEffect(() => {
8
15
  if (window.addEventListener) {
9
16
  window.addEventListener("message", onMessage, false);
17
+ sendMessage({
18
+ isLoaded: true
19
+ });
10
20
  } else {
11
21
  window.attachEvent("onmessage", onMessage);
12
22
  }
@@ -23,13 +33,6 @@ const useWindowMessage = props => {
23
33
  setMessage(e?.data[type]);
24
34
  }
25
35
  };
26
- const sendMessage = action => {
27
- if (window.parent) {
28
- window.parent.postMessage({
29
- ...action
30
- }, "*");
31
- }
32
- };
33
36
  return [message, sendMessage];
34
37
  };
35
38
  export default useWindowMessage;
@@ -7,8 +7,9 @@ import withEquation from "../plugins/withEquation";
7
7
  import withMentions from "../plugins/withMentions";
8
8
  import withLayout from "../plugins/withLayout";
9
9
  import withHtml from "../plugins/withHTML";
10
+ import withErrorHandling from "./withErrorHandling";
10
11
  import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
11
12
  const withCommon = (props, rest = {}) => {
12
- return rest.needLayout ? withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props)))))))))) : withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props)))))))));
13
+ return rest.needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
13
14
  };
14
15
  export default withCommon;
@@ -0,0 +1,14 @@
1
+ const withErrorHandling = editor => {
2
+ const {
3
+ apply
4
+ } = editor;
5
+ editor.apply = operation => {
6
+ try {
7
+ apply(operation);
8
+ } catch (error) {
9
+ console.error("Error applying Slate operation:", error);
10
+ }
11
+ };
12
+ return editor;
13
+ };
14
+ export default withErrorHandling;
@@ -0,0 +1,197 @@
1
+ import { Editor, Transforms, Node, Path } from "slate";
2
+ import { isSelectionInNodeType, getCaretPosition, onPasteRnDNode, bringItemToFB } from "../../helper";
3
+ import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
4
+ const RND_ITEM_TYPES = ["freegrid", "freegridItem", "freegridBox"];
5
+ const parsePath = path => path?.split("|").map(m => parseInt(m));
6
+ const selectAll = (event, {
7
+ editor
8
+ }) => {
9
+ try {
10
+ const {
11
+ selected,
12
+ match
13
+ } = isSelectionInNodeType(editor, "freegridItem");
14
+ const sel = getCaretPosition(editor);
15
+
16
+ // if not selection prevent the events
17
+ if (!sel) {
18
+ event.preventDefault();
19
+ return;
20
+ }
21
+
22
+ // only prevent default for freegrid item
23
+ if (selected) {
24
+ event.preventDefault();
25
+ const [item, path] = match;
26
+ switch (item?.childType) {
27
+ case "text":
28
+ const range = Editor.range(editor, path);
29
+ Transforms.select(editor, range);
30
+ break;
31
+ default:
32
+ return null;
33
+ }
34
+ }
35
+ } catch (err) {
36
+ console.log(err);
37
+ }
38
+ };
39
+ const onCopy = async (event, {
40
+ editor
41
+ }) => {
42
+ try {
43
+ const {
44
+ path,
45
+ enable
46
+ } = window?.selectedRnDElement || {};
47
+ // only copy RnD items in Srag enable mode not in edit mode
48
+ if (path && enable === 1) {
49
+ let pPath = parsePath(path);
50
+ let node = Node.get(editor, pPath);
51
+ const isRnD = RND_ITEM_TYPES.indexOf(node?.type) > -1;
52
+ if (isRnD) {
53
+ event.preventDefault();
54
+ if (node?.type === "freegrid") {
55
+ node = Node.get(editor, Path.parent(pPath));
56
+ }
57
+ const jsonFragment = JSON.stringify(node);
58
+ window.copiedNode = jsonFragment;
59
+ }
60
+ }
61
+ } catch (err) {
62
+ console.log(err);
63
+ }
64
+ };
65
+ const onCut = (event, {
66
+ editor
67
+ }) => {
68
+ try {
69
+ const {
70
+ path,
71
+ enable
72
+ } = window?.selectedRnDElement || {};
73
+ onCopy(event, {
74
+ editor
75
+ });
76
+ // remove the node
77
+ if (path && enable === 1) {
78
+ const pPath = parsePath(path);
79
+ Transforms.removeNodes(editor, {
80
+ at: pPath
81
+ });
82
+ // change / remove the focus to parent
83
+ const currentSelectedNode = Node.get(editor, pPath);
84
+ const sPath = currentSelectedNode?.type !== "freegrid" ? Path.parent(pPath) : pPath;
85
+ focusOnNewItem(editor, sPath, {
86
+ setSelectedElement: window.updateSelectedItem
87
+ });
88
+ }
89
+ } catch (err) {
90
+ console.log(err);
91
+ }
92
+ };
93
+ const onPaste = async (event, {
94
+ editor
95
+ }) => {
96
+ try {
97
+ const {
98
+ path,
99
+ enable
100
+ } = window?.selectedRnDElement || {};
101
+ if (path && enable === 1) {
102
+ event.preventDefault();
103
+ const pPath = parsePath(path);
104
+ const currentSelectedNode = Node.get(editor, pPath);
105
+ let sPath = currentSelectedNode?.type !== "freegrid" ? Path.parent(pPath) : pPath;
106
+ const sectionNode = Node.get(editor, sPath);
107
+ const np = onPasteRnDNode(editor, {
108
+ path: sPath,
109
+ children: sectionNode?.children,
110
+ slateNodes: null
111
+ });
112
+ if (np && window.updateSelectedItem) {
113
+ focusOnNewItem(editor, np, {
114
+ setSelectedElement: window.updateSelectedItem
115
+ });
116
+ }
117
+ }
118
+ } catch (err) {
119
+ console.log(err);
120
+ }
121
+ };
122
+ const onBringFront = (event, {
123
+ editor
124
+ }) => {
125
+ try {
126
+ const {
127
+ path,
128
+ enable
129
+ } = window?.selectedRnDElement || {};
130
+ if (path && enable === 1) {
131
+ event.preventDefault();
132
+ bringItemToFB(editor, {
133
+ path: parsePath(path),
134
+ moveFront: true
135
+ });
136
+ }
137
+ } catch (err) {
138
+ console.log(err);
139
+ }
140
+ };
141
+ const onBringBack = (event, {
142
+ editor
143
+ }) => {
144
+ try {
145
+ const {
146
+ path,
147
+ enable
148
+ } = window?.selectedRnDElement || {};
149
+ if (path && enable === 1) {
150
+ event.preventDefault();
151
+ bringItemToFB(editor, {
152
+ path: parsePath(path),
153
+ moveFront: false
154
+ });
155
+ }
156
+ } catch (err) {
157
+ console.log(err);
158
+ }
159
+ };
160
+ export const onInsertFragment = async ({
161
+ editor,
162
+ slateNodes
163
+ }) => {
164
+ try {
165
+ const {
166
+ path,
167
+ enable
168
+ } = window?.selectedRnDElement || {};
169
+ if (path && enable === 1) {
170
+ const pPath = parsePath(path);
171
+ const currentSelectedNode = Node.get(editor, pPath);
172
+ let sPath = currentSelectedNode?.type !== "freegrid" ? Path.parent(pPath) : pPath;
173
+ const sectionNode = Node.get(editor, sPath);
174
+ const np = onPasteRnDNode(editor, {
175
+ path: sPath,
176
+ children: sectionNode?.children,
177
+ slateNodes: slateNodes
178
+ });
179
+ if (np && window.updateSelectedItem) {
180
+ focusOnNewItem(editor, np, {
181
+ setSelectedElement: window.updateSelectedItem
182
+ });
183
+ }
184
+ }
185
+ } catch (err) {
186
+ console.log(err);
187
+ }
188
+ };
189
+ const RnDCtrlCmds = {
190
+ ArrowUp: onBringFront,
191
+ ArrowDown: onBringBack,
192
+ a: selectAll,
193
+ c: onCopy,
194
+ v: onPaste,
195
+ x: onCut
196
+ };
197
+ export default RnDCtrlCmds;