@flozy/editor 10.2.1 → 10.2.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 +120 -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 +6 -2
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +25 -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 +21 -6
- 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 -168
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -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 +67 -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 +24 -5
- 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/ColorPickerButton.js +38 -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/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
- package/dist/Editor/common/LinkSettings/index.js +84 -68
- package/dist/Editor/common/LinkSettings/style.js +245 -30
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
- 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 +147 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -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 +2 -0
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- 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/fontSize.js +16 -7
- 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/Uploader.js +8 -0
- package/dist/Editor/common/iconListV2.js +156 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +168 -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 +361 -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 +109 -19
- package/dist/Editor/utils/signature.js +2 -9
- package/package.json +4 -4
@@ -9,6 +9,7 @@ const TextSettings = props => {
|
|
9
9
|
editor,
|
10
10
|
path,
|
11
11
|
theme,
|
12
|
+
onClose,
|
12
13
|
customProps
|
13
14
|
} = props;
|
14
15
|
const item_path = path.split("|").map(m => parseInt(m));
|
@@ -27,7 +28,8 @@ const TextSettings = props => {
|
|
27
28
|
return /*#__PURE__*/_jsx(TextFormat, {
|
28
29
|
classes: classes,
|
29
30
|
editor: editor,
|
30
|
-
customProps: customProps
|
31
|
+
customProps: customProps,
|
32
|
+
closeMainPopup: onClose
|
31
33
|
});
|
32
34
|
};
|
33
35
|
export default TextSettings;
|
@@ -8,7 +8,8 @@ const VideoSettings = props => {
|
|
8
8
|
const {
|
9
9
|
editor,
|
10
10
|
path,
|
11
|
-
customProps
|
11
|
+
customProps,
|
12
|
+
onClose
|
12
13
|
} = props;
|
13
14
|
const item_path = path?.split("|").map(m => parseInt(m));
|
14
15
|
const element_path = [...item_path, 0];
|
@@ -28,7 +29,7 @@ const VideoSettings = props => {
|
|
28
29
|
});
|
29
30
|
};
|
30
31
|
const handleClose = () => {
|
31
|
-
|
32
|
+
onClose();
|
32
33
|
};
|
33
34
|
return /*#__PURE__*/_jsx(Box, {
|
34
35
|
component: "div",
|
@@ -1,8 +1,9 @@
|
|
1
1
|
const useElementSettingsStyle = theme => ({
|
2
2
|
root: {
|
3
3
|
zIndex: 1200,
|
4
|
-
background: theme?.palette?.editor?.
|
5
|
-
|
4
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
5
|
+
border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
|
6
|
+
borderRadius: "20px",
|
6
7
|
overflow: "hidden",
|
7
8
|
boxShadow: "0px 0px 12px 4px #00000014",
|
8
9
|
padding: "10px 16px",
|
@@ -58,28 +59,34 @@ const useElementSettingsStyle = theme => ({
|
|
58
59
|
maxHeight: "500px",
|
59
60
|
overflowX: "hidden",
|
60
61
|
overflowY: "auto",
|
61
|
-
background: theme?.palette?.editor?.
|
62
|
-
paddingLeft: "
|
62
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
63
|
+
paddingLeft: "2px",
|
64
|
+
paddingRight: "6px",
|
65
|
+
overflow: "hidden",
|
66
|
+
"&:hover": {
|
67
|
+
overflowY: "auto",
|
68
|
+
"&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
|
69
|
+
background: `${theme?.palette?.editor?.brainPopupScroll} !important`
|
70
|
+
},
|
71
|
+
"&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
|
72
|
+
visibility: "hidden"
|
73
|
+
}
|
74
|
+
},
|
63
75
|
"& .MuiTypography-root, .MuiInputBase-root, input": {
|
64
76
|
color: theme?.palette?.editor?.textColor
|
65
77
|
},
|
66
|
-
"& .MuiInputBase-root, input": {
|
67
|
-
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
68
|
-
},
|
69
78
|
"& .borderInput": {
|
70
79
|
background: theme?.palette?.editor?.background,
|
71
80
|
color: theme?.palette?.editor?.textColor
|
72
81
|
},
|
73
|
-
"& .MuiCheckbox-root": {
|
74
|
-
"& svg": {
|
75
|
-
fill: theme?.palette?.editor?.textColor
|
76
|
-
}
|
77
|
-
},
|
78
82
|
"& .fillPath": {
|
79
83
|
fill: theme?.palette?.editor?.textColor
|
80
84
|
},
|
81
85
|
"& .MuiIconButton-root": {
|
82
86
|
color: theme?.palette?.editor?.textColor
|
87
|
+
},
|
88
|
+
"& .MuiFormHelperText-root": {
|
89
|
+
color: theme?.palette?.editor?.textColor
|
83
90
|
}
|
84
91
|
},
|
85
92
|
"& .item-wrapper": {
|
@@ -104,6 +111,134 @@ const useElementSettingsStyle = theme => ({
|
|
104
111
|
}
|
105
112
|
}
|
106
113
|
}
|
114
|
+
},
|
115
|
+
"& .settingsPopUp": {
|
116
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
117
|
+
"& .text-formatter-popup": {
|
118
|
+
paddingRight: "10px",
|
119
|
+
overflow: "hidden",
|
120
|
+
"&:hover": {
|
121
|
+
overflow: "auto",
|
122
|
+
"&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
|
123
|
+
background: `${theme?.palette?.editor?.brainPopupScroll} !important`
|
124
|
+
},
|
125
|
+
"&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
|
126
|
+
visibility: "hidden"
|
127
|
+
}
|
128
|
+
},
|
129
|
+
"& .more-btn-cbs": {
|
130
|
+
color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
|
131
|
+
border: `1px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
|
132
|
+
paddingTop: "10px",
|
133
|
+
"& svg": {
|
134
|
+
width: "20px",
|
135
|
+
height: "24px"
|
136
|
+
}
|
137
|
+
},
|
138
|
+
"& .MuiInputBase-root": {
|
139
|
+
height: "36px"
|
140
|
+
}
|
141
|
+
},
|
142
|
+
"& .popUpHeader": {
|
143
|
+
fontSize: "16px",
|
144
|
+
fontFamily: "'Inter',sans-serif",
|
145
|
+
fontWeight: "700",
|
146
|
+
fontSize: "16px",
|
147
|
+
lineHeight: "25px",
|
148
|
+
"& button": {
|
149
|
+
background: theme?.palette?.editor?.closeButtonBackground,
|
150
|
+
borderRadius: "8px",
|
151
|
+
"& svg": {
|
152
|
+
fill: theme?.palette?.editor?.closeButtonSvgStroke
|
153
|
+
}
|
154
|
+
}
|
155
|
+
},
|
156
|
+
"& .MuiTypography-root": {
|
157
|
+
color: `${theme?.palette?.editor?.textColor} !important`
|
158
|
+
},
|
159
|
+
"& .MuiInputBase-root": {
|
160
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
161
|
+
borderRadius: "8px",
|
162
|
+
fontSize: "12px",
|
163
|
+
height: "36px",
|
164
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
165
|
+
"& fieldset": {
|
166
|
+
border: `1px solid transparent !important`,
|
167
|
+
background: "transparent",
|
168
|
+
borderRadius: "8px"
|
169
|
+
// fontSize: "12px",
|
170
|
+
},
|
171
|
+
|
172
|
+
"& input": {
|
173
|
+
// border: `1px solid transparent`,
|
174
|
+
// background: theme?.palette?.editor?.inputFieldBgColor,
|
175
|
+
borderRadius: "8px"
|
176
|
+
// fontSize: "12px",
|
177
|
+
}
|
178
|
+
},
|
179
|
+
|
180
|
+
"& .editor-dd": {
|
181
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
182
|
+
border: `1px solid transparent !important`
|
183
|
+
}
|
184
|
+
},
|
185
|
+
"& .MuiAutocomplete-root": {
|
186
|
+
"& fieldset": {
|
187
|
+
border: `1px solid transparent !important`
|
188
|
+
}
|
189
|
+
},
|
190
|
+
"& .sliderInput": {
|
191
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
192
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
193
|
+
borderRadius: "10px",
|
194
|
+
paddingLeft: "10px",
|
195
|
+
width: "50px !important"
|
196
|
+
},
|
197
|
+
"& .selctedBtnIcon": {
|
198
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
199
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
200
|
+
borderRadius: "10px",
|
201
|
+
height: "36px",
|
202
|
+
"& svg": {
|
203
|
+
color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
204
|
+
}
|
205
|
+
},
|
206
|
+
"& .muiIconsListParent": {
|
207
|
+
"& svg": {
|
208
|
+
color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
209
|
+
},
|
210
|
+
"&::-webkit-scrollbar-thumb": {
|
211
|
+
background: `${theme?.palette?.editor?.brainPopupScroll} !important`
|
212
|
+
},
|
213
|
+
"&::-webkit-scrollbar-track": {
|
214
|
+
visibility: "hidden"
|
215
|
+
}
|
216
|
+
},
|
217
|
+
"& .menu-item-app-header": {
|
218
|
+
paddingBottom: "5px",
|
219
|
+
"& .text-field1": {
|
220
|
+
marginRight: "5px"
|
221
|
+
},
|
222
|
+
"& .settingsIcon, .deleteIcon": {
|
223
|
+
width: "20px",
|
224
|
+
height: "20px",
|
225
|
+
"& path": {
|
226
|
+
stroke: theme?.palette?.editor?.closeButtonSvgStroke
|
227
|
+
}
|
228
|
+
}
|
229
|
+
},
|
230
|
+
"& .MuiPaper-root": {
|
231
|
+
background: theme?.palette?.editor?.miniToolBarBackground
|
232
|
+
},
|
233
|
+
"& .iconRadioButton": {
|
234
|
+
"& svg": {
|
235
|
+
height: "24px",
|
236
|
+
width: "24px"
|
237
|
+
},
|
238
|
+
"& .MuiRadio-root": {
|
239
|
+
paddingLeft: "0px"
|
240
|
+
}
|
241
|
+
}
|
107
242
|
}
|
108
243
|
},
|
109
244
|
dialog: {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Box, Paper, Popper, Typography, Tooltip, IconButton } from "@mui/material";
|
3
|
-
import
|
2
|
+
import { Box, Paper, Popper, Typography, Tooltip, IconButton, Grid } from "@mui/material";
|
3
|
+
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
|
4
4
|
import useOptionsPopupStyle from "./style";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -30,7 +30,7 @@ const OptionsPopup = props => {
|
|
30
30
|
className: "papper-root",
|
31
31
|
children: [/*#__PURE__*/_jsxs(Typography, {
|
32
32
|
variant: "div",
|
33
|
-
className: "item-wrapper title",
|
33
|
+
className: "item-wrapper title sectionOptionTitle",
|
34
34
|
children: [translation(title), /*#__PURE__*/_jsx(Box, {
|
35
35
|
component: "div",
|
36
36
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
@@ -38,11 +38,14 @@ const OptionsPopup = props => {
|
|
38
38
|
arrow: true,
|
39
39
|
children: /*#__PURE__*/_jsx(IconButton, {
|
40
40
|
onClick: handleClose,
|
41
|
-
children: /*#__PURE__*/_jsx(
|
41
|
+
children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
|
42
42
|
})
|
43
43
|
})
|
44
44
|
})]
|
45
|
-
}),
|
45
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
46
|
+
className: "sectionOptionChild",
|
47
|
+
children: children
|
48
|
+
})]
|
46
49
|
})
|
47
50
|
}) : null;
|
48
51
|
};
|
@@ -3,31 +3,139 @@ const useOptionsPopupStyle = ({
|
|
3
3
|
}) => ({
|
4
4
|
root: {
|
5
5
|
zIndex: 1200,
|
6
|
-
background: theme?.palette?.editor?.
|
7
|
-
|
6
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
7
|
+
border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
|
8
|
+
borderRadius: "20px",
|
8
9
|
overflow: "hidden",
|
9
|
-
boxShadow: "
|
10
|
+
boxShadow: "0px 0px 12px 4px #00000014",
|
10
11
|
marginRight: "4px !important",
|
12
|
+
padding: "0px 5px",
|
13
|
+
fontFamily: "'Inter',sans-serif",
|
14
|
+
"& .MuiPaper-root": {
|
15
|
+
background: theme?.palette?.editor?.miniToolBarBackground
|
16
|
+
},
|
17
|
+
"& .sectionOptionTitle": {
|
18
|
+
fontSize: "16px",
|
19
|
+
fontFamily: "'Inter',sans-serif",
|
20
|
+
fontWeight: "700",
|
21
|
+
fontSize: "16px",
|
22
|
+
lineHeight: "25px",
|
23
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
24
|
+
"& button": {
|
25
|
+
background: theme?.palette?.editor?.closeButtonBackground,
|
26
|
+
borderRadius: "8px",
|
27
|
+
"& svg": {
|
28
|
+
fill: theme?.palette?.editor?.closeButtonSvgStroke
|
29
|
+
}
|
30
|
+
}
|
31
|
+
},
|
32
|
+
"& .sectionOptionChild": {
|
33
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
34
|
+
"& .MuiBox-root": {
|
35
|
+
maxHeight: "unset"
|
36
|
+
},
|
37
|
+
"& .MuiInputBase-root, fieldset": {
|
38
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
39
|
+
borderRadius: "8px",
|
40
|
+
"& fieldset": {
|
41
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
42
|
+
background: "transparent",
|
43
|
+
borderRadius: "8px"
|
44
|
+
},
|
45
|
+
"& input": {
|
46
|
+
border: `1px solid transparent`,
|
47
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
48
|
+
borderRadius: "8px",
|
49
|
+
fontSize: "12px",
|
50
|
+
color: theme?.palette?.editor?.textColor
|
51
|
+
}
|
52
|
+
},
|
53
|
+
"& p": {
|
54
|
+
color: theme?.palette?.editor?.textColor
|
55
|
+
},
|
56
|
+
"& .sliderInput": {
|
57
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
58
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
59
|
+
borderRadius: "10px"
|
60
|
+
},
|
61
|
+
"& .style-settings-wrpr": {
|
62
|
+
overflow: "hidden",
|
63
|
+
"&:hover": {
|
64
|
+
overflowY: "auto",
|
65
|
+
"&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
|
66
|
+
background: `${theme?.palette?.editor?.brainPopupScroll} !important`
|
67
|
+
},
|
68
|
+
"&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
|
69
|
+
visibility: "hidden"
|
70
|
+
}
|
71
|
+
}
|
72
|
+
},
|
73
|
+
"& svg": {
|
74
|
+
width: "17.5px",
|
75
|
+
height: "17.5px"
|
76
|
+
}
|
77
|
+
},
|
78
|
+
"& .MuiList-root": {
|
79
|
+
"& .MuiButtonBase-root": {
|
80
|
+
padding: "8px 12px",
|
81
|
+
"& .MuiTypography-root": {
|
82
|
+
color: `${theme?.palette?.editor?.textColor} !important`,
|
83
|
+
fontSize: "14px",
|
84
|
+
fontWeight: "500",
|
85
|
+
fontFamily: "'Inter',sans-serif"
|
86
|
+
},
|
87
|
+
"&:hover": {
|
88
|
+
background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
|
89
|
+
"& .MuiTypography-root": {
|
90
|
+
color: `${theme?.palette?.editor?.textColor} !important`
|
91
|
+
},
|
92
|
+
"& .MuiListItemIcon-root": {
|
93
|
+
"& .signatureElementIcon, & .newLineElementIcon": {
|
94
|
+
"& path": {
|
95
|
+
fill: `${theme?.palette?.editor?.textColor}`
|
96
|
+
}
|
97
|
+
},
|
98
|
+
"& .commonSvgStyle, & .commonSvgStyle2": {
|
99
|
+
"& path": {
|
100
|
+
stroke: `${theme?.palette?.editor?.textColor}`
|
101
|
+
}
|
102
|
+
},
|
103
|
+
"& .colorBoxElementIcon": {
|
104
|
+
"& path": {
|
105
|
+
stroke: `${theme?.palette?.editor?.textColor}`,
|
106
|
+
fill: "none"
|
107
|
+
}
|
108
|
+
},
|
109
|
+
"& .gridElementIcon": {
|
110
|
+
"& path": {
|
111
|
+
stroke: `${theme?.palette?.editor?.textColor}`,
|
112
|
+
fill: `${theme?.palette?.editor?.textColor}`
|
113
|
+
}
|
114
|
+
}
|
115
|
+
}
|
116
|
+
}
|
117
|
+
}
|
118
|
+
},
|
119
|
+
"& .sectionMoreOption": {
|
120
|
+
"& .MuiButtonBase-root": {
|
121
|
+
padding: "12px 12px",
|
122
|
+
color: `${theme?.palette?.editor?.textColor} !important`,
|
123
|
+
fontSize: "14px",
|
124
|
+
fontWeight: "500",
|
125
|
+
fontFamily: "'Inter',sans-serif"
|
126
|
+
}
|
127
|
+
},
|
11
128
|
"& .papper-root": {
|
12
129
|
width: "344px",
|
13
130
|
boxShadow: "none",
|
14
|
-
border: `1px solid ${theme?.palette?.editor?.borderColor}`,
|
15
131
|
borderRadius: "7px",
|
16
132
|
background: theme?.palette?.editor?.background,
|
17
133
|
"& .MuiTypography-root, .MuiInputBase-root, input": {
|
18
134
|
color: theme?.palette?.editor?.textColor
|
19
135
|
},
|
20
|
-
"& .MuiInputBase-root, input": {
|
21
|
-
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
22
|
-
},
|
23
136
|
"& .borderInput": {
|
24
137
|
background: theme?.palette?.editor?.background,
|
25
138
|
color: theme?.palette?.editor?.textColor
|
26
|
-
},
|
27
|
-
"& .MuiCheckbox-root": {
|
28
|
-
"& svg": {
|
29
|
-
fill: theme?.palette?.editor?.textColor
|
30
|
-
}
|
31
139
|
}
|
32
140
|
},
|
33
141
|
"& .item-list-wrpr": {
|
@@ -37,13 +145,7 @@ const useOptionsPopupStyle = ({
|
|
37
145
|
"& .MuiListItemButton-root": {
|
38
146
|
borderRadius: "7px",
|
39
147
|
color: theme?.palette?.editor?.textColor,
|
40
|
-
"
|
41
|
-
color: theme?.palette?.editor?.activeColor,
|
42
|
-
background: "rgba(233, 243, 254, 1)",
|
43
|
-
"& .MuiTypography-root": {
|
44
|
-
color: theme?.palette?.editor?.activeColor
|
45
|
-
}
|
46
|
-
}
|
148
|
+
alignItems: "center"
|
47
149
|
}
|
48
150
|
},
|
49
151
|
"& .item-wrapper": {
|
@@ -10,23 +10,27 @@ const SwitchViewport = props => {
|
|
10
10
|
const {
|
11
11
|
breakpoint,
|
12
12
|
onChange,
|
13
|
-
translation
|
13
|
+
translation,
|
14
|
+
show
|
14
15
|
} = props;
|
15
16
|
const classes = useSwitchViewport();
|
16
17
|
const {
|
17
|
-
|
18
|
+
setSelectedElement
|
18
19
|
} = useEditorContext();
|
19
20
|
useEffect(() => {
|
20
|
-
|
21
|
+
// to reset selection on viewport changes - FS-6589
|
22
|
+
setSelectedElement({});
|
21
23
|
}, [breakpoint]);
|
22
24
|
return /*#__PURE__*/_jsxs(Box, {
|
23
25
|
sx: classes.root,
|
26
|
+
style: {
|
27
|
+
display: show ? "block" : "none"
|
28
|
+
},
|
24
29
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
25
30
|
title: translation("Desktop View"),
|
26
31
|
children: /*#__PURE__*/_jsx(IconButton, {
|
27
32
|
className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
|
28
33
|
onClick: () => {
|
29
|
-
setActiveBreakPoint("");
|
30
34
|
onChange("");
|
31
35
|
},
|
32
36
|
children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
|
@@ -36,7 +40,6 @@ const SwitchViewport = props => {
|
|
36
40
|
children: /*#__PURE__*/_jsx(IconButton, {
|
37
41
|
className: `${breakpoint === "xs" ? "active" : ""}`,
|
38
42
|
onClick: () => {
|
39
|
-
setActiveBreakPoint("xs");
|
40
43
|
onChange("xs");
|
41
44
|
},
|
42
45
|
children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
function MainThemeProvider({
|
4
|
+
children,
|
5
|
+
userSelectedTheme,
|
6
|
+
theme = {}
|
7
|
+
}) {
|
8
|
+
const themeVars = extendTheme(userSelectedTheme?.theme?.cssVars || {});
|
9
|
+
return /*#__PURE__*/_jsx(CssVarsProvider, {
|
10
|
+
theme: {
|
11
|
+
...themeVars,
|
12
|
+
...theme
|
13
|
+
},
|
14
|
+
children: children
|
15
|
+
});
|
16
|
+
}
|
17
|
+
export default MainThemeProvider;
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { useTheme,
|
2
|
+
import { useTheme, createTheme, useMediaQuery } from "@mui/material";
|
3
3
|
import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
|
4
|
+
import MainThemeProvider from "./MainThemeProvider";
|
4
5
|
|
5
6
|
// Custom breakpoints functions
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -59,13 +60,15 @@ const extendedTheme = (prevTheme, isPrintMode) => createTheme({
|
|
59
60
|
} : getBreakPoints(prevTheme)
|
60
61
|
});
|
61
62
|
const ViewportStimulator = ({
|
62
|
-
children
|
63
|
+
children,
|
64
|
+
selectedTheme
|
63
65
|
}) => {
|
64
66
|
const theme = useTheme();
|
65
67
|
const isPrintMode = useMediaQuery("print");
|
66
68
|
const viewportTheme = extendedTheme(theme, isPrintMode);
|
67
|
-
return /*#__PURE__*/_jsx(
|
69
|
+
return /*#__PURE__*/_jsx(MainThemeProvider, {
|
68
70
|
theme: viewportTheme,
|
71
|
+
userSelectedTheme: selectedTheme,
|
69
72
|
children: children
|
70
73
|
});
|
71
74
|
};
|
@@ -2,6 +2,7 @@ import { Transforms, Node, Path, Editor } from "slate";
|
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
3
|
import { getNode, handleNegativeInteger } from "../../../utils/helper";
|
4
4
|
import { handleBoxAlignment } from "../VirtualElement/helper";
|
5
|
+
import { convertToGridArea, findMaxYValue } from "../../../Elements/FreeGrid/helper";
|
5
6
|
export const ROW_HEIGHT = 50;
|
6
7
|
|
7
8
|
// const MARGIN_OF = {
|
@@ -22,18 +23,27 @@ export function updateRows() {}
|
|
22
23
|
export function updateCols() {}
|
23
24
|
const handleMoveNode = (editor, path, newPath, {
|
24
25
|
isEmpty
|
25
|
-
}, autoAlign) => {
|
26
|
+
}, autoAlign, moveToNode) => {
|
26
27
|
try {
|
27
28
|
let replaceNode = Node.get(editor, path);
|
29
|
+
let heightDiff = 0;
|
28
30
|
if (autoAlign) {
|
29
|
-
|
31
|
+
const y = findMaxYValue(moveToNode?.children);
|
32
|
+
const {
|
33
|
+
gridArea,
|
34
|
+
marginTop
|
35
|
+
} = convertToGridArea(y);
|
30
36
|
replaceNode = {
|
31
37
|
...replaceNode,
|
32
|
-
gridArea_xs:
|
33
|
-
|
34
|
-
|
38
|
+
gridArea_xs: gridArea,
|
39
|
+
marginTop_xs: marginTop + 12,
|
40
|
+
xs_updatedOn: new Date().getTime()
|
35
41
|
};
|
42
|
+
const newHeight = y + replaceNode?.height_xs + 12;
|
43
|
+
const diffH = newHeight - moveToNode?.height_xs;
|
44
|
+
heightDiff = diffH >= 0 ? diffH : 0;
|
36
45
|
}
|
46
|
+
let rPath;
|
37
47
|
if (isEmpty) {
|
38
48
|
const toPath = [...newPath, 0];
|
39
49
|
Transforms.insertNodes(editor, [{
|
@@ -44,7 +54,7 @@ const handleMoveNode = (editor, path, newPath, {
|
|
44
54
|
Transforms.removeNodes(editor, {
|
45
55
|
at: path
|
46
56
|
});
|
47
|
-
|
57
|
+
rPath = toPath;
|
48
58
|
} else {
|
49
59
|
Transforms.insertNodes(editor, [{
|
50
60
|
...replaceNode
|
@@ -54,8 +64,12 @@ const handleMoveNode = (editor, path, newPath, {
|
|
54
64
|
Transforms.removeNodes(editor, {
|
55
65
|
at: path
|
56
66
|
});
|
57
|
-
|
67
|
+
rPath = newPath;
|
58
68
|
}
|
69
|
+
return {
|
70
|
+
rPath,
|
71
|
+
heightDiff
|
72
|
+
};
|
59
73
|
} catch (err) {
|
60
74
|
console.log(err);
|
61
75
|
console.log("Drop Node error");
|
@@ -210,7 +224,7 @@ export function onDropItem(props, parentClass) {
|
|
210
224
|
at: moveTo,
|
211
225
|
match: n => n.type === "freegrid"
|
212
226
|
});
|
213
|
-
const [
|
227
|
+
const [, sectionPath] = sectionData || [];
|
214
228
|
if (needMove && isInsidePath(from, moveTo)) {
|
215
229
|
reRenderSectionPath = sectionPath;
|
216
230
|
} else {
|
@@ -229,14 +243,6 @@ export function onDropItem(props, parentClass) {
|
|
229
243
|
const isBoxHeader = currentNode?.childType === "appHeader" && moveTo?.length > 2;
|
230
244
|
if (isBoxHeader) {
|
231
245
|
// will handle on <BoxHeaderAutoAlignment />
|
232
|
-
} else if (moveTo?.length === 2 && autoAlign) {
|
233
|
-
// auto align in mobile
|
234
|
-
Transforms.setNodes(editor, {
|
235
|
-
xs_updatedOn: null,
|
236
|
-
xs_updatedOn: new Date().getTime()
|
237
|
-
}, {
|
238
|
-
at: moveTo
|
239
|
-
});
|
240
246
|
} else if (autoAlign) {
|
241
247
|
Transforms.setNodes(editor, {
|
242
248
|
autoAlign: true,
|
@@ -245,12 +251,15 @@ export function onDropItem(props, parentClass) {
|
|
245
251
|
at: moveTo
|
246
252
|
});
|
247
253
|
}
|
248
|
-
const
|
254
|
+
const {
|
255
|
+
rPath,
|
256
|
+
heightDiff
|
257
|
+
} = handleMoveNode(editor, path, newPath, {
|
249
258
|
isEmpty
|
250
|
-
}, autoAlign);
|
259
|
+
}, autoAlign, toSectionNode) || {};
|
251
260
|
reRenderChildNodes(editor, reRenderSectionPath || moveTo);
|
252
261
|
if (autoAlign && !isBoxHeader) {
|
253
|
-
handleBoxAlignment(editor,
|
262
|
+
handleBoxAlignment(editor, sectionPath, heightDiff);
|
254
263
|
}
|
255
264
|
return {
|
256
265
|
updated_at: rPath
|
@@ -87,7 +87,9 @@ export function updatePositions(props, closestClass) {
|
|
87
87
|
newPath = [...newPath, toSectionNode?.children?.length];
|
88
88
|
}
|
89
89
|
newPath = newPath.map(m => parseInt(m));
|
90
|
-
const
|
90
|
+
const {
|
91
|
+
rPath
|
92
|
+
} = handleMoveNode(editor, path, newPath, {
|
91
93
|
isEmpty
|
92
94
|
});
|
93
95
|
// to update path index need to re-render items in parent sections
|