@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
@@ -19,6 +19,9 @@ const SignaturePopup = props => {
|
|
19
19
|
customProps,
|
20
20
|
className
|
21
21
|
} = props;
|
22
|
+
const {
|
23
|
+
readOnly
|
24
|
+
} = customProps;
|
22
25
|
const [open, setOpen] = useState(false);
|
23
26
|
const [tab, setTab] = useState(0);
|
24
27
|
const SeletectedTab = SignatureOptions[tab];
|
@@ -77,7 +80,7 @@ const SignaturePopup = props => {
|
|
77
80
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
78
81
|
children: [/*#__PURE__*/_jsx("div", {
|
79
82
|
className: `signature-btn-container`,
|
80
|
-
children: /*#__PURE__*/_jsx(
|
83
|
+
children: /*#__PURE__*/_jsx(Button, {
|
81
84
|
contentEditable: false,
|
82
85
|
onClick: handleOpen,
|
83
86
|
children: "Sign Here"
|
@@ -187,13 +190,14 @@ const SignaturePopup = props => {
|
|
187
190
|
sx: {
|
188
191
|
pt: 2
|
189
192
|
},
|
193
|
+
spacing: 1,
|
190
194
|
style: {
|
191
195
|
display: "flex",
|
192
196
|
justifyContent: "space-between"
|
193
197
|
},
|
194
198
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
195
199
|
item: true,
|
196
|
-
xs:
|
200
|
+
xs: 6,
|
197
201
|
style: {
|
198
202
|
display: "flex",
|
199
203
|
alignItems: "center"
|
@@ -207,7 +211,10 @@ const SignaturePopup = props => {
|
|
207
211
|
children: "Name:"
|
208
212
|
})
|
209
213
|
}), /*#__PURE__*/_jsx(Grid, {
|
214
|
+
item: true,
|
215
|
+
xs: 12,
|
210
216
|
children: /*#__PURE__*/_jsx(TextField, {
|
217
|
+
fullWidth: true,
|
211
218
|
id: "signedBy",
|
212
219
|
name: "signedBy",
|
213
220
|
placeholder: "Enter Name",
|
@@ -217,7 +224,7 @@ const SignaturePopup = props => {
|
|
217
224
|
})]
|
218
225
|
}), /*#__PURE__*/_jsxs(Grid, {
|
219
226
|
item: true,
|
220
|
-
xs:
|
227
|
+
xs: 6,
|
221
228
|
style: {
|
222
229
|
display: "flex",
|
223
230
|
alignItems: "center"
|
@@ -231,6 +238,8 @@ const SignaturePopup = props => {
|
|
231
238
|
children: "Date:"
|
232
239
|
})
|
233
240
|
}), /*#__PURE__*/_jsx(Grid, {
|
241
|
+
item: true,
|
242
|
+
xs: 12,
|
234
243
|
children: /*#__PURE__*/_jsx(DatePicker, {
|
235
244
|
showIcon: true,
|
236
245
|
id: "signedOn",
|
@@ -244,6 +253,33 @@ const SignaturePopup = props => {
|
|
244
253
|
}
|
245
254
|
})
|
246
255
|
})]
|
256
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
257
|
+
item: true,
|
258
|
+
xs: 6,
|
259
|
+
style: {
|
260
|
+
display: "flex",
|
261
|
+
alignItems: "center"
|
262
|
+
},
|
263
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
264
|
+
style: {
|
265
|
+
marginRight: "8px"
|
266
|
+
},
|
267
|
+
children: /*#__PURE__*/_jsx("label", {
|
268
|
+
htmlFor: "signedByEmail",
|
269
|
+
children: "Email:"
|
270
|
+
})
|
271
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
272
|
+
item: true,
|
273
|
+
xs: 12,
|
274
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
275
|
+
fullWidth: true,
|
276
|
+
id: "signedByEmail",
|
277
|
+
name: "signedByEmail",
|
278
|
+
placeholder: "Enter Email",
|
279
|
+
size: "small",
|
280
|
+
onChange: onChange
|
281
|
+
})
|
282
|
+
})]
|
247
283
|
})]
|
248
284
|
})]
|
249
285
|
}), /*#__PURE__*/_jsxs(DialogActions, {
|
@@ -293,11 +329,11 @@ const SignaturePopup = props => {
|
|
293
329
|
})
|
294
330
|
})]
|
295
331
|
}) : null, /*#__PURE__*/_jsxs(_Fragment, {
|
296
|
-
children: [/*#__PURE__*/_jsx(Button, {
|
332
|
+
children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
|
297
333
|
onClick: handleClear,
|
298
334
|
className: "secondaryBtn",
|
299
|
-
children: "
|
300
|
-
}), /*#__PURE__*/_jsx(Button, {
|
335
|
+
children: "Delete"
|
336
|
+
}) : null, /*#__PURE__*/_jsx(Button, {
|
301
337
|
onClick: handleSave,
|
302
338
|
className: "primaryBtn",
|
303
339
|
children: "Save"
|
@@ -0,0 +1,62 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
|
3
|
+
import { Node } from "slate";
|
4
|
+
import { Box } from "@mui/material";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
const SimpleTextStyle = () => ({
|
8
|
+
root: {
|
9
|
+
position: "relative",
|
10
|
+
padding: "0px",
|
11
|
+
"& .placeholder-simple-text": {
|
12
|
+
color: "#B8C5D7",
|
13
|
+
background: "#FFF",
|
14
|
+
position: "absolute",
|
15
|
+
zIndex: -1,
|
16
|
+
left: "4px",
|
17
|
+
top: 0,
|
18
|
+
bottom: 0,
|
19
|
+
margin: "auto",
|
20
|
+
pointerEvents: "none",
|
21
|
+
height: "18px",
|
22
|
+
padding: "0px",
|
23
|
+
"& .bg-pad-sl": {
|
24
|
+
padding: "2px 4px 2px 4px",
|
25
|
+
background: "#F2F6FA",
|
26
|
+
fontSize: "12px"
|
27
|
+
}
|
28
|
+
}
|
29
|
+
}
|
30
|
+
});
|
31
|
+
const SimpleText = props => {
|
32
|
+
const {
|
33
|
+
element,
|
34
|
+
attributes,
|
35
|
+
children
|
36
|
+
} = props;
|
37
|
+
const classes = SimpleTextStyle();
|
38
|
+
const editor = useSlateStatic();
|
39
|
+
const selected = useSelected();
|
40
|
+
const path = ReactEditor.findPath(editor, element);
|
41
|
+
// const parentPath = Path.parent(path);
|
42
|
+
// const parentNode = Node.get(editor, parentPath);
|
43
|
+
const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
|
44
|
+
const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
|
45
|
+
return /*#__PURE__*/_jsxs(Box, {
|
46
|
+
...element.attr,
|
47
|
+
...attributes,
|
48
|
+
className: `simple-text`,
|
49
|
+
sx: classes.root,
|
50
|
+
children: [children, selected && noContent ? /*#__PURE__*/_jsxs("span", {
|
51
|
+
className: "placeholder-simple-text",
|
52
|
+
children: ["Type ", /*#__PURE__*/_jsx("span", {
|
53
|
+
className: "bg-pad-sl",
|
54
|
+
children: "/"
|
55
|
+
}), " for browse elements"]
|
56
|
+
}) : null, emptyEditor ? /*#__PURE__*/_jsx("span", {
|
57
|
+
className: "placeholder-simple-text",
|
58
|
+
children: "Write Something..."
|
59
|
+
}) : null]
|
60
|
+
});
|
61
|
+
};
|
62
|
+
export default SimpleText;
|
@@ -0,0 +1,66 @@
|
|
1
|
+
const TableStyles = () => ({
|
2
|
+
tableToolBar: {
|
3
|
+
position: "absolute",
|
4
|
+
top: "-34px",
|
5
|
+
left: 0,
|
6
|
+
backgroundColor: "#FFF",
|
7
|
+
border: "1px solid rgba(37, 99, 235, 0.32)",
|
8
|
+
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
|
9
|
+
borderRadius: "0px",
|
10
|
+
width: "32px",
|
11
|
+
height: "32px",
|
12
|
+
overflow: "hidden",
|
13
|
+
transition: "all 0.3s",
|
14
|
+
"& button": {
|
15
|
+
"& svg": {
|
16
|
+
width: "16px",
|
17
|
+
height: "16px"
|
18
|
+
}
|
19
|
+
},
|
20
|
+
"&.active": {
|
21
|
+
width: "auto",
|
22
|
+
"& .toggle": {
|
23
|
+
rotate: "180deg"
|
24
|
+
}
|
25
|
+
},
|
26
|
+
"& .toolbtn": {
|
27
|
+
"& svg": {
|
28
|
+
stroke: "rgb(100, 116, 139)"
|
29
|
+
}
|
30
|
+
}
|
31
|
+
},
|
32
|
+
table: {
|
33
|
+
"& td": {
|
34
|
+
padding: "8px 8px",
|
35
|
+
border: "1px solid #E0E0E0",
|
36
|
+
"&.selection": {
|
37
|
+
"& *::selection": {
|
38
|
+
background: "transparent"
|
39
|
+
}
|
40
|
+
}
|
41
|
+
},
|
42
|
+
"& .selection-area-tc": {
|
43
|
+
position: "absolute",
|
44
|
+
width: "100%",
|
45
|
+
height: "100%",
|
46
|
+
top: 0,
|
47
|
+
left: 0,
|
48
|
+
background: "rgba(149, 218, 255, .3)",
|
49
|
+
pointerEvents: "none"
|
50
|
+
}
|
51
|
+
},
|
52
|
+
cellResizer: {
|
53
|
+
position: "absolute",
|
54
|
+
cursor: "col-resize",
|
55
|
+
right: "-2px",
|
56
|
+
top: 0,
|
57
|
+
background: "transparent",
|
58
|
+
width: "4px",
|
59
|
+
borderRadius: "0px",
|
60
|
+
zIndex: 1,
|
61
|
+
"&:hover": {
|
62
|
+
background: "#ccc"
|
63
|
+
}
|
64
|
+
}
|
65
|
+
});
|
66
|
+
export default TableStyles;
|
@@ -1,18 +1,21 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { useSelected, useSlateStatic } from "slate-react";
|
4
|
-
import { IconButton } from "@mui/material";
|
4
|
+
import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
|
5
5
|
import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
|
6
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
|
+
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
10
12
|
import SettingsIcon from "@mui/icons-material/Settings";
|
11
13
|
import DeleteCellIcon from "./DeleteCellIcon";
|
12
14
|
import DeleteRowIcon from "./DeleteRowIcon";
|
13
15
|
import { TableUtil } from "../../utils/table";
|
14
16
|
import TablePopup from "./TablePopup";
|
15
17
|
import "./table.css";
|
18
|
+
import TableStyles from "./Styles";
|
16
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
17
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
18
21
|
const TABLE_MENUS = [{
|
@@ -75,10 +78,12 @@ const Table = props => {
|
|
75
78
|
children,
|
76
79
|
customProps
|
77
80
|
} = props;
|
81
|
+
const classes = TableStyles();
|
78
82
|
const {
|
79
83
|
readOnly
|
80
84
|
} = customProps;
|
81
85
|
const [openSetttings, setOpenSettings] = useState(false);
|
86
|
+
const [exandTools, setExpandTools] = useState(false);
|
82
87
|
const {
|
83
88
|
bgColor,
|
84
89
|
borderColor
|
@@ -117,27 +122,38 @@ const Table = props => {
|
|
117
122
|
return;
|
118
123
|
}
|
119
124
|
};
|
125
|
+
const handleExpand = () => {
|
126
|
+
setExpandTools(!exandTools);
|
127
|
+
};
|
120
128
|
const ToolBar = () => {
|
121
|
-
return selected ? /*#__PURE__*/
|
129
|
+
return selected ? /*#__PURE__*/_jsxs(Box, {
|
130
|
+
component: "div",
|
122
131
|
contentEditable: false,
|
123
|
-
className:
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
132
|
+
className: `tableToolBar ${exandTools ? "active" : ""}`,
|
133
|
+
sx: classes.tableToolBar,
|
134
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
135
|
+
title: "Show Tools",
|
136
|
+
arrow: true,
|
137
|
+
onClick: handleExpand,
|
138
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
139
|
+
className: "toolbtn toggle",
|
140
|
+
children: /*#__PURE__*/_jsx(MoreVertIcon, {})
|
141
|
+
})
|
142
|
+
}), TABLE_MENUS.map(({
|
131
143
|
Icon,
|
132
144
|
text,
|
133
145
|
action
|
134
146
|
}) => {
|
135
|
-
return /*#__PURE__*/_jsx(
|
147
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
136
148
|
title: text,
|
137
|
-
|
138
|
-
children: /*#__PURE__*/_jsx(
|
149
|
+
arrow: true,
|
150
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
151
|
+
className: "toolbtn",
|
152
|
+
onClick: handleAction(action),
|
153
|
+
children: /*#__PURE__*/_jsx(Icon, {})
|
154
|
+
})
|
139
155
|
}, text);
|
140
|
-
})
|
156
|
+
})]
|
141
157
|
}) : null;
|
142
158
|
};
|
143
159
|
const onSettings = () => {
|
@@ -163,13 +179,14 @@ const Table = props => {
|
|
163
179
|
maxWidth: "100%",
|
164
180
|
position: "relative"
|
165
181
|
},
|
166
|
-
children: [/*#__PURE__*/_jsx(
|
182
|
+
children: [/*#__PURE__*/_jsx(TableComp, {
|
183
|
+
sx: classes.table,
|
167
184
|
style: {
|
168
185
|
backgroundColor: bgColor,
|
169
186
|
border: `1px solid ${borderColor}`,
|
170
187
|
width: "auto"
|
171
188
|
},
|
172
|
-
children: /*#__PURE__*/_jsx(
|
189
|
+
children: /*#__PURE__*/_jsx(TableBody, {
|
173
190
|
...attributes,
|
174
191
|
children: children
|
175
192
|
})
|
@@ -1,34 +1,33 @@
|
|
1
1
|
import React, { useState, useEffect } from "react";
|
2
2
|
import { Editor, Element } from "slate";
|
3
|
-
import {
|
4
|
-
import
|
5
|
-
import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
|
3
|
+
import { Box } from "@mui/material";
|
4
|
+
import { useSlateStatic, ReactEditor } from "slate-react";
|
6
5
|
import useTableResize from "../../utils/customHooks/useTableResize";
|
7
6
|
import { TableUtil } from "../../utils/table";
|
7
|
+
import TableStyles from "./Styles";
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
9
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
10
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
11
|
const Resizer = ({
|
12
|
-
|
12
|
+
classes,
|
13
|
+
onMouseDown,
|
14
|
+
height
|
13
15
|
}) => {
|
14
16
|
return /*#__PURE__*/_jsx(_Fragment, {
|
15
|
-
children: /*#__PURE__*/_jsx(
|
17
|
+
children: /*#__PURE__*/_jsx(Box, {
|
18
|
+
component: "div",
|
16
19
|
className: "cell-resizer",
|
17
20
|
contentEditable: false,
|
18
21
|
onPointerDown: onMouseDown,
|
22
|
+
sx: classes.cellResizer,
|
19
23
|
style: {
|
20
|
-
|
21
|
-
|
22
|
-
top: 0,
|
23
|
-
background: "none",
|
24
|
-
width: "15px",
|
25
|
-
height: "100%"
|
26
|
-
},
|
27
|
-
children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
|
24
|
+
height: `${height}px`
|
25
|
+
}
|
28
26
|
})
|
29
27
|
});
|
30
28
|
};
|
31
29
|
const TableCell = props => {
|
30
|
+
const classes = TableStyles();
|
32
31
|
const {
|
33
32
|
element,
|
34
33
|
attributes,
|
@@ -40,17 +39,18 @@ const TableCell = props => {
|
|
40
39
|
} = customProps;
|
41
40
|
const {
|
42
41
|
bgColor,
|
43
|
-
borderColor
|
42
|
+
borderColor,
|
43
|
+
entireBgColor
|
44
44
|
} = element;
|
45
45
|
const [parentDOM, setParentDOM] = useState(null);
|
46
46
|
const editor = useSlateStatic();
|
47
|
-
const selected = useSelected();
|
48
47
|
const path = ReactEditor.findPath(editor, element);
|
49
48
|
const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
|
50
49
|
const [size, onMouseDown, resizing, onLoad] = useTableResize({
|
51
50
|
parentDOM,
|
52
51
|
size: element?.size
|
53
52
|
});
|
53
|
+
const [tableSize, setTableSize] = useState({});
|
54
54
|
const table = new TableUtil(editor);
|
55
55
|
const tableProps = table.getTableProps();
|
56
56
|
const [tableNode] = Editor.nodes(editor, {
|
@@ -63,16 +63,40 @@ const TableCell = props => {
|
|
63
63
|
});
|
64
64
|
const [parentProps] = tableNode || [{}];
|
65
65
|
const [rowProps] = rowNode || [{}];
|
66
|
+
const tableDOM = table.getDOMNode(path, true);
|
67
|
+
const isCellSelected = table.isCellSelected(editor.selection);
|
68
|
+
const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
|
66
69
|
useEffect(() => {
|
67
|
-
if (
|
70
|
+
if (tableDOM) {
|
71
|
+
const {
|
72
|
+
width,
|
73
|
+
height
|
74
|
+
} = tableDOM.getBoundingClientRect();
|
75
|
+
const {
|
76
|
+
width: parentWidth
|
77
|
+
} = tableDOM?.parentNode?.parentNode?.getBoundingClientRect();
|
78
|
+
const {
|
79
|
+
styleProps
|
80
|
+
} = tableProps || {};
|
81
|
+
const columns = styleProps ? styleProps["table.columns"] : 2;
|
82
|
+
setTableSize({
|
83
|
+
width,
|
84
|
+
height,
|
85
|
+
parentWidth,
|
86
|
+
cellWidth: parentWidth / columns
|
87
|
+
});
|
88
|
+
}
|
89
|
+
}, [tableDOM]);
|
90
|
+
useEffect(() => {
|
91
|
+
if (editor && element && tableSize) {
|
68
92
|
const dom = ReactEditor.toDOMNode(editor, element);
|
69
93
|
setParentDOM(dom);
|
70
94
|
onLoad(element?.size || {
|
71
|
-
width:
|
95
|
+
width: tableSize?.cellWidth,
|
72
96
|
height: 100
|
73
97
|
});
|
74
98
|
}
|
75
|
-
}, []);
|
99
|
+
}, [tableSize]);
|
76
100
|
useEffect(() => {
|
77
101
|
if (!resizing && tableProps) {
|
78
102
|
table.updateTableStyle({
|
@@ -81,20 +105,26 @@ const TableCell = props => {
|
|
81
105
|
}
|
82
106
|
}, [resizing]);
|
83
107
|
const sizeProps = isHeader ? {
|
84
|
-
width: size?.width ||
|
108
|
+
width: size?.width || tableSize?.cellWidth
|
85
109
|
} : {};
|
110
|
+
const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor;
|
86
111
|
return /*#__PURE__*/_jsxs("td", {
|
87
112
|
...element.attr,
|
88
113
|
...attributes,
|
89
|
-
className:
|
114
|
+
className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
|
90
115
|
style: {
|
91
116
|
position: "relative",
|
92
|
-
backgroundColor: bgColor,
|
93
|
-
border: `3px solid ${
|
117
|
+
backgroundColor: bgColor || entireBgColor,
|
118
|
+
border: `3px solid ${cellBorderColor}`,
|
94
119
|
...(sizeProps || {})
|
95
120
|
},
|
96
|
-
children: [children,
|
97
|
-
|
121
|
+
children: [children, isHeader && !readOnly && tableSize?.height ? /*#__PURE__*/_jsx(Resizer, {
|
122
|
+
classes: classes,
|
123
|
+
onMouseDown: onMouseDown,
|
124
|
+
height: tableSize?.height
|
125
|
+
}) : null, hasSelected ? /*#__PURE__*/_jsx("div", {
|
126
|
+
className: "selection-area-tc",
|
127
|
+
contentEditable: false
|
98
128
|
}) : null]
|
99
129
|
});
|
100
130
|
};
|
@@ -1,16 +1,16 @@
|
|
1
1
|
import React, { useRef, useState } from "react";
|
2
|
-
import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography
|
2
|
+
import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography } from "@mui/material";
|
3
3
|
import Icon from "../../common/Icon";
|
4
4
|
import { Transforms } from "slate";
|
5
5
|
import { TableUtil } from "../../utils/table.js";
|
6
6
|
import "./TableSelector.css";
|
7
7
|
import CloseIcon from "@mui/icons-material/Close";
|
8
|
-
|
9
|
-
// import styled from "@emotion/styled";
|
8
|
+
import ToolbarIcon from "../../common/ToolbarIcon";
|
10
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
11
|
const TableSelector = ({
|
13
|
-
editor
|
12
|
+
editor,
|
13
|
+
icoBtnType
|
14
14
|
}) => {
|
15
15
|
const tableOptionsRef = useRef();
|
16
16
|
const [selection, setSelection] = useState();
|
@@ -41,18 +41,16 @@ const TableSelector = ({
|
|
41
41
|
return /*#__PURE__*/_jsxs("div", {
|
42
42
|
ref: tableOptionsRef,
|
43
43
|
className: "popup-wrapper1 ",
|
44
|
-
children: [/*#__PURE__*/_jsx(
|
44
|
+
children: [/*#__PURE__*/_jsx(ToolbarIcon, {
|
45
45
|
title: "Table",
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
})
|
55
|
-
})
|
46
|
+
style: {
|
47
|
+
border: showOptions ? "1px solid lightgray" : "none"
|
48
|
+
},
|
49
|
+
onClick: handleButtonClick,
|
50
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
51
|
+
icon: "table"
|
52
|
+
}),
|
53
|
+
icoBtnType: icoBtnType
|
56
54
|
}), showOptions ? /*#__PURE__*/_jsx(Dialog, {
|
57
55
|
open: showOptions,
|
58
56
|
className: `dialogComp tablePopup`,
|
@@ -0,0 +1,33 @@
|
|
1
|
+
const TopBannerStyles = () => ({
|
2
|
+
root: {
|
3
|
+
"&:hover": {
|
4
|
+
"& .tb-toolbar": {
|
5
|
+
display: "block"
|
6
|
+
}
|
7
|
+
}
|
8
|
+
},
|
9
|
+
toolbar: {
|
10
|
+
position: "absolute",
|
11
|
+
width: "auto",
|
12
|
+
bottom: "8px",
|
13
|
+
left: 0,
|
14
|
+
right: 0,
|
15
|
+
margin: "auto",
|
16
|
+
display: "none",
|
17
|
+
"& button": {
|
18
|
+
background: "#FFF",
|
19
|
+
border: "1px solid #ccc",
|
20
|
+
borderRadius: "6px",
|
21
|
+
color: "#373232",
|
22
|
+
marginRight: "8px",
|
23
|
+
padding: "4px 8px",
|
24
|
+
textTransform: "capitalize",
|
25
|
+
fontSize: "14px",
|
26
|
+
"&:hover": {
|
27
|
+
background: "#ccc",
|
28
|
+
color: "#373232"
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
32
|
+
});
|
33
|
+
export default TopBannerStyles;
|
@@ -0,0 +1,106 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Box, Button } from "@mui/material";
|
3
|
+
import { updateTopBanner, removeTopBanner } from "../../utils/topBanner";
|
4
|
+
import ImageSelector from "../../common/ImageSelector/ImageSelector";
|
5
|
+
import TopBannerStyles from "./Styles";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
|
+
export const TopBannerToolbar = props => {
|
10
|
+
const {
|
11
|
+
classes,
|
12
|
+
customProps,
|
13
|
+
editor
|
14
|
+
} = props;
|
15
|
+
const [open, setOpen] = useState(false);
|
16
|
+
const handleClick = type => () => {
|
17
|
+
switch (type) {
|
18
|
+
case "change":
|
19
|
+
setOpen(true);
|
20
|
+
break;
|
21
|
+
case "remove":
|
22
|
+
removeTopBanner(editor);
|
23
|
+
break;
|
24
|
+
default:
|
25
|
+
return;
|
26
|
+
}
|
27
|
+
};
|
28
|
+
const onSelectImage = img => {
|
29
|
+
updateTopBanner(editor, {
|
30
|
+
url: img
|
31
|
+
});
|
32
|
+
handleClose();
|
33
|
+
};
|
34
|
+
const handleClose = () => {
|
35
|
+
setOpen(false);
|
36
|
+
};
|
37
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
38
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
39
|
+
component: "div",
|
40
|
+
className: "tb-toolbar",
|
41
|
+
sx: classes.toolbar,
|
42
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
43
|
+
onClick: handleClick("change"),
|
44
|
+
children: "Change Image"
|
45
|
+
}), /*#__PURE__*/_jsx(Button, {
|
46
|
+
onClick: handleClick("remove"),
|
47
|
+
children: "Remove"
|
48
|
+
})]
|
49
|
+
}), /*#__PURE__*/_jsx(ImageSelector, {
|
50
|
+
open: open,
|
51
|
+
onClose: handleClose,
|
52
|
+
customProps: customProps,
|
53
|
+
onSelectImage: onSelectImage
|
54
|
+
})]
|
55
|
+
});
|
56
|
+
};
|
57
|
+
const TopBanner = props => {
|
58
|
+
const {
|
59
|
+
attributes,
|
60
|
+
element,
|
61
|
+
children,
|
62
|
+
customProps
|
63
|
+
} = props;
|
64
|
+
const {
|
65
|
+
readOnly
|
66
|
+
} = customProps;
|
67
|
+
const {
|
68
|
+
url
|
69
|
+
} = element;
|
70
|
+
const classes = TopBannerStyles();
|
71
|
+
return /*#__PURE__*/_jsxs(Box, {
|
72
|
+
component: "div",
|
73
|
+
...attributes,
|
74
|
+
style: {
|
75
|
+
position: "relative",
|
76
|
+
height: "320px",
|
77
|
+
textAlign: "center"
|
78
|
+
},
|
79
|
+
contentEditable: false,
|
80
|
+
sx: classes.root,
|
81
|
+
children: [/*#__PURE__*/_jsx("img", {
|
82
|
+
src: url,
|
83
|
+
alt: "Top Banner",
|
84
|
+
style: {
|
85
|
+
width: "90%",
|
86
|
+
height: "320px",
|
87
|
+
objectFit: "cover",
|
88
|
+
borderRadius: "12px",
|
89
|
+
margin: "0px 0px"
|
90
|
+
}
|
91
|
+
}), !readOnly ? /*#__PURE__*/_jsx(TopBannerToolbar, {
|
92
|
+
...props,
|
93
|
+
classes: classes
|
94
|
+
}) : null, /*#__PURE__*/_jsx("span", {
|
95
|
+
style: {
|
96
|
+
display: "none"
|
97
|
+
},
|
98
|
+
children: children
|
99
|
+
})]
|
100
|
+
});
|
101
|
+
};
|
102
|
+
TopBanner.defaultProps = {
|
103
|
+
attributes: {},
|
104
|
+
children: []
|
105
|
+
};
|
106
|
+
export default TopBanner;
|