@flozy/editor 11.1.0 → 11.1.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 (140) hide show
  1. package/dist/Editor/ChatEditor.js +6 -6
  2. package/dist/Editor/CommonEditor.js +21 -82
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +4 -37
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  6. package/dist/Editor/Elements/Attachments/Attachments.js +11 -153
  7. package/dist/Editor/Elements/Attachments/AttachmentsButton.js +3 -8
  8. package/dist/Editor/Elements/Button/EditorButton.js +7 -22
  9. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  12. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +55 -134
  14. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +8 -7
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +3 -8
  16. package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +1 -1
  17. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +1 -1
  18. package/dist/Editor/Elements/Embed/Embed.css +0 -5
  19. package/dist/Editor/Elements/Embed/Embed.js +43 -37
  20. package/dist/Editor/Elements/Embed/Image.js +22 -242
  21. package/dist/Editor/Elements/Embed/Video.js +32 -277
  22. package/dist/Editor/Elements/Form/Form.js +35 -10
  23. package/dist/Editor/Elements/Form/FormField.js +1 -1
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/Form/Workflow/constant.js +1 -25
  26. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +75 -34
  27. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +5 -9
  28. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -3
  29. package/dist/Editor/Elements/FreeGrid/styles.js +0 -15
  30. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  31. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -2
  32. package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +3 -2
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +13 -2
  34. package/dist/Editor/Elements/SimpleText/index.js +1 -4
  35. package/dist/Editor/Elements/Table/Table.js +1 -2
  36. package/dist/Editor/Elements/Table/TableCell.js +3 -10
  37. package/dist/Editor/Elements/Title/title.js +5 -4
  38. package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -4
  39. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +3 -5
  40. package/dist/Editor/Styles/EditorStyles.js +5 -16
  41. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  42. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  43. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  44. package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -33
  45. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  46. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +1 -3
  47. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +23 -25
  48. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +5 -15
  50. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  51. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +7 -65
  52. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +12 -66
  53. package/dist/Editor/Toolbar/PopupTool/index.js +4 -6
  54. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  55. package/dist/Editor/common/ColorPickerButton.js +19 -38
  56. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  57. package/dist/Editor/common/FontLoader/FontLoader.js +0 -1
  58. package/dist/Editor/common/Icon.js +0 -28
  59. package/dist/Editor/common/ImageSelector/ImageSelector.js +7 -45
  60. package/dist/Editor/common/ImageSelector/Options/Upload.js +11 -26
  61. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  62. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  63. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  64. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  65. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  66. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  67. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -3
  68. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +7 -20
  69. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  70. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -2
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +7 -20
  72. package/dist/Editor/common/RnD/GuideLines/styles.js +1 -1
  73. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  74. package/dist/Editor/common/RnD/Utils/gridDropItem.js +11 -28
  75. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  76. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +63 -52
  77. package/dist/Editor/common/RnD/VirtualElement/helper.js +68 -248
  78. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -22
  79. package/dist/Editor/common/RnD/index.js +14 -61
  80. package/dist/Editor/common/Shorthands/elements.js +0 -54
  81. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  82. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  83. package/dist/Editor/common/StyleBuilder/fieldStyle.js +0 -1
  84. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -10
  85. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  86. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  87. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  88. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  89. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -2
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  91. package/dist/Editor/common/StyleBuilder/formStyle.js +13 -19
  92. package/dist/Editor/common/StyleBuilder/index.js +4 -8
  93. package/dist/Editor/common/Uploader.js +17 -118
  94. package/dist/Editor/common/iconslist.js +0 -21
  95. package/dist/Editor/commonStyle.js +3 -37
  96. package/dist/Editor/helper/index.js +1 -4
  97. package/dist/Editor/helper/theme.js +2 -203
  98. package/dist/Editor/hooks/useMouseMove.js +3 -12
  99. package/dist/Editor/hooks/useTable.js +1 -62
  100. package/dist/Editor/plugins/withEmbeds.js +1 -1
  101. package/dist/Editor/plugins/withHTML.js +3 -56
  102. package/dist/Editor/plugins/withTable.js +1 -1
  103. package/dist/Editor/service/fileupload.js +0 -70
  104. package/dist/Editor/theme/ThemeList.js +173 -50
  105. package/dist/Editor/utils/SlateUtilityFunctions.js +38 -162
  106. package/dist/Editor/utils/button.js +17 -1
  107. package/dist/Editor/utils/font.js +37 -40
  108. package/dist/Editor/utils/helper.js +3 -76
  109. package/dist/Editor/utils/insertAppHeader.js +4 -8
  110. package/package.json +1 -1
  111. package/dist/Editor/Elements/Attachments/AttachmentStyles.js +0 -16
  112. package/dist/Editor/Elements/FreeGrid/helper.js +0 -194
  113. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  114. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  115. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  116. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  117. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  118. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  119. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  120. package/dist/Editor/common/CustomSelect.js +0 -43
  121. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  122. package/dist/Editor/common/UploaderWithProgress.js +0 -183
  123. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  124. package/dist/Editor/hooks/useThemeValues.js +0 -63
  125. package/dist/Editor/theme/index.js +0 -149
  126. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  127. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  128. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  129. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  130. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  131. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  132. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  133. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  134. package/dist/Editor/themeSettings/icons.js +0 -60
  135. package/dist/Editor/themeSettings/index.js +0 -380
  136. package/dist/Editor/themeSettings/style.js +0 -299
  137. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  138. package/dist/Editor/themeSettingsAI/index.js +0 -355
  139. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  140. package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -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";
