@flozy/editor 10.2.5 → 10.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (187) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +131 -16
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +30 -7
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +27 -9
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  20. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  21. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  22. package/dist/Editor/Elements/Embed/Image.js +3 -2
  23. package/dist/Editor/Elements/Embed/Video.js +1 -1
  24. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  25. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  26. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  27. package/dist/Editor/Elements/Form/Form.js +181 -170
  28. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  29. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  30. package/dist/Editor/Elements/Form/FormField.js +13 -6
  31. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  32. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +36 -31
  33. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  34. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  35. package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
  36. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  37. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  38. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  39. package/dist/Editor/Elements/List/CheckList.js +3 -2
  40. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  41. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  42. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  43. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  44. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  45. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  46. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  47. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  48. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  49. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  50. package/dist/Editor/Elements/Table/Styles.js +7 -0
  51. package/dist/Editor/Elements/Table/Table.js +3 -3
  52. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  53. package/dist/Editor/Elements/Title/title.js +6 -6
  54. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  55. package/dist/Editor/MiniEditor.js +2 -1
  56. package/dist/Editor/Styles/EditorStyles.js +5 -5
  57. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  58. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  59. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  60. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  61. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  66. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  67. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  68. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  69. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  70. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  71. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  72. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  73. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  74. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  75. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  76. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  77. package/dist/Editor/common/Checkbox/index.js +46 -0
  78. package/dist/Editor/common/Checkbox/styles.js +45 -0
  79. package/dist/Editor/common/ColorPickerButton.js +41 -16
  80. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  81. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  82. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  83. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  84. package/dist/Editor/common/CustomSelect.js +43 -0
  85. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  86. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  87. package/dist/Editor/common/Icon.js +31 -1
  88. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  89. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  90. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
  91. package/dist/Editor/common/LinkSettings/index.js +82 -79
  92. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  93. package/dist/Editor/common/LinkSettings/style.js +209 -74
  94. package/dist/Editor/common/RadioGroup/index.js +48 -0
  95. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  96. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  97. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  98. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  99. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  100. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  101. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  103. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  111. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  112. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  113. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  114. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  115. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  116. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  117. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  118. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  119. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -54
  120. package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
  121. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  122. package/dist/Editor/common/RnD/index.js +6 -11
  123. package/dist/Editor/common/Select/index.js +44 -5
  124. package/dist/Editor/common/Select/styles.js +30 -2
  125. package/dist/Editor/common/Shorthands/elements.js +65 -11
  126. package/dist/Editor/common/SnackBar/index.js +43 -0
  127. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  128. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  129. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  130. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  131. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  132. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  142. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  143. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  144. package/dist/Editor/common/Uploader.js +16 -0
  145. package/dist/Editor/common/iconListV2.js +177 -6
  146. package/dist/Editor/common/iconslist.js +24 -0
  147. package/dist/Editor/commonStyle.js +186 -62
  148. package/dist/Editor/helper/index.js +4 -0
  149. package/dist/Editor/helper/textIndeces.js +58 -0
  150. package/dist/Editor/helper/theme.js +203 -2
  151. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  152. package/dist/Editor/hooks/useMouseMove.js +8 -5
  153. package/dist/Editor/hooks/useTable.js +5 -4
  154. package/dist/Editor/hooks/useThemeValues.js +63 -0
  155. package/dist/Editor/plugins/withEmbeds.js +1 -1
  156. package/dist/Editor/plugins/withHTML.js +3 -1
  157. package/dist/Editor/plugins/withTable.js +1 -1
  158. package/dist/Editor/theme/ThemeList.js +50 -173
  159. package/dist/Editor/theme/index.js +149 -0
  160. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  161. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  162. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  163. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  164. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  165. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  166. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  167. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  168. package/dist/Editor/themeSettings/icons.js +60 -0
  169. package/dist/Editor/themeSettings/index.js +367 -0
  170. package/dist/Editor/themeSettings/style.js +299 -0
  171. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  172. package/dist/Editor/themeSettingsAI/index.js +355 -0
  173. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  174. package/dist/Editor/themeSettingsAI/style.js +332 -0
  175. package/dist/Editor/utils/SlateUtilityFunctions.js +169 -45
  176. package/dist/Editor/utils/accordion.js +14 -4
  177. package/dist/Editor/utils/button.js +1 -17
  178. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  179. package/dist/Editor/utils/draftToSlate.js +3 -2
  180. package/dist/Editor/utils/events.js +50 -6
  181. package/dist/Editor/utils/font.js +40 -37
  182. package/dist/Editor/utils/form.js +4 -4
  183. package/dist/Editor/utils/formfield.js +8 -2
  184. package/dist/Editor/utils/helper.js +134 -26
  185. package/dist/Editor/utils/insertAppHeader.js +1 -1
  186. package/dist/Editor/utils/signature.js +2 -9
  187. package/package.json +4 -4
