@flozy/editor 4.9.1 → 4.9.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. package/dist/Editor/Editor.css +17 -4
  2. package/dist/Editor/Elements/AI/CustomSelect.js +17 -10
  3. package/dist/Editor/Elements/AI/Styles.js +7 -1
  4. package/dist/Editor/Elements/Embed/Video.js +3 -2
  5. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +1 -1
  6. package/dist/Editor/Elements/Grid/GridItem.js +28 -9
  7. package/dist/Editor/Elements/Grid/Styles.js +1 -0
  8. package/dist/Editor/Elements/Search/SearchAttachment.js +27 -18
  9. package/dist/Editor/Elements/Search/SearchButton.js +66 -9
  10. package/dist/Editor/Elements/Search/SearchList.js +87 -75
  11. package/dist/Editor/Elements/Table/AddRowCol.js +76 -0
  12. package/dist/Editor/Elements/Table/DragButton.js +134 -0
  13. package/dist/Editor/Elements/Table/DragStyles.js +43 -0
  14. package/dist/Editor/Elements/Table/Draggable.js +25 -0
  15. package/dist/Editor/Elements/Table/Droppable.js +53 -0
  16. package/dist/Editor/Elements/Table/Styles.js +23 -41
  17. package/dist/Editor/Elements/Table/Table.js +185 -137
  18. package/dist/Editor/Elements/Table/TableCell.js +339 -101
  19. package/dist/Editor/Elements/Table/TablePopup.js +9 -3
  20. package/dist/Editor/Elements/Table/TableRow.js +10 -2
  21. package/dist/Editor/Elements/Table/TableTool.js +101 -0
  22. package/dist/Editor/Toolbar/PopupTool/index.js +6 -8
  23. package/dist/Editor/assets/svg/DocsIcon.js +77 -10
  24. package/dist/Editor/assets/svg/TableIcons.js +220 -0
  25. package/dist/Editor/assets/svg/UserIcon.js +2 -2
  26. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +27 -38
  27. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +1 -1
  28. package/dist/Editor/common/StyleBuilder/index.js +43 -57
  29. package/dist/Editor/common/StyleBuilder/tableStyle.js +92 -1
  30. package/dist/Editor/common/iconListV2.js +52 -0
  31. package/dist/Editor/hooks/useTable.js +164 -0
  32. package/dist/Editor/utils/helper.js +1 -1
  33. package/dist/Editor/utils/table.js +204 -21
  34. package/package.json +1 -1
@@ -1,91 +1,76 @@
1
- import React, { useState } from "react";
2
- import { Transforms } from "slate";
3
- import { useSelected, useSlateStatic } from "slate-react";
4
- import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme } from "@mui/material";
5
- import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
6
- import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
7
- import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
8
- import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
9
- import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
10
- import MoreVertIcon from "@mui/icons-material/MoreVert";
11
- import SettingsIcon from "@mui/icons-material/Settings";
12
- import DeleteCellIcon from "./DeleteCellIcon";
13
- import DeleteRowIcon from "./DeleteRowIcon";
1
+ import React, { useEffect, useRef, useState } from "react";
2
+ import { Editor, Transforms } from "slate";
3
+ import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
4
+ import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme, Popper, Fade } from "@mui/material";
14
5
  import { TableUtil } from "../../utils/table";
15
6
  import TablePopup from "./TablePopup";
16
- import { useEditorSelection } from "../../hooks/useMouseMove";
7
+ import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
17
8
  import TableStyles from "./Styles";
18
9
  import "./table.css";
19
10
  import { groupByBreakpoint } from "../../helper/theme";
11
+ import { TableProvider } from "../../hooks/useTable";
12
+ import AddRowCol from "./AddRowCol";
13
+ import TableTool from "./TableTool";
14
+ import { useDebouncedCallback } from "use-debounce";
15
+ import { MoreIcon, SettingsIcon } from "../../assets/svg/TableIcons";
20
16
  import { jsx as _jsx } from "react/jsx-runtime";
