@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,133 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Box, IconButton, Popover } from "@mui/material";
|
3
|
+
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
4
|
+
import Button from "../../common/Button";
|
5
|
+
import { colors } from "./defaultColors";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
let c = [];
|
9
|
+
const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
|
10
|
+
if (i % 7 === 0) {
|
11
|
+
a.push(c);
|
12
|
+
c = [];
|
13
|
+
}
|
14
|
+
c.push(b);
|
15
|
+
return a;
|
16
|
+
}, []).reverse();
|
17
|
+
const SingleColorButton = ({
|
18
|
+
crs,
|
19
|
+
index,
|
20
|
+
handleSelect,
|
21
|
+
classes,
|
22
|
+
handleMore,
|
23
|
+
activeColor
|
24
|
+
}) => {
|
25
|
+
return /*#__PURE__*/_jsxs(Box, {
|
26
|
+
style: {
|
27
|
+
width: "100%",
|
28
|
+
display: "flex",
|
29
|
+
alignItems: "center",
|
30
|
+
padding: "8px"
|
31
|
+
},
|
32
|
+
children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
|
33
|
+
onClick: handleSelect(m),
|
34
|
+
style: {
|
35
|
+
background: m
|
36
|
+
},
|
37
|
+
sx: classes.colorButtonSingle,
|
38
|
+
className: `${activeColor === m ? "active" : ""}`
|
39
|
+
}, `color_bs_${m}`)), index === 0 && handleMore ? /*#__PURE__*/_jsx(IconButton, {
|
40
|
+
onClick: handleMore,
|
41
|
+
className: "more-btn-cbs",
|
42
|
+
children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
|
43
|
+
}) : null]
|
44
|
+
}, `ci_bs_row_${index}}`);
|
45
|
+
};
|
46
|
+
export const AllColors = props => {
|
47
|
+
const {
|
48
|
+
classes,
|
49
|
+
onSelect,
|
50
|
+
activeColor
|
51
|
+
} = props;
|
52
|
+
const all = ColorChunks([]);
|
53
|
+
return /*#__PURE__*/_jsx(Box, {
|
54
|
+
component: "div",
|
55
|
+
sx: classes.allColor,
|
56
|
+
children: /*#__PURE__*/_jsx(Box, {
|
57
|
+
sx: classes.allColorInner,
|
58
|
+
children: /*#__PURE__*/_jsx(Box, {
|
59
|
+
className: "buttonsWrpr",
|
60
|
+
children: all.map((m, i) => {
|
61
|
+
return /*#__PURE__*/_jsx(SingleColorButton, {
|
62
|
+
crs: m,
|
63
|
+
index: i,
|
64
|
+
handleSelect: onSelect,
|
65
|
+
classes: classes,
|
66
|
+
activeColor: activeColor
|
67
|
+
}, `si_btn_row1_${m}_${i}`);
|
68
|
+
})
|
69
|
+
})
|
70
|
+
})
|
71
|
+
});
|
72
|
+
};
|
73
|
+
const ColorButtons = props => {
|
74
|
+
const {
|
75
|
+
onSelect,
|
76
|
+
classes,
|
77
|
+
activeColor
|
78
|
+
} = props;
|
79
|
+
const [row1, ...restRows] = ColorChunks([]);
|
80
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
81
|
+
const open = Boolean(anchorEl);
|
82
|
+
const handleMore = e => {
|
83
|
+
setAnchorEl(e.currentTarget);
|
84
|
+
};
|
85
|
+
const handleClose = () => {
|
86
|
+
setAnchorEl(null);
|
87
|
+
};
|
88
|
+
const handleSelect = color => () => {
|
89
|
+
onSelect(color);
|
90
|
+
};
|
91
|
+
return /*#__PURE__*/_jsxs(Box, {
|
92
|
+
component: "span",
|
93
|
+
sx: classes.colorButtons,
|
94
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
95
|
+
className: "buttonsWrpr first",
|
96
|
+
children: [row1].map((m, i) => {
|
97
|
+
return /*#__PURE__*/_jsx(SingleColorButton, {
|
98
|
+
crs: m,
|
99
|
+
index: i,
|
100
|
+
handleSelect: handleSelect,
|
101
|
+
classes: classes,
|
102
|
+
handleMore: handleMore,
|
103
|
+
activeColor: activeColor
|
104
|
+
}, `si_btn_row1_${m}_${i}`);
|
105
|
+
})
|
106
|
+
}), /*#__PURE__*/_jsx(Popover, {
|
107
|
+
open: open,
|
108
|
+
anchorEl: anchorEl,
|
109
|
+
onClose: handleClose,
|
110
|
+
anchorOrigin: {
|
111
|
+
vertical: "bottom",
|
112
|
+
horizontal: "right"
|
113
|
+
},
|
114
|
+
transformOrigin: {
|
115
|
+
vertical: "top",
|
116
|
+
horizontal: "right"
|
117
|
+
},
|
118
|
+
children: /*#__PURE__*/_jsx(Box, {
|
119
|
+
sx: classes.colorButtonsInner,
|
120
|
+
children: restRows.map((m, i) => {
|
121
|
+
return /*#__PURE__*/_jsx(SingleColorButton, {
|
122
|
+
crs: m,
|
123
|
+
index: i,
|
124
|
+
handleSelect: handleSelect,
|
125
|
+
classes: classes,
|
126
|
+
activeColor: activeColor
|
127
|
+
}, `si_btn_${m}_${i}`);
|
128
|
+
})
|
129
|
+
})
|
130
|
+
})]
|
131
|
+
});
|
132
|
+
};
|
133
|
+
export default ColorButtons;
|
@@ -1,13 +1,15 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { useState } from "react";
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
|
-
import Button from "../../common/Button";
|
4
|
-
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
|
5
3
|
import { Transforms } from "slate";
|
6
|
-
import
|
4
|
+
import ColorPickerTool from "react-gcolor-picker";
|
5
|
+
import { IconButton, Tooltip, Box, Popover } from "@mui/material";
|
6
|
+
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
|
7
7
|
import { logo } from "./LogoIcon";
|
8
8
|
import "./ColorPicker.css";
|
9
|
-
import
|
9
|
+
import ColorButtons from "./ColorButtons";
|
10
|
+
import ColorPickerStyles from "./Styles";
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
11
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
14
|
const DEFAULT_COLOR = {
|
13
15
|
color: "#000000",
|
@@ -18,15 +20,17 @@ const ColorPicker = ({
|
|
18
20
|
editor,
|
19
21
|
showHex,
|
20
22
|
title,
|
21
|
-
|
23
|
+
classes
|
22
24
|
}) => {
|
23
25
|
const [selection, setSelection] = useState();
|
24
|
-
const
|
25
|
-
const
|
26
|
-
const
|
26
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
27
|
+
const open = Boolean(anchorEl);
|
28
|
+
const pickerStyles = ColorPickerStyles();
|
29
|
+
const onOpen = e => {
|
30
|
+
e.preventDefault();
|
31
|
+
setAnchorEl(e.currentTarget);
|
27
32
|
setSelection(editor.selection);
|
28
33
|
selection && ReactEditor.focus(editor);
|
29
|
-
setShowOptions(prev => !prev);
|
30
34
|
};
|
31
35
|
const handleFormSubmit = color => {
|
32
36
|
if (!color) return;
|
@@ -35,57 +39,43 @@ const ColorPicker = ({
|
|
35
39
|
format,
|
36
40
|
value: color
|
37
41
|
});
|
38
|
-
setShowOptions(false);
|
39
42
|
selection && ReactEditor.focus(editor);
|
43
|
+
handleClose();
|
40
44
|
};
|
41
|
-
const
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
children: [rounded ? /*#__PURE__*/_jsx(Button, {
|
52
|
-
style: {
|
53
|
-
color: activeColor,
|
54
|
-
opacity: "1",
|
55
|
-
width: "24px",
|
56
|
-
height: "24px",
|
57
|
-
backgroundColor: activeColor,
|
58
|
-
border: "1px solid #ccc",
|
59
|
-
marginRight: "12px"
|
60
|
-
},
|
61
|
-
className: showOptions ? "clicked" : "",
|
62
|
-
onClick: toggleOption,
|
63
|
-
title: title
|
64
|
-
}) : /*#__PURE__*/_jsx(Button, {
|
65
|
-
style: {
|
66
|
-
color: activeColor,
|
67
|
-
opacity: "1"
|
68
|
-
},
|
69
|
-
className: showOptions ? "clicked" : "",
|
70
|
-
onClick: toggleOption,
|
45
|
+
const onSelect = color => {
|
46
|
+
handleFormSubmit(color);
|
47
|
+
};
|
48
|
+
const handleClose = () => {
|
49
|
+
setAnchorEl(null);
|
50
|
+
};
|
51
|
+
const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
|
52
|
+
const Logo = logo[format](activeColor);
|
53
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
54
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
71
55
|
title: title,
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
}
|
56
|
+
arrow: true,
|
57
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
58
|
+
onClick: onOpen,
|
59
|
+
children: Logo
|
60
|
+
})
|
61
|
+
}), showHex ? /*#__PURE__*/_jsx(Box, {
|
62
|
+
sx: classes.hexStyle,
|
77
63
|
children: activeColor
|
78
|
-
}) : null,
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
64
|
+
}) : null, /*#__PURE__*/_jsx(ColorButtons, {
|
65
|
+
classes: pickerStyles,
|
66
|
+
onSelect: onSelect,
|
67
|
+
activeColor: activeColor
|
68
|
+
}), /*#__PURE__*/_jsx(Popover, {
|
69
|
+
open: open,
|
70
|
+
anchorEl: anchorEl,
|
71
|
+
onClose: handleClose,
|
72
|
+
anchorOrigin: {
|
73
|
+
vertical: "bottom",
|
74
|
+
horizontal: "center"
|
75
|
+
},
|
76
|
+
transformOrigin: {
|
77
|
+
vertical: "top",
|
78
|
+
horizontal: "center"
|
89
79
|
},
|
90
80
|
children: /*#__PURE__*/_jsx(ColorPickerTool, {
|
91
81
|
gradient: true,
|
@@ -96,6 +86,7 @@ const ColorPicker = ({
|
|
96
86
|
});
|
97
87
|
};
|
98
88
|
ColorPicker.defaultProps = {
|
99
|
-
rounded: false
|
89
|
+
rounded: false,
|
90
|
+
classes: {}
|
100
91
|
};
|
101
92
|
export default ColorPicker;
|
@@ -0,0 +1,51 @@
|
|
1
|
+
const ColorPickerStyles = () => ({
|
2
|
+
colorButtons: {
|
3
|
+
"& .buttonsWrpr": {
|
4
|
+
display: "flex",
|
5
|
+
justifyCotnent: "center"
|
6
|
+
},
|
7
|
+
"& button": {
|
8
|
+
width: "24px",
|
9
|
+
height: "24px",
|
10
|
+
marginRight: "8px",
|
11
|
+
border: "1px solid #ccc"
|
12
|
+
}
|
13
|
+
},
|
14
|
+
colorButtonSingle: {
|
15
|
+
"&.active": {
|
16
|
+
"&:before": {
|
17
|
+
content: '" "',
|
18
|
+
position: "absolute",
|
19
|
+
top: "-5px",
|
20
|
+
left: "-5px",
|
21
|
+
width: "calc(100% + 4px)",
|
22
|
+
height: "calc(100% + 4px)",
|
23
|
+
border: "3px solid blue",
|
24
|
+
borderRadius: "50%"
|
25
|
+
}
|
26
|
+
}
|
27
|
+
},
|
28
|
+
colorButtonsInner: {
|
29
|
+
width: "100%",
|
30
|
+
padding: "4px",
|
31
|
+
display: "flex",
|
32
|
+
justifyCotnent: "center",
|
33
|
+
alignItems: "center",
|
34
|
+
flexDirection: "column",
|
35
|
+
"& .buttonsWrpr": {
|
36
|
+
display: "flex",
|
37
|
+
justifyCotnent: "center",
|
38
|
+
alignItems: "center"
|
39
|
+
},
|
40
|
+
".more-btn-cbs": {
|
41
|
+
display: "none"
|
42
|
+
},
|
43
|
+
"& button": {
|
44
|
+
width: "24px",
|
45
|
+
height: "24px",
|
46
|
+
margin: "0px 4px",
|
47
|
+
border: "1px solid #ccc"
|
48
|
+
}
|
49
|
+
}
|
50
|
+
});
|
51
|
+
export default ColorPickerStyles;
|
@@ -1 +1 @@
|
|
1
|
-
export const colors = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466"];
|
1
|
+
export const colors = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)"];
|
@@ -1,50 +1,47 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { ReactEditor } from "slate-react";
|
4
|
-
import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography, Tooltip } from "@mui/material";
|
5
|
-
import CloseIcon from "@mui/icons-material/Close";
|
6
4
|
import Icon from "../../common/Icon";
|
7
5
|
import { isBlockActive } from "../../utils/SlateUtilityFunctions";
|
8
|
-
import usePopup from "../../utils/customHooks/usePopup";
|
9
6
|
import { insertEmbed } from "../../utils/embed";
|
10
|
-
import Uploader from "../../common/Uploader";
|
11
7
|
import "./Embed.css";
|
12
|
-
|
13
|
-
|
8
|
+
import ToolbarIcon from "../../common/ToolbarIcon";
|
9
|
+
import ImageSelector from "../../common/ImageSelector/ImageSelector";
|
14
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
15
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
16
11
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
12
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
17
13
|
const EMBED_LABEL = {
|
18
14
|
image: "Image",
|
19
|
-
video: "Video
|
15
|
+
video: "Video",
|
16
|
+
embed: "Embed"
|
20
17
|
};
|
21
18
|
const Embed = ({
|
22
19
|
editor,
|
23
20
|
format,
|
21
|
+
lbT,
|
24
22
|
customProps,
|
25
|
-
|
23
|
+
icoBtnType
|
26
24
|
}) => {
|
27
|
-
const urlInputRef = useRef();
|
28
25
|
const [open, setOpen] = useState(false);
|
29
|
-
const [showInput, setShowInput] = usePopup(urlInputRef);
|
30
26
|
const [formData, setFormData] = useState({
|
31
27
|
url: "",
|
32
|
-
alt: ""
|
28
|
+
alt: "",
|
29
|
+
images: []
|
33
30
|
});
|
34
31
|
const [selection, setSelection] = useState();
|
35
|
-
const handleFormSubmit =
|
36
|
-
if (
|
32
|
+
const handleFormSubmit = fd => {
|
33
|
+
if (fd?.url || fd?.images.length > 0) {
|
37
34
|
selection && Transforms.select(editor, selection);
|
38
35
|
selection && ReactEditor.focus(editor);
|
39
36
|
insertEmbed(editor, {
|
40
|
-
...
|
37
|
+
...fd
|
41
38
|
}, format);
|
42
|
-
setShowInput(false);
|
43
39
|
setFormData({
|
44
40
|
url: "",
|
45
41
|
alt: ""
|
46
42
|
});
|
47
43
|
}
|
44
|
+
handleClose();
|
48
45
|
};
|
49
46
|
const onToggle = e => {
|
50
47
|
e.preventDefault();
|
@@ -52,122 +49,34 @@ const Embed = ({
|
|
52
49
|
selection && ReactEditor.focus(editor);
|
53
50
|
setOpen(true);
|
54
51
|
};
|
55
|
-
const
|
56
|
-
handleFormSubmit();
|
57
|
-
setOpen(false);
|
58
|
-
};
|
59
|
-
const onClose = () => {
|
52
|
+
const handleClose = () => {
|
60
53
|
setOpen(false);
|
61
54
|
};
|
62
|
-
const
|
63
|
-
|
64
|
-
...formData,
|
65
|
-
...uploadedData
|
66
|
-
});
|
67
|
-
};
|
68
|
-
const handleChange = e => {
|
69
|
-
setFormData({
|
55
|
+
const onSelectImage = img => {
|
56
|
+
const fd = {
|
70
57
|
...formData,
|
71
|
-
|
58
|
+
url: img
|
59
|
+
};
|
60
|
+
setFormData(fd);
|
61
|
+
handleFormSubmit({
|
62
|
+
...fd
|
72
63
|
});
|
73
64
|
};
|
74
|
-
const imageURL = formData?.url === "none" || !formData?.url ? "" : formData?.url;
|
75
65
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
76
|
-
children: [/*#__PURE__*/_jsx(
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
format: format,
|
86
|
-
onClick: onToggle,
|
87
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
88
|
-
icon: format
|
89
|
-
})
|
90
|
-
})
|
91
|
-
}), /*#__PURE__*/_jsx(Dialog, {
|
66
|
+
children: [/*#__PURE__*/_jsx(ToolbarIcon, {
|
67
|
+
className: isBlockActive(editor, format) ? "active" : "",
|
68
|
+
title: EMBED_LABEL[lbT || format],
|
69
|
+
onClick: onToggle,
|
70
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
71
|
+
icon: lbT || format
|
72
|
+
}),
|
73
|
+
icoBtnType: icoBtnType
|
74
|
+
}), /*#__PURE__*/_jsx(ImageSelector, {
|
92
75
|
open: open,
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
xs: 12,
|
98
|
-
sx: {
|
99
|
-
p: 3
|
100
|
-
},
|
101
|
-
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
102
|
-
sx: {
|
103
|
-
p: 0,
|
104
|
-
pb: 2
|
105
|
-
},
|
106
|
-
children: /*#__PURE__*/_jsxs(Grid, {
|
107
|
-
container: true,
|
108
|
-
justifyContent: "space-between",
|
109
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
110
|
-
variant: "h6",
|
111
|
-
className: "popupTitle",
|
112
|
-
color: "primary",
|
113
|
-
children: EMBED_LABEL[format] || "Embed"
|
114
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
115
|
-
style: {
|
116
|
-
display: "flex"
|
117
|
-
},
|
118
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
119
|
-
onClick: onClose,
|
120
|
-
className: "close-popupbtn",
|
121
|
-
children: /*#__PURE__*/_jsx(CloseIcon, {})
|
122
|
-
})
|
123
|
-
})]
|
124
|
-
})
|
125
|
-
}), /*#__PURE__*/_jsx(DialogContent, {
|
126
|
-
sx: {
|
127
|
-
p: 0
|
128
|
-
},
|
129
|
-
children: /*#__PURE__*/_jsxs(Grid, {
|
130
|
-
container: true,
|
131
|
-
children: [format === "image" ? /*#__PURE__*/_jsx(Uploader, {
|
132
|
-
value: formData,
|
133
|
-
data: {
|
134
|
-
key: "url"
|
135
|
-
},
|
136
|
-
customProps: customProps,
|
137
|
-
onUploaded: onUploaded,
|
138
|
-
disableUpload: format === "video"
|
139
|
-
}) : null, /*#__PURE__*/_jsx(Grid, {
|
140
|
-
item: true,
|
141
|
-
xs: 12,
|
142
|
-
style: {
|
143
|
-
paddingTop: "12px"
|
144
|
-
},
|
145
|
-
children: /*#__PURE__*/_jsx(TextField, {
|
146
|
-
name: "url",
|
147
|
-
placeholder: `Add ${format} url here`,
|
148
|
-
size: "small",
|
149
|
-
fullWidth: true,
|
150
|
-
onChange: handleChange,
|
151
|
-
value: imageURL || ""
|
152
|
-
})
|
153
|
-
})]
|
154
|
-
})
|
155
|
-
}), /*#__PURE__*/_jsxs(DialogActions, {
|
156
|
-
sx: {
|
157
|
-
p: 0,
|
158
|
-
pt: 2
|
159
|
-
},
|
160
|
-
children: [/*#__PURE__*/_jsx(Button, {
|
161
|
-
onClick: onClose,
|
162
|
-
className: "secondaryBtn",
|
163
|
-
children: "Cancel"
|
164
|
-
}), /*#__PURE__*/_jsx(Button, {
|
165
|
-
onClick: onSave,
|
166
|
-
className: "primaryBtn",
|
167
|
-
children: "Save"
|
168
|
-
})]
|
169
|
-
})]
|
170
|
-
})
|
76
|
+
onClose: handleClose,
|
77
|
+
customProps: customProps,
|
78
|
+
onSelectImage: onSelectImage,
|
79
|
+
title: EMBED_LABEL[lbT || format]
|
171
80
|
})]
|
172
81
|
});
|
173
82
|
};
|
@@ -1,11 +1,13 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
|
-
import { useSlateStatic,
|
2
|
+
import { useSlateStatic, ReactEditor } from "slate-react";
|
3
3
|
import { Node, Transforms, Editor } from "slate";
|
4
4
|
import AspectRatioIcon from "@mui/icons-material/AspectRatio";
|
5
5
|
import useResize from "../../utils/customHooks/useResize";
|
6
6
|
import EmbedPopup from "./EmbedPopup";
|
7
7
|
import { IconButton, Tooltip } from "@mui/material";
|
8
8
|
import { GridSettingsIcon } from "../../common/iconslist";
|
9
|
+
import QuiltedImageList from "../../common/ImageList";
|
10
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
9
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
13
|
const Image = ({
|
@@ -17,11 +19,14 @@ const Image = ({
|
|
17
19
|
const {
|
18
20
|
url,
|
19
21
|
alt,
|
22
|
+
images = [],
|
20
23
|
bannerSpacing,
|
21
24
|
alignment,
|
22
25
|
bgColor,
|
23
26
|
borderColor,
|
24
|
-
borderRadius
|
27
|
+
borderRadius,
|
28
|
+
cols,
|
29
|
+
rowHeight
|
25
30
|
} = element;
|
26
31
|
const {
|
27
32
|
readOnly
|
@@ -43,7 +48,7 @@ const Image = ({
|
|
43
48
|
horizantal
|
44
49
|
} = alignment || {};
|
45
50
|
const editor = useSlateStatic();
|
46
|
-
const selected = useSelected();
|
51
|
+
// const selected = useSelected();
|
47
52
|
const [parentDOM, setParentDOM] = useState(null);
|
48
53
|
const [openSetttings, setOpenSettings] = useState(false);
|
49
54
|
const [size, onMouseDown, resizing, onLoad] = useResize({
|
@@ -53,8 +58,12 @@ const Image = ({
|
|
53
58
|
const arr = Array.from(Node.elements(editor));
|
54
59
|
const ele = arr.find(([elem]) => element === elem);
|
55
60
|
const path = ReactEditor.findPath(editor, element);
|
61
|
+
const {
|
62
|
+
hoverPath
|
63
|
+
} = useEditorContext();
|
64
|
+
const selected = hoverPath === path.join(",");
|
56
65
|
useEffect(() => {
|
57
|
-
if (editor && ele[1] !== undefined) {
|
66
|
+
if (editor && ele && ele[1] !== undefined) {
|
58
67
|
const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
|
59
68
|
setParentDOM(dom);
|
60
69
|
onLoad(element?.size || {});
|
@@ -125,6 +134,7 @@ const Image = ({
|
|
125
134
|
}) : null;
|
126
135
|
};
|
127
136
|
const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
|
137
|
+
const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
|
128
138
|
return /*#__PURE__*/_jsxs("div", {
|
129
139
|
...attributes,
|
130
140
|
className: "embed has-hover",
|
@@ -142,6 +152,7 @@ const Image = ({
|
|
142
152
|
border: `1px solid ${borderColor}`
|
143
153
|
},
|
144
154
|
...element.attr,
|
155
|
+
"data-path": path.join(","),
|
145
156
|
children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
|
146
157
|
element: element,
|
147
158
|
onSave: onSave,
|
@@ -153,16 +164,22 @@ const Image = ({
|
|
153
164
|
contentEditable: false,
|
154
165
|
style: {
|
155
166
|
position: "relative",
|
156
|
-
width:
|
167
|
+
width: `${width}`,
|
157
168
|
height: `${size.height}px`
|
158
169
|
},
|
159
|
-
children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(
|
170
|
+
children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), images?.length > 1 ? /*#__PURE__*/_jsx(QuiltedImageList, {
|
171
|
+
itemData: images || [],
|
172
|
+
readOnly: true,
|
173
|
+
rowHeight: rowHeight,
|
174
|
+
cols: cols
|
175
|
+
}) : /*#__PURE__*/_jsx("img", {
|
160
176
|
style: {
|
161
177
|
borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`
|
162
178
|
},
|
163
179
|
alt: alt,
|
164
180
|
src: url,
|
165
|
-
onClick: handleImageClick
|
181
|
+
onClick: handleImageClick,
|
182
|
+
"data-path": path.join(",")
|
166
183
|
}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
|
167
184
|
onPointerDown: onMouseDown,
|
168
185
|
style: {
|