@flozy/editor 10.2.9 → 10.3.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.
- package/dist/Editor/ChatEditor.js +16 -17
- package/dist/Editor/CommonEditor.js +14 -128
- 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 +7 -30
- 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 -1
- 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 +30 -31
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
- package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
- 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 +65 -45
- package/dist/Editor/common/LinkSettings/index.js +26 -13
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +244 -164
- 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 +131 -321
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
- package/dist/Editor/common/RnD/index.js +11 -25
- package/dist/Editor/common/Select/index.js +7 -44
- package/dist/Editor/common/Select/styles.js +2 -30
- 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 +0 -4
- 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 +36 -158
- 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/helper.js +30 -143
- 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 -113
- 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
@@ -1,8 +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
3
|
const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
|
7
4
|
return width <= 40 && itemStartRow === startRow;
|
8
5
|
};
|
@@ -42,83 +39,106 @@ export const getGridArea = gridArea => {
|
|
42
39
|
const getBoxToAutoAlign = (editor, sectionPath) => {
|
43
40
|
const [boxData] = Editor.nodes(editor, {
|
44
41
|
at: sectionPath,
|
45
|
-
match: node =>
|
42
|
+
match: node => node.type === "freegridBox" && node.autoAlign
|
46
43
|
});
|
47
44
|
return boxData || [];
|
48
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;
|
49
73
|
|
50
|
-
//
|
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
|
-
// newlyAddedHeight,
|
119
|
-
// };
|
120
|
-
// };
|
121
|
-
|
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
|
+
};
|
122
142
|
const getAncestorFreeGridContainers = (editor, path) => {
|
123
143
|
const containers = [...Editor.nodes(editor, {
|
124
144
|
at: path,
|
@@ -131,37 +151,6 @@ const getAncestorFreeGridContainers = (editor, path) => {
|
|
131
151
|
})].filter(([node, nodePath]) => nodePath.length <= path.length);
|
132
152
|
return containers;
|
133
153
|
};
|
134
|
-
export const handleTextAlignment = (editor, textNode, heightDiff, updateBreakpoint) => {
|
135
|
-
const [textEle, textPath] = textNode;
|
136
|
-
let containers = getAncestorFreeGridContainers(editor, textPath);
|
137
|
-
for (let i = containers.length - 1; i >= 0; i--) {
|
138
|
-
const container = containers[i];
|
139
|
-
const childContainer = containers[i + 1];
|
140
|
-
if (!heightDiff) {
|
141
|
-
break;
|
142
|
-
}
|
143
|
-
|
144
|
-
// get the data of elements to align inside container
|
145
|
-
const alignElements = alignElementsInsideContainer(container, childContainer || textNode, heightDiff, updateBreakpoint);
|
146
|
-
if (!childContainer) {
|
147
|
-
const {
|
148
|
-
height
|
149
|
-
} = getNodeValues(textEle, updateBreakpoint);
|
150
|
-
const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
|
151
|
-
|
152
|
-
// update the height of the current text element, before updating the container
|
153
|
-
Transforms.setNodes(editor, {
|
154
|
-
[`height${appendBp}`]: height + heightDiff
|
155
|
-
}, {
|
156
|
-
at: textPath
|
157
|
-
});
|
158
|
-
}
|
159
|
-
const containerHeightDiff = updateContainer(editor, alignElements, container, updateBreakpoint, heightDiff);
|
160
|
-
|
161
|
-
// if container height incresed/decresed, need to auto align the parent container based on height differed
|
162
|
-
heightDiff = containerHeightDiff;
|
163
|
-
}
|
164
|
-
};
|
165
154
|
export const handleContainers = (editor, boxPath, extraHeight) => {
|
166
155
|
const containers = getAncestorFreeGridContainers(editor, boxPath);
|
167
156
|
let lastChildStartRow;
|
@@ -224,7 +213,6 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
|
|
224
213
|
return;
|
225
214
|
}
|
226
215
|
if (gridItem.type === "paragraph") {
|
227
|
-
// some empty paragraph node is inserted default'ly inside box, to avoid that
|
228
216
|
return;
|
229
217
|
}
|
230
218
|
const {
|
@@ -247,195 +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 (item.type === "paragraph") {
|
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 (item.type === "paragraph") {
|
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
|
-
}
|
382
|
-
return currHeightDiff;
|
383
|
-
};
|
384
|
-
export const handleContainersAlignment = (editor, containers, heightDiff, bufferSpace = 0) => {
|
385
|
-
for (let i = containers.length - 1; i >= 0; i--) {
|
386
|
-
const container = containers[i];
|
387
|
-
const childContainer = containers[i + 1];
|
388
|
-
const [containerNode, containerPath] = container;
|
389
|
-
const [childContainerNode, childContainerPath] = childContainer || [];
|
390
|
-
if (childContainer) {
|
391
|
-
const {
|
392
|
-
bottom
|
393
|
-
} = getElementOffset(childContainerNode);
|
394
|
-
containerNode.children.forEach((item, index) => {
|
395
|
-
const currPath = [...containerPath, index];
|
396
|
-
if (currPath.toString() === childContainerPath.toString()) {
|
397
|
-
return;
|
398
|
-
}
|
399
|
-
if (item.type === "paragraph") {
|
400
|
-
return;
|
401
|
-
}
|
402
|
-
const {
|
403
|
-
top: itemTop
|
404
|
-
} = getElementOffset(item);
|
405
|
-
if (itemTop >= bottom) {
|
406
|
-
const {
|
407
|
-
gridArea_xs,
|
408
|
-
marginTop_xs
|
409
|
-
} = item;
|
410
|
-
const [startRow] = getGridArea(gridArea_xs);
|
411
|
-
const y = (startRow - 1) * ROW_HEIGHT + marginTop_xs + heightDiff;
|
412
|
-
|
413
|
-
// Calculate grid position
|
414
|
-
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
415
|
-
|
416
|
-
// to calculate difference inside the grid
|
417
|
-
const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
|
418
|
-
|
419
|
-
// Update grid area
|
420
|
-
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
421
|
-
Transforms.setNodes(editor, {
|
422
|
-
gridArea_xs: gridArea,
|
423
|
-
marginTop_xs: marginTop + bufferSpace
|
424
|
-
}, {
|
425
|
-
at: currPath
|
426
|
-
});
|
427
|
-
}
|
428
|
-
});
|
429
|
-
}
|
430
|
-
Transforms.setNodes(editor, {
|
431
|
-
height_xs: containerNode?.height_xs + heightDiff + bufferSpace,
|
432
|
-
xs_updatedOn: new Date().getTime()
|
433
|
-
}, {
|
434
|
-
at: containerPath
|
435
|
-
});
|
436
|
-
}
|
437
|
-
};
|
438
|
-
export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
|
238
|
+
export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
|
439
239
|
const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
|
440
240
|
Transforms.setNodes(editor, {
|
441
241
|
autoAlign: false
|
@@ -445,11 +245,39 @@ export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
|
|
445
245
|
if (!boxNode) {
|
446
246
|
return;
|
447
247
|
}
|
448
|
-
|
449
|
-
|
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
|
+
});
|
450
280
|
}
|
451
|
-
let containers = getAncestorFreeGridContainers(editor, boxPath);
|
452
|
-
handleContainersAlignment(editor, containers, heightDiff, 12);
|
453
281
|
};
|
454
282
|
export const getMarginTop = y => {
|
455
283
|
const calcMargin = y % ROW_HEIGHT;
|
@@ -467,7 +295,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
|
|
467
295
|
const itemsData = [];
|
468
296
|
const items = dom.querySelectorAll(domClass);
|
469
297
|
const nextItemPathLength = curPath?.split("|").length + 2;
|
470
|
-
|
298
|
+
let sectionHeight = 12;
|
471
299
|
for (let i = 0; i < items.length; i++) {
|
472
300
|
const itemRect = items[i]?.getBoundingClientRect();
|
473
301
|
if (items[i]?.classList.contains("type_box")) {
|
@@ -487,10 +315,9 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
|
|
487
315
|
gridArea: calculateGridArea(y)
|
488
316
|
}
|
489
317
|
});
|
490
|
-
|
318
|
+
sectionHeight += itemRect?.height;
|
491
319
|
}
|
492
320
|
}
|
493
|
-
|
494
321
|
if (dom?.classList.contains("type_box") && parentDom) {
|
495
322
|
const parentDomRect = parentDom?.getBoundingClientRect();
|
496
323
|
const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");
|
@@ -552,21 +379,4 @@ export const sortElements = (items, container) => {
|
|
552
379
|
}
|
553
380
|
}
|
554
381
|
});
|
555
|
-
};
|
556
|
-
const nodeKeys = ["height", "width", "gridArea", "marginTop", "left"];
|
557
|
-
export const getNodeValues = (node, breakpoint = "xs") => {
|
558
|
-
// defaulty return xs breakpoint values, if breakpoint is not given
|
559
|
-
const appendBp = breakpoint === "lg" ? "" : "_xs";
|
560
|
-
const nodeVals = nodeKeys.reduce((a, b) => {
|
561
|
-
const key = b + appendBp;
|
562
|
-
a[b] = node[key];
|
563
|
-
if (b === "height" && !a[b]) {
|
564
|
-
a[b] = node.height;
|
565
|
-
}
|
566
|
-
return a;
|
567
|
-
}, {});
|
568
|
-
return {
|
569
|
-
...node,
|
570
|
-
...nodeVals
|
571
|
-
};
|
572
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%",
|
@@ -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
|
-
|
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
|
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";
|
@@ -131,7 +131,6 @@ const RnD = props => {
|
|
131
131
|
const {
|
132
132
|
translation
|
133
133
|
} = customProps;
|
134
|
-
const timerId = useRef(0);
|
135
134
|
useEffect(() => {
|
136
135
|
if (ITEM_TYPES.includes(type)) {
|
137
136
|
if (enable === 1) {
|
@@ -141,24 +140,6 @@ const RnD = props => {
|
|
141
140
|
setAbsPosition({});
|
142
141
|
}
|
143
142
|
}
|
144
|
-
const textElement = getCurrentEle()?.querySelector(".fgi_type_text");
|
145
|
-
if (breakpoint && textElement && childType === "text" && !enable) {
|
146
|
-
timerId.current = setTimeout(() => {
|
147
|
-
const {
|
148
|
-
clientHeight
|
149
|
-
} = textElement;
|
150
|
-
const {
|
151
|
-
height
|
152
|
-
} = delta || {};
|
153
|
-
const heightDiff = Math.abs(clientHeight - height);
|
154
|
-
if (clientHeight && height && heightDiff >= 5) {
|
155
|
-
updateTextHeight(editor, path, clientHeight, breakpoint);
|
156
|
-
const parentSectionPath = path.slice(0, 2);
|
157
|
-
reRenderChildNodes(editor, parentSectionPath);
|
158
|
-
}
|
159
|
-
}, 200);
|
160
|
-
}
|
161
|
-
return () => clearTimeout(timerId.current);
|
162
143
|
}, [enable]);
|
163
144
|
const getCurrentEle = () => {
|
164
145
|
return positionRef.current?.resizableElement?.current;
|
@@ -518,9 +499,7 @@ const RnD = props => {
|
|
518
499
|
ref
|
519
500
|
}, ".freegrid-container-parent");
|
520
501
|
const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
|
521
|
-
|
522
|
-
reRenderChildNodes(editor, formatParentPath);
|
523
|
-
}
|
502
|
+
reRenderChildNodes(editor, formatParentPath);
|
524
503
|
};
|
525
504
|
const onCloseSettings = () => {
|
526
505
|
setSelectedElement({
|
@@ -702,7 +681,14 @@ const RnD = props => {
|
|
702
681
|
handleClose: handleClose,
|
703
682
|
theme: theme,
|
704
683
|
translation: translation
|
705
|
-
}),
|
684
|
+
}), type === "parent" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualElement, {
|
685
|
+
updated_at: updated_at,
|
686
|
+
path: str_path,
|
687
|
+
editor: editor,
|
688
|
+
sectionElement: sectionElement,
|
689
|
+
sectionCls: `.freegrid-section_${path.join("_")}`,
|
690
|
+
dataSets: dataSets
|
691
|
+
}) : null, childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
|
706
692
|
editor: editor,
|
707
693
|
dataSets: dataSets,
|
708
694
|
getCurrentEle: getCurrentEle,
|
@@ -1,59 +1,22 @@
|
|
1
|
-
import { Select as Core
|
1
|
+
import { Select as Core } from "@mui/material";
|
2
2
|
import SelectStyles from "./styles";
|
3
3
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
4
|
-
import KeyboardArrowDownRoundedIcon from
|
4
|
+
import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
7
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
6
|
function Select(props) {
|
9
7
|
const {
|
10
8
|
children,
|
11
|
-
value,
|
12
|
-
onChange,
|
13
|
-
options,
|
14
|
-
label,
|
15
|
-
labelProps,
|
16
|
-
showDefault,
|
17
|
-
translation,
|
18
9
|
...rest
|
19
10
|
} = props;
|
20
11
|
const {
|
21
12
|
theme
|
22
13
|
} = useEditorContext();
|
23
14
|
const classes = SelectStyles(theme);
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
children: [label ? /*#__PURE__*/_jsx(Typography, {
|
30
|
-
variant: "body2",
|
31
|
-
sx: {
|
32
|
-
paddingBottom: "4px"
|
33
|
-
},
|
34
|
-
...(labelProps || {}),
|
35
|
-
children: label
|
36
|
-
}) : null, /*#__PURE__*/_jsx(Core, {
|
37
|
-
size: "small",
|
38
|
-
fullWidth: true,
|
39
|
-
defaultValue: "",
|
40
|
-
value: value || "",
|
41
|
-
onChange: onChange,
|
42
|
-
sx: classes.select,
|
43
|
-
MenuProps: classes.MenuProps,
|
44
|
-
IconComponent: KeyboardArrowDownRoundedIcon,
|
45
|
-
displayEmpty: true,
|
46
|
-
...rest,
|
47
|
-
children: menuOptions?.map((option, i) => {
|
48
|
-
return /*#__PURE__*/_jsx(MenuItem, {
|
49
|
-
value: option.value,
|
50
|
-
children: /*#__PURE__*/_jsx(Typography, {
|
51
|
-
variant: "body2",
|
52
|
-
children: translation(option.label)
|
53
|
-
})
|
54
|
-
}, i);
|
55
|
-
})
|
56
|
-
})]
|
15
|
+
return /*#__PURE__*/_jsx(Core, {
|
16
|
+
MenuProps: classes.MenuProps,
|
17
|
+
IconComponent: KeyboardArrowDownRoundedIcon,
|
18
|
+
...rest,
|
19
|
+
children: children
|
57
20
|
});
|
58
21
|
}
|
59
22
|
export default Select;
|