@flozy/editor 10.2.5 → 10.2.6

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 (183) 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/Styles.js +3 -9
  89. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
  90. package/dist/Editor/common/LinkSettings/index.js +82 -79
  91. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  92. package/dist/Editor/common/LinkSettings/style.js +209 -74
  93. package/dist/Editor/common/RadioGroup/index.js +48 -0
  94. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  95. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  96. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  97. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  98. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  99. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  100. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  101. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  103. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  111. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  112. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  113. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  114. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  115. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  116. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  117. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  118. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -54
  119. package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
  120. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  121. package/dist/Editor/common/RnD/index.js +6 -11
  122. package/dist/Editor/common/Select/index.js +44 -5
  123. package/dist/Editor/common/Select/styles.js +30 -2
  124. package/dist/Editor/common/Shorthands/elements.js +65 -11
  125. package/dist/Editor/common/SnackBar/index.js +43 -0
  126. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  127. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  128. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  129. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  130. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  131. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  132. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  138. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  139. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  140. package/dist/Editor/common/Uploader.js +8 -0
  141. package/dist/Editor/common/iconListV2.js +177 -6
  142. package/dist/Editor/common/iconslist.js +24 -0
  143. package/dist/Editor/commonStyle.js +186 -62
  144. package/dist/Editor/helper/index.js +4 -0
  145. package/dist/Editor/helper/textIndeces.js +58 -0
  146. package/dist/Editor/helper/theme.js +203 -2
  147. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  148. package/dist/Editor/hooks/useMouseMove.js +8 -5
  149. package/dist/Editor/hooks/useTable.js +5 -4
  150. package/dist/Editor/hooks/useThemeValues.js +63 -0
  151. package/dist/Editor/plugins/withEmbeds.js +1 -1
  152. package/dist/Editor/plugins/withHTML.js +3 -1
  153. package/dist/Editor/plugins/withTable.js +1 -1
  154. package/dist/Editor/theme/ThemeList.js +50 -173
  155. package/dist/Editor/theme/index.js +149 -0
  156. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  157. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  158. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  159. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  160. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  161. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  162. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  163. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  164. package/dist/Editor/themeSettings/icons.js +60 -0
  165. package/dist/Editor/themeSettings/index.js +369 -0
  166. package/dist/Editor/themeSettings/style.js +299 -0
  167. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  168. package/dist/Editor/themeSettingsAI/index.js +355 -0
  169. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  170. package/dist/Editor/themeSettingsAI/style.js +332 -0
  171. package/dist/Editor/utils/SlateUtilityFunctions.js +169 -45
  172. package/dist/Editor/utils/accordion.js +14 -4
  173. package/dist/Editor/utils/button.js +1 -17
  174. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  175. package/dist/Editor/utils/draftToSlate.js +3 -2
  176. package/dist/Editor/utils/events.js +50 -6
  177. package/dist/Editor/utils/font.js +40 -37
  178. package/dist/Editor/utils/form.js +4 -4
  179. package/dist/Editor/utils/formfield.js +8 -2
  180. package/dist/Editor/utils/helper.js +134 -26
  181. package/dist/Editor/utils/insertAppHeader.js +1 -1
  182. package/dist/Editor/utils/signature.js +2 -9
  183. package/package.json +4 -4
@@ -6,15 +6,18 @@ const accordionTitleStyle = [{
6
6
  key: "textColor",
7
7
  type: "color",
8
8
  needPreview: true
9
- }, {
10
- label: "Background Color",
11
- key: "bgColor",
12
- type: "color"
13
- }, {
14
- label: "Border Color",
15
- key: "borderColor",
16
- type: "color"
17
- }]
9
+ }
10
+ // {
11
+ // label: "Background Color",
12
+ // key: "bgColor",
13
+ // type: "color",
14
+ // },
15
+ // {
16
+ // label: "Border Color",
17
+ // key: "borderColor",
18
+ // type: "color",
19
+ // },
20
+ ]
18
21
  }, {
19
22
  tab: "Banner Spacing",
20
23
  value: "bannerSpacing",
@@ -21,7 +21,8 @@ const buttonStyle = [{
21
21
  },
22
22
  children: option.text
23
23
  });
