@flozy/editor 11.1.0 → 11.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/dist/Editor/ChatEditor.js +6 -6
  2. package/dist/Editor/CommonEditor.js +21 -82
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +4 -37
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  6. package/dist/Editor/Elements/Attachments/Attachments.js +11 -153
  7. package/dist/Editor/Elements/Attachments/AttachmentsButton.js +3 -8
  8. package/dist/Editor/Elements/Button/EditorButton.js +7 -22
  9. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  12. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +55 -134
  14. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +8 -7
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +3 -8
  16. package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +1 -1
  17. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +1 -1
  18. package/dist/Editor/Elements/Embed/Embed.css +0 -5
  19. package/dist/Editor/Elements/Embed/Embed.js +43 -37
  20. package/dist/Editor/Elements/Embed/Image.js +22 -242
  21. package/dist/Editor/Elements/Embed/Video.js +32 -277
  22. package/dist/Editor/Elements/Form/Form.js +35 -10
  23. package/dist/Editor/Elements/Form/FormField.js +1 -1
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/Form/Workflow/constant.js +1 -25
  26. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +75 -34
  27. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +5 -9
  28. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -3
  29. package/dist/Editor/Elements/FreeGrid/styles.js +0 -15
  30. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  31. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -2
  32. package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +3 -2
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +13 -2
  34. package/dist/Editor/Elements/SimpleText/index.js +1 -4
  35. package/dist/Editor/Elements/Table/Table.js +1 -2
  36. package/dist/Editor/Elements/Table/TableCell.js +3 -10
  37. package/dist/Editor/Elements/Title/title.js +5 -4
  38. package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -4
  39. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +3 -5
  40. package/dist/Editor/Styles/EditorStyles.js +5 -16
  41. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  42. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  43. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  44. package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -33
  45. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  46. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +1 -3
  47. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +23 -25
  48. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +5 -15
  50. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  51. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +7 -65
  52. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +12 -66
  53. package/dist/Editor/Toolbar/PopupTool/index.js +4 -6
  54. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  55. package/dist/Editor/common/ColorPickerButton.js +19 -38
  56. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  57. package/dist/Editor/common/FontLoader/FontLoader.js +0 -1
  58. package/dist/Editor/common/Icon.js +0 -28
  59. package/dist/Editor/common/ImageSelector/ImageSelector.js +7 -45
  60. package/dist/Editor/common/ImageSelector/Options/Upload.js +11 -26
  61. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  62. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  63. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  64. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  65. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  66. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  67. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -3
  68. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +7 -20
  69. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  70. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -2
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +7 -20
  72. package/dist/Editor/common/RnD/GuideLines/styles.js +1 -1
  73. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  74. package/dist/Editor/common/RnD/Utils/gridDropItem.js +11 -28
  75. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  76. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +63 -52
  77. package/dist/Editor/common/RnD/VirtualElement/helper.js +68 -248
  78. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -22
  79. package/dist/Editor/common/RnD/index.js +14 -61
  80. package/dist/Editor/common/Shorthands/elements.js +0 -54
  81. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  82. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  83. package/dist/Editor/common/StyleBuilder/fieldStyle.js +0 -1
  84. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -10
  85. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  86. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  87. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  88. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  89. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -2
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  91. package/dist/Editor/common/StyleBuilder/formStyle.js +13 -19
  92. package/dist/Editor/common/StyleBuilder/index.js +4 -8
  93. package/dist/Editor/common/Uploader.js +17 -118
  94. package/dist/Editor/common/iconslist.js +0 -21
  95. package/dist/Editor/commonStyle.js +3 -37
  96. package/dist/Editor/helper/index.js +1 -4
  97. package/dist/Editor/helper/theme.js +2 -203
  98. package/dist/Editor/hooks/useMouseMove.js +3 -12
  99. package/dist/Editor/hooks/useTable.js +1 -62
  100. package/dist/Editor/plugins/withEmbeds.js +1 -1
  101. package/dist/Editor/plugins/withHTML.js +3 -56
  102. package/dist/Editor/plugins/withTable.js +1 -1
  103. package/dist/Editor/service/fileupload.js +0 -70
  104. package/dist/Editor/theme/ThemeList.js +173 -50
  105. package/dist/Editor/utils/SlateUtilityFunctions.js +38 -162
  106. package/dist/Editor/utils/button.js +17 -1
  107. package/dist/Editor/utils/font.js +37 -40
  108. package/dist/Editor/utils/helper.js +3 -76
  109. package/dist/Editor/utils/insertAppHeader.js +4 -8
  110. package/package.json +1 -1
  111. package/dist/Editor/Elements/Attachments/AttachmentStyles.js +0 -16
  112. package/dist/Editor/Elements/FreeGrid/helper.js +0 -194
  113. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  114. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  115. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  116. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  117. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  118. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  119. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  120. package/dist/Editor/common/CustomSelect.js +0 -43
  121. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  122. package/dist/Editor/common/UploaderWithProgress.js +0 -183
  123. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  124. package/dist/Editor/hooks/useThemeValues.js +0 -63
  125. package/dist/Editor/theme/index.js +0 -149
  126. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  127. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  128. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  129. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  130. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  131. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  132. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  133. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  134. package/dist/Editor/themeSettings/icons.js +0 -60
  135. package/dist/Editor/themeSettings/index.js +0 -380
  136. package/dist/Editor/themeSettings/style.js +0 -299
  137. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  138. package/dist/Editor/themeSettingsAI/index.js +0 -355
  139. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  140. package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -1,9 +1,5 @@
