@flozy/editor 10.3.0 → 10.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +16 -17
- package/dist/Editor/CommonEditor.js +14 -128
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +8 -46
- package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
- package/dist/Editor/Elements/Accordion/Accordion.js +7 -30
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
- package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
- package/dist/Editor/Elements/Button/EditorButton.js +9 -27
- package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
- 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/ColumnView.js +2 -4
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +28 -30
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +7 -9
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Form/Form.js +3 -1
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
- package/dist/Editor/Elements/Form/FormField.js +2 -3
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +30 -31
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
- package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
- package/dist/Editor/Elements/Grid/Grid.js +2 -14
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/Signature/Signature.css +1 -2
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +1 -0
- package/dist/Editor/Elements/Table/Draggable.js +2 -6
- package/dist/Editor/Elements/Table/Styles.js +0 -7
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +5 -24
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
- package/dist/Editor/MiniEditor.js +1 -2
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- 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 +13 -10
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +16 -41
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
- package/dist/Editor/common/Icon.js +0 -28
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +65 -45
- package/dist/Editor/common/LinkSettings/index.js +26 -13
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +244 -164
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
- 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 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
- package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
- package/dist/Editor/common/RnD/Utils/index.js +1 -3
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
- package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -321
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
- package/dist/Editor/common/RnD/index.js +12 -26
- package/dist/Editor/common/Select/index.js +7 -44
- package/dist/Editor/common/Select/styles.js +2 -30
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
- 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/card.js +8 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
- package/dist/Editor/common/Uploader.js +0 -16
- package/dist/Editor/common/iconListV2.js +0 -76
- package/dist/Editor/common/iconslist.js +0 -21
- package/dist/Editor/commonStyle.js +61 -116
- package/dist/Editor/helper/index.js +0 -4
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +3 -9
- package/dist/Editor/hooks/useTable.js +4 -5
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -3
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +36 -158
- package/dist/Editor/utils/accordion.js +4 -14
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
- package/dist/Editor/utils/draftToSlate.js +2 -3
- package/dist/Editor/utils/events.js +6 -50
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +26 -134
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +9 -2
- package/package.json +4 -4
- package/dist/Editor/Elements/FreeGrid/helper.js +0 -113
- 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/Checkbox/index.js +0 -46
- package/dist/Editor/common/Checkbox/styles.js +0 -45
- 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/RadioGroup/index.js +0 -48
- package/dist/Editor/common/RadioGroup/styles.js +0 -29
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
- package/dist/Editor/helper/textIndeces.js +0 -58
- 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
@@ -1,59 +1,22 @@
|
|
1
|
-
import { Select as Core
|
1
|
+
import { Select as Core } from "@mui/material";
|
2
2
|
import SelectStyles from "./styles";
|
3
3
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
4
|
-
import KeyboardArrowDownRoundedIcon from
|
4
|
+
import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
7
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
6
|
function Select(props) {
|
9
7
|
const {
|
10
8
|
children,
|
11
|
-
value,
|
12
|
-
onChange,
|
13
|
-
options,
|
14
|
-
label,
|
15
|
-
labelProps,
|
16
|
-
showDefault,
|
17
|
-
translation,
|
18
9
|
...rest
|
19
10
|
} = props;
|
20
11
|
const {
|
21
12
|
theme
|
22
13
|
} = useEditorContext();
|
23
14
|
const classes = SelectStyles(theme);
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
children: [label ? /*#__PURE__*/_jsx(Typography, {
|
30
|
-
variant: "body2",
|
31
|
-
sx: {
|
32
|
-
paddingBottom: "4px"
|
33
|
-
},
|
34
|
-
...(labelProps || {}),
|
35
|
-
children: label
|
36
|
-
}) : null, /*#__PURE__*/_jsx(Core, {
|
37
|
-
size: "small",
|
38
|
-
fullWidth: true,
|
39
|
-
defaultValue: "",
|
40
|
-
value: value || "",
|
41
|
-
onChange: onChange,
|
42
|
-
sx: classes.select,
|
43
|
-
MenuProps: classes.MenuProps,
|
44
|
-
IconComponent: KeyboardArrowDownRoundedIcon,
|
45
|
-
displayEmpty: true,
|
46
|
-
...rest,
|
47
|
-
children: menuOptions?.map((option, i) => {
|
48
|
-
return /*#__PURE__*/_jsx(MenuItem, {
|
49
|
-
value: option.value,
|
50
|
-
children: /*#__PURE__*/_jsx(Typography, {
|
51
|
-
variant: "body2",
|
52
|
-
children: translation(option.label)
|
53
|
-
})
|
54
|
-
}, i);
|
55
|
-
})
|
56
|
-
})]
|
15
|
+
return /*#__PURE__*/_jsx(Core, {
|
16
|
+
MenuProps: classes.MenuProps,
|
17
|
+
IconComponent: KeyboardArrowDownRoundedIcon,
|
18
|
+
...rest,
|
19
|
+
children: children
|
57
20
|
});
|
58
21
|
}
|
59
22
|
export default Select;
|
@@ -1,44 +1,16 @@
|
|
1
1
|
const SelectStyles = (theme = {}) => {
|
2
2
|
const {
|
3
3
|
textColor,
|
4
|
-
|
5
|
-
menuOptionSelectedOption
|
4
|
+
background
|
6
5
|
} = theme?.palette?.editor || {};
|
7
6
|
return {
|
8
7
|
MenuProps: {
|
9
|
-
sx: {
|
10
|
-
zIndex: "1302 !important"
|
11
|
-
},
|
12
8
|
PaperProps: {
|
13
9
|
sx: {
|
14
|
-
background: textWeightPopUpBackground,
|
15
10
|
color: textColor,
|
16
|
-
|
17
|
-
marginTop: "2px",
|
18
|
-
"& li": {
|
19
|
-
padding: "6px 16px",
|
20
|
-
margin: "5px !important",
|
21
|
-
borderRadius: "4px !important"
|
22
|
-
},
|
23
|
-
"& .MuiList-root": {
|
24
|
-
padding: "0px"
|
25
|
-
},
|
26
|
-
"& .MuiTypography-root": {
|
27
|
-
fontSize: "12px !important",
|
28
|
-
fontWeight: 500,
|
29
|
-
fontFamily: "'Inter',sans-serif"
|
30
|
-
},
|
31
|
-
"& .Mui-selected": {
|
32
|
-
background: menuOptionSelectedOption,
|
33
|
-
color: textColor
|
34
|
-
}
|
11
|
+
background
|
35
12
|
}
|
36
13
|
}
|
37
|
-
},
|
38
|
-
select: {
|
39
|
-
"& .MuiSelect-icon": {
|
40
|
-
color: "#64748B !important"
|
41
|
-
}
|
42
14
|
}
|
43
15
|
};
|
44
16
|
};
|
@@ -55,60 +55,6 @@ const ELEMENTS_LIST = [{
|
|
55
55
|
icon: "headingThree"
|
56
56
|
}),
|
57
57
|
onInsert: editor => toggleBlock(editor, "headingThree", false)
|
58
|
-
}, {
|
59
|
-
name: "Heading 4",
|
60
|
-
desc: "",
|
61
|
-
group: "Text",
|
62
|
-
type: "headingFour",
|
63
|
-
icon: /*#__PURE__*/_jsx(Icon, {
|
64
|
-
icon: "headingFour"
|
65
|
-
}),
|
66
|
-
onInsert: editor => toggleBlock(editor, "headingFour", false)
|
67
|
-
}, {
|
68
|
-
name: "Heading 5",
|
69
|
-
desc: "",
|
70
|
-
group: "Text",
|
71
|
-
type: "headingFive",
|
72
|
-
icon: /*#__PURE__*/_jsx(Icon, {
|
73
|
-
icon: "headingFive"
|
74
|
-
}),
|
75
|
-
onInsert: editor => toggleBlock(editor, "headingFive", false)
|
76
|
-
}, {
|
77
|
-
name: "Heading 6",
|
78
|
-
desc: "",
|
79
|
-
group: "Text",
|
80
|
-
type: "headingSix",
|
81
|
-
icon: /*#__PURE__*/_jsx(Icon, {
|
82
|
-
icon: "headingSix"
|
83
|
-
}),
|
84
|
-
onInsert: editor => toggleBlock(editor, "headingSix", false)
|
85
|
-
}, {
|
86
|
-
name: "Paragraph 1",
|
87
|
-
desc: "",
|
88
|
-
group: "Text",
|
89
|
-
type: "paragraphOne",
|
90
|
-
icon: /*#__PURE__*/_jsx(Icon, {
|
91
|
-
icon: "paragraphOne"
|
92
|
-
}),
|
93
|
-
onInsert: editor => toggleBlock(editor, "paragraphOne", false)
|
94
|
-
}, {
|
95
|
-
name: "Paragraph 2",
|
96
|
-
desc: "",
|
97
|
-
group: "Text",
|
98
|
-
type: "paragraphTwo",
|
99
|
-
icon: /*#__PURE__*/_jsx(Icon, {
|
100
|
-
icon: "paragraphTwo"
|
101
|
-
}),
|
102
|
-
onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
|
103
|
-
}, {
|
104
|
-
name: "Paragraph 3",
|
105
|
-
desc: "",
|
106
|
-
group: "Text",
|
107
|
-
type: "paragraphThree",
|
108
|
-
icon: /*#__PURE__*/_jsx(Icon, {
|
109
|
-
icon: "paragraphThree"
|
110
|
-
}),
|
111
|
-
onInsert: editor => toggleBlock(editor, "paragraphThree", false)
|
112
58
|
}, {
|
113
59
|
name: "Quote",
|
114
60
|
desc: "",
|
@@ -8,11 +8,11 @@ const accordionTitleBtnStyle = [{
|
|
8
8
|
needPreview: true,
|
9
9
|
hideGradient: true
|
10
10
|
}, {
|
11
|
-
label: "Background Color",
|
11
|
+
label: "Accordion Background Color",
|
12
12
|
key: "accordionBgColor",
|
13
13
|
type: "color"
|
14
14
|
}, {
|
15
|
-
label: "Border Color",
|
15
|
+
label: "Accordion Border Color",
|
16
16
|
key: "accordionBorderColor",
|
17
17
|
type: "color"
|
18
18
|
}]
|
@@ -6,18 +6,15 @@ const accordionTitleStyle = [{
|
|
6
6
|
key: "textColor",
|
7
7
|
type: "color",
|
8
8
|
needPreview: true
|
9
|
-
}
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
// type: "color",
|
19
|
-
// },
|
20
|
-
]
|
9
|
+
}, {
|
10
|
+
label: "Background Color",
|
11
|
+
key: "bgColor",
|
12
|
+
type: "color"
|
13
|
+
}, {
|
14
|
+
label: "Border Color",
|
15
|
+
key: "borderColor",
|
16
|
+
type: "color"
|
17
|
+
}]
|
21
18
|
}, {
|
22
19
|
tab: "Banner Spacing",
|
23
20
|
value: "bannerSpacing",
|
@@ -21,8 +21,7 @@ const buttonStyle = [{
|
|
21
21
|
},
|
22
22
|
children: option.text
|
23
23
|
});
|
24
|
-
}
|
25
|
-
themeEnabled: true
|
24
|
+
}
|
26
25
|
}, {
|
27
26
|
label: "Font Size",
|
28
27
|
key: "textSize",
|
@@ -46,8 +45,7 @@ const buttonStyle = [{
|
|
46
45
|
}, {
|
47
46
|
label: "Button Color",
|
48
47
|
key: "bgColor",
|
49
|
-
type: "color"
|
50
|
-
themeEnabled: true
|
48
|
+
type: "color"
|
51
49
|
}, {
|
52
50
|
label: "Border Color",
|
53
51
|
key: "borderColor",
|
@@ -76,11 +76,6 @@ 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
|
-
},
|
84
79
|
children: /*#__PURE__*/_jsxs(Button, {
|
85
80
|
component: "label",
|
86
81
|
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";
|
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?.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;
|
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?.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
|
-
}
|
40
32
|
const value = getBreakPointsValue(val, size?.device);
|
41
33
|
const handleChange = e => {
|
42
34
|
let changeAll = {};
|
@@ -1,7 +1,6 @@
|
|
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";
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
5
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
7
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -16,17 +15,14 @@ const RenderCard = ({
|
|
16
15
|
}) => {
|
17
16
|
return /*#__PURE__*/_jsx(Card, {
|
18
17
|
sx: {
|
19
|
-
position:
|
20
|
-
padding: "10px"
|
21
|
-
"& .MuiCheckbox-root svg": {
|
22
|
-
fill: "unset !important"
|
23
|
-
}
|
18
|
+
position: 'relative',
|
19
|
+
padding: "10px"
|
24
20
|
},
|
25
21
|
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
26
22
|
control: /*#__PURE__*/_jsx(Checkbox, {
|
27
23
|
sx: {
|
28
24
|
padding: 0,
|
29
|
-
marginTop:
|
25
|
+
marginTop: '3px'
|
30
26
|
},
|
31
27
|
onChange: handleChange,
|
32
28
|
checked: value,
|
@@ -62,10 +58,10 @@ const RenderCard = ({
|
|
62
58
|
})
|
63
59
|
}),
|
64
60
|
sx: {
|
65
|
-
width:
|
66
|
-
display:
|
67
|
-
justifyContent:
|
68
|
-
alignItems:
|
61
|
+
width: '100%',
|
62
|
+
display: 'flex',
|
63
|
+
justifyContent: 'space-between',
|
64
|
+
alignItems: 'flex-start',
|
69
65
|
margin: 0
|
70
66
|
},
|
71
67
|
labelPlacement: "start"
|
@@ -87,9 +83,6 @@ const CardsMapping = props => {
|
|
87
83
|
selectedCard,
|
88
84
|
infoIcon
|
89
85
|
} = data;
|
90
|
-
const {
|
91
|
-
theme
|
92
|
-
} = useEditorContext();
|
93
86
|
const {
|
94
87
|
translation
|
95
88
|
} = customProps;
|
@@ -111,8 +104,7 @@ const CardsMapping = props => {
|
|
111
104
|
sx: {
|
112
105
|
marginBottom: "12px",
|
113
106
|
"& .MuiPaper-root": {
|
114
|
-
|
115
|
-
border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
107
|
+
border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
|
116
108
|
borderRadius: "8px",
|
117
109
|
boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
|
118
110
|
}
|
@@ -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,30 +1,23 @@
|
|
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;
|
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;
|
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
|
},
|
@@ -19,7 +19,6 @@ import SelectSwitch from "./selectSwitch";
|
|
19
19
|
import CardsMapping from "./card";
|
20
20
|
import MetaDataMapping from "./metaDataMapping";
|
21
21
|
import LineSpacing from "./lineSpacing";
|
22
|
-
import EmbedUpload from "./embedUpload";
|
23
22
|
const FieldMap = {
|
24
23
|
text: Text,
|
25
24
|
bannerSpacing: BannerSpacing,
|
@@ -41,7 +40,6 @@ const FieldMap = {
|
|
41
40
|
selectSwitch: SelectSwitch,
|
42
41
|
card: CardsMapping,
|
43
42
|
metadatamapping: MetaDataMapping,
|
44
|
-
lineSpacing: LineSpacing
|
45
|
-
embedUpload: EmbedUpload
|
43
|
+
lineSpacing: LineSpacing
|
46
44
|
};
|
47
45
|
export default FieldMap;
|
@@ -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
|
@@ -6,22 +6,20 @@ const Styles = theme => ({
|
|
6
6
|
"& .MuiDrawer-paper": {
|
7
7
|
borderTopLeftRadius: 8,
|
8
8
|
borderTopRightRadius: 8,
|
9
|
-
backgroundColor: theme?.palette?.editor?.miniToolBarBackground
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
// },
|
9
|
+
backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
|
10
|
+
"& .MuiInputBase-root": {
|
11
|
+
border: `1px solid ${theme?.palette?.editor?.textColor}`,
|
12
|
+
color: theme?.palette?.editor?.textColor
|
13
|
+
},
|
14
|
+
"& .MuiSvgIcon-root": {
|
15
|
+
color: theme?.palette?.editor?.textColor
|
16
|
+
},
|
17
|
+
"& .MuiFormLabel-root": {
|
18
|
+
color: theme?.palette?.editor?.textColor,
|
19
|
+
backgroundColor: theme?.palette?.editor?.background
|
20
|
+
}
|
22
21
|
}
|
23
22
|
},
|
24
|
-
|
25
23
|
childContainer: {
|
26
24
|
padding: "20px",
|
27
25
|
"&.emojiDrawer": {
|