@flozy/editor 10.4.0 → 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.
Files changed (190) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +134 -18
  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 +46 -9
  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 +184 -171
  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 +40 -32
  33. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  34. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  35. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  36. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  37. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  38. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  39. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  40. package/dist/Editor/Elements/List/CheckList.js +3 -2
  41. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  42. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  43. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  44. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  45. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  46. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  47. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  48. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  49. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  50. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  51. package/dist/Editor/Elements/Table/Styles.js +7 -0
  52. package/dist/Editor/Elements/Table/Table.js +3 -3
  53. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  54. package/dist/Editor/Elements/Title/title.js +6 -6
  55. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  56. package/dist/Editor/MiniEditor.js +2 -1
  57. package/dist/Editor/Styles/EditorStyles.js +5 -5
  58. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  59. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  60. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  61. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  62. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  67. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  68. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  69. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  70. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  71. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  72. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  73. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  74. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  75. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  76. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  77. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  78. package/dist/Editor/common/Checkbox/index.js +46 -0
  79. package/dist/Editor/common/Checkbox/styles.js +45 -0
  80. package/dist/Editor/common/ColorPickerButton.js +41 -16
  81. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  82. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  83. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  84. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  85. package/dist/Editor/common/CustomSelect.js +43 -0
  86. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  87. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  88. package/dist/Editor/common/Icon.js +31 -1
  89. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  90. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  91. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
  92. package/dist/Editor/common/LinkSettings/index.js +82 -80
  93. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  94. package/dist/Editor/common/LinkSettings/style.js +209 -74
  95. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  96. package/dist/Editor/common/RadioGroup/index.js +48 -0
  97. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  98. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  99. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  100. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  101. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  102. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  103. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  114. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  115. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  116. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  117. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  118. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  119. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  120. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  121. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  122. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  123. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  124. package/dist/Editor/common/RnD/index.js +68 -39
  125. package/dist/Editor/common/Select/index.js +44 -5
  126. package/dist/Editor/common/Select/styles.js +31 -2
  127. package/dist/Editor/common/Shorthands/elements.js +65 -11
  128. package/dist/Editor/common/SnackBar/index.js +43 -0
  129. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  130. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  131. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  132. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  144. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  145. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  146. package/dist/Editor/common/Uploader.js +16 -0
  147. package/dist/Editor/common/iconListV2.js +177 -6
  148. package/dist/Editor/common/iconslist.js +24 -0
  149. package/dist/Editor/commonStyle.js +186 -62
  150. package/dist/Editor/helper/index.js +5 -1
  151. package/dist/Editor/helper/textIndeces.js +58 -0
  152. package/dist/Editor/helper/theme.js +203 -2
  153. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  154. package/dist/Editor/hooks/useMouseMove.js +8 -5
  155. package/dist/Editor/hooks/useTable.js +5 -4
  156. package/dist/Editor/hooks/useThemeValues.js +63 -0
  157. package/dist/Editor/plugins/withEmbeds.js +1 -1
  158. package/dist/Editor/plugins/withHTML.js +3 -1
  159. package/dist/Editor/plugins/withTable.js +1 -1
  160. package/dist/Editor/theme/ThemeList.js +50 -173
  161. package/dist/Editor/theme/index.js +149 -0
  162. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  163. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  164. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  165. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  166. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  167. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  168. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  169. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  170. package/dist/Editor/themeSettings/icons.js +60 -0
  171. package/dist/Editor/themeSettings/index.js +380 -0
  172. package/dist/Editor/themeSettings/style.js +299 -0
  173. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  174. package/dist/Editor/themeSettingsAI/index.js +355 -0
  175. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  176. package/dist/Editor/themeSettingsAI/style.js +332 -0
  177. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  178. package/dist/Editor/utils/accordion.js +14 -4
  179. package/dist/Editor/utils/button.js +1 -17
  180. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  181. package/dist/Editor/utils/draftToSlate.js +3 -2
  182. package/dist/Editor/utils/events.js +50 -6
  183. package/dist/Editor/utils/font.js +40 -37
  184. package/dist/Editor/utils/form.js +4 -4
  185. package/dist/Editor/utils/formfield.js +9 -2
  186. package/dist/Editor/utils/helper.js +210 -26
  187. package/dist/Editor/utils/insertAppHeader.js +1 -1
  188. package/dist/Editor/utils/signature.js +2 -9
  189. package/dist/Editor/utils/updateFormName.js +22 -0
  190. package/package.json +4 -4