1
1
  import { ROW_HEIGHT, calculateGridArea } from "../Utils/gridDropItem";
2
2
  import { Transforms, Editor } from "slate";
3
- import { getElementOffset } from "./VirtualTextElement";
4
- import { getNode } from "../../../utils/helper";
5
- import { findMaxYValue } from "../../../Elements/FreeGrid/helper";
6
- import { RND_ITEMS } from "../../../helper";
7
3
  const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
8
4
  return width <= 40 && itemStartRow === startRow;
9
5
  };
@@ -43,7 +39,7 @@ export const getGridArea = gridArea => {
43
39
  const getBoxToAutoAlign = (editor, sectionPath) => {
44
40
  const [boxData] = Editor.nodes(editor, {
45
41
  at: sectionPath,
46
- match: node => ["freegridBox", "freegrid"].includes(node.type) && node.autoAlign
42
+ match: node => node.type === "freegridBox" && node.autoAlign
47
43
  });
48
44
  return boxData || [];
49
45
  };
@@ -110,6 +106,39 @@ const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
110
106
  newlyAddedHeight
111
107
  };
112
108
  };
109
+ const alignNewElementInContainer = (editor, boxPath, containerItems) => {
110
+ let lastRow = 1;
111
+ const gridItems = [];
112
+ const nonGridItems = [];
113
+ containerItems.forEach((item, index) => {
114
+ if (item?.gridArea_xs) {
115
+ gridItems.push({
116
+ ...item,
117
+ itemIndex: index
118
+ });
119
+ } else {
120
+ nonGridItems.push({
121
+ ...item,
122
+ itemIndex: index
123
+ });
124
+ }
125
+ });
126
+ const {
127
+ lastRow: lastRowOccupied
128
+ } = handleGridItems(gridItems, lastRow);
129
+ lastRow = lastRowOccupied;
130
+ const {
131
+ lastRow: lastRowTaken,
132
+ containerHeight,
133
+ newlyAddedHeight
134
+ } = handleNonGridItems(nonGridItems, lastRow, editor, boxPath);
135
+ lastRow = lastRowTaken;
136
+ return {
137
+ lastRow,
138
+ containerHeight,
139
+ newlyAddedHeight
140
+ };
141
+ };
113
142
  const getAncestorFreeGridContainers = (editor, path) => {
114
143
  const containers = [...Editor.nodes(editor, {
115
144
  at: path,
@@ -122,37 +151,6 @@ const getAncestorFreeGridContainers = (editor, path) => {
122
151
  })].filter(([node, nodePath]) => nodePath.length <= path.length);
123
152
  return containers;
124
153
  };
125
- export const handleTextAlignment = (editor, textNode, heightDiff, updateBreakpoint) => {
126
- const [textEle, textPath] = textNode;
127
- let containers = getAncestorFreeGridContainers(editor, textPath);
128
- for (let i = containers.length - 1; i >= 0; i--) {
129
- const container = containers[i];
130
- const childContainer = containers[i + 1];
131
- if (!heightDiff) {
132
- break;
133
- }
134
-
135
- // get the data of elements to align inside container
136
- const alignElements = alignElementsInsideContainer(container, childContainer || textNode, heightDiff, updateBreakpoint);
137
- if (!childContainer) {
138
- const {
139
- height
140
- } = getNodeValues(textEle, updateBreakpoint);
141
- const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
142
-
143
- // update the height of the current text element, before updating the container
144
- Transforms.setNodes(editor, {
145
- [`height${appendBp}`]: height + heightDiff
146
- }, {
147
- at: textPath
148
- });
149
- }
150
- const containerHeightDiff = updateContainer(editor, alignElements, container, updateBreakpoint, heightDiff);
151
-
152
- // if container height incresed/decresed, need to auto align the parent container based on height differed
153
- heightDiff = containerHeightDiff;
154
- }
155
- };
156
154
  export const handleContainers = (editor, boxPath, extraHeight) => {
157
155
  const containers = getAncestorFreeGridContainers(editor, boxPath);
158
156
  let lastChildStartRow;
@@ -214,7 +212,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
214
212
  if (isChildEle) {
215
213
  return;
216
214
  }
217
- if (!RND_ITEMS.includes(gridItem.type)) {
215
+ if (gridItem.type === "paragraph") {
218
216
  return;
219
217
  }
220
218
  const {
@@ -237,196 +235,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
237
235
  }
238
236
  });
239
237
  };
