@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,47 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import ToolbarIcon from "../../common/ToolbarIcon";
|
3
|
+
import Icon from "../../common/Icon";
|
4
|
+
import { insertTopBanner } from "../../utils/topBanner";
|
5
|
+
import ImageSelector from "../../common/ImageSelector/ImageSelector";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
|
+
const TopBannerButton = props => {
|
10
|
+
const {
|
11
|
+
editor,
|
12
|
+
icoBtnType,
|
13
|
+
customProps
|
14
|
+
} = props;
|
15
|
+
const [open, setOpen] = useState(false);
|
16
|
+
const onSelectImage = url => {
|
17
|
+
console.log(url);
|
18
|
+
if (url) {
|
19
|
+
insertTopBanner(editor, {
|
20
|
+
url
|
21
|
+
});
|
22
|
+
}
|
23
|
+
setOpen(false);
|
24
|
+
};
|
25
|
+
const handleClick = () => {
|
26
|
+
setOpen(true);
|
27
|
+
};
|
28
|
+
const handleClose = () => {
|
29
|
+
setOpen(false);
|
30
|
+
};
|
31
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
32
|
+
children: [/*#__PURE__*/_jsx(ToolbarIcon, {
|
33
|
+
title: "Top Banner",
|
34
|
+
onClick: handleClick,
|
35
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
36
|
+
icon: "topbanner"
|
37
|
+
}),
|
38
|
+
icoBtnType: icoBtnType
|
39
|
+
}), /*#__PURE__*/_jsx(ImageSelector, {
|
40
|
+
open: open,
|
41
|
+
onClose: handleClose,
|
42
|
+
customProps: customProps,
|
43
|
+
onSelectImage: onSelectImage
|
44
|
+
})]
|
45
|
+
});
|
46
|
+
};
|
47
|
+
export default TopBannerButton;
|
@@ -0,0 +1,50 @@
|
|
1
|
+
const editorStyles = ({
|
2
|
+
padHeight
|
3
|
+
}) => ({
|
4
|
+
root: {
|
5
|
+
display: "flex",
|
6
|
+
flexDirection: "column",
|
7
|
+
position: "relative",
|
8
|
+
padding: "0 8px"
|
9
|
+
},
|
10
|
+
slateWrapper: {
|
11
|
+
height: `${window.innerHeight - padHeight}px`,
|
12
|
+
overflow: "auto",
|
13
|
+
display: "flex",
|
14
|
+
flexDirection: "column",
|
15
|
+
backgroundColor: "#cccccc2b",
|
16
|
+
"& .scroll-area": {
|
17
|
+
display: "flex",
|
18
|
+
justifyContent: "center",
|
19
|
+
// minHeight: "100vh",
|
20
|
+
flex: 1
|
21
|
+
},
|
22
|
+
"& .editor-wrapper": {
|
23
|
+
maxWidth: "90%",
|
24
|
+
height: "100%",
|
25
|
+
backgroundColor: "#FFF",
|
26
|
+
overflow: "visible"
|
27
|
+
},
|
28
|
+
"& .el-toolbar": {
|
29
|
+
position: "absolute",
|
30
|
+
left: 0,
|
31
|
+
top: 0,
|
32
|
+
width: "fit-content",
|
33
|
+
"& button": {
|
34
|
+
border: "1px solid rgba(37, 99, 235, 0.32)",
|
35
|
+
borderRadius: "10px",
|
36
|
+
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
|
37
|
+
background: "#fff",
|
38
|
+
width: "36px",
|
39
|
+
height: "36px",
|
40
|
+
"&.mr": {
|
41
|
+
marginRight: "2px"
|
42
|
+
},
|
43
|
+
"& svg": {
|
44
|
+
stroke: "rgb(100, 116, 139);"
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
48
|
+
}
|
49
|
+
});
|
50
|
+
export default editorStyles;
|
@@ -8,10 +8,8 @@ const Autocomplete = ({
|
|
8
8
|
options
|
9
9
|
}) => {
|
10
10
|
const value = activeMark(editor, format);
|
11
|
-
console.log(options);
|
12
11
|
const changeMarkData = (event, format) => {
|
13
12
|
event.preventDefault();
|
14
|
-
console.log(event.target.value, format);
|
15
13
|
// const value = event.target.value;
|
16
14
|
// addMarkData(editor, { format, value });
|
17
15
|
};
|
@@ -6,7 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
const Dropdown = ({
|
7
7
|
editor,
|
8
8
|
format,
|
9
|
-
options
|
9
|
+
options,
|
10
|
+
width
|
10
11
|
}) => {
|
11
12
|
const value = activeMark(editor, format);
|
12
13
|
const changeMarkData = (event, format) => {
|
@@ -23,10 +24,11 @@ const Dropdown = ({
|
|
23
24
|
onChange: e => changeMarkData(e, format),
|
24
25
|
style: {
|
25
26
|
fontFamily: fontFamilyMap[value],
|
26
|
-
width: "100%",
|
27
|
+
width: width || "100%",
|
27
28
|
height: "36px",
|
28
29
|
overflow: "hidden",
|
29
|
-
borderRadius: "10px"
|
30
|
+
borderRadius: "10px",
|
31
|
+
fontSize: "14px"
|
30
32
|
},
|
31
33
|
children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
|
32
34
|
style: {
|
@@ -37,4 +39,7 @@ const Dropdown = ({
|
|
37
39
|
}, index))
|
38
40
|
});
|
39
41
|
};
|
42
|
+
Dropdown.defaultProps = {
|
43
|
+
icon: null
|
44
|
+
};
|
40
45
|
export default Dropdown;
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { MenuItem, Tooltip, IconButton, Menu } from "@mui/material";
|
3
|
+
import { addMarkData } from "../../utils/SlateUtilityFunctions.js";
|
4
|
+
import { fontFamilyMap } from "../../utils/font";
|
5
|
+
import Icon from "../../common/Icon";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
|
+
const FontFamilyDropdown = ({
|
10
|
+
editor,
|
11
|
+
format,
|
12
|
+
options
|
13
|
+
}) => {
|
14
|
+
const [anchorEl, setAnchorEl] = React.useState(null);
|
15
|
+
const open = Boolean(anchorEl);
|
16
|
+
const handleClick = event => {
|
17
|
+
setAnchorEl(event.currentTarget);
|
18
|
+
};
|
19
|
+
const handleClose = () => {
|
20
|
+
setAnchorEl(null);
|
21
|
+
};
|
22
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
23
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
24
|
+
title: "Font Family",
|
25
|
+
arrow: true,
|
26
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
27
|
+
"aria-label": "more",
|
28
|
+
id: "long-button",
|
29
|
+
"aria-controls": open ? "long-menu" : undefined,
|
30
|
+
"aria-expanded": open ? "true" : undefined,
|
31
|
+
"aria-haspopup": "true",
|
32
|
+
onClick: handleClick,
|
33
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
34
|
+
icon: format
|
35
|
+
})
|
36
|
+
})
|
37
|
+
}), /*#__PURE__*/_jsx(Menu, {
|
38
|
+
id: "long-menu",
|
39
|
+
MenuListProps: {
|
40
|
+
"aria-labelledby": "long-button"
|
41
|
+
},
|
42
|
+
anchorEl: anchorEl,
|
43
|
+
open: open,
|
44
|
+
onClose: handleClose,
|
45
|
+
children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
|
46
|
+
value: item.value,
|
47
|
+
style: {
|
48
|
+
fontFamily: fontFamilyMap[item.value],
|
49
|
+
fontSize: 15
|
50
|
+
},
|
51
|
+
onClick: () => {
|
52
|
+
addMarkData(editor, {
|
53
|
+
format,
|
54
|
+
value: item.value
|
55
|
+
});
|
56
|
+
handleClose();
|
57
|
+
},
|
58
|
+
children: item.text
|
59
|
+
}, index))
|
60
|
+
})]
|
61
|
+
});
|
62
|
+
};
|
63
|
+
export default FontFamilyDropdown;
|
@@ -0,0 +1,112 @@
|
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
2
|
+
import Button from "../../common/Button";
|
3
|
+
import Icon from "../../common/Icon";
|
4
|
+
import { activeMark, addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
|
5
|
+
import usePopup from "../../utils/customHooks/usePopup";
|
6
|
+
import { sizeMap } from "../../utils/font";
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
|
+
const FontSize = ({
|
10
|
+
editor,
|
11
|
+
format
|
12
|
+
}) => {
|
13
|
+
const urlInputRef = useRef();
|
14
|
+
let activeValue = activeMark(editor, format);
|
15
|
+
const [active, setActive] = useState(false);
|
16
|
+
const [fontSize, setFontSize] = useState(16);
|
17
|
+
const [showInput, setShowInput] = usePopup(urlInputRef);
|
18
|
+
useEffect(() => {
|
19
|
+
setFontSize(activeValue === "normal" ? 16 : getSizeVal(activeValue));
|
20
|
+
}, [activeValue]);
|
21
|
+
const getSizeVal = value => {
|
22
|
+
try {
|
23
|
+
const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
24
|
+
return parseInt(size);
|
25
|
+
} catch (err) {
|
26
|
+
return "";
|
27
|
+
}
|
28
|
+
};
|
29
|
+
const handleButtonClick = e => {
|
30
|
+
e.preventDefault();
|
31
|
+
if (!active) {
|
32
|
+
let activeValue = activeMark(editor, format);
|
33
|
+
let defaultValue = activeValue ? sizeMap[activeValue] ? getSizeVal(sizeMap[activeValue]) : +activeValue : 16;
|
34
|
+
setFontSize(defaultValue);
|
35
|
+
} else {
|
36
|
+
setFontSize(16);
|
37
|
+
}
|
38
|
+
setShowInput(prev => !prev);
|
39
|
+
setActive(!active);
|
40
|
+
};
|
41
|
+
const onInputChange = e => {
|
42
|
+
if (e.target.value) {
|
43
|
+
setFontSize(e.target.value);
|
44
|
+
addMarkData(editor, {
|
45
|
+
format,
|
46
|
+
value: e.target.value
|
47
|
+
});
|
48
|
+
}
|
49
|
+
};
|
50
|
+
const changeWithButton = value => {
|
51
|
+
setFontSize(value);
|
52
|
+
addMarkData(editor, {
|
53
|
+
format,
|
54
|
+
value: value
|
55
|
+
});
|
56
|
+
};
|
57
|
+
return /*#__PURE__*/_jsxs("div", {
|
58
|
+
ref: urlInputRef,
|
59
|
+
className: "popup-wrapper",
|
60
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
61
|
+
className: `${isBlockActive(editor, format) && "btnActive"}`,
|
62
|
+
active: isBlockActive(editor, format),
|
63
|
+
style: {
|
64
|
+
border: showInput ? "1px solid lightgray" : "",
|
65
|
+
borderBottom: "none"
|
66
|
+
},
|
67
|
+
format: format,
|
68
|
+
onClick: handleButtonClick,
|
69
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
70
|
+
className: "fontsize",
|
71
|
+
icon: format
|
72
|
+
})
|
73
|
+
}), showInput && /*#__PURE__*/_jsxs("div", {
|
74
|
+
className: "fontSizeWrapper popup imagePopup",
|
75
|
+
style: {
|
76
|
+
display: "flex",
|
77
|
+
justifyContent: "center",
|
78
|
+
maxWidth: "120px"
|
79
|
+
},
|
80
|
+
children: [/*#__PURE__*/_jsx("span", {
|
81
|
+
className: "controls",
|
82
|
+
onClick: () => {
|
83
|
+
if (activeValue && activeValue > 1) {
|
84
|
+
changeWithButton(+fontSize - 1);
|
85
|
+
}
|
86
|
+
},
|
87
|
+
children: "-"
|
88
|
+
}), /*#__PURE__*/_jsx("input", {
|
89
|
+
value: fontSize,
|
90
|
+
type: "text",
|
91
|
+
style: {
|
92
|
+
border: "unset",
|
93
|
+
outline: "unset",
|
94
|
+
marginBottom: "unset",
|
95
|
+
maxWidth: "36px",
|
96
|
+
overflow: "hidden"
|
97
|
+
},
|
98
|
+
onChange: onInputChange,
|
99
|
+
disabled: !activeValue && activeValue !== 0
|
100
|
+
}), /*#__PURE__*/_jsx("span", {
|
101
|
+
className: "controls",
|
102
|
+
onClick: () => {
|
103
|
+
if (activeValue || activeValue === 0) {
|
104
|
+
changeWithButton(+fontSize + 1);
|
105
|
+
}
|
106
|
+
},
|
107
|
+
children: "+"
|
108
|
+
})]
|
109
|
+
})]
|
110
|
+
});
|
111
|
+
};
|
112
|
+
export default FontSize;
|
@@ -8,7 +8,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
9
|
const TextSize = ({
|
10
10
|
editor,
|
11
|
-
format
|
11
|
+
format,
|
12
|
+
fullWidth
|
12
13
|
}) => {
|
13
14
|
const value = activeMark(editor, format);
|
14
15
|
const onChangeSize = e => {
|
@@ -49,11 +50,17 @@ const TextSize = ({
|
|
49
50
|
size: "small",
|
50
51
|
inputProps: {
|
51
52
|
style: {
|
52
|
-
width: "30px",
|
53
|
-
textAlign: "center"
|
53
|
+
width: fullWidth ? "100%" : "30px",
|
54
|
+
textAlign: "center",
|
55
|
+
height: "19px",
|
56
|
+
fontSize: "14px"
|
54
57
|
}
|
55
58
|
},
|
59
|
+
fullWidth: fullWidth,
|
56
60
|
InputProps: {
|
61
|
+
style: {
|
62
|
+
borderRadius: "8px"
|
63
|
+
},
|
57
64
|
endAdornment: /*#__PURE__*/_jsxs("div", {
|
58
65
|
className: "textFontArrows",
|
59
66
|
children: [/*#__PURE__*/_jsx(IconButton, {
|
@@ -70,4 +77,7 @@ const TextSize = ({
|
|
70
77
|
})
|
71
78
|
});
|
72
79
|
};
|
80
|
+
TextSize.defaultProps = {
|
81
|
+
fullWidth: false
|
82
|
+
};
|
73
83
|
export default TextSize;
|
@@ -4,4 +4,7 @@ import MarkButton from "./MarkButton";
|
|
4
4
|
import Autocomplete from "./Autocomplete";
|
5
5
|
import Text from "./Text";
|
6
6
|
import TextSize from "./TextSize";
|
7
|
-
|
7
|
+
import FontFamilyDropdown from "./FontFamilyDropdown";
|
8
|
+
import FontSize from "./FontSize";
|
9
|
+
import AccordionButton from "../../Elements/Accordion/AccordionButton";
|
10
|
+
export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize, FontFamilyDropdown, FontSize, AccordionButton };
|
@@ -0,0 +1,101 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { useSlate } from "slate-react";
|
3
|
+
import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
|
4
|
+
import MENU_OPTIONS from "./Options/Options";
|
5
|
+
import TextFormat from "../PopupTool/TextFormat";
|
6
|
+
import AddElements from "../PopupTool/AddElements";
|
7
|
+
import AddTemplates from "../PopupTool/AddTemplates";
|
8
|
+
import miniToolbarStyles from "./Styles";
|
9
|
+
import usePopupStyle from "../PopupTool/PopupToolStyle";
|
10
|
+
import PopperHeader from "../PopupTool/PopperHeader";
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
12
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
13
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
14
|
+
const POPUP_TYPES = {
|
15
|
+
textFormat: TextFormat,
|
16
|
+
addElement: AddElements,
|
17
|
+
addTemplate: AddTemplates
|
18
|
+
};
|
19
|
+
const FULLSCREEN_POPUP = {
|
20
|
+
addTemplate: true
|
21
|
+
};
|
22
|
+
const POPUP_TITLE = {
|
23
|
+
textFormat: "Text Settings",
|
24
|
+
addElement: "Add Elements",
|
25
|
+
addTemplate: "Templates"
|
26
|
+
};
|
27
|
+
const MiniToolbar = props => {
|
28
|
+
const {
|
29
|
+
customProps
|
30
|
+
} = props;
|
31
|
+
const classes = miniToolbarStyles();
|
32
|
+
const popupStyles = usePopupStyle();
|
33
|
+
const editor = useSlate();
|
34
|
+
const [popper, setPopper] = useState(null);
|
35
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
36
|
+
const [fullScreen, setFullScreen] = useState(false);
|
37
|
+
const PopupComponent = POPUP_TYPES[popper] || null;
|
38
|
+
const open = Boolean(PopupComponent);
|
39
|
+
const DialogComp = !fullScreen ? Popper : Dialog;
|
40
|
+
const handleClick = type => e => {
|
41
|
+
setPopper(type);
|
42
|
+
setAnchorEl(e.currentTarget);
|
43
|
+
};
|
44
|
+
const onClose = () => {
|
45
|
+
setPopper(null);
|
46
|
+
};
|
47
|
+
const toggleFullscreen = () => {
|
48
|
+
setFullScreen(!fullScreen);
|
49
|
+
};
|
50
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
51
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
52
|
+
component: "div",
|
53
|
+
sx: classes.root,
|
54
|
+
children: MENU_OPTIONS.map(({
|
55
|
+
type,
|
56
|
+
label,
|
57
|
+
icon: Icon
|
58
|
+
}) => {
|
59
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
60
|
+
title: label,
|
61
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
62
|
+
className: type === popper ? "active" : "",
|
63
|
+
onClick: handleClick(type),
|
64
|
+
children: /*#__PURE__*/_jsx(Icon, {})
|
65
|
+
})
|
66
|
+
}, `mini_tool_btn_${type}`);
|
67
|
+
})
|
68
|
+
}), /*#__PURE__*/_jsx(DialogComp, {
|
69
|
+
open: open,
|
70
|
+
onClose: onClose,
|
71
|
+
anchorEl: anchorEl,
|
72
|
+
placement: "top",
|
73
|
+
sx: popupStyles.popupWrapper,
|
74
|
+
className: `tools-drawer ${fullScreen ? "fullscreen" : ""}`,
|
75
|
+
fullScreen: fullScreen,
|
76
|
+
style: {
|
77
|
+
zIndex: 1002
|
78
|
+
},
|
79
|
+
children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
|
80
|
+
className: "papper-wrpr",
|
81
|
+
style: {
|
82
|
+
borderRadius: "10px"
|
83
|
+
},
|
84
|
+
children: [/*#__PURE__*/_jsx(PopperHeader, {
|
85
|
+
title: POPUP_TITLE[popper],
|
86
|
+
classes: popupStyles,
|
87
|
+
onClose: onClose,
|
88
|
+
needFullscreen: FULLSCREEN_POPUP[popper],
|
89
|
+
fullScreen: fullScreen,
|
90
|
+
toggleFullscreen: toggleFullscreen
|
91
|
+
}), /*#__PURE__*/_jsx(PopupComponent, {
|
92
|
+
classes: popupStyles,
|
93
|
+
editor: editor,
|
94
|
+
customProps: customProps,
|
95
|
+
fullScreen: fullScreen
|
96
|
+
})]
|
97
|
+
}) : null
|
98
|
+
})]
|
99
|
+
});
|
100
|
+
};
|
101
|
+
export default MiniToolbar;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import TextIcon from "../../../assets/svg/TextIcon";
|
2
|
+
import AddElementIcon from "../../../assets/svg/AddElementIcon";
|
3
|
+
import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
|
4
|
+
const MENU_OPTIONS = [{
|
5
|
+
type: "textFormat",
|
6
|
+
icon: TextIcon,
|
7
|
+
label: "Text Style"
|
8
|
+
}, {
|
9
|
+
type: "addElement",
|
10
|
+
icon: AddElementIcon,
|
11
|
+
label: "Add Element"
|
12
|
+
}, {
|
13
|
+
type: "addTemplate",
|
14
|
+
icon: AddTemplateIcon,
|
15
|
+
label: "Add Template"
|
16
|
+
}];
|
17
|
+
export default MENU_OPTIONS;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
const miniToolbarStyles = () => ({
|
2
|
+
root: {
|
3
|
+
display: "flex",
|
4
|
+
flexDirection: "row",
|
5
|
+
justifyContent: "center",
|
6
|
+
alignItems: "center",
|
7
|
+
position: "absolute",
|
8
|
+
bottom: "-12px",
|
9
|
+
left: 0,
|
10
|
+
right: 0,
|
11
|
+
margin: "auto",
|
12
|
+
border: "1px solid #D8DDE1",
|
13
|
+
borderRadius: "22px",
|
14
|
+
width: "200px",
|
15
|
+
height: "37px",
|
16
|
+
zIndex: 1000,
|
17
|
+
background: "#FFF",
|
18
|
+
"& button": {
|
19
|
+
"& svg": {
|
20
|
+
stroke: "#64748B"
|
21
|
+
},
|
22
|
+
"&.active": {
|
23
|
+
"& svg": {
|
24
|
+
stroke: "#2563EB"
|
25
|
+
}
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|
29
|
+
});
|
30
|
+
export default miniToolbarStyles;
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Grid } from "@mui/material";
|
3
|
+
import { toolbarGroups } from "../toolbarGroups";
|
4
|
+
import { RenderToolbarIcon } from "../Toolbar";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
+
const allTools = toolbarGroups.flat();
|
7
|
+
const elements = allTools.filter(f => f?.group === "elements");
|
8
|
+
const AddElements = props => {
|
9
|
+
const {
|
10
|
+
classes,
|
11
|
+
editor,
|
12
|
+
customProps
|
13
|
+
} = props;
|
14
|
+
return /*#__PURE__*/_jsx(Grid, {
|
15
|
+
container: true,
|
16
|
+
sx: classes.textFormatWrapper,
|
17
|
+
spacing: 2,
|
18
|
+
children: elements.map(m => {
|
19
|
+
return /*#__PURE__*/_jsx(Grid, {
|
20
|
+
item: true,
|
21
|
+
xs: 6,
|
22
|
+
children: /*#__PURE__*/_jsx(RenderToolbarIcon, {
|
23
|
+
editor: editor,
|
24
|
+
element: m,
|
25
|
+
customProps: customProps,
|
26
|
+
icoBtnType: "mini"
|
27
|
+
})
|
28
|
+
}, `ri_mi_${m.id}`);
|
29
|
+
})
|
30
|
+
});
|
31
|
+
};
|
32
|
+
export default AddElements;
|
@@ -0,0 +1,115 @@
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const Categories = props => {
|
6
|
+
const {
|
7
|
+
value,
|
8
|
+
handleChange,
|
9
|
+
data
|
10
|
+
} = props;
|
11
|
+
return /*#__PURE__*/_jsx(Tabs, {
|
12
|
+
value: value || data[0],
|
13
|
+
onChange: handleChange,
|
14
|
+
variant: "scrollable",
|
15
|
+
scrollButtons: "auto",
|
16
|
+
"aria-label": "Categories",
|
17
|
+
style: {
|
18
|
+
width: "100%"
|
19
|
+
},
|
20
|
+
children: data.map(m => /*#__PURE__*/_jsx(Tab, {
|
21
|
+
value: m,
|
22
|
+
label: m
|
23
|
+
}, m))
|
24
|
+
});
|
25
|
+
};
|
26
|
+
const AddTemplates = props => {
|
27
|
+
const {
|
28
|
+
classes,
|
29
|
+
editor,
|
30
|
+
fullScreen,
|
31
|
+
customProps
|
32
|
+
} = props;
|
33
|
+
const {
|
34
|
+
services
|
35
|
+
} = customProps;
|
36
|
+
const [categories, setCategories] = useState([]);
|
37
|
+
const [category, setCategory] = useState("");
|
38
|
+
const [templates, setTemplates] = useState([]);
|
39
|
+
const [filteredTemplates, setFilteredTemplates] = useState([]);
|
40
|
+
useEffect(() => {
|
41
|
+
getTemplatesList();
|
42
|
+
}, []);
|
43
|
+
const getTemplatesList = async () => {
|
44
|
+
const result = await services("listTemplates", {});
|
45
|
+
const tempList = result?.data?.filter(f => f.type === "Template");
|
46
|
+
const lic = tempList?.reduce((a, b) => {
|
47
|
+
if (a.indexOf(b.category) < 0) {
|
48
|
+
a.push(b.category);
|
49
|
+
}
|
50
|
+
return a;
|
51
|
+
}, []);
|
52
|
+
const ft = tempList?.filter(f => f.category === lic[0]);
|
53
|
+
setTemplates(tempList);
|
54
|
+
setCategories(lic);
|
55
|
+
setCategory(lic[0]);
|
56
|
+
setFilteredTemplates(ft);
|
57
|
+
};
|
58
|
+
const handleChange = (event, newValue) => {
|
59
|
+
setCategory(newValue);
|
60
|
+
setFilteredTemplates(templates.filter(f => f.category === newValue));
|
61
|
+
};
|
62
|
+
const onSelectTemplate = card => () => {
|
63
|
+
try {
|
64
|
+
editor.insertNode(JSON.parse(card.content));
|
65
|
+
} catch (err) {
|
66
|
+
console.log(err);
|
67
|
+
}
|
68
|
+
};
|
69
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
70
|
+
container: true,
|
71
|
+
className: `templates ${fullScreen ? "fullscreen" : ""}`,
|
72
|
+
sx: classes.textFormatWrapper,
|
73
|
+
spacing: 0,
|
74
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
75
|
+
item: true,
|
76
|
+
xs: 12,
|
77
|
+
children: /*#__PURE__*/_jsx(Categories, {
|
78
|
+
value: category,
|
79
|
+
data: categories,
|
80
|
+
handleChange: handleChange
|
81
|
+
})
|
82
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
83
|
+
container: true,
|
84
|
+
spacing: 1,
|
85
|
+
className: `${fullScreen ? "fullscreen" : ""}`,
|
86
|
+
sx: classes.templateCardsWrpr,
|
87
|
+
children: filteredTemplates.map(m => {
|
88
|
+
return /*#__PURE__*/_jsx(Grid, {
|
89
|
+
item: true,
|
90
|
+
xs: 4,
|
91
|
+
children: /*#__PURE__*/_jsxs(Card, {
|
92
|
+
sx: classes.templateCard,
|
93
|
+
onClick: onSelectTemplate(m),
|
94
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
95
|
+
sx: classes.templateCardMediaWrpr,
|
96
|
+
children: /*#__PURE__*/_jsx(CardMedia, {
|
97
|
+
className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
|
98
|
+
component: "div",
|
99
|
+
image: m?.thumbnail,
|
100
|
+
alt: m?.title,
|
101
|
+
sx: classes.templateCardMedia
|
102
|
+
})
|
103
|
+
}), /*#__PURE__*/_jsx(CardContent, {
|
104
|
+
style: {
|
105
|
+
height: "30px"
|
106
|
+
},
|
107
|
+
children: m?.title
|
108
|
+
})]
|
109
|
+
})
|
110
|
+
}, `template_${m.id}`);
|
111
|
+
})
|
112
|
+
})]
|
113
|
+
});
|
114
|
+
};
|
115
|
+
export default AddTemplates;
|