@flozy/editor 10.4.1 → 10.4.3
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.
- package/dist/Editor/ChatEditor.js +16 -17
- package/dist/Editor/CommonEditor.js +16 -131
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +8 -46
- package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
- package/dist/Editor/Elements/Accordion/Accordion.js +9 -46
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
- package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
- package/dist/Editor/Elements/Button/EditorButton.js +9 -27
- package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
- package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +28 -30
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +7 -9
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Form/Form.js +3 -3
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
- package/dist/Editor/Elements/Form/FormField.js +2 -3
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -35
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
- package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -1
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
- package/dist/Editor/Elements/Grid/Grid.js +2 -14
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/Signature/Signature.css +1 -2
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +1 -0
- package/dist/Editor/Elements/Table/Draggable.js +2 -6
- package/dist/Editor/Elements/Table/Styles.js +0 -7
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +5 -24
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
- package/dist/Editor/MiniEditor.js +1 -2
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +16 -41
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
- package/dist/Editor/common/Icon.js +0 -28
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +66 -45
- package/dist/Editor/common/LinkSettings/index.js +28 -14
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +244 -164
- package/dist/Editor/common/MentionsPopup/index.js +1 -4
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
- package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
- package/dist/Editor/common/RnD/Utils/index.js +1 -3
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
- package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
- package/dist/Editor/common/RnD/index.js +39 -68
- package/dist/Editor/common/Select/index.js +7 -44
- package/dist/Editor/common/Select/styles.js +2 -31
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
- package/dist/Editor/common/Uploader.js +0 -16
- package/dist/Editor/common/iconListV2.js +0 -76
- package/dist/Editor/common/iconslist.js +0 -21
- package/dist/Editor/commonStyle.js +61 -116
- package/dist/Editor/helper/index.js +1 -5
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +3 -9
- package/dist/Editor/hooks/useTable.js +4 -5
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -3
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +37 -161
- package/dist/Editor/utils/accordion.js +4 -14
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
- package/dist/Editor/utils/draftToSlate.js +2 -3
- package/dist/Editor/utils/events.js +6 -50
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/formfield.js +0 -1
- package/dist/Editor/utils/helper.js +26 -210
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +9 -2
- package/package.json +4 -4
- package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
- package/dist/Editor/assets/svg/BackIcon.js +0 -18
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
- package/dist/Editor/common/Checkbox/index.js +0 -46
- package/dist/Editor/common/Checkbox/styles.js +0 -45
- package/dist/Editor/common/CustomColorPicker/index.js +0 -130
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog2/index.js +0 -94
- package/dist/Editor/common/CustomDialog2/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -43
- package/dist/Editor/common/RadioGroup/index.js +0 -48
- package/dist/Editor/common/RadioGroup/styles.js +0 -29
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
- package/dist/Editor/helper/textIndeces.js +0 -58
- package/dist/Editor/hooks/useEditorTheme.js +0 -153
- package/dist/Editor/hooks/useThemeValues.js +0 -63
- package/dist/Editor/theme/index.js +0 -149
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
- package/dist/Editor/themeSettings/buttons/index.js +0 -300
- package/dist/Editor/themeSettings/buttons/style.js +0 -23
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
- package/dist/Editor/themeSettings/fonts/index.js +0 -240
- package/dist/Editor/themeSettings/fonts/style.js +0 -62
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -380
- package/dist/Editor/themeSettings/style.js +0 -299
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -355
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
- package/dist/Editor/themeSettingsAI/style.js +0 -332
- package/dist/Editor/utils/updateFormName.js +0 -22
@@ -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,83 +39,106 @@ export const getGridArea = gridArea => {
|
|
43
39
|
const getBoxToAutoAlign = (editor, sectionPath) => {
|
44
40
|
const [boxData] = Editor.nodes(editor, {
|
45
41
|
at: sectionPath,
|
46
|
-
match: node =>
|
42
|
+
match: node => node.type === "freegridBox" && node.autoAlign
|
47
43
|
});
|
48
44
|
return boxData || [];
|
49
45
|
};
|
46
|
+
const handleGridItems = (gridItems, lastRow) => {
|
47
|
+
// to find the previously occupied rows
|
48
|
+
gridItems.forEach(item => {
|
49
|
+
const {
|
50
|
+
gridArea_xs: gridArea,
|
51
|
+
marginTop_xs,
|
52
|
+
height_xs,
|
53
|
+
type
|
54
|
+
} = item;
|
55
|
+
if (type === "paragraph") {
|
56
|
+
// non-freegridItem,
|
57
|
+
// some "paragraph" node is defaulty coming inside in box's children
|
58
|
+
return;
|
59
|
+
}
|
60
|
+
const [startRow] = getGridArea(gridArea);
|
61
|
+
const marginTop = marginTop_xs ? Number(marginTop_xs) : 0;
|
62
|
+
const fullHeight = Number(height_xs) + marginTop;
|
63
|
+
const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
|
64
|
+
lastRow = Math.max(endRow, lastRow);
|
65
|
+
});
|
66
|
+
return {
|
67
|
+
lastRow
|
68
|
+
};
|
69
|
+
};
|
70
|
+
const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
|
71
|
+
let containerHeight = (lastRow - 1) * ROW_HEIGHT;
|
72
|
+
let newlyAddedHeight = 0;
|
50
73
|
|
51
|
-
//
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
//
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
// newlyAddedHeight,
|
120
|
-
// };
|
121
|
-
// };
|
122
|
-
|
74
|
+
//place it on the next rows that are available
|
75
|
+
nonGridItems.forEach((item, index) => {
|
76
|
+
const {
|
77
|
+
height_xs,
|
78
|
+
type,
|
79
|
+
itemIndex
|
80
|
+
} = item;
|
81
|
+
if (type === "paragraph") {
|
82
|
+
// non-freegridItem
|
83
|
+
return;
|
84
|
+
}
|
85
|
+
const startRow = lastRow || 1;
|
86
|
+
const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
|
87
|
+
let fullHeight = height_xs + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
|
88
|
+
const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
|
89
|
+
const newGridArea = `${startRow} / 1 / ${startRow + 1} / 2`;
|
90
|
+
const currentElementPath = [...boxPath, itemIndex];
|
91
|
+
Transforms.setNodes(editor, {
|
92
|
+
gridArea_xs: newGridArea,
|
93
|
+
marginTop_xs: 12,
|
94
|
+
left_xs: 12,
|
95
|
+
xs_updatedOn: new Date().getTime()
|
96
|
+
}, {
|
97
|
+
at: currentElementPath
|
98
|
+
});
|
99
|
+
lastRow = Math.max(endRow, lastRow);
|
100
|
+
containerHeight += fullHeight;
|
101
|
+
newlyAddedHeight += fullHeight;
|
102
|
+
});
|
103
|
+
return {
|
104
|
+
lastRow,
|
105
|
+
containerHeight,
|
106
|
+
newlyAddedHeight
|
107
|
+
};
|
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
|
+
};
|
123
142
|
const getAncestorFreeGridContainers = (editor, path) => {
|
124
143
|
const containers = [...Editor.nodes(editor, {
|
125
144
|
at: path,
|
@@ -132,37 +151,6 @@ const getAncestorFreeGridContainers = (editor, path) => {
|
|
132
151
|
})].filter(([node, nodePath]) => nodePath.length <= path.length);
|
133
152
|
return containers;
|
134
153
|
};
|
135
|
-
export const handleTextAlignment = (editor, textNode, heightDiff, updateBreakpoint) => {
|
136
|
-
const [textEle, textPath] = textNode;
|
137
|
-
let containers = getAncestorFreeGridContainers(editor, textPath);
|
138
|
-
for (let i = containers.length - 1; i >= 0; i--) {
|
139
|
-
const container = containers[i];
|
140
|
-
const childContainer = containers[i + 1];
|
141
|
-
if (!heightDiff) {
|
142
|
-
break;
|
143
|
-
}
|
144
|
-
|
145
|
-
// get the data of elements to align inside container
|
146
|
-
const alignElements = alignElementsInsideContainer(container, childContainer || textNode, heightDiff, updateBreakpoint);
|
147
|
-
if (!childContainer) {
|
148
|
-
const {
|
149
|
-
height
|
150
|
-
} = getNodeValues(textEle, updateBreakpoint);
|
151
|
-
const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
|
152
|
-
|
153
|
-
// update the height of the current text element, before updating the container
|
154
|
-
Transforms.setNodes(editor, {
|
155
|
-
[`height${appendBp}`]: height + heightDiff
|
156
|
-
}, {
|
157
|
-
at: textPath
|
158
|
-
});
|
159
|
-
}
|
160
|
-
const containerHeightDiff = updateContainer(editor, alignElements, container, updateBreakpoint, heightDiff);
|
161
|
-
|
162
|
-
// if container height incresed/decresed, need to auto align the parent container based on height differed
|
163
|
-
heightDiff = containerHeightDiff;
|
164
|
-
}
|
165
|
-
};
|
166
154
|
export const handleContainers = (editor, boxPath, extraHeight) => {
|
167
155
|
const containers = getAncestorFreeGridContainers(editor, boxPath);
|
168
156
|
let lastChildStartRow;
|
@@ -224,7 +212,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
|
|
224
212
|
if (isChildEle) {
|
225
213
|
return;
|
226
214
|
}
|
227
|
-
if (
|
215
|
+
if (gridItem.type === "paragraph") {
|
228
216
|
return;
|
229
217
|
}
|
230
218
|
const {
|
@@ -247,196 +235,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
|
|
247
235
|
}
|
248
236
|
});
|
249
237
|
};
|
250
|
-
export const
|
251
|
-
const [containerNode, containerPath] = container;
|
252
|
-
let isOverlapped = false;
|
253
|
-
containerNode.children.forEach((item, index) => {
|
254
|
-
if (!RND_ITEMS.includes(item.type)) {
|
255
|
-
return;
|
256
|
-
}
|
257
|
-
const currPath = [...containerPath, index];
|
258
|
-
if (currPath.toString() === currElementPath.toString()) {
|
259
|
-
return;
|
260
|
-
}
|
261
|
-
const {
|
262
|
-
top,
|
263
|
-
bottom
|
264
|
-
} = getElementOffset(item, updateBreakpoint);
|
265
|
-
if (firstNextElement === top) {
|
266
|
-
return;
|
267
|
-
}
|
268
|
-
if (newTopPosition > top && newTopPosition <= bottom) {
|
269
|
-
isOverlapped = true;
|
270
|
-
}
|
271
|
-
});
|
272
|
-
return isOverlapped;
|
273
|
-
};
|
274
|
-
export const alignElementsInsideContainer = (container, currentElement, heightDiff, updateBreakpoint) => {
|
275
|
-
const [containerNode, containerPath] = container;
|
276
|
-
const [currentElementNode, currElementPath] = currentElement || [];
|
277
|
-
const {
|
278
|
-
bottom: currElementBottom
|
279
|
-
} = getElementOffset(currentElementNode, updateBreakpoint);
|
280
|
-
const newCurrElementBottom = currElementBottom + heightDiff;
|
281
|
-
const bufferSpace = 12;
|
282
|
-
const nextElements = []; // Elements after the current element
|
283
|
-
let firstNextElement = 0; // first element position which is after the current element
|
284
|
-
|
285
|
-
const alignElements = {};
|
286
|
-
|
287
|
-
// find the elements present after the current element
|
288
|
-
containerNode.children.forEach((item, index) => {
|
289
|
-
if (!RND_ITEMS.includes(item.type)) {
|
290
|
-
return;
|
291
|
-
}
|
292
|
-
const currPath = [...containerPath, index];
|
293
|
-
const {
|
294
|
-
top: itemTop
|
295
|
-
} = getElementOffset(item, updateBreakpoint);
|
296
|
-
if (currPath.toString() === currElementPath.toString()) {
|
297
|
-
return;
|
298
|
-
}
|
299
|
-
const bufferPosition = 15;
|
300
|
-
if (itemTop + bufferPosition >= currElementBottom) {
|
301
|
-
const element = {
|
302
|
-
path: currPath,
|
303
|
-
node: item
|
304
|
-
};
|
305
|
-
nextElements.push(element);
|
306
|
-
firstNextElement = firstNextElement > 0 ? Math.min(firstNextElement, itemTop) : itemTop;
|
307
|
-
}
|
308
|
-
});
|
309
|
-
|
310
|
-
// check whether the new height is overlapping the next element
|
311
|
-
const isOverlapped = firstNextElement && newCurrElementBottom >= firstNextElement;
|
312
|
-
let moveElements = isOverlapped || heightDiff < 0; // if heightDiff is negative, move elements up
|
313
|
-
|
314
|
-
if (heightDiff < 0) {
|
315
|
-
// does flex elements cause overlap
|
316
|
-
const isCausingOverlap = causeOverlap(container, currElementPath, updateBreakpoint, firstNextElement + heightDiff, firstNextElement);
|
317
|
-
moveElements = !isCausingOverlap;
|
318
|
-
}
|
319
|
-
if (moveElements) {
|
320
|
-
const topPos = newCurrElementBottom - firstNextElement + bufferSpace; // position the element after the current element
|
321
|
-
alignElements.topPos = heightDiff < 0 ? heightDiff : topPos;
|
322
|
-
alignElements.nextElements = nextElements;
|
323
|
-
alignElements.moveElements = moveElements;
|
324
|
-
}
|
325
|
-
return alignElements;
|
326
|
-
};
|
327
|
-
export const updateContainer = (editor, alignElements, container, updateBreakpoint, heightDiff) => {
|
328
|
-
const [containerNode, containerPath] = container;
|
329
|
-
const {
|
330
|
-
moveElements,
|
331
|
-
topPos,
|
332
|
-
nextElements
|
333
|
-
} = alignElements || {};
|
334
|
-
const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
|
335
|
-
|
336
|
-
// update the aligned data inside container
|
337
|
-
if (moveElements && topPos !== 0) {
|
338
|
-
nextElements.forEach(ele => {
|
339
|
-
const {
|
340
|
-
path,
|
341
|
-
node
|
342
|
-
} = ele;
|
343
|
-
const {
|
344
|
-
top
|
345
|
-
} = getElementOffset(node, updateBreakpoint);
|
346
|
-
const y = top + topPos;
|
347
|
-
|
348
|
-
// Calculate grid position
|
349
|
-
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
350
|
-
|
351
|
-
// to calculate difference inside the grid
|
352
|
-
const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
|
353
|
-
|
354
|
-
// Update grid area
|
355
|
-
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
356
|
-
Transforms.setNodes(editor, {
|
357
|
-
[`gridArea${appendBp}`]: gridArea,
|
358
|
-
[`marginTop${appendBp}`]: marginTop
|
359
|
-
}, {
|
360
|
-
at: path
|
361
|
-
});
|
362
|
-
});
|
363
|
-
}
|
364
|
-
|
365
|
-
// update the new height of the container
|
366
|
-
const newContainerNode = getNode(editor, containerPath);
|
367
|
-
const newHeight = findMaxYValue(newContainerNode?.children, updateBreakpoint) + 12;
|
368
|
-
const {
|
369
|
-
height: containerOldHeight
|
370
|
-
} = getNodeValues(containerNode, updateBreakpoint);
|
371
|
-
let currHeightDiff = newHeight - containerOldHeight;
|
372
|
-
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
|
373
|
-
if (noUpdate) {
|
374
|
-
currHeightDiff = 0;
|
375
|
-
} else {
|
376
|
-
Transforms.setNodes(editor, {
|
377
|
-
[`height${appendBp}`]: newHeight + 12
|
378
|
-
}, {
|
379
|
-
at: containerPath
|
380
|
-
});
|
381
|
-
currHeightDiff += 12;
|
382
|
-
}
|
383
|
-
return currHeightDiff;
|
384
|
-
};
|
385
|
-
export const handleContainersAlignment = (editor, containers, heightDiff, bufferSpace = 0) => {
|
386
|
-
for (let i = containers.length - 1; i >= 0; i--) {
|
387
|
-
const container = containers[i];
|
388
|
-
const childContainer = containers[i + 1];
|
389
|
-
const [containerNode, containerPath] = container;
|
390
|
-
const [childContainerNode, childContainerPath] = childContainer || [];
|
391
|
-
if (childContainer) {
|
392
|
-
const {
|
393
|
-
bottom
|
394
|
-
} = getElementOffset(childContainerNode);
|
395
|
-
containerNode.children.forEach((item, index) => {
|
396
|
-
const currPath = [...containerPath, index];
|
397
|
-
if (currPath.toString() === childContainerPath.toString()) {
|
398
|
-
return;
|
399
|
-
}
|
400
|
-
if (!RND_ITEMS.includes(item.type)) {
|
401
|
-
return;
|
402
|
-
}
|
403
|
-
const {
|
404
|
-
top: itemTop
|
405
|
-
} = getElementOffset(item);
|
406
|
-
if (itemTop >= bottom) {
|
407
|
-
const {
|
408
|
-
gridArea_xs,
|
409
|
-
marginTop_xs
|
410
|
-
} = item;
|
411
|
-
const [startRow] = getGridArea(gridArea_xs);
|
412
|
-
const y = (startRow - 1) * ROW_HEIGHT + marginTop_xs + heightDiff;
|
413
|
-
|
414
|
-
// Calculate grid position
|
415
|
-
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
416
|
-
|
417
|
-
// to calculate difference inside the grid
|
418
|
-
const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
|
419
|
-
|
420
|
-
// Update grid area
|
421
|
-
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
422
|
-
Transforms.setNodes(editor, {
|
423
|
-
gridArea_xs: gridArea,
|
424
|
-
marginTop_xs: marginTop + bufferSpace
|
425
|
-
}, {
|
426
|
-
at: currPath
|
427
|
-
});
|
428
|
-
}
|
429
|
-
});
|
430
|
-
}
|
431
|
-
Transforms.setNodes(editor, {
|
432
|
-
height_xs: containerNode?.height_xs + heightDiff + bufferSpace,
|
433
|
-
xs_updatedOn: new Date().getTime()
|
434
|
-
}, {
|
435
|
-
at: containerPath
|
436
|
-
});
|
437
|
-
}
|
438
|
-
};
|
439
|
-
export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
|
238
|
+
export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
|
440
239
|
const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
|
441
240
|
Transforms.setNodes(editor, {
|
442
241
|
autoAlign: false
|
@@ -446,11 +245,39 @@ export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
|
|
446
245
|
if (!boxNode) {
|
447
246
|
return;
|
448
247
|
}
|
449
|
-
|
450
|
-
|
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
|
+
});
|
451
280
|
}
|
452
|
-
let containers = getAncestorFreeGridContainers(editor, boxPath);
|
453
|
-
handleContainersAlignment(editor, containers, heightDiff, 12);
|
454
281
|
};
|
455
282
|
export const getMarginTop = y => {
|
456
283
|
const calcMargin = y % ROW_HEIGHT;
|
@@ -468,7 +295,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
|
|
468
295
|
const itemsData = [];
|
469
296
|
const items = dom.querySelectorAll(domClass);
|
470
297
|
const nextItemPathLength = curPath?.split("|").length + 2;
|
471
|
-
|
298
|
+
let sectionHeight = 12;
|
472
299
|
for (let i = 0; i < items.length; i++) {
|
473
300
|
const itemRect = items[i]?.getBoundingClientRect();
|
474
301
|
if (items[i]?.classList.contains("type_box")) {
|
@@ -488,10 +315,9 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
|
|
488
315
|
gridArea: calculateGridArea(y)
|
489
316
|
}
|
490
317
|
});
|
491
|
-
|
318
|
+
sectionHeight += itemRect?.height;
|
492
319
|
}
|
493
320
|
}
|
494
|
-
|
495
321
|
if (dom?.classList.contains("type_box") && parentDom) {
|
496
322
|
const parentDomRect = parentDom?.getBoundingClientRect();
|
497
323
|
const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");
|
@@ -553,21 +379,4 @@ export const sortElements = (items, container) => {
|
|
553
379
|
}
|
554
380
|
}
|
555
381
|
});
|
556
|
-
};
|
557
|
-
const nodeKeys = ["height", "width", "gridArea", "marginTop", "left"];
|
558
|
-
export const getNodeValues = (node, breakpoint = "xs") => {
|
559
|
-
// defaulty return xs breakpoint values, if breakpoint is not given
|
560
|
-
const appendBp = breakpoint === "lg" ? "" : "_xs";
|
561
|
-
const nodeVals = nodeKeys.reduce((a, b) => {
|
562
|
-
const key = b + appendBp;
|
563
|
-
a[b] = node[key];
|
564
|
-
if (b === "height" && !a[b]) {
|
565
|
-
a[b] = node.height;
|
566
|
-
}
|
567
|
-
return a;
|
568
|
-
}, {});
|
569
|
-
return {
|
570
|
-
...node,
|
571
|
-
...nodeVals
|
572
|
-
};
|
573
382
|
};
|
@@ -18,14 +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
|
-
},
|
29
21
|
"& .freegrid-item": {
|
30
22
|
position: "relative !important",
|
31
23
|
top: "0 !important",
|
@@ -105,14 +97,6 @@ export const useAutoAlignStyles = () => ({
|
|
105
97
|
"&.type_text": {
|
106
98
|
height: "auto !important"
|
107
99
|
},
|
108
|
-
"& .fgi_type_text": {
|
109
|
-
"& .edt-headings": {
|
110
|
-
margin: "0px"
|
111
|
-
},
|
112
|
-
"& .edt-paragraphs": {
|
113
|
-
margin: "0px"
|
114
|
-
}
|
115
|
-
},
|
116
100
|
// start - default signature classes on free-grid
|
117
101
|
"& .fgi_type_signature": {
|
118
102
|
height: "100%",
|