@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.
Files changed (69) hide show
  1. package/dist/Editor/CommonEditor.js +6 -4
  2. package/dist/Editor/Editor.css +19 -1
  3. package/dist/Editor/Elements/Button/EditorButton.js +71 -53
  4. package/dist/Editor/Elements/Color Picker/ColorButtons.js +4 -2
  5. package/dist/Editor/Elements/DataView/DataView.js +101 -0
  6. package/dist/Editor/Elements/DataView/DataViewButton.js +23 -0
  7. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +59 -0
  8. package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js +30 -0
  9. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +128 -0
  10. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js +25 -0
  11. package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +26 -0
  12. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +38 -0
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +30 -0
  14. package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +30 -0
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +35 -0
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +36 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js +17 -0
  18. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js +28 -0
  19. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +37 -0
  20. package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +74 -0
  21. package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +59 -0
  22. package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +66 -0
  23. package/dist/Editor/Elements/DataView/Layouts/FilterView.js +174 -0
  24. package/dist/Editor/Elements/DataView/Layouts/Formula.js +29 -0
  25. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +113 -0
  26. package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +37 -0
  27. package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +111 -0
  28. package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +62 -0
  29. package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js +36 -0
  30. package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js +101 -0
  31. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +158 -0
  32. package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +190 -0
  33. package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +42 -0
  34. package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +30 -0
  35. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +110 -0
  36. package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +176 -0
  37. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +94 -0
  38. package/dist/Editor/Elements/DataView/Layouts/TableView.js +214 -0
  39. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +83 -0
  40. package/dist/Editor/Elements/DataView/Layouts/index.js +25 -0
  41. package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +288 -0
  42. package/dist/Editor/Elements/DataView/Utils/globalSearch.js +15 -0
  43. package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +72 -0
  44. package/dist/Editor/Elements/DataView/styles.js +133 -0
  45. package/dist/Editor/Elements/FreeGrid/styles.js +2 -1
  46. package/dist/Editor/Elements/Signature/Signature.css +1 -1
  47. package/dist/Editor/Elements/Table/AddRowCol.js +1 -1
  48. package/dist/Editor/Elements/Table/DragButton.js +71 -68
  49. package/dist/Editor/Elements/Table/Styles.js +2 -2
  50. package/dist/Editor/Elements/Table/Table.js +10 -7
  51. package/dist/Editor/Elements/Table/TableCell.js +21 -21
  52. package/dist/Editor/Elements/Table/tableHelper.js +4 -16
  53. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  54. package/dist/Editor/Toolbar/Toolbar.js +6 -0
  55. package/dist/Editor/Toolbar/toolbarGroups.js +4 -0
  56. package/dist/Editor/assets/svg/OpenLinkIcon.js +3 -3
  57. package/dist/Editor/common/Icon.js +7 -1
  58. package/dist/Editor/common/MentionsPopup/index.js +1 -1
  59. package/dist/Editor/common/Shorthands/elements.js +13 -1
  60. package/dist/Editor/common/StyleBuilder/tableStyle.js +1 -1
  61. package/dist/Editor/common/iconslist.js +6 -3
  62. package/dist/Editor/hooks/useTable.js +4 -5
  63. package/dist/Editor/plugins/withHTML.js +18 -2
  64. package/dist/Editor/utils/SlateUtilityFunctions.js +16 -0
  65. package/dist/Editor/utils/dataView.js +43 -0
  66. package/dist/Editor/utils/embed.js +2 -1
  67. package/dist/Editor/utils/helper.js +19 -1
  68. package/dist/Editor/utils/insertNewLine.js +19 -1
  69. 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;
