@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,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 () {
@@ -1,6 +1,4 @@
1
- import { ReactEditor } from "slate-react";
2
- import { fontFamilyMap, sizeMap } from "../utils/font";
3
- import { Editor, Node } from "slate";
1
+ import { sizeMap } from "../utils/font";
4
2
  export const breakpoints = {
5
3
  small: 0,
6
4
  mobile: 600,
@@ -8,6 +6,12 @@ export const breakpoints = {
8
6
  };
9
7
  export const BREAKPOINTS_DEVICES = ["xs", "sm", "md", "lg"];
10
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
+ }
11
15
  if (width > 0 && width < breakpoints.mobile) {
12
16
  return "xs";
13
17
  } else {
@@ -29,7 +33,7 @@ const overrideValues = (value, ot) => {
29
33
  return Object.keys(value).reduce((a, b) => {
30
34
  return {
31
35
  ...a,
32
- [b]: overrides[ot] ? overrides[ot](value[b], value) : value
36
+ [b]: overrides[ot] ? overrides[ot](value[b]) : value
33
37
  };
34
38
  }, {});
35
39
  };
@@ -44,17 +48,9 @@ const overrides = {
44
48
  return `${val?.widthInPercent || 100}%`;
45
49
  },
46
50
  overrideReSizeH: val => {
47
- return `${val?.height}px`;
51
+ return val ? `${val?.height}px` : "auto";
48
52
  },
49
- overrideBorderRadius: (val, breakpointValues) => {
50
- if (!val?.topLeft) {
51
- Object.values(breakpointValues || {}).forEach(v => {
52
- if (v) {
53
- // Applying the values from breakpoints that exist to those that do not have
54
- val = v;
55
- }
56
- });
57
- }
53
+ overrideBorderRadius: val => {
58
54
  return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
59
55
  }
60
56
  };
@@ -108,179 +104,46 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
108
104
  console.log(err);
109
105
  }
110
106
  };