240
- export const causeOverlap = (container, currElementPath, updateBreakpoint, newTopPosition, firstNextElement) => {
241
- const [containerNode, containerPath] = container;
242
- let isOverlapped = false;
243
- containerNode.children.forEach((item, index) => {
244
- if (!RND_ITEMS.includes(item.type)) {
245
- return;
246
- }
247
- const currPath = [...containerPath, index];
248
- if (currPath.toString() === currElementPath.toString()) {
249
- return;
250
- }
251
- const {
252
- top,
253
- bottom
254
- } = getElementOffset(item, updateBreakpoint);
255
- if (firstNextElement === top) {
256
- return;
257
- }
258
- if (newTopPosition > top && newTopPosition <= bottom) {
259
- isOverlapped = true;
260
- }
261
- });
262
- return isOverlapped;
263
- };
264
- export const alignElementsInsideContainer = (container, currentElement, heightDiff, updateBreakpoint) => {
265
- const [containerNode, containerPath] = container;
266
- const [currentElementNode, currElementPath] = currentElement || [];
267
- const {
268
- bottom: currElementBottom
269
- } = getElementOffset(currentElementNode, updateBreakpoint);
270
- const newCurrElementBottom = currElementBottom + heightDiff;
271
- const bufferSpace = 12;
272
- const nextElements = []; // Elements after the current element
273
- let firstNextElement = 0; // first element position which is after the current element
274
-
275
- const alignElements = {};
276
-
277
- // find the elements present after the current element
278
- containerNode.children.forEach((item, index) => {
279
- if (!RND_ITEMS.includes(item.type)) {
280
- return;
281
- }
282
- const currPath = [...containerPath, index];
283
- const {
284
- top: itemTop
285
- } = getElementOffset(item, updateBreakpoint);
286
- if (currPath.toString() === currElementPath.toString()) {
287
- return;
288
- }
289
- const bufferPosition = 15;
290
- if (itemTop + bufferPosition >= currElementBottom) {
291
- const element = {
292
- path: currPath,
293
- node: item
294
- };
295
- nextElements.push(element);
296
- firstNextElement = firstNextElement > 0 ? Math.min(firstNextElement, itemTop) : itemTop;
297
- }
298
- });
299
-
300
- // check whether the new height is overlapping the next element
301
- const isOverlapped = firstNextElement && newCurrElementBottom >= firstNextElement;
302
- let moveElements = isOverlapped || heightDiff < 0; // if heightDiff is negative, move elements up
303
-
304
- if (heightDiff < 0) {
305
- // does flex elements cause overlap
306
- const isCausingOverlap = causeOverlap(container, currElementPath, updateBreakpoint, firstNextElement + heightDiff, firstNextElement);
307
- moveElements = !isCausingOverlap;
308
- }
309
- if (moveElements) {
310
- const topPos = newCurrElementBottom - firstNextElement + bufferSpace; // position the element after the current element
311
- alignElements.topPos = heightDiff < 0 ? heightDiff : topPos;
312
- alignElements.nextElements = nextElements;
313
- alignElements.moveElements = moveElements;
314
- }
315
- return alignElements;
316
- };
317
- export const updateContainer = (editor, alignElements, container, updateBreakpoint, heightDiff) => {
318
- const [containerNode, containerPath] = container;
319
- const {
320
- moveElements,
321
- topPos,
322
- nextElements
323
- } = alignElements || {};
324
- const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
325
-
326
- // update the aligned data inside container
327
- if (moveElements && topPos !== 0) {
328
- nextElements.forEach(ele => {
329
- const {
330
- path,
331
- node
332
- } = ele;
333
- const {
334
- top
335
- } = getElementOffset(node, updateBreakpoint);
336
- const y = top + topPos;
337
-
338
- // Calculate grid position
339
- const row = Math.floor(y / ROW_HEIGHT) + 1;
340
-
341
- // to calculate difference inside the grid
342
- const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
343
-
344
- // Update grid area
345
- const gridArea = `${row} / 1 / ${row + 1} / 2`;
346
- Transforms.setNodes(editor, {
347
- [`gridArea${appendBp}`]: gridArea,
348
- [`marginTop${appendBp}`]: marginTop
349
- }, {
350
- at: path
351
- });
352
- });
353
- }
354
-
355
- // update the new height of the container
356
- const newContainerNode = getNode(editor, containerPath);
357
- const newHeight = findMaxYValue(newContainerNode?.children, updateBreakpoint) + 12;
358
- const {
359
- height: containerOldHeight
360
- } = getNodeValues(containerNode, updateBreakpoint);
361
- let currHeightDiff = newHeight - containerOldHeight;
362
- const noUpdate = currHeightDiff < 0 && heightDiff > 0; // if current text height is increased, but container height is getting reduced, we don't want to reduce the height of the container
363
- if (noUpdate) {
364
- currHeightDiff = 0;
365
- } else {
366
- Transforms.setNodes(editor, {
367
- [`height${appendBp}`]: newHeight + 12
368
- }, {
369
- at: containerPath
370
- });
371
- currHeightDiff += 12;
372
- }
373
- return currHeightDiff;
374
- };
375
- export const handleContainersAlignment = (editor, containers, heightDiff, bufferSpace = 0) => {
376
- for (let i = containers.length - 1; i >= 0; i--) {
377
- const container = containers[i];
378
- const childContainer = containers[i + 1];
379
- const [containerNode, containerPath] = container;
380
- const [childContainerNode, childContainerPath] = childContainer || [];
381
- if (childContainer) {
382
- const {
383
- bottom
384
- } = getElementOffset(childContainerNode);
385
- containerNode.children.forEach((item, index) => {
386
- const currPath = [...containerPath, index];
387
- if (currPath.toString() === childContainerPath.toString()) {
388
- return;
389
- }
390
- if (!RND_ITEMS.includes(item.type)) {
391
- return;
392
- }
393
- const {
394
- top: itemTop
395
- } = getElementOffset(item);
396
- if (itemTop >= bottom) {
397
- const {
398
- gridArea_xs,
399
- marginTop_xs
400
- } = item;
401
- const [startRow] = getGridArea(gridArea_xs);
402
- const y = (startRow - 1) * ROW_HEIGHT + marginTop_xs + heightDiff;
403
-
404
- // Calculate grid position
405
- const row = Math.floor(y / ROW_HEIGHT) + 1;
406
-
407
- // to calculate difference inside the grid
408
- const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
409
-
410
- // Update grid area
411
- const gridArea = `${row} / 1 / ${row + 1} / 2`;
412
- Transforms.setNodes(editor, {
413
- gridArea_xs: gridArea,
414
- marginTop_xs: marginTop + bufferSpace
415
- }, {
416
- at: currPath
417
- });
418
- }
419
- });
420
- }
421
- Transforms.setNodes(editor, {
422
- height_xs: containerNode?.height_xs + heightDiff + bufferSpace,
423
- xs_updatedOn: new Date().getTime()
424
- }, {
425
- at: containerPath
426
- });
427
- }
428
- };
429
- export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
238
+ export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
430
239
  const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
