@flozy/editor 10.3.9 → 10.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +17 -16
- package/dist/Editor/CommonEditor.js +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 +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 +30 -28
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +9 -7
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -1
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Form/Form.js +3 -3
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +0 -1
- package/dist/Editor/Elements/Form/FormField.js +3 -2
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -31
- 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 +7 -7
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- 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/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 +58 -10
- 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/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 +28 -0
- 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 +45 -66
- package/dist/Editor/common/LinkSettings/index.js +14 -28
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +164 -244
- 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 +4 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
- 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 +0 -1
- package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
- 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 -7
- package/dist/Editor/common/Select/styles.js +31 -2
- package/dist/Editor/common/Shorthands/elements.js +54 -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/textOptions.js +15 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +76 -0
- package/dist/Editor/common/iconslist.js +21 -0
- package/dist/Editor/commonStyle.js +116 -61
- 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 +9 -3
- 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 +161 -37
- 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/formfield.js +1 -0
- 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
@@ -33,7 +33,8 @@ const MultiSelectWithPopover = props => {
|
|
33
33
|
onChange,
|
34
34
|
onUpdate,
|
35
35
|
property,
|
36
|
-
wrapColumn = false
|
36
|
+
wrapColumn = false,
|
37
|
+
translation
|
37
38
|
} = props;
|
38
39
|
const [anchorEl, setAnchorEl] = useState(null);
|
39
40
|
const [anchorElOption, setAnchorElOption] = useState(null);
|
@@ -170,11 +171,11 @@ const MultiSelectWithPopover = props => {
|
|
170
171
|
variant: "filled",
|
171
172
|
sx: {
|
172
173
|
backgroundColor: option?.color,
|
173
|
-
color:
|
174
|
+
color: "#0F172A",
|
174
175
|
"& .MuiChip-deleteIcon": {
|
175
176
|
flexShrink: 0,
|
176
177
|
"& path": {
|
177
|
-
stroke:
|
178
|
+
stroke: "#0F172A !important"
|
178
179
|
}
|
179
180
|
},
|
180
181
|
"&:hover": {
|
@@ -221,9 +222,9 @@ const MultiSelectWithPopover = props => {
|
|
221
222
|
maxHeight: "250px",
|
222
223
|
overflowY: "auto",
|
223
224
|
overflowX: "hidden",
|
224
|
-
pr:
|
225
|
-
pl:
|
226
|
-
marginTop:
|
225
|
+
pr: "12px",
|
226
|
+
pl: "12px",
|
227
|
+
marginTop: "12px",
|
227
228
|
...customScrollStyles
|
228
229
|
}
|
229
230
|
},
|
@@ -281,11 +282,11 @@ const MultiSelectWithPopover = props => {
|
|
281
282
|
"& .MuiSvgIcon-root": {
|
282
283
|
fontSize: 20
|
283
284
|
},
|
284
|
-
|
285
|
+
"& rect": {
|
285
286
|
fill: theme?.palette?.editor?.closeButtonSvgStroke
|
286
287
|
},
|
287
|
-
|
288
|
-
backgroundColor:
|
288
|
+
"&:hover": {
|
289
|
+
backgroundColor: "transparent"
|
289
290
|
}
|
290
291
|
},
|
291
292
|
children: /*#__PURE__*/_jsx(Icon, {
|
@@ -296,9 +297,9 @@ const MultiSelectWithPopover = props => {
|
|
296
297
|
},
|
297
298
|
sx: {
|
298
299
|
backgroundColor: "transparent",
|
299
|
-
fontFamily:
|
300
|
+
fontFamily: "Inter",
|
300
301
|
fontWeight: 400,
|
301
|
-
fontSize:
|
302
|
+
fontSize: "12px"
|
302
303
|
},
|
303
304
|
placeholder: "Create new one..."
|
304
305
|
}),
|
@@ -314,11 +315,11 @@ const MultiSelectWithPopover = props => {
|
|
314
315
|
deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
|
315
316
|
sx: {
|
316
317
|
backgroundColor: option?.color,
|
317
|
-
color:
|
318
|
+
color: "#0F172A",
|
318
319
|
"& .MuiChip-deleteIcon": {
|
319
320
|
flexShrink: 0,
|
320
321
|
"& path": {
|
321
|
-
stroke:
|
322
|
+
stroke: "#0F172A !important"
|
322
323
|
}
|
323
324
|
},
|
324
325
|
"&:hover": {
|
@@ -328,13 +329,13 @@ const MultiSelectWithPopover = props => {
|
|
328
329
|
}, index))
|
329
330
|
}), /*#__PURE__*/_jsx(Divider, {
|
330
331
|
sx: {
|
331
|
-
mt:
|
332
|
+
mt: "12px",
|
332
333
|
borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
|
333
334
|
boxShadow: theme?.palette?.editor?.dividerDropShadow
|
334
335
|
}
|
335
336
|
}), /*#__PURE__*/_jsx(Box, {
|
336
337
|
sx: {
|
337
|
-
pl:
|
338
|
+
pl: "4px"
|
338
339
|
},
|
339
340
|
children: /*#__PURE__*/_jsxs(List, {
|
340
341
|
sx: {
|
@@ -345,11 +346,11 @@ const MultiSelectWithPopover = props => {
|
|
345
346
|
children: [/*#__PURE__*/_jsx(Typography, {
|
346
347
|
sx: {
|
347
348
|
mb: 1,
|
348
|
-
pl:
|
349
|
+
pl: "8px",
|
349
350
|
color: theme?.palette?.editor?.secondaryTextColor,
|
350
|
-
fontFamily:
|
351
|
+
fontFamily: "Inter",
|
351
352
|
fontWeight: 400,
|
352
|
-
fontSize:
|
353
|
+
fontSize: "12px"
|
353
354
|
},
|
354
355
|
children: "Choose an option or create one"
|
355
356
|
}), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
|
@@ -362,19 +363,19 @@ const MultiSelectWithPopover = props => {
|
|
362
363
|
sx: {
|
363
364
|
paddingTop: "4px",
|
364
365
|
paddingBottom: "4px",
|
365
|
-
justifyContent:
|
366
|
-
|
367
|
-
|
366
|
+
justifyContent: "space-between",
|
367
|
+
"&:hover": {
|
368
|
+
"& path": {
|
368
369
|
stroke: theme?.palette?.editor?.activeColor
|
369
370
|
},
|
370
|
-
borderRadius:
|
371
|
+
borderRadius: "12px"
|
371
372
|
}
|
372
373
|
},
|
373
374
|
children: [/*#__PURE__*/_jsx(Chip, {
|
374
375
|
label: option?.value,
|
375
376
|
sx: {
|
376
377
|
backgroundColor: option?.color,
|
377
|
-
color:
|
378
|
+
color: "#0F172A",
|
378
379
|
fontWeight: 500,
|
379
380
|
fontSize: "12px",
|
380
381
|
fontFamily: "Inter",
|
@@ -388,11 +389,11 @@ const MultiSelectWithPopover = props => {
|
|
388
389
|
}), /*#__PURE__*/_jsx(IconButton, {
|
389
390
|
size: "small",
|
390
391
|
sx: {
|
391
|
-
|
392
|
+
"& path": {
|
392
393
|
stroke: theme?.palette?.editor?.closeButtonSvgStroke
|
393
394
|
},
|
394
|
-
|
395
|
-
backgroundColor:
|
395
|
+
"&:hover": {
|
396
|
+
backgroundColor: "transparent"
|
396
397
|
}
|
397
398
|
},
|
398
399
|
onClick: e => handleEditOption(e, index),
|
@@ -421,7 +422,7 @@ const MultiSelectWithPopover = props => {
|
|
421
422
|
label: `${inputValue}`,
|
422
423
|
sx: {
|
423
424
|
backgroundColor: chipColor,
|
424
|
-
color:
|
425
|
+
color: "#0F172A",
|
425
426
|
fontWeight: 500,
|
426
427
|
fontSize: "12px",
|
427
428
|
fontFamily: "Inter",
|
@@ -442,7 +443,8 @@ const MultiSelectWithPopover = props => {
|
|
442
443
|
anchorEl: anchorElOption,
|
443
444
|
mode: mode,
|
444
445
|
onClose: onClose,
|
445
|
-
onEvent: onEditOption
|
446
|
+
onEvent: onEditOption,
|
447
|
+
translation: translation
|
446
448
|
}) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
|
447
449
|
message: "Option already selected!",
|
448
450
|
setShowSnackBar: setShowSnackBar
|
@@ -10,7 +10,8 @@ const MultiSelectType = props => {
|
|
10
10
|
options,
|
11
11
|
label = "",
|
12
12
|
readOnly,
|
13
|
-
settings
|
13
|
+
settings,
|
14
|
+
translation
|
14
15
|
} = props;
|
15
16
|
const {
|
16
17
|
onChange,
|
@@ -33,11 +34,11 @@ const MultiSelectType = props => {
|
|
33
34
|
};
|
34
35
|
const handleUpdate = data => {
|
35
36
|
const updateData = {
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
37
|
+
label: "Multi Select",
|
38
|
+
visible: true,
|
39
|
+
key: property,
|
40
|
+
type: "multi-select",
|
41
|
+
options: data
|
41
42
|
};
|
42
43
|
onUpdateProperty(updateData);
|
43
44
|
};
|
@@ -51,7 +52,8 @@ const MultiSelectType = props => {
|
|
51
52
|
placeholder: label,
|
52
53
|
disabled: readOnly,
|
53
54
|
property: property,
|
54
|
-
wrapColumn: wrapColumn
|
55
|
+
wrapColumn: wrapColumn,
|
56
|
+
translation: translation
|
55
57
|
});
|
56
58
|
};
|
57
59
|
export default MultiSelectType;
|
@@ -11,7 +11,8 @@ const RenderRow = props => {
|
|
11
11
|
properties,
|
12
12
|
onSelect,
|
13
13
|
selected,
|
14
|
-
readOnly
|
14
|
+
readOnly,
|
15
|
+
translation
|
15
16
|
} = props;
|
16
17
|
const showProperties = properties?.filter(f => f.visible);
|
17
18
|
return showProperties?.map((property, i) => {
|
@@ -22,7 +23,8 @@ const RenderRow = props => {
|
|
22
23
|
property: property,
|
23
24
|
onSelect: onSelect,
|
24
25
|
selected: selected,
|
25
|
-
readOnly: readOnly
|
26
|
+
readOnly: readOnly,
|
27
|
+
translation: translation
|
26
28
|
}, `${property.key}_${i}`);
|
27
29
|
});
|
28
30
|
};
|
@@ -33,7 +35,8 @@ const ViewData = props => {
|
|
33
35
|
customProps
|
34
36
|
} = props;
|
35
37
|
const {
|
36
|
-
readOnly
|
38
|
+
readOnly,
|
39
|
+
translation
|
37
40
|
} = customProps || {};
|
38
41
|
const {
|
39
42
|
properties,
|
@@ -67,7 +70,8 @@ const ViewData = props => {
|
|
67
70
|
properties: properties,
|
68
71
|
onSelect: onSelect,
|
69
72
|
selected: selectedRows?.includes(row?.id),
|
70
|
-
readOnly: readOnly
|
73
|
+
readOnly: readOnly,
|
74
|
+
translation: translation
|
71
75
|
}), /*#__PURE__*/_jsx("td", {}), /*#__PURE__*/_jsx("td", {})]
|
72
76
|
}, i);
|
73
77
|
}), /*#__PURE__*/_jsx("tr", {
|
@@ -89,7 +89,7 @@ const VideoPlaceholder = props => {
|
|
89
89
|
},
|
90
90
|
children: [/*#__PURE__*/_jsx(Icon, {
|
91
91
|
icon: "video"
|
92
|
-
}), TYPE_LABELS[type] ||
|
92
|
+
}), translation(TYPE_LABELS[type] || "Embed Video or Other")]
|
93
93
|
}) : /*#__PURE__*/_jsxs(Box, {
|
94
94
|
sx: {
|
95
95
|
color: "#64748B !important",
|
@@ -4,7 +4,6 @@ import { Node } from "slate";
|
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
5
5
|
import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
|
6
6
|
import DeleteIcon from "@mui/icons-material/Delete";
|
7
|
-
import BackupIcon from "@mui/icons-material/Backup";
|
8
7
|
import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
|
9
8
|
import FormPopup from "./FormPopup";
|
10
9
|
import ButtonPopup from "../Button/ButtonPopup";
|
@@ -160,7 +159,8 @@ const Form = props => {
|
|
160
159
|
[pair[0]]: pair[1],
|
161
160
|
placeholder: placeholder,
|
162
161
|
form_name: formName,
|
163
|
-
tagName: tagName
|
162
|
+
tagName: tagName,
|
163
|
+
uid: fieldData?.uid
|
164
164
|
});
|
165
165
|
}
|
166
166
|
let params = {
|
@@ -207,7 +207,7 @@ const Form = props => {
|
|
207
207
|
}, {
|
208
208
|
at: path
|
209
209
|
});
|
210
|
-
// adding form field style to the current form node
|
210
|
+
// adding form field style to the current form node
|
211
211
|
const currentNode = Node.get(editor, path);
|
212
212
|
if (currentNode) {
|
213
213
|
currentNode.children.forEach((item, index) => {
|
@@ -1,5 +1,5 @@
|
|
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
5
|
import FormElements from "./FormElements";
|
@@ -9,6 +9,7 @@ import { DeleteIcon } from "../../assets/svg/AIIcons";
|
|
9
9
|
import { SettingsIcon } from "../../assets/svg/TableIcons";
|
10
10
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
11
11
|
import useCommonStyle from "../../commonStyle";
|
12
|
+
import { getNode } from "../../utils/helper";
|
12
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
14
15
|
const FormField = props => {
|
@@ -35,7 +36,7 @@ const FormField = props => {
|
|
35
36
|
const formPath = path.slice(0, path.length - 1);
|
36
37
|
const {
|
37
38
|
metadatamapping
|
38
|
-
} =
|
39
|
+
} = getNode(editor, formPath) || {};
|
39
40
|
const updatedElement = {
|
40
41
|
...element,
|
41
42
|
metadatamapping
|
@@ -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 = {
|
@@ -140,8 +142,10 @@ const FreeGrid = props => {
|
|
140
142
|
});
|
141
143
|
break;
|
142
144
|
case "duplicateSection":
|
145
|
+
const currentNode = Node.get(editor, cur_root_path);
|
146
|
+
const updatedFormNameNode = updateFormName(currentNode);
|
143
147
|
Transforms.insertNodes(editor, [{
|
144
|
-
...JSON.parse(JSON.stringify(
|
148
|
+
...JSON.parse(JSON.stringify(updatedFormNameNode))
|
145
149
|
}], {
|
146
150
|
at: next_path
|
147
151
|
});
|
@@ -180,6 +184,10 @@ const FreeGrid = props => {
|
|
180
184
|
const handleAddElementClick = type => () => {
|
181
185
|
const isEmpty = isEmptySection();
|
182
186
|
const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
|
187
|
+
const {
|
188
|
+
xsVal,
|
189
|
+
sectionHeightXs
|
190
|
+
} = getNewElementXsValues(type, element?.children);
|
183
191
|
switch (type) {
|
184
192
|
case "addText":
|
185
193
|
Transforms.insertNodes(editor, [{
|
@@ -196,7 +204,8 @@ const FreeGrid = props => {
|
|
196
204
|
marginTop: 0,
|
197
205
|
top: 0,
|
198
206
|
width: 170,
|
199
|
-
height: 30
|
207
|
+
height: 30,
|
208
|
+
...(xsVal || {})
|
200
209
|
}], {
|
201
210
|
at: [...insertAt]
|
202
211
|
});
|
@@ -214,20 +223,6 @@ const FreeGrid = props => {
|
|
214
223
|
linkType: "webAddress"
|
215
224
|
},
|
216
225
|
iconPosition: "start",
|
217
|
-
bgColor: "#2563EB",
|
218
|
-
textColor: "#FFF",
|
219
|
-
borderRadius: {
|
220
|
-
topLeft: 30,
|
221
|
-
topRight: 30,
|
222
|
-
bottomLeft: 30,
|
223
|
-
bottomRight: 30
|
224
|
-
},
|
225
|
-
bannerSpacing: {
|
226
|
-
left: 12,
|
227
|
-
top: 12,
|
228
|
-
right: 12,
|
229
|
-
bottom: 12
|
230
|
-
},
|
231
226
|
textAlign: "center",
|
232
227
|
label: "Get Started"
|
233
228
|
}],
|
@@ -236,7 +231,8 @@ const FreeGrid = props => {
|
|
236
231
|
marginTop: 0,
|
237
232
|
top: 0,
|
238
233
|
width: 143,
|
239
|
-
height: 50
|
234
|
+
height: 50,
|
235
|
+
...(xsVal || {})
|
240
236
|
}], {
|
241
237
|
at: [...insertAt]
|
242
238
|
});
|
@@ -262,8 +258,9 @@ const FreeGrid = props => {
|
|
262
258
|
top: 0,
|
263
259
|
width: 217,
|
264
260
|
height: 173,
|
265
|
-
width_xs: 217,
|
266
|
-
height_xs: 173
|
261
|
+
// width_xs: 217,
|
262
|
+
// height_xs: 173,
|
263
|
+
...(xsVal || {})
|
267
264
|
}], {
|
268
265
|
at: [...insertAt]
|
269
266
|
});
|
@@ -286,7 +283,8 @@ const FreeGrid = props => {
|
|
286
283
|
marginTop: 0,
|
287
284
|
top: 0,
|
288
285
|
width: 170,
|
289
|
-
height: 80
|
286
|
+
height: 80,
|
287
|
+
...(xsVal || {})
|
290
288
|
}], {
|
291
289
|
at: [...insertAt]
|
292
290
|
});
|
@@ -299,7 +297,8 @@ const FreeGrid = props => {
|
|
299
297
|
images: []
|
300
298
|
}), {
|
301
299
|
height: 370,
|
302
|
-
width: 650
|
300
|
+
width: 650,
|
301
|
+
...(xsVal || {})
|
303
302
|
})
|
304
303
|
}], {
|
305
304
|
at: [...insertAt]
|
@@ -311,7 +310,8 @@ const FreeGrid = props => {
|
|
311
310
|
...DEFAULT_TABLE_NODE()
|
312
311
|
}, {
|
313
312
|
height: 150,
|
314
|
-
width: 400
|
313
|
+
width: 400,
|
314
|
+
...(xsVal || {})
|
315
315
|
})
|
316
316
|
}], {
|
317
317
|
at: [...insertAt]
|
@@ -335,7 +335,8 @@ const FreeGrid = props => {
|
|
335
335
|
marginTop: 0,
|
336
336
|
top: 0,
|
337
337
|
width: 400,
|
338
|
-
height: 300
|
338
|
+
height: 300,
|
339
|
+
...(xsVal || {})
|
339
340
|
}], {
|
340
341
|
at: [...insertAt]
|
341
342
|
});
|
@@ -347,7 +348,9 @@ const FreeGrid = props => {
|
|
347
348
|
children: [{
|
348
349
|
text: ""
|
349
350
|
}]
|
350
|
-
}, {
|
351
|
+
}, {
|
352
|
+
...(xsVal || {})
|
353
|
+
}, "freegridBox")
|
351
354
|
}], {
|
352
355
|
at: [...insertAt]
|
353
356
|
});
|
@@ -358,7 +361,8 @@ const FreeGrid = props => {
|
|
358
361
|
...FORM_NODE()
|
359
362
|
}, {
|
360
363
|
height: 92,
|
361
|
-
width: 400
|
364
|
+
width: 400,
|
365
|
+
...(xsVal || {})
|
362
366
|
})
|
363
367
|
}], {
|
364
368
|
at: [...insertAt]
|
@@ -372,7 +376,8 @@ const FreeGrid = props => {
|
|
372
376
|
})
|
373
377
|
}, {
|
374
378
|
height: 60,
|
375
|
-
width: 400
|
379
|
+
width: 400,
|
380
|
+
...(xsVal || {})
|
376
381
|
})
|
377
382
|
}], {
|
378
383
|
at: [...insertAt]
|
@@ -393,19 +398,18 @@ const FreeGrid = props => {
|
|
393
398
|
marginTop: 0,
|
394
399
|
top: 0,
|
395
400
|
width: 170,
|
396
|
-
height: 30
|
401
|
+
height: 30,
|
402
|
+
...(xsVal || {})
|
397
403
|
}], {
|
398
404
|
at: [...insertAt]
|
399
405
|
});
|
400
406
|
break;
|
401
407
|
default:
|
402
408
|
}
|
403
|
-
if (
|
409
|
+
if (xsVal) {
|
404
410
|
setSelectedElement({});
|
405
|
-
|
406
|
-
// auto align in mobile
|
407
411
|
Transforms.setNodes(editor, {
|
408
|
-
|
412
|
+
height_xs: sectionHeightXs,
|
409
413
|
updated_at: new Date().getTime()
|
410
414
|
}, {
|
411
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,8 +5,8 @@ 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, {
|
@@ -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
|
};
|