@@ -4,8 +4,8 @@ import DialogTitle from "@mui/material/DialogTitle";
4
4
  import DialogContent from "@mui/material/DialogContent";
5
5
  import DialogActions from "@mui/material/DialogActions";
6
6
  import IconButton from "@mui/material/IconButton";
7
- import CloseIcon from "@mui/icons-material/Close";
8
- import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography } from "@mui/material";
7
+ import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
8
+ import { Box, FormControl, Grid, Typography, useMediaQuery } from "@mui/material";
9
9
  import { useState } from "react";
10
10
  import LinkSettingsStyles from "./style";
11
11
  import { getNavOptions } from "./navOptions";
@@ -13,6 +13,7 @@ import { ScrollTopBottom, SelectPage, TextInput, Trigger } from "./NavComponents
13
13
  import SwipeableDrawer from "../SwipeableDrawer";
14
14
  import { useEditorContext } from "../../hooks/useMouseMove";
15
15
  import Select from "../Select";
16
+ import RadioGroup from "../RadioGroup";
16
17
  import { jsx as _jsx } from "react/jsx-runtime";
17
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
19
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -43,10 +44,10 @@ export default function LinkSettings(props) {
43
44
  allowTrigger
44
45
  } = props;
45
46
  const {
46
- isMobile,
47
47
  tagName,
48
48
  translation
49
49
  } = customProps;
50
+ const isMobile = useMediaQuery("(max-width: 899px)");
50
51
  const navOptions = getNavOptions(customProps.hideTools, tagName, allowTrigger);
51
52
  const classes = LinkSettingsStyles(theme);
52
53
  const [nav, setNav] = useState(getNav(navType, navOptions));
@@ -64,67 +65,61 @@ export default function LinkSettings(props) {
64
65
  });
65
66
  };
