@flozy/editor 10.2.5 → 10.2.7
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 +131 -16
- 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 +30 -7
- 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 +181 -170
- 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 +36 -31
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +113 -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 -55
- package/dist/Editor/common/LinkSettings/index.js +82 -79
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +209 -74
- 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 +48 -54
- package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +6 -11
- 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 +4 -0
- 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 +367 -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 +169 -45
- 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 +8 -2
- package/dist/Editor/utils/helper.js +134 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- 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,7 @@ 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";
|
25
26
|
import { jsx as _jsx } from "react/jsx-runtime";
|
26
27
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
27
28
|
const MAX_DEVICE_WIDTH = {
|
@@ -35,11 +36,15 @@ export const useFreeGrid = () => {
|
|
35
36
|
return useContext(FreeGridContext);
|
36
37
|
};
|
37
38
|
const FreeGrid = props => {
|
39
|
+
const {
|
40
|
+
theme: appTheme
|
41
|
+
} = useEditorContext();
|
38
42
|
const theme = useTheme();
|
39
43
|
const breakpoint = useBreakpoints(theme);
|
40
44
|
const classes = useFreeGridStyles({
|
41
45
|
theme,
|
42
|
-
MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint]
|
46
|
+
MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint],
|
47
|
+
appTheme
|
43
48
|
});
|
44
49
|
const editor = useSlateStatic();
|
45
50
|
const {
|
@@ -176,6 +181,10 @@ const FreeGrid = props => {
|
|
176
181
|
const handleAddElementClick = type => () => {
|
177
182
|
const isEmpty = isEmptySection();
|
178
183
|
const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
|
184
|
+
const {
|
185
|
+
xsVal,
|
186
|
+
sectionHeightXs
|
187
|
+
} = getNewElementXsValues(type, element?.children);
|
179
188
|
switch (type) {
|
180
189
|
case "addText":
|
181
190
|
Transforms.insertNodes(editor, [{
|
@@ -192,7 +201,8 @@ const FreeGrid = props => {
|
|
192
201
|
marginTop: 0,
|
193
202
|
top: 0,
|
194
203
|
width: 170,
|
195
|
-
height: 30
|
204
|
+
height: 30,
|
205
|
+
...(xsVal || {})
|
196
206
|
}], {
|
197
207
|
at: [...insertAt]
|
198
208
|
});
|
@@ -210,20 +220,6 @@ const FreeGrid = props => {
|
|
210
220
|
linkType: "webAddress"
|
211
221
|
},
|
212
222
|
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
223
|
textAlign: "center",
|
228
224
|
label: "Get Started"
|
229
225
|
}],
|
@@ -232,7 +228,8 @@ const FreeGrid = props => {
|
|
232
228
|
marginTop: 0,
|
233
229
|
top: 0,
|
234
230
|
width: 143,
|
235
|
-
height: 50
|
231
|
+
height: 50,
|
232
|
+
...(xsVal || {})
|
236
233
|
}], {
|
237
234
|
at: [...insertAt]
|
238
235
|
});
|
@@ -258,8 +255,9 @@ const FreeGrid = props => {
|
|
258
255
|
top: 0,
|
259
256
|
width: 217,
|
260
257
|
height: 173,
|
261
|
-
width_xs: 217,
|
262
|
-
height_xs: 173
|
258
|
+
// width_xs: 217,
|
259
|
+
// height_xs: 173,
|
260
|
+
...(xsVal || {})
|
263
261
|
}], {
|
264
262
|
at: [...insertAt]
|
265
263
|
});
|
@@ -282,7 +280,8 @@ const FreeGrid = props => {
|
|
282
280
|
marginTop: 0,
|
283
281
|
top: 0,
|
284
282
|
width: 170,
|
285
|
-
height: 80
|
283
|
+
height: 80,
|
284
|
+
...(xsVal || {})
|
286
285
|
}], {
|
287
286
|
at: [...insertAt]
|
288
287
|
});
|
@@ -295,7 +294,8 @@ const FreeGrid = props => {
|
|
295
294
|
images: []
|
296
295
|
}), {
|
297
296
|
height: 370,
|
298
|
-
width: 650
|
297
|
+
width: 650,
|
298
|
+
...(xsVal || {})
|
299
299
|
})
|
300
300
|
}], {
|
301
301
|
at: [...insertAt]
|
@@ -307,7 +307,8 @@ const FreeGrid = props => {
|
|
307
307
|
...DEFAULT_TABLE_NODE()
|
308
308
|
}, {
|
309
309
|
height: 150,
|
310
|
-
width: 400
|
310
|
+
width: 400,
|
311
|
+
...(xsVal || {})
|
311
312
|
})
|
312
313
|
}], {
|
313
314
|
at: [...insertAt]
|
@@ -331,7 +332,8 @@ const FreeGrid = props => {
|
|
331
332
|
marginTop: 0,
|
332
333
|
top: 0,
|
333
334
|
width: 400,
|
334
|
-
height: 300
|
335
|
+
height: 300,
|
336
|
+
...(xsVal || {})
|
335
337
|
}], {
|
336
338
|
at: [...insertAt]
|
337
339
|
});
|
@@ -343,7 +345,9 @@ const FreeGrid = props => {
|
|
343
345
|
children: [{
|
344
346
|
text: ""
|
345
347
|
}]
|
346
|
-
}, {
|
348
|
+
}, {
|
349
|
+
...(xsVal || {})
|
350
|
+
}, "freegridBox")
|
347
351
|
}], {
|
348
352
|
at: [...insertAt]
|
349
353
|
});
|
@@ -354,7 +358,8 @@ const FreeGrid = props => {
|
|
354
358
|
...FORM_NODE()
|
355
359
|
}, {
|
356
360
|
height: 92,
|
357
|
-
width: 400
|
361
|
+
width: 400,
|
362
|
+
...(xsVal || {})
|
358
363
|
})
|
359
364
|
}], {
|
360
365
|
at: [...insertAt]
|
@@ -368,7 +373,8 @@ const FreeGrid = props => {
|
|
368
373
|
})
|
369
374
|
}, {
|
370
375
|
height: 60,
|
371
|
-
width: 400
|
376
|
+
width: 400,
|
377
|
+
...(xsVal || {})
|
372
378
|
})
|
373
379
|
}], {
|
374
380
|
at: [...insertAt]
|
@@ -389,19 +395,18 @@ const FreeGrid = props => {
|
|
389
395
|
marginTop: 0,
|
390
396
|
top: 0,
|
391
397
|
width: 170,
|
392
|
-
height: 30
|
398
|
+
height: 30,
|
399
|
+
...(xsVal || {})
|
393
400
|
}], {
|
394
401
|
at: [...insertAt]
|
395
402
|
});
|
396
403
|
break;
|
397
404
|
default:
|
398
405
|
}
|
399
|
-
if (
|
406
|
+
if (xsVal) {
|
400
407
|
setSelectedElement({});
|
401
|
-
|
402
|
-
// auto align in mobile
|
403
408
|
Transforms.setNodes(editor, {
|
404
|
-
|
409
|
+
height_xs: sectionHeightXs,
|
405
410
|
updated_at: new Date().getTime()
|
406
411
|
}, {
|
407
412
|
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,113 @@
|
|
1
|
+
import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
|
2
|
+
import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
|
3
|
+
export const ELEMENT_CASE = {
|
4
|
+
ADD_TEXT: "addText",
|
5
|
+
ADD_BUTTON: "addButton",
|
6
|
+
ADD_SIGNATURE: "addSignature",
|
7
|
+
ADD_IMAGE: "addImage",
|
8
|
+
ADD_VIDEO: "addVideo",
|
9
|
+
ADD_TABLE: "addTable",
|
10
|
+
ADD_CODE: "addCode",
|
11
|
+
ADD_BOX: "addBox",
|
12
|
+
ADD_FORM: "addForm",
|
13
|
+
ADD_APP_HEADER: "addAppHeader",
|
14
|
+
ADD_DIVIDER: "addDivider"
|
15
|
+
};
|
16
|
+
const commonXsValues = {
|
17
|
+
top_xs: 0,
|
18
|
+
marginTop_xs: 12,
|
19
|
+
left_xs: 24,
|
20
|
+
width_xs: 272,
|
21
|
+
xs_updatedOn: new Date().getTime()
|
22
|
+
};
|
23
|
+
const elementXsValues = {
|
24
|
+
[ELEMENT_CASE.ADD_TEXT]: {
|
25
|
+
...commonXsValues,
|
26
|
+
height_xs: 50
|
27
|
+
},
|
28
|
+
[ELEMENT_CASE.ADD_BUTTON]: {
|
29
|
+
...commonXsValues,
|
30
|
+
height_xs: 50
|
31
|
+
},
|
32
|
+
[ELEMENT_CASE.ADD_SIGNATURE]: {
|
33
|
+
...commonXsValues,
|
34
|
+
height_xs: 173
|
35
|
+
},
|
36
|
+
[ELEMENT_CASE.ADD_IMAGE]: {
|
37
|
+
...commonXsValues,
|
38
|
+
height_xs: 80
|
39
|
+
},
|
40
|
+
[ELEMENT_CASE.ADD_VIDEO]: {
|
41
|
+
...commonXsValues,
|
42
|
+
height_xs: 300
|
43
|
+
},
|
44
|
+
[ELEMENT_CASE.ADD_TABLE]: {
|
45
|
+
...commonXsValues,
|
46
|
+
height_xs: 165
|
47
|
+
},
|
48
|
+
[ELEMENT_CASE.ADD_CODE]: {
|
49
|
+
...commonXsValues,
|
50
|
+
height: 300
|
51
|
+
},
|
52
|
+
[ELEMENT_CASE.ADD_BOX]: {
|
53
|
+
...commonXsValues,
|
54
|
+
height_xs: 300
|
55
|
+
},
|
56
|
+
[ELEMENT_CASE.ADD_FORM]: {
|
57
|
+
...commonXsValues,
|
58
|
+
height_xs: 80
|
59
|
+
},
|
60
|
+
[ELEMENT_CASE.ADD_APP_HEADER]: {
|
61
|
+
...commonXsValues,
|
62
|
+
height_xs: 80
|
63
|
+
},
|
64
|
+
[ELEMENT_CASE.ADD_DIVIDER]: {
|
65
|
+
...commonXsValues,
|
66
|
+
height_xs: 24
|
67
|
+
}
|
68
|
+
};
|
69
|
+
export const findMaxYValue = sectionItems => {
|
70
|
+
let maxY = 0;
|
71
|
+
sectionItems.forEach(item => {
|
72
|
+
if (item?.type && item?.type !== "paragraph") {
|
73
|
+
const {
|
74
|
+
bottom
|
75
|
+
} = getElementOffset(item);
|
76
|
+
maxY = Math.max(maxY, bottom);
|
77
|
+
}
|
78
|
+
});
|
79
|
+
return maxY;
|
80
|
+
};
|
81
|
+
export const convertToGridArea = y => {
|
82
|
+
// Calculate grid position
|
83
|
+
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
84
|
+
|
85
|
+
// to calculate difference inside the grid
|
86
|
+
const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
|
87
|
+
|
88
|
+
// Update grid area
|
89
|
+
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
90
|
+
return {
|
91
|
+
gridArea,
|
92
|
+
marginTop
|
93
|
+
};
|
94
|
+
};
|
95
|
+
export const getNewElementXsValues = (type, sectionItems) => {
|
96
|
+
const values = elementXsValues[type] || {};
|
97
|
+
const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
|
98
|
+
const {
|
99
|
+
gridArea,
|
100
|
+
marginTop
|
101
|
+
} = convertToGridArea(y);
|
102
|
+
const BUFFER_MARGIN_TOP = 12;
|
103
|
+
const xsVal = {
|
104
|
+
...values,
|
105
|
+
gridArea_xs: gridArea,
|
106
|
+
marginTop_xs: marginTop + BUFFER_MARGIN_TOP
|
107
|
+
};
|
108
|
+
const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
|
109
|
+
return {
|
110
|
+
xsVal,
|
111
|
+
sectionHeightXs
|
112
|
+
};
|
113
|
+
};
|