21
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
22
- const TABLE_MENUS = [{
23
- Icon: AlignHorizontalRightIcon,
24
- text: "Insert Columns to the Right",
25
- action: {
26
- type: "insertColumn",
27
- position: "after"
18
+ const hideRowDragBtns = (hide, dragRowBtnCls) => {
19
+ const rowDragBtns = document.querySelectorAll(`.${dragRowBtnCls}`);
20
+ if (rowDragBtns?.length) {
21
+ rowDragBtns?.forEach(btn => btn.style.display = hide);
28
22
  }
29
- }, {
30
- Icon: AlignHorizontalLeftIcon,
31
- text: "Insert Columns to the Left",
32
- action: {
33
- type: "insertColumn",
34
- position: "at"
35
- }
36
- }, {
37
- Icon: AlignVerticalTopIcon,
38
- text: "Insert Row Above",
39
- action: {
40
- type: "insertRow",
41
- positon: "at"
42
- }
43
- }, {
44
- Icon: AlignVerticalBottomIcon,
45
- text: "Insert Row Below",
46
- action: {
47
- type: "insertRow",
48
- position: "after"
49
- }
50
- }, {
51
- Icon: DeleteRowIcon,
52
- text: "Delete Row",
53
- action: {
54
- type: "deleteRow"
55
- }
56
- }, {
57
- Icon: DeleteCellIcon,
58
- text: "Delete Column",
59
- action: {
60
- type: "deleteColumn"
61
- }
62
- }, {
63
- Icon: SettingsIcon,
64
- text: "Settings",
65
- action: {
66
- type: "settings"
67
- }
68
- }, {
69
- Icon: DeleteForeverIcon,
70
- text: "Remove Table",
71
- action: {
72
- type: "remove"
73
- }
74
- }];
23
+ };
24
+ const ToolBar = props => {
25
+ const {
26
+ selected,
27
+ showTool,
28
+ classes,
29
+ handleExpand,
30
+ handleAction,
31
+ exandTools
32
+ } = props;
33
+ return selected && !showTool ? /*#__PURE__*/_jsxs(Box, {
34
+ component: "div",
35
+ contentEditable: false,
36
+ className: `tableToolBar ${exandTools ? "active" : ""}`,
37
+ sx: classes.tableToolBar,
38
+ children: [/*#__PURE__*/_jsx(Tooltip, {
39
+ title: "Settings",
40
+ arrow: true,
41
+ onClick: () => handleAction("settings"),
42
+ children: /*#__PURE__*/_jsx(IconButton, {
43
+ className: "toolbtn toggle",
44
+ children: /*#__PURE__*/_jsx(SettingsIcon, {})
45
+ })
46
+ }), /*#__PURE__*/_jsx(Tooltip, {
47
+ title: "Show Tools",
48
+ arrow: true,
49
+ onClick: handleExpand,
50
+ children: /*#__PURE__*/_jsx(IconButton, {
51
+ className: "toolbtn toggle",
52
+ children: /*#__PURE__*/_jsx(MoreIcon, {})
53
+ })
54
+ })]
55
+ }) : null;
56
+ };
75
57
  const Table = props => {
76
58
  const theme = useTheme();
59
+ const {
60
+ theme: editorTheme
61
+ } = useEditorContext();
77
62
  const {
78
63
  element,
79
64
  attributes,
80
65
  children,
81
66
  customProps
82
67
  } = props;
83
- const classes = TableStyles();
68
+ const classes = TableStyles(editorTheme);
84
69
  const {
85
70
  readOnly
86
71
  } = customProps;
87
72
  const [openSetttings, setOpenSettings] = useState(false);
88
- const [exandTools, setExpandTools] = useState(false);
73
+ const [exandTools, setExpandTools] = useState(null);
89
74
  const {
90
75
  bgColor,
91
76
  borderColor,
@@ -96,27 +81,19 @@ const Table = props => {
96
81
  const table = new TableUtil(editor);
97
82
  const tableProps = table.getTableProps();
98
83
  const [showTool] = useEditorSelection(editor);
99
- const handleAction = ({
100
- type,
101
- position
102
- }) => () => {
84
+ const tableRef = useRef(null);
85
+ const containerRef = useRef(null);
86
+ const path = ReactEditor.findPath(editor, element);
87
+ const dragRowBtnCls = `table-${path?.toString()?.replaceAll(",", "-")}-row-drag-btn`;
88
+ const handleAction = type => {
103
89
  Transforms.select(editor, editor.selection);
104
90
  switch (type) {
105
- case "insertRow":
106
- table.insertRow(position);
107
- break;
108
- case "insertColumn":
109
- table.insertColumn(position);
110
- break;
111
- case "deleteRow":
112
- table.deleteRow();
113
- break;
114
- case "deleteColumn":
115
- table.deleteColumn();
116
- break;
117
- case "remove":
91
+ case "delete":
118
92
  table.removeTable();
119
93
  break;
94
+ case "duplicate":
95
+ table.duplicateTable();
96
+ break;
120
97
  case "settings":
121
98
  if (tableProps) {
122
99
  onSettings(true);
@@ -126,42 +103,16 @@ const Table = props => {
126
103
  return;
127
104
  }
128
105
  };
129
- const handleExpand = () => {
130
- setExpandTools(!exandTools);
131
- };
132
- const ToolBar = () => {
133
- return selected && !showTool ? /*#__PURE__*/_jsxs(Box, {
134
- component: "div",
135
- contentEditable: false,
136
- className: `tableToolBar ${exandTools ? "active" : ""}`,
137
- sx: classes.tableToolBar,
138
- children: [/*#__PURE__*/_jsx(Tooltip, {
139
- title: "Show Tools",
140
- arrow: true,
141
- onClick: handleExpand,
142
- children: /*#__PURE__*/_jsx(IconButton, {
143
- className: "toolbtn toggle",
144
- children: /*#__PURE__*/_jsx(MoreVertIcon, {})
145
- })
146
- }), TABLE_MENUS.map(({
147
- Icon,
148
- text,
149
- action
150
- }) => {
151
- return /*#__PURE__*/_jsx(Tooltip, {
152
- title: text,
153
- arrow: true,
154
- children: /*#__PURE__*/_jsx(IconButton, {
155
- className: `toolbtn ${action?.type}`,
156
- onClick: handleAction(action),
157
- children: /*#__PURE__*/_jsx(Icon, {})
158
- })
159
- }, text);
160
- })]
161
- }) : null;
106
+ const handleExpand = e => {
107
+ setExpandTools(e.currentTarget);
162
108
  };
109
+ useEffect(() => {
110
+ if (!selected) {
111
+ setExpandTools(false);
112
+ }
113
+ }, [selected]);
163
114
  const onSettings = () => {
164
- setOpenSettings(true);
115
+ setOpenSettings(!openSetttings);
165
116
  };
166
117
  const onSave = data => {
167
118
  const updateData = {
@@ -183,28 +134,125 @@ const Table = props => {
183
134
  lg: "inline-block"
184
135
  }
185
136
  }, theme);
186
- return /*#__PURE__*/_jsxs("div", {
187
- style: {
188
- minWidth: "100%",
189
- maxWidth: "100%",
190
- position: "relative"
137
+ const addRow = () => {
138
+ const lastRow = element?.rows - 1;
139
+ const firstCol = 0;
140
+ const lastRowPath = [...path, lastRow, firstCol];
141
+ const position = Editor.start(editor, lastRowPath);
142
+ const selection = {
143
+ anchor: position,
144
+ focus: position
145
+ };
146
+
147
+ // select the last row first col to insert row below
148
+ Transforms.select(editor, selection);
149
+ table.insertRow("after");
150
+ Transforms.deselect(editor);
151
+ };
152
+ const addCol = () => {
153
+ const lastCol = element?.columns - 1;
154
+ const firstRow = 0;
155
+ const lastColumnPath = [...path, firstRow, lastCol];
156
+ const position = Editor.start(editor, lastColumnPath);
157
+ const selection = {
158
+ anchor: position,
159
+ focus: position
160
+ };
161
+
162
+ // select the last row first col to insert row below
163
+ Transforms.select(editor, selection);
164
+ table.insertColumn("after");
165
+ Transforms.deselect(editor);
166
+ };
167
+ const handleScrollStop = useDebouncedCallback(() => {
168
+ containerRef?.current?.classList.add("hideScroll");
169
+ }, 200);
170
+ const handleScroll = () => {
171
+ if (containerRef?.current?.scrollLeft > 0) {
172
+ hideRowDragBtns("none", dragRowBtnCls);
173
+ } else {
174
+ hideRowDragBtns("", dragRowBtnCls);
175
+ }
176
+ containerRef?.current?.classList.remove("hideScroll");
177
+ handleScrollStop();
178
+ };
179
+ const commonAddBtnProps = {
180
+ tableRef,
181
+ containerRef,
182
+ readOnly,
183
+ tableNode: element
184
+ };
185
+ return /*#__PURE__*/_jsxs(TableProvider, {
186
+ editor: editor,
187
+ otherProps: {
188
+ dragRowBtnCls
191
189
  },
192
- children: [/*#__PURE__*/_jsx(TableComp, {
193
- className: readOnly ? "readOnly" : "",
194
- sx: {
195
- ...classes.table,
196
- ...tableSX
197
- },
190
+ children: [/*#__PURE__*/_jsxs("div", {
198
191
  style: {
199
- background: bgColor,
200
- border: borderColor ? `1px solid ${borderColor}` : "",
201
- width: "auto"
192
+ minWidth: "100%",
193
+ maxWidth: "100%",
194
+ position: "relative",
195
+ overflowX: "auto",
196
+ display: "flex",
197
+ paddingTop: "10px"
198
+ },
199
+ ref: containerRef,
200
+ onScroll: handleScroll,
201
+ className: "hideScroll",
202
+ children: [/*#__PURE__*/_jsx(TableComp, {
203
+ className: readOnly ? "readOnly" : "",
204
+ sx: {
205
+ ...classes.table,
206
+ ...tableSX
207
+ },
208
+ style: {
209
+ background: bgColor,
210
+ border: borderColor ? `1px solid ${borderColor}` : "",
211
+ width: "auto"
212
+ },
213
+ ref: tableRef,
214
+ children: /*#__PURE__*/_jsx(TableBody, {
215
+ ...attributes,
216
+ children: children
217
+ })
218
+ }), /*#__PURE__*/_jsx(AddRowCol, {
219
+ ...commonAddBtnProps,
220
+ addType: "col",
221
+ onAdd: addCol
222
+ })]
223
+ }), /*#__PURE__*/_jsx(AddRowCol, {
224
+ ...commonAddBtnProps,
225
+ addType: "row",
226
+ onAdd: addRow
227
+ }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {
228
+ selected: selected,
229
+ showTool: showTool,
230
+ classes: classes,
231
+ handleExpand: handleExpand,
232
+ handleAction: handleAction,
233
+ exandTools: exandTools
234
+ }), /*#__PURE__*/_jsx(Popper, {
235
+ open: Boolean(exandTools),
236
+ anchorEl: exandTools,
237
+ transition: true,
238
+ contentEditable: false,
239
+ sx: {
240
+ zIndex: 2000
202
241
  },
203
- children: /*#__PURE__*/_jsx(TableBody, {
204
- ...attributes,
205
- children: children
242
+ placement: "top",
243
+ children: ({
244
+ TransitionProps
245
+ }) => /*#__PURE__*/_jsx(Fade, {
246
+ ...TransitionProps,
247
+ timeout: 350,
248
+ children: /*#__PURE__*/_jsx("div", {
249
+ children: /*#__PURE__*/_jsx(TableTool, {
250
+ theme: editorTheme,
251
+ handleToolAction: handleAction
252
+ })
253
+ })
206
254
  })
207
- }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
255
+ }), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
208
256
  element: tableProps?.styleProps || {},
209
257
  onSave: onSave,
210
258
  onClose: onClose,