@@ -5,6 +5,7 @@ import { IconButton, Tooltip } from "@mui/material";
5
5
  import { DeleteIcon } from "../../assets/svg/AIIcons";
6
6
  import { ReactEditor, useSlateStatic } from "slate-react";
7
7
  import { Transforms } from "slate";
8
+ import { CodeElementIcon } from "../../common/iconListV2";
8
9
 
9
10
  // const sanitize = (input) => {
10
11
  // const doc = new DOMParser().parseFromString(input, "text/html");
@@ -18,6 +19,7 @@ import { Transforms } from "slate";
18
19
  // return doc.body.innerHTML;
19
20
  // };
20
21
  import { jsx as _jsx } from "react/jsx-runtime";
22
+ import { jsxs as _jsxs } from "react/jsx-runtime";
21
23
  import { createElement as _createElement } from "react";
22
24
  const getCode = (embedData, isEncoded) => {
23
25
  if (isEncoded) {
@@ -61,6 +63,7 @@ const Code = props => {
61
63
  } = customProps;
62
64
  const editor = useSlateStatic();
63
65
  const path = ReactEditor.findPath(editor, element);
66
+ const hasCode = embedData && getCode(embedData, isEncoded);
64
67
  const onDelete = () => {
65
68
  Transforms.removeNodes(editor, {
66
69
  at: path
@@ -85,11 +88,20 @@ const Code = props => {
85
88
  }
86
89
  }, [embedData]);
87
90
  return /*#__PURE__*/_createElement("div", {
88
- className: "embed-code has-hover",
91
+ className: `embed-code has-hover ${hasCode ? "has-code" : ""}`,
89
92
  contentEditable: false,
90
93
  ...attributes,
91
94
  key: element?.updatedOn
92
- }, /*#__PURE__*/_jsx("div", {
95
+ }, !hasCode && /*#__PURE__*/_jsxs("div", {
96
+ className: "empty-code",
97
+ children: [/*#__PURE__*/_jsx("span", {
98
+ className: "code-icon",
99
+ children: /*#__PURE__*/_jsx(CodeElementIcon, {})
100
+ }), /*#__PURE__*/_jsx("span", {
101
+ className: "code-name",
102
+ children: translation("Embed Code")
103
+ })]
104
+ }), /*#__PURE__*/_jsx("div", {
93
105
  ref: codeRef
94
106
  }), children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {
95
107
  onDelete: onDelete,
@@ -1,7 +1,10 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Tooltip } from "@mui/material";
2
+ import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, IconButton, Tooltip, Typography } from "@mui/material";
3
3
  import { insertEmbedScript, updateEmbedScript } from "../../utils/embedScript";
4
4
  import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
5
+ import { useEditorContext } from "../../hooks/useMouseMove";
6
+ import Styles from "./styles";
7
+ import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
5
8
  import { jsx as _jsx } from "react/jsx-runtime";
6
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
10
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -20,6 +23,10 @@ const EmbedScriptPopup = props => {
20
23
  error: false
21
24
  });
22
25
  const [allowedDomains, setAllowedDomains] = useState([]);
26
+ const {
27
+ theme
28
+ } = useEditorContext();
29
+ const classes = Styles(theme);
23
30
  const {
24
31
  loading,
25
32
  error
@@ -69,50 +76,70 @@ const EmbedScriptPopup = props => {
69
76
  }
70
77
  onClose();
71
78
  };
79
+ const handleClear = () => {
80
+ setCode("");
81
+ };
72
82
  return /*#__PURE__*/_jsx(_Fragment, {
73
83
  children: /*#__PURE__*/_jsxs(Dialog, {
74
84
  open: open,
75
85
  fullWidth: true,
86
+ sx: classes.root,
76
87
  children: [/*#__PURE__*/_jsx(DialogTitle, {
77
88
  children: /*#__PURE__*/_jsxs(Box, {
78
89
  component: "div",
79
90
  sx: {
80
91
  display: "flex",
81
92
  alignItems: "center",
82
- gap: "6px"
93
+ justifyContent: "space-between",
94
+ width: "100%"
83
95
  },
84
- children: [translation("Embed Code"), allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
85
- title: /*#__PURE__*/_jsxs(Box, {
86
- sx: {
87
- textTransform: "none"
88
- },
89
- children: [/*#__PURE__*/_jsx("span", {
90
- style: {
91
- fontWeight: "bold"
96
+ children: [/*#__PURE__*/_jsxs(Box, {
97
+ sx: {
98
+ display: "flex",
99
+ alignItems: "center",
100
+ gap: "6px"
101
+ },
102
+ children: [/*#__PURE__*/_jsx(Typography, {
103
+ className: "title",
104
+ variant: "h6",
105
+ children: translation("Embed Code")
106
+ }), allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
107
+ title: /*#__PURE__*/_jsxs(Box, {
108
+ sx: {
109
+ textTransform: "none"
92
110
  },
93
- children: translation("Allowed Domains")
94
- }), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
95
- }),
96
- children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
97
- color: "gray",
98
- fontSize: "14px",
99
- style: {
100
- fill: "#94A3B8",
101
- cursor: "pointer"
102
- }
103
- })
104
- }) : null]
111
+ children: [/*#__PURE__*/_jsx("span", {
112
+ style: {
113
+ fontWeight: "bold"
114
+ },
115
+ children: translation("Allowed Domains")
116
+ }), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
117
+ }),
118
+ children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
119
+ sx: {
120
+ fill: "#94A3B8",
121
+ cursor: "pointer",
122
+ fontSize: "18px"
123
+ }
124
+ })
125
+ }) : null]
126
+ }), /*#__PURE__*/_jsx(IconButton, {
127
+ className: "close-popupbtn",
128
+ onClick: onClose,
129
+ children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
130
+ })]
105
131
  })
132
+ }), /*#__PURE__*/_jsx(Divider, {
133
+ className: "divider"
106
134
  }), /*#__PURE__*/_jsxs(DialogContent, {
107
135
  children: [/*#__PURE__*/_jsx("textarea", {
108
136
  value: code,
109
137
  onChange: handleChange,
110
138
  style: {
111
- minHeight: "200px",
139
+ minHeight: "260px",
112
140
  width: "100%",
113
141
  resize: "none",
114
- padding: "4px",
115
- boxSizing: "border-box"
142
+ padding: "4px"
116
143
  }
117
144
  }), /*#__PURE__*/_jsx(Box, {
118
145
  component: "div",
@@ -121,12 +148,14 @@ const EmbedScriptPopup = props => {
121
148
  })]
122
149
  }), /*#__PURE__*/_jsxs(DialogActions, {
123
150
  children: [/*#__PURE__*/_jsx(Button, {
151
+ onClick: handleClear,
152
+ className: "clear-btn",
153
+ children: translation("Clear")
154
+ }), /*#__PURE__*/_jsx(Button, {
124
155
  onClick: onSubmit,
125
156
  disabled: loading,
157
+ className: "save-btn",
126
158
  children: loading ? translation("Validating") : translation("Save")
127
- }), /*#__PURE__*/_jsx(Button, {
128
- onClick: onClose,
129
- children: translation("Cancel")
130
159
  })]
131
160
  })]
132
161
  })
@@ -0,0 +1,89 @@
1
+ const Styles = theme => ({
2
+ root: {
3
+ "& .MuiPaper-root": {
4
+ borderRadius: "12px",
5
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
6
+ border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
7
+ overflow: "hidden"
8
+ },
9
+ "& textarea": {
10
+ backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
11
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
12
+ borderRadius: "12px",
13
+ padding: "10px !important",
14
+ color: theme?.palette?.editor?.textColor,
15
+ boxShadow: "0px 4px 18px 0px #00000014",
16
+ "&:focus": {
17
+ border: `1px solid #2563EB`,
18
+ boxShadow: "0px 4px 18px 0px #2563EB1F",
19
+ outline: "none"
20
+ },
21
+ "&:focus-visible": {
22
+ border: `1px solid #2563EB`,
23
+ boxShadow: "0px 4px 18px 0px #2563EB1F",
24
+ outline: "none"
25
+ }
26
+ },
27
+ "& .MuiDialogTitle-root": {
28
+ padding: "20px 24px 16px 24px"
29
+ },
30
+ "& .title": {
31
+ color: theme?.palette?.editor?.textColor,
32
+ fontWeight: 600,
33
+ fontSize: "20px",
34
+ fontFamily: "Inter, sans-serif"
35
+ },
36
+ "& .close-popupbtn": {
37
+ background: theme?.palette?.editor?.closeButtonBgColor,
38
+ color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
39
+ "& svg": {
40
+ color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
41
+ }
42
+ },
43
+ "& .divider": {
44
+ margin: "0px 24px",
45
+ background: theme?.palette?.editor?.deviderBgColor
46
+ },
47
+ "& .save-btn": {
48
+ backgroundColor: "#2563EB",
49
+ color: "#ffffff",
50
+ fontWeight: 600,
51
+ fontSize: "14px",
52
+ opacity: 1,
53
+ borderRadius: "8px",
54
+ textTransform: "math-auto",
55
+ height: "36px",
56
+ padding: "0px 12px",
57
+ minWidth: "90px",
58
+ "&:hover": {
59
+ backgroundColor: "#2563EB"
60
+ },
61
+ "@media only screen and (max-width: 899px)": {
62
+ width: "50%"
63
+ }
64
+ },
65
+ "& .clear-btn": {
66
+ padding: "8px 12px",
67
+ color: theme?.palette?.editor?.customDialogueCloseBtnColor,
68
+ fontWeight: 600,
69
+ fontSize: "14px",
70
+ opacity: 1,
71
+ borderRadius: "8px",
72
+ textTransform: "math-auto",
73
+ height: "36px",
74
+ minWidth: "90px",
75
+ backgroundColor: theme?.palette?.editor?.closeButtonBackground,
76
+ border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`,
77
+ "&:hover": {
78
+ backgroundColor: theme?.palette?.editor?.closeButtonBackground
79
+ },
80
+ "@media only screen and (max-width: 899px)": {
81
+ width: "50%"
82
+ }
83
+ },
84
+ "& .MuiDialogActions-root": {
85
+ padding: "0px 22px 16px 0px"
86
+ }
87
+ }
88
+ });
89
+ export default Styles;
@@ -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);
@@ -200,7 +206,7 @@ const Form = props => {
200
206
  }, {
201
207
  at: path
202
208
  });
203
- // adding form field style to the current form node
209
+ // adding form field style to the current form node
204
210
  const currentNode = Node.get(editor, path);
205
211
  if (currentNode) {
206
212
  currentNode.children.forEach((item, index) => {
@@ -381,188 +387,193 @@ const Form = props => {
381
387
  }
382
388
  }, theme)
383
389
  };
384
- return /*#__PURE__*/_jsxs("div", {
385
- ...attributes,
386
- className: "form-wrapper element-root",
387
- style: {
388
- border: !readOnly ? "none" : "none",
389
- padding: "10px",
390
- width: "100%"
391
- },
392
- onMouseOver: onMouseOver,
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
390
+ return /*#__PURE__*/_jsx(Grid, {
391
+ sx: classes?.formStyles,
392
+ children: /*#__PURE__*/_jsxs("div", {
393
+ ...attributes,
394
+ className: "form-wrapper element-root",
395
+ style: {
396
+ border: !readOnly ? "none" : "none",
397
+ padding: "10px",
398
+ width: "100%"
408
399
  },
409
- ref: formEle,
410
- children: [/*#__PURE__*/_jsx(Grid, {
411
- className: "form-grid",
412
- item: true,
413
- xs: 12,
414
- children: /*#__PURE__*/_jsxs(Grid, {
415
- container: true,
416
- spacing: 2,
417
- sx: {
418
- justifyContent: alignment?.horizantal || "start"
419
- },
420
- children: [/*#__PURE__*/_jsx("legend", {
421
- style: {
422
- fontSize: `${textSize}px` || "inherit",
423
- fontFamily: fontFamily || "PoppinsRegular",
424
- textAlign: textAlign || "left",
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)"
400
+ onMouseOver: onMouseOver,
401
+ onMouseLeave: onMouseLeave,
402
+ children: [/*#__PURE__*/_jsxs(Box, {
403
+ component: "form",
404
+ id: `${formName}`,
405
+ onSubmit: handleSubmit,
406
+ sx: {
407
+ color: textColor || "#FFF",
408
+ borderColor: borderColor || "transparent",
409
+ borderWidth: borderWidth || "1px",
410
+ display: submittedSuccessfully ? "none" : "block",
411
+ borderStyle: borderStyle || "solid",
412
+ background: bgColor || "transparent",
413
+ position: "relative",
414
+ lineHeight: 1.43,
415
+ ...formSX
466
416
  },
467
- children: /*#__PURE__*/_jsx(CircularProgress, {
468
- style: {
469
- position: "absolute",
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, {
417
+ children: [/*#__PURE__*/_jsx(Grid, {
418
+ className: "form-grid",
490
419
  item: true,
491
- children: /*#__PURE__*/_jsxs(Typography, {
420
+ xs: 12,
421
+ children: /*#__PURE__*/_jsxs(Grid, {
422
+ container: true,
423
+ spacing: 2,
492
424
  sx: {
493
- color: textColor || "#A2A9B4",
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
425
+ justifyContent: alignment?.horizantal || "start"
506
426
  },
507
- children: ["Form Submitted Successfully...!", /*#__PURE__*/_jsx("span", {
427
+ children: [/*#__PURE__*/_jsx("legend", {
508
428
  style: {
509
- paddingLeft: "10px"
429
+ fontSize: `${textSize}px` || "inherit",
430
+ fontFamily: fontFamily || "PoppinsRegular",
431
+ textAlign: textAlign || "left",
432
+ width: "100%"
510
433
  },
511
- children: /*#__PURE__*/_jsx(IconButton, {
512
- onClick: handleCloseMessage,
513
- children: /*#__PURE__*/_jsx(Icon, {
514
- icon: "closeIcon"
515
- })
434
+ children: formTitle
435
+ }), children, /*#__PURE__*/_jsx(Grid, {
436
+ item: true,
437
+ ...buttonProps?.grid,
438
+ className: "form-btn-wrpr",
439
+ contentEditable: false,
440
+ style: {
441
+ display: "flex",
442
+ justifyContent: btnAlign?.horizantal || "start",
443
+ alignItems: btnAlign?.vertical || "start"
444
+ },
445
+ children: /*#__PURE__*/_jsx(Box, {
446
+ component: "button",
447
+ onClick: onSubmitClick,
448
+ disabled: loading,
449
+ sx: {
450
+ background: buttonProps?.bgColor || "#2563EB",
451
+ borderWidth: "1px",
452
+ borderBlockStyle: "solid",
453
+ borderRadius: `${buttonProps?.borderRadius || "8px"}`,
454
+ ...btnBorderStyle,
455
+ ...buttonSX,
456
+ color: `${buttonProps?.textColor || "#FFFFFF"}`,
457
+ fontSize: buttonProps?.textSize || "inherit",
458
+ height: "fit-content",
459
+ fontFamily: buttonProps?.fontFamily || "Inter, sans-serif",
460
+ width: buttonProps?.fullWidth ? "100%" : "auto",
461
+ borderColor: `${buttonProps?.borderColor || "transparent"}`
462
+ },
463
+ children: buttonProps?.label || "Submit"
516
464
  })
517
465
  })]
518
466
  })
519
- })
520
- })
521
- }), openSetttings ? /*#__PURE__*/_jsx(FormPopup, {
522
- element: element,
523
- onSave: onSave,
524
- onClose: onClose,
525
- customProps: customProps,
526
- translation: translation
527
- }) : null, /*#__PURE__*/_jsx(Workflow, {
528
- openWorkflow: openWorkflow,
529
- element: element,
530
- closeWorkflow: closeWorkflow,
531
- onSave: onSave,
532
- customProps: customProps
533
- }), !readOnly && !isIframe ? /*#__PURE__*/_jsxs(Menu, {
534
- className: "editor-btn-options",
535
- open: anchorEl !== null,
536
- anchorEl: anchorEl,
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, {})
467
+ }), !readOnly && showOptions && /*#__PURE__*/_jsx(FormToolbar, {}), loading && /*#__PURE__*/_jsx("div", {
468
+ style: {
469
+ position: "absolute",
470
+ top: 0,
471
+ left: 0,
472
+ width: "100%",
473
+ height: "100%",
474
+ background: "rgba(255,255,255,0.5)"
475
+ },
476
+ children: /*#__PURE__*/_jsx(CircularProgress, {
477
+ style: {
478
+ position: "absolute",
479
+ left: 0,
480
+ right: 0,
481
+ top: 0,
482
+ bottom: 0,
483
+ margin: "auto"
484
+ }
546
485
  })
547
- })
548
- }), /*#__PURE__*/_jsx(MenuItem, {
549
- onClick: onMenuClick("test"),
550
- children: /*#__PURE__*/_jsx(Tooltip, {
551
- title: translation("Test Submit"),
552
- arrow: true,
553
- children: /*#__PURE__*/_jsx(IconButton, {
554
- children: /*#__PURE__*/_jsx(BackupIcon, {})
486
+ })]
487
+ }), /*#__PURE__*/_jsx(Grid, {
488
+ item: true,
489
+ sx: {
490
+ display: submittedSuccessfully ? "flex" : "none"
491
+ },
492
+ contentEditable: false,
493
+ children: /*#__PURE__*/_jsx(Grid, {
494
+ container: true,
495
+ alignItems: "center",
496
+ justifyContent: "center",
497
+ spacing: 2,
498
+ children: /*#__PURE__*/_jsx(Grid, {
499
+ item: true,
500
+ children: /*#__PURE__*/_jsxs(Typography, {
501
+ sx: {
502
+ color: textColor || "#A2A9B4",
503
+ borderColor: borderColor || "transparent",
504
+ borderWidth: borderWidth || "1px",
505
+ borderStyle: borderStyle || "solid",
506
+ background: bgColor || "transparent",
507
+ minHeight: `${formHeight}px`,
508
+ minWidth: `${formWidth}px`,
509
+ display: "flex",
510
+ alignItems: "center",
511
+ justifyContent: "center",
512
+ textAlign: "center",
513
+ position: "relative",
514
+ ...formTypoSX
515
+ },
516
+ children: ["Form Submitted Successfully...!", /*#__PURE__*/_jsx("span", {
517
+ style: {
518
+ paddingLeft: "10px"
519
+ },
520
+ children: /*#__PURE__*/_jsx(IconButton, {
521
+ onClick: handleCloseMessage,
522
+ children: /*#__PURE__*/_jsx(Icon, {
523
+ icon: "closeIcon"
524
+ })
525
+ })
526
+ })]
527
+ })
555
528
  })
556
529
  })
530
+ }), openSetttings ? /*#__PURE__*/_jsx(FormPopup, {
531
+ element: element,
532
+ onSave: onSave,
533
+ onClose: onClose,
534
+ customProps: customProps,
535
+ translation: translation
536
+ }) : null, /*#__PURE__*/_jsx(Workflow, {
537
+ openWorkflow: openWorkflow,
538
+ element: element,
539
+ closeWorkflow: closeWorkflow,
540
+ onSave: onSave,
541
+ customProps: customProps
542
+ }), !readOnly && !isIframe ? /*#__PURE__*/_jsxs(Menu, {
543
+ className: "editor-btn-options",
544
+ open: anchorEl !== null,
545
+ anchorEl: anchorEl,
546
+ onClose: handleClose,
547
+ contentEditable: false,
548
+ sx: classes?.formMenuStyle,
549
+ children: [/*#__PURE__*/_jsx(MenuItem, {
550
+ onClick: onMenuClick("edit"),
551
+ children: /*#__PURE__*/_jsx(Tooltip, {
552
+ title: translation("Button Settings"),
553
+ arrow: true,
554
+ children: /*#__PURE__*/_jsx(IconButton, {
555
+ children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
556
+ })
557
+ })
558
+ }), /*#__PURE__*/_jsx(MenuItem, {
559
+ onClick: onMenuClick("test"),
560
+ children: /*#__PURE__*/_jsx(Tooltip, {
561
+ title: translation("Test Submit"),
562
+ arrow: true,
563
+ children: /*#__PURE__*/_jsx(IconButton, {
564
+ children: /*#__PURE__*/_jsx(UploadIconCloud, {})
565
+ })
566
+ })
567
+ })]
568
+ }) : null, editButton && /*#__PURE__*/_jsx(ButtonPopup, {
569
+ element: buttonProps || {},
570
+ onSave: onSaveButtonSettings,
571
+ onClose: onCloseButtonSettings,
572
+ customProps: customProps,
573
+ style: formButtonStyle,
574
+ styleName: "formButtonStyle"
557
575
  })]
558
- }) : null, editButton && /*#__PURE__*/_jsx(ButtonPopup, {
559
- element: buttonProps || {},
560
- onSave: onSaveButtonSettings,
561
- onClose: onCloseButtonSettings,
562
- customProps: customProps,
563
- style: formButtonStyle,
564
- styleName: "formButtonStyle"
565
- })]
576
+ })
566
577
  });
567
578
  };
568
579
  export default Form;