@flozy/editor 10.4.0 → 10.4.2
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 -81
- 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 +30 -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,6 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Box } from "@mui/material";
|
3
|
-
import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
|
3
|
+
import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../../helper/theme";
|
4
|
+
import { useTheme } from "@emotion/react";
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
const FormText = props => {
|
6
7
|
const {
|
@@ -19,11 +20,26 @@ const FormText = props => {
|
|
19
20
|
textSize,
|
20
21
|
fontFamily,
|
21
22
|
fontWeight,
|
23
|
+
marginSpacing,
|
22
24
|
...rest
|
23
25
|
} = fieldProps;
|
24
26
|
const onChange = e => {
|
25
27
|
e.preventDefault();
|
26
28
|
};
|
29
|
+
const theme = useTheme();
|
30
|
+
const buttonSX = {
|
31
|
+
...groupByBreakpoint({
|
32
|
+
borderRadius: {
|
33
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
34
|
+
},
|
35
|
+
padding: {
|
36
|
+
...getTRBLBreakPoints(bannerSpacing)
|
37
|
+
},
|
38
|
+
margin: {
|
39
|
+
...getTRBLBreakPoints(marginSpacing)
|
40
|
+
}
|
41
|
+
}, theme)
|
42
|
+
};
|
27
43
|
return /*#__PURE__*/_jsx("div", {
|
28
44
|
style: {
|
29
45
|
width: "100%",
|
@@ -40,16 +56,17 @@ const FormText = props => {
|
|
40
56
|
padding: {
|
41
57
|
...getTRBLBreakPoints(bannerSpacing)
|
42
58
|
},
|
43
|
-
height: height
|
44
|
-
borderColor: borderColor
|
59
|
+
height: height && `${height} !important`,
|
60
|
+
borderColor: borderColor && `${borderColor} !important`,
|
45
61
|
borderWidth: borderWidth || "1px",
|
46
62
|
borderRadius: {
|
47
63
|
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
48
64
|
},
|
65
|
+
...buttonSX,
|
49
66
|
borderStyle: borderStyle || "solid",
|
50
|
-
color: textColor
|
51
|
-
background: bgColor
|
52
|
-
fontSize: textSize
|
67
|
+
color: textColor && `${textColor} !important`,
|
68
|
+
background: bgColor && `${bgColor} !important`,
|
69
|
+
fontSize: textSize && `${textSize} !important`,
|
53
70
|
fontFamily: fontFamily || "PoppinsRegular",
|
54
71
|
fontWeight: `${fontWeight} !important` || "400 !important"
|
55
72
|
}
|
@@ -35,12 +35,12 @@ const FormTextArea = props => {
|
|
35
35
|
onChange: onChange,
|
36
36
|
sx: {
|
37
37
|
width: "100%",
|
38
|
-
|
38
|
+
borderBlockStyle: "solid",
|
39
39
|
padding: {
|
40
40
|
...getTRBLBreakPoints(bannerSpacing)
|
41
41
|
},
|
42
42
|
height: height || "150px",
|
43
|
-
borderColor: `${borderColor
|
43
|
+
borderColor: borderColor && `${borderColor} !important`,
|
44
44
|
borderWidth: borderWidth || "1px",
|
45
45
|
borderRadius: {
|
46
46
|
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
@@ -1,12 +1,15 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Transforms
|
2
|
+
import { Transforms } from "slate";
|
3
3
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
4
4
|
import { IconButton, Tooltip, Grid, useTheme } from "@mui/material";
|
5
|
-
import DeleteIcon from "@mui/icons-material/Delete";
|
6
|
-
import SettingsIcon from "@mui/icons-material/Settings";
|
7
5
|
import FormElements from "./FormElements";
|
8
6
|
import FieldPopup from "./FieldPopup";
|
9
7
|
import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
|
8
|
+
import { DeleteIcon } from "../../assets/svg/AIIcons";
|
9
|
+
import { SettingsIcon } from "../../assets/svg/TableIcons";
|
10
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
11
|
+
import useCommonStyle from "../../commonStyle";
|
12
|
+
import { getNode } from "../../utils/helper";
|
10
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
15
|
const FormField = props => {
|
@@ -33,11 +36,15 @@ const FormField = props => {
|
|
33
36
|
const formPath = path.slice(0, path.length - 1);
|
34
37
|
const {
|
35
38
|
metadatamapping
|
36
|
-
} =
|
39
|
+
} = getNode(editor, formPath) || {};
|
37
40
|
const updatedElement = {
|
38
41
|
...element,
|
39
42
|
metadatamapping
|
40
43
|
};
|
44
|
+
const {
|
45
|
+
theme: appTheme
|
46
|
+
} = useEditorContext();
|
47
|
+
const classes = useCommonStyle(appTheme);
|
41
48
|
const [openSetttings, setOpenSettings] = useState(false);
|
42
49
|
const onSettings = () => {
|
43
50
|
setOpenSettings(true);
|
@@ -77,7 +84,6 @@ const FormField = props => {
|
|
77
84
|
top: "24px",
|
78
85
|
bottom: 0,
|
79
86
|
margin: "auto",
|
80
|
-
height: "42px",
|
81
87
|
zIndex: 101
|
82
88
|
},
|
83
89
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
@@ -110,7 +116,8 @@ const FormField = props => {
|
|
110
116
|
className: "form-field",
|
111
117
|
sx: {
|
112
118
|
position: "relative",
|
113
|
-
...fieldSX
|
119
|
+
...fieldSX,
|
120
|
+
...classes?.fieldBtnSettings
|
114
121
|
},
|
115
122
|
children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
|
116
123
|
fieldProps: elementProps
|
@@ -9,20 +9,20 @@ const FormStyles = theme => ({
|
|
9
9
|
color: "#94A3B8"
|
10
10
|
},
|
11
11
|
bodyTextArea: {
|
12
|
-
|
13
|
-
padding:
|
14
|
-
|
15
|
-
outline:
|
16
|
-
border:
|
12
|
+
"& .mini-editor-cls": {
|
13
|
+
padding: "12px",
|
14
|
+
"&:focus-visible": {
|
15
|
+
outline: "none",
|
16
|
+
border: "none"
|
17
17
|
}
|
18
18
|
},
|
19
19
|
"& .editorWorkflow": {
|
20
|
-
minHeight:
|
21
|
-
padding:
|
20
|
+
minHeight: "130px",
|
21
|
+
padding: "12px",
|
22
22
|
paddingBottom: 0,
|
23
|
-
|
24
|
-
outline:
|
25
|
-
border:
|
23
|
+
"&:focus-visible": {
|
24
|
+
outline: "none",
|
25
|
+
border: "none"
|
26
26
|
}
|
27
27
|
}
|
28
28
|
},
|
@@ -105,7 +105,7 @@ const FormStyles = theme => ({
|
|
105
105
|
padding: "4px 22px",
|
106
106
|
textTransform: "none",
|
107
107
|
border: "1px solid #D8DDE1",
|
108
|
-
minWidth:
|
108
|
+
minWidth: "126px",
|
109
109
|
"& svg": {
|
110
110
|
"& path": {
|
111
111
|
stroke: "#64748B"
|
@@ -169,17 +169,19 @@ const FormStyles = theme => ({
|
|
169
169
|
}
|
170
170
|
},
|
171
171
|
colorButtonSingle: {
|
172
|
+
border: "1.5px solid #DCE4EC !important",
|
172
173
|
"&.active": {
|
173
|
-
"&:before": {
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
}
|
174
|
+
// "&:before": {
|
175
|
+
// content: '" "',
|
176
|
+
// position: "absolute",
|
177
|
+
// top: "-5px",
|
178
|
+
// left: "-5px",
|
179
|
+
// width: "calc(100% + 4px)",
|
180
|
+
// height: "calc(100% + 4px)",
|
181
|
+
// border: "3px solid blue",
|
182
|
+
// borderRadius: "50%",
|
183
|
+
// },
|
184
|
+
outline: "2px solid #2563EB"
|
183
185
|
}
|
184
186
|
},
|
185
187
|
colorButtonsInner: {
|
@@ -249,7 +251,7 @@ const FormStyles = theme => ({
|
|
249
251
|
}
|
250
252
|
},
|
251
253
|
root: {
|
252
|
-
padding:
|
254
|
+
padding: "10px"
|
253
255
|
}
|
254
256
|
});
|
255
257
|
export default FormStyles;
|
@@ -22,6 +22,8 @@ import { DEFAULT_TABLE_NODE } from "../../utils/table";
|
|
22
22
|
import itemOptions from "./Options/sectionItemOptions";
|
23
23
|
import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
|
24
24
|
import { useDebouncedCallback } from "use-debounce";
|
25
|
+
import { getNewElementXsValues } from "./helper";
|
26
|
+
import updateFormName from "../../utils/updateFormName";
|
25
27
|
import { jsx as _jsx } from "react/jsx-runtime";
|
26
28
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
27
29
|
const MAX_DEVICE_WIDTH = {
|
@@ -35,11 +37,15 @@ export const useFreeGrid = () => {
|
|
35
37
|
return useContext(FreeGridContext);
|
36
38
|
};
|
37
39
|
const FreeGrid = props => {
|
40
|
+
const {
|
41
|
+
theme: appTheme
|
42
|
+
} = useEditorContext();
|
38
43
|
const theme = useTheme();
|
39
44
|
const breakpoint = useBreakpoints(theme);
|
40
45
|
const classes = useFreeGridStyles({
|
41
46
|
theme,
|
42
|
-
MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint]
|
47
|
+
MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint],
|
48
|
+
appTheme
|
43
49
|
});
|
44
50
|
const editor = useSlateStatic();
|
45
51
|
const {
|
@@ -136,8 +142,10 @@ const FreeGrid = props => {
|
|
136
142
|
});
|
137
143
|
break;
|
138
144
|
case "duplicateSection":
|
145
|
+
const currentNode = Node.get(editor, cur_root_path);
|
146
|
+
const updatedFormNameNode = updateFormName(currentNode);
|
139
147
|
Transforms.insertNodes(editor, [{
|
140
|
-
...JSON.parse(JSON.stringify(
|
148
|
+
...JSON.parse(JSON.stringify(updatedFormNameNode))
|
141
149
|
}], {
|
142
150
|
at: next_path
|
143
151
|
});
|
@@ -176,6 +184,10 @@ const FreeGrid = props => {
|
|
176
184
|
const handleAddElementClick = type => () => {
|
177
185
|
const isEmpty = isEmptySection();
|
178
186
|
const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
|
187
|
+
const {
|
188
|
+
xsVal,
|
189
|
+
sectionHeightXs
|
190
|
+
} = getNewElementXsValues(type, element?.children);
|
179
191
|
switch (type) {
|
180
192
|
case "addText":
|
181
193
|
Transforms.insertNodes(editor, [{
|
@@ -192,7 +204,8 @@ const FreeGrid = props => {
|
|
192
204
|
marginTop: 0,
|
193
205
|
top: 0,
|
194
206
|
width: 170,
|
195
|
-
height: 30
|
207
|
+
height: 30,
|
208
|
+
...(xsVal || {})
|
196
209
|
}], {
|
197
210
|
at: [...insertAt]
|
198
211
|
});
|
@@ -210,20 +223,6 @@ const FreeGrid = props => {
|
|
210
223
|
linkType: "webAddress"
|
211
224
|
},
|
212
225
|
iconPosition: "start",
|
213
|
-
bgColor: "#2563EB",
|
214
|
-
textColor: "#FFF",
|
215
|
-
borderRadius: {
|
216
|
-
topLeft: 30,
|
217
|
-
topRight: 30,
|
218
|
-
bottomLeft: 30,
|
219
|
-
bottomRight: 30
|
220
|
-
},
|
221
|
-
bannerSpacing: {
|
222
|
-
left: 12,
|
223
|
-
top: 12,
|
224
|
-
right: 12,
|
225
|
-
bottom: 12
|
226
|
-
},
|
227
226
|
textAlign: "center",
|
228
227
|
label: "Get Started"
|
229
228
|
}],
|
@@ -232,7 +231,8 @@ const FreeGrid = props => {
|
|
232
231
|
marginTop: 0,
|
233
232
|
top: 0,
|
234
233
|
width: 143,
|
235
|
-
height: 50
|
234
|
+
height: 50,
|
235
|
+
...(xsVal || {})
|
236
236
|
}], {
|
237
237
|
at: [...insertAt]
|
238
238
|
});
|
@@ -258,8 +258,9 @@ const FreeGrid = props => {
|
|
258
258
|
top: 0,
|
259
259
|
width: 217,
|
260
260
|
height: 173,
|
261
|
-
width_xs: 217,
|
262
|
-
height_xs: 173
|
261
|
+
// width_xs: 217,
|
262
|
+
// height_xs: 173,
|
263
|
+
...(xsVal || {})
|
263
264
|
}], {
|
264
265
|
at: [...insertAt]
|
265
266
|
});
|
@@ -282,7 +283,8 @@ const FreeGrid = props => {
|
|
282
283
|
marginTop: 0,
|
283
284
|
top: 0,
|
284
285
|
width: 170,
|
285
|
-
height: 80
|
286
|
+
height: 80,
|
287
|
+
...(xsVal || {})
|
286
288
|
}], {
|
287
289
|
at: [...insertAt]
|
288
290
|
});
|
@@ -295,7 +297,8 @@ const FreeGrid = props => {
|
|
295
297
|
images: []
|
296
298
|
}), {
|
297
299
|
height: 370,
|
298
|
-
width: 650
|
300
|
+
width: 650,
|
301
|
+
...(xsVal || {})
|
299
302
|
})
|
300
303
|
}], {
|
301
304
|
at: [...insertAt]
|
@@ -307,7 +310,8 @@ const FreeGrid = props => {
|
|
307
310
|
...DEFAULT_TABLE_NODE()
|
308
311
|
}, {
|
309
312
|
height: 150,
|
310
|
-
width: 400
|
313
|
+
width: 400,
|
314
|
+
...(xsVal || {})
|
311
315
|
})
|
312
316
|
}], {
|
313
317
|
at: [...insertAt]
|
@@ -331,7 +335,8 @@ const FreeGrid = props => {
|
|
331
335
|
marginTop: 0,
|
332
336
|
top: 0,
|
333
337
|
width: 400,
|
334
|
-
height: 300
|
338
|
+
height: 300,
|
339
|
+
...(xsVal || {})
|
335
340
|
}], {
|
336
341
|
at: [...insertAt]
|
337
342
|
});
|
@@ -343,7 +348,9 @@ const FreeGrid = props => {
|
|
343
348
|
children: [{
|
344
349
|
text: ""
|
345
350
|
}]
|
346
|
-
}, {
|
351
|
+
}, {
|
352
|
+
...(xsVal || {})
|
353
|
+
}, "freegridBox")
|
347
354
|
}], {
|
348
355
|
at: [...insertAt]
|
349
356
|
});
|
@@ -354,7 +361,8 @@ const FreeGrid = props => {
|
|
354
361
|
...FORM_NODE()
|
355
362
|
}, {
|
356
363
|
height: 92,
|
357
|
-
width: 400
|
364
|
+
width: 400,
|
365
|
+
...(xsVal || {})
|
358
366
|
})
|
359
367
|
}], {
|
360
368
|
at: [...insertAt]
|
@@ -368,7 +376,8 @@ const FreeGrid = props => {
|
|
368
376
|
})
|
369
377
|
}, {
|
370
378
|
height: 60,
|
371
|
-
width: 400
|
379
|
+
width: 400,
|
380
|
+
...(xsVal || {})
|
372
381
|
})
|
373
382
|
}], {
|
374
383
|
at: [...insertAt]
|
@@ -389,19 +398,18 @@ const FreeGrid = props => {
|
|
389
398
|
marginTop: 0,
|
390
399
|
top: 0,
|
391
400
|
width: 170,
|
392
|
-
height: 30
|
401
|
+
height: 30,
|
402
|
+
...(xsVal || {})
|
393
403
|
}], {
|
394
404
|
at: [...insertAt]
|
395
405
|
});
|
396
406
|
break;
|
397
407
|
default:
|
398
408
|
}
|
399
|
-
if (
|
409
|
+
if (xsVal) {
|
400
410
|
setSelectedElement({});
|
401
|
-
|
402
|
-
// auto align in mobile
|
403
411
|
Transforms.setNodes(editor, {
|
404
|
-
|
412
|
+
height_xs: sectionHeightXs,
|
405
413
|
updated_at: new Date().getTime()
|
406
414
|
}, {
|
407
415
|
at: path
|
@@ -8,7 +8,7 @@ import { onDropItem, ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
|
|
8
8
|
import useBreakpoints from "../../hooks/useBreakpoints";
|
9
9
|
import { breakpointValues, formatBreakpointValues } from "./breakpointConstants";
|
10
10
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
11
|
-
import { getBreakPointsValue } from "../../helper/theme";
|
11
|
+
import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
|
12
12
|
import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
|
13
13
|
import { bringItemToFB } from "../../helper";
|
14
14
|
import itemOptions from "./Options/sectionItemOptions";
|
@@ -160,6 +160,11 @@ const FreeGridBox = props => {
|
|
160
160
|
const isBoxHeader = useMemo(() => {
|
161
161
|
return element?.children?.some(c => c.childType === "appHeader" && !c.xs_updatedOn);
|
162
162
|
}, [element]);
|
163
|
+
const boxSp = groupByBreakpoint({
|
164
|
+
borderRadius: {
|
165
|
+
...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
|
166
|
+
}
|
167
|
+
}, theme);
|
163
168
|
return /*#__PURE__*/_jsx(RnD, {
|
164
169
|
id: `freegrid_box_item_${path.join("|")}_${updated_at}_${breakpoint}`,
|
165
170
|
className: `freegrid-item path-${path.length} breakpoint-${breakpoint} freegrid-box_${path.join("_")}`,
|
@@ -226,9 +231,7 @@ const FreeGridBox = props => {
|
|
226
231
|
"--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
|
227
232
|
},
|
228
233
|
sx: {
|
229
|
-
|
230
|
-
...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
|
231
|
-
},
|
234
|
+
...boxSp,
|
232
235
|
background: sectionBgColor,
|
233
236
|
backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
|
234
237
|
borderColor: borderColor || "transparent",
|
@@ -5,12 +5,12 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
5
|
const More = props => {
|
6
6
|
const {
|
7
7
|
handleClick,
|
8
|
-
|
9
|
-
|
8
|
+
translation,
|
9
|
+
breakpoint
|
10
10
|
} = props;
|
11
11
|
return /*#__PURE__*/_jsx(Box, {
|
12
12
|
children: /*#__PURE__*/_jsxs(List, {
|
13
|
-
className: "item-list-wrpr",
|
13
|
+
className: "item-list-wrpr sectionMoreOption",
|
14
14
|
children: [/*#__PURE__*/_jsx(ListItemButton, {
|
15
15
|
className: "item-wrapper",
|
16
16
|
onClick: handleClick("addSection"),
|
@@ -19,15 +19,15 @@ const More = props => {
|
|
19
19
|
className: "item-wrapper",
|
20
20
|
onClick: handleClick("duplicateSection"),
|
21
21
|
children: translation?.translation("Duplicate Section")
|
22
|
-
}), /*#__PURE__*/_jsx(ListItemButton, {
|
23
|
-
className: "item-wrapper",
|
24
|
-
onClick: handleClick("deleteSection"),
|
25
|
-
children: "Delete Section"
|
26
22
|
}), breakpoint === "xs" ? /*#__PURE__*/_jsx(ListItemButton, {
|
27
23
|
className: "item-wrapper",
|
28
24
|
onClick: handleClick("forceAutoAlignment"),
|
29
25
|
children: "Force Auto Alignment"
|
30
|
-
}) : null
|
26
|
+
}) : null, /*#__PURE__*/_jsx(ListItemButton, {
|
27
|
+
className: "item-wrapper",
|
28
|
+
onClick: handleClick("deleteSection"),
|
29
|
+
children: "Delete Section"
|
30
|
+
})]
|
31
31
|
})
|
32
32
|
});
|
33
33
|
};
|
@@ -0,0 +1,115 @@
|
|
1
|
+
import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
|
2
|
+
import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
|
3
|
+
import { RND_ITEMS } from "../../helper";
|
4
|
+
export const ELEMENT_CASE = {
|
5
|
+
ADD_TEXT: "addText",
|
6
|
+
ADD_BUTTON: "addButton",
|
7
|
+
ADD_SIGNATURE: "addSignature",
|
8
|
+
ADD_IMAGE: "addImage",
|
9
|
+
ADD_VIDEO: "addVideo",
|
10
|
+
ADD_TABLE: "addTable",
|
11
|
+
ADD_CODE: "addCode",
|
12
|
+
ADD_BOX: "addBox",
|
13
|
+
ADD_FORM: "addForm",
|
14
|
+
ADD_APP_HEADER: "addAppHeader",
|
15
|
+
ADD_DIVIDER: "addDivider"
|
16
|
+
};
|
17
|
+
const commonXsValues = {
|
18
|
+
top_xs: 0,
|
19
|
+
marginTop_xs: 12,
|
20
|
+
left_xs: 24,
|
21
|
+
width_xs: 272,
|
22
|
+
xs_updatedOn: new Date().getTime()
|
23
|
+
};
|
24
|
+
const elementXsValues = {
|
25
|
+
[ELEMENT_CASE.ADD_TEXT]: {
|
26
|
+
...commonXsValues,
|
27
|
+
height_xs: 50
|
28
|
+
},
|
29
|
+
[ELEMENT_CASE.ADD_BUTTON]: {
|
30
|
+
...commonXsValues,
|
31
|
+
height_xs: 50
|
32
|
+
},
|
33
|
+
[ELEMENT_CASE.ADD_SIGNATURE]: {
|
34
|
+
...commonXsValues,
|
35
|
+
height_xs: 173
|
36
|
+
},
|
37
|
+
[ELEMENT_CASE.ADD_IMAGE]: {
|
38
|
+
...commonXsValues,
|
39
|
+
height_xs: 80
|
40
|
+
},
|
41
|
+
[ELEMENT_CASE.ADD_VIDEO]: {
|
42
|
+
...commonXsValues,
|
43
|
+
height_xs: 300
|
44
|
+
},
|
45
|
+
[ELEMENT_CASE.ADD_TABLE]: {
|
46
|
+
...commonXsValues,
|
47
|
+
height_xs: 165
|
48
|
+
},
|
49
|
+
[ELEMENT_CASE.ADD_CODE]: {
|
50
|
+
...commonXsValues,
|
51
|
+
height: 300
|
52
|
+
},
|
53
|
+
[ELEMENT_CASE.ADD_BOX]: {
|
54
|
+
...commonXsValues,
|
55
|
+
height_xs: 300
|
56
|
+
},
|
57
|
+
[ELEMENT_CASE.ADD_FORM]: {
|
58
|
+
...commonXsValues,
|
59
|
+
height_xs: 80
|
60
|
+
},
|
61
|
+
[ELEMENT_CASE.ADD_APP_HEADER]: {
|
62
|
+
...commonXsValues,
|
63
|
+
height_xs: 80
|
64
|
+
},
|
65
|
+
[ELEMENT_CASE.ADD_DIVIDER]: {
|
66
|
+
...commonXsValues,
|
67
|
+
height_xs: 24
|
68
|
+
}
|
69
|
+
};
|
70
|
+
export const findMaxYValue = (sectionItems, breakpoint) => {
|
71
|
+
let maxY = 0;
|
72
|
+
sectionItems.forEach(item => {
|
73
|
+
const isHidden = breakpoint === "xs" && item.children.some(c => c.xsHidden);
|
74
|
+
if (item?.type && RND_ITEMS.includes(item.type) && !isHidden) {
|
75
|
+
const {
|
76
|
+
bottom
|
77
|
+
} = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
|
78
|
+
maxY = Math.max(maxY, bottom);
|
79
|
+
}
|
80
|
+
});
|
81
|
+
return maxY;
|
82
|
+
};
|
83
|
+
export const convertToGridArea = y => {
|
84
|
+
// Calculate grid position
|
85
|
+
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
86
|
+
|
87
|
+
// to calculate difference inside the grid
|
88
|
+
const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
|
89
|
+
|
90
|
+
// Update grid area
|
91
|
+
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
92
|
+
return {
|
93
|
+
gridArea,
|
94
|
+
marginTop
|
95
|
+
};
|
96
|
+
};
|
97
|
+
export const getNewElementXsValues = (type, sectionItems) => {
|
98
|
+
const values = elementXsValues[type] || {};
|
99
|
+
const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
|
100
|
+
const {
|
101
|
+
gridArea,
|
102
|
+
marginTop
|
103
|
+
} = convertToGridArea(y);
|
104
|
+
const BUFFER_MARGIN_TOP = 12;
|
105
|
+
const xsVal = {
|
106
|
+
...values,
|
107
|
+
gridArea_xs: gridArea,
|
108
|
+
marginTop_xs: marginTop + BUFFER_MARGIN_TOP
|
109
|
+
};
|
110
|
+
const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
|
111
|
+
return {
|
112
|
+
xsVal,
|
113
|
+
sectionHeightXs
|
114
|
+
};
|
115
|
+
};
|