@flozy/editor 10.3.0 → 10.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +14 -128
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +7 -30
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
  9. package/dist/Editor/Elements/Button/EditorButton.js +9 -27
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  14. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +28 -30
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +7 -9
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  20. package/dist/Editor/Elements/Embed/Video.js +1 -1
  21. package/dist/Editor/Elements/Form/Form.js +3 -1
  22. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
  23. package/dist/Editor/Elements/Form/FormField.js +2 -3
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +30 -31
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  28. package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
  29. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  30. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  31. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  32. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  33. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  34. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  35. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  36. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  37. package/dist/Editor/Elements/Table/Styles.js +0 -7
  38. package/dist/Editor/Elements/Table/Table.js +3 -3
  39. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  40. package/dist/Editor/Elements/Title/title.js +6 -6
  41. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  42. package/dist/Editor/MiniEditor.js +1 -2
  43. package/dist/Editor/Styles/EditorStyles.js +5 -5
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  46. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  48. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  53. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  54. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  55. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
  56. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  57. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  58. package/dist/Editor/common/ColorPickerButton.js +16 -41
  59. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  60. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  61. package/dist/Editor/common/Icon.js +0 -28
  62. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  63. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  64. package/dist/Editor/common/LinkSettings/NavComponents.js +65 -45
  65. package/dist/Editor/common/LinkSettings/index.js +26 -13
  66. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  67. package/dist/Editor/common/LinkSettings/style.js +244 -164
  68. package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
  69. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  70. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  80. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  81. package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
  82. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
  83. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  84. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  85. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  86. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  87. package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -321
  88. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  89. package/dist/Editor/common/RnD/index.js +12 -26
  90. package/dist/Editor/common/Select/index.js +7 -44
  91. package/dist/Editor/common/Select/styles.js +2 -30
  92. package/dist/Editor/common/Shorthands/elements.js +0 -54
  93. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  94. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  95. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  96. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  99. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  100. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  101. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  102. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  103. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  104. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  105. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  106. package/dist/Editor/common/Uploader.js +0 -16
  107. package/dist/Editor/common/iconListV2.js +0 -76
  108. package/dist/Editor/common/iconslist.js +0 -21
  109. package/dist/Editor/commonStyle.js +61 -116
  110. package/dist/Editor/helper/index.js +0 -4
  111. package/dist/Editor/helper/theme.js +2 -203
  112. package/dist/Editor/hooks/useMouseMove.js +3 -9
  113. package/dist/Editor/hooks/useTable.js +4 -5
  114. package/dist/Editor/plugins/withEmbeds.js +1 -1
  115. package/dist/Editor/plugins/withHTML.js +1 -3
  116. package/dist/Editor/plugins/withTable.js +1 -1
  117. package/dist/Editor/theme/ThemeList.js +173 -50
  118. package/dist/Editor/utils/SlateUtilityFunctions.js +36 -158
  119. package/dist/Editor/utils/accordion.js +4 -14
  120. package/dist/Editor/utils/button.js +17 -1
  121. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  122. package/dist/Editor/utils/draftToSlate.js +2 -3
  123. package/dist/Editor/utils/events.js +6 -50
  124. package/dist/Editor/utils/font.js +37 -40
  125. package/dist/Editor/utils/helper.js +26 -134
  126. package/dist/Editor/utils/insertAppHeader.js +1 -1
  127. package/dist/Editor/utils/signature.js +9 -2
  128. package/package.json +4 -4
  129. package/dist/Editor/Elements/FreeGrid/helper.js +0 -113
  130. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  131. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  132. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  133. package/dist/Editor/common/Checkbox/index.js +0 -46
  134. package/dist/Editor/common/Checkbox/styles.js +0 -45
  135. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  136. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  137. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  138. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  139. package/dist/Editor/common/CustomSelect.js +0 -43
  140. package/dist/Editor/common/RadioGroup/index.js +0 -48
  141. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  142. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  144. package/dist/Editor/helper/textIndeces.js +0 -58
  145. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  146. package/dist/Editor/hooks/useThemeValues.js +0 -63
  147. package/dist/Editor/theme/index.js +0 -149
  148. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  149. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  150. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  151. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  152. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  153. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  154. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  155. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  156. package/dist/Editor/themeSettings/icons.js +0 -60
  157. package/dist/Editor/themeSettings/index.js +0 -380
  158. package/dist/Editor/themeSettings/style.js +0 -299
  159. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  160. package/dist/Editor/themeSettingsAI/index.js +0 -355
  161. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  162. package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -28,20 +28,16 @@ export const toolbarGroups = [[{
28
28
  type: "dropdown",
29
29
  options: [{
30
30
  text: "Normal",
31
- value: "normal",
32
- numVal: "400"
31
+ value: "normal"
33
32
  }, {
34
33
  text: "Bold",
35
- value: "bold",
36
- numVal: "700"
34
+ value: "bold"
37
35
  }, {
38
36
  text: "Bolder",
39
- value: "bolder",
40
- numVal: "700"
37
+ value: "bolder"
41
38
  }, {
42
39
  text: "Lighter",
43
- value: "lighter",
44
- numVal: "100"
40
+ value: "lighter"
45
41
  }],
46
42
  icon: FormatBoldIcon,
47
43
  width: "100px"
@@ -50,8 +46,7 @@ export const toolbarGroups = [[{
50
46
  format: "bold",
51
47
  type: "mark",
52
48
  title: "Bold",
53
- basic: true,
54
- themeEnabled: true
49
+ basic: true
55
50
  }, {
56
51
  id: 5,
57
52
  format: "underline",
@@ -62,8 +57,7 @@ export const toolbarGroups = [[{
62
57
  format: "italic",
63
58
  type: "mark",
64
59
  title: "Italic",
65
- basic: true,
66
- themeEnabled: true
60
+ basic: true
67
61
  }, {
68
62
  id: 6,
69
63
  format: "strikethrough",
@@ -107,42 +101,6 @@ export const toolbarGroups = [[{
107
101
  type: "block",
108
102
  title: "H3",
109
103
  group: "typography"
110
- }, {
111
- id: 39,
112
- format: "headingFour",
113
- type: "block",
114
- title: "H4",
115
- group: "typography"
116
- }, {
117
- id: 40,
118
- format: "headingFive",
119
- type: "block",
120
- title: "H5",
121
- group: "typography"
122
- }, {
123
- id: 41,
124
- format: "headingSix",
125
- type: "block",
126
- title: "H6",
127
- group: "typography"
128
- }, {
129
- id: 42,
130
- format: "paragraphOne",
131
- type: "block",
132
- title: "Paragraph 1",
133
- group: "typography"
134
- }, {
135
- id: 43,
136
- format: "paragraphTwo",
137
- type: "block",
138
- title: "Paragraph 2",
139
- group: "typography"
140
- }, {
141
- id: 44,
142
- format: "paragraphThree",
143
- type: "block",
144
- title: "Paragraph 3",
145
- group: "typography"
146
104
  }, {
147
105
  id: 14,
148
106
  format: "doublequote",
@@ -1,8 +1,8 @@
1
1
  import React, { useMemo, useState } from "react";
2
2
  import { Grid, Button, Popover } from "@mui/material";
3
+ import ColorPickerTool from "react-gcolor-picker";
3
4
  import { colors } from "../Elements/Color Picker/defaultColors";
4
5
  import SwipeableDrawerComponent from "./SwipeableDrawer";
5
- import CustomColorPicker from "./CustomColorPicker";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -12,10 +12,7 @@ const ColorPickerToolComponent = ({
12
12
  onSave = () => {},
13
13
  recentColors = [],
14
14
  hideGradient,
15
- handleClose,
16
- closeDrawer,
17
- hideThemeColors,
18
- disableEditTheme
15
+ handleClose
19
16
  }) => {
20
17
  const [color, setColor] = useState(value);
21
18
  const handleSave = () => {
@@ -35,32 +32,26 @@ const ColorPickerToolComponent = ({
35
32
  return /*#__PURE__*/_jsxs(Grid, {
36
33
  item: true,
37
34
  xs: 12,
38
- style: {
39
- position: "relative"
40
- },
41
35
  children: [/*#__PURE__*/_jsx("div", {
42
- style: {
43
- minHeight: "460px"
44
- },
45
- children: /*#__PURE__*/_jsx(CustomColorPicker, {
36
+ children: /*#__PURE__*/_jsx(ColorPickerTool, {
46
37
  gradient: hideGradient ? false : true,
47
- color: color,
38
+ value: color,
48
39
  onChange: handleColorChange,
49
- recentColors: recentColors,
50
- defaultColors: initialColors,
51
- closeDrawer: closeDrawer,
52
- hideThemeColors: hideThemeColors,
53
- disableEditTheme: disableEditTheme
40
+ defaultColors: initialColors
54
41
  })
55
42
  }), /*#__PURE__*/_jsxs("div", {
56
- className: "colorPickerActionBtns",
43
+ style: {
44
+ display: "flex",
45
+ justifyContent: "end",
46
+ margin: "8px"
47
+ },
57
48
  children: [/*#__PURE__*/_jsx(Button, {
58
49
  onClick: handleClose,
59
- className: "cancelBtn",
50
+ className: "secondaryBtn",
60
51
  children: "Cancel"
61
52
  }), /*#__PURE__*/_jsx(Button, {
62
53
  onClick: handleSave,
63
- className: "confirmBtn",
54
+ className: "primaryBtn",
64
55
  children: "Save"
65
56
  })]
66
57
  })]
@@ -73,11 +64,7 @@ const ColorPickerButton = props => {
73
64
  defaultColors = [],
74
65
  classes = {},
75
66
  recentColors = [],
76
- hideGradient,
77
- children,
78
- handleClose: closeDrawer,
79
- hideThemeColors,
80
- disableEditTheme
67
+ hideGradient
81
68
  } = props;
82
69
  const [anchorEl, setAnchorEl] = useState(null);
83
70
  const open = Boolean(anchorEl);
@@ -89,13 +76,7 @@ const ColorPickerButton = props => {
89
76
  setAnchorEl(null);
90
77
  };
91
78
  return /*#__PURE__*/_jsxs(_Fragment, {
92
- children: [children ? /*#__PURE__*/_jsx("div", {
93
- onClick: handleColorPicker,
94
- style: {
95
- cursor: "pointer"
96
- },
97
- children: children
98
- }) : /*#__PURE__*/_jsx(Button, {
79
+ children: [/*#__PURE__*/_jsx(Button, {
99
80
  style: {
100
81
  background: value,
101
82
  height: "22px",
@@ -122,10 +103,7 @@ const ColorPickerButton = props => {
122
103
  onSave: onSave,
123
104
  recentColors: recentColors,
124
105
  hideGradient: hideGradient,
125
- handleClose: handleClose,
126
- closeDrawer: closeDrawer,
127
- hideThemeColors: hideThemeColors,
128
- disableEditTheme: disableEditTheme
106
+ handleClose: handleClose
129
107
  })
130
108
  })
131
109
  }) : /*#__PURE__*/_jsx(Popover, {
@@ -151,10 +129,7 @@ const ColorPickerButton = props => {
151
129
  onSave: onSave,
152
130
  recentColors: recentColors,
153
131
  hideGradient: hideGradient,
154
- handleClose: handleClose,
155
- closeDrawer: closeDrawer,
156
- hideThemeColors: hideThemeColors,
157
- disableEditTheme: disableEditTheme
132
+ handleClose: handleClose
158
133
  })
159
134
  })
160
135
  })]
@@ -7,7 +7,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
7
7
  import { Transforms } from "slate";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
- const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
10
+ const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
11
11
  const DragHandleStyle = fromPopper => {
12
12
  const handleDragStyle = fromPopper ? {
13
13
  position: "absolute",
@@ -19,8 +19,6 @@ const FontLoader = props => {
19
19
  const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
20
20
  let currentIndex = 0;
21
21
  let retryCount = 0;
22
- // let hideLoaderOn = 30;
23
-
24
22
  const loadNextBatch = () => {
25
23
  try {
26
24
  if (currentIndex >= families?.length) {
@@ -81,7 +79,6 @@ const FontLoader = props => {
81
79
  // console.log(err);
82
80
  // setLoading(false);
83
81
  });
84
- // setLoading(true);
85
82
  } else {
86
83
  function correctFontArray(fontString) {
87
84
  let fontsArray = fontString?.split(",");
@@ -48,16 +48,6 @@ import ChervUp from "../assets/svg/ChervUp";
48
48
  import ResetIconNew from "../assets/svg/ResetIconNew";
49
49
  import { jsx as _jsx } from "react/jsx-runtime";
50
50
  import { jsxs as _jsxs } from "react/jsx-runtime";
51
- const HeadingIcon = ({
52
- variant
53
- }) => {
54
- return /*#__PURE__*/_jsx("div", {
55
- style: {
56
- color: "#64748B"
57
- },
58
- children: variant
59
- });
60
- };
61
51
  const iconList = {
62
52
  fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
63
53
  size: 20
@@ -90,24 +80,6 @@ const iconList = {
90
80
  size: 18,
91
81
  fill: "#64748B"
92
82
  }),
93
- headingFour: /*#__PURE__*/_jsx(HeadingIcon, {
94
- variant: "H4"
95
- }),
96
- headingFive: /*#__PURE__*/_jsx(HeadingIcon, {
97
- variant: "H5"
98
- }),
99
- headingSix: /*#__PURE__*/_jsx(HeadingIcon, {
100
- variant: "H6"
101
- }),
102
- paragraphOne: /*#__PURE__*/_jsx(HeadingIcon, {
103
- variant: "P1"
104
- }),
105
- paragraphTwo: /*#__PURE__*/_jsx(HeadingIcon, {
106
- variant: "P2"
107
- }),
108
- paragraphThree: /*#__PURE__*/_jsx(HeadingIcon, {
109
- variant: "P3"
110
- }),
111
83
  blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
112
84
  size: 20,
113
85
  fill: "#64748B",
@@ -17,7 +17,7 @@ const IMAGE_SLECTOR_OPTIONS = {
17
17
  };
18
18
  const TAB_SHOW = {
19
19
  Image: ["upload", "choose", "addLink"],
20
- Video: ["upload", "addLink"],
20
+ Video: ["addLink"],
21
21
  Embed: ["addLink"],
22
22
  Document: ["addLink", "upload"]
23
23
  };
@@ -35,7 +35,7 @@ const ImageSelector = props => {
35
35
  customProps
36
36
  } = props;
37
37
  const translation = customProps?.translation;
38
- const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "Video" ? "upload" : "addLink");
38
+ const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "addLink");
39
39
  const [image, setImage] = useState(value || "");
40
40
  const handleTabChange = (e, newValue) => {
41
41
  setImage("");
@@ -76,7 +76,7 @@ const ImageSelectorStyles = theme => ({
76
76
  background: theme?.palette?.editor?.deviderBgColor,
77
77
  "@media only screen and (min-width: 899px)": {
78
78
  margin: "0px 24px",
79
- width: "calc(100% - 48px)"
79
+ width: 'calc(100% - 48px)'
80
80
  }
81
81
  },
82
82
  "& .primaryBtn": {
@@ -104,6 +104,12 @@ const ImageSelectorStyles = theme => ({
104
104
  marginRight: "8px !important"
105
105
  },
106
106
  "& .MuiGrid-root": {
107
+ "&::-webkit-scrollbar-thumb": {
108
+ background: `none !important`
109
+ },
110
+ "&::-webkit-scrollbar-track": {
111
+ visibility: "hidden"
112
+ },
107
113
  "&::-webkit-scrollbar-thumb": {
108
114
  background: `${theme?.palette?.editor?.brainPopupScroll} !important`
109
115
  },
@@ -112,10 +118,10 @@ const ImageSelectorStyles = theme => ({
112
118
  }
113
119
  },
114
120
  "& .MuiImageList-root": {
115
- margin: "0px"
121
+ margin: '0px'
116
122
  },
117
123
  "& .MuiDialogContent-root": {
118
- padding: "20px 24px 5px 24px"
124
+ padding: '20px 24px 5px 24px'
119
125
  }
120
126
  },
121
127
  titleTypo: {
@@ -1,8 +1,8 @@
1
- import { Autocomplete, TextField, Typography, createFilterOptions } from "@mui/material";
1
+ import { Autocomplete, Checkbox, FormControlLabel, IconButton, MenuItem, TextField, Typography, createFilterOptions } from "@mui/material";
2
2
  import { useEffect, useMemo, useState } from "react";
3
3
  import { useSlate } from "slate-react";
4
4
  import Select from "../Select";
5
- import Checkbox from "../Checkbox";
5
+ import { CheckedBoxCheckIcon } from "../iconListV2";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  import { Fragment as _Fragment } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,10 +28,24 @@ const OpenInNewTab = props => {
28
28
  onNewTabChange,
29
29
  translation
30
30
  } = props;
31
- return nav?.showOpenInNewTab ? /*#__PURE__*/_jsx(Checkbox, {
32
- checked: openInNewTab,
33
- onChange: onNewTabChange,
34
- label: translation("Open in new tab")
31
+ return nav?.showOpenInNewTab ? /*#__PURE__*/_jsx(FormControlLabel, {
32
+ className: "ccheckbox-primary",
33
+ control: /*#__PURE__*/_jsx(Checkbox, {
34
+ checked: openInNewTab,
35
+ onChange: onNewTabChange,
36
+ className: "checkBox",
37
+ checkedIcon: /*#__PURE__*/_jsx(IconButton, {
38
+ className: "checkedIcon",
39
+ children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
40
+ }),
41
+ icon: /*#__PURE__*/_jsx(IconButton, {
42
+ className: "unCheckedIcon"
43
+ })
44
+ }),
45
+ label: /*#__PURE__*/_jsx(Typography, {
46
+ variant: "body2",
47
+ children: "Open in new tab"
48
+ })
35
49
  }) : null;
36
50
  };
37
51
  export const TextInput = props => {
@@ -58,7 +72,8 @@ export const SelectPage = props => {
58
72
  value,
59
73
  onChange,
60
74
  services,
61
- translation
75
+ translation,
76
+ classes
62
77
  } = props;
63
78
  const [pages, setPages] = useState([]);
64
79
  const editor = useSlate();
@@ -111,42 +126,28 @@ export const SelectPage = props => {
111
126
  }, [value, pages]);
112
127
  const isCurrentPage = page?.value === "_currentPage";
113
128
  return /*#__PURE__*/_jsxs("div", {
114
- children: [/*#__PURE__*/_jsx(Select, {
129
+ children: [/*#__PURE__*/_jsx(FreeSoloCreateOption, {
130
+ label: page?.label,
131
+ setValue: val => onChange(val?.value || ""),
132
+ placeholder: translation("Select Page"),
115
133
  options: pages,
116
- value: page?.value,
117
- onChange: e => onChange(e.target.value || ""),
118
134
  disabled: isCurrentPage,
119
- label: translation("Select Page"),
120
- showDefault: true,
121
- translation: translation
122
- }), /*#__PURE__*/_jsx(Select, {
123
- options: page?.sections?.map(p => ({
124
- label: p,
125
- value: p
126
- })),
127
- value: section?.value,
128
- onChange: e => {
129
- const {
130
- value = ""
131
- } = e.target;
135
+ classes: classes
136
+ }), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
137
+ label: section?.label,
138
+ setValue: val => {
132
139
  let url = page?.value;
133
- if (value) {
134
- url += `#${value}`;
135
- } else {
136
- const [page] = url.split("#");
137
- url = page;
140
+ if (val?.value) {
141
+ url += `#${val?.value}`;
138
142
  }
139
143
  onChange(url);
140
144
  },
141
- disabled: isCurrentPage,
142
- label: translation("Select Section or anchor"),
143
- labelProps: {
144
- sx: {
145
- padding: "10px 0px 4px 0px"
146
- }
147
- },
148
- showDefault: true,
149
- translation: translation
145
+ placeholder: translation("Select Section or anchor"),
146
+ options: page?.sections?.map(p => ({
147
+ label: p,
148
+ value: p
149
+ })),
150
+ classes: classes
150
151
  }), isCurrentPage ? null : /*#__PURE__*/_jsx(OpenInNewTab, {
151
152
  ...props
152
153
  })]
@@ -175,15 +176,34 @@ export const ScrollTopBottom = props => {
175
176
  const {
176
177
  value,
177
178
  onChange,
178
- translation
179
+ translation,
180
+ classes
179
181
  } = props;
180
- return /*#__PURE__*/_jsx(Select, {
181
- options: scrollToOptions,
182
- value: value,
183
- onChange: e => onChange(e.target.value),
184
- label: translation("Choose Top/Bottom of page"),
185
- showDefault: true,
186
- translation: translation
182
+ return /*#__PURE__*/_jsxs(_Fragment, {
183
+ children: [/*#__PURE__*/_jsx(Typography, {
184
+ variant: "body2",
185
+ sx: {
186
+ paddingBottom: "4px"
187
+ },
188
+ children: translation("Choose Top/Bottom of page")
189
+ }), /*#__PURE__*/_jsx(Select, {
190
+ size: "small",
191
+ fullWidth: true,
192
+ value: value,
193
+ onChange: e => onChange(e.target.value),
194
+ MenuProps: {
195
+ sx: classes.customSelect
196
+ },
197
+ children: scrollToOptions.map((option, i) => {
198
+ return /*#__PURE__*/_jsx(MenuItem, {
199
+ value: option.value,
200
+ children: /*#__PURE__*/_jsx(Typography, {
201
+ variant: "body2",
202
+ children: translation(option.label)
203
+ })
204
+ }, i);
205
+ })
206
+ })]
187
207
  });
188
208
  };
189
209
  const filter = createFilterOptions();
@@ -5,7 +5,7 @@ import DialogContent from "@mui/material/DialogContent";
5
5
  import DialogActions from "@mui/material/DialogActions";
6
6
  import IconButton from "@mui/material/IconButton";
7
7
  import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
8
- import { Box, FormControl, Grid, Typography, useMediaQuery } from "@mui/material";
8
+ import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography, useMediaQuery } from "@mui/material";
9
9
  import { useState } from "react";
10
10
  import LinkSettingsStyles from "./style";
11
11
  import { getNavOptions } from "./navOptions";
@@ -13,7 +13,6 @@ 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";
17
16
  import { jsx as _jsx } from "react/jsx-runtime";
18
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
18
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -47,7 +46,7 @@ export default function LinkSettings(props) {
47
46
  tagName,
48
47
  translation
49
48
  } = customProps;
50
- const isMobile = useMediaQuery("(max-width: 899px)");
49
+ const isMobile = useMediaQuery('(max-width: 899px)');
51
50
  const navOptions = getNavOptions(customProps.hideTools, tagName, allowTrigger);
52
51
  const classes = LinkSettingsStyles(theme);
53
52
  const [nav, setNav] = useState(getNav(navType, navOptions));
@@ -69,7 +68,7 @@ export default function LinkSettings(props) {
69
68
  open: true,
70
69
  onClose: handleClose,
71
70
  children: /*#__PURE__*/_jsxs(Grid, {
72
- sx: classes.swipeableDrawerContainer,
71
+ sx: classes.drawerContainer,
73
72
  children: [/*#__PURE__*/_jsx(Typography, {
74
73
  variant: "subtitle1",
75
74
  gutterBottom: true,
@@ -79,7 +78,8 @@ export default function LinkSettings(props) {
79
78
  className: "link-settings-title",
80
79
  children: translation("dialogueTitle")
81
80
  }), /*#__PURE__*/_jsx(Select, {
82
- options: navOptions,
81
+ size: "small",
82
+ fullWidth: true,
83
83
  value: nav?.value,
84
84
  onChange: e => {
85
85
  const {
@@ -90,10 +90,18 @@ export default function LinkSettings(props) {
90
90
  setNavValue("");
91
91
  },
92
92
  displayEmpty: true,
93
- translation: translation,
94
93
  MenuProps: {
95
94
  sx: classes.customSelect
96
- }
95
+ },
96
+ children: navOptions.map((navOption, i) => {
97
+ return /*#__PURE__*/_jsx(MenuItem, {
98
+ value: navOption.value,
99
+ children: /*#__PURE__*/_jsx(Typography, {
100
+ variant: "body2",
101
+ children: translation(navOption.label)
102
+ })
103
+ }, i);
104
+ })
97
105
  }), /*#__PURE__*/_jsx(Box, {
98
106
  sx: {
99
107
  paddingTop: "14px"
@@ -158,13 +166,18 @@ export default function LinkSettings(props) {
158
166
  children: /*#__PURE__*/_jsx(FormControl, {
159
167
  sx: classes.customRadioBtn,
160
168
  children: /*#__PURE__*/_jsx(RadioGroup, {
161
- options: navOptions,
162
169
  value: nav?.value,
163
- onChange: navOption => {
164
- setNav(navOption);
165
- setNavValue("");
166
- },
167
- translation: translation
170
+ children: navOptions?.map((navOption, i) => {
171
+ return /*#__PURE__*/_jsx(FormControlLabel, {
172
+ value: navOption.value,
173
+ control: /*#__PURE__*/_jsx(Radio, {}),
174
+ label: translation(navOption.label),
175
+ onChange: () => {
176
+ setNav(navOption);
177
+ setNavValue("");
178
+ }
179
+ }, i);
180
+ })
168
181
  })
169
182
  })
170
183
  }), /*#__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: "mail@example.com"
29
+ placeholder: "email"
30
30
  }, {
31
31
  label: "Phone number",
32
32
  value: "phone",
33
- placeholder: "+1 (702) 123-4567"
33
+ placeholder: "phone"
34
34
  }];
35
35
  navOptions = navOptions.filter(n => !hideTools.includes(n.value));
36
36
  if (!allowTrigger) {