431
240
  Transforms.setNodes(editor, {
432
241
  autoAlign: false
@@ -436,11 +245,39 @@ export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
436
245
  if (!boxNode) {
437
246
  return;
438
247
  }
439
- if (heightDiff <= 0) {
440
- return;
248
+ const containerItems = boxNode?.children || [];
249
+ const {
250
+ containerHeight
251
+ } = alignNewElementInContainer(editor, boxPath, containerItems);
252
+ const bufferHeight = 12;
253
+ const newHeight = containerHeight + bufferHeight;
254
+ const {
255
+ height_xs
256
+ } = boxNode;
257
+ const oldHeight = Number(height_xs);
258
+ const extraHeight = newHeight - oldHeight;
259
+ if (extraHeight > 0) {
260
+ const containerData = handleContainers(editor, boxPath, extraHeight);
261
+ containerData.forEach(container => {
262
+ const {
263
+ moveRows,
264
+ containerNode,
265
+ containerPath,
266
+ newHeight,
267
+ childIndex,
268
+ lastChildStartRow
269
+ } = container;
270
+ if (moveRows) {
271
+ moveOverlappedItems(editor, moveRows, containerNode?.children, containerPath, childIndex, lastChildStartRow);
272
+ }
273
+ Transforms.setNodes(editor, {
274
+ height_xs: newHeight,
275
+ xs_updatedOn: new Date().getTime()
276
+ }, {
277
+ at: containerPath
278
+ });
279
+ });
441
280
  }
442
- let containers = getAncestorFreeGridContainers(editor, boxPath);
443
- handleContainersAlignment(editor, containers, heightDiff, 12);
444
281
  };
445
282
  export const getMarginTop = y => {
446
283
  const calcMargin = y % ROW_HEIGHT;
@@ -543,21 +380,4 @@ export const sortElements = (items, container) => {
543
380
  }
544
381
  }
545
382
  });
