@flozy/editor 10.0.8 → 10.0.9
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 +17 -16
- package/dist/Editor/CommonEditor.js +120 -20
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +16 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +25 -9
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -1
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +179 -168
- package/dist/Editor/Elements/Form/FormField.js +10 -4
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +6 -24
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/styles.js +64 -7
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +4 -1
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/ColorPickerButton.js +38 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
- package/dist/Editor/common/LinkSettings/index.js +84 -68
- package/dist/Editor/common/LinkSettings/style.js +245 -30
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +1 -2
- package/dist/Editor/common/RnD/index.js +5 -6
- package/dist/Editor/common/Select/index.js +2 -0
- package/dist/Editor/common/Shorthands/elements.js +54 -0
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/Uploader.js +8 -0
- package/dist/Editor/common/iconListV2.js +101 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +174 -61
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
- package/dist/Editor/themeSettings/buttons/index.js +290 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +309 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +361 -0
- package/dist/Editor/themeSettings/style.js +292 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +324 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +166 -43
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/helper.js +90 -19
- package/package.json +4 -4
@@ -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
|
-
|
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:
|
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:
|
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:
|
62
|
-
display:
|
63
|
-
justifyContent:
|
64
|
-
alignItems:
|
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
|
-
|
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
|
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:
|
62
|
-
alignItems:
|
63
|
-
|
64
|
-
width:
|
65
|
-
height:
|
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:
|
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:
|
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
|
-
|
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.
|
57
|
-
max: 3.
|
58
|
-
step: 0.
|
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
|
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(
|
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
|
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:
|
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
|
-
|
31
|
-
|
32
|
-
|
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",
|
@@ -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",
|
@@ -1236,27 +1236,37 @@ export function ToggleFullScreenIcon() {
|
|
1236
1236
|
}
|
1237
1237
|
export function CodeElementIcon() {
|
1238
1238
|
return /*#__PURE__*/_jsxs("svg", {
|
1239
|
-
width: "
|
1240
|
-
height: "
|
1241
|
-
viewBox: "0 0
|
1239
|
+
width: "24",
|
1240
|
+
height: "24",
|
1241
|
+
viewBox: "0 0 24 24",
|
1242
1242
|
fill: "none",
|
1243
1243
|
xmlns: "http://www.w3.org/2000/svg",
|
1244
1244
|
className: "commonSvgStyle",
|
1245
1245
|
children: [/*#__PURE__*/_jsx("path", {
|
1246
|
-
d: "
|
1246
|
+
d: "M8 10L6 12L8 14",
|
1247
1247
|
stroke: "#64748B",
|
1248
|
+
strokeWidth: "1.5",
|
1248
1249
|
strokeMiterlimit: "10",
|
1249
1250
|
strokeLinecap: "round",
|
1250
1251
|
strokeLinejoin: "round"
|
1251
1252
|
}), /*#__PURE__*/_jsx("path", {
|
1252
|
-
d: "
|
1253
|
+
d: "M16 10L18 12L16 14",
|
1253
1254
|
stroke: "#64748B",
|
1255
|
+
strokeWidth: "1.5",
|
1256
|
+
strokeMiterlimit: "10",
|
1257
|
+
strokeLinecap: "round",
|
1258
|
+
strokeLinejoin: "round"
|
1259
|
+
}), /*#__PURE__*/_jsx("path", {
|
1260
|
+
d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
|
1261
|
+
stroke: "#64748B",
|
1262
|
+
strokeWidth: "1.5",
|
1254
1263
|
strokeMiterlimit: "10",
|
1255
1264
|
strokeLinecap: "round",
|
1256
1265
|
strokeLinejoin: "round"
|
1257
1266
|
}), /*#__PURE__*/_jsx("path", {
|
1258
|
-
d: "
|
1267
|
+
d: "M13 9.66992L11 14.33",
|
1259
1268
|
stroke: "#64748B",
|
1269
|
+
strokeWidth: "1.5",
|
1260
1270
|
strokeMiterlimit: "10",
|
1261
1271
|
strokeLinecap: "round",
|
1262
1272
|
strokeLinejoin: "round"
|
@@ -1431,4 +1441,89 @@ export function SectionDragIcon() {
|
|
1431
1441
|
fill: "#94A3B8"
|
1432
1442
|
})]
|
1433
1443
|
});
|
1444
|
+
}
|
1445
|
+
export function PenIcon() {
|
1446
|
+
return /*#__PURE__*/_jsxs("svg", {
|
1447
|
+
width: "17",
|
1448
|
+
height: "17",
|
1449
|
+
viewBox: "0 0 17 17",
|
1450
|
+
fill: "none",
|
1451
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1452
|
+
className: "commonSvgStyle",
|
1453
|
+
children: [/*#__PURE__*/_jsx("path", {
|
1454
|
+
d: "M9.74898 3.14435L3.93357 9.29977C3.71398 9.53352 3.50148 9.99393 3.45898 10.3127L3.1969 12.6077C3.10482 13.4364 3.69982 14.0031 4.52148 13.8614L6.80232 13.4719C7.12107 13.4152 7.56732 13.1814 7.7869 12.9406L13.6023 6.78518C14.6081 5.72268 15.0615 4.51143 13.4961 3.03102C11.9377 1.56477 10.7548 2.08185 9.74898 3.14435Z",
|
1455
|
+
stroke: "#64748B",
|
1456
|
+
strokeWidth: "1.2",
|
1457
|
+
strokeMiterlimit: "10",
|
1458
|
+
strokeLinecap: "round",
|
1459
|
+
strokeLinejoin: "round"
|
1460
|
+
}), /*#__PURE__*/_jsx("path", {
|
1461
|
+
d: "M8.77734 4.17188C9.08193 6.12688 10.6686 7.62146 12.6378 7.81979",
|
1462
|
+
stroke: "#64748B",
|
1463
|
+
strokeWidth: "1.2",
|
1464
|
+
strokeMiterlimit: "10",
|
1465
|
+
strokeLinecap: "round",
|
1466
|
+
strokeLinejoin: "round"
|
1467
|
+
})]
|
1468
|
+
});
|
1469
|
+
}
|
1470
|
+
export function SaveTemplIcon() {
|
1471
|
+
return /*#__PURE__*/_jsxs("svg", {
|
1472
|
+
width: "18",
|
1473
|
+
height: "18",
|
1474
|
+
viewBox: "0 0 18 18",
|
1475
|
+
fill: "none",
|
1476
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1477
|
+
className: "commonSvgStyle",
|
1478
|
+
children: [/*#__PURE__*/_jsx("path", {
|
1479
|
+
d: "M9 1.5V6.75L10.5 5.25",
|
1480
|
+
stroke: "#64748B",
|
1481
|
+
strokeWidth: "1.2",
|
1482
|
+
strokeLinecap: "round",
|
1483
|
+
strokeLinejoin: "round"
|
1484
|
+
}), /*#__PURE__*/_jsx("path", {
|
1485
|
+
d: "M9 6.75L7.5 5.25",
|
1486
|
+
stroke: "#64748B",
|
1487
|
+
strokeWidth: "1.2",
|
1488
|
+
strokeLinecap: "round",
|
1489
|
+
strokeLinejoin: "round"
|
1490
|
+
}), /*#__PURE__*/_jsx("path", {
|
1491
|
+
d: "M1.48438 9.75H4.79187C5.07687 9.75 5.33188 9.9075 5.45938 10.1625L6.33687 11.9175C6.59187 12.4275 7.10938 12.75 7.67938 12.75H10.3269C10.8969 12.75 11.4144 12.4275 11.6694 11.9175L12.5469 10.1625C12.6744 9.9075 12.9369 9.75 13.2144 9.75H16.4844",
|
1492
|
+
stroke: "#64748B",
|
1493
|
+
strokeWidth: "1.2",
|
1494
|
+
strokeLinecap: "round",
|
1495
|
+
strokeLinejoin: "round"
|
1496
|
+
}), /*#__PURE__*/_jsx("path", {
|
1497
|
+
d: "M5.25 3.09766C2.595 3.48766 1.5 5.04766 1.5 8.25016V11.2502C1.5 15.0002 3 16.5002 6.75 16.5002H11.25C15 16.5002 16.5 15.0002 16.5 11.2502V8.25016C16.5 5.04766 15.405 3.48766 12.75 3.09766",
|
1498
|
+
stroke: "#64748B",
|
1499
|
+
strokeWidth: "1.2",
|
1500
|
+
strokeLinecap: "round",
|
1501
|
+
strokeLinejoin: "round"
|
1502
|
+
})]
|
1503
|
+
});
|
1504
|
+
}
|
1505
|
+
export function UploadIconCloud() {
|
1506
|
+
return /*#__PURE__*/_jsxs("svg", {
|
1507
|
+
width: "16",
|
1508
|
+
height: "16",
|
1509
|
+
viewBox: "0 0 16 16",
|
1510
|
+
fill: "none",
|
1511
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1512
|
+
className: "commonSvgStyle uploadIcon",
|
1513
|
+
children: [/*#__PURE__*/_jsx("path", {
|
1514
|
+
d: "M6.00065 14.6673H4.66732C2.00065 14.6673 1.33398 14.0007 1.33398 11.334V4.66732C1.33398 2.00065 2.00065 1.33398 4.66732 1.33398H5.66732C6.66732 1.33398 6.88733 1.62733 7.26733 2.13399L8.26733 3.46733C8.52067 3.80066 8.66732 4.00065 9.33398 4.00065H11.334C14.0007 4.00065 14.6673 4.66732 14.6673 7.33398V8.66732",
|
1515
|
+
stroke: "#64748B",
|
1516
|
+
strokeWidth: "1.2",
|
1517
|
+
strokeMiterlimit: "10",
|
1518
|
+
strokeLinecap: "round",
|
1519
|
+
strokeLinejoin: "round"
|
1520
|
+
}), /*#__PURE__*/_jsx("path", {
|
1521
|
+
d: "M9.17305 12.2136C7.60638 12.3269 7.60638 14.5936 9.17305 14.7069H12.8797C13.3264 14.7069 13.7664 14.5402 14.093 14.2402C15.193 13.2802 14.6064 11.3602 13.1597 11.1802C12.6397 8.05358 8.11973 9.24024 9.18639 12.2202",
|
1522
|
+
stroke: "#64748B",
|
1523
|
+
strokeWidth: "1.2",
|
1524
|
+
strokeMiterlimit: "10",
|
1525
|
+
strokeLinecap: "round",
|
1526
|
+
strokeLinejoin: "round"
|
1527
|
+
})]
|
1528
|
+
});
|
1434
1529
|
}
|