24
- }
24
+ },
25
+ themeEnabled: true
25
26
  }, {
26
27
  label: "Font Size",
27
28
  key: "textSize",
@@ -45,7 +46,8 @@ const buttonStyle = [{
45
46
  }, {
46
47
  label: "Button Color",
47
48
  key: "bgColor",
48
- type: "color"
49
+ type: "color",
50
+ themeEnabled: true
49
51
  }, {
50
52
  label: "Border Color",
51
53
  key: "borderColor",
@@ -76,6 +76,11 @@ const BackgroundImage = props => {
76
76
  children: translation("REMOVE")
77
77
  }) : /*#__PURE__*/_jsx(Grid, {
78
78
  className: "uploadImageText",
79
+ sx: {
80
+ padding: 0,
81
+ background: `${theme?.palette?.editor?.inputFieldBgColor}`,
82
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
83
+ },
79
84
  children: /*#__PURE__*/_jsxs(Button, {
80
85
  component: "label",
81
86
  variant: "text",
@@ -3,13 +3,13 @@ import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box, IconButton }
3
3
  import { squreStyle } from "./radiusStyle";
4
4
  import { getBreakPointsValue } from "../../../helper/theme";
5
5
  import useWindowResize from "../../../hooks/useWindowResize";
6
+ import { useEditorTheme } from "../../../hooks/useEditorTheme";
6
7
  import { CheckedBoxCheckIcon } from "../../iconListV2";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
10
11
  const BannerSpacing = props => {
11
12
  const {
12
- value: val,
13
13
  data,
14
14
  onChange,
15
15
  elementProps,
@@ -23,7 +23,17 @@ const BannerSpacing = props => {
23
23
  key
24
24
  } = data;
25
25
  const lockKeyVal = `lock${key}`;
26
- let lockSpacing = elementProps[lockKeyVal];
26
+ const {
27
+ selectedTheme
28
+ } = useEditorTheme();
29
+ const {
30
+ bannerSpacing,
31
+ lockbannerSpacing
32
+ } = selectedTheme?.elementProps?.button || {};
33
+ const isUserValue = Object.keys(props?.value || {})?.length;
34
+ const isUserLockedSpacing = typeof elementProps[lockKeyVal] === "boolean";
35
+ const val = isUserValue ? props?.value : bannerSpacing;
36
+ let lockSpacing = isUserLockedSpacing ? elementProps[lockKeyVal] : lockbannerSpacing;
27
37
  if (lockSpacing === undefined) {
28
38
  lockSpacing = true;
29
39
  }
@@ -3,13 +3,13 @@ import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box, IconButton }
3
3
  import { radiusStyle } from "./radiusStyle";
4
4
  import useWindowResize from "../../../hooks/useWindowResize";
5
5
  import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
6
+ import { useEditorTheme } from "../../../hooks/useEditorTheme";
6
7
  import { CheckedBoxCheckIcon } from "../../iconListV2";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
10
11
  const BorderRadius = props => {
11
12
  const {
12
- value: val,
13
13
  data,
14
14
  onChange,
15
15
  elementProps,
@@ -19,16 +19,24 @@ const BorderRadius = props => {
19
19
  const {
20
20
  translation
21
21
  } = customProps;
22
- let {
23
- lockRadius
24
- } = elementProps;
25
- if (lockRadius === undefined) {
26
- lockRadius = true;
27
- }
28
22
  const {
29
23
  key
30
24
  } = data;
31
25
  const [size] = useWindowResize();
26
+ const {
27
+ selectedTheme
28
+ } = useEditorTheme();
29
+ const {
30
+ borderRadius,
31
+ lockRadius: themeLockRadius
32
+ } = selectedTheme?.elementProps?.button || {};
33
+ const isUserValue = Object.keys(props?.value || {})?.length;
34
+ const isUserLockedRadius = typeof elementProps?.lockRadius === "boolean";
35
+ const val = isUserValue ? props?.value : borderRadius;
36
+ let lockRadius = isUserLockedRadius ? elementProps?.lockRadius : themeLockRadius;
37
+ if (lockRadius === undefined) {
38
+ lockRadius = true;
39
+ }
32
40
  const value = getBreakPointsValue(val, size?.device);
33
41
  const handleChange = e => {
34
42
  let changeAll = {};
@@ -1,6 +1,7 @@
1
1
  import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
2
2
  import React from "react";
3
3
  import Icon from "../../Icon";
4
+ import { useEditorContext } from "../../../hooks/useMouseMove";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { Fragment as _Fragment } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,14 +16,17 @@ const RenderCard = ({
15
16
  }) => {
16
17
  return /*#__PURE__*/_jsx(Card, {
17
18
  sx: {
18
- position: 'relative',
19
- padding: "10px"
19
+ position: "relative",
20
+ padding: "10px",
21
+ "& .MuiCheckbox-root svg": {
22
+ fill: "unset !important"
23
+ }
20
24
  },
21
25
  children: /*#__PURE__*/_jsx(FormControlLabel, {
22
26
  control: /*#__PURE__*/_jsx(Checkbox, {
23
27
  sx: {
24
28
  padding: 0,
25
- marginTop: '3px'
29
+ marginTop: "3px"
26
30
  },
27
31
  onChange: handleChange,
28
32
  checked: value,
@@ -58,10 +62,10 @@ const RenderCard = ({
58
62
  })
59
63
  }),
60
64
  sx: {
61
- width: '100%',
62
- display: 'flex',
63
- justifyContent: 'space-between',
64
- alignItems: 'flex-start',
65
+ width: "100%",
66
+ display: "flex",
67
+ justifyContent: "space-between",
68
+ alignItems: "flex-start",
65
69
  margin: 0
66
70
  },
67
71
  labelPlacement: "start"
@@ -83,6 +87,9 @@ const CardsMapping = props => {
83
87
  selectedCard,
84
88
  infoIcon
85
89
  } = data;
90
+ const {
91
+ theme
92
+ } = useEditorContext();
86
93
  const {
87
94
  translation
88
95
  } = customProps;
@@ -104,7 +111,8 @@ const CardsMapping = props => {
104
111
  sx: {
105
112
  marginBottom: "12px",
106
113
  "& .MuiPaper-root": {
107
- border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
114
+ background: theme?.palette?.editor?.miniToolBarBackground,
115
+ border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
108
116
  borderRadius: "8px",
109
117
  boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
110
118
  }
@@ -1,14 +1,23 @@
1
- import React, { useEffect, useState } from "react";
1
+ import React, { useEffect, useMemo, useState } from "react";
2
2
  import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
3
3
  import ColorPickerButton from "../../ColorPickerButton";
4
+ import { getVariableValue } from "../../../helper/theme";
5
+ import { useButtonStyle } from "../../../hooks/useThemeValues";
6
+
7
+ // const MAP_STYLE_PROPS = {
8
+ // bgColor: "background-color",
9
+ // textColor: "color",
10
+ // };
4
11
  import { jsx as _jsx } from "react/jsx-runtime";
5
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
13
  const Color = props => {
7
14
  const {
8
- value,
15
+ value: val,
9
16
  data,
10
17
  onChange,
11
18
  classes,
19
+ elementProps,
20
+ handleClose,
12
21
  customProps
13
22
  } = props;
14
23
  const {
@@ -20,7 +29,22 @@ const Color = props => {
20
29
  translation
21
30
  } = customProps;
22
31
  const [recentColors, setRecentColors] = useState({});
23
- const getLable = label === 'Text' ? translation("selectTextColor") : label === 'Background' ? translation("selectBgColor") : translation(label);
32
+ const {
33
+ buttonStyle
34
+ } = useButtonStyle(val, key, elementProps);
35
+ const newValue = buttonStyle?.color;
36
+ const {
37
+ value,
38
+ inputValue
39
+ } = useMemo(() => {
40
+ const isVariable = newValue && newValue.startsWith("var");
41
+ const inputValue = isVariable ? getVariableValue(newValue) : newValue;
42
+ return {
43
+ value: newValue,
44
+ inputValue: inputValue
45
+ };
46
+ }, [buttonStyle?.color]);
47
+ const getLable = label === "Text" ? translation("selectTextColor") : label === "Background" ? translation("selectBgColor") : translation(label);
24
48
  useEffect(() => {
25
49
  const storedColors = JSON.parse(localStorage.getItem("recentColors"));
26
50
  if (storedColors) {
@@ -58,11 +82,11 @@ const Color = props => {
58
82
  fontSize: "14px",
59
83
  fontWeight: 500,
60
84
  marginBottom: "5px",
61
- display: 'flex',
62
- alignItems: 'center',
63
- '& svg': {
64
- width: '20px',
65
- height: '20px'
85
+ display: "flex",
86
+ alignItems: "center",
87
+ "& svg": {
88
+ width: "20px",
89
+ height: "20px"
66
90
  }
67
91
  },
68
92
  children: [translation(label), data?.infoIcon ? /*#__PURE__*/_jsx(Tooltip, {
@@ -70,14 +94,14 @@ const Color = props => {
70
94
  title: translation("noteText"),
71
95
  children: /*#__PURE__*/_jsx("span", {
72
96
  style: {
73
- display: 'inline-block'
97
+ display: "inline-block"
74
98
  },
75
99
  children: data?.infoIcon
76
100
  })
77
101
  }) : null]
78
102
  }), /*#__PURE__*/_jsx(TextField, {
79
103
  fullWidth: true,
80
- value: value,
104
+ value: inputValue,
81
105
  placeholder: getLable || `${label} ${translation("color code")}`,
82
106
  InputLabelProps: {
83
107
  shrink: true
@@ -90,6 +114,8 @@ const Color = props => {
90
114
  value: value,
91
115
  onSave: onSave,
92
116
  recentColors: recentColors[key],
117
+ handleClose: handleClose,
118
+ disableEditTheme: customProps?.disableEditTheme,
93
119
  hideGradient: hideGradient
94
120
  })
95
121
  })
@@ -1,23 +1,30 @@
1
- import React from "react";
1
+ import React, { useMemo } from "react";
2
2
  import { TextField, IconButton, Grid, Typography } from "@mui/material";
3
3
  import { sizeMap } from "../../../utils/font.js";
4
4
  import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
5
+ import { getElementStyle } from "../../../helper/theme.js";
6
+ import { useSlateStatic } from "slate-react";
5
7
  import { jsx as _jsx } from "react/jsx-runtime";
6
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
9
  const FontSize = props => {
8
10
  const {
9
- value,
11
+ value: val,
10
12
  data,
11
13
  onChange,
14
+ elementProps,
12
15
  customProps
13
16
  } = props;
14
- const {
15
- translation
16
- } = customProps;
17
17
  const {
18
18
  key,
19
19
  width
20
20
  } = data;
21
+ const editor = useSlateStatic();
22
+ const value = useMemo(() => {
23
+ return val || getElementStyle(editor, elementProps, "font-size");
24
+ }, [editor, val]);
25
+ const {
26
+ translation
27
+ } = customProps;
21
28
  const handleChange = e => {
22
29
  let inc = parseInt(e.target.value) || 16;
23
30
  inc = inc > 200 ? 200 : inc;
@@ -28,7 +35,9 @@ const FontSize = props => {
28
35
  const getSizeVal = () => {
29
36
  try {
30
37
  const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
31
- return parseInt(size || 16);
38
+ const defaultSize = 16;
39
+ const val = parseInt(size || defaultSize);
40
+ return isNaN(val) ? defaultSize : val;
32
41
  } catch (err) {
33
42
  return "";
34
43
  }
@@ -77,7 +86,7 @@ const FontSize = props => {
77
86
  size: "small",
78
87
  inputProps: {
79
88
  style: {
80
- // textAlign: "center",
89
+ // textAlign: "center",
81
90
  padding: "11px"
82
91
  }
83
92
  },
@@ -53,9 +53,9 @@ const LineSpacing = props => {
53
53
  defaultValue: value || 1.43,
54
54
  "aria-label": "Default",
55
55
  valueLabelDisplay: "auto",
56
- min: 0.5,
57
- max: 3.0,
58
- step: 0.1,
56
+ min: 0.50,
57
+ max: 3.00,
58
+ step: 0.01,
59
59
  name: "lineHeight",
60
60
  onChange: handleChange
61
61
  }), /*#__PURE__*/_jsx(Box, {
@@ -65,15 +65,16 @@ const LineSpacing = props => {
65
65
  color: theme?.palette?.editor?.textColor
66
66
  },
67
67
  name: "lineHeight",
68
- value: pro_value,
68
+ value: pro_value || 1.43,
69
69
  className: "sliderInput",
70
70
  onChange: handleChange,
71
71
  type: "number",
72
72
  placeholder: "0",
73
- disabled: true,
74
- defaultValue: pro_value || 1.43
73
+ disabled: true
74
+ // defaultValue={pro_value || 1.43}
75
75
  })]
76
76
  })]
77
77
  });
78
78
  };
79
+
79
80
  export default LineSpacing;
@@ -1,9 +1,9 @@
1
1
  import React, { useState } from "react";
2
2
  import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel, Typography, Tooltip, IconButton } from "@mui/material";
3
- import DeleteIcon from "@mui/icons-material/Delete";
4
- import Settings from "@mui/icons-material/Settings";
5
3
  import LinkSettings from "../../LinkSettings";
6
4
  import { getLinkType } from "../../../utils/helper";
5
+ import SettingsIcon from "../../../assets/svg/SettingsIcon";
6
+ import { DeleteIcon } from "../../../assets/svg/AIIcons";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  const MenusArray = props => {
@@ -126,6 +126,7 @@ const MenusArray = props => {
126
126
  display: "flex",
127
127
  alignItems: "center"
128
128
  },
129
+ className: "menu-item-app-header",
129
130
  children: [/*#__PURE__*/_jsx(TextField, {
130
131
  name: "text",
131
132
  type: "text",
@@ -134,7 +135,8 @@ const MenusArray = props => {
134
135
  size: "small",
135
136
  sx: {
136
137
  mb: 0
137
- }
138
+ },
139
+ className: "text-field1"
138
140
  }), /*#__PURE__*/_jsx(TextField, {
139
141
  name: "url",
140
142
  type: "text",
@@ -142,7 +144,8 @@ const MenusArray = props => {
142
144
  onChange: handleChange(i),
143
145
  size: "small",
144
146
  fullWidth: true,
145
- disabled: true
147
+ disabled: true,
148
+ className: "text-field1"
146
149
  }), /*#__PURE__*/_jsx(Tooltip, {
147
150
  title: translation("Link Settings"),
148
151
  arrow: true,
@@ -151,14 +154,18 @@ const MenusArray = props => {
151
154
  menu: m,
152
155
  index: i
153
156
  }),
154
- children: /*#__PURE__*/_jsx(Settings, {})
157
+ children: /*#__PURE__*/_jsx(SettingsIcon, {
158
+ className: "settingsIcon"
159
+ })
155
160
  })
156
161
  }), /*#__PURE__*/_jsx(Tooltip, {
157
162
  title: translation("Delete Menu"),
158
163
  arrow: true,
159
164
  children: /*#__PURE__*/_jsx(IconButton, {
160
165
  onClick: onDelete(i),
161
- children: /*#__PURE__*/_jsx(DeleteIcon, {})
166
+ children: /*#__PURE__*/_jsx(DeleteIcon, {
167
+ className: "deleteIcon"
168
+ })
162
169
  })
163
170
  })]
164
171
  }, `add-m-${i}`);
@@ -1,13 +1,13 @@
1
- import React from "react";
1
+ import React, { useMemo } from "react";
2
2
  import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
3
- import { getBreakPointsValue } from "../../../helper/theme";
3
+ import { getBreakPointsValue, getElementStyle } from "../../../helper/theme";
4
4
  import useWindowResize from "../../../hooks/useWindowResize";
5
5
  import { useEditorContext } from "../../../hooks/useMouseMove";
6
6
  import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
7
7
  import { useSlate } from "slate-react";
8
8
  import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
9
9
 
10
- // hideMetaDataOptions -- pass true to hide metadata option in select field
10
+ // hideMetaDataOptions -- pass true to hide metadata option in select field
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -31,14 +31,22 @@ const TextOptions = props => {
31
31
  renderOption,
32
32
  width,
33
33
  webFont = false,
34
- hideMetaDataOptions = false
34
+ hideMetaDataOptions = false,
35
+ themeEnabled
35
36
  } = data;
36
37
  const {
37
38
  fontFamilies
38
39
  } = useEditorContext();
39
- const editor = useSlate();
40
40
  const [size] = useWindowResize();
41
- const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
41
+ const editor = useSlate();
42
+ const value = useMemo(() => {
43
+ const userValue = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
44
+ if (themeEnabled) {
45
+ // editor takes a little amount of time to update the new style in element, in that case userValue will be returned
46
+ return getElementStyle(editor, elementProps, key) || userValue;
47
+ }
48
+ return userValue;
49
+ }, [editor, isBreakpoint, val, size?.device]);
42
50
  const metaDataMappingOptions = metaMappings?.boards || [];
43
51
  const updatedOption = !hideMetaDataOptions && elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
44
52
  const handleChange = (e, d) => {
@@ -117,7 +125,7 @@ const TextOptions = props => {
117
125
  editor: editor,
118
126
  format: key,
119
127
  options: fontFamilies.options,
120
- width: '100%',
128
+ width: "100%",
121
129
  onChange: onChange,
122
130
  val: value,
123
131
  webFont: true
@@ -25,13 +25,11 @@ const pageSettingsStyle = [{
25
25
  label: "Padding",
26
26
  key: "bannerSpacing",
27
27
  type: "bannerSpacing"
28
- }
29
- // {
30
- // label: "Line Spacing",
31
- // key: "lineHeight",
32
- // type: "lineSpacing",
33
- // },
34
- ]
28
+ }, {
29
+ label: "Line Spacing",
30
+ key: "lineHeight",
31
+ type: "lineSpacing"
32
+ }]
35
33
  }, {
36
34
  tab: "Max Width",
37
35
  value: "maxWidth",
@@ -6,20 +6,22 @@ const Styles = theme => ({
6
6
  "& .MuiDrawer-paper": {
7
7
  borderTopLeftRadius: 8,
8
8
  borderTopRightRadius: 8,
9
- backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
10
- "& .MuiInputBase-root": {
11
- border: `1px solid ${theme?.palette?.editor?.textColor}`,
12
- color: theme?.palette?.editor?.textColor
13
- },
14
- "& .MuiSvgIcon-root": {
15
- color: theme?.palette?.editor?.textColor
16
- },
17
- "& .MuiFormLabel-root": {
18
- color: theme?.palette?.editor?.textColor,
19
- backgroundColor: theme?.palette?.editor?.background
20
- }
9
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground
10
+
11
+ // "& .MuiInputBase-root": {
12
+ // border: `1px solid ${theme?.palette?.editor?.textColor}`,
13
+ // color: theme?.palette?.editor?.textColor,
14
+ // },
15
+ // "& .MuiSvgIcon-root": {
16
+ // color: theme?.palette?.editor?.textColor,
17
+ // },
18
+ // "& .MuiFormLabel-root": {
19
+ // color: theme?.palette?.editor?.textColor,
20
+ // backgroundColor: theme?.palette?.editor?.background,
21
+ // },
21
22
  }
22
23
  },
24
+
23
25
  childContainer: {
24
26
  padding: "20px",
25
27
  "&.emojiDrawer": {
@@ -4,6 +4,7 @@ import { convertBase64 } from "../utils/helper";
4
4
  import { uploadFile } from "../service/fileupload";
5
5
  import Icon from "./Icon";
6
6
  import UploadStyles from "../common/ImageSelector/UploadStyles";
7
+ import { useEditorContext } from "../hooks/useMouseMove";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,6 +19,9 @@ const Uploader = props => {
18
19
  const [base64, setBase64] = useState(value?.url);
19
20
  const [fileName, setFileName] = useState("");
20
21
  const [uploading, setUploading] = useState(false);
22
+ const {
23
+ theme
24
+ } = useEditorContext();
21
25
  const handleChange = async e => {
22
26
  const uFile = e.target.files[0];
23
27
  const strImage = await convertBase64(uFile);
@@ -102,6 +106,10 @@ const Uploader = props => {
102
106
  className: "uploadImageSection",
103
107
  children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
104
108
  className: "uploadImageText",
109
+ sx: {
110
+ background: `${theme?.palette?.editor?.inputFieldBgColor}`,
111
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
112
+ },
105
113
  children: /*#__PURE__*/_jsxs(Button, {
106
114
  component: "label",
107
115
  variant: "text",