546
- };
547
- const nodeKeys = ["height", "width", "gridArea", "marginTop", "left"];
548
- export const getNodeValues = (node, breakpoint = "xs") => {
549
- // defaulty return xs breakpoint values, if breakpoint is not given
550
- const appendBp = breakpoint === "lg" ? "" : "_xs";
551
- const nodeVals = nodeKeys.reduce((a, b) => {
552
- const key = b + appendBp;
553
- a[b] = node[key];
554
- if (b === "height" && !a[b]) {
555
- a[b] = node.height;
556
- }
557
- return a;
558
- }, {});
559
- return {
560
- ...node,
561
- ...nodeVals
562
- };
563
383
  };
@@ -18,17 +18,6 @@ const useVirtualElementStyles = () => ({
18
18
  "& .editor-blocker": {
19
19
  display: "none"
20
20
  },
21
- "& .fgi_type_text": {
22
- "& .edt-headings": {
23
- margin: "0px"
24
- },
25
- "& .edt-paragraphs": {
26
- margin: "0px"
27
- },
28
- "& blockquote": {
29
- margin: "0px !important"
30
- }
31
- },
32
21
  "& .freegrid-item": {
33
22
  position: "relative !important",
34
23
  top: "0 !important",
@@ -108,17 +97,6 @@ export const useAutoAlignStyles = () => ({
108
97
  "&.type_text": {
109
98
  height: "auto !important"
110
99
  },
111
- "& .fgi_type_text": {
112
- "& .edt-headings": {
113
- margin: "0px"
114
- },
115
- "& .edt-paragraphs": {
116
- margin: "0px"
117
- },
118
- "& blockquote": {
119
- margin: "0px !important"
120
- }
121
- },
122
100
  // start - default signature classes on free-grid
123
101
  "& .fgi_type_signature": {
124
102
  height: "100%",
@@ -12,7 +12,7 @@ import GuideLines from "./GuideLines";
12
12
  import ShadowElement from "./ShadowElement";
13
13
  import BoundaryLine from "./GuideLines/BoundaryLine";
14
14
  import ContextMenu from "./ContextMenu";
15
- // import VirtualElement from "./VirtualElement";
15
+ import VirtualElement from "./VirtualElement";
16
16
  import { ItemTypes } from "./ElementSettings/settingsConstants";
17
17
  import { selectText } from "../../utils/helper";
18
18
  import { removeSign } from "./ElementSettings/OtherSettings";
@@ -20,7 +20,7 @@ import useDragging from "../../hooks/useDragging";
20
20
  import { dragOverOn } from "../../helper/RnD/focusNode";
21
21
  import { focusSelection, clearSelection, clearSelectionOnly } from "../../helper";
22
22
  // import { reRenderChildNodes } from "./Utils/gridDropItem";
23
- import VirtualTextElement, { updateTextHeight } from "./VirtualElement/VirtualTextElement";
23
+ import VirtualTextElement from "./VirtualElement/VirtualTextElement";
24
24
  import useAutoScroll from "../../hooks/useAutoScroll";
25
25
  import ForceAutoAlignment from "./VirtualElement/ForceAutoAlignment";
26
26
  import BoxHeaderAutoAlignment from "./VirtualElement/BoxHeaderAutoAlignment";
@@ -29,38 +29,6 @@ import { useFreeGrid } from "../../Elements/FreeGrid/FreeGrid";
29
29
  import { jsx as _jsx } from "react/jsx-runtime";
30
30
  import { jsxs as _jsxs } from "react/jsx-runtime";
31
31
  import { Fragment as _Fragment } from "react/jsx-runtime";
32
- function getTextElementHeight(textElement) {
33
- let totalHeight = 0;
34
- if (textElement) {
35
- const {
36
- childNodes
37
- } = textElement || {};
38
- for (let i = childNodes.length - 1; i >= 0; i--) {
39
- const el = childNodes[i];
40
- const text = el.textContent?.replace(/\n/g, "")?.trim();
41
- if (text || totalHeight) {
42
- // remove last empty spaces
43
- totalHeight += el.offsetHeight || el.getBoundingClientRect().height;
44
- }
45
- }
46
- }
47
- return totalHeight;
48
- }
49
- function textAutoAlign(editor, path, getCurrentEle, delta, breakpoint, onLoad) {
50
- const currElement = getCurrentEle();
51
- const textElement = currElement?.querySelector(".fgi_type_text");
52
- const clientHeight = getTextElementHeight(textElement);
53
- const {
54
- height
55
- } = delta || {};
56
- const heightDiff = Math.abs(clientHeight - height);
57
- const autoAlign = onLoad ? clientHeight > height : heightDiff >= 5;
58
- if (clientHeight && height && autoAlign) {
59
- updateTextHeight(editor, path, clientHeight, breakpoint);
60
- const parentSectionPath = path.slice(0, 2);
61
- reRenderChildNodes(editor, parentSectionPath);
62
- }
63
- }
64
32
  const ITEM_TYPES = ["child", "parent-container"];
65
33
  const EDIT_MODES = ["text", "form", "table"];
66
34
  const DISABLE_RESIZING = {
@@ -110,8 +78,7 @@ const RnD = props => {
110
78
  setAutoAlign,
111
79
  isBoxHeader,
112
80
  customProps,
113
- xsHidden,
114
- disableClick = false
81
+ xsHidden
115
82
  } = props;
116
83
  const {
117
84
  isSelectedElement,
@@ -165,8 +132,6 @@ const RnD = props => {
165
132
  const {
166
133
  translation
167
134
  } = customProps;
168
- const timerId = useRef(0);
169
- const isFirstRender = useRef(true);
170
135
  useEffect(() => {
171
136
  if (ITEM_TYPES.includes(type)) {
172
137
  if (enable === 1) {
@@ -176,19 +141,6 @@ const RnD = props => {
176
141
  setAbsPosition({});
177
142
  }
178
143
  }
179
- if (childType === "text" && !enable && !readOnly) {
180
- if (isFirstRender.current) {
181
- isFirstRender.current = false;
182
- timerId.current = setTimeout(() => {
183
- // auto align on load
184
- textAutoAlign(editor, path, getCurrentEle, delta, breakpoint, true);
185
- }, 200);
186
- } else {
187
- // auto align when the text is changed
188
- textAutoAlign(editor, path, getCurrentEle, delta, breakpoint);
189
- }
190
- }
191
- return () => clearTimeout(timerId?.current);
192
144
  }, [enable]);
193
145
  const getCurrentEle = () => {
194
146
  return positionRef.current?.resizableElement?.current;
@@ -548,9 +500,7 @@ const RnD = props => {
548
500
  ref
549
501
  }, ".freegrid-container-parent");
550
502
  const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
551
- if (formatParentPath) {
552
- reRenderChildNodes(editor, formatParentPath);
553
- }
503
+ reRenderChildNodes(editor, formatParentPath);
554
504
  };
555
505
  const onCloseSettings = () => {
556
506
  setSelectedElement({
@@ -681,10 +631,7 @@ const RnD = props => {
681
631
  "data-path": path,
682
632
  contentEditable: false,
683
633
  "data-dragoverid": str_path,
684
- "data-dragovertype": type,
685
- style: {
686
- pointerEvents: disableClick && "none"
687
- }
634
+ "data-dragovertype": type
688
635
  }) : null]
689
636
  }, eId), xsHidden && breakpoint === "xs" ? null : /*#__PURE__*/_jsxs(_Fragment, {
690
637
  children: [/*#__PURE__*/_jsx(ElementSettings, {
@@ -737,12 +684,18 @@ const RnD = props => {
737
684
  handleClose: handleClose,
738
685
  theme: theme,
739
686
  translation: translation
740
- }), childType === "text" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
687
+ }), type === "parent" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualElement, {
688
+ updated_at: updated_at,
689
+ path: str_path,
690
+ editor: editor,
691
+ sectionElement: sectionElement,
692
+ sectionCls: `.freegrid-section_${path.join("_")}`,
693
+ dataSets: dataSets
694
+ }) : null, childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
741
695
  editor: editor,
742
696
  dataSets: dataSets,
743
697
  getCurrentEle: getCurrentEle,
744
- path: path,
745
- breakpoint: breakpoint === "xs" ? "lg" : "xs" // auto-align for this passed breakpoint
698
+ path: path
746
699
  }) : null, type === "parent" && breakpoint === "xs" && !readOnly && autoAlign ? /*#__PURE__*/_jsx(ForceAutoAlignment, {
747
700
  updated_at: updated_at,
748
701
  path: str_path,
@@ -55,60 +55,6 @@ const ELEMENTS_LIST = [{
55
55
  icon: "headingThree"
56
56
  }),
57
57
  onInsert: editor => toggleBlock(editor, "headingThree", false)
58
- }, {
59
- name: "Heading 4",
60
- desc: "",
61
- group: "Text",
62
- type: "headingFour",
63
- icon: /*#__PURE__*/_jsx(Icon, {
64
- icon: "headingFour"
65
- }),
66
- onInsert: editor => toggleBlock(editor, "headingFour", false)
67
- }, {
68
- name: "Heading 5",
69
- desc: "",
70
- group: "Text",
71
- type: "headingFive",
72
- icon: /*#__PURE__*/_jsx(Icon, {
73
- icon: "headingFive"
74
- }),
75
- onInsert: editor => toggleBlock(editor, "headingFive", false)
76
- }, {
77
- name: "Heading 6",
78
- desc: "",
79
- group: "Text",
80
- type: "headingSix",
81
- icon: /*#__PURE__*/_jsx(Icon, {
82
- icon: "headingSix"
83
- }),
84
- onInsert: editor => toggleBlock(editor, "headingSix", false)
85
- }, {
86
- name: "Paragraph 1",
87
- desc: "",
88
- group: "Text",
89
- type: "paragraphOne",
90
- icon: /*#__PURE__*/_jsx(Icon, {
91
- icon: "paragraphOne"
92
- }),
93
- onInsert: editor => toggleBlock(editor, "paragraphOne", false)
94
- }, {
95
- name: "Paragraph 2",
96
- desc: "",
97
- group: "Text",
98
- type: "paragraphTwo",
99
- icon: /*#__PURE__*/_jsx(Icon, {
100
- icon: "paragraphTwo"
101
- }),
102
- onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
103
- }, {
104
- name: "Paragraph 3",
105
- desc: "",
106
- group: "Text",
107
- type: "paragraphThree",
108
- icon: /*#__PURE__*/_jsx(Icon, {
109
- icon: "paragraphThree"
110
- }),
111
- onInsert: editor => toggleBlock(editor, "paragraphThree", false)
112
58
  }, {
113
59
  name: "Quote",
114
60
  desc: "",
@@ -21,8 +21,7 @@ const buttonStyle = [{
21
21
  },
22
22
  children: option.text
23
23
  });
24
- },
25
- themeEnabled: true
24
+ }
26
25
  }, {
27
26
  label: "Font Size",
28
27
  key: "textSize",
@@ -46,8 +45,7 @@ const buttonStyle = [{
46
45
  }, {
47
46
  label: "Button Color",
48
47
  key: "bgColor",
49
- type: "color",
50
- themeEnabled: true
48
+ type: "color"
51
49
  }, {
52
50
  label: "Border Color",
53
51
  key: "borderColor",
@@ -6,10 +6,6 @@ const embedVideoStyle = [{
6
6
  label: "URL",
7
7
  key: "url",
8
8
  type: "text"
9
- }, {
10
- label: "File",
11
- key: "url",
12
- type: "backgroundImage"
13
9
  }]
14
10
  }, {
15
11
  tab: "Aspect Ratio",
@@ -47,7 +47,6 @@ const fieldStyle = [{
47
47
  label: "Border Style",
48
48
  key: "borderStyle",
49
49
  type: "textOptions",
50
- hideMetaDataOptions: true,
51
50
  options: [{
52
51
  text: "Solid",
53
52
  value: "solid"
@@ -11,9 +11,7 @@ const BackgroundImage = props => {
11
11
  value,
12
12
  data,
13
13
  customProps,
14
- onChange,
15
- elementProps,
16
- title
14
+ onChange
17
15
  } = props;
18
16
  const {
19
17
  translation
@@ -27,7 +25,6 @@ const BackgroundImage = props => {
27
25
  theme
28
26
  } = useEditorContext();
29
27
  const classes = UploadStyles(theme);
30
- const disableProgress = title === "Page Settings" || elementProps?.type === "freegridBox" || elementProps?.type === "freegrid";
31
28
  const onRemoveBG = () => {
32
29
  setBase64(null);
33
30
  onChange({
@@ -47,9 +44,6 @@ const BackgroundImage = props => {
47
44
  });
48
45
  handleClose();
49
46
  };
50
- const getTitle = () => {
51
- return elementProps?.type === "image" ? "Image" : elementProps?.type === "video" ? "Video" : null;
52
- };
53
47
  return /*#__PURE__*/_jsxs(Grid, {
54
48
  item: true,
55
49
  xs: 12,
@@ -106,9 +100,7 @@ const BackgroundImage = props => {
106
100
  open: open,
107
101
  onClose: handleClose,
108
102
  customProps: customProps,
109
- onSelectImage: onSelectImage,
110
- title: getTitle(),
111
- disableProgress: disableProgress
103
+ onSelectImage: onSelectImage
112
104
  })]
113
105
  });
114
106
  };