@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.
- package/dist/Editor/ChatEditor.js +6 -6
- package/dist/Editor/CommonEditor.js +21 -82
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +4 -37
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Attachments/Attachments.js +11 -153
- package/dist/Editor/Elements/Attachments/AttachmentsButton.js +3 -8
- package/dist/Editor/Elements/Button/EditorButton.js +7 -22
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
- package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +55 -134
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +8 -7
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +3 -8
- package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +1 -1
- package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +1 -1
- package/dist/Editor/Elements/Embed/Embed.css +0 -5
- package/dist/Editor/Elements/Embed/Embed.js +43 -37
- package/dist/Editor/Elements/Embed/Image.js +22 -242
- package/dist/Editor/Elements/Embed/Video.js +32 -277
- package/dist/Editor/Elements/Form/Form.js +35 -10
- package/dist/Editor/Elements/Form/FormField.js +1 -1
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/Form/Workflow/constant.js +1 -25
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +75 -34
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +5 -9
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -3
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -15
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -2
- package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +3 -2
- package/dist/Editor/Elements/Signature/SignaturePopup.js +13 -2
- package/dist/Editor/Elements/SimpleText/index.js +1 -4
- package/dist/Editor/Elements/Table/Table.js +1 -2
- package/dist/Editor/Elements/Table/TableCell.js +3 -10
- package/dist/Editor/Elements/Title/title.js +5 -4
- package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -4
- package/dist/Editor/Elements/TopBanner/TopBannerButton.js +3 -5
- package/dist/Editor/Styles/EditorStyles.js +5 -16
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -33
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +1 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +23 -25
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +5 -15
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +7 -65
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +12 -66
- package/dist/Editor/Toolbar/PopupTool/index.js +4 -6
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +19 -38
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +0 -1
- package/dist/Editor/common/Icon.js +0 -28
- package/dist/Editor/common/ImageSelector/ImageSelector.js +7 -45
- package/dist/Editor/common/ImageSelector/Options/Upload.js +11 -26
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +7 -20
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +7 -20
- package/dist/Editor/common/RnD/GuideLines/styles.js +1 -1
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +11 -28
- package/dist/Editor/common/RnD/Utils/index.js +1 -3
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +63 -52
- package/dist/Editor/common/RnD/VirtualElement/helper.js +68 -248
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -22
- package/dist/Editor/common/RnD/index.js +14 -61
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +0 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/StyleBuilder/formStyle.js +13 -19
- package/dist/Editor/common/StyleBuilder/index.js +4 -8
- package/dist/Editor/common/Uploader.js +17 -118
- package/dist/Editor/common/iconslist.js +0 -21
- package/dist/Editor/commonStyle.js +3 -37
- package/dist/Editor/helper/index.js +1 -4
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +3 -12
- package/dist/Editor/hooks/useTable.js +1 -62
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -56
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/service/fileupload.js +0 -70
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +38 -162
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +3 -76
- package/dist/Editor/utils/insertAppHeader.js +4 -8
- package/package.json +1 -1
- package/dist/Editor/Elements/Attachments/AttachmentStyles.js +0 -16
- package/dist/Editor/Elements/FreeGrid/helper.js +0 -194
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
- package/dist/Editor/assets/svg/BackIcon.js +0 -18
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
- package/dist/Editor/common/CustomColorPicker/index.js +0 -130
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog2/index.js +0 -94
- package/dist/Editor/common/CustomDialog2/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -43
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/UploaderWithProgress.js +0 -183
- package/dist/Editor/hooks/useEditorTheme.js +0 -153
- package/dist/Editor/hooks/useThemeValues.js +0 -63
- package/dist/Editor/theme/index.js +0 -149
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
- package/dist/Editor/themeSettings/buttons/index.js +0 -300
- package/dist/Editor/themeSettings/buttons/style.js +0 -23
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
- package/dist/Editor/themeSettings/fonts/index.js +0 -240
- package/dist/Editor/themeSettings/fonts/style.js +0 -62
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -380
- package/dist/Editor/themeSettings/style.js +0 -299
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -355
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
- 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
|
-
|
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,
|
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
|
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:
|
86
|
-
alignItems:
|
87
|
-
|
88
|
-
width:
|
89
|
-
height:
|
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:
|
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:
|
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
|
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
|
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
|
-
|
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
|
1
|
+
import React from "react";
|
2
2
|
import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
|
3
|
-
import { getBreakPointsValue
|
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
|
43
|
-
|
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:
|
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
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
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, {
|
2
|
-
import Grid from
|
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
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
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
|
84
|
-
|
85
|
-
|
86
|
-
|
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__*/
|
86
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
181
87
|
item: true,
|
182
88
|
xs: 12,
|
183
|
-
children:
|
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: !
|
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?.
|
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?.
|
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?.
|
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
|
-
|
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;
|