@flozy/editor 1.6.3 → 1.6.5
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Editor.css +44 -18
- package/dist/Editor/Elements/Accordion/Accordion.js +13 -10
- package/dist/Editor/Elements/Table/DeleteCellIcon.js +2 -2
- package/dist/Editor/Elements/Table/DeleteRowIcon.js +2 -2
- package/dist/Editor/Elements/Table/Table.js +0 -1
- package/dist/Editor/Styles/EditorStyles.js +3 -1
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +33 -8
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +19 -3
- package/dist/Editor/common/Icon.js +8 -2
- package/dist/Editor/common/ImageSelector/ImageSelector.js +23 -3
- package/dist/Editor/common/ImageSelector/Styles.js +26 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +0 -4
- package/dist/Editor/utils/accordion.js +24 -16
- package/package.json +1 -1
package/dist/Editor/Editor.css
CHANGED
@@ -176,35 +176,23 @@ blockquote {
|
|
176
176
|
|
177
177
|
.accordion-title {
|
178
178
|
position: relative;
|
179
|
-
background-color: #
|
179
|
+
background-color: #FFF;
|
180
180
|
display: flex;
|
181
181
|
align-items: center;
|
182
182
|
}
|
183
183
|
|
184
184
|
.accordion-content {
|
185
|
-
padding-left:
|
186
|
-
background-color: #
|
187
|
-
border: 1px solid #ccc;
|
185
|
+
padding-left: 13px;
|
186
|
+
background-color: #FFF;
|
187
|
+
border-left: 1px solid #ccc;
|
188
|
+
margin-left: 14px;
|
188
189
|
}
|
189
190
|
|
190
191
|
.accordion-summary-container {
|
191
192
|
padding: 8px 0px;
|
192
193
|
margin: 0px;
|
193
194
|
position: relative;
|
194
|
-
padding-left:
|
195
|
-
}
|
196
|
-
|
197
|
-
.accordion-summary-collapse-btn {
|
198
|
-
width: 32px;
|
199
|
-
height: 32px;
|
200
|
-
z-index: 1;
|
201
|
-
border-radius: 50%;
|
202
|
-
display: flex;
|
203
|
-
justify-content: center;
|
204
|
-
align-items: center;
|
205
|
-
margin-left: 12px;
|
206
|
-
margin-right: 12px;
|
207
|
-
position: relative;
|
195
|
+
padding-left: 8px;
|
208
196
|
}
|
209
197
|
|
210
198
|
.accordion-details-container {
|
@@ -867,4 +855,42 @@ blockquote {
|
|
867
855
|
/** to avoid line space **/
|
868
856
|
.page-settings {
|
869
857
|
height: 0px;
|
858
|
+
}
|
859
|
+
|
860
|
+
/* HTML: <div class="loader"></div> */
|
861
|
+
.img-loader-wrapper {
|
862
|
+
width:28px;
|
863
|
+
aspect-ratio: 1;
|
864
|
+
border-radius: 50%;
|
865
|
+
background: #F10C49;
|
866
|
+
animation: l9 2s infinite;
|
867
|
+
}
|
868
|
+
@keyframes l9 {
|
869
|
+
0% {box-shadow:
|
870
|
+
0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
|
871
|
+
0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
|
872
|
+
12.5% {box-shadow:
|
873
|
+
0 0 #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,16px 0 #F4DD51, 0 0 #E3AAD6,
|
874
|
+
0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
|
875
|
+
25% {box-shadow:
|
876
|
+
0 0 #F4DD51, 0 0 #E3AAD6,16px 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
|
877
|
+
0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
|
878
|
+
37.5% {box-shadow:
|
879
|
+
0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
|
880
|
+
0 16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
|
881
|
+
50% {box-shadow:
|
882
|
+
0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
|
883
|
+
0 16px #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
|
884
|
+
62.5% {box-shadow:
|
885
|
+
0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
|
886
|
+
0 0 #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,-16px 0 #F4DD51, 0 0 #E3AAD6}
|
887
|
+
75% {box-shadow:
|
888
|
+
0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
|
889
|
+
0 0 #F4DD51, 0 0 #E3AAD6,-16px 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
|
890
|
+
87.5% {box-shadow:
|
891
|
+
0 -16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
|
892
|
+
0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
|
893
|
+
100% {box-shadow:
|
894
|
+
0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
|
895
|
+
0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
|
870
896
|
}
|
@@ -1,12 +1,11 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
|
4
|
-
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
|
5
|
-
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
6
4
|
import AccordionBtnPopup from "./AccordionBtnPopup";
|
7
5
|
import { IconButton, Tooltip } from "@mui/material";
|
8
6
|
import DeleteIcon from "@mui/icons-material/Delete";
|
9
7
|
import { GridSettingsIcon } from "../../common/iconslist";
|
8
|
+
import Icon from "../../common/Icon";
|
10
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
11
|
const Accordion = props => {
|
@@ -26,7 +25,6 @@ const Accordion = props => {
|
|
26
25
|
const path = ReactEditor.findPath(editor, element);
|
27
26
|
const {
|
28
27
|
textColor,
|
29
|
-
btnBg,
|
30
28
|
bgColor
|
31
29
|
} = element;
|
32
30
|
const onToggle = () => {
|
@@ -37,7 +35,7 @@ const Accordion = props => {
|
|
37
35
|
className: "element-toolbar hr",
|
38
36
|
contentEditable: false,
|
39
37
|
style: {
|
40
|
-
top: "-
|
38
|
+
top: "-32px",
|
41
39
|
left: "0px",
|
42
40
|
display: "flex",
|
43
41
|
width: "fit-content"
|
@@ -95,15 +93,20 @@ const Accordion = props => {
|
|
95
93
|
style: {
|
96
94
|
backgroundColor: bgColor
|
97
95
|
},
|
98
|
-
children: [/*#__PURE__*/_jsx(
|
96
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
99
97
|
className: "accordion-summary-collapse-btn",
|
100
|
-
contentEditable: false,
|
101
98
|
onClick: onToggle,
|
102
|
-
|
103
|
-
|
104
|
-
|
99
|
+
contentEditable: false,
|
100
|
+
sx: {
|
101
|
+
"& svg": {
|
102
|
+
fill: textColor
|
103
|
+
}
|
105
104
|
},
|
106
|
-
children: toggle ? /*#__PURE__*/_jsx(
|
105
|
+
children: !toggle ? /*#__PURE__*/_jsx(Icon, {
|
106
|
+
icon: "accordionArrow"
|
107
|
+
}) : /*#__PURE__*/_jsx(Icon, {
|
108
|
+
icon: "accordionArrowDown"
|
109
|
+
})
|
107
110
|
}), children[0]]
|
108
111
|
}), /*#__PURE__*/_jsx("div", {
|
109
112
|
className: "accordion-content",
|
@@ -12,12 +12,12 @@ const DeleteCell = () => {
|
|
12
12
|
fillRule: "evenodd",
|
13
13
|
clipRule: "evenodd",
|
14
14
|
d: "M20 16V20L4 20V4H20V8H18.5V5.5H15V18.5L18.5 18.5V16H20ZM5.5 16.5V18.5H8.5V16.5L5.5 16.5ZM10 16.5V18.5L13.5 18.5V16.5L10 16.5ZM13.5 8.01957V5.5H10V8.01958L13.5 8.01957ZM8.5 8.01958V5.5H5.5V8.01959L8.5 8.01958ZM8.5 9.51958L5.5 9.51959V11.5L8.5 11.5V9.51958ZM8.5 13L5.5 13V15L8.5 15V13ZM10 13V15L13.5 15V13L10 13ZM10 11.5L13.5 11.5V9.51957L10 9.51958V11.5Z",
|
15
|
-
fill: "#
|
15
|
+
fill: "#64748b"
|
16
16
|
}), /*#__PURE__*/_jsx("path", {
|
17
17
|
fillRule: "evenodd",
|
18
18
|
clipRule: "evenodd",
|
19
19
|
d: "M18.7176 13.0606L19.9373 14.2803L20.9979 13.2197L19.7782 12L20.9979 10.7803L19.9372 9.71967L18.7176 10.9393L17.4979 9.71968L16.4373 10.7803L17.6569 12L16.4373 13.2196L17.4979 14.2803L18.7176 13.0606Z",
|
20
|
-
fill: "#
|
20
|
+
fill: "#64748b"
|
21
21
|
})]
|
22
22
|
});
|
23
23
|
};
|
@@ -12,12 +12,12 @@ const DeleteCell = () => {
|
|
12
12
|
fillRule: "evenodd",
|
13
13
|
clipRule: "evenodd",
|
14
14
|
d: "M20 4H4V20H8V18.5H5.5V13H18.5V18.5H16V20H20V4ZM5.5 8V5.5H8.5V8H5.5ZM10 8V5.5H14L13.9999 8H10ZM15.4999 8L15.5 5.5H18.5V8H15.4999ZM15.4999 9.5H18.5V11.5H15.4998L15.4999 9.5ZM8.5 11.5H5.5V9.5H8.5V11.5ZM10 11.5V9.5H13.9999L13.9998 11.5H10Z",
|
15
|
-
fill: "#
|
15
|
+
fill: "#64748b"
|
16
16
|
}), /*#__PURE__*/_jsx("path", {
|
17
17
|
fillRule: "evenodd",
|
18
18
|
clipRule: "evenodd",
|
19
19
|
d: "M12 18.7804L13.2197 20.0001L14.2803 18.9395L13.0606 17.7197L14.2802 16.5001L13.2196 15.4395L12 16.6591L10.7803 15.4395L9.71968 16.5001L10.9393 17.7197L9.71967 18.9394L10.7803 20.0001L12 18.7804Z",
|
20
|
-
fill: "#
|
20
|
+
fill: "#64748b"
|
21
21
|
})]
|
22
22
|
});
|
23
23
|
};
|
@@ -7,7 +7,6 @@ import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
|
|
7
7
|
import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
|
8
8
|
import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
|
9
9
|
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
|
10
|
-
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
|
11
10
|
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
12
11
|
import SettingsIcon from "@mui/icons-material/Settings";
|
13
12
|
import DeleteCellIcon from "./DeleteCellIcon";
|
@@ -12,7 +12,6 @@ const editorStyles = ({
|
|
12
12
|
overflow: "auto",
|
13
13
|
display: "flex",
|
14
14
|
flexDirection: "column",
|
15
|
-
backgroundColor: "#cccccc2b",
|
16
15
|
"& .scroll-area": {
|
17
16
|
display: "flex",
|
18
17
|
justifyContent: "center",
|
@@ -44,6 +43,9 @@ const editorStyles = ({
|
|
44
43
|
stroke: "rgb(100, 116, 139);"
|
45
44
|
}
|
46
45
|
}
|
46
|
+
},
|
47
|
+
"& .accordion-summary-collapse-btn": {
|
48
|
+
padding: "4px"
|
47
49
|
}
|
48
50
|
}
|
49
51
|
});
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
|
-
import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box } from "@mui/material";
|
2
|
+
import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box, CircularProgress } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
4
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
5
|
const Categories = props => {
|
@@ -23,6 +23,24 @@ const Categories = props => {
|
|
23
23
|
}, m))
|
24
24
|
});
|
25
25
|
};
|
26
|
+
const ProgressBar = ({
|
27
|
+
loading
|
28
|
+
}) => {
|
29
|
+
return loading ? /*#__PURE__*/_jsx(Grid, {
|
30
|
+
item: true,
|
31
|
+
xs: 12,
|
32
|
+
style: {
|
33
|
+
display: "flex",
|
34
|
+
justifyContent: "center",
|
35
|
+
alignItems: "center",
|
36
|
+
margin: 0,
|
37
|
+
padding: 0,
|
38
|
+
height: "50px",
|
39
|
+
overflow: "hidden"
|
40
|
+
},
|
41
|
+
children: /*#__PURE__*/_jsx(CircularProgress, {})
|
42
|
+
}) : null;
|
43
|
+
};
|
26
44
|
const AddTemplates = props => {
|
27
45
|
const {
|
28
46
|
classes,
|
@@ -33,6 +51,7 @@ const AddTemplates = props => {
|
|
33
51
|
const {
|
34
52
|
services
|
35
53
|
} = customProps;
|
54
|
+
const [loading, setLoading] = useState(false);
|
36
55
|
const [categories, setCategories] = useState([]);
|
37
56
|
const [category, setCategory] = useState("");
|
38
57
|
const [templates, setTemplates] = useState([]);
|
@@ -41,6 +60,7 @@ const AddTemplates = props => {
|
|
41
60
|
getTemplatesList();
|
42
61
|
}, []);
|
43
62
|
const getTemplatesList = async () => {
|
63
|
+
setLoading(true);
|
44
64
|
const result = await services("listTemplates", {});
|
45
65
|
const tempList = result?.data?.filter(f => f.type === "Template");
|
46
66
|
const lic = tempList?.reduce((a, b) => {
|
@@ -54,6 +74,7 @@ const AddTemplates = props => {
|
|
54
74
|
setCategories(lic);
|
55
75
|
setCategory(lic[0]);
|
56
76
|
setFilteredTemplates(ft);
|
77
|
+
setLoading(false);
|
57
78
|
};
|
58
79
|
const handleChange = (event, newValue) => {
|
59
80
|
setCategory(newValue);
|
@@ -79,27 +100,31 @@ const AddTemplates = props => {
|
|
79
100
|
data: categories,
|
80
101
|
handleChange: handleChange
|
81
102
|
})
|
82
|
-
}), /*#__PURE__*/
|
103
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
83
104
|
container: true,
|
84
|
-
spacing:
|
105
|
+
spacing: 0,
|
85
106
|
className: `${fullScreen ? "fullscreen" : ""}`,
|
86
107
|
sx: classes.templateCardsWrpr,
|
87
|
-
children:
|
108
|
+
children: [/*#__PURE__*/_jsx(ProgressBar, {
|
109
|
+
loading: loading
|
110
|
+
}), filteredTemplates.map(m => {
|
88
111
|
return /*#__PURE__*/_jsx(Grid, {
|
89
112
|
item: true,
|
90
113
|
xs: 4,
|
91
114
|
children: /*#__PURE__*/_jsxs(Card, {
|
92
115
|
sx: classes.templateCard,
|
93
116
|
onClick: onSelectTemplate(m),
|
94
|
-
children: [/*#__PURE__*/
|
117
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
95
118
|
sx: classes.templateCardMediaWrpr,
|
96
|
-
children: /*#__PURE__*/_jsx(
|
119
|
+
children: [/*#__PURE__*/_jsx("div", {
|
120
|
+
className: "img-loader-wrapper"
|
121
|
+
}), /*#__PURE__*/_jsx(CardMedia, {
|
97
122
|
className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
|
98
123
|
component: "div",
|
99
124
|
image: m?.thumbnail,
|
100
125
|
alt: m?.title,
|
101
126
|
sx: classes.templateCardMedia
|
102
|
-
})
|
127
|
+
})]
|
103
128
|
}), /*#__PURE__*/_jsx(CardContent, {
|
104
129
|
style: {
|
105
130
|
height: "30px"
|
@@ -108,7 +133,7 @@ const AddTemplates = props => {
|
|
108
133
|
})]
|
109
134
|
})
|
110
135
|
}, `template_${m.id}`);
|
111
|
-
})
|
136
|
+
})]
|
112
137
|
})]
|
113
138
|
});
|
114
139
|
};
|
@@ -21,7 +21,8 @@ const usePopupStyle = () => ({
|
|
21
21
|
"&.templates": {
|
22
22
|
width: "500px",
|
23
23
|
"&.fullscreen": {
|
24
|
-
width: "100%"
|
24
|
+
width: "100%",
|
25
|
+
maxHeight: "fit-content"
|
25
26
|
}
|
26
27
|
},
|
27
28
|
"& .headerContainer": {},
|
@@ -130,18 +131,33 @@ const usePopupStyle = () => ({
|
|
130
131
|
backgroundSize: "100% auto",
|
131
132
|
borderRadius: "10px",
|
132
133
|
boxShadow: "0px 1px 3px 3px rgba(0,0,0,0.12)",
|
134
|
+
zIndex: 1,
|
135
|
+
position: "relative",
|
133
136
|
"&.fullscreen": {
|
134
137
|
height: "280px"
|
135
138
|
}
|
136
139
|
},
|
137
140
|
templateCardMediaWrpr: {
|
138
|
-
|
141
|
+
position: "relative",
|
142
|
+
padding: "4px",
|
143
|
+
margin: "8px",
|
139
144
|
border: "1px solid rgba(0, 0, 0, 0.1)",
|
140
145
|
borderRadius: "10px",
|
141
|
-
|
146
|
+
backgroundColor: "#FEFEFE",
|
142
147
|
overflow: "hidden",
|
143
148
|
"&:hover": {
|
144
149
|
border: "1px solid #2563EB"
|
150
|
+
},
|
151
|
+
"& .img-loader-wrapper": {
|
152
|
+
position: "absolute",
|
153
|
+
width: "12px",
|
154
|
+
height: "12px",
|
155
|
+
left: 0,
|
156
|
+
right: 0,
|
157
|
+
top: 0,
|
158
|
+
bottom: 0,
|
159
|
+
margin: "auto",
|
160
|
+
zIndex: 0
|
145
161
|
}
|
146
162
|
},
|
147
163
|
templateCardsWrpr: {
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia, MdOutlineFileUpload } from "react-icons/md";
|
3
3
|
import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
|
4
|
-
import { FaSuperscript, FaSubscript
|
4
|
+
import { FaSuperscript, FaSubscript } from "react-icons/fa";
|
5
5
|
import { FcAddRow, FcAddColumn } from "react-icons/fc";
|
6
6
|
import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
|
7
7
|
import { SiLatex } from "react-icons/si";
|
8
8
|
import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
|
9
|
-
import { IoIosImage, IoIosLink } from "react-icons/io";
|
9
|
+
import { IoIosImage, IoIosLink, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
|
10
10
|
import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon } from "./iconslist";
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
12
|
const iconList = {
|
@@ -175,6 +175,12 @@ const iconList = {
|
|
175
175
|
}),
|
176
176
|
media: /*#__PURE__*/_jsx(MdOutlinePermMedia, {
|
177
177
|
size: 20
|
178
|
+
}),
|
179
|
+
accordionArrow: /*#__PURE__*/_jsx(IoMdArrowDroprightCircle, {
|
180
|
+
size: 20
|
181
|
+
}),
|
182
|
+
accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
|
183
|
+
size: 20
|
178
184
|
})
|
179
185
|
};
|
180
186
|
const Icon = props => {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
|
-
import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle } from "@mui/material";
|
2
|
+
import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography } from "@mui/material";
|
3
3
|
import Upload from "./Options/Upload";
|
4
4
|
import ChooseAssets from "./Options/ChooseAssets";
|
5
5
|
import AddLink from "./Options/AddLink";
|
@@ -39,8 +39,16 @@ const ImageSelector = props => {
|
|
39
39
|
open: open,
|
40
40
|
onClose: onClose,
|
41
41
|
fullWidth: true,
|
42
|
-
|
43
|
-
|
42
|
+
sx: classes.dialogWrapper,
|
43
|
+
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
44
|
+
children: /*#__PURE__*/_jsxs(Typography, {
|
45
|
+
variant: "body1",
|
46
|
+
sx: {
|
47
|
+
fontSize: "16px",
|
48
|
+
fontWeight: 600
|
49
|
+
},
|
50
|
+
children: ["Add ", title]
|
51
|
+
})
|
44
52
|
}), /*#__PURE__*/_jsx(DialogContent, {
|
45
53
|
style: {
|
46
54
|
background: "#F0F5FA",
|
@@ -101,11 +109,23 @@ const ImageSelector = props => {
|
|
101
109
|
})]
|
102
110
|
})
|
103
111
|
}), /*#__PURE__*/_jsxs(DialogActions, {
|
112
|
+
sx: {
|
113
|
+
p: 2
|
114
|
+
},
|
104
115
|
children: [/*#__PURE__*/_jsx(Button, {
|
105
116
|
onClick: onClose,
|
117
|
+
variant: "outlined",
|
118
|
+
color: "secondary",
|
119
|
+
className: "secondaryBtn",
|
106
120
|
children: "Cancel"
|
107
121
|
}), /*#__PURE__*/_jsx(Button, {
|
108
122
|
onClick: onSave,
|
123
|
+
variant: "contained",
|
124
|
+
color: "primary",
|
125
|
+
className: " primaryBtn",
|
126
|
+
sx: {
|
127
|
+
ml: 0
|
128
|
+
},
|
109
129
|
children: "Save"
|
110
130
|
})]
|
111
131
|
})]
|
@@ -36,6 +36,32 @@ const ImageSelectorStyles = () => ({
|
|
36
36
|
"& .MuiFormHelperText-root": {
|
37
37
|
marginLeft: "0px"
|
38
38
|
}
|
39
|
+
},
|
40
|
+
dialogWrapper: {
|
41
|
+
"& .primaryBtn": {
|
42
|
+
background: "#2563eb !important",
|
43
|
+
boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
|
44
|
+
borderRadius: "8px !important",
|
45
|
+
height: "28px !important",
|
46
|
+
fontWeight: "600 !important",
|
47
|
+
fontSize: "12px !important",
|
48
|
+
color: "#ffffff !important",
|
49
|
+
border: "1px solid #2563eb !important",
|
50
|
+
width: "auto !important",
|
51
|
+
marginLeft: "0px !important"
|
52
|
+
},
|
53
|
+
"& .secondaryBtn": {
|
54
|
+
background: "#ffffff !important",
|
55
|
+
boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
|
56
|
+
borderRadius: "8px !important",
|
57
|
+
height: "28px !important",
|
58
|
+
fontWeight: "600 !important",
|
59
|
+
fontSize: "12px !important",
|
60
|
+
color: "#2563eb !important",
|
61
|
+
border: "1px solid #2563eb !important",
|
62
|
+
width: "auto !important",
|
63
|
+
marginRight: "8px !important"
|
64
|
+
}
|
39
65
|
}
|
40
66
|
});
|
41
67
|
export default ImageSelectorStyles;
|
@@ -1,25 +1,33 @@
|
|
1
1
|
import { Transforms } from "slate";
|
2
|
+
import insertNewLine from "./insertNewLine";
|
2
3
|
export const insertAccordion = editor => {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
type: "accordion-summary",
|
4
|
+
try {
|
5
|
+
const accordion = {
|
6
|
+
type: "accordion",
|
7
7
|
children: [{
|
8
|
-
type: "
|
8
|
+
type: "accordion-summary",
|
9
9
|
children: [{
|
10
|
-
|
10
|
+
type: "paragraph",
|
11
|
+
children: [{
|
12
|
+
text: ""
|
13
|
+
}]
|
11
14
|
}]
|
12
|
-
}
|
13
|
-
|
14
|
-
type: "accordion-details",
|
15
|
-
children: [{
|
16
|
-
type: "paragraph",
|
15
|
+
}, {
|
16
|
+
type: "accordion-details",
|
17
17
|
children: [{
|
18
|
-
|
18
|
+
type: "paragraph",
|
19
|
+
children: [{
|
20
|
+
text: ""
|
21
|
+
}]
|
19
22
|
}]
|
20
23
|
}]
|
21
|
-
}
|
22
|
-
|
23
|
-
|
24
|
-
|
24
|
+
};
|
25
|
+
Transforms.insertNodes(editor, accordion);
|
26
|
+
Transforms.move(editor, {
|
27
|
+
at: editor.selection.anchor.path
|
28
|
+
});
|
29
|
+
insertNewLine(editor);
|
30
|
+
} catch (err) {
|
31
|
+
console.log(err);
|
32
|
+
}
|
25
33
|
};
|