@@ -74,7 +74,8 @@ const useFreeGridStyles = ({
74
74
  fontSize: "12px",
75
75
  borderTopLeftRadius: "2px",
76
76
  borderTopRightRadius: "2px",
77
- width: "auto"
77
+ width: "auto",
78
+ pointerEvents: "none"
78
79
  },
79
80
  "&:hover": {
80
81
  "& .debug-info": {
@@ -57,7 +57,7 @@
57
57
  cursor: pointer;
58
58
  }
59
59
  .upload-wrapper-ui {
60
- border: 1px dashed #92B1F5 !important;
60
+ border: 1.5px dashed #2563EB !important;
61
61
  /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important; */
62
62
  border-radius: 7px;
63
63
  display: flex;
@@ -64,7 +64,7 @@ function AddRowCol(props) {
64
64
  padding: "0px 4px",
65
65
  minWidth: "unset",
66
66
  lineHeight: "18px",
67
- fontWeight: "lighter !important",
67
+ fontWeight: "normal !important",
68
68
  ...buttonStyle,
69
69
  opacity: showBtn ? 1 : 0
70
70
  },
@@ -1,4 +1,4 @@
1
- import { Box, Fade, IconButton, Paper, Popover, Popper } from "@mui/material";
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__*/_jsxs(_Fragment, {
65
- children: [/*#__PURE__*/_jsx(Popper, {
66
- sx: classes.popper,
67
- open: Boolean(anchorEl),
68
- anchorEl: anchorEl,
69
- placement: placement || "left",
70
- transition: true,
71
- contentEditable: false,
72
- ref: dragElement,
73
- modifiers: [{
74
- name: "offset",
75
- options: {
76
- offset: [0, -12]
77
- }
78
- }, {
79
- name: "flip",
80
- enabled: false // Disable dynamic flipping
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
- disablePortal: dragType !== "row",
84
- className: `${className}`,
85
- children: ({
86
- TransitionProps
87
- }) => /*#__PURE__*/_jsx(Fade, {
88
- ...TransitionProps,
89
- timeout: 350,
90
- children: /*#__PURE__*/_jsx("div", {
91
- children: /*#__PURE__*/_jsx(Draggable, {
92
- ...dragProps,
93
- children: /*#__PURE__*/_jsx(Paper, {
94
- sx: dragType === "row" ? {
95
- transform: "rotate(90deg)"
96
- } : {},
97
- className: `${showTool ? "active" : ""}`,
98
- style: {
99
- lineHeight: 0
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(DragIcon, {})
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
- }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
112
- open: showTool,
113
- onClose: onDragClose,
114
- swipeableDrawer: true,
115
- children: /*#__PURE__*/_jsx(Box, {
116
- sx: classes.mobileToolDrawer,
117
- children: /*#__PURE__*/_jsx(TableToolOnDrag, {
118
- ...commonToolProps
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
- }) : /*#__PURE__*/_jsx(Popover, {
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;
@@ -15,8 +15,8 @@ const TableStyles = theme => ({
15
15
  backgroundColor: theme?.palette?.editor?.background
16
16
  },
17
17
  "& svg": {
18
- width: "16px",
19
- height: "16px",
18
+ width: "18px",
19
+ height: "18px",
20
20
  "& path": {
21
21
  stroke: theme?.palette?.editor?.textColor
22
22
  }
@@ -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
- handleScrollStop();
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
- className: "hideScroll",
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: "top",
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
- if (!contentEditable) {
242
- props.contentEditable = false;
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, children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
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, showColDrag || isColDragging ? /*#__PURE__*/_jsx(DragButton, {
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
- }) : null, showRowDragBtn ? /*#__PURE__*/_jsx(DragButton, {
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
- }) : null]
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, selectedText) => {
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
- const cellNode = selectedText // we can select text in only one column
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 = (tableNode, selectedText) => {
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 = selectedText || serializeToText(cell);
64
+ const cellText = serializeToText(cell);
77
65
  cellEle.innerHTML = cellText;
78
66
  rowEle.appendChild(cellEle);
79
67
  });
@@ -92,7 +92,7 @@ const PopupTool = props => {
92
92
  }
93
93
  }, [selection, selectedElement?.path, selectedElement?.enable]);
94
94
  const handleClose = () => {
95
- setAnchorEl(null);
95
+ // setAnchorEl(null);
96
96
  setOpen(false);
97
97
  setPopupType("");
98
98
  };
@@ -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
@@ -191,6 +191,10 @@ export const toolbarGroups = [[{
191
191
  id: 42,
192
192
  type: "table",
193
193
  group: "elements"
194
+ }, {
195
+ id: 51,
196
+ type: "dataView",
197
+ group: "elements"
194
198
  }, {
195
199
  id: 48,
196
200
  format: "divider",
@@ -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: "#0F172A",
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: "#0F172A",
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: "#0F172A",
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 '@mui/icons-material/Delete';
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({