@flozy/editor 3.9.1 → 3.9.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +45 -55
- package/dist/Editor/CommonEditor.js +111 -180
- package/dist/Editor/Editor.css +0 -7
- package/dist/Editor/Elements/AI/AIInput.js +18 -17
- package/dist/Editor/Elements/AI/CustomSelect.js +12 -19
- package/dist/Editor/Elements/AI/PopoverAIInput.js +28 -23
- package/dist/Editor/Elements/AI/Styles.js +1 -2
- package/dist/Editor/Elements/Accordion/Accordion.js +7 -74
- package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +60 -4
- package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
- package/dist/Editor/Elements/Button/EditorButton.js +16 -28
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
- package/dist/Editor/Elements/Embed/Image.js +19 -27
- package/dist/Editor/Elements/Embed/Video.js +10 -14
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
- package/dist/Editor/Elements/Form/Form.js +1 -1
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
- package/dist/Editor/Elements/Grid/Grid.js +3 -27
- package/dist/Editor/Elements/Grid/GridItem.js +1 -3
- package/dist/Editor/Elements/Link/Link.js +1 -6
- package/dist/Editor/Elements/Link/LinkButton.js +2 -4
- package/dist/Editor/Elements/Link/LinkPopup.js +3 -10
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +4 -8
- package/dist/Editor/Elements/Signature/SignaturePopup.js +3 -14
- package/dist/Editor/Elements/Table/Styles.js +1 -23
- package/dist/Editor/Elements/Table/Table.js +2 -3
- package/dist/Editor/Elements/Table/TableCell.js +8 -70
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +0 -1
- package/dist/Editor/MiniEditor.js +1 -3
- package/dist/Editor/Styles/EditorStyles.js +1 -1
- package/dist/Editor/Toolbar/Basic/index.js +2 -4
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +18 -29
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +3 -29
- package/dist/Editor/Toolbar/Mini/Options/Options.js +0 -10
- package/dist/Editor/Toolbar/Mini/Styles.js +0 -7
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +16 -22
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
- package/dist/Editor/Toolbar/PopupTool/index.js +17 -7
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/assets/svg/AIIcons.js +1 -153
- package/dist/Editor/assets/svg/AddTemplateIcon.js +10 -13
- package/dist/Editor/assets/svg/TextIcon.js +5 -8
- package/dist/Editor/common/ColorPickerButton.js +9 -25
- package/dist/Editor/common/DnD/DragHandleButton.js +47 -56
- package/dist/Editor/common/Icon.js +3 -43
- package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
- package/dist/Editor/common/LinkSettings/index.js +2 -4
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
- package/dist/Editor/common/LinkSettings/style.js +8 -11
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +1 -6
- package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
- package/dist/Editor/common/Section/index.js +7 -57
- package/dist/Editor/common/Section/styles.js +0 -11
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +3 -14
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/common/iconslist.js +31 -0
- package/dist/Editor/helper/deserialize/index.js +9 -14
- package/dist/Editor/helper/theme.js +4 -190
- package/dist/Editor/hooks/useMouseMove.js +2 -4
- package/dist/Editor/hooks/useWindowMessage.js +7 -10
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +5 -47
- package/dist/Editor/plugins/withLayout.js +10 -15
- package/dist/Editor/plugins/withTable.js +2 -2
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +25 -161
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/draftToSlate.js +1 -1
- package/dist/Editor/utils/events.js +6 -65
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +14 -74
- package/dist/Editor/utils/table.js +43 -51
- package/package.json +3 -4
- package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
- package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -177
- package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
- package/dist/Editor/Elements/Redo/RedoButton.js +0 -14
- package/dist/Editor/Elements/Undo/UndoButton.js +0 -14
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
- package/dist/Editor/assets/svg/RedoIcon.js +0 -27
- package/dist/Editor/assets/svg/SettingsIcon.js +0 -28
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
- package/dist/Editor/assets/svg/UndoIcon.js +0 -27
- package/dist/Editor/common/CustomColorPicker/index.js +0 -106
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog/index.js +0 -94
- package/dist/Editor/common/CustomDialog/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -33
- package/dist/Editor/common/EditorCmds.js +0 -35
- package/dist/Editor/hooks/useEditorTheme.js +0 -139
- package/dist/Editor/theme/index.js +0 -144
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
- package/dist/Editor/themeSettings/buttons/index.js +0 -290
- package/dist/Editor/themeSettings/buttons/style.js +0 -21
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
- package/dist/Editor/themeSettings/fonts/index.js +0 -213
- package/dist/Editor/themeSettings/fonts/style.js +0 -44
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -320
- package/dist/Editor/themeSettings/style.js +0 -152
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -356
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
- package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -1,35 +1,32 @@
|
|
1
|
-
const ButtonNavSettingsStyles =
|
1
|
+
const ButtonNavSettingsStyles = () => ({
|
2
2
|
dialogContainer: {
|
3
|
-
|
4
|
-
background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
|
5
|
-
},
|
6
|
-
"& .MuiDialogContent-root": {
|
3
|
+
'& .MuiDialogContent-root': {
|
7
4
|
padding: "0px 20px"
|
8
5
|
},
|
9
|
-
|
6
|
+
'& .MuiDialogActions-root': {
|
10
7
|
padding: "10px"
|
11
8
|
},
|
12
|
-
|
9
|
+
'& .MuiTypography-h6': {
|
13
10
|
fontWeight: 600,
|
14
11
|
fontSize: "16px",
|
15
12
|
paddingRight: "20px"
|
16
13
|
},
|
17
14
|
"& .MuiGrid-container": {
|
18
|
-
marginTop:
|
15
|
+
marginTop: '0px'
|
19
16
|
},
|
20
17
|
"& .MuiGrid-item": {
|
21
18
|
padding: "14px"
|
22
19
|
}
|
23
20
|
},
|
24
21
|
saveBtn: {
|
25
|
-
color:
|
22
|
+
color: '#fff',
|
26
23
|
background: "#2563EB",
|
27
24
|
fontSize: "14px",
|
28
25
|
fontWeight: 500,
|
29
26
|
padding: "4px 24px",
|
30
27
|
textTransform: "none",
|
31
28
|
"&:hover": {
|
32
|
-
color:
|
29
|
+
color: '#fff',
|
33
30
|
background: "#2563EB"
|
34
31
|
}
|
35
32
|
},
|
@@ -46,7 +43,7 @@ const ButtonNavSettingsStyles = themeType => ({
|
|
46
43
|
}
|
47
44
|
},
|
48
45
|
closeIcon: {
|
49
|
-
position:
|
46
|
+
position: 'absolute',
|
50
47
|
right: 8,
|
51
48
|
top: 8,
|
52
49
|
color: theme => theme.palette.grey[500]
|
@@ -39,12 +39,7 @@ const MentionsListCard = props => {
|
|
39
39
|
},
|
40
40
|
alt: name,
|
41
41
|
children: /*#__PURE__*/_jsx(Avatar, {
|
42
|
-
|
43
|
-
background: 'linear-gradient(90deg, #5351FC 0%, #19A9FC 100%)'
|
44
|
-
},
|
45
|
-
alt: name,
|
46
|
-
src: avatar_filename,
|
47
|
-
children: !avatar_filename && name && name.charAt(0).toUpperCase()
|
42
|
+
src: avatar_filename
|
48
43
|
})
|
49
44
|
}), /*#__PURE__*/_jsx(Box, {
|
50
45
|
sx: {
|
@@ -39,13 +39,10 @@ const usePopupStyles = theme => ({
|
|
39
39
|
color: theme?.palette?.editor?.textColor
|
40
40
|
},
|
41
41
|
"&.active": {
|
42
|
-
background:
|
43
|
-
"& .MuiTypography-root": {
|
44
|
-
color: `${theme?.palette?.editor?.activeColor} !important`
|
45
|
-
}
|
42
|
+
background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
|
46
43
|
},
|
47
44
|
"&:hover": {
|
48
|
-
background: theme?.palette?.
|
45
|
+
background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
|
49
46
|
},
|
50
47
|
"&.renderComp": {
|
51
48
|
padding: "0px",
|
@@ -1,17 +1,15 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { ReactEditor, useSlateStatic } from "slate-react";
|
4
|
-
import { Box, IconButton,
|
4
|
+
import { Box, IconButton, Tooltip } from "@mui/material";
|
5
5
|
import TuneIcon from "@mui/icons-material/Tune";
|
6
6
|
import SectionPopup from "../../Elements/Grid/SectionPopup";
|
7
7
|
import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
|
8
8
|
import DragHandle from "../DnD/DragHandleButton";
|
9
9
|
import { useEditorSelection } from "../../hooks/useMouseMove";
|
10
10
|
import SectionStyle from "./styles";
|
11
|
-
import useWindowResize from "../../hooks/useWindowResize";
|
12
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
14
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
15
13
|
const list_types = ["orderedList", "unorderedList"];
|
16
14
|
const Section = props => {
|
17
15
|
const classes = SectionStyle();
|
@@ -40,33 +38,14 @@ const Section = props => {
|
|
40
38
|
flexDirection
|
41
39
|
} = sectionAlignment || {};
|
42
40
|
const path = ReactEditor.findPath(editor, element);
|
43
|
-
const anchorEl = useRef(null);
|
44
|
-
const popperEl = useRef(null);
|
45
|
-
const [size] = useWindowResize();
|
46
|
-
const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
|
47
|
-
const [isHovering, setIsHovering] = useState(false);
|
48
|
-
const onMouseEnter = () => {
|
49
|
-
setIsHovering(true);
|
50
|
-
};
|
51
|
-
const onMouseLeave = () => {
|
52
|
-
setIsHovering(false);
|
53
|
-
};
|
54
41
|
const onSettings = () => {
|
55
42
|
setOpenSettings(true);
|
56
43
|
};
|
57
|
-
const Toolbar = ({
|
58
|
-
fromPopper
|
59
|
-
}) => {
|
44
|
+
const Toolbar = () => {
|
60
45
|
return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
|
61
46
|
component: "div",
|
62
47
|
className: `element-toolbar no-border-button hr section-tw sectionIcon`,
|
63
|
-
style:
|
64
|
-
position: "unset",
|
65
|
-
marginLeft: "28px",
|
66
|
-
paddingTop: "4px",
|
67
|
-
marginRight: "10px",
|
68
|
-
height: "100%"
|
69
|
-
} : {
|
48
|
+
style: {
|
70
49
|
left: "-28px",
|
71
50
|
top: "3px"
|
72
51
|
},
|
@@ -120,8 +99,6 @@ const Section = props => {
|
|
120
99
|
alignItems: horizantal,
|
121
100
|
justifyContent: vertical
|
122
101
|
},
|
123
|
-
onMouseEnter: onMouseEnter,
|
124
|
-
onMouseLeave: onMouseLeave,
|
125
102
|
children: [/*#__PURE__*/_jsxs(Box, {
|
126
103
|
className: "ed-section-inner",
|
127
104
|
sx: {
|
@@ -130,36 +107,9 @@ const Section = props => {
|
|
130
107
|
...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
|
131
108
|
}
|
132
109
|
},
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
anchorEl: anchorEl?.current,
|
137
|
-
placement: "top-start",
|
138
|
-
sx: {
|
139
|
-
zIndex: 9999
|
140
|
-
},
|
141
|
-
disablePortal: true,
|
142
|
-
ref: popperEl,
|
143
|
-
className: "sectionPopper",
|
144
|
-
children: /*#__PURE__*/_jsxs(Box, {
|
145
|
-
sx: {
|
146
|
-
bgcolor: "background.paper",
|
147
|
-
background: "#F6F6F6",
|
148
|
-
height: "30px",
|
149
|
-
position: "relative"
|
150
|
-
},
|
151
|
-
children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
|
152
|
-
...props,
|
153
|
-
fromPopper: true
|
154
|
-
}) : null, /*#__PURE__*/_jsx(Toolbar, {
|
155
|
-
fromPopper: true
|
156
|
-
})]
|
157
|
-
})
|
158
|
-
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
159
|
-
children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
|
160
|
-
...props
|
161
|
-
}) : null, /*#__PURE__*/_jsx(Toolbar, {})]
|
162
|
-
}), children]
|
110
|
+
children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
|
111
|
+
...props
|
112
|
+
}) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
|
163
113
|
}), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
|
164
114
|
element: {
|
165
115
|
...element,
|
@@ -6,9 +6,6 @@ const SectionStyle = () => ({
|
|
6
6
|
},
|
7
7
|
"& .sectionIcon": {
|
8
8
|
opacity: 1
|
9
|
-
},
|
10
|
-
"& .sectionPopper": {
|
11
|
-
opacity: 1
|
12
9
|
}
|
13
10
|
},
|
14
11
|
"& .element-toolbar": {
|
@@ -16,14 +13,6 @@ const SectionStyle = () => ({
|
|
16
13
|
display: "block"
|
17
14
|
}
|
18
15
|
},
|
19
|
-
"& .sectionPopper": {
|
20
|
-
"&:hover": {
|
21
|
-
opacity: 1
|
22
|
-
}
|
23
|
-
},
|
24
|
-
"& .sectionPopper": {
|
25
|
-
opacity: 0
|
26
|
-
},
|
27
16
|
"& .sectionIcon": {
|
28
17
|
opacity: 0,
|
29
18
|
padding: "0px",
|
@@ -40,60 +40,6 @@ 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)
|
97
43
|
}, {
|
98
44
|
name: "Quote",
|
99
45
|
desc: "",
|
@@ -1,18 +1,18 @@
|
|
1
1
|
const accordionTitleBtnStyle = [{
|
2
2
|
tab: "Colors",
|
3
|
-
value: "
|
3
|
+
value: "colors",
|
4
4
|
fields: [{
|
5
|
-
label: "
|
6
|
-
key: "
|
5
|
+
label: "Text Color",
|
6
|
+
key: "textColor",
|
7
7
|
type: "color",
|
8
8
|
needPreview: true
|
9
9
|
}, {
|
10
|
-
label: "
|
11
|
-
key: "
|
10
|
+
label: "Background Color",
|
11
|
+
key: "bgColor",
|
12
12
|
type: "color"
|
13
13
|
}, {
|
14
|
-
label: "
|
15
|
-
key: "
|
14
|
+
label: "Border Color",
|
15
|
+
key: "borderColor",
|
16
16
|
type: "color"
|
17
17
|
}]
|
18
18
|
}];
|
@@ -1,4 +1,20 @@
|
|
1
1
|
const accordionTitleStyle = [{
|
2
|
+
tab: "Banner Spacing",
|
3
|
+
value: "bannerSpacing",
|
4
|
+
fields: [{
|
5
|
+
label: "Banner Spacing",
|
6
|
+
key: "bannerSpacing",
|
7
|
+
type: "bannerSpacing"
|
8
|
+
}]
|
9
|
+
}, {
|
10
|
+
tab: "Border Radius",
|
11
|
+
value: "borderRadius",
|
12
|
+
fields: [{
|
13
|
+
label: "Border Radius",
|
14
|
+
key: "borderRadius",
|
15
|
+
type: "borderRadius"
|
16
|
+
}]
|
17
|
+
}, {
|
2
18
|
tab: "Colors",
|
3
19
|
value: "colors",
|
4
20
|
fields: [{
|
@@ -15,21 +31,5 @@ const accordionTitleStyle = [{
|
|
15
31
|
key: "borderColor",
|
16
32
|
type: "color"
|
17
33
|
}]
|
18
|
-
}, {
|
19
|
-
tab: "Banner Spacing",
|
20
|
-
value: "bannerSpacing",
|
21
|
-
fields: [{
|
22
|
-
label: "Banner Spacing",
|
23
|
-
key: "bannerSpacing",
|
24
|
-
type: "bannerSpacing"
|
25
|
-
}]
|
26
|
-
}, {
|
27
|
-
tab: "Border Radius",
|
28
|
-
value: "borderRadius",
|
29
|
-
fields: [{
|
30
|
-
label: "Border Radius",
|
31
|
-
key: "borderRadius",
|
32
|
-
type: "borderRadius"
|
33
|
-
}]
|
34
34
|
}];
|
35
35
|
export default accordionTitleStyle;
|
@@ -20,8 +20,7 @@ const buttonStyle = [{
|
|
20
20
|
},
|
21
21
|
children: option.text
|
22
22
|
});
|
23
|
-
}
|
24
|
-
themeEnabled: true
|
23
|
+
}
|
25
24
|
}, {
|
26
25
|
label: "Font Size",
|
27
26
|
key: "textSize",
|
@@ -45,8 +44,7 @@ const buttonStyle = [{
|
|
45
44
|
}, {
|
46
45
|
label: "Button Color",
|
47
46
|
key: "bgColor",
|
48
|
-
type: "color"
|
49
|
-
themeEnabled: true
|
47
|
+
type: "color"
|
50
48
|
}, {
|
51
49
|
label: "Border Color",
|
52
50
|
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";
|
7
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
8
|
const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
|
10
9
|
const BannerSpacing = props => {
|
11
10
|
const {
|
11
|
+
value: val,
|
12
12
|
data,
|
13
13
|
onChange,
|
14
14
|
elementProps,
|
@@ -18,21 +18,11 @@ const BannerSpacing = props => {
|
|
18
18
|
key
|
19
19
|
} = data;
|
20
20
|
const lockKeyVal = `lock${key}`;
|
21
|
-
|
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;
|
21
|
+
let lockSpacing = elementProps[lockKeyVal];
|
33
22
|
if (lockSpacing === undefined) {
|
34
23
|
lockSpacing = true;
|
35
24
|
}
|
25
|
+
const [size] = useWindowResize();
|
36
26
|
const value = getBreakPointsValue(val, size?.device);
|
37
27
|
const handleChange = e => {
|
38
28
|
let changeAll = {};
|
@@ -3,35 +3,27 @@ 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";
|
7
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
8
|
const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
|
10
9
|
const BorderRadius = props => {
|
11
10
|
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
|
+
}
|
17
23
|
const {
|
18
24
|
key
|
19
25
|
} = data;
|
20
26
|
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
|
-
}
|
35
27
|
const value = getBreakPointsValue(val, size?.device);
|
36
28
|
const handleChange = e => {
|
37
29
|
let changeAll = {};
|
@@ -1,44 +1,22 @@
|
|
1
|
-
import React, { useEffect,
|
1
|
+
import React, { useEffect, 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";
|
6
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
-
const MAP_STYLE_PROPS = {
|
9
|
-
bgColor: "background-color",
|
10
|
-
textColor: "color"
|
11
|
-
};
|
12
6
|
const Color = props => {
|
13
7
|
const {
|
14
|
-
value
|
8
|
+
value,
|
15
9
|
data,
|
16
10
|
onChange,
|
17
|
-
classes
|
18
|
-
elementProps,
|
19
|
-
handleClose,
|
20
|
-
customProps
|
11
|
+
classes
|
21
12
|
} = props;
|
22
13
|
const {
|
23
14
|
key,
|
24
15
|
label
|
25
16
|
} = data;
|
26
17
|
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]);
|
40
18
|
useEffect(() => {
|
41
|
-
const storedColors = JSON.parse(localStorage.getItem(
|
19
|
+
const storedColors = JSON.parse(localStorage.getItem('recentColors'));
|
42
20
|
if (storedColors) {
|
43
21
|
setRecentColors(storedColors);
|
44
22
|
}
|
@@ -61,7 +39,7 @@ const Color = props => {
|
|
61
39
|
[key]: updatedColors
|
62
40
|
};
|
63
41
|
setRecentColors(updatedColors);
|
64
|
-
localStorage.setItem(
|
42
|
+
localStorage.setItem('recentColors', JSON.stringify(updatedColors));
|
65
43
|
};
|
66
44
|
return /*#__PURE__*/_jsxs(Grid, {
|
67
45
|
item: true,
|
@@ -78,7 +56,7 @@ const Color = props => {
|
|
78
56
|
children: label
|
79
57
|
}), /*#__PURE__*/_jsx(TextField, {
|
80
58
|
fullWidth: true,
|
81
|
-
value:
|
59
|
+
value: value,
|
82
60
|
placeholder: `${label} color code`,
|
83
61
|
InputLabelProps: {
|
84
62
|
shrink: true
|
@@ -90,9 +68,7 @@ const Color = props => {
|
|
90
68
|
classes: classes,
|
91
69
|
value: value,
|
92
70
|
onSave: onSave,
|
93
|
-
recentColors: recentColors[key]
|
94
|
-
handleClose: handleClose,
|
95
|
-
disableEditTheme: customProps?.disableEditTheme
|
71
|
+
recentColors: recentColors[key]
|
96
72
|
})
|
97
73
|
})
|
98
74
|
}
|
@@ -1,26 +1,19 @@
|
|
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
|
-
onChange
|
14
|
-
elementProps
|
11
|
+
onChange
|
15
12
|
} = props;
|
16
13
|
const {
|
17
14
|
key,
|
18
15
|
width
|
19
16
|
} = data;
|
20
|
-
const editor = useSlateStatic();
|
21
|
-
const value = useMemo(() => {
|
22
|
-
return getElementStyle(editor, elementProps, "font-size") || val;
|
23
|
-
}, [editor, val]);
|
24
17
|
const handleChange = e => {
|
25
18
|
let inc = parseInt(e.target.value) || 16;
|
26
19
|
inc = inc > 200 ? 200 : inc;
|
@@ -31,9 +24,7 @@ const FontSize = props => {
|
|
31
24
|
const getSizeVal = () => {
|
32
25
|
try {
|
33
26
|
const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
34
|
-
|
35
|
-
const val = parseInt(size || defaultSize);
|
36
|
-
return isNaN(val) ? defaultSize : val;
|
27
|
+
return parseInt(size || 16);
|
37
28
|
} catch (err) {
|
38
29
|
return "";
|
39
30
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React
|
1
|
+
import React from "react";
|
2
2
|
import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
4
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -6,23 +6,12 @@ const SelectBox = props => {
|
|
6
6
|
const {
|
7
7
|
value,
|
8
8
|
data,
|
9
|
-
onChange
|
10
|
-
elementProps
|
9
|
+
onChange
|
11
10
|
} = props;
|
12
11
|
const {
|
13
12
|
key,
|
14
13
|
placeholder
|
15
14
|
} = data;
|
16
|
-
const [checkedValue, setCheckedValue] = useState(false);
|
17
|
-
const isFirstRender = useRef(true);
|
18
|
-
useEffect(() => {
|
19
|
-
if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
|
20
|
-
setCheckedValue(true);
|
21
|
-
isFirstRender.current = false;
|
22
|
-
} else {
|
23
|
-
setCheckedValue(value);
|
24
|
-
}
|
25
|
-
}, [elementProps.element, value]);
|
26
15
|
const handleChange = e => {
|
27
16
|
onChange({
|
28
17
|
[key]: e.target.checked
|
@@ -37,7 +26,7 @@ const SelectBox = props => {
|
|
37
26
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
38
27
|
control: /*#__PURE__*/_jsx(Checkbox, {
|
39
28
|
value: value,
|
40
|
-
checked:
|
29
|
+
checked: value,
|
41
30
|
onChange: handleChange
|
42
31
|
}),
|
43
32
|
label: placeholder
|
@@ -1,8 +1,7 @@
|
|
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
|
-
import { useSlateStatic } from "slate-react";
|
6
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
7
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -23,19 +22,10 @@ const TextOptions = props => {
|
|
23
22
|
isBreakpoint,
|
24
23
|
options,
|
25
24
|
renderOption,
|
26
|
-
width
|
27
|
-
themeEnabled
|
25
|
+
width
|
28
26
|
} = data;
|
29
27
|
const [size] = useWindowResize();
|
30
|
-
const
|
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]);
|
28
|
+
const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
|
39
29
|
const metaDataMappingOptions = metaMappings?.boards || [];
|
40
30
|
const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : options;
|
41
31
|
const handleChange = (e, d) => {
|