@flozy/editor 4.0.1 → 4.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +17 -28
- package/dist/Editor/CommonEditor.js +16 -1
- package/dist/Editor/Editor.css +1 -13
- package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +5 -21
- package/dist/Editor/Elements/AppHeader/AppHeader.js +23 -1
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
- package/dist/Editor/Elements/Grid/Grid.js +25 -3
- package/dist/Editor/Elements/List/CheckList.js +1 -2
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
- package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
- package/dist/Editor/Elements/Table/Styles.js +23 -1
- package/dist/Editor/Elements/Table/Table.js +2 -1
- package/dist/Editor/Elements/Table/TableCell.js +69 -7
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
- package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
- package/dist/Editor/Styles/EditorStyles.js +1 -1
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +24 -7
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +4 -2
- package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +2 -3
- package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
- package/dist/Editor/assets/svg/RedoIcon.js +27 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
- package/dist/Editor/assets/svg/TextIcon.js +8 -5
- package/dist/Editor/assets/svg/UndoIcon.js +27 -0
- package/dist/Editor/common/ColorPickerButton.js +4 -12
- package/dist/Editor/common/DnD/DragHandleButton.js +55 -46
- package/dist/Editor/common/Icon.js +13 -1
- package/dist/Editor/common/Section/index.js +57 -7
- package/dist/Editor/common/Section/styles.js +11 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +1 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +20 -26
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +16 -18
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +4 -6
- package/dist/Editor/common/iconslist.js +0 -31
- package/dist/Editor/helper/index.js +0 -22
- package/dist/Editor/helper/theme.js +1 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +8 -2
- package/dist/Editor/utils/events.js +54 -2
- package/dist/Editor/utils/helper.js +1 -1
- package/dist/Editor/utils/table.js +51 -43
- package/package.json +3 -3
@@ -27,8 +27,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
27
27
|
toolBar = true,
|
28
28
|
onSave,
|
29
29
|
onsubmit,
|
30
|
-
onBlur = () => {}
|
31
|
-
isMobile = false
|
30
|
+
onBlur = () => {}
|
32
31
|
} = props;
|
33
32
|
const classes = usePopupStyle(theme);
|
34
33
|
const convertedContent = draftToSlate({
|
@@ -55,22 +54,6 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
55
54
|
if (editor) {
|
56
55
|
ReactEditor.focus(editor);
|
57
56
|
insertEmoji(editor, emoji?.native, editor.selection);
|
58
|
-
if (editor.selection) {
|
59
|
-
// const path = editor.selection.anchor.path;
|
60
|
-
// const offset = editor.selection.anchor.offset + emoji?.native.length;
|
61
|
-
const position = {
|
62
|
-
anchor: {
|
63
|
-
path: [0],
|
64
|
-
offset: 0
|
65
|
-
},
|
66
|
-
focus: {
|
67
|
-
path: [0],
|
68
|
-
offset: 0
|
69
|
-
}
|
70
|
-
};
|
71
|
-
// Create a new selection
|
72
|
-
Transforms.select(editor, position);
|
73
|
-
}
|
74
57
|
ReactEditor.focus(editor);
|
75
58
|
}
|
76
59
|
},
|
@@ -127,12 +110,12 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
127
110
|
}
|
128
111
|
}
|
129
112
|
}));
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
113
|
+
useEffect(() => {
|
114
|
+
setIsExternalUpdate(true);
|
115
|
+
setValue(draftToSlate({
|
116
|
+
data: content
|
117
|
+
}));
|
118
|
+
}, [content]);
|
136
119
|
useEffect(() => {
|
137
120
|
if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
|
138
121
|
const {
|
@@ -195,9 +178,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
195
178
|
});
|
196
179
|
};
|
197
180
|
const handleEditorChange = newValue => {
|
198
|
-
|
199
|
-
|
200
|
-
|
181
|
+
if (isExternalUpdate) {
|
182
|
+
setIsExternalUpdate(false);
|
183
|
+
return;
|
184
|
+
} else {
|
185
|
+
setValue(newValue);
|
186
|
+
if (!isInteracted) {
|
187
|
+
setIsInteracted(true);
|
188
|
+
}
|
201
189
|
}
|
202
190
|
};
|
203
191
|
const Element = props => {
|
@@ -234,7 +222,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
234
222
|
event,
|
235
223
|
editor
|
236
224
|
});
|
237
|
-
} else if (event.key === "Enter"
|
225
|
+
} else if (event.key === "Enter") {
|
238
226
|
const isEmpty = value.length === 1 && value[0].type === 'paragraph' && value[0].children.length === 1 && value[0].children[0].text === '';
|
239
227
|
if (isEmpty) {
|
240
228
|
event.preventDefault();
|
@@ -281,6 +269,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
281
269
|
renderLeaf: renderLeaf,
|
282
270
|
placeholder: "Start typing ...",
|
283
271
|
spellCheck: true,
|
272
|
+
autoFocus: true,
|
284
273
|
onBlur: handleBlur,
|
285
274
|
onKeyDown: onKeyDown
|
286
275
|
}), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
|
@@ -386,6 +386,20 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
386
386
|
}
|
387
387
|
return style;
|
388
388
|
}, [pageBgImage, pageColor]);
|
389
|
+
const handleCursorScroll = container => {
|
390
|
+
try {
|
391
|
+
const cursorPosition = window.getSelection()?.getRangeAt(0).getBoundingClientRect();
|
392
|
+
const containerBottom = container.getBoundingClientRect().bottom;
|
393
|
+
if (cursorPosition?.bottom > containerBottom - 250) {
|
394
|
+
container.scrollBy({
|
395
|
+
top: 200,
|
396
|
+
behavior: "smooth"
|
397
|
+
});
|
398
|
+
}
|
399
|
+
} catch (err) {
|
400
|
+
console.log(err);
|
401
|
+
}
|
402
|
+
};
|
389
403
|
return /*#__PURE__*/_jsx(EditorProvider, {
|
390
404
|
theme: theme,
|
391
405
|
editor: editor,
|
@@ -449,7 +463,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
449
463
|
renderElement: renderElement,
|
450
464
|
renderLeaf: renderLeaf,
|
451
465
|
decorate: decorators,
|
452
|
-
onKeyDown: onKeyDown
|
466
|
+
onKeyDown: onKeyDown,
|
467
|
+
onSelect: () => handleCursorScroll(editorWrapper.current)
|
453
468
|
}), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
|
454
469
|
ref: mentionsRef,
|
455
470
|
mentions: mentions,
|
package/dist/Editor/Editor.css
CHANGED
@@ -55,7 +55,6 @@ blockquote {
|
|
55
55
|
}
|
56
56
|
|
57
57
|
.editor-wrapper {
|
58
|
-
background: #ffffff;
|
59
58
|
min-height: 400px;
|
60
59
|
height: fit-content;
|
61
60
|
max-width: 100%;
|
@@ -830,17 +829,6 @@ blockquote {
|
|
830
829
|
text-align: center;
|
831
830
|
}
|
832
831
|
|
833
|
-
.removeScroll::-webkit-outer-spin-button,
|
834
|
-
.removeScroll::-webkit-inner-spin-button {
|
835
|
-
-webkit-appearance: none;
|
836
|
-
margin: 0;
|
837
|
-
}
|
838
|
-
|
839
|
-
/* For Firefox */
|
840
|
-
.removeScroll {
|
841
|
-
-moz-appearance: textfield;
|
842
|
-
}
|
843
|
-
|
844
832
|
.borderInput:focus-visible {
|
845
833
|
outline: none !important;
|
846
834
|
}
|
@@ -890,7 +878,7 @@ blockquote {
|
|
890
878
|
}
|
891
879
|
|
892
880
|
.sliderInput {
|
893
|
-
width:
|
881
|
+
width: 66px;
|
894
882
|
padding: 2px 10px;
|
895
883
|
margin-left: 18px;
|
896
884
|
box-shadow: 0px 4px 16px 0px #0000000d;
|
@@ -1,7 +1,4 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { getBorderColor, getTextColor } from "../../helper";
|
3
|
-
import { Box } from "@mui/material";
|
4
|
-
import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
|
5
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
3
|
const AccordionSummary = props => {
|
7
4
|
const {
|
@@ -12,31 +9,18 @@ const AccordionSummary = props => {
|
|
12
9
|
const {
|
13
10
|
textColor,
|
14
11
|
bgColor,
|
15
|
-
borderColor
|
16
|
-
borderRadius,
|
17
|
-
bannerSpacing
|
12
|
+
borderColor
|
18
13
|
} = element;
|
19
|
-
|
20
|
-
const borderStyle = getBorderColor(borderColor);
|
21
|
-
return /*#__PURE__*/_jsx(Box, {
|
14
|
+
return /*#__PURE__*/_jsx("div", {
|
22
15
|
className: `accordion-summary-container`,
|
23
16
|
...attributes,
|
24
17
|
style: {
|
25
18
|
width: "100%",
|
26
19
|
position: "relative",
|
27
|
-
|
28
|
-
|
20
|
+
backgroundColor: bgColor,
|
21
|
+
border: `1px solid ${borderColor}`,
|
22
|
+
color: textColor
|
29
23
|
},
|
30
|
-
sx: {
|
31
|
-
borderRadius: {
|
32
|
-
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
33
|
-
},
|
34
|
-
padding: {
|
35
|
-
...getTRBLBreakPoints(bannerSpacing)
|
36
|
-
},
|
37
|
-
'& span[data-slate-string="true"]': textStyles
|
38
|
-
},
|
39
|
-
component: "div",
|
40
24
|
children: children
|
41
25
|
});
|
42
26
|
};
|
@@ -62,6 +62,11 @@ function AppHeader(props) {
|
|
62
62
|
const handleDrawerToggle = () => {
|
63
63
|
setMobileOpen(prevState => !prevState);
|
64
64
|
};
|
65
|
+
const closeDrawer = () => {
|
66
|
+
if (mobileOpen) {
|
67
|
+
handleDrawerToggle();
|
68
|
+
}
|
69
|
+
};
|
65
70
|
const onSettings = e => {
|
66
71
|
if (!readOnly) {
|
67
72
|
e.stopPropagation();
|
@@ -148,10 +153,27 @@ function AppHeader(props) {
|
|
148
153
|
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
|
149
154
|
children: menus.map((item, i) => {
|
150
155
|
const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
|
156
|
+
const onTouchEnd = e => {
|
157
|
+
if (buttonProps?.onTouchEnd) {
|
158
|
+
buttonProps?.onTouchEnd(e);
|
159
|
+
closeDrawer();
|
160
|
+
}
|
161
|
+
};
|
162
|
+
const onClick = e => {
|
163
|
+
if (buttonProps?.onClick) {
|
164
|
+
buttonProps?.onClick(e);
|
165
|
+
closeDrawer();
|
166
|
+
}
|
167
|
+
};
|
168
|
+
const props = {
|
169
|
+
...buttonProps,
|
170
|
+
onTouchEnd,
|
171
|
+
onClick
|
172
|
+
};
|
151
173
|
return /*#__PURE__*/_jsx(ListItem, {
|
152
174
|
disablePadding: true,
|
153
175
|
children: /*#__PURE__*/_jsx(ListItemButton, {
|
154
|
-
...
|
176
|
+
...props,
|
155
177
|
sx: {
|
156
178
|
textAlign: "center"
|
157
179
|
},
|
@@ -5,15 +5,13 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
5
|
const EmojiPicker = props => {
|
6
6
|
const {
|
7
7
|
onEmojiSelect,
|
8
|
-
onClose
|
9
|
-
theme = 'dark'
|
8
|
+
onClose
|
10
9
|
} = props;
|
11
10
|
return /*#__PURE__*/_jsx(_Fragment, {
|
12
11
|
children: /*#__PURE__*/_jsx(Picker, {
|
13
12
|
data: data,
|
14
13
|
onEmojiSelect: onEmojiSelect,
|
15
|
-
onClickOutside: onClose
|
16
|
-
theme: theme
|
14
|
+
onClickOutside: onClose
|
17
15
|
})
|
18
16
|
});
|
19
17
|
};
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/* eslint-disable no-unused-vars */
|
2
2
|
import React, { useState } from "react";
|
3
|
-
import { Transforms, Path } from "slate";
|
3
|
+
import { Transforms, Path, Node } from "slate";
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
5
5
|
import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
|
6
6
|
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
@@ -29,11 +29,16 @@ const GridToolBar = ({
|
|
29
29
|
onAddGridItem,
|
30
30
|
onAddSection,
|
31
31
|
onMoveSection,
|
32
|
-
path
|
32
|
+
path,
|
33
|
+
isSectionFullWidth
|
33
34
|
}) => {
|
34
35
|
return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
|
35
36
|
className: "grid-container-toolbar",
|
36
37
|
contentEditable: false,
|
38
|
+
style: isSectionFullWidth ? {
|
39
|
+
right: "4px",
|
40
|
+
top: "4px"
|
41
|
+
} : {},
|
37
42
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
38
43
|
title: "Grid Settings",
|
39
44
|
arrow: true,
|
@@ -74,6 +79,17 @@ const GridToolBar = ({
|
|
74
79
|
}) : null]
|
75
80
|
}) : null;
|
76
81
|
};
|
82
|
+
const getParentEl = (editor, path) => {
|
83
|
+
try {
|
84
|
+
if (path?.length) {
|
85
|
+
return Node.parent(editor, path);
|
86
|
+
} else {
|
87
|
+
return null;
|
88
|
+
}
|
89
|
+
} catch (err) {
|
90
|
+
return null;
|
91
|
+
}
|
92
|
+
};
|
77
93
|
const Grid = props => {
|
78
94
|
const {
|
79
95
|
attributes,
|
@@ -113,6 +129,11 @@ const Grid = props => {
|
|
113
129
|
const selected = hoverPath === path.join(",");
|
114
130
|
const [showTool] = useEditorSelection(editor);
|
115
131
|
const [size] = useWindowResize();
|
132
|
+
const parentElement = getParentEl(editor, path);
|
133
|
+
const {
|
134
|
+
sectionGridSize
|
135
|
+
} = parentElement || {};
|
136
|
+
const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
|
116
137
|
const onAddGridItem = () => {
|
117
138
|
const currentPath = editor.selection?.anchor?.path;
|
118
139
|
const ancestorsPath = Path.ancestors(currentPath, {
|
@@ -327,7 +348,8 @@ const Grid = props => {
|
|
327
348
|
onAddGridItem: onAddGridItem,
|
328
349
|
onAddSection: onAddSection,
|
329
350
|
onMoveSection: onMoveSection,
|
330
|
-
path: path
|
351
|
+
path: path,
|
352
|
+
isSectionFullWidth: isSectionFullWidth
|
331
353
|
})]
|
332
354
|
}), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
|
333
355
|
element: element,
|
@@ -68,8 +68,7 @@ const CheckList = ({
|
|
68
68
|
style: {
|
69
69
|
flex: 1,
|
70
70
|
opacity: checked ? 1 : 1,
|
71
|
-
textDecoration: !checked ? "none" : "none"
|
72
|
-
width: '90%'
|
71
|
+
textDecoration: !checked ? "none" : "none"
|
73
72
|
},
|
74
73
|
className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
|
75
74
|
placeholder: nestedCheckList ? "" : "Todo List",
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { useSlateStatic } from "slate-react";
|
3
3
|
import PageSettingsPopup from "./PageSettingsPopup";
|
4
|
-
import { PageSettings } from "../../common/iconslist";
|
5
4
|
import ToolbarIcon from "../../common/ToolbarIcon";
|
6
5
|
import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
|
6
|
+
import SettingsIcon from "../../assets/svg/SettingsIcon";
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
8
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -45,13 +45,13 @@ const PageSettingsButton = props => {
|
|
45
45
|
setOpenSettings(false);
|
46
46
|
};
|
47
47
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
48
|
-
children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(
|
48
|
+
children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(SettingsIcon, {
|
49
49
|
onClick: onSettings,
|
50
50
|
className: "removeDefaultSvgCls"
|
51
51
|
}) : /*#__PURE__*/_jsx(ToolbarIcon, {
|
52
52
|
title: "Page Settings",
|
53
53
|
onClick: onSettings,
|
54
|
-
icon: /*#__PURE__*/_jsx(
|
54
|
+
icon: /*#__PURE__*/_jsx(SettingsIcon, {}),
|
55
55
|
icoBtnType: icoBtnType
|
56
56
|
}), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
|
57
57
|
element: openSetttings?.element || {},
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { useSlateStatic } from "slate-react";
|
3
|
+
import RedoIcon from "../../assets/svg/RedoIcon";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const RedoButton = () => {
|
6
|
+
const editor = useSlateStatic();
|
7
|
+
const onRedo = () => {
|
8
|
+
editor?.redo();
|
9
|
+
};
|
10
|
+
return /*#__PURE__*/_jsx(RedoIcon, {
|
11
|
+
onClick: onRedo
|
12
|
+
});
|
13
|
+
};
|
14
|
+
export default RedoButton;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
const TableStyles =
|
1
|
+
const TableStyles = themeType => ({
|
2
2
|
tableToolBar: {
|
3
3
|
position: "absolute",
|
4
4
|
top: "-34px",
|
@@ -61,6 +61,28 @@ const TableStyles = () => ({
|
|
61
61
|
"&:hover": {
|
62
62
|
background: "#ccc"
|
63
63
|
}
|
64
|
+
},
|
65
|
+
deleteCellsPopUp: {
|
66
|
+
backgroundColor: themeType === "dark" ? "#292C32" : "#FFFFFF",
|
67
|
+
borderRadius: "7px !important",
|
68
|
+
border: themeType === "dark" ? "1px solid #5B5E64" : "1px solid #E4E8EB",
|
69
|
+
zIndex: 100,
|
70
|
+
minWidth: "186px !important"
|
71
|
+
},
|
72
|
+
menuItemPopUp: {
|
73
|
+
padding: "5px 7px !important",
|
74
|
+
margin: "6px !important",
|
75
|
+
borderRadius: 1,
|
76
|
+
userSelect: "none",
|
77
|
+
color: themeType === "dark" ? "#2563EB" : "#0F172A",
|
78
|
+
"&:hover": {
|
79
|
+
// backgroundColor: "rgba(0, 123, 255, 0.1)",
|
80
|
+
backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE"
|
81
|
+
},
|
82
|
+
"&.Mui-selected": {
|
83
|
+
backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
|
84
|
+
color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
|
85
|
+
}
|
64
86
|
}
|
65
87
|
});
|
66
88
|
export default TableStyles;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { useSelected, useSlateStatic } from "slate-react";
|
4
|
-
import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
|
4
|
+
import { Box, IconButton, Tooltip, Table as TableComp, TableBody, Popper, Typography } 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";
|
@@ -15,6 +15,7 @@ import { TableUtil } from "../../utils/table";
|
|
15
15
|
import TablePopup from "./TablePopup";
|
16
16
|
import { useEditorSelection } from "../../hooks/useMouseMove";
|
17
17
|
import TableStyles from "./Styles";
|
18
|
+
import useClickOutside from "../../hooks/useClickOutside";
|
18
19
|
import "./table.css";
|
19
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
20
21
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -1,11 +1,12 @@
|
|
1
1
|
import React, { useState, useEffect } from "react";
|
2
|
-
import { Editor, Element } from "slate";
|
3
|
-
import { Box } from "@mui/material";
|
2
|
+
import { Editor, Element, Transforms } from "slate";
|
3
|
+
import { Box, MenuItem, Popper, Typography } from "@mui/material";
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
5
5
|
import useTableResize from "../../utils/customHooks/useTableResize";
|
6
6
|
import { TableUtil } from "../../utils/table";
|
7
7
|
import TableStyles from "./Styles";
|
8
8
|
import { useEditorSelection } from "../../hooks/useMouseMove";
|
9
|
+
import useClickOutside from "../../hooks/useClickOutside";
|
9
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
11
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
11
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -28,7 +29,8 @@ const Resizer = ({
|
|
28
29
|
});
|
29
30
|
};
|
30
31
|
const TableCell = props => {
|
31
|
-
const
|
32
|
+
const themeType = localStorage.getItem("themeType");
|
33
|
+
const classes = TableStyles(themeType);
|
32
34
|
const {
|
33
35
|
element,
|
34
36
|
attributes,
|
@@ -69,6 +71,42 @@ const TableCell = props => {
|
|
69
71
|
const tableDOM = table.getDOMNode(path, true);
|
70
72
|
const isCellSelected = table.isCellSelected(editor.selection);
|
71
73
|
const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
|
74
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
75
|
+
const open = Boolean(anchorEl);
|
76
|
+
const popperOptions = [{
|
77
|
+
value: "Delete Row"
|
78
|
+
}, {
|
79
|
+
value: "Delete Column"
|
80
|
+
}];
|
81
|
+
const onRightClick = e => {
|
82
|
+
e.preventDefault();
|
83
|
+
if (hasSelected) {
|
84
|
+
setAnchorEl(e.currentTarget);
|
85
|
+
}
|
86
|
+
};
|
87
|
+
const closePoper = () => {
|
88
|
+
setAnchorEl(null);
|
89
|
+
};
|
90
|
+
const handleMenuItemClick = value => {
|
91
|
+
Transforms.select(editor, editor.selection);
|
92
|
+
switch (value) {
|
93
|
+
case "Delete Row":
|
94
|
+
table.deleteRow();
|
95
|
+
break;
|
96
|
+
case "Delete Column":
|
97
|
+
table.deleteColumn();
|
98
|
+
break;
|
99
|
+
default:
|
100
|
+
return;
|
101
|
+
}
|
102
|
+
// closePoper();
|
103
|
+
};
|
104
|
+
|
105
|
+
// Use the useClickOutside hook
|
106
|
+
const popperRef = useClickOutside({
|
107
|
+
onClickOutside: closePoper,
|
108
|
+
refCount: 1
|
109
|
+
})[0];
|
72
110
|
useEffect(() => {
|
73
111
|
if (tableDOM) {
|
74
112
|
const {
|
@@ -89,7 +127,7 @@ const TableCell = props => {
|
|
89
127
|
cellWidth: parentWidth / columns
|
90
128
|
});
|
91
129
|
}
|
92
|
-
}, [tableDOM]);
|
130
|
+
}, [tableDOM, anchorEl]);
|
93
131
|
useEffect(() => {
|
94
132
|
if (editor && element && tableSize) {
|
95
133
|
const dom = ReactEditor.toDOMNode(editor, element);
|
@@ -99,14 +137,37 @@ const TableCell = props => {
|
|
99
137
|
height: 100
|
100
138
|
});
|
101
139
|
}
|
102
|
-
}, [tableSize]);
|
140
|
+
}, [tableSize, anchorEl]);
|
103
141
|
useEffect(() => {
|
104
142
|
if (!resizing && tableProps) {
|
105
143
|
table.updateTableStyle({
|
106
144
|
"col.size": size
|
107
145
|
}, tableProps);
|
108
146
|
}
|
109
|
-
}, [resizing]);
|
147
|
+
}, [resizing, anchorEl]);
|
148
|
+
const poperForDeltion = () => {
|
149
|
+
return /*#__PURE__*/_jsx(Popper, {
|
150
|
+
open: open,
|
151
|
+
anchorEl: anchorEl,
|
152
|
+
placement: "bottom-start",
|
153
|
+
disablePortal: true,
|
154
|
+
ref: popperRef,
|
155
|
+
sx: classes.deleteCellsPopUp,
|
156
|
+
children: popperOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
|
157
|
+
value: option.value,
|
158
|
+
onClick: () => handleMenuItemClick(option.value),
|
159
|
+
contentEditable: false,
|
160
|
+
sx: classes.menuItemPopUp,
|
161
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
162
|
+
sx: {
|
163
|
+
fontSize: "12px",
|
164
|
+
userSelect: "none"
|
165
|
+
},
|
166
|
+
children: option.value
|
167
|
+
})
|
168
|
+
}, option.value))
|
169
|
+
});
|
170
|
+
};
|
110
171
|
const sizeProps = isHeader ? {
|
111
172
|
width: size?.width || tableSize?.cellWidth
|
112
173
|
} : {};
|
@@ -121,6 +182,7 @@ const TableCell = props => {
|
|
121
182
|
border: `3px solid ${cellBorderColor}`,
|
122
183
|
...(sizeProps || {})
|
123
184
|
},
|
185
|
+
onContextMenu: onRightClick,
|
124
186
|
children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
|
125
187
|
classes: classes,
|
126
188
|
onMouseDown: onMouseDown,
|
@@ -128,7 +190,7 @@ const TableCell = props => {
|
|
128
190
|
}) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
|
129
191
|
className: "selection-area-tc",
|
130
192
|
contentEditable: false
|
131
|
-
}) : null]
|
193
|
+
}) : null, poperForDeltion()]
|
132
194
|
});
|
133
195
|
};
|
134
196
|
export default TableCell;
|
@@ -8,6 +8,7 @@ import { ReactEditor } from "slate-react";
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
10
|
const TableContextMenu = props => {
|
11
|
+
console.log("Table context menu :", props);
|
11
12
|
const {
|
12
13
|
editor
|
13
14
|
} = props;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { useSlateStatic } from "slate-react";
|
3
|
+
import UndoIcon from "../../assets/svg/UndoIcon";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const UndoButton = () => {
|
6
|
+
const editor = useSlateStatic();
|
7
|
+
const onUndo = () => {
|
8
|
+
editor?.undo();
|
9
|
+
};
|
10
|
+
return /*#__PURE__*/_jsx(UndoIcon, {
|
11
|
+
onClick: onUndo
|
12
|
+
});
|
13
|
+
};
|
14
|
+
export default UndoButton;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from "react";
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
2
2
|
import { TextField, IconButton } from "@mui/material";
|
3
3
|
import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
|
4
4
|
import { headingMap, sizeMap } from "../../utils/font.js";
|
@@ -18,6 +18,11 @@ const TextSize = ({
|
|
18
18
|
const [size] = useWindowResize();
|
19
19
|
const val = activeMark(editor, format);
|
20
20
|
const value = getBreakPointsValue(val, size?.device);
|
21
|
+
const [fontSize, setFontSize] = useState();
|
22
|
+
const timerRef = useRef();
|
23
|
+
useEffect(() => {
|
24
|
+
setFontSize(getSizeVal());
|
25
|
+
}, [value]);
|
21
26
|
const updateMarkData = newVal => {
|
22
27
|
let upData = {
|
23
28
|
...getBreakPointsValue(val),
|
@@ -39,10 +44,14 @@ const TextSize = ({
|
|
39
44
|
}
|
40
45
|
});
|
41
46
|
};
|
42
|
-
const onChangeSize =
|
43
|
-
|
44
|
-
|
45
|
-
|
47
|
+
const onChangeSize = value => {
|
48
|
+
if (value) {
|
49
|
+
let inc = parseInt(value);
|
50
|
+
inc = inc > 200 ? 200 : inc;
|
51
|
+
updateMarkData(inc);
|
52
|
+
} else {
|
53
|
+
setFontSize(null);
|
54
|
+
}
|
46
55
|
};
|
47
56
|
const getSizeVal = () => {
|
48
57
|
try {
|
@@ -67,11 +76,19 @@ const TextSize = ({
|
|
67
76
|
const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
|
68
77
|
updateMarkData(newVal);
|
69
78
|
};
|
79
|
+
const onChange = e => {
|
80
|
+
clearTimeout(timerRef.current);
|
81
|
+
const value = e.target.value;
|
82
|
+
setFontSize(value);
|
83
|
+
timerRef.current = setTimeout(() => {
|
84
|
+
onChangeSize(value);
|
85
|
+
}, 500);
|
86
|
+
};
|
70
87
|
return /*#__PURE__*/_jsx(_Fragment, {
|
71
88
|
children: /*#__PURE__*/_jsx(TextField, {
|
72
89
|
sx: classes?.textSize,
|
73
|
-
value:
|
74
|
-
onChange:
|
90
|
+
value: fontSize,
|
91
|
+
onChange: onChange,
|
75
92
|
size: "small",
|
76
93
|
inputProps: {
|
77
94
|
style: {
|