@flozy/editor 1.5.9 → 1.6.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +195 -94
- package/dist/Editor/DialogWrapper.js +3 -0
- package/dist/Editor/Editor.css +211 -50
- package/dist/Editor/Elements/Accordion/Accordion.js +0 -1
- package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +0 -1
- package/dist/Editor/Elements/AppHeader/AppHeader.js +136 -133
- package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -2
- package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
- package/dist/Editor/Elements/Button/EditorButton.js +8 -24
- package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
- package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +49 -58
- package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
- package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
- package/dist/Editor/Elements/Embed/Embed.js +35 -126
- package/dist/Editor/Elements/Embed/Image.js +24 -7
- package/dist/Editor/Elements/Embed/Video.js +21 -6
- package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
- package/dist/Editor/Elements/Form/Form.js +24 -13
- package/dist/Editor/Elements/Form/FormButton.js +11 -9
- package/dist/Editor/Elements/Form/FormElements/FormText.js +4 -2
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
- package/dist/Editor/Elements/Form/FormField.js +7 -1
- package/dist/Editor/Elements/Grid/Grid.js +143 -47
- package/dist/Editor/Elements/Grid/GridButton.js +52 -29
- package/dist/Editor/Elements/Grid/GridItem.js +32 -21
- package/dist/Editor/Elements/Grid/Styles.js +11 -0
- package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
- package/dist/Editor/Elements/List/CheckList.js +57 -0
- package/dist/Editor/Elements/List/CheckListButton.js +24 -0
- package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
- package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -62
- package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
- package/dist/Editor/Elements/Signature/Signature.js +9 -3
- package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
- package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
- package/dist/Editor/Elements/SimpleText.js +62 -0
- package/dist/Editor/Elements/Table/Styles.js +66 -0
- package/dist/Editor/Elements/Table/Table.js +33 -16
- package/dist/Editor/Elements/Table/TableCell.js +54 -24
- package/dist/Editor/Elements/Table/TableSelector.js +13 -15
- package/dist/Editor/Elements/Table/table.css +0 -10
- package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
- package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
- package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
- package/dist/Editor/Styles/EditorStyles.js +50 -0
- package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
- package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
- package/dist/Editor/Toolbar/FormatTools/index.js +4 -1
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
- package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
- package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
- package/dist/Editor/Toolbar/PopupTool/index.js +50 -85
- package/dist/Editor/Toolbar/Toolbar.js +189 -129
- package/dist/Editor/Toolbar/styles.css +136 -18
- package/dist/Editor/Toolbar/toolbarGroups.js +94 -34
- package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
- package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
- package/dist/Editor/assets/svg/TextIcon.js +29 -0
- package/dist/Editor/common/Icon.js +54 -5
- package/dist/Editor/common/ImageList.js +75 -0
- package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
- package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
- package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
- package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
- package/dist/Editor/common/ImageSelector/Styles.js +41 -0
- package/dist/Editor/common/ImageUploader.js +94 -0
- package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
- package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
- package/dist/Editor/common/MentionsPopup/index.js +129 -0
- package/dist/Editor/common/Shorthands/elements.js +191 -0
- package/dist/Editor/common/Shorthands/index.js +7 -0
- package/dist/Editor/common/Shorthands/mentions.js +8 -0
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -1
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +15 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +23 -35
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
- package/dist/Editor/common/StyleBuilder/index.js +0 -1
- package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
- package/dist/Editor/common/ToolbarIcon.js +43 -0
- package/dist/Editor/common/Uploader.js +35 -61
- package/dist/Editor/common/iconslist.js +46 -1
- package/dist/Editor/helper/index.js +0 -1
- package/dist/Editor/hooks/useDrag.js +2 -2
- package/dist/Editor/hooks/useMentions.js +104 -17
- package/dist/Editor/hooks/useMouseMove.js +53 -0
- package/dist/Editor/hooks/useScroll.js +26 -0
- package/dist/Editor/plugins/withEmbeds.js +12 -0
- package/dist/Editor/service/fileupload.js +2 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +61 -9
- package/dist/Editor/utils/button.js +2 -1
- package/dist/Editor/utils/carousel.js +5 -2
- package/dist/Editor/utils/carouselItem.js +2 -2
- package/dist/Editor/utils/customHooks/useResize.js +2 -3
- package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
- package/dist/Editor/utils/embed.js +25 -8
- package/dist/Editor/utils/emoji.js +8 -0
- package/dist/Editor/utils/events.js +49 -12
- package/dist/Editor/utils/form.js +3 -9
- package/dist/Editor/utils/formfield.js +2 -1
- package/dist/Editor/utils/grid.js +44 -8
- package/dist/Editor/utils/gridItem.js +4 -3
- package/dist/Editor/utils/insertNewLine.js +12 -0
- package/dist/Editor/utils/mentions.js +14 -10
- package/dist/Editor/utils/pageSettings.js +67 -0
- package/dist/Editor/utils/signature.js +6 -8
- package/dist/Editor/utils/table.js +79 -18
- package/dist/Editor/utils/topBanner.js +58 -0
- package/package.json +6 -2
- package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -0,0 +1,41 @@
|
|
1
|
+
const ImageSelectorStyles = () => ({
|
2
|
+
root: {},
|
3
|
+
tabs: {
|
4
|
+
"& button": {
|
5
|
+
fontSize: "14px",
|
6
|
+
textTransform: "capitalize",
|
7
|
+
padding: "12px",
|
8
|
+
alignItems: "start",
|
9
|
+
justifyContent: "start",
|
10
|
+
minHeight: "auto",
|
11
|
+
"&.hidden": {
|
12
|
+
display: "none"
|
13
|
+
},
|
14
|
+
"&.active": {
|
15
|
+
backgroundColor: "#FFF"
|
16
|
+
},
|
17
|
+
"&:hover": {
|
18
|
+
backgroundColor: "#ECECEC"
|
19
|
+
},
|
20
|
+
"& svg": {
|
21
|
+
marginRight: "8px",
|
22
|
+
width: "16px",
|
23
|
+
height: "16px"
|
24
|
+
}
|
25
|
+
},
|
26
|
+
"& .MuiTabs-indicator": {
|
27
|
+
left: 0
|
28
|
+
}
|
29
|
+
},
|
30
|
+
tab: {},
|
31
|
+
imsRightWrpr: {
|
32
|
+
height: "300px",
|
33
|
+
overflow: "auto",
|
34
|
+
backgroundColor: "#fff",
|
35
|
+
padding: "8px",
|
36
|
+
"& .MuiFormHelperText-root": {
|
37
|
+
marginLeft: "0px"
|
38
|
+
}
|
39
|
+
}
|
40
|
+
});
|
41
|
+
export default ImageSelectorStyles;
|
@@ -0,0 +1,94 @@
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import { Grid } from "@mui/material";
|
3
|
+
import Uploader from "./Uploader";
|
4
|
+
import StandardImageList from "./ImageList";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
const ImageUploader = props => {
|
8
|
+
const {
|
9
|
+
value,
|
10
|
+
onUploaded,
|
11
|
+
customProps,
|
12
|
+
disableUpload = false
|
13
|
+
} = props;
|
14
|
+
const {
|
15
|
+
readOnly,
|
16
|
+
services
|
17
|
+
} = customProps;
|
18
|
+
const [newData, setNewData] = useState([]);
|
19
|
+
const [selected, setSelected] = useState([]);
|
20
|
+
const [items, setItems] = useState([]);
|
21
|
+
useEffect(() => {
|
22
|
+
getItems();
|
23
|
+
}, []);
|
24
|
+
const getItems = async () => {
|
25
|
+
if (services) {
|
26
|
+
const result = await services("getAssets", {});
|
27
|
+
setItems(result);
|
28
|
+
}
|
29
|
+
};
|
30
|
+
const onDone = img => {
|
31
|
+
const imgs = Array.isArray(img) ? img.map(m => {
|
32
|
+
return {
|
33
|
+
img: m
|
34
|
+
};
|
35
|
+
}) : [{
|
36
|
+
img: img.url
|
37
|
+
}];
|
38
|
+
setNewData([...imgs, ...newData]);
|
39
|
+
};
|
40
|
+
const onSelectChange = (img, status) => {
|
41
|
+
const updatedSelected = !status ? [...selected]?.filter(f => f.img !== img) : [...selected, {
|
42
|
+
img
|
43
|
+
}];
|
44
|
+
setSelected(updatedSelected);
|
45
|
+
onUploaded({
|
46
|
+
images: updatedSelected,
|
47
|
+
url: updatedSelected[0]?.img,
|
48
|
+
alt: ""
|
49
|
+
});
|
50
|
+
};
|
51
|
+
const UploaderComp = () => {
|
52
|
+
return /*#__PURE__*/_jsx(Uploader, {
|
53
|
+
value: value,
|
54
|
+
data: {
|
55
|
+
key: "url"
|
56
|
+
},
|
57
|
+
customProps: customProps,
|
58
|
+
onUploaded: onDone,
|
59
|
+
disableUpload: disableUpload
|
60
|
+
});
|
61
|
+
};
|
62
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
63
|
+
container: true,
|
64
|
+
sx: {
|
65
|
+
pt: 1
|
66
|
+
},
|
67
|
+
spacing: 1,
|
68
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
69
|
+
item: true,
|
70
|
+
xs: 3,
|
71
|
+
children: /*#__PURE__*/_jsx(UploaderComp, {})
|
72
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
73
|
+
item: true,
|
74
|
+
xs: 9,
|
75
|
+
children: /*#__PURE__*/_jsx("div", {
|
76
|
+
style: {
|
77
|
+
height: "400px",
|
78
|
+
overflow: "auto",
|
79
|
+
display: "flex",
|
80
|
+
justifyContent: "center"
|
81
|
+
},
|
82
|
+
children: /*#__PURE__*/_jsx(StandardImageList
|
83
|
+
// uploaderComp={UploaderComp}
|
84
|
+
, {
|
85
|
+
itemData: [...newData, ...items],
|
86
|
+
selected: selected,
|
87
|
+
onSelectChange: onSelectChange,
|
88
|
+
readOnly: readOnly
|
89
|
+
})
|
90
|
+
})
|
91
|
+
})]
|
92
|
+
});
|
93
|
+
};
|
94
|
+
export default ImageUploader;
|
@@ -0,0 +1,66 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import Box from "@mui/material/Box";
|
3
|
+
import Card from "@mui/material/Card";
|
4
|
+
import CardContent from "@mui/material/CardContent";
|
5
|
+
import CardMedia from "@mui/material/CardMedia";
|
6
|
+
import Typography from "@mui/material/Typography";
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
10
|
+
const ElementListCard = props => {
|
11
|
+
const {
|
12
|
+
classes,
|
13
|
+
data
|
14
|
+
} = props;
|
15
|
+
const {
|
16
|
+
name,
|
17
|
+
desc,
|
18
|
+
icon
|
19
|
+
} = data;
|
20
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
21
|
+
children: /*#__PURE__*/_jsxs(Card, {
|
22
|
+
sx: {
|
23
|
+
display: "flex",
|
24
|
+
width: "324px",
|
25
|
+
justifyContent: "start",
|
26
|
+
alignItems: "center",
|
27
|
+
background: "transparent",
|
28
|
+
boxShadow: "none"
|
29
|
+
},
|
30
|
+
children: [/*#__PURE__*/_jsx(CardMedia, {
|
31
|
+
component: "div",
|
32
|
+
sx: classes.cardMedia,
|
33
|
+
alt: name,
|
34
|
+
children: icon
|
35
|
+
}), /*#__PURE__*/_jsx(Box, {
|
36
|
+
sx: {
|
37
|
+
display: "flex",
|
38
|
+
flexDirection: "column"
|
39
|
+
},
|
40
|
+
children: /*#__PURE__*/_jsxs(CardContent, {
|
41
|
+
sx: {
|
42
|
+
flex: "1 0 auto",
|
43
|
+
padding: "8px !important"
|
44
|
+
},
|
45
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
46
|
+
component: "div",
|
47
|
+
variant: "h6",
|
48
|
+
style: {
|
49
|
+
fontSize: "14px"
|
50
|
+
},
|
51
|
+
children: name
|
52
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
53
|
+
variant: "subtitle1",
|
54
|
+
color: "text.secondary",
|
55
|
+
component: "div",
|
56
|
+
style: {
|
57
|
+
fontSize: "12px"
|
58
|
+
},
|
59
|
+
children: desc
|
60
|
+
})]
|
61
|
+
})
|
62
|
+
})]
|
63
|
+
})
|
64
|
+
});
|
65
|
+
};
|
66
|
+
export default ElementListCard;
|
@@ -0,0 +1,70 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import Box from "@mui/material/Box";
|
3
|
+
import Card from "@mui/material/Card";
|
4
|
+
import CardContent from "@mui/material/CardContent";
|
5
|
+
import CardMedia from "@mui/material/CardMedia";
|
6
|
+
import Typography from "@mui/material/Typography";
|
7
|
+
import { Avatar } from "@mui/material";
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
|
+
const MentionsListCard = props => {
|
11
|
+
const {
|
12
|
+
data
|
13
|
+
} = props;
|
14
|
+
const {
|
15
|
+
name,
|
16
|
+
email
|
17
|
+
} = data;
|
18
|
+
return /*#__PURE__*/_jsxs(Card, {
|
19
|
+
sx: {
|
20
|
+
display: "flex",
|
21
|
+
width: "324px",
|
22
|
+
justifyContent: "start",
|
23
|
+
alignItems: "center",
|
24
|
+
background: "transparent",
|
25
|
+
boxShadow: "none"
|
26
|
+
},
|
27
|
+
children: [/*#__PURE__*/_jsx(CardMedia, {
|
28
|
+
component: "div",
|
29
|
+
sx: {
|
30
|
+
width: 46,
|
31
|
+
height: 46,
|
32
|
+
margin: "8px",
|
33
|
+
borderRadius: "4px",
|
34
|
+
display: "flex",
|
35
|
+
justifyContent: "center",
|
36
|
+
alignItems: "center"
|
37
|
+
},
|
38
|
+
alt: name,
|
39
|
+
children: /*#__PURE__*/_jsx(Avatar, {})
|
40
|
+
}), /*#__PURE__*/_jsx(Box, {
|
41
|
+
sx: {
|
42
|
+
display: "flex",
|
43
|
+
flexDirection: "column"
|
44
|
+
},
|
45
|
+
children: /*#__PURE__*/_jsxs(CardContent, {
|
46
|
+
sx: {
|
47
|
+
flex: "1 0 auto",
|
48
|
+
padding: "8px !important"
|
49
|
+
},
|
50
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
51
|
+
component: "div",
|
52
|
+
variant: "h6",
|
53
|
+
style: {
|
54
|
+
fontSize: "14px"
|
55
|
+
},
|
56
|
+
children: name
|
57
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
58
|
+
variant: "subtitle1",
|
59
|
+
color: "text.secondary",
|
60
|
+
component: "div",
|
61
|
+
style: {
|
62
|
+
fontSize: "12px"
|
63
|
+
},
|
64
|
+
children: email
|
65
|
+
})]
|
66
|
+
})
|
67
|
+
})]
|
68
|
+
});
|
69
|
+
};
|
70
|
+
export default MentionsListCard;
|
@@ -0,0 +1,68 @@
|
|
1
|
+
const usePopupStyles = () => ({
|
2
|
+
root: {
|
3
|
+
position: "absolute",
|
4
|
+
zIndex: 1000,
|
5
|
+
background: "white",
|
6
|
+
borderRadius: "0px",
|
7
|
+
padding: "0px",
|
8
|
+
boxShadow: "0 4px 10px rgba(0,0,0,.2)"
|
9
|
+
},
|
10
|
+
papper: {
|
11
|
+
boxShadow: "none",
|
12
|
+
width: "300px",
|
13
|
+
height: "300px",
|
14
|
+
overflow: "auto",
|
15
|
+
padding: "8px",
|
16
|
+
margin: "0px"
|
17
|
+
},
|
18
|
+
groupHeader: {
|
19
|
+
padding: "10px 8px",
|
20
|
+
marginBottom: "10px",
|
21
|
+
fontSize: "14px",
|
22
|
+
fontWeight: "bold",
|
23
|
+
borderBottom: "1px solid #DCE4EC"
|
24
|
+
},
|
25
|
+
listItem: {
|
26
|
+
padding: "4px",
|
27
|
+
cursor: "pointer",
|
28
|
+
background: "transparent",
|
29
|
+
"&.active": {
|
30
|
+
background: "rgba(55, 53, 47, 0.08)"
|
31
|
+
},
|
32
|
+
"&:hover": {
|
33
|
+
background: "rgba(55, 53, 47, 0.08)"
|
34
|
+
},
|
35
|
+
"&.renderComp": {
|
36
|
+
padding: "0px",
|
37
|
+
"& button.cmd": {
|
38
|
+
// to invalidate click event of toolbar icon
|
39
|
+
// will trigger by forard ref
|
40
|
+
pointerEvents: "none",
|
41
|
+
width: "100%",
|
42
|
+
padding: "4px",
|
43
|
+
borderRadius: "0px",
|
44
|
+
justifyContent: "start",
|
45
|
+
"& svg": {
|
46
|
+
margin: "8px",
|
47
|
+
width: "24px",
|
48
|
+
height: "24px"
|
49
|
+
},
|
50
|
+
span: {
|
51
|
+
padding: "8px",
|
52
|
+
fontSize: "14px",
|
53
|
+
fontWeight: "500",
|
54
|
+
color: "rgba(0, 0, 0, 0.87)"
|
55
|
+
}
|
56
|
+
}
|
57
|
+
}
|
58
|
+
},
|
59
|
+
cardMedia: {
|
60
|
+
width: 24,
|
61
|
+
height: 24,
|
62
|
+
margin: "8px",
|
63
|
+
display: "flex",
|
64
|
+
justifyContent: "center",
|
65
|
+
alignItems: "center"
|
66
|
+
}
|
67
|
+
});
|
68
|
+
export default usePopupStyles;
|
@@ -0,0 +1,129 @@
|
|
1
|
+
import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "react";
|
2
|
+
import { Transforms } from "slate";
|
3
|
+
import { ReactEditor, useSlateStatic } from "slate-react";
|
4
|
+
import { insertMention } from "../../utils/mentions";
|
5
|
+
import ElementListCard from "./ElementsListCard";
|
6
|
+
import MentionsListCard from "./MentionsListCard";
|
7
|
+
import { Typography, Popper, Box, Paper } from "@mui/material";
|
8
|
+
import usePopupStyle from "./Styles";
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
|
+
const POPUP_LIST_TYPES = {
|
12
|
+
mentions: MentionsListCard,
|
13
|
+
elements: ElementListCard
|
14
|
+
};
|
15
|
+
const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
|
16
|
+
const classes = usePopupStyle();
|
17
|
+
const papperRef = useRef(null);
|
18
|
+
const buttonRef = useRef(null);
|
19
|
+
const editor = useSlateStatic();
|
20
|
+
const {
|
21
|
+
index,
|
22
|
+
target,
|
23
|
+
chars,
|
24
|
+
mentions,
|
25
|
+
setMentions,
|
26
|
+
type
|
27
|
+
} = props;
|
28
|
+
const ListElement = POPUP_LIST_TYPES[type] || null;
|
29
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
30
|
+
let open = Boolean(anchorEl);
|
31
|
+
let prevGroup = "";
|
32
|
+
useEffect(() => {
|
33
|
+
if (target && chars.length > 0) {
|
34
|
+
const domRange = ReactEditor.toDOMRange(editor, target);
|
35
|
+
const rect = domRange.getBoundingClientRect();
|
36
|
+
setAnchorEl({
|
37
|
+
clientWidth: rect.width,
|
38
|
+
clientHeight: rect.height,
|
39
|
+
getBoundingClientRect: () => rect
|
40
|
+
});
|
41
|
+
}
|
42
|
+
}, [chars.length, editor, index, target]);
|
43
|
+
useEffect(() => {
|
44
|
+
if (papperRef && papperRef?.current) {
|
45
|
+
papperRef.current.scrollIntoView(false, {
|
46
|
+
block: "center"
|
47
|
+
});
|
48
|
+
}
|
49
|
+
}, [index]);
|
50
|
+
useImperativeHandle(ref, () => ({
|
51
|
+
handleOnSelect: char => {
|
52
|
+
handleInsertMention(char);
|
53
|
+
}
|
54
|
+
}));
|
55
|
+
const renderGroupHeader = char => {
|
56
|
+
if (prevGroup !== char.group && char.group) {
|
57
|
+
prevGroup = char.group;
|
58
|
+
return /*#__PURE__*/_jsx(Typography, {
|
59
|
+
sx: classes.groupHeader,
|
60
|
+
component: "div",
|
61
|
+
variant: "h6",
|
62
|
+
children: prevGroup
|
63
|
+
});
|
64
|
+
} else {
|
65
|
+
return null;
|
66
|
+
}
|
67
|
+
};
|
68
|
+
const renderList = (char, i) => {
|
69
|
+
return /*#__PURE__*/_jsxs(Box, {
|
70
|
+
component: "div",
|
71
|
+
sx: classes.renderComp,
|
72
|
+
children: [renderGroupHeader(char), /*#__PURE__*/_jsx(Box, {
|
73
|
+
id: `cmd-li-ind-${index}}`,
|
74
|
+
component: "div",
|
75
|
+
onClick: handleClick(char, i),
|
76
|
+
className: `${i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
|
77
|
+
sx: classes.listItem,
|
78
|
+
ref: i === index ? papperRef : null,
|
79
|
+
children: char.renderComponent ? char.renderComponent({
|
80
|
+
ref: index === i ? buttonRef : null,
|
81
|
+
selectionTarget: target
|
82
|
+
}) : ListElement ? /*#__PURE__*/_jsx(ListElement, {
|
83
|
+
classes: classes,
|
84
|
+
data: char,
|
85
|
+
header: prevGroup
|
86
|
+
}) : char.name
|
87
|
+
})]
|
88
|
+
}, `${char.name}_${i}`);
|
89
|
+
};
|
90
|
+
const handleClick = (char, i) => e => {
|
91
|
+
setMentions({
|
92
|
+
...mentions,
|
93
|
+
index: i
|
94
|
+
});
|
95
|
+
// TBD
|
96
|
+
setTimeout(() => {
|
97
|
+
handleInsertMention(char, e);
|
98
|
+
}, 0);
|
99
|
+
};
|
100
|
+
const handleInsertMention = (char, e) => {
|
101
|
+
if (!char.renderComponent) {
|
102
|
+
Transforms.select(editor, target);
|
103
|
+
insertMention(editor, char, type);
|
104
|
+
setMentions({
|
105
|
+
...mentions,
|
106
|
+
target: null
|
107
|
+
});
|
108
|
+
} else if (buttonRef && buttonRef?.current) {
|
109
|
+
if (e) {
|
110
|
+
e.preventDefault();
|
111
|
+
}
|
112
|
+
// trigger click of the ToolbarIcon button
|
113
|
+
buttonRef?.current?.triggerClick(target);
|
114
|
+
}
|
115
|
+
};
|
116
|
+
return target && chars.length > 0 ? /*#__PURE__*/_jsx(Popper, {
|
117
|
+
open: open,
|
118
|
+
anchorEl: anchorEl,
|
119
|
+
disablePortal: false,
|
120
|
+
sx: classes.root,
|
121
|
+
placement: "bottom-start",
|
122
|
+
children: /*#__PURE__*/_jsx(Paper, {
|
123
|
+
sx: classes.papper,
|
124
|
+
children: chars.map(renderList)
|
125
|
+
})
|
126
|
+
}) : null;
|
127
|
+
});
|
128
|
+
MentionsPopup.displayName = "MentionsPopup";
|
129
|
+
export default MentionsPopup;
|
@@ -0,0 +1,191 @@
|
|
1
|
+
import { insertAccordion } from "../../utils/accordion";
|
2
|
+
import { insertButton } from "../../utils/button";
|
3
|
+
import { insertCarousel } from "../../utils/carousel";
|
4
|
+
import { insertDefaultEmbed } from "../../utils/embed";
|
5
|
+
import { insertForm } from "../../utils/form";
|
6
|
+
import { insertGrid } from "../../utils/grid";
|
7
|
+
import { insertSignature } from "../../utils/signature";
|
8
|
+
import { toggleBlock } from "../../utils/SlateUtilityFunctions";
|
9
|
+
import { TableUtil } from "../../utils/table";
|
10
|
+
import Icon from "../Icon";
|
11
|
+
import EmojiButton from "../../Elements/Emoji/EmojiButton";
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
13
|
+
const ELEMENTS_LIST = [{
|
14
|
+
name: "Heading 1",
|
15
|
+
desc: "",
|
16
|
+
group: "Text",
|
17
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
18
|
+
icon: "headingOne"
|
19
|
+
}),
|
20
|
+
onInsert: editor => toggleBlock(editor, "headingOne", false)
|
21
|
+
}, {
|
22
|
+
name: "Heading 2",
|
23
|
+
desc: "",
|
24
|
+
group: "Text",
|
25
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
26
|
+
icon: "headingTwo"
|
27
|
+
}),
|
28
|
+
onInsert: editor => toggleBlock(editor, "headingTwo", false)
|
29
|
+
}, {
|
30
|
+
name: "Heading 3",
|
31
|
+
desc: "",
|
32
|
+
group: "Text",
|
33
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
34
|
+
icon: "headingThree"
|
35
|
+
}),
|
36
|
+
onInsert: editor => toggleBlock(editor, "headingThree", false)
|
37
|
+
}, {
|
38
|
+
name: "Quote",
|
39
|
+
desc: "",
|
40
|
+
group: "Text",
|
41
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
42
|
+
icon: "blockquote"
|
43
|
+
}),
|
44
|
+
onInsert: editor => toggleBlock(editor, "blockquote", false, {
|
45
|
+
color: "rgb(47, 94, 188)"
|
46
|
+
})
|
47
|
+
}, {
|
48
|
+
name: "Colorbox",
|
49
|
+
desc: "",
|
50
|
+
group: "Text",
|
51
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
52
|
+
icon: "blockquote"
|
53
|
+
}),
|
54
|
+
onInsert: editor => toggleBlock(editor, "blockquote", false, {
|
55
|
+
bgColor: "rgb(227, 236, 255)"
|
56
|
+
})
|
57
|
+
}, {
|
58
|
+
name: "Ordered List",
|
59
|
+
desc: "",
|
60
|
+
group: "List",
|
61
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
62
|
+
icon: "orderedList"
|
63
|
+
}),
|
64
|
+
onInsert: editor => toggleBlock(editor, "orderedList", false)
|
65
|
+
}, {
|
66
|
+
name: "Un-Ordered List",
|
67
|
+
desc: "",
|
68
|
+
group: "List",
|
69
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
70
|
+
icon: "unorderedList"
|
71
|
+
}),
|
72
|
+
onInsert: editor => toggleBlock(editor, "unorderedList", false)
|
73
|
+
}, {
|
74
|
+
name: "Check List",
|
75
|
+
desc: "",
|
76
|
+
group: "List",
|
77
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
78
|
+
icon: "checkList"
|
79
|
+
}),
|
80
|
+
onInsert: editor => toggleBlock(editor, "checkList", false)
|
81
|
+
}, {
|
82
|
+
name: "Image",
|
83
|
+
desc: "",
|
84
|
+
group: "Media",
|
85
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
86
|
+
icon: "image"
|
87
|
+
}),
|
88
|
+
onInsert: editor => insertDefaultEmbed(editor, "image")
|
89
|
+
}, {
|
90
|
+
name: "Video",
|
91
|
+
desc: "",
|
92
|
+
group: "Media",
|
93
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
94
|
+
icon: "video"
|
95
|
+
}),
|
96
|
+
onInsert: editor => insertDefaultEmbed(editor, "video")
|
97
|
+
}, {
|
98
|
+
name: "Embed",
|
99
|
+
desc: "",
|
100
|
+
group: "Media",
|
101
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
102
|
+
icon: "embed"
|
103
|
+
}),
|
104
|
+
onInsert: editor => insertDefaultEmbed(editor, "video", "https://calendly.com/agenciflow/1-1-agency-scale-clone?hide_event_type_details=1&month=2024-03")
|
105
|
+
}, {
|
106
|
+
name: "Emoji",
|
107
|
+
group: "Elements",
|
108
|
+
desc: "",
|
109
|
+
renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
|
110
|
+
...rest,
|
111
|
+
icoBtnType: "cmd"
|
112
|
+
})
|
113
|
+
}, {
|
114
|
+
name: "Table",
|
115
|
+
group: "Elements",
|
116
|
+
desc: "",
|
117
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
118
|
+
icon: "table"
|
119
|
+
}),
|
120
|
+
onInsert: editor => {
|
121
|
+
const table = new TableUtil(editor);
|
122
|
+
table.insertTable(3, 3);
|
123
|
+
}
|
124
|
+
}, {
|
125
|
+
name: "Grid",
|
126
|
+
group: "Elements",
|
127
|
+
desc: "",
|
128
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
129
|
+
icon: "grid"
|
130
|
+
}),
|
131
|
+
onInsert: editor => {
|
132
|
+
insertGrid(editor);
|
133
|
+
}
|
134
|
+
}, {
|
135
|
+
name: "Accordion",
|
136
|
+
group: "Elements",
|
137
|
+
desc: "",
|
138
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
139
|
+
icon: "accordion"
|
140
|
+
}),
|
141
|
+
onInsert: editor => {
|
142
|
+
insertAccordion(editor);
|
143
|
+
}
|
144
|
+
}, {
|
145
|
+
name: "Button",
|
146
|
+
group: "Elements",
|
147
|
+
desc: "",
|
148
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
149
|
+
icon: "button"
|
150
|
+
}),
|
151
|
+
onInsert: editor => {
|
152
|
+
insertButton(editor);
|
153
|
+
}
|
154
|
+
}, {
|
155
|
+
name: "Signature",
|
156
|
+
group: "Elements",
|
157
|
+
desc: "",
|
158
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
159
|
+
icon: "signature"
|
160
|
+
}),
|
161
|
+
onInsert: editor => {
|
162
|
+
insertSignature(editor);
|
163
|
+
}
|
164
|
+
}, {
|
165
|
+
name: "Carousel",
|
166
|
+
group: "Elements",
|
167
|
+
desc: "",
|
168
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
169
|
+
icon: "carousel"
|
170
|
+
}),
|
171
|
+
onInsert: editor => {
|
172
|
+
insertCarousel(editor);
|
173
|
+
}
|
174
|
+
}, {
|
175
|
+
name: "Form",
|
176
|
+
group: "Elements",
|
177
|
+
desc: "",
|
178
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
179
|
+
icon: "form"
|
180
|
+
}),
|
181
|
+
onInsert: editor => {
|
182
|
+
insertForm(editor);
|
183
|
+
}
|
184
|
+
}];
|
185
|
+
const elements = props => {
|
186
|
+
const {
|
187
|
+
search
|
188
|
+
} = props;
|
189
|
+
return ELEMENTS_LIST.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
|
190
|
+
};
|
191
|
+
export default elements;
|