66
67
  if (isMobile) {
67
- return /*#__PURE__*/_jsxs(SwipeableDrawer, {
68
+ return /*#__PURE__*/_jsx(SwipeableDrawer, {
68
69
  open: true,
69
70
  onClose: handleClose,
70
- children: [/*#__PURE__*/_jsx(Typography, {
71
- variant: "subtitle1",
72
- gutterBottom: true,
73
- sx: {
74
- fontWeight: 600
75
- },
76
- children: translation("dialogueTitle")
77
- }), /*#__PURE__*/_jsx(Select, {
78
- size: "small",
79
- fullWidth: true,
80
- value: nav?.value,
81
- onChange: e => {
82
- const {
83
- value
84
- } = e.target;
85
- const selected = getNav(value, navOptions);
86
- setNav(selected);
87
- setNavValue("");
88
- },
89
- displayEmpty: true,
90
- MenuProps: {
91
- sx: classes.customSelect,
92
- disablePortal: true
93
- },
94
- children: navOptions.map((navOption, i) => {
95
- return /*#__PURE__*/_jsx(MenuItem, {
96
- value: navOption.value,
97
- children: /*#__PURE__*/_jsx(Typography, {
98
- variant: "body2",
99
- children: translation(navOption.label)
100
- })
101
- }, i);
102
- })
103
- }), /*#__PURE__*/_jsx(Box, {
104
- sx: {
105
- paddingTop: "14px"
106
- },
107
- children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
108
- placeholder: translation(nav?.placeholder),
109
- nav: nav,
110
- onChange: onChange,
111
- value: navValue,
112
- openInNewTab: openInNewTab,
113
- onNewTabChange: () => setOpenInNewTab(prev => !prev),
114
- services: customProps.services,
115
- classes: classes,
116
- translation: translation
117
- })
118
- }), /*#__PURE__*/_jsx(Box, {
119
- component: "div",
120
- sx: classes.mobileActionBtns,
121
- children: /*#__PURE__*/_jsx(ActionsButtons, {
122
- classes: classes,
123
- onCancel: handleClose,
124
- onSave: onSubmit,
125
- translation: translation
126
- })
127
- })]
71
+ children: /*#__PURE__*/_jsxs(Grid, {
72
+ sx: classes.swipeableDrawerContainer,
73
+ children: [/*#__PURE__*/_jsx(Typography, {
74
+ variant: "subtitle1",
75
+ gutterBottom: true,
76
+ sx: {
77
+ fontWeight: 600
78
+ },
79
+ className: "link-settings-title",
80
+ children: translation("dialogueTitle")
81
+ }), /*#__PURE__*/_jsx(Select, {
82
+ options: navOptions,
83
+ value: nav?.value,
84
+ onChange: e => {
85
+ const {
86
+ value
87
+ } = e.target;
88
+ const selected = getNav(value, navOptions);
89
+ setNav(selected);
90
+ setNavValue("");
91
+ },
92
+ displayEmpty: true,
93
+ translation: translation,
94
+ MenuProps: {
95
+ sx: classes.customSelect
96
+ }
97
+ }), /*#__PURE__*/_jsx(Box, {
98
+ sx: {
99
+ paddingTop: "14px"
100
+ },
101
+ children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
102
+ placeholder: translation(nav?.placeholder),
103
+ nav: nav,
104
+ onChange: onChange,
105
+ value: navValue,
106
+ openInNewTab: openInNewTab,
107
+ onNewTabChange: () => setOpenInNewTab(prev => !prev),
108
+ services: customProps.services,
109
+ classes: classes,
110
+ translation: translation
111
+ })
112
+ }), /*#__PURE__*/_jsx(Box, {
113
+ component: "div",
114
+ sx: classes.mobileActionBtns,
115
+ children: /*#__PURE__*/_jsx(ActionsButtons, {
116
+ classes: classes,
117
+ onCancel: handleClose,
118
+ onSave: onSubmit,
119
+ translation: translation
120
+ })
121
+ })]
122
+ })
128
123
  });