7
6
  import { CheckedBoxCheckIcon } from "../../iconListV2";
8
7
  import { jsx as _jsx } from "react/jsx-runtime";
9
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
9
  const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
11
10
  const BannerSpacing = props => {
12
11
  const {
12
+ value: val,
13
13
  data,
14
14
  onChange,
15
15
  elementProps,
@@ -23,17 +23,7 @@ const BannerSpacing = props => {
23
23
  key
24
24
  } = data;
25
25
  const lockKeyVal = `lock${key}`;
26
- const {
27
- selectedTheme
28
- } = useEditorTheme();
29
- const {
30
- bannerSpacing,
31
- lockbannerSpacing
32
- } = selectedTheme?.elementProps[elementProps?.type] || {};
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;
26
+ let lockSpacing = elementProps[lockKeyVal];
37
27
  if (lockSpacing === undefined) {
38
28
  lockSpacing = true;
39
29
  }
@@ -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";
7
6
  import { CheckedBoxCheckIcon } from "../../iconListV2";
8
7
  import { jsx as _jsx } from "react/jsx-runtime";
9
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
9
  const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
11
10
  const BorderRadius = props => {
12
11
  const {
12
+ value: val,
13
13
  data,
14
14
  onChange,
15
15
  elementProps,
@@ -19,24 +19,16 @@ 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
+ }
22
28
  const {
23
29
  key
24
30
  } = data;
25
31
  const [size] = useWindowResize();
26
- const {
27
- selectedTheme
28
- } = useEditorTheme();
29
- const {
30
- borderRadius,
31
- lockRadius: themeLockRadius
32
- } = selectedTheme?.elementProps[elementProps?.type] || {};
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
- }
40
32
  const value = getBreakPointsValue(val, size?.device);
41
33
  const handleChange = e => {
42
34
  let changeAll = {};
@@ -1,23 +1,14 @@
1
- import React, { useEffect, useMemo, useState } from "react";
1
+ import React, { useEffect, 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
- // };
11
4
  import { jsx as _jsx } from "react/jsx-runtime";
12
5
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
6
  const Color = props => {
14
7
  const {
15
- value: val,
8
+ value,
16
9
  data,
17
10
  onChange,
18
11
  classes,
19
- elementProps,
20
- handleClose,
21
12
  customProps
22
13
  } = props;
23
14
  const {
@@ -29,22 +20,7 @@ const Color = props => {
29
20
  translation
30
21
  } = customProps;
31
22
  const [recentColors, setRecentColors] = useState({});
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);
23
+ const getLable = label === 'Text' ? translation("selectTextColor") : label === 'Background' ? translation("selectBgColor") : translation(label);
48
24
  useEffect(() => {
49
25
  const storedColors = JSON.parse(localStorage.getItem("recentColors"));
50
26
  if (storedColors) {
@@ -82,11 +58,11 @@ const Color = props => {
82
58
  fontSize: "14px",
83
59
  fontWeight: 500,
84
60
  marginBottom: "5px",
85
- display: "flex",
86
- alignItems: "center",
87
- "& svg": {
88
- width: "20px",
89
- height: "20px"
61
+ display: 'flex',
62
+ alignItems: 'center',
63
+ '& svg': {
64
+ width: '20px',
65
+ height: '20px'
90
66
  }
91
67
  },
92
68
  children: [translation(label), data?.infoIcon ? /*#__PURE__*/_jsx(Tooltip, {
@@ -94,14 +70,14 @@ const Color = props => {
94
70
  title: translation("noteText"),
95
71
  children: /*#__PURE__*/_jsx("span", {
96
72
  style: {
97
- display: "inline-block"
73
+ display: 'inline-block'
98
74
  },
99
75
  children: data?.infoIcon
100
76
  })
101
77
  }) : null]
102
78
  }), /*#__PURE__*/_jsx(TextField, {
103
79
  fullWidth: true,
104
- value: inputValue,
80
+ value: value,
105
81
  placeholder: getLable || `${label} ${translation("color code")}`,
106
82
  InputLabelProps: {
107
83
  shrink: true
@@ -114,8 +90,6 @@ const Color = props => {
114
90
  value: value,
115
91
  onSave: onSave,
116
92
  recentColors: recentColors[key],
117
- handleClose: handleClose,
118
- disableEditTheme: customProps?.disableEditTheme,
119
93
  hideGradient: hideGradient
120
94
  })
121
95
  })
@@ -1,17 +1,14 @@
1
- import React, { useMemo } from "react";
1
+ import React 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";
7
5
  import { jsx as _jsx } from "react/jsx-runtime";
8
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
7
  const FontSize = props => {
10
8
  const {
11
- value: val,
9
+ value,
12
10
  data,
13
11
  onChange,
14
- elementProps,
15
12
  customProps
16
13
  } = props;
17
14
  const {
@@ -21,10 +18,6 @@ const FontSize = props => {
21
18
  key,
22
19
  width
23
20
  } = data;
24
- const editor = useSlateStatic();
25
- const value = useMemo(() => {
26
- return val || getElementStyle(editor, elementProps, "font-size");
27
- }, [editor, val]);
28
21
  const handleChange = e => {
29
22
  let inc = parseInt(e.target.value) || 16;
30
23
  inc = inc > 200 ? 200 : inc;
@@ -35,9 +28,7 @@ const FontSize = props => {
35
28
  const getSizeVal = () => {
36
29
  try {
37
30
  const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
38
- const defaultSize = 16;
39
- const val = parseInt(size || defaultSize);
40
- return isNaN(val) ? defaultSize : val;
31
+ return parseInt(size || 16);
41
32
  } catch (err) {
42
33
  return "";
43
34
  }
@@ -86,7 +77,7 @@ const FontSize = props => {
86
77
  size: "small",
87
78
  inputProps: {
88
79
  style: {
89
- // textAlign: "center",
80
+ // textAlign: "center",
90
81
  padding: "11px"
91
82
  }
92
83
  },
@@ -129,7 +129,6 @@ const MenusArray = props => {
129
129
  className: "menu-item-app-header",
130
130
  children: [/*#__PURE__*/_jsx(TextField, {
131
131
  name: "text",
132
- placeholder: m?.placeholder || "text",
133
132
  type: "text",
134
133
  value: m.text,
135
134
  onChange: handleChange(i),
@@ -141,7 +140,6 @@ const MenusArray = props => {
141
140
  }), /*#__PURE__*/_jsx(TextField, {
142
141
  name: "url",
143
142
  type: "text",
144
- placeholder: m?.placeholder || "url",
145
143
  value: m.url,
146
144
  onChange: handleChange(i),
147
145
  size: "small",
@@ -1,13 +1,13 @@
1
- import React, { useMemo } from "react";
1
+ import React from "react";
2
2
  import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
3
- import { getBreakPointsValue, getElementStyle } from "../../../helper/theme";
3
+ import { getBreakPointsValue } 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,22 +31,14 @@ const TextOptions = props => {
31
31
  renderOption,
32
32
  width,
33
33
  webFont = false,
34
- hideMetaDataOptions = false,
35
- themeEnabled
34
+ hideMetaDataOptions = false
36
35
  } = data;
37
36
  const {
38
37
  fontFamilies
39
38
  } = useEditorContext();
40
- const [size] = useWindowResize();
41
39
  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]);
40
+ const [size] = useWindowResize();
41
+ const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
50
42
  const metaDataMappingOptions = metaMappings?.boards || [];
51
43
  const updatedOption = !hideMetaDataOptions && elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
52
44
  const handleChange = (e, d) => {
@@ -125,7 +117,7 @@ const TextOptions = props => {
125
117
  editor: editor,
126
118
  format: key,
127
119
  options: fontFamilies.options,
128
- width: "100%",
120
+ width: '100%',
129
121
  onChange: onChange,
130
122
  val: value,
131
123
  webFont: true
@@ -124,25 +124,19 @@ export const formStyle = [{
124
124
  key: "alignment",
125
125
  type: "alignment"
126
126
  }]
127
- },
128
- // Commented out because the background functionality for forms has not been implemented yet
129
- // {
130
- // tab: "Background",
131
- // value: "backgroundImage",
132
- // fields: [
133
- // {
134
- // label: "URL",
135
- // key: "backgroundImage",
136
- // type: "text",
137
- // },
138
- // {
139
- // label: "Background Image",
140
- // key: "backgroundImage",
141
- // type: "backgroundImage",
142
- // },
143
- // ],
144
- // },
145
- {
127
+ }, {
128
+ tab: "Background",
129
+ value: "backgroundImage",
130
+ fields: [{
131
+ label: "URL",
132
+ key: "backgroundImage",
133
+ type: "text"
134
+ }, {
135
+ label: "Background Image",
136
+ key: "backgroundImage",
137
+ type: "backgroundImage"
138
+ }]
139
+ }, {
146
140
  tab: "Add to Boards",
147
141
  value: "metadatamapping",
148
142
  fields: [{
@@ -17,8 +17,7 @@ export const StyleContent = props => {
17
17
  element: propsElement,
18
18
  customProps,
19
19
  handleClose,
20
- customElement,
21
- title
20
+ customElement
22
21
  } = props;
23
22
  const element = customElement ? customElement : propsElement;
24
23
  const {
@@ -50,8 +49,7 @@ export const StyleContent = props => {
50
49
  customProps: customProps,
51
50
  handleClose: handleClose,
52
51
  classes: classes,
53
- translation: translation,
54
- title: title
52
+ translation: translation
55
53
  }, `ei_stt_tab_${value}_${m.key}_${i}`) : null;
56
54
  })
57
55
  }, value);
@@ -219,8 +217,7 @@ const StyleBuilder = props => {
219
217
  element: elementProps,
220
218
  onChange: onElementPropsChange,
221
219
  customProps: customProps,
222
- handleClose: handleClose,
223
- title: title
220
+ handleClose: handleClose
224
221
  }, `tab_${field.value}_${index}`);
225
222
  })
226
223
  })]
@@ -233,8 +230,7 @@ const StyleBuilder = props => {
233
230
  element: elementProps,
234
231
  onChange: onElementPropsChange,
235
232
  customProps: customProps,
236
- handleClose: handleClose,
237
- title: title
233
+ handleClose: handleClose
238
234
  }, `tab_${m.value}_$${i}`);
239
235
  }
240
236
  })
@@ -1,13 +1,9 @@
1
- import React, { useRef, useState } from "react";
2
- import Grid from '@mui/material/Grid';
3
- import Button from '@mui/material/Button';
4
- import Typography from '@mui/material/Typography';
5
- import Box from '@mui/material/Box';
6
- import CircularProgress from '@mui/material/CircularProgress';
1
+ import React, { useState } from "react";
2
+ import { Grid, Button, Typography } from "@mui/material";
7
3
  import { convertBase64 } from "../utils/helper";
4
+ import { uploadFile } from "../service/fileupload";
8
5
  import Icon from "./Icon";
9
6
  import UploadStyles from "../common/ImageSelector/UploadStyles";
10
- import { allowedFormat, allowedTypes, extensionMap } from "../Elements/Form/Workflow/constant";
11
7
  import { jsx as _jsx } from "react/jsx-runtime";
12
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
13
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,88 +12,35 @@ const Uploader = props => {
16
12
  value,
17
13
  onUploaded,
18
14
  customProps,
19
- title,
20
- setS3UploadProp,
21
- setUniqueId,
22
- uniqueId
15
+ title
23
16
  } = props;
24
17
  const classes = UploadStyles();
25
18
  const [base64, setBase64] = useState(value?.url);
26
19
  const [fileName, setFileName] = useState("");
27
- const {
28
- uploadFile,
29
- services,
30
- uploadTerminator
31
- } = customProps;
32
- const [uploadStatus, setUploadStatus] = useState({
33
- isUploading: false,
34
- uploadPercentage: 0
35
- });
36
- const [error, setError] = useState(null);
37
- const xhrRef = useRef(null);
20
+ const [uploading, setUploading] = useState(false);
38
21
  const handleChange = async e => {
39
- setError("");
40
22
  const uFile = e.target.files[0];
41
- if (!uFile) return;
42
- const maxAllowedSize = 5 * 1024 * 1024;
43
-
44
- // ✅ Check file size
45
- if (uFile.size > maxAllowedSize) {
46
- const sizeInMB = Math.round(maxAllowedSize / (1024 * 1024));
47
- setError(`File size exceeds ${sizeInMB}MB for ${uFile.name.toLowerCase()}.`);
48
- return;
49
- }
50
-
51
- // ✅ File type check with fallback to extension
52
- const validTypes = allowedTypes["Image"];
53
- const fileType = uFile.type;
54
- const fileName = uFile.name.toLowerCase();
55
- const fileExtension = fileName.split(".").pop();
56
- const isValid = title === "Embed" || validTypes.includes(fileType) || extensionMap["Image"]?.includes(fileExtension);
57
- if (!isValid) {
58
- setError(`Invalid file format. Please upload a valid ${title.toLowerCase()}.`);
59
- return;
60
- }
61
- try {
62
- const strImage = await convertBase64(uFile);
63
- setBase64(strImage);
64
- setFileName(uFile?.name);
65
- doUpload(strImage, e.target.files[0]);
66
- } catch (error) {
67
- setError("Failed to read file.");
68
- }
69
- };
70
- const onSave = url => {
71
- if (!uploadStatus?.isUploading) {
72
- setS3UploadProp({
73
- file: true
74
- });
75
- }
76
- onUploaded(url);
23
+ const strImage = await convertBase64(uFile);
24
+ setBase64(strImage);
25
+ setFileName(uFile?.name);
26
+ doUpload(strImage, e.target.files[0]);
77
27
  };
78
28
  const doUpload = async (strImage, file) => {
29
+ setUploading(true);
79
30
  const formData = new FormData();
80
31
  formData.set("file", file);
81
32
  formData.set("resource_type", "pages");
82
33
  formData.set("resource_id", customProps?.page_id);
83
- const id = crypto?.randomUUID();
84
- setUniqueId(id);
85
- const result = await services("uploadFile", file);
86
- if (result?.data?.[0]) {
87
- const fileEntry = {
88
- file: file,
89
- xhrRef,
90
- presidnedURL: result.data?.[0],
91
- status: "uploading"
92
- };
93
- uploadFile(id, fileEntry, setUploadStatus, onSave, "image");
34
+ const result = await uploadFile(formData, customProps);
35
+ setUploading(false);
36
+ if (result && result?.imageURL) {
37
+ onUploaded(result?.imageURL[0]);
94
38
  }
95
39
  };
96
40
  const {
97
41
  translation
98
42
  } = customProps;
99
43
  const onRemoveBG = () => {
100
- uploadTerminator(uniqueId, setUploadStatus);
101
44
  setBase64(null);
102
45
  onUploaded("none");
103
46
  };
@@ -139,54 +82,11 @@ const Uploader = props => {
139
82
  });
140
83
  }
141
84
  };
142
- const UploadingProgress = () => {
143
- return /*#__PURE__*/_jsx(Grid, {
144
- container: true,
145
- direction: "row",
146
- justifyContent: "space-between",
147
- alignItems: "center",
148
- children: /*#__PURE__*/_jsx(Box, {
149
- display: "flex",
150
- flexDirection: "column",
151
- alignItems: "flex-start",
152
- justifyContent: "space-between",
153
- sx: {
154
- gap: 1,
155
- mb: 1,
156
- mt: 1
157
- },
158
- children: /*#__PURE__*/_jsxs(Box, {
159
- display: "flex",
160
- alignItems: "center",
161
- gap: 1,
162
- children: [/*#__PURE__*/_jsx(Typography, {
163
- variant: "body",
164
- children: `Uploading ${uploadStatus?.fileSize}`
165
- }), /*#__PURE__*/_jsx(CircularProgress, {
166
- variant: "determinate",
167
- value: uploadStatus?.uploadPercentage ?? 0,
168
- className: "circularProgress-cls",
169
- size: 15,
170
- thickness: 8
171
- }), /*#__PURE__*/_jsx(Typography, {
172
- variant: "body",
173
- children: `${uploadStatus?.uploadPercentage?.toFixed(0) ?? 0}%`
174
- })]
175
- })
176
- })
177
- });
178
- };
179
85
  return /*#__PURE__*/_jsxs(_Fragment, {
180
- children: [/*#__PURE__*/_jsxs(Grid, {
86
+ children: [/*#__PURE__*/_jsx(Grid, {
181
87
  item: true,
182
88
  xs: 12,
183
- children: [!error && uploadStatus?.isUploading ? /*#__PURE__*/_jsx(UploadingProgress, {}) : "", error && /*#__PURE__*/_jsx(Typography, {
184
- style: {
185
- color: "red",
186
- marginBottom: "8px"
187
- },
188
- children: error
189
- })]
89
+ children: uploading ? translation("uploadingText") : ""
190
90
  }), /*#__PURE__*/_jsx(Grid, {
191
91
  container: true,
192
92
  sx: classes.uploadContainer,
@@ -198,7 +98,7 @@ const Uploader = props => {
198
98
  ...getBackground()
199
99
  },
200
100
  sx: classes.uploadField,
201
- children: !uploadStatus?.isUploading ? /*#__PURE__*/_jsx(Grid, {
101
+ children: !uploading ? /*#__PURE__*/_jsx(Grid, {
202
102
  className: "uploadImageSection",
203
103
  children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
204
104
  className: "uploadImageText",
@@ -212,7 +112,6 @@ const Uploader = props => {
212
112
  sx: classes.uploadIcon,
213
113
  children: [/*#__PURE__*/_jsx("input", {
214
114
  type: "file",
215
- accept: allowedFormat["Image"],
216
115
  style: {
217
116
  opacity: 0,
218
117
  width: "0px"
@@ -1677,27 +1677,6 @@ export const CloseIcon = props => /*#__PURE__*/_jsxs("svg", {
1677
1677
  strokeLinejoin: "round"
1678
1678
  })]
1679
1679
  });
1680
- export const CloseIcon2 = props => /*#__PURE__*/_jsxs("svg", {
1681
- width: "10",
1682
- height: "10",
1683
- viewBox: "0 0 10 10",
1684
- fill: "none",
1685
- xmlns: "http://www.w3.org/2000/svg",
1686
- ...(props || {}),
1687
- children: [/*#__PURE__*/_jsx("path", {
1688
- d: "M9.12476 0.875L0.875176 9.12458",
1689
- stroke: "#8F9CAE",
1690
- strokeWidth: "1.5",
1691
- strokeLinecap: "round",
1692
- strokeLinejoin: "round"
1693
- }), /*#__PURE__*/_jsx("path", {
1694
- d: "M0.875183 0.875L9.12476 9.12458",
1695
- stroke: "#8F9CAE",
1696
- strokeWidth: "1.5",
1697
- strokeLinecap: "round",
1698
- strokeLinejoin: "round"
1699
- })]
1700
- });
1701
1680
  export const SearchIcon = () => /*#__PURE__*/_jsxs("svg", {
1702
1681
  width: "18",
1703
1682
  height: "18",
@@ -211,16 +211,16 @@ const useCommonStyle = theme => ({
211
211
  backgroundColor: theme?.palette?.editor?.miniToolBarBackground
212
212
  },
213
213
  "& .popup_tabs": {
214
- backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
214
+ backgroundColor: theme?.palette?.editor?.background,
215
215
  "@media only screen and (max-width: 899px)": {
216
216
  width: "100% !important"
217
217
  }
218
218
  },
219
219
  "& .popup_tabs-header": {
220
- backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
220
+ backgroundColor: theme?.palette?.editor?.background,
221
221
  "& .popup_tabs-header-label-active": {
222
222
  color: theme?.palette?.editor?.activeColor,
223
- backgroundColor: theme?.palette?.editor?.miniToolBarBackground
223
+ backgroundColor: theme?.palette?.editor?.background
224
224
  }
225
225
  },
226
226
  "& .colorpicker": {
@@ -249,40 +249,6 @@ const useCommonStyle = theme => ({
249
249
  backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
250
250
  color: theme?.palette?.editor?.textColor
251
251
  }
252
- },
253
- "& .colorPickerActionBtns": {
254
- backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
255
- display: "flex",
256
- justifyContent: "end",
257
- padding: "10px",
258
- position: "sticky",
259
- bottom: 0,
260
- right: 0,
261
- boxShadow: `0px -3px 12px 0px ${theme?.palette?.editor?.cardShadow}`,
262
- gap: "8px",
263
- "& button": {
264
- fontWeight: 600,
265
- fontSize: "14px",
266
- opacity: 1,
267
- borderRadius: "8px",
268
- textTransform: "math-auto",
269
- padding: "4px 20px",
270
- height: "fit-content",
271
- minWidth: "90px",
272
- "@media only screen and (max-width: 899px)": {
273
- width: "50%"
274
- },
275
- "&.confirmBtn": {
276
- backgroundColor: "#2563EB",
277
- color: "#ffffff",
278
- border: `1px solid #2563EB`
279
- },
280
- "&.cancelBtn": {
281
- backgroundColor: theme?.palette?.editor?.closeButtonBackground,
282
- color: theme?.palette?.editor?.customDialogueCloseBtnColor,
283
- border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`
284
- }
285
- }
286
252
  }
287
253
  },
288
254
  colorPickerBtnBorder: {
@@ -7,7 +7,7 @@ import { Node } from "slate";
7
7
  const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
8
8
  const TEXT_NODES = ["paragraph", "headingOne", "headingTwo", "headingThree"];
9
9
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
10
- export const RND_ITEMS = ["freegridItem", "freegridBox"];
10
+ const RND_ITEMS = ["freegridItem", "freegridBox"];
11
11
  export const getThumbnailImage = async (dom, options = {}) => {
12
12
  try {
13
13
  const canvas = await html2canvas(dom, {
@@ -99,9 +99,6 @@ function padZero(str, len) {
99
99
  return (zeros + str).slice(-len);
100
100
  }
101
101
  export function getEmbedURL(element, needType = false) {
102
- if (typeof element?.href !== "string" && typeof element?.url !== "string") {
103
- return null;
104
- }
105
102
  let refUrl = element.href ? element.href : element.url;
106
103
  refUrl = refUrl ? refUrl.includes("http") ? refUrl : `//${refUrl}` : "Link";
107
104
  let embedUrl = refUrl;