@flozy/editor 5.0.5 → 5.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/CommonEditor.js +6 -4
- package/dist/Editor/Editor.css +19 -1
- package/dist/Editor/Elements/Button/EditorButton.js +71 -53
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +4 -2
- package/dist/Editor/Elements/DataView/DataView.js +101 -0
- package/dist/Editor/Elements/DataView/DataViewButton.js +23 -0
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +59 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +128 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js +25 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +26 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +38 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +35 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +36 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js +17 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js +28 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +37 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +74 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +59 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +66 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterView.js +174 -0
- package/dist/Editor/Elements/DataView/Layouts/Formula.js +29 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +113 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +37 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +111 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +62 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js +36 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js +101 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +158 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +190 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +42 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +110 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +176 -0
- package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +94 -0
- package/dist/Editor/Elements/DataView/Layouts/TableView.js +214 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +83 -0
- package/dist/Editor/Elements/DataView/Layouts/index.js +25 -0
- package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +288 -0
- package/dist/Editor/Elements/DataView/Utils/globalSearch.js +15 -0
- package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +72 -0
- package/dist/Editor/Elements/DataView/styles.js +133 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +2 -1
- package/dist/Editor/Elements/Signature/Signature.css +1 -1
- package/dist/Editor/Elements/Table/AddRowCol.js +1 -1
- package/dist/Editor/Elements/Table/DragButton.js +71 -68
- package/dist/Editor/Elements/Table/Styles.js +2 -2
- package/dist/Editor/Elements/Table/Table.js +10 -7
- package/dist/Editor/Elements/Table/TableCell.js +21 -21
- package/dist/Editor/Elements/Table/tableHelper.js +4 -16
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/Toolbar.js +6 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +4 -0
- package/dist/Editor/assets/svg/OpenLinkIcon.js +3 -3
- package/dist/Editor/common/Icon.js +7 -1
- package/dist/Editor/common/MentionsPopup/index.js +1 -1
- package/dist/Editor/common/Shorthands/elements.js +13 -1
- package/dist/Editor/common/StyleBuilder/tableStyle.js +1 -1
- package/dist/Editor/common/iconslist.js +6 -3
- package/dist/Editor/hooks/useTable.js +4 -5
- package/dist/Editor/plugins/withHTML.js +18 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +16 -0
- package/dist/Editor/utils/dataView.js +43 -0
- package/dist/Editor/utils/embed.js +2 -1
- package/dist/Editor/utils/helper.js +19 -1
- package/dist/Editor/utils/insertNewLine.js +19 -1
- package/package.json +1 -1
@@ -0,0 +1,133 @@
|
|
1
|
+
const useDataViewStyles = (theme, appTheme) => ({
|
2
|
+
root: {
|
3
|
+
width: "100%",
|
4
|
+
overflowX: "auto",
|
5
|
+
marginTop: "8px",
|
6
|
+
"& table": {
|
7
|
+
width: "100%",
|
8
|
+
"& th.fe-tv-ap-ico": {
|
9
|
+
width: "50px"
|
10
|
+
}
|
11
|
+
},
|
12
|
+
"& table th": {
|
13
|
+
cursor: "pointer",
|
14
|
+
width: "200px"
|
15
|
+
},
|
16
|
+
"& table, th, td": {
|
17
|
+
border: "1px solid black",
|
18
|
+
borderCollapse: "collapse"
|
19
|
+
},
|
20
|
+
"& .react-datepicker-wrapper": {
|
21
|
+
width: "100%",
|
22
|
+
"& input": {
|
23
|
+
padding: "6px 12px"
|
24
|
+
}
|
25
|
+
},
|
26
|
+
"& .MuiInputBase-root": {
|
27
|
+
"& fieldset": {
|
28
|
+
border: "none"
|
29
|
+
}
|
30
|
+
},
|
31
|
+
// filter view
|
32
|
+
"& .fe-tv-fv": {
|
33
|
+
marginBottom: "8px",
|
34
|
+
"& .mr": {
|
35
|
+
marginRight: "4px"
|
36
|
+
},
|
37
|
+
[theme.breakpoints.between("xs", "md")]: {
|
38
|
+
display: "flex",
|
39
|
+
flexDirection: "column"
|
40
|
+
}
|
41
|
+
},
|
42
|
+
"& .tv-act-row": {
|
43
|
+
"& .tv-tr-pop": {
|
44
|
+
opacity: 0,
|
45
|
+
"&.active": {
|
46
|
+
opacity: 1
|
47
|
+
}
|
48
|
+
},
|
49
|
+
"&:hover": {
|
50
|
+
"& .tv-tr-pop": {
|
51
|
+
opacity: 1
|
52
|
+
}
|
53
|
+
}
|
54
|
+
}
|
55
|
+
},
|
56
|
+
filterView: {
|
57
|
+
display: "flex",
|
58
|
+
justifyContent: "space-between",
|
59
|
+
alignItems: "center",
|
60
|
+
"& .MuiButtonBase-root": {
|
61
|
+
padding: "6px",
|
62
|
+
width: "24px",
|
63
|
+
height: "24px",
|
64
|
+
"&.active": {
|
65
|
+
color: "rgba(37, 99, 235, 1)"
|
66
|
+
}
|
67
|
+
},
|
68
|
+
"& .tv-sb": {
|
69
|
+
display: "flex",
|
70
|
+
border: "1px solid transparent",
|
71
|
+
width: "24px",
|
72
|
+
transition: "width 1s",
|
73
|
+
"&.open": {
|
74
|
+
width: "fit-content",
|
75
|
+
border: "1px solid rgba(236, 236, 236, 1)",
|
76
|
+
borderRadius: "8px"
|
77
|
+
},
|
78
|
+
"& input": {
|
79
|
+
paddingBottom: "0px",
|
80
|
+
fontSize: "14px"
|
81
|
+
}
|
82
|
+
},
|
83
|
+
"& .tv-title-wrpr, .tv-fi-wrpr": {
|
84
|
+
display: "flex",
|
85
|
+
"& button": {
|
86
|
+
color: appTheme?.palette?.editor?.tv_text
|
87
|
+
},
|
88
|
+
"& input": {
|
89
|
+
color: appTheme?.palette?.editor?.tv_text
|
90
|
+
}
|
91
|
+
},
|
92
|
+
"& .tv-title-wrpr": {
|
93
|
+
width: "80%",
|
94
|
+
marginRight: "8px",
|
95
|
+
"& .MuiInputBase-root": {
|
96
|
+
width: "100%"
|
97
|
+
},
|
98
|
+
[theme.breakpoints.between("xs", "md")]: {
|
99
|
+
width: "100%",
|
100
|
+
marginRight: "0px"
|
101
|
+
}
|
102
|
+
},
|
103
|
+
"& .tv-fi-wrpr": {
|
104
|
+
[theme.breakpoints.between("xs", "md")]: {
|
105
|
+
width: "100%",
|
106
|
+
justifyContent: "end"
|
107
|
+
}
|
108
|
+
}
|
109
|
+
},
|
110
|
+
basicMenu: {
|
111
|
+
"& .MuiPaper-root": {
|
112
|
+
padding: "0px 6px",
|
113
|
+
width: "150px",
|
114
|
+
border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
|
115
|
+
borderRadius: "8px",
|
116
|
+
background: appTheme?.palette?.editor?.tv_pop_bg,
|
117
|
+
color: appTheme?.palette?.editor?.tv_text_primary,
|
118
|
+
"& .MuiButtonBase-root": {
|
119
|
+
fontSize: "14px",
|
120
|
+
"& svg": {
|
121
|
+
width: "16px",
|
122
|
+
height: "16px"
|
123
|
+
},
|
124
|
+
"&:hover": {
|
125
|
+
background: appTheme?.palette?.editor?.tv_hover_bg,
|
126
|
+
borderRadius: "8px",
|
127
|
+
color: appTheme?.palette?.editor?.tv_hover_text
|
128
|
+
}
|
129
|
+
}
|
130
|
+
}
|
131
|
+
}
|
132
|
+
});
|
133
|
+
export default useDataViewStyles;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Box, Fade, IconButton, Paper,
|
1
|
+
import { Box, ClickAwayListener, Fade, IconButton, Paper, Popper } from "@mui/material";
|
2
2
|
import DragStyles from "./DragStyles";
|
3
3
|
import { DragIcon } from "../../common/iconListV2";
|
4
4
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
@@ -19,7 +19,8 @@ function DragButton({
|
|
19
19
|
className = "",
|
20
20
|
customProps,
|
21
21
|
dndProps,
|
22
|
-
resetSelection
|
22
|
+
resetSelection,
|
23
|
+
show
|
23
24
|
}) {
|
24
25
|
const {
|
25
26
|
theme
|
@@ -31,8 +32,8 @@ function DragButton({
|
|
31
32
|
isMobile
|
32
33
|
} = customProps || {};
|
33
34
|
const onDragClick = () => {
|
34
|
-
setShowTool(true);
|
35
35
|
onDrag();
|
36
|
+
setShowTool(true);
|
36
37
|
};
|
37
38
|
const onDragClose = () => {
|
38
39
|
setShowTool(false);
|
@@ -61,78 +62,80 @@ function DragButton({
|
|
61
62
|
handleAction(value, option, dragType);
|
62
63
|
}
|
63
64
|
};
|
64
|
-
return /*#__PURE__*/
|
65
|
-
children:
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
65
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
66
|
+
children: show || showTool ? /*#__PURE__*/_jsxs(_Fragment, {
|
67
|
+
children: [/*#__PURE__*/_jsx(Popper, {
|
68
|
+
sx: classes.popper,
|
69
|
+
open: Boolean(anchorEl),
|
70
|
+
anchorEl: anchorEl,
|
71
|
+
placement: placement || "left",
|
72
|
+
transition: true,
|
73
|
+
contentEditable: false,
|
74
|
+
ref: dragElement,
|
75
|
+
modifiers: [{
|
76
|
+
name: "offset",
|
77
|
+
options: {
|
78
|
+
offset: [0, -12]
|
79
|
+
}
|
80
|
+
}, {
|
81
|
+
name: "flip",
|
82
|
+
enabled: false // Disable dynamic flipping
|
83
|
+
}],
|
82
84
|
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
},
|
101
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
102
|
-
onClick: () => {
|
103
|
-
onDragClick();
|
85
|
+
disablePortal: dragType !== "row",
|
86
|
+
className: `${className}`,
|
87
|
+
children: ({
|
88
|
+
TransitionProps
|
89
|
+
}) => /*#__PURE__*/_jsx(Fade, {
|
90
|
+
...TransitionProps,
|
91
|
+
timeout: 350,
|
92
|
+
children: /*#__PURE__*/_jsx("div", {
|
93
|
+
children: /*#__PURE__*/_jsx(Draggable, {
|
94
|
+
...dragProps,
|
95
|
+
children: /*#__PURE__*/_jsx(Paper, {
|
96
|
+
sx: dragType === "row" ? {
|
97
|
+
transform: "rotate(90deg)"
|
98
|
+
} : {},
|
99
|
+
className: `${showTool ? "active" : ""}`,
|
100
|
+
style: {
|
101
|
+
lineHeight: 0
|
104
102
|
},
|
105
|
-
children: /*#__PURE__*/_jsx(
|
103
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
104
|
+
onClick: () => {
|
105
|
+
onDragClick();
|
106
|
+
},
|
107
|
+
children: /*#__PURE__*/_jsx(DragIcon, {})
|
108
|
+
})
|
106
109
|
})
|
107
110
|
})
|
108
111
|
})
|
109
112
|
})
|
110
|
-
})
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
113
|
+
}), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
|
114
|
+
open: showTool,
|
115
|
+
onClose: onDragClose,
|
116
|
+
swipeableDrawer: true,
|
117
|
+
children: /*#__PURE__*/_jsx(Box, {
|
118
|
+
sx: classes.mobileToolDrawer,
|
119
|
+
children: /*#__PURE__*/_jsx(TableToolOnDrag, {
|
120
|
+
...commonToolProps
|
121
|
+
})
|
122
|
+
})
|
123
|
+
}) : /*#__PURE__*/_jsx(Popper, {
|
124
|
+
open: showTool,
|
125
|
+
anchorEl: dragElement?.current,
|
126
|
+
contentEditable: false,
|
127
|
+
sx: classes.toolPopper,
|
128
|
+
placement: dragType === "row" ? "bottom-start" : "right-start",
|
129
|
+
children: /*#__PURE__*/_jsx(ClickAwayListener, {
|
130
|
+
onClickAway: onDragClose,
|
131
|
+
children: /*#__PURE__*/_jsx("div", {
|
132
|
+
children: /*#__PURE__*/_jsx(TableToolOnDrag, {
|
133
|
+
...commonToolProps
|
134
|
+
})
|
135
|
+
})
|
119
136
|
})
|
120
|
-
})
|
121
|
-
}) :
|
122
|
-
open: showTool,
|
123
|
-
anchorEl: dragElement?.current,
|
124
|
-
transition: true,
|
125
|
-
contentEditable: false,
|
126
|
-
sx: classes.toolPopper,
|
127
|
-
anchorOrigin: {
|
128
|
-
vertical: dragType === "row" ? "bottom" : "top",
|
129
|
-
horizontal: dragType === "row" ? "left" : "right"
|
130
|
-
},
|
131
|
-
onClose: onDragClose,
|
132
|
-
children: /*#__PURE__*/_jsx(TableToolOnDrag, {
|
133
|
-
...commonToolProps
|
134
|
-
})
|
135
|
-
})]
|
137
|
+
})]
|
138
|
+
}) : null
|
136
139
|
});
|
137
140
|
}
|
138
141
|
export default DragButton;
|
@@ -112,7 +112,7 @@ const Table = props => {
|
|
112
112
|
}
|
113
113
|
};
|
114
114
|
const handleExpand = e => {
|
115
|
-
setExpandTools(e.currentTarget);
|
115
|
+
setExpandTools(prev => prev ? false : e.currentTarget);
|
116
116
|
};
|
117
117
|
useEffect(() => {
|
118
118
|
if (!selected) {
|
@@ -179,13 +179,14 @@ const Table = props => {
|
|
179
179
|
hideRowDragBtns("", dragRowBtnCls);
|
180
180
|
}
|
181
181
|
};
|
182
|
-
const handleScrollStop = useDebouncedCallback(() => {
|
183
|
-
containerRef?.current?.classList.add("hideScroll");
|
184
|
-
}, 200);
|
185
182
|
const handleScroll = () => {
|
186
183
|
handleRowDragBtns();
|
184
|
+
};
|
185
|
+
const onMouseOver = () => {
|
187
186
|
containerRef?.current?.classList.remove("hideScroll");
|
188
|
-
|
187
|
+
};
|
188
|
+
const onMouseLeave = () => {
|
189
|
+
containerRef?.current?.classList.add("hideScroll");
|
189
190
|
};
|
190
191
|
const commonAddBtnProps = {
|
191
192
|
tableRef,
|
@@ -211,7 +212,9 @@ const Table = props => {
|
|
211
212
|
},
|
212
213
|
ref: containerRef,
|
213
214
|
onScroll: handleScroll,
|
214
|
-
|
215
|
+
onMouseOver: onMouseOver,
|
216
|
+
onMouseLeave: onMouseLeave,
|
217
|
+
className: "custom-scroll",
|
215
218
|
children: [/*#__PURE__*/_jsx(TableComp, {
|
216
219
|
className: readOnly ? "readOnly" : "",
|
217
220
|
sx: {
|
@@ -256,7 +259,7 @@ const Table = props => {
|
|
256
259
|
sx: {
|
257
260
|
zIndex: 2000
|
258
261
|
},
|
259
|
-
placement: "
|
262
|
+
placement: "bottom-start",
|
260
263
|
children: ({
|
261
264
|
TransitionProps
|
262
265
|
}) => /*#__PURE__*/_jsx(Fade, {
|
@@ -188,9 +188,6 @@ const TableCell = props => {
|
|
188
188
|
setHoverPath(null);
|
189
189
|
};
|
190
190
|
const onMouseDownInCell = e => {
|
191
|
-
if (!contentEditable) {
|
192
|
-
e.preventDefault();
|
193
|
-
}
|
194
191
|
if (
|
195
192
|
// for shift selection
|
196
193
|
e.shiftKey && startCellPath?.length && startCellPath.toString() !== path.toString()) {
|
@@ -218,13 +215,6 @@ const TableCell = props => {
|
|
218
215
|
const selectionPath = currentEditorSelection?.slice(0, -2);
|
219
216
|
const isCellSelected = selectionPath?.length && Path.equals(selectionPath, path);
|
220
217
|
if (!isCellSelected) {
|
221
|
-
// focus the clicked cell
|
222
|
-
ReactEditor.focus(editor);
|
223
|
-
Transforms.select(editor, {
|
224
|
-
anchor: Editor.end(editor, path),
|
225
|
-
focus: Editor.end(editor, path)
|
226
|
-
});
|
227
|
-
|
228
218
|
// after mousedown event, onclick is triggered, while onclick, dragging should be disabled and focus should be on that clicked cell to edit the contents inside it.
|
229
219
|
updateTableSelection({
|
230
220
|
isDragging: false
|
@@ -238,9 +228,11 @@ const TableCell = props => {
|
|
238
228
|
const props = {
|
239
229
|
id: cellId
|
240
230
|
};
|
241
|
-
|
242
|
-
|
243
|
-
|
231
|
+
|
232
|
+
// if (!contentEditable) {
|
233
|
+
// props.contentEditable = false;
|
234
|
+
// }
|
235
|
+
|
244
236
|
return props;
|
245
237
|
}, [contentEditable, cellId]);
|
246
238
|
const handleTouchMove = e => {
|
@@ -256,7 +248,7 @@ const TableCell = props => {
|
|
256
248
|
isDragging: false
|
257
249
|
});
|
258
250
|
};
|
259
|
-
const tbProps = resizing || over || readOnly ? {
|
251
|
+
const tbProps = tableResizing || resizing || over || readOnly ? {
|
260
252
|
...commonTdProps,
|
261
253
|
contentEditable: false
|
262
254
|
} : {
|
@@ -405,6 +397,7 @@ const TableCell = props => {
|
|
405
397
|
fontSize: entireTextSize || "inherit",
|
406
398
|
color: entireTextColor || "inherit",
|
407
399
|
cursor: "text",
|
400
|
+
verticalAlign: "top",
|
408
401
|
...(sizeProps || {})
|
409
402
|
},
|
410
403
|
...tbProps,
|
@@ -417,26 +410,33 @@ const TableCell = props => {
|
|
417
410
|
...dndProps,
|
418
411
|
dragType: currentDraggingType,
|
419
412
|
tableDOM: tableDOM
|
420
|
-
}) : null,
|
413
|
+
}) : null, /*#__PURE__*/_jsx("div", {
|
414
|
+
style: {
|
415
|
+
overflow: "auto hidden"
|
416
|
+
},
|
417
|
+
children: children
|
418
|
+
}), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
|
421
419
|
classes: classes,
|
422
420
|
onMouseDown: onMouseDown,
|
423
421
|
height: tableDOM.getBoundingClientRect()?.height
|
424
|
-
}) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
|
422
|
+
}) : null, hasSelected && !readOnly && !tableResizing ? /*#__PURE__*/_jsx("div", {
|
425
423
|
className: "selection-area-tc",
|
426
424
|
contentEditable: false
|
427
|
-
}) : null,
|
425
|
+
}) : null, /*#__PURE__*/_jsx(DragButton, {
|
428
426
|
...commonDragBtnProps,
|
429
427
|
placement: "top",
|
430
428
|
dragType: "col",
|
431
429
|
onDrag: onColDrag,
|
432
|
-
hideDelete: rowProps?.children?.length <= 1
|
433
|
-
|
430
|
+
hideDelete: rowProps?.children?.length <= 1,
|
431
|
+
show: showColDrag || isColDragging
|
432
|
+
}), /*#__PURE__*/_jsx(DragButton, {
|
434
433
|
...commonDragBtnProps,
|
435
434
|
dragType: "row",
|
436
435
|
onDrag: onRowDrag,
|
437
436
|
hideDelete: parentProps?.children?.length <= 1,
|
438
|
-
className: dragRowBtnCls
|
439
|
-
|
437
|
+
className: dragRowBtnCls,
|
438
|
+
show: showRowDragBtn
|
439
|
+
})]
|
440
440
|
}), openSettings ? /*#__PURE__*/_jsx(TablePopup, {
|
441
441
|
element: tableProps?.styleProps || {},
|
442
442
|
customProps: customProps,
|
@@ -23,7 +23,7 @@ export const getRectangleBounds = tableSelection => {
|
|
23
23
|
}
|
24
24
|
return selectedPaths;
|
25
25
|
};
|
26
|
-
export const createCopiedTableStructure = (editor, tableSelection, currentTableNode, tablePath
|
26
|
+
export const createCopiedTableStructure = (editor, tableSelection, currentTableNode, tablePath) => {
|
27
27
|
const selectedCells = getRectangleBounds(tableSelection);
|
28
28
|
const formattedCells = selectedCells.map(cell => cell.slice(-2));
|
29
29
|
const tableChild = [];
|
@@ -42,19 +42,7 @@ export const createCopiedTableStructure = (editor, tableSelection, currentTableN
|
|
42
42
|
columnIndexes.forEach((columnIndex, col_i) => {
|
43
43
|
const cellPath = [...tablePath, rowIndex, columnIndex];
|
44
44
|
const columnNode = getNode(editor, cellPath);
|
45
|
-
|
46
|
-
? {
|
47
|
-
...columnNode,
|
48
|
-
type: "table-cell",
|
49
|
-
children: [{
|
50
|
-
type: "paragraph",
|
51
|
-
children: [{
|
52
|
-
text: selectedText
|
53
|
-
}],
|
54
|
-
cellBgColor: "#FFFFFF"
|
55
|
-
}]
|
56
|
-
} : columnNode;
|
57
|
-
row.children.push(cellNode);
|
45
|
+
row.children.push(columnNode);
|
58
46
|
});
|
59
47
|
tableChild.push(row);
|
60
48
|
});
|
@@ -67,13 +55,13 @@ export const createCopiedTableStructure = (editor, tableSelection, currentTableN
|
|
67
55
|
|
68
56
|
return table;
|
69
57
|
};
|
70
|
-
export const tableNodeToDom =
|
58
|
+
export const tableNodeToDom = tableNode => {
|
71
59
|
const tableEle = document.createElement("table");
|
72
60
|
tableNode.children?.forEach(row => {
|
73
61
|
const rowEle = document.createElement("tr");
|
74
62
|
row?.children?.forEach(cell => {
|
75
63
|
const cellEle = document.createElement("td");
|
76
|
-
const cellText =
|
64
|
+
const cellText = serializeToText(cell);
|
77
65
|
cellEle.innerHTML = cellText;
|
78
66
|
rowEle.appendChild(cellEle);
|
79
67
|
});
|
@@ -32,6 +32,7 @@ import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
|
|
32
32
|
import DividerButton from "../Elements/Divider/DividerButton.js";
|
33
33
|
import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
|
34
34
|
import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
|
35
|
+
import DataViewButton from "../Elements/DataView/DataViewButton.js";
|
35
36
|
import SearchButton from "../Elements/Search/SearchButton.js";
|
36
37
|
import { jsx as _jsx } from "react/jsx-runtime";
|
37
38
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -118,6 +119,11 @@ export const RenderToolbarIcon = props => {
|
|
118
119
|
editor: editor,
|
119
120
|
icoBtnType: icoBtnType
|
120
121
|
}, element.id);
|
122
|
+
case "dataView":
|
123
|
+
return /*#__PURE__*/_jsx(DataViewButton, {
|
124
|
+
editor: editor,
|
125
|
+
icoBtnType: icoBtnType
|
126
|
+
}, element.id);
|
121
127
|
case "id":
|
122
128
|
return /*#__PURE__*/_jsx(Id, {
|
123
129
|
editor: editor
|
@@ -9,19 +9,19 @@ const OpenLinkIcon = props => {
|
|
9
9
|
xmlns: "http://www.w3.org/2000/svg",
|
10
10
|
children: [/*#__PURE__*/_jsx("path", {
|
11
11
|
d: "M7.58325 6.41615L12.3666 1.63281",
|
12
|
-
stroke: "#
|
12
|
+
stroke: "#64748B",
|
13
13
|
strokeWidth: "1.5",
|
14
14
|
strokeLinecap: "round",
|
15
15
|
strokeLinejoin: "round"
|
16
16
|
}), /*#__PURE__*/_jsx("path", {
|
17
17
|
d: "M12.8334 3.96602V1.16602H10.0334",
|
18
|
-
stroke: "#
|
18
|
+
stroke: "#64748B",
|
19
19
|
strokeWidth: "1.5",
|
20
20
|
strokeLinecap: "round",
|
21
21
|
strokeLinejoin: "round"
|
22
22
|
}), /*#__PURE__*/_jsx("path", {
|
23
23
|
d: "M6.41675 1.16602H5.25008C2.33341 1.16602 1.16675 2.33268 1.16675 5.24935V8.74935C1.16675 11.666 2.33341 12.8327 5.25008 12.8327H8.75008C11.6667 12.8327 12.8334 11.666 12.8334 8.74935V7.58268",
|
24
|
-
stroke: "#
|
24
|
+
stroke: "#64748B",
|
25
25
|
strokeWidth: "1.5",
|
26
26
|
strokeLinecap: "round",
|
27
27
|
strokeLinejoin: "round"
|
@@ -11,6 +11,7 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
|
|
11
11
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
12
12
|
import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
|
13
13
|
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
14
|
+
import GridOnIcon from "@mui/icons-material/GridOn";
|
14
15
|
import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
|
15
16
|
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
16
17
|
import SettingsIcon from "../assets/svg/SettingsIcon";
|
@@ -24,7 +25,7 @@ import { BrainIcon } from "../assets/svg/BrainIcon";
|
|
24
25
|
import DocsIcon from "../assets/svg/DocsIcon";
|
25
26
|
import UserIcon from "../assets/svg/UserIcon";
|
26
27
|
import EditIcon from "@mui/icons-material/Edit";
|
27
|
-
import DeleteIcon from
|
28
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
28
29
|
import { jsx as _jsx } from "react/jsx-runtime";
|
29
30
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
30
31
|
const iconList = {
|
@@ -270,6 +271,11 @@ const iconList = {
|
|
270
271
|
addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
|
271
272
|
addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {}),
|
272
273
|
openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
|
274
|
+
dataView: /*#__PURE__*/_jsx(GridOnIcon, {
|
275
|
+
sx: {
|
276
|
+
fill: "#64748B"
|
277
|
+
}
|
278
|
+
}),
|
273
279
|
brain: /*#__PURE__*/_jsx(BrainIcon, {}),
|
274
280
|
docsIcon: /*#__PURE__*/_jsx(DocsIcon, {}),
|
275
281
|
userIcon: /*#__PURE__*/_jsx(UserIcon, {}),
|
@@ -97,7 +97,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
|
|
97
97
|
id: `cmd-li-ind-${index}}`,
|
98
98
|
component: "div",
|
99
99
|
onClick: handleClick(char, i),
|
100
|
-
className: `${i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
|
100
|
+
className: `${type !== 'elements' && i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
|
101
101
|
sx: classes.listItem,
|
102
102
|
ref: i === index ? papperRef : null,
|
103
103
|
children: char.renderComponent ? char.renderComponent({
|