@flozy/editor 3.6.5 → 3.6.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +202 -0
- package/dist/Editor/CommonEditor.js +166 -109
- package/dist/Editor/Elements/AppHeader/AppHeader.js +39 -15
- package/dist/Editor/Elements/Button/EditorButton.js +25 -14
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
- package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +1 -0
- package/dist/Editor/Elements/Emoji/EmojiButton.js +2 -2
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +16 -0
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
- package/dist/Editor/Elements/Grid/Grid.js +2 -0
- package/dist/Editor/Elements/Grid/GridItem.js +3 -1
- package/dist/Editor/Elements/Link/Link.js +6 -1
- package/dist/Editor/Elements/Link/LinkButton.js +4 -2
- package/dist/Editor/Elements/Link/LinkPopup.js +11 -3
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
- package/dist/Editor/Elements/Table/TableCell.js +1 -1
- package/dist/Editor/MiniEditor.js +3 -1
- package/dist/Editor/Toolbar/Basic/index.js +4 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -11
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +20 -13
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +9 -2
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
- package/dist/Editor/common/ColorPickerButton.js +25 -9
- package/dist/Editor/common/CustomColorPicker/index.js +106 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog/index.js +94 -0
- package/dist/Editor/common/CustomDialog/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +33 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/Icon.js +30 -2
- package/dist/Editor/common/LinkSettings/NavComponents.js +54 -20
- package/dist/Editor/common/Shorthands/elements.js +54 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/helper/theme.js +190 -4
- package/dist/Editor/hooks/useEditorTheme.js +139 -0
- package/dist/Editor/hooks/useMouseMove.js +4 -1
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +47 -5
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +144 -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 +21 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
- package/dist/Editor/themeSettings/fonts/index.js +213 -0
- package/dist/Editor/themeSettings/fonts/style.js +44 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +320 -0
- package/dist/Editor/themeSettings/style.js +152 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +356 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
- package/dist/Editor/themeSettingsAI/style.js +247 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +157 -25
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +361 -0
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/helper.js +83 -22
- package/dist/Editor/utils/serializeToHTML.js +25 -13
- package/dist/index.js +5 -1
- package/package.json +1 -1
@@ -0,0 +1,67 @@
|
|
1
|
+
const styles = () => ({
|
2
|
+
dialogContainer: {
|
3
|
+
"& .MuiDialogContent-root": {
|
4
|
+
padding: "0px 20px"
|
5
|
+
},
|
6
|
+
"& .MuiDialogActions-root": {
|
7
|
+
padding: "10px"
|
8
|
+
},
|
9
|
+
"& .MuiTypography-h6": {
|
10
|
+
fontWeight: 600,
|
11
|
+
fontSize: "16px",
|
12
|
+
paddingRight: "20px"
|
13
|
+
},
|
14
|
+
"& .MuiGrid-container": {
|
15
|
+
marginTop: "0px"
|
16
|
+
},
|
17
|
+
"& .MuiGrid-item": {
|
18
|
+
padding: "14px"
|
19
|
+
}
|
20
|
+
},
|
21
|
+
saveBtn: {
|
22
|
+
color: "#fff",
|
23
|
+
background: "#2563EB",
|
24
|
+
fontSize: "14px",
|
25
|
+
fontWeight: 500,
|
26
|
+
padding: "4px 24px",
|
27
|
+
textTransform: "none",
|
28
|
+
"&:hover": {
|
29
|
+
color: "#fff",
|
30
|
+
background: "#2563EB"
|
31
|
+
}
|
32
|
+
},
|
33
|
+
closeBtn: {
|
34
|
+
backgroundColor: "#F4F6F9",
|
35
|
+
color: "#64748B",
|
36
|
+
fontSize: "14px",
|
37
|
+
fontWeight: 500,
|
38
|
+
padding: "4px 22px",
|
39
|
+
textTransform: "none",
|
40
|
+
border: "1px solid #D8DDE1",
|
41
|
+
"&:hover": {
|
42
|
+
border: "1px solid #64748B"
|
43
|
+
}
|
44
|
+
},
|
45
|
+
closeIcon: {
|
46
|
+
position: "absolute",
|
47
|
+
right: 8,
|
48
|
+
top: 8,
|
49
|
+
color: theme => theme.palette.grey[500]
|
50
|
+
},
|
51
|
+
gridDivider: {
|
52
|
+
borderRight: "1px solid rgba(0, 0, 0, 0.12)"
|
53
|
+
},
|
54
|
+
mobileActionBtns: {
|
55
|
+
display: "flex",
|
56
|
+
justifyContent: "flex-end",
|
57
|
+
gap: "8px",
|
58
|
+
paddingTop: "14px",
|
59
|
+
marginTop: "14px",
|
60
|
+
borderTop: theme => `1px solid ${theme.palette.grey[300]}`
|
61
|
+
},
|
62
|
+
mobileDialogContent: {
|
63
|
+
borderTop: theme => `1px solid ${theme.palette.grey[300]}`,
|
64
|
+
paddingTop: "14px"
|
65
|
+
}
|
66
|
+
});
|
67
|
+
export default styles;
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import { MenuItem, Select } from "@mui/material";
|
2
|
+
import { fontFamilyMap } from "../utils/font";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
function CustomSelect(props) {
|
5
|
+
const {
|
6
|
+
onChange,
|
7
|
+
options = [],
|
8
|
+
value
|
9
|
+
} = props;
|
10
|
+
return /*#__PURE__*/_jsx(Select, {
|
11
|
+
fullWidth: true,
|
12
|
+
value: value,
|
13
|
+
onChange: onChange,
|
14
|
+
className: "editor-dd",
|
15
|
+
style: {
|
16
|
+
fontFamily: fontFamilyMap[value],
|
17
|
+
width: "100%",
|
18
|
+
height: "36px",
|
19
|
+
borderRadius: "10px",
|
20
|
+
fontSize: "14px"
|
21
|
+
},
|
22
|
+
children: options.map((option, i) => {
|
23
|
+
return /*#__PURE__*/_jsx(MenuItem, {
|
24
|
+
value: option.value,
|
25
|
+
style: {
|
26
|
+
fontFamily: option.text
|
27
|
+
},
|
28
|
+
children: option?.label || option?.text
|
29
|
+
}, i);
|
30
|
+
})
|
31
|
+
});
|
32
|
+
}
|
33
|
+
export default CustomSelect;
|
@@ -7,7 +7,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
|
|
7
7
|
import { Transforms } from "slate";
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
|
-
const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
|
10
|
+
const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
|
11
11
|
const DragHandleStyle = () => ({
|
12
12
|
dragHandle: {
|
13
13
|
opacity: 0,
|
@@ -10,10 +10,20 @@ import { IoIosImage } from "react-icons/io";
|
|
10
10
|
import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
|
11
11
|
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
|
12
12
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
13
|
-
import EmailRoundedIcon from
|
14
|
-
import InfoOutlinedIcon from
|
13
|
+
import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
|
14
|
+
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
15
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
16
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
17
|
+
const HeadingIcon = ({
|
18
|
+
variant
|
19
|
+
}) => {
|
20
|
+
return /*#__PURE__*/_jsx("div", {
|
21
|
+
style: {
|
22
|
+
color: "#64748B"
|
23
|
+
},
|
24
|
+
children: variant
|
25
|
+
});
|
26
|
+
};
|
17
27
|
const iconList = {
|
18
28
|
fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
|
19
29
|
size: 20
|
@@ -49,6 +59,24 @@ const iconList = {
|
|
49
59
|
size: 18,
|
50
60
|
fill: "#64748B"
|
51
61
|
}),
|
62
|
+
headingFour: /*#__PURE__*/_jsx(HeadingIcon, {
|
63
|
+
variant: "H4"
|
64
|
+
}),
|
65
|
+
headingFive: /*#__PURE__*/_jsx(HeadingIcon, {
|
66
|
+
variant: "H5"
|
67
|
+
}),
|
68
|
+
headingSix: /*#__PURE__*/_jsx(HeadingIcon, {
|
69
|
+
variant: "H6"
|
70
|
+
}),
|
71
|
+
paragraphOne: /*#__PURE__*/_jsx(HeadingIcon, {
|
72
|
+
variant: "P1"
|
73
|
+
}),
|
74
|
+
paragraphTwo: /*#__PURE__*/_jsx(HeadingIcon, {
|
75
|
+
variant: "P2"
|
76
|
+
}),
|
77
|
+
paragraphThree: /*#__PURE__*/_jsx(HeadingIcon, {
|
78
|
+
variant: "P3"
|
79
|
+
}),
|
52
80
|
blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
|
53
81
|
size: 20,
|
54
82
|
fill: "#64748B"
|
@@ -1,8 +1,24 @@
|
|
1
1
|
import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
|
2
2
|
import { useEffect, useMemo, useState } from "react";
|
3
|
+
import { useSlate } from "slate-react";
|
3
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
5
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
5
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
const sectionTypes = ["grid"];
|
8
|
+
const loopChildren = (children = [], sections) => {
|
9
|
+
if (!children?.length) {
|
10
|
+
return sections;
|
11
|
+
}
|
12
|
+
for (let child of children) {
|
13
|
+
if (sectionTypes.includes(child?.type)) {
|
14
|
+
if (child.id) {
|
15
|
+
sections.push(child.id);
|
16
|
+
}
|
17
|
+
}
|
18
|
+
sections = loopChildren(child.children, sections);
|
19
|
+
}
|
20
|
+
return sections;
|
21
|
+
};
|
6
22
|
const OpenInNewTab = props => {
|
7
23
|
const {
|
8
24
|
nav,
|
@@ -42,21 +58,35 @@ export const SelectPage = props => {
|
|
42
58
|
services
|
43
59
|
} = props;
|
44
60
|
const [pages, setPages] = useState([]);
|
61
|
+
const editor = useSlate();
|
45
62
|
const getPages = async () => {
|
46
63
|
const result = await services("getPages", {});
|
47
|
-
|
48
|
-
const {
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
64
|
+
if (result?.data?.length) {
|
65
|
+
const refactor = result?.data?.map(r => {
|
66
|
+
const {
|
67
|
+
title,
|
68
|
+
url_name,
|
69
|
+
...rest
|
70
|
+
} = r;
|
71
|
+
return {
|
72
|
+
label: url_name,
|
73
|
+
value: url_name,
|
74
|
+
...rest
|
75
|
+
};
|
76
|
+
});
|
77
|
+
setPages(refactor);
|
78
|
+
} else {
|
79
|
+
const currentPage = {
|
80
|
+
label: "Current Page",
|
81
|
+
value: "_currentPage",
|
82
|
+
is_current_page: 1,
|
83
|
+
sections: loopChildren(editor.children, [])
|
57
84
|
};
|
58
|
-
|
59
|
-
|
85
|
+
setPages([currentPage]);
|
86
|
+
if (!value) {
|
87
|
+
onChange(currentPage.value);
|
88
|
+
}
|
89
|
+
}
|
60
90
|
};
|
61
91
|
useEffect(() => {
|
62
92
|
getPages();
|
@@ -76,12 +106,14 @@ export const SelectPage = props => {
|
|
76
106
|
}
|
77
107
|
return [];
|
78
108
|
}, [value, pages]);
|
109
|
+
const isCurrentPage = page?.value === "_currentPage";
|
79
110
|
return /*#__PURE__*/_jsxs("div", {
|
80
111
|
children: [/*#__PURE__*/_jsx(FreeSoloCreateOption, {
|
81
112
|
label: page?.label,
|
82
|
-
setValue: val => onChange(val?.value),
|
113
|
+
setValue: val => onChange(val?.value || ""),
|
83
114
|
placeholder: "Select Page",
|
84
|
-
options: pages
|
115
|
+
options: pages,
|
116
|
+
disabled: isCurrentPage
|
85
117
|
}), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
|
86
118
|
label: section?.label,
|
87
119
|
setValue: val => {
|
@@ -96,7 +128,7 @@ export const SelectPage = props => {
|
|
96
128
|
label: p,
|
97
129
|
value: p
|
98
130
|
}))
|
99
|
-
}), /*#__PURE__*/_jsx(OpenInNewTab, {
|
131
|
+
}), isCurrentPage ? null : /*#__PURE__*/_jsx(OpenInNewTab, {
|
100
132
|
...props
|
101
133
|
})]
|
102
134
|
});
|
@@ -149,7 +181,8 @@ export function FreeSoloCreateOption({
|
|
149
181
|
label,
|
150
182
|
setValue,
|
151
183
|
options = [],
|
152
|
-
placeholder = ""
|
184
|
+
placeholder = "",
|
185
|
+
disabled = false
|
153
186
|
}) {
|
154
187
|
return /*#__PURE__*/_jsx(Autocomplete, {
|
155
188
|
freeSolo: true,
|
@@ -164,7 +197,7 @@ export function FreeSoloCreateOption({
|
|
164
197
|
children: option.label
|
165
198
|
}),
|
166
199
|
onChange: (event, newValue) => {
|
167
|
-
if (typeof newValue ===
|
200
|
+
if (typeof newValue === "string") {
|
168
201
|
setValue({
|
169
202
|
value: newValue
|
170
203
|
});
|
@@ -189,7 +222,7 @@ export function FreeSoloCreateOption({
|
|
189
222
|
} = params;
|
190
223
|
// Suggest the creation of a new value
|
191
224
|
const isExisting = options.some(option => inputValue === option.label);
|
192
|
-
if (inputValue !==
|
225
|
+
if (inputValue !== "" && !isExisting) {
|
193
226
|
filtered.push({
|
194
227
|
inputValue,
|
195
228
|
label: `Add "${inputValue}"`
|
@@ -202,7 +235,7 @@ export function FreeSoloCreateOption({
|
|
202
235
|
handleHomeEndKeys: true,
|
203
236
|
getOptionLabel: option => {
|
204
237
|
// Value selected with enter, right from the input
|
205
|
-
if (typeof option ===
|
238
|
+
if (typeof option === "string") {
|
206
239
|
return option;
|
207
240
|
}
|
208
241
|
// Add "xxx" option created dynamically
|
@@ -214,6 +247,7 @@ export function FreeSoloCreateOption({
|
|
214
247
|
},
|
215
248
|
sx: {
|
216
249
|
marginTop: "10px"
|
217
|
-
}
|
250
|
+
},
|
251
|
+
disabled: disabled
|
218
252
|
});
|
219
253
|
}
|
@@ -40,6 +40,60 @@ const ELEMENTS_LIST = [{
|
|
40
40
|
icon: "headingThree"
|
41
41
|
}),
|
42
42
|
onInsert: editor => toggleBlock(editor, "headingThree", false)
|
43
|
+
}, {
|
44
|
+
name: "Heading 4",
|
45
|
+
desc: "",
|
46
|
+
group: "Text",
|
47
|
+
type: "headingFour",
|
48
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
49
|
+
icon: "headingFour"
|
50
|
+
}),
|
51
|
+
onInsert: editor => toggleBlock(editor, "headingFour", false)
|
52
|
+
}, {
|
53
|
+
name: "Heading 5",
|
54
|
+
desc: "",
|
55
|
+
group: "Text",
|
56
|
+
type: "headingFive",
|
57
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
58
|
+
icon: "headingFive"
|
59
|
+
}),
|
60
|
+
onInsert: editor => toggleBlock(editor, "headingFive", false)
|
61
|
+
}, {
|
62
|
+
name: "Heading 6",
|
63
|
+
desc: "",
|
64
|
+
group: "Text",
|
65
|
+
type: "headingSix",
|
66
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
67
|
+
icon: "headingSix"
|
68
|
+
}),
|
69
|
+
onInsert: editor => toggleBlock(editor, "headingSix", false)
|
70
|
+
}, {
|
71
|
+
name: "Paragraph 1",
|
72
|
+
desc: "",
|
73
|
+
group: "Text",
|
74
|
+
type: "paragraphOne",
|
75
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
76
|
+
icon: "paragraphOne"
|
77
|
+
}),
|
78
|
+
onInsert: editor => toggleBlock(editor, "paragraphOne", false)
|
79
|
+
}, {
|
80
|
+
name: "Paragraph 2",
|
81
|
+
desc: "",
|
82
|
+
group: "Text",
|
83
|
+
type: "paragraphTwo",
|
84
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
85
|
+
icon: "paragraphTwo"
|
86
|
+
}),
|
87
|
+
onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
|
88
|
+
}, {
|
89
|
+
name: "Paragraph 3",
|
90
|
+
desc: "",
|
91
|
+
group: "Text",
|
92
|
+
type: "paragraphThree",
|
93
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
94
|
+
icon: "paragraphThree"
|
95
|
+
}),
|
96
|
+
onInsert: editor => toggleBlock(editor, "paragraphThree", false)
|
43
97
|
}, {
|
44
98
|
name: "Quote",
|
45
99
|
desc: "",
|
@@ -20,7 +20,8 @@ const buttonStyle = [{
|
|
20
20
|
},
|
21
21
|
children: option.text
|
22
22
|
});
|
23
|
-
}
|
23
|
+
},
|
24
|
+
themeEnabled: true
|
24
25
|
}, {
|
25
26
|
label: "Font Size",
|
26
27
|
key: "textSize",
|
@@ -44,7 +45,8 @@ const buttonStyle = [{
|
|
44
45
|
}, {
|
45
46
|
label: "Button Color",
|
46
47
|
key: "bgColor",
|
47
|
-
type: "color"
|
48
|
+
type: "color",
|
49
|
+
themeEnabled: true
|
48
50
|
}, {
|
49
51
|
label: "Border Color",
|
50
52
|
key: "borderColor",
|
@@ -3,12 +3,12 @@ import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/
|
|
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 { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
|
9
10
|
const BannerSpacing = props => {
|
10
11
|
const {
|
11
|
-
value: val,
|
12
12
|
data,
|
13
13
|
onChange,
|
14
14
|
elementProps,
|
@@ -18,11 +18,21 @@ const BannerSpacing = props => {
|
|
18
18
|
key
|
19
19
|
} = data;
|
20
20
|
const lockKeyVal = `lock${key}`;
|
21
|
-
|
21
|
+
const [size] = useWindowResize();
|
22
|
+
const {
|
23
|
+
selectedTheme
|
24
|
+
} = useEditorTheme();
|
25
|
+
const {
|
26
|
+
bannerSpacing,
|
27
|
+
lockbannerSpacing
|
28
|
+
} = selectedTheme?.elementProps?.button || {};
|
29
|
+
const isUserValue = Object.keys(props?.value || {})?.length;
|
30
|
+
const isUserLockedSpacing = typeof elementProps[lockKeyVal] === "boolean";
|
31
|
+
const val = isUserValue ? props?.value : bannerSpacing;
|
32
|
+
let lockSpacing = isUserLockedSpacing ? elementProps[lockKeyVal] : lockbannerSpacing;
|
22
33
|
if (lockSpacing === undefined) {
|
23
34
|
lockSpacing = true;
|
24
35
|
}
|
25
|
-
const [size] = useWindowResize();
|
26
36
|
const value = getBreakPointsValue(val, size?.device);
|
27
37
|
const handleChange = e => {
|
28
38
|
let changeAll = {};
|
@@ -3,27 +3,35 @@ import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/
|
|
3
3
|
import { radiusStyle } from "./radiusStyle";
|
4
4
|
import useWindowResize from "../../../hooks/useWindowResize";
|
5
5
|
import { getBreakPointsValue } from "../../../helper/theme";
|
6
|
+
import { useEditorTheme } from "../../../hooks/useEditorTheme";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
|
9
10
|
const BorderRadius = props => {
|
10
11
|
const {
|
11
|
-
value: val,
|
12
12
|
data,
|
13
13
|
onChange,
|
14
14
|
elementProps,
|
15
15
|
classes
|
16
16
|
} = props;
|
17
|
-
let {
|
18
|
-
lockRadius
|
19
|
-
} = elementProps;
|
20
|
-
if (lockRadius === undefined) {
|
21
|
-
lockRadius = true;
|
22
|
-
}
|
23
17
|
const {
|
24
18
|
key
|
25
19
|
} = data;
|
26
20
|
const [size] = useWindowResize();
|
21
|
+
const {
|
22
|
+
selectedTheme
|
23
|
+
} = useEditorTheme();
|
24
|
+
const {
|
25
|
+
borderRadius,
|
26
|
+
lockRadius: themeLockRadius
|
27
|
+
} = selectedTheme?.elementProps?.button || {};
|
28
|
+
const isUserValue = Object.keys(props?.value || {})?.length;
|
29
|
+
const isUserLockedRadius = typeof elementProps?.lockRadius === "boolean";
|
30
|
+
const val = isUserValue ? props?.value : borderRadius;
|
31
|
+
let lockRadius = isUserLockedRadius ? elementProps?.lockRadius : themeLockRadius;
|
32
|
+
if (lockRadius === undefined) {
|
33
|
+
lockRadius = true;
|
34
|
+
}
|
27
35
|
const value = getBreakPointsValue(val, size?.device);
|
28
36
|
const handleChange = e => {
|
29
37
|
let changeAll = {};
|
@@ -1,22 +1,44 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
1
|
+
import React, { useEffect, useMemo, useState } from "react";
|
2
2
|
import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
|
3
3
|
import ColorPickerButton from "../../ColorPickerButton";
|
4
|
+
import { useSlateStatic } from "slate-react";
|
5
|
+
import { getElementStyle, getVariableValue } from "../../../helper/theme";
|
4
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
const MAP_STYLE_PROPS = {
|
9
|
+
bgColor: "background-color",
|
10
|
+
textColor: "color"
|
11
|
+
};
|
6
12
|
const Color = props => {
|
7
13
|
const {
|
8
|
-
value,
|
14
|
+
value: val,
|
9
15
|
data,
|
10
16
|
onChange,
|
11
|
-
classes
|
17
|
+
classes,
|
18
|
+
elementProps,
|
19
|
+
handleClose,
|
20
|
+
customProps
|
12
21
|
} = props;
|
13
22
|
const {
|
14
23
|
key,
|
15
24
|
label
|
16
25
|
} = data;
|
17
26
|
const [recentColors, setRecentColors] = useState({});
|
27
|
+
const editor = useSlateStatic();
|
28
|
+
const {
|
29
|
+
value,
|
30
|
+
inputValue
|
31
|
+
} = useMemo(() => {
|
32
|
+
const isVariable = val && val.startsWith("var");
|
33
|
+
const value = isVariable ? val : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
|
34
|
+
const inputValue = isVariable ? getVariableValue(val) : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
|
35
|
+
return {
|
36
|
+
value: value || val,
|
37
|
+
inputValue: inputValue || val
|
38
|
+
};
|
39
|
+
}, [editor, val]);
|
18
40
|
useEffect(() => {
|
19
|
-
const storedColors = JSON.parse(localStorage.getItem(
|
41
|
+
const storedColors = JSON.parse(localStorage.getItem("recentColors"));
|
20
42
|
if (storedColors) {
|
21
43
|
setRecentColors(storedColors);
|
22
44
|
}
|
@@ -39,7 +61,7 @@ const Color = props => {
|
|
39
61
|
[key]: updatedColors
|
40
62
|
};
|
41
63
|
setRecentColors(updatedColors);
|
42
|
-
localStorage.setItem(
|
64
|
+
localStorage.setItem("recentColors", JSON.stringify(updatedColors));
|
43
65
|
};
|
44
66
|
return /*#__PURE__*/_jsxs(Grid, {
|
45
67
|
item: true,
|
@@ -56,7 +78,7 @@ const Color = props => {
|
|
56
78
|
children: label
|
57
79
|
}), /*#__PURE__*/_jsx(TextField, {
|
58
80
|
fullWidth: true,
|
59
|
-
value:
|
81
|
+
value: inputValue,
|
60
82
|
placeholder: `${label} color code`,
|
61
83
|
InputLabelProps: {
|
62
84
|
shrink: true
|
@@ -68,7 +90,9 @@ const Color = props => {
|
|
68
90
|
classes: classes,
|
69
91
|
value: value,
|
70
92
|
onSave: onSave,
|
71
|
-
recentColors: recentColors[key]
|
93
|
+
recentColors: recentColors[key],
|
94
|
+
handleClose: handleClose,
|
95
|
+
disableEditTheme: customProps?.disableEditTheme
|
72
96
|
})
|
73
97
|
})
|
74
98
|
}
|
@@ -1,19 +1,26 @@
|
|
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
|
-
onChange
|
13
|
+
onChange,
|
14
|
+
elementProps
|
12
15
|
} = props;
|
13
16
|
const {
|
14
17
|
key,
|
15
18
|
width
|
16
19
|
} = data;
|
20
|
+
const editor = useSlateStatic();
|
21
|
+
const value = useMemo(() => {
|
22
|
+
return getElementStyle(editor, elementProps, "font-size") || val;
|
23
|
+
}, [editor, val]);
|
17
24
|
const handleChange = e => {
|
18
25
|
let inc = parseInt(e.target.value) || 16;
|
19
26
|
inc = inc > 200 ? 200 : inc;
|
@@ -24,7 +31,9 @@ const FontSize = props => {
|
|
24
31
|
const getSizeVal = () => {
|
25
32
|
try {
|
26
33
|
const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
27
|
-
|
34
|
+
const defaultSize = 16;
|
35
|
+
const val = parseInt(size || defaultSize);
|
36
|
+
return isNaN(val) ? defaultSize : val;
|
28
37
|
} catch (err) {
|
29
38
|
return "";
|
30
39
|
}
|
@@ -1,7 +1,8 @@
|
|
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
|
+
import { useSlateStatic } from "slate-react";
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
8
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -22,10 +23,19 @@ const TextOptions = props => {
|
|
22
23
|
isBreakpoint,
|
23
24
|
options,
|
24
25
|
renderOption,
|
25
|
-
width
|
26
|
+
width,
|
27
|
+
themeEnabled
|
26
28
|
} = data;
|
27
29
|
const [size] = useWindowResize();
|
28
|
-
const
|
30
|
+
const editor = useSlateStatic();
|
31
|
+
const value = useMemo(() => {
|
32
|
+
const userValue = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
|
33
|
+
if (themeEnabled) {
|
34
|
+
// editor takes a little amount of time to update the new style in element, in that case userValue will be returned
|
35
|
+
return getElementStyle(editor, elementProps, key) || userValue;
|
36
|
+
}
|
37
|
+
return userValue;
|
38
|
+
}, [editor, isBreakpoint, val, size?.device]);
|
29
39
|
const metaDataMappingOptions = metaMappings?.boards || [];
|
30
40
|
const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : options;
|
31
41
|
const handleChange = (e, d) => {
|