129
124
  } else {
130
125
  return /*#__PURE__*/_jsxs(Dialog, {
@@ -134,15 +129,25 @@ export default function LinkSettings(props) {
134
129
  fullWidth: true,
135
130
  maxWidth: "sm",
136
131
  disablePortal: true,
137
- children: [/*#__PURE__*/_jsx(DialogTitle, {
138
- children: translation("dialogueTitle")
139
- }), /*#__PURE__*/_jsx(IconButton, {
140
- "aria-label": "close",
141
- onClick: handleClose,
142
- sx: classes.closeIcon,
143
- children: /*#__PURE__*/_jsx(CloseIcon, {})
132
+ children: [/*#__PURE__*/_jsxs(Grid, {
133
+ container: true,
134
+ direction: "row",
135
+ sx: {
136
+ justifyContent: "space-between",
137
+ alignItems: "center"
138
+ },
139
+ className: "dialog-title",
140
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
141
+ children: translation("dialogueTitle")
142
+ }), /*#__PURE__*/_jsx(IconButton, {
143
+ "aria-label": "close",
144
+ onClick: handleClose,
145
+ sx: classes.closeIcon,
146
+ children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
147
+ })]
144
148
  }), /*#__PURE__*/_jsx(DialogContent, {
145
149
  dividers: true,
150
+ className: "link-settings-content",
146
151
  children: /*#__PURE__*/_jsxs(Grid, {
147
152
  container: true,
148
153
  spacing: 2,
@@ -150,20 +155,17 @@ export default function LinkSettings(props) {
150
155
  item: true,
151
156
  xs: 6,
152
157
  sx: classes.gridDivider,
158
+ className: "radioBtnGrp",
153
159
  children: /*#__PURE__*/_jsx(FormControl, {
160
+ sx: classes.customRadioBtn,
154
161
  children: /*#__PURE__*/_jsx(RadioGroup, {
162
+ options: navOptions,
155
163
  value: nav?.value,
156
- children: navOptions?.map((navOption, i) => {
157
- return /*#__PURE__*/_jsx(FormControlLabel, {
158
- value: navOption.value,
159
- control: /*#__PURE__*/_jsx(Radio, {}),
160
- label: translation(navOption.label),
161
- onChange: () => {
162
- setNav(navOption);
163
- setNavValue("");
164
- }
165
- }, i);
166
- })
164
+ onChange: navOption => {
165
+ setNav(navOption);
166
+ setNavValue("");
167
+ },
168
+ translation: translation
167
169
  })
168
170
  })
169
171
  }), /*#__PURE__*/_jsx(Grid, {
@@ -26,11 +26,11 @@ export const getNavOptions = (hideTools = [], tagName = "", allowTrigger) => {
26
26
  }, {
27
27
  label: "Email",
28
28
  value: "email",
29
- placeholder: "email"
29
+ placeholder: "mail@example.com"
30
30
  }, {
31
31
  label: "Phone number",
32
32
  value: "phone",
33
- placeholder: "phone"
33
+ placeholder: "+1 (702) 123-4567"
34
34
  }];
35
35
  navOptions = navOptions.filter(n => !hideTools.includes(n.value));
36
36
  if (!allowTrigger) {
@@ -1,87 +1,222 @@
1
- const ButtonNavSettingsStyles = theme => ({
2
- dialogContainer: {
3
- "& .MuiDialogContent-root": {
4
- padding: "0px 20px"
1
+ const ButtonNavSettingsStyles = theme => {
2
+ const {
3
+ editor,
4
+ grey
5
+ } = theme?.palette || {};
6
+ const {
7
+ borderColor,
8
+ background,
9
+ textColor,
10
+ activeColor,
11
+ miniToolBarBackground
12
+ } = editor || {};
13
+ const commonContainerStyle = {
14
+ backgroundColor: miniToolBarBackground,
15
+ "& .MuiTypography-root": {
16
+ color: textColor
5
17
  },
6
- "& .MuiDialogActions-root": {
7
- padding: "10px"
8
- },
9
- "& .MuiTypography-h6": {
18
+ "& .link-settings-title": {
19
+ fontSize: "18px",
20
+ padding: "12px 0px",
10
21
  fontWeight: 600,
11
- fontSize: "16px",
12
- paddingRight: "20px"
22
+ color: theme?.palette?.editor?.textColor,
23
+ borderRadius: "8px",
24
+ marginTop: "2px",
25
+ "& li": {
26
+ padding: "6px 16px",
27
+ margin: "5px !important",
28
+ borderRadius: "4px !important"
29
+ },
30
+ "& .MuiList-root": {
31
+ padding: "0px"
32
+ },
33
+ "& .MuiTypography-root": {
34
+ fontSize: "12px !important",
35
+ fontWeight: 500,
36
+ fontFamily: "'Inter',sans-serif"
37
+ },
38
+ "& .Mui-selected": {
39
+ background: theme?.palette?.editor?.menuOptionSelectedOption,
40
+ color: theme?.palette?.editor?.textColor
41
+ }
42
+ },
43
+ "& .MuiInputBase-root, fieldset": {
44
+ background: theme?.palette?.editor?.inputFieldBgColor,
45
+ borderRadius: "8px",
46
+ // border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
47
+ "& fieldset": {
48
+ // border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
49
+ background: "transparent",
50
+ borderRadius: "8px"
51
+ },
52
+ "& input": {
53
+ border: `1px solid transparent`,
54
+ background: theme?.palette?.editor?.inputFieldBgColor,
55
+ borderRadius: "8px",
56
+ color: theme?.palette?.editor?.textColor
57
+ }
13
58
  },
14
- "& .MuiGrid-container": {
15
- marginTop: "0px"
59
+ "& .MuiSvgIcon-root": {
60
+ color: textColor
16
61
  },
17
- "& .MuiGrid-item": {
18
- padding: "14px"
62
+ "& .MuiFormLabel-root": {
63
+ color: textColor,
64
+ backgroundColor: background
19
65
  },
20
- "& .MuiPaper-root": {
21
- backgroundColor: theme?.palette?.editor?.background,
66
+ "& .Mui-checked": {
67
+ "& .MuiSvgIcon-root": {
68
+ color: `${activeColor} !important`
69
+ }
70
+ },
71
+ "& .dialog-title": {
22
72
  "& .MuiTypography-root": {
23
- color: theme?.palette?.editor?.textColor
73
+ fontSize: "18px",
74
+ padding: "12px",
75
+ fontWeight: 600
76
+ }
77
+ },
78
+ "& .link-settings-content": {
79
+ margin: "0px 10px",
80
+ borderTop: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
81
+ borderBottom: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
82
+ overflow: "hidden !important",
83
+ "& .MuiInputBase-root, fieldset": {
84
+ background: theme?.palette?.editor?.inputFieldBgColor,
85
+ borderRadius: "8px",
86
+ border: "unset",
87
+ "& fieldset": {
88
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
89
+ background: "transparent",
90
+ borderRadius: "8px"
91
+ },
92
+ "& input": {
93
+ border: `1px solid transparent`,
94
+ background: theme?.palette?.editor?.inputFieldBgColor,
95
+ borderRadius: "8px",
96
+ color: theme?.palette?.editor?.textColor
97
+ }
98
+ }
99
+ },
100
+ "& .trigger-text": {
101
+ fontSize: "14px !important",
102
+ fontWeight: 400,
103
+ fontFamily: "'Inter',sans-serif",
104
+ color: theme?.palette?.editor?.textColor
105
+ }
106
+ };
107
+ return {
108
+ dialogContainer: {
109
+ "& .MuiDialogContent-root": {
110
+ margin: "0px 20px",
111
+ padding: "0px 4px",
112
+ borderTop: `1px solid ${borderColor}`,
113
+ borderBottom: `1px solid ${borderColor}`
24
114
  },
25
- "& .MuiInputBase-root": {
26
- border: `1px solid ${theme?.palette?.editor?.textColor}`,
27
- color: theme?.palette?.editor?.textColor
115
+ "& .MuiDialogActions-root": {
116
+ padding: "10px"
28
117
  },
29
- "& .MuiSvgIcon-root": {
30
- color: theme?.palette?.editor?.textColor
118
+ "& .MuiTypography-h6": {
119
+ fontWeight: 600,
120
+ fontSize: "20px",
121
+ paddingRight: "20px"
31
122
  },
32
- "& .MuiFormLabel-root": {
123
+ "& .MuiGrid-container": {
124
+ marginTop: "0px"
125
+ },
126
+ "& .MuiGrid-item": {
127
+ padding: "14px"
128
+ },
129
+ "& .MuiPaper-root": {
130
+ padding: "10px !important",
131
+ borderRadius: "20px !important",
132
+ backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
133
+ border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
134
+ ...commonContainerStyle
135
+ }
136
+ },
137
+ swipeableDrawerContainer: commonContainerStyle,
138
+ customSelect: {
139
+ zIndex: "1302 !important",
140
+ "& .MuiPopover-paper": {
141
+ background: theme?.palette?.editor?.textWeightPopUpBackground,
33
142
  color: theme?.palette?.editor?.textColor,
34
- backgroundColor: theme?.palette?.editor?.background
143
+ borderRadius: "8px",
144
+ marginTop: "2px",
145
+ "& li": {
146
+ padding: "6px 16px",
147
+ margin: "5px !important",
148
+ borderRadius: "4px !important"
149
+ },
150
+ "& .MuiList-root": {
151
+ padding: "0px"
152
+ },
153
+ "& .MuiTypography-root": {
154
+ fontSize: "12px !important",
155
+ fontWeight: 500,
156
+ fontFamily: "'Inter',sans-serif"
157
+ },
158
+ "& .Mui-selected": {
159
+ background: theme?.palette?.editor?.menuOptionSelectedOption,
160
+ color: theme?.palette?.editor?.textColor
161
+ }
35
162
  }
163
+ },
164
+ saveBtn: {
165
+ color: "#fff !important",
166
+ background: "#2563EB !important",
167
+ fontSize: "14px !important",
168
+ fontWeight: "700 !important",
169
+ padding: "8px 24px !important",
170
+ textTransform: "none !important",
171
+ borderRadius: "8px !important",
172
+ fontFamily: "'Inter',sans-serif !important",
173
+ "&:hover": {
174
+ color: "#fff !important",
175
+ background: "#2563EB !important"
176
+ }
177
+ },
178
+ closeBtn: {
179
+ backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
180
+ color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`,
181
+ fontSize: "14px !important",
182
+ fontWeight: "700 !important",
183
+ padding: "8px 22px !important",
184
+ textTransform: "none !important",
185
+ border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
186
+ borderRadius: "8px !important",
187
+ fontFamily: "'Inter',sans-serif !important",
188
+ "&:hover": {
189
+ border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
190
+ backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
191
+ color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`
192
+ }
193
+ },
194
+ closeIcon: {
195
+ background: theme?.palette?.editor?.closeButtonBackground,
196
+ borderRadius: "8px",
197
+ padding: "2px",
198
+ marginRight: "8px",
199
+ "& svg": {
200
+ fill: theme?.palette?.editor?.closeButtonSvgStroke
201
+ }
202
+ },
203
+ gridDivider: {
204
+ borderRight: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
205
+ "& .MuiTypography-root": {
206
+ color: "#64748B !important",
207
+ fontFamily: "'Inter',sans-serif",
208
+ fontWeight: 500,
209
+ fontSize: "16px"
210
+ }
211
+ },
212
+ mobileActionBtns: {
213
+ display: "flex",
214
+ justifyContent: "flex-end",
215
+ gap: "8px",
216
+ paddingTop: "14px",
217
+ marginTop: "14px",
218
+ borderTop: `1px solid ${grey[300]}`
36
219
  }
37
- },
38
- customSelect: {
39
- zIndex: "1302 !important",
40
- "& .MuiPopover-paper": {
41
- background: theme?.palette?.editor?.miniToolBarBackground,
42
- color: theme?.palette?.editor?.textColor
43
- }
44
- },
45
- saveBtn: {
46
- color: "#fff",
47
- background: "#2563EB",
48
- fontSize: "14px",
49
- fontWeight: 500,
50
- padding: "4px 24px",
51
- textTransform: "none",
52
- "&:hover": {
53
- color: "#fff",
54
- background: "#2563EB"
55
- }
56
- },
57
- closeBtn: {
58
- backgroundColor: "#F4F6F9",
59
- color: "#64748B",
60
- fontSize: "14px",
61
- fontWeight: 500,
62
- padding: "4px 22px",
63
- textTransform: "none",
64
- border: "1px solid #D8DDE1",
65
- "&:hover": {
66
- border: "1px solid #64748B"
67
- }
68
- },
69
- closeIcon: {
70
- position: "absolute",
71
- right: 8,
72
- top: 8,
73
- color: theme?.palette?.grey[500]
74
- },
75
- gridDivider: {
76
- borderRight: "1px solid rgba(0, 0, 0, 0.12)"
77
- },
78
- mobileActionBtns: {
79
- display: "flex",
80
- justifyContent: "flex-end",
81
- gap: "8px",
82
- paddingTop: "14px",
83
- marginTop: "14px",
84
- borderTop: `1px solid ${theme?.palette?.grey[300]}`
85
- }
86
- });
220
+ };
221
+ };
87
222
  export default ButtonNavSettingsStyles;
@@ -146,7 +146,10 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
146
146
  setOpenAI("fromElements");
147
147
  }
148
148
  insertMention(editor, char, type);
149
- Transforms.insertText(editor, " "); //Added to insert space after inserting mention node
149
+ if (mentions === "mentions") {
150
+ Transforms.insertText(editor, " "); //Added to insert space after inserting mention node
151
+ }
152
+
150
153
  setMentions({
151
154
  ...mentions,
152
155
  target: null
@@ -0,0 +1,48 @@
1
+ import { RadioGroup as Core, Radio, FormControl, FormControlLabel, IconButton, Typography } from "@mui/material";
2
+ import RadioGroupStyles from "./styles";
3
+ import { useEditorContext } from "../../hooks/useMouseMove";
4
+ import { CheckedRadioIcon } from "../iconListV2";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ function RadioGroup(props) {
7
+ const {
8
+ value,
9
+ options,
10
+ onChange,
11
+ label,
12
+ labelProps,
13
+ radioProps,
14
+ translation,
15
+ ...rest
16
+ } = props;
17
+ const {
18
+ theme
19
+ } = useEditorContext();
20
+ const classes = RadioGroupStyles(theme);
21
+ return /*#__PURE__*/_jsx(FormControl, {
22
+ children: /*#__PURE__*/_jsx(Core, {
23
+ value: value,
24
+ sx: classes.customRadioGroup,
25
+ ...rest,
26
+ children: options?.map((option, i) => {
27
+ return /*#__PURE__*/_jsx(FormControlLabel, {
28
+ value: option.value,
29
+ control: /*#__PURE__*/_jsx(Radio, {
30
+ checkedIcon: /*#__PURE__*/_jsx(CheckedRadioIcon, {}),
31
+ icon: /*#__PURE__*/_jsx(IconButton, {
32
+ className: "unCheckedIcon"
33
+ }),
34
+ ...(radioProps || {})
35
+ }),
36
+ label: /*#__PURE__*/_jsx(Typography, {
37
+ variant: "body1",
38
+ sx: classes.label,
39
+ ...(labelProps || {}),
40
+ children: translation(option.label)
41
+ }),
42
+ onChange: () => onChange(option)
43
+ }, i);
44
+ })
45
+ })
46
+ });
47
+ }
48
+ export default RadioGroup;
@@ -0,0 +1,29 @@
1
+ const SelectStyles = (theme = {}) => {
2
+ const {
3
+ buttonBorder3,
4
+ checkedIconBg,
5
+ tv_text,
6
+ inputFieldBgColor
7
+ } = theme?.palette?.editor || {};
8
+ return {
9
+ customRadioGroup: {
10
+ gap: "4px",
11
+ "& button": {
12
+ border: `1px solid ${buttonBorder3}`
13
+ },
14
+ "& .unCheckedIcon": {
15
+ background: checkedIconBg,
16
+ width: "17px",
17
+ height: "17px",
18
+ padding: "0px"
19
+ },
20
+ "& .radio-icon-path": {
21
+ fill: inputFieldBgColor
22
+ }
23
+ },
24
+ label: {
25
+ color: `${tv_text} !important`
26
+ }
27
+ };
28
+ };
29
+ export default SelectStyles;