@flozy/editor 10.4.5 → 10.4.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 +134 -18
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
- package/dist/Editor/Elements/Button/EditorButton.js +26 -10
- 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 +482 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +513 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +27 -11
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +29 -9
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +17 -6
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +4 -3
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +184 -171
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +31 -8
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/Checkbox/index.js +46 -0
- package/dist/Editor/common/Checkbox/styles.js +45 -0
- package/dist/Editor/common/ColorPickerButton.js +41 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
- package/dist/Editor/common/LinkSettings/index.js +82 -80
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +209 -74
- package/dist/Editor/common/MentionsPopup/index.js +4 -1
- package/dist/Editor/common/RadioGroup/index.js +48 -0
- package/dist/Editor/common/RadioGroup/styles.js +29 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
- package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +67 -38
- package/dist/Editor/common/Select/index.js +44 -5
- package/dist/Editor/common/Select/styles.js +30 -2
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +177 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +186 -62
- package/dist/Editor/helper/index.js +5 -1
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +380 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +9 -2
- package/dist/Editor/utils/helper.js +210 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- package/dist/Editor/utils/updateFormName.js +22 -0
- package/package.json +4 -4
@@ -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";
|
@@ -15,6 +14,9 @@ import Workflow from "./Workflow";
|
|
15
14
|
import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
|
16
15
|
import { validation } from "./FormElements/validations";
|
17
16
|
import Icon from "../../common/Icon";
|
17
|
+
import useCommonStyle from "../../commonStyle";
|
18
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
19
|
+
import { UploadIconCloud } from "../../common/iconListV2";
|
18
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
19
21
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
20
22
|
const Form = props => {
|
@@ -76,6 +78,10 @@ const Form = props => {
|
|
76
78
|
const [formHeight, setFormHeight] = useState();
|
77
79
|
const [formWidth, setFormWidth] = useState();
|
78
80
|
const path = ReactEditor.findPath(editor, element);
|
81
|
+
const {
|
82
|
+
theme: appTheme
|
83
|
+
} = useEditorContext();
|
84
|
+
const classes = useCommonStyle(appTheme);
|
79
85
|
useEffect(() => {
|
80
86
|
setFormHeight(formEle?.current?.clientHeight);
|
81
87
|
setFormWidth(formEle?.current?.clientWidth);
|
@@ -153,7 +159,8 @@ const Form = props => {
|
|
153
159
|
[pair[0]]: pair[1],
|
154
160
|
placeholder: placeholder,
|
155
161
|
form_name: formName,
|
156
|
-
tagName: tagName
|
162
|
+
tagName: tagName,
|
163
|
+
uid: fieldData?.uid
|
157
164
|
});
|
158
165
|
}
|
159
166
|
let params = {
|
@@ -200,7 +207,7 @@ const Form = props => {
|
|
200
207
|
}, {
|
201
208
|
at: path
|
202
209
|
});
|
203
|
-
// adding form field style to the current form node
|
210
|
+
// adding form field style to the current form node
|
204
211
|
const currentNode = Node.get(editor, path);
|
205
212
|
if (currentNode) {
|
206
213
|
currentNode.children.forEach((item, index) => {
|
@@ -381,188 +388,194 @@ const Form = props => {
|
|
381
388
|
}
|
382
389
|
}, theme)
|
383
390
|
};
|
384
|
-
return /*#__PURE__*/
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
onMouseLeave: onMouseLeave,
|
394
|
-
children: [/*#__PURE__*/_jsxs(Box, {
|
395
|
-
component: "form",
|
396
|
-
id: `${formName}`,
|
397
|
-
onSubmit: handleSubmit,
|
398
|
-
sx: {
|
399
|
-
color: textColor || "#FFF",
|
400
|
-
borderColor: borderColor || "transparent",
|
401
|
-
borderWidth: borderWidth || "1px",
|
402
|
-
display: submittedSuccessfully ? "none" : "block",
|
403
|
-
borderStyle: borderStyle || "solid",
|
404
|
-
background: bgColor || "transparent",
|
405
|
-
position: "relative",
|
406
|
-
lineHeight: 1.43,
|
407
|
-
...formSX
|
391
|
+
return /*#__PURE__*/_jsx(Grid, {
|
392
|
+
sx: classes?.formStyles,
|
393
|
+
children: /*#__PURE__*/_jsxs("div", {
|
394
|
+
...attributes,
|
395
|
+
className: "form-wrapper element-root",
|
396
|
+
style: {
|
397
|
+
border: !readOnly ? "none" : "none",
|
398
|
+
padding: "10px",
|
399
|
+
width: "100%"
|
408
400
|
},
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
width: "100%"
|
426
|
-
},
|
427
|
-
children: formTitle
|
428
|
-
}), children, /*#__PURE__*/_jsx(Grid, {
|
429
|
-
item: true,
|
430
|
-
...buttonProps?.grid,
|
431
|
-
className: "form-btn-wrpr",
|
432
|
-
contentEditable: false,
|
433
|
-
style: {
|
434
|
-
display: "flex",
|
435
|
-
justifyContent: btnAlign?.horizantal || "start",
|
436
|
-
alignItems: btnAlign?.vertical || "start"
|
437
|
-
},
|
438
|
-
children: /*#__PURE__*/_jsx(Box, {
|
439
|
-
component: "button",
|
440
|
-
onClick: onSubmitClick,
|
441
|
-
disabled: loading,
|
442
|
-
sx: {
|
443
|
-
background: buttonProps?.bgColor || "rgb(30, 75, 122)",
|
444
|
-
borderWidth: "1px",
|
445
|
-
borderBlockStyle: "solid",
|
446
|
-
...btnBorderStyle,
|
447
|
-
...buttonSX,
|
448
|
-
color: `${buttonProps?.textColor || "#FFFFFF"}`,
|
449
|
-
fontSize: buttonProps?.textSize || "inherit",
|
450
|
-
height: "fit-content",
|
451
|
-
fontFamily: buttonProps?.fontFamily || "PoppinsRegular",
|
452
|
-
width: buttonProps?.fullWidth ? "100%" : "auto"
|
453
|
-
},
|
454
|
-
children: buttonProps?.label || "Submit"
|
455
|
-
})
|
456
|
-
})]
|
457
|
-
})
|
458
|
-
}), !readOnly && showOptions && /*#__PURE__*/_jsx(FormToolbar, {}), loading && /*#__PURE__*/_jsx("div", {
|
459
|
-
style: {
|
460
|
-
position: "absolute",
|
461
|
-
top: 0,
|
462
|
-
left: 0,
|
463
|
-
width: "100%",
|
464
|
-
height: "100%",
|
465
|
-
background: "rgba(255,255,255,0.5)"
|
401
|
+
onMouseOver: onMouseOver,
|
402
|
+
onMouseLeave: onMouseLeave,
|
403
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
404
|
+
component: "form",
|
405
|
+
id: `${formName}`,
|
406
|
+
onSubmit: handleSubmit,
|
407
|
+
sx: {
|
408
|
+
color: textColor || "#FFF",
|
409
|
+
borderColor: borderColor || "transparent",
|
410
|
+
borderWidth: borderWidth || "1px",
|
411
|
+
display: submittedSuccessfully ? "none" : "block",
|
412
|
+
borderStyle: borderStyle || "solid",
|
413
|
+
background: bgColor || "transparent",
|
414
|
+
position: "relative",
|
415
|
+
lineHeight: 1.43,
|
416
|
+
...formSX
|
466
417
|
},
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
left: 0,
|
471
|
-
right: 0,
|
472
|
-
top: 0,
|
473
|
-
bottom: 0,
|
474
|
-
margin: "auto"
|
475
|
-
}
|
476
|
-
})
|
477
|
-
})]
|
478
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
479
|
-
item: true,
|
480
|
-
sx: {
|
481
|
-
display: submittedSuccessfully ? "flex" : "none"
|
482
|
-
},
|
483
|
-
contentEditable: false,
|
484
|
-
children: /*#__PURE__*/_jsx(Grid, {
|
485
|
-
container: true,
|
486
|
-
alignItems: "center",
|
487
|
-
justifyContent: "center",
|
488
|
-
spacing: 2,
|
489
|
-
children: /*#__PURE__*/_jsx(Grid, {
|
418
|
+
ref: formEle,
|
419
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
420
|
+
className: "form-grid",
|
490
421
|
item: true,
|
491
|
-
|
422
|
+
xs: 12,
|
423
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
424
|
+
container: true,
|
425
|
+
spacing: 2,
|
492
426
|
sx: {
|
493
|
-
|
494
|
-
borderColor: borderColor || "transparent",
|
495
|
-
borderWidth: borderWidth || "1px",
|
496
|
-
borderStyle: borderStyle || "solid",
|
497
|
-
background: bgColor || "transparent",
|
498
|
-
minHeight: `${formHeight}px`,
|
499
|
-
minWidth: `${formWidth}px`,
|
500
|
-
display: "flex",
|
501
|
-
alignItems: "center",
|
502
|
-
justifyContent: "center",
|
503
|
-
textAlign: "center",
|
504
|
-
position: "relative",
|
505
|
-
...formTypoSX
|
427
|
+
justifyContent: alignment?.horizantal || "start"
|
506
428
|
},
|
507
|
-
children: [
|
429
|
+
children: [/*#__PURE__*/_jsx("legend", {
|
508
430
|
style: {
|
509
|
-
|
431
|
+
fontSize: `${textSize}px` || "inherit",
|
432
|
+
fontFamily: fontFamily || "PoppinsRegular",
|
433
|
+
textAlign: textAlign || "left",
|
434
|
+
width: "100%"
|
510
435
|
},
|
511
|
-
children:
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
436
|
+
children: formTitle
|
437
|
+
}), children, /*#__PURE__*/_jsx(Grid, {
|
438
|
+
item: true,
|
439
|
+
...buttonProps?.grid,
|
440
|
+
className: "form-btn-wrpr",
|
441
|
+
contentEditable: false,
|
442
|
+
style: {
|
443
|
+
display: "flex",
|
444
|
+
justifyContent: btnAlign?.horizantal || "start",
|
445
|
+
alignItems: btnAlign?.vertical || "start"
|
446
|
+
},
|
447
|
+
children: /*#__PURE__*/_jsx(Box, {
|
448
|
+
component: "button",
|
449
|
+
onClick: onSubmitClick,
|
450
|
+
disabled: loading,
|
451
|
+
sx: {
|
452
|
+
background: buttonProps?.bgColor || "#2563EB",
|
453
|
+
borderWidth: "1px",
|
454
|
+
borderBlockStyle: "solid",
|
455
|
+
borderRadius: `${buttonProps?.borderRadius || "8px"}`,
|
456
|
+
...btnBorderStyle,
|
457
|
+
...buttonSX,
|
458
|
+
color: `${buttonProps?.textColor || "#FFFFFF"}`,
|
459
|
+
fontSize: buttonProps?.textSize || "inherit",
|
460
|
+
height: "fit-content",
|
461
|
+
fontFamily: buttonProps?.fontFamily || "Inter, sans-serif",
|
462
|
+
width: buttonProps?.fullWidth ? "100%" : "auto",
|
463
|
+
borderColor: `${buttonProps?.borderColor || "transparent"}`
|
464
|
+
},
|
465
|
+
children: buttonProps?.label || "Submit"
|
516
466
|
})
|
517
467
|
})]
|
518
468
|
})
|
519
|
-
})
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
onClose: handleClose,
|
538
|
-
contentEditable: false,
|
539
|
-
children: [/*#__PURE__*/_jsx(MenuItem, {
|
540
|
-
onClick: onMenuClick("edit"),
|
541
|
-
children: /*#__PURE__*/_jsx(Tooltip, {
|
542
|
-
title: translation("Button Settings"),
|
543
|
-
arrow: true,
|
544
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
545
|
-
children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
|
469
|
+
}), !readOnly && showOptions && /*#__PURE__*/_jsx(FormToolbar, {}), loading && /*#__PURE__*/_jsx("div", {
|
470
|
+
style: {
|
471
|
+
position: "absolute",
|
472
|
+
top: 0,
|
473
|
+
left: 0,
|
474
|
+
width: "100%",
|
475
|
+
height: "100%",
|
476
|
+
background: "rgba(255,255,255,0.5)"
|
477
|
+
},
|
478
|
+
children: /*#__PURE__*/_jsx(CircularProgress, {
|
479
|
+
style: {
|
480
|
+
position: "absolute",
|
481
|
+
left: 0,
|
482
|
+
right: 0,
|
483
|
+
top: 0,
|
484
|
+
bottom: 0,
|
485
|
+
margin: "auto"
|
486
|
+
}
|
546
487
|
})
|
547
|
-
})
|
548
|
-
}), /*#__PURE__*/_jsx(
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
488
|
+
})]
|
489
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
490
|
+
item: true,
|
491
|
+
sx: {
|
492
|
+
display: submittedSuccessfully ? "flex" : "none"
|
493
|
+
},
|
494
|
+
contentEditable: false,
|
495
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
496
|
+
container: true,
|
497
|
+
alignItems: "center",
|
498
|
+
justifyContent: "center",
|
499
|
+
spacing: 2,
|
500
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
501
|
+
item: true,
|
502
|
+
children: /*#__PURE__*/_jsxs(Typography, {
|
503
|
+
sx: {
|
504
|
+
color: textColor || "#A2A9B4",
|
505
|
+
borderColor: borderColor || "transparent",
|
506
|
+
borderWidth: borderWidth || "1px",
|
507
|
+
borderStyle: borderStyle || "solid",
|
508
|
+
background: bgColor || "transparent",
|
509
|
+
minHeight: `${formHeight}px`,
|
510
|
+
minWidth: `${formWidth}px`,
|
511
|
+
display: "flex",
|
512
|
+
alignItems: "center",
|
513
|
+
justifyContent: "center",
|
514
|
+
textAlign: "center",
|
515
|
+
position: "relative",
|
516
|
+
...formTypoSX
|
517
|
+
},
|
518
|
+
children: ["Form Submitted Successfully...!", /*#__PURE__*/_jsx("span", {
|
519
|
+
style: {
|
520
|
+
paddingLeft: "10px"
|
521
|
+
},
|
522
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
523
|
+
onClick: handleCloseMessage,
|
524
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
525
|
+
icon: "closeIcon"
|
526
|
+
})
|
527
|
+
})
|
528
|
+
})]
|
529
|
+
})
|
555
530
|
})
|
556
531
|
})
|
532
|
+
}), openSetttings ? /*#__PURE__*/_jsx(FormPopup, {
|
533
|
+
element: element,
|
534
|
+
onSave: onSave,
|
535
|
+
onClose: onClose,
|
536
|
+
customProps: customProps,
|
537
|
+
translation: translation
|
538
|
+
}) : null, /*#__PURE__*/_jsx(Workflow, {
|
539
|
+
openWorkflow: openWorkflow,
|
540
|
+
element: element,
|
541
|
+
closeWorkflow: closeWorkflow,
|
542
|
+
onSave: onSave,
|
543
|
+
customProps: customProps
|
544
|
+
}), !readOnly && !isIframe ? /*#__PURE__*/_jsxs(Menu, {
|
545
|
+
className: "editor-btn-options",
|
546
|
+
open: anchorEl !== null,
|
547
|
+
anchorEl: anchorEl,
|
548
|
+
onClose: handleClose,
|
549
|
+
contentEditable: false,
|
550
|
+
sx: classes?.formMenuStyle,
|
551
|
+
children: [/*#__PURE__*/_jsx(MenuItem, {
|
552
|
+
onClick: onMenuClick("edit"),
|
553
|
+
children: /*#__PURE__*/_jsx(Tooltip, {
|
554
|
+
title: translation("Button Settings"),
|
555
|
+
arrow: true,
|
556
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
557
|
+
children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
|
558
|
+
})
|
559
|
+
})
|
560
|
+
}), /*#__PURE__*/_jsx(MenuItem, {
|
561
|
+
onClick: onMenuClick("test"),
|
562
|
+
children: /*#__PURE__*/_jsx(Tooltip, {
|
563
|
+
title: translation("Test Submit"),
|
564
|
+
arrow: true,
|
565
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
566
|
+
children: /*#__PURE__*/_jsx(UploadIconCloud, {})
|
567
|
+
})
|
568
|
+
})
|
569
|
+
})]
|
570
|
+
}) : null, editButton && /*#__PURE__*/_jsx(ButtonPopup, {
|
571
|
+
element: buttonProps || {},
|
572
|
+
onSave: onSaveButtonSettings,
|
573
|
+
onClose: onCloseButtonSettings,
|
574
|
+
customProps: customProps,
|
575
|
+
style: formButtonStyle,
|
576
|
+
styleName: "formButtonStyle"
|
557
577
|
})]
|
558
|
-
})
|
559
|
-
element: buttonProps || {},
|
560
|
-
onSave: onSaveButtonSettings,
|
561
|
-
onClose: onCloseButtonSettings,
|
562
|
-
customProps: customProps,
|
563
|
-
style: formButtonStyle,
|
564
|
-
styleName: "formButtonStyle"
|
565
|
-
})]
|
578
|
+
})
|
566
579
|
});
|
567
580
|
};
|
568
581
|
export default Form;
|
@@ -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;
|