@flozy/editor 10.4.0 → 10.4.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 +17 -16
- package/dist/Editor/CommonEditor.js +134 -18
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
- package/dist/Editor/Elements/Button/EditorButton.js +27 -9
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +184 -171
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +31 -8
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/Checkbox/index.js +46 -0
- package/dist/Editor/common/Checkbox/styles.js +45 -0
- package/dist/Editor/common/ColorPickerButton.js +41 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
- package/dist/Editor/common/LinkSettings/index.js +82 -80
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +209 -74
- package/dist/Editor/common/MentionsPopup/index.js +4 -1
- package/dist/Editor/common/RadioGroup/index.js +48 -0
- package/dist/Editor/common/RadioGroup/styles.js +29 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
- package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +68 -39
- package/dist/Editor/common/Select/index.js +44 -5
- package/dist/Editor/common/Select/styles.js +31 -2
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +177 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +186 -62
- package/dist/Editor/helper/index.js +5 -1
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +380 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +9 -2
- package/dist/Editor/utils/helper.js +210 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- package/dist/Editor/utils/updateFormName.js +22 -0
- package/package.json +4 -4
@@ -1,5 +1,9 @@
|
|
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";
|
3
7
|
const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
|
4
8
|
return width <= 40 && itemStartRow === startRow;
|
5
9
|
};
|
@@ -39,106 +43,83 @@ export const getGridArea = gridArea => {
|
|
39
43
|
const getBoxToAutoAlign = (editor, sectionPath) => {
|
40
44
|
const [boxData] = Editor.nodes(editor, {
|
41
45
|
at: sectionPath,
|
42
|
-
match: node => node.type
|
46
|
+
match: node => ["freegridBox", "freegrid"].includes(node.type) && node.autoAlign
|
43
47
|
});
|
44
48
|
return boxData || [];
|
45
49
|
};
|
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;
|
73
50
|
|
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
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
51
|
+
// const handleGridItems = (gridItems, lastRow) => {
|
52
|
+
// // to find the previously occupied rows
|
53
|
+
// gridItems.forEach((item) => {
|
54
|
+
// const { gridArea_xs: gridArea, marginTop_xs, height_xs, type } = item;
|
55
|
+
|
56
|
+
// if (type === "paragraph") {
|
57
|
+
// // non-freegridItem,
|
58
|
+
// // some "paragraph" node is defaulty coming inside in box's children
|
59
|
+
// return;
|
60
|
+
// }
|
61
|
+
|
62
|
+
// const [startRow] = getGridArea(gridArea);
|
63
|
+
// const marginTop = marginTop_xs ? Number(marginTop_xs) : 0;
|
64
|
+
// const fullHeight = Number(height_xs) + marginTop;
|
65
|
+
|
66
|
+
// const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
|
67
|
+
|
68
|
+
// lastRow = Math.max(endRow, lastRow);
|
69
|
+
// });
|
70
|
+
|
71
|
+
// return { lastRow };
|
72
|
+
// };
|
73
|
+
|
74
|
+
// const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
|
75
|
+
// let containerHeight = (lastRow - 1) * ROW_HEIGHT;
|
76
|
+
|
77
|
+
// let newlyAddedHeight = 0;
|
78
|
+
|
79
|
+
// //place it on the next rows that are available
|
80
|
+
// nonGridItems.forEach((item, index) => {
|
81
|
+
// const { height_xs, type, itemIndex } = item;
|
82
|
+
|
83
|
+
// if (type === "paragraph") {
|
84
|
+
// // non-freegridItem
|
85
|
+
// return;
|
86
|
+
// }
|
87
|
+
|
88
|
+
// const startRow = lastRow || 1;
|
89
|
+
|
90
|
+
// const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
|
91
|
+
// let fullHeight = height_xs + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
|
92
|
+
|
93
|
+
// const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
|
94
|
+
|
95
|
+
// const newGridArea = `${startRow} / 1 / ${startRow + 1} / 2`;
|
96
|
+
|
97
|
+
// const currentElementPath = [...boxPath, itemIndex];
|
98
|
+
|
99
|
+
// Transforms.setNodes(
|
100
|
+
// editor,
|
101
|
+
// {
|
102
|
+
// gridArea_xs: newGridArea,
|
103
|
+
// marginTop_xs: 12,
|
104
|
+
// left_xs: 12,
|
105
|
+
// xs_updatedOn: new Date().getTime(),
|
106
|
+
// },
|
107
|
+
// { at: currentElementPath }
|
108
|
+
// );
|
109
|
+
|
110
|
+
// lastRow = Math.max(endRow, lastRow);
|
111
|
+
|
112
|
+
// containerHeight += fullHeight;
|
113
|
+
// newlyAddedHeight += fullHeight;
|
114
|
+
// });
|
115
|
+
|
116
|
+
// return {
|
117
|
+
// lastRow,
|
118
|
+
// containerHeight,
|
119
|
+
// newlyAddedHeight,
|
120
|
+
// };
|
121
|
+
// };
|
122
|
+
|
142
123
|
const getAncestorFreeGridContainers = (editor, path) => {
|
143
124
|
const containers = [...Editor.nodes(editor, {
|
144
125
|
at: path,
|
@@ -151,6 +132,37 @@ const getAncestorFreeGridContainers = (editor, path) => {
|
|
151
132
|
})].filter(([node, nodePath]) => nodePath.length <= path.length);
|
152
133
|
return containers;
|
153
134
|
};
|
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
|
+
};
|
154
166
|
export const handleContainers = (editor, boxPath, extraHeight) => {
|
155
167
|
const containers = getAncestorFreeGridContainers(editor, boxPath);
|
156
168
|
let lastChildStartRow;
|
@@ -212,7 +224,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
|
|
212
224
|
if (isChildEle) {
|
213
225
|
return;
|
214
226
|
}
|
215
|
-
if (gridItem.type
|
227
|
+
if (!RND_ITEMS.includes(gridItem.type)) {
|
216
228
|
return;
|
217
229
|
}
|
218
230
|
const {
|
@@ -235,7 +247,196 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
|
|
235
247
|
}
|
236
248
|
});
|
237
249
|
};
|
238
|
-
export const
|
250
|
+
export const causeOverlap = (container, currElementPath, updateBreakpoint, newTopPosition, firstNextElement) => {
|
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) => {
|
239
440
|
const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
|
240
441
|
Transforms.setNodes(editor, {
|
241
442
|
autoAlign: false
|
@@ -245,39 +446,11 @@ export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
|
|
245
446
|
if (!boxNode) {
|
246
447
|
return;
|
247
448
|
}
|
248
|
-
|
249
|
-
|
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
|
-
});
|
449
|
+
if (heightDiff <= 0) {
|
450
|
+
return;
|
280
451
|
}
|
452
|
+
let containers = getAncestorFreeGridContainers(editor, boxPath);
|
453
|
+
handleContainersAlignment(editor, containers, heightDiff, 12);
|
281
454
|
};
|
282
455
|
export const getMarginTop = y => {
|
283
456
|
const calcMargin = y % ROW_HEIGHT;
|
@@ -295,7 +468,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
|
|
295
468
|
const itemsData = [];
|
296
469
|
const items = dom.querySelectorAll(domClass);
|
297
470
|
const nextItemPathLength = curPath?.split("|").length + 2;
|
298
|
-
let sectionHeight = 12;
|
471
|
+
// let sectionHeight = 12;
|
299
472
|
for (let i = 0; i < items.length; i++) {
|
300
473
|
const itemRect = items[i]?.getBoundingClientRect();
|
301
474
|
if (items[i]?.classList.contains("type_box")) {
|
@@ -315,9 +488,10 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
|
|
315
488
|
gridArea: calculateGridArea(y)
|
316
489
|
}
|
317
490
|
});
|
318
|
-
sectionHeight += itemRect?.height;
|
491
|
+
// sectionHeight += itemRect?.height;
|
319
492
|
}
|
320
493
|
}
|
494
|
+
|
321
495
|
if (dom?.classList.contains("type_box") && parentDom) {
|
322
496
|
const parentDomRect = parentDom?.getBoundingClientRect();
|
323
497
|
const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");
|
@@ -379,4 +553,21 @@ export const sortElements = (items, container) => {
|
|
379
553
|
}
|
380
554
|
}
|
381
555
|
});
|
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
|
+
};
|
382
573
|
};
|
@@ -18,6 +18,14 @@ 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
|
+
},
|
21
29
|
"& .freegrid-item": {
|
22
30
|
position: "relative !important",
|
23
31
|
top: "0 !important",
|
@@ -97,6 +105,14 @@ export const useAutoAlignStyles = () => ({
|
|
97
105
|
"&.type_text": {
|
98
106
|
height: "auto !important"
|
99
107
|
},
|
108
|
+
"& .fgi_type_text": {
|
109
|
+
"& .edt-headings": {
|
110
|
+
margin: "0px"
|
111
|
+
},
|
112
|
+
"& .edt-paragraphs": {
|
113
|
+
margin: "0px"
|
114
|
+
}
|
115
|
+
},
|
100
116
|
// start - default signature classes on free-grid
|
101
117
|
"& .fgi_type_signature": {
|
102
118
|
height: "100%",
|