@flozy/editor 1.6.2 → 1.6.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +5 -3
- package/dist/Editor/Editor.css +6 -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/AddElements.js +3 -0
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +4 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +1 -0
- package/dist/Editor/common/Icon.js +12 -4
- package/dist/Editor/common/ImageSelector/ImageSelector.js +23 -3
- package/dist/Editor/common/ImageSelector/Styles.js +26 -0
- package/dist/Editor/common/MentionsPopup/ElementsListCard.js +2 -1
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +2 -1
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +0 -4
- package/dist/Editor/plugins/withLayout.js +4 -2
- package/dist/Editor/utils/accordion.js +4 -2
- package/package.json +1 -1
@@ -90,7 +90,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
90
90
|
footer,
|
91
91
|
needLayout = true,
|
92
92
|
CHARACTERS = [],
|
93
|
-
editorClass
|
93
|
+
editorClass,
|
94
|
+
fixedWidth = "60%",
|
95
|
+
fullWidth = "80%"
|
94
96
|
} = otherProps || {};
|
95
97
|
const [drag, setDrag] = useState(null);
|
96
98
|
const classes = editorStyles({
|
@@ -451,14 +453,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
451
453
|
className: "scroll-area",
|
452
454
|
children: /*#__PURE__*/_jsxs("div", {
|
453
455
|
ref: editorWrapper,
|
454
|
-
className: `editor-wrapper`,
|
456
|
+
className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
|
455
457
|
style: {
|
456
458
|
backgroundColor: pageColor || "#FFF",
|
457
459
|
paddingLeft: `${bannerSpacing?.left || 12}px`,
|
458
460
|
paddingRight: `${bannerSpacing?.right || 12}px`,
|
459
461
|
paddingTop: `${bannerSpacing?.top}px`,
|
460
462
|
paddingBottom: `${bannerSpacing?.bottom}px`,
|
461
|
-
width: !pageWidth || pageWidth === "fixed" ?
|
463
|
+
width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
|
462
464
|
// width: viewport.w ? `${viewport.w}px` : "100%",
|
463
465
|
height: viewport.h ? `${viewport.h}px` : `100%`,
|
464
466
|
alignSelf: "center",
|
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 {
|
@@ -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,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 = {
|
@@ -135,7 +135,8 @@ const iconList = {
|
|
135
135
|
size: 20
|
136
136
|
}),
|
137
137
|
emoji: /*#__PURE__*/_jsx(MdEmojiEmotions, {
|
138
|
-
size: 20
|
138
|
+
size: 20,
|
139
|
+
fill: "#64748B"
|
139
140
|
}),
|
140
141
|
grid: /*#__PURE__*/_jsx(GridIcon, {}),
|
141
142
|
accordion: /*#__PURE__*/_jsx(AccordionIcon, {}),
|
@@ -166,13 +167,20 @@ const iconList = {
|
|
166
167
|
}),
|
167
168
|
embed: /*#__PURE__*/_jsx(LinkIcon, {}),
|
168
169
|
topbanner: /*#__PURE__*/_jsx(IoIosImage, {
|
169
|
-
size: 20
|
170
|
+
size: 20,
|
171
|
+
fill: "#64748B"
|
170
172
|
}),
|
171
173
|
fileUpload: /*#__PURE__*/_jsx(MdOutlineFileUpload, {
|
172
174
|
size: 20
|
173
175
|
}),
|
174
176
|
media: /*#__PURE__*/_jsx(MdOutlinePermMedia, {
|
175
177
|
size: 20
|
178
|
+
}),
|
179
|
+
accordionArrow: /*#__PURE__*/_jsx(IoMdArrowDroprightCircle, {
|
180
|
+
size: 20
|
181
|
+
}),
|
182
|
+
accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
|
183
|
+
size: 20
|
176
184
|
})
|
177
185
|
};
|
178
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;
|
@@ -28,6 +28,7 @@ const withLayout = editor => {
|
|
28
28
|
at: path.concat(1)
|
29
29
|
});
|
30
30
|
}
|
31
|
+
let prevType = "";
|
31
32
|
for (const [child, childPath] of Node.children(editor, path)) {
|
32
33
|
let type = "";
|
33
34
|
const slateIndex = childPath[0];
|
@@ -43,11 +44,12 @@ const withLayout = editor => {
|
|
43
44
|
};
|
44
45
|
switch (slateIndex) {
|
45
46
|
case 0:
|
46
|
-
type = "title";
|
47
|
+
type = child.type === "topbanner" ? "topbanner" : "title";
|
48
|
+
prevType = type;
|
47
49
|
enforceType(type);
|
48
50
|
break;
|
49
51
|
case 1:
|
50
|
-
type = "paragraph";
|
52
|
+
type = prevType === "topbanner" ? "title" : "paragraph";
|
51
53
|
enforceType(type);
|
52
54
|
break;
|
53
55
|
default:
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { Transforms } from "slate";
|
2
|
+
import insertNewLine from "./insertNewLine";
|
2
3
|
export const insertAccordion = editor => {
|
3
4
|
const accordion = {
|
4
5
|
type: "accordion",
|
@@ -7,7 +8,7 @@ export const insertAccordion = editor => {
|
|
7
8
|
children: [{
|
8
9
|
type: "paragraph",
|
9
10
|
children: [{
|
10
|
-
text: "
|
11
|
+
text: ""
|
11
12
|
}]
|
12
13
|
}]
|
13
14
|
}, {
|
@@ -15,11 +16,12 @@ export const insertAccordion = editor => {
|
|
15
16
|
children: [{
|
16
17
|
type: "paragraph",
|
17
18
|
children: [{
|
18
|
-
text: "
|
19
|
+
text: ""
|
19
20
|
}]
|
20
21
|
}]
|
21
22
|
}]
|
22
23
|
};
|
23
24
|
Transforms.insertNodes(editor, accordion);
|
24
25
|
Transforms.move(editor);
|
26
|
+
insertNewLine(editor);
|
25
27
|
};
|