111
- export function getElementStyle(editor, element, stylePropertyName) {
112
- try {
113
- const path = ReactEditor.findPath(editor, element);
114
- if (path?.length) {
115
- const currentEle = Node.get(editor, path);
116
- const dom = ReactEditor.toDOMNode(editor, currentEle);
117
- const editorBtn = dom?.querySelector("button.theme-element");
118
- const elementStyle = window.getComputedStyle(editorBtn);
119
- const style = elementStyle[stylePropertyName];
120
- if (stylePropertyName === "fontFamily") {
121
- const val = Object.entries(fontFamilyMap).find(([key, value]) => value === style)?.[0];
122
- return val;
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";
123
127
  }
124
- return style;
125
- }
126
- } catch (err) {
127
- // console.log(err);
128
- }
129
- }
130
- export function getTextSizeVal(editor) {
131
- try {
132
- const currentNode = Node.get(editor, editor.selection.anchor.path);
133
- const currentElement = ReactEditor.toDOMNode(editor, currentNode);
134
- if (currentElement) {
135
- const element = document.querySelector('span[data-slate-string="true"]');
136
- const computedStyle = window.getComputedStyle(element);
137
- return computedStyle.getPropertyValue("font-size") || "";
128
+ } else {
129
+ a[b] = styleProps[b];
138
130
  }
139
- } catch (err) {
140
- // console.log(err);
141
- }
142
- }
143
- export function getVariableValue(val) {
144
- const bodyElement = document.body;
145
- const computedStyle = getComputedStyle(bodyElement);
146
- const [, variableName] = val?.match(/var\((--[^)]+)\)/) || [];
147
- const varValue = computedStyle.getPropertyValue(variableName).trim();
148
- return varValue;
149
- }
150
- export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic"
151
- // "underline",
152
- // "strikethrough",
153
- ];
154
-
155
- const themeElements = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
156
- export const isTextCustomized = editor => {
157
- try {
158
- if (editor.selection) {
159
- const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
160
- if (!currentElement) {
161
- return false;
162
- }
163
- const {
164
- children,
165
- type
166
- } = currentElement;
167
- if (!themeElements.includes(type)) {
168
- return false;
169
- }
170
- if (children?.length > 1) {
171
- return true;
172
- }
173
- const customized = textThemeFields.some(field => {
174
- const element = children[0] || {};
175
- const value = element[field];
176
- if (field === "fontSize") {
177
- return Object.keys(value || {}).length;
178
- } else {
179
- return value;
180
- }
181
- });
182
- return customized;
131
+ return a;
132
+ }, {});
133
+ const groupedLG = tProps.reduce((a, b) => {
134
+ if (isObject(styleProps[b])) {
135
+ a[b] = styleProps[b]["lg"] || styleProps[b];
183
136
  } else {
184
- return null;
137
+ a[b] = styleProps[b];
185
138
  }
186
- } catch (err) {
187
- return null;
188
- }
189
- };
190
- const addToTheme = (field, value, element) => {
191
- switch (field) {
192
- case "fontFamily":
193
- return {
194
- fontFamily: fontFamilyMap[value]
195
- };
196
- case "fontSize":
197
- return {
198
- fontSize: value?.lg
199
- };
200
- case "color":
201
- return {
202
- color: value
203
- };
204
- case "bold":
205
- return {
206
- fontWeight: "bold"
207
- };
208
- case "italic":
209
- return {
210
- fontStyle: "italic"
211
- };
212
- // case "underline":
213
- // case "strikethrough":
214
- // let textDecoration = "";
215
-
216
- // if (element.underline) {
217
- // textDecoration = "underline";
218
- // }
219
-
220
- // if (element.strikethrough) {
221
- // textDecoration += " strikethrough";
222
- // }
223
-
224
- // return { textDecoration };
225
- default:
226
- return {};
227
- }
228
- };
229
- const MAP_TEXT_THEME_FIELD = {
230
- headingOne: "h1",
231
- headingTwo: "h2",
232
- headingThree: "h3",
233
- headingFour: "h4",
234
- headingFive: "h5",
235
- headingSix: "h6",
236
- paragraphOne: "para1",
237
- paragraphTwo: "para2",
238
- paragraphThree: "para3"
239
- };
240
- export const saveToTheme = editor => {
241
- try {
242
- if (editor.selection) {
243
- const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
244
- if (!currentElement) {
245
- return false;
246
- }
247
- const {
248
- children
249
- } = currentElement;
250
- if (children?.length > 1) {
251
- return true;
252
- }
253
- let theme = {};
254
- textThemeFields.forEach(field => {
255
- const element = children[0] || {};
256
- const value = element[field];
257
- let style = {};
258
- let isValueExist = false;
259
- if (value) {
260
- isValueExist = true;
261
- if (field === "fontSize") {
262
- isValueExist = !!Object.keys(value).length;
263
- }
264
- }
265
- if (isValueExist) {
266
- style = addToTheme(field, value, element);
267
- }
268
- theme = {
269
- ...theme,
270
- ...style
271
- };
272
- });
273
- textThemeFields.forEach(field => {
274
- Editor.removeMark(editor, field);
275
- });
276
- return {
277
- field: MAP_TEXT_THEME_FIELD[currentElement?.type],
278
- theme
279
- };
139
+ return a;
140
+ }, {});
141
+ return {
142
+ [theme.breakpoints.up("lg")]: {
143
+ ...groupedLG
144
+ },
145
+ [theme.breakpoints.between("xs", "md")]: {
146
+ ...groupedXS
280
147
  }
281
- } catch (err) {
282
- return;
283
- }
284
- };
285
- export const HEADING_THEME_FIELDS = ["h1", "h2", "h3", "h4", "h5", "h6"];
286
- export const PARAGRAPH_THEME_FIELDS = ["para1", "para2", "para3"];
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;
@@ -22,17 +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("");
32
- const [selectedTheme, setSelectedTheme] = useState({});
34
+ const [contextMenu, setContextMenu] = useState({
35
+ path: null
36
+ });
37
+ useEffect(() => {
38
+ window.updateSelectedItem = d => {
39
+ setSelectedElement(d);
40
+ };
41
+ }, []);
33
42
  const onDrop = () => {
34
43
  setDrop(drop + 1);
35
44
  };
45
+ const isSelectedElement = path => {
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;
49
+ // check if child or parent is selected
50
+ if (selectedElement?.path === path || isParentSelected) {
51
+ return selectedElement;
52
+ }
53
+ return {};
54
+ };
36
55
  const value = useMemo(() => {
37
56
  if (path) {
38
57
  setPrevious(path);
@@ -53,12 +72,17 @@ export const EditorProvider = ({
53
72
  theme: theme,
54
73
  selectedPath: selectedPath,
55
74
  setSelectedPath: setSelectedPath,
75
+ selectedElement: selectedElement,
76
+ setSelectedElement: setSelectedElement,
77
+ isSelectedElement: isSelectedElement,
78
+ setDragging: setDragging,
79
+ dragging: dragging,
56
80
  popupType,
57
81
  setPopupType,
82
+ setContextMenu,
83
+ contextMenu,
58
84
  openAI,
59
- setOpenAI,
60
- selectedTheme,
61
- setSelectedTheme
85
+ setOpenAI
62
86
  },
63
87
  children: children
64
88
  });
@@ -66,7 +90,7 @@ export const EditorProvider = ({
66
90
  export const useEditorContext = () => {
67
91
  return useContext(EditorContext);
68
92
  };
69
- const useMouseMove = () => {
93
+ const useMouseMove = dragging => {
70
94
  const [event, setEvent] = useState({
71
95
  target: null
72
96
  });
@@ -77,12 +101,13 @@ const useMouseMove = () => {
77
101
  };
78
102
  }, []);
79
103
  const onMouseMove = e => {
80
- const dpath = e?.target?.closest(".dpath");
81
- if (dpath) {
82
- console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
83
- setEvent({
84
- target: dpath
85
- });
104
+ if (!dragging?.id) {
105
+ const dpath = e?.target?.closest(".dpath");
106
+ if (dpath) {
107
+ setEvent({
108
+ target: dpath
109
+ });
110
+ }
86
111
  }
87
112
  };
88
113
  const debounceMouseMove = debounce(onMouseMove, 100);
@@ -4,19 +4,9 @@ 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
- };
14
7
  useEffect(() => {
15
8
  if (window.addEventListener) {
16
9
  window.addEventListener("message", onMessage, false);
17
- sendMessage({
18
- isLoaded: true
19
- });
20
10
  } else {
21
11
  window.attachEvent("onmessage", onMessage);
22
12
  }
@@ -33,6 +23,13 @@ const useWindowMessage = props => {
33
23
  setMessage(e?.data[type]);
34
24
  }
35
25
  };
26
+ const sendMessage = action => {
27
+ if (window.parent) {
28
+ window.parent.postMessage({
29
+ ...action
30
+ }, "*");
31
+ }
32
+ };
36
33
  return [message, sendMessage];
37
34
  };
38
35
  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;
@@ -1,5 +1,5 @@
1
1
  import { Transforms, Path, Node } from "slate";
2
- const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
2
+ const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
3
3
  const withEmbeds = editor => {
4
4
  const {
5
5
  isVoid,
@@ -15,7 +15,7 @@ const loopChildren = (children = [], defaultInsert) => {
15
15
  }
16
16
  return defaultInsert;
17
17
  };
18
- export const getCurrentElement = editor => {
18
+ const getCurrentElement = editor => {
19
19
  try {
20
20
  if (editor.selection) {
21
21
  return Node.parent(editor, editor?.selection?.anchor?.path);
@@ -1,6 +1,6 @@
1
1
  import { Editor, Range, Point, Element, Transforms, Node } from "slate";
2
2
  import { TableUtil, createTableCell } from "../utils/table";
3
- const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item", "page-settings"];
3
+ const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
4
4
  const withTable = editor => {
5
5
  const {
6
6
  deleteBackward,