@flozy/editor 8.0.0 → 8.0.1
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 +32 -8
- package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +15 -0
- package/dist/Editor/Elements/DataView/Layouts/TableView.js +111 -29
- package/dist/Editor/Elements/DataView/styles.js +8 -8
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +2 -1
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/index.js +2 -1
- package/dist/Editor/common/CustomDialog/index.js +79 -83
- package/dist/Editor/common/CustomDialog/styles.js +80 -0
- package/dist/Editor/common/RnD/Utils/index.js +4 -1
- package/dist/Editor/utils/helper.js +12 -0
- package/package.json +1 -1
|
@@ -27,7 +27,7 @@ import DragAndDrop from "./common/DnD";
|
|
|
27
27
|
import Section from "./common/Section";
|
|
28
28
|
import decorators from "./utils/Decorators";
|
|
29
29
|
import { getTRBLBreakPoints, getVariableValue, getBreakpointLineSpacing } from "./helper/theme";
|
|
30
|
-
import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
|
|
30
|
+
import { getInitialValue, handleInsertLastElement, isEverythingSelected, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
|
|
31
31
|
import useWindowResize from "./hooks/useWindowResize";
|
|
32
32
|
import { getTheme } from "./theme";
|
|
33
33
|
import ThemeSettings from "./themeSettings";
|
|
@@ -41,6 +41,7 @@ import "./Editor.css";
|
|
|
41
41
|
import "animate.css";
|
|
42
42
|
import FontLoader from "./common/FontLoader/FontLoader";
|
|
43
43
|
import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
|
|
44
|
+
import { CustomDialogComponent } from "./common/CustomDialog";
|
|
44
45
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
45
46
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
46
47
|
export const ThemeContext = /*#__PURE__*/createContext(null);
|
|
@@ -120,6 +121,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
120
121
|
const [breakpoint, setBreakpoint] = useState("");
|
|
121
122
|
const [topBanner, setTopBanner] = useState();
|
|
122
123
|
const debouncedValue = useRef(value);
|
|
124
|
+
const dialogRef = useRef(null);
|
|
123
125
|
const [size] = useWindowResize();
|
|
124
126
|
const {
|
|
125
127
|
needDotsBG,
|
|
@@ -374,6 +376,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
374
376
|
...partialState
|
|
375
377
|
}));
|
|
376
378
|
};
|
|
379
|
+
const handleDeleteAll = () => {
|
|
380
|
+
const {
|
|
381
|
+
selection
|
|
382
|
+
} = editor;
|
|
383
|
+
if (selection) {
|
|
384
|
+
editor.deleteFragment();
|
|
385
|
+
dialogRef.current?.handleClose();
|
|
386
|
+
}
|
|
387
|
+
};
|
|
377
388
|
const onKeyDown = useCallback(event => {
|
|
378
389
|
const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
|
|
379
390
|
const isCtrlKey = event.ctrlKey || isMetaKey;
|
|
@@ -420,14 +431,19 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
420
431
|
const {
|
|
421
432
|
selection
|
|
422
433
|
} = editor;
|
|
434
|
+
const everythingSelect = isEverythingSelected(editor);
|
|
423
435
|
event.preventDefault();
|
|
424
|
-
if (
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
}
|
|
436
|
+
if (everythingSelect) {
|
|
437
|
+
dialogRef.current?.handleOpen();
|
|
438
|
+
} else {
|
|
439
|
+
if (selection) {
|
|
440
|
+
if (!Range.isCollapsed(selection)) {
|
|
441
|
+
editor.deleteFragment();
|
|
442
|
+
} else {
|
|
443
|
+
editor.deleteBackward({
|
|
444
|
+
unit: "character"
|
|
445
|
+
});
|
|
446
|
+
}
|
|
431
447
|
}
|
|
432
448
|
}
|
|
433
449
|
}
|
|
@@ -660,6 +676,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
660
676
|
})]
|
|
661
677
|
}, id)
|
|
662
678
|
})
|
|
679
|
+
}), /*#__PURE__*/_jsx(CustomDialogComponent, {
|
|
680
|
+
ref: dialogRef,
|
|
681
|
+
content: "Are you sure you want to delete All the content?",
|
|
682
|
+
confirmText: "Delete",
|
|
683
|
+
cancelText: "Cancel",
|
|
684
|
+
onConfirm: () => {
|
|
685
|
+
handleDeleteAll();
|
|
686
|
+
}
|
|
663
687
|
})]
|
|
664
688
|
});
|
|
665
689
|
});
|
|
@@ -16,6 +16,7 @@ const useTableStyles = (theme, appTheme) => ({
|
|
|
16
16
|
height: "40px"
|
|
17
17
|
},
|
|
18
18
|
"& th": {
|
|
19
|
+
position: "relative",
|
|
19
20
|
"& svg": {
|
|
20
21
|
"& .fillStroke": {
|
|
21
22
|
stroke: appTheme?.palette?.editor?.tv_stroke
|
|
@@ -129,6 +130,20 @@ const useTableStyles = (theme, appTheme) => ({
|
|
|
129
130
|
opacity: 1
|
|
130
131
|
}
|
|
131
132
|
}
|
|
133
|
+
},
|
|
134
|
+
cellResizer: {
|
|
135
|
+
position: "absolute",
|
|
136
|
+
cursor: "col-resize",
|
|
137
|
+
right: "0px",
|
|
138
|
+
top: 0,
|
|
139
|
+
width: "3px",
|
|
140
|
+
borderRadius: "0px",
|
|
141
|
+
zIndex: 1,
|
|
142
|
+
background: "transparent",
|
|
143
|
+
height: "100%",
|
|
144
|
+
"&:hover, &.active": {
|
|
145
|
+
background: "#2563EB"
|
|
146
|
+
}
|
|
132
147
|
}
|
|
133
148
|
});
|
|
134
149
|
export default useTableStyles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
2
2
|
import { Box, Button, useTheme } from "@mui/material";
|
|
3
3
|
import { useDataView } from "../Providers/DataViewProvider";
|
|
4
4
|
import PropertySettings from "./Options";
|
|
@@ -7,37 +7,116 @@ import useTableStyles from "./TableStyles";
|
|
|
7
7
|
import { GridSettingsIcon, GridAddSectionIcon } from "../../../common/iconslist";
|
|
8
8
|
import { useEditorContext } from "../../../hooks/useMouseMove";
|
|
9
9
|
import Icon from "../../../common/Icon";
|
|
10
|
+
import useTableResize from "../../../utils/customHooks/useTableResize";
|
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
12
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
12
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
const Resizer = ({
|
|
15
|
+
classes,
|
|
16
|
+
onMouseDown,
|
|
17
|
+
height,
|
|
18
|
+
resizing
|
|
19
|
+
}) => {
|
|
20
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
|
21
|
+
children: /*#__PURE__*/_jsx(Box, {
|
|
22
|
+
component: "div",
|
|
23
|
+
className: `cell-resizer ${resizing ? "active" : ""}`,
|
|
24
|
+
contentEditable: false,
|
|
25
|
+
onPointerDown: onMouseDown,
|
|
26
|
+
sx: classes.cellResizer,
|
|
27
|
+
style: {
|
|
28
|
+
height: `${height}px`
|
|
29
|
+
}
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
};
|
|
13
33
|
const SortIcon = props => {
|
|
14
34
|
const {
|
|
15
35
|
sortBy
|
|
16
36
|
} = props;
|
|
17
37
|
return sortBy ? sortBy === "asc" ? /*#__PURE__*/_jsx(Box, {
|
|
18
38
|
sx: {
|
|
19
|
-
|
|
20
|
-
|
|
39
|
+
"& svg": {
|
|
40
|
+
"& path": {
|
|
21
41
|
stroke: "rgba(37, 99, 235, 1) !important"
|
|
22
42
|
}
|
|
23
43
|
}
|
|
24
44
|
},
|
|
25
45
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
26
|
-
icon:
|
|
46
|
+
icon: "chervUp"
|
|
27
47
|
})
|
|
28
48
|
}) : /*#__PURE__*/_jsx(Box, {
|
|
29
49
|
sx: {
|
|
30
|
-
|
|
31
|
-
|
|
50
|
+
"& svg": {
|
|
51
|
+
"& path": {
|
|
32
52
|
stroke: "rgba(37, 99, 235, 1) !important"
|
|
33
53
|
}
|
|
34
54
|
}
|
|
35
55
|
},
|
|
36
56
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
37
|
-
icon:
|
|
57
|
+
icon: "chervDown"
|
|
38
58
|
})
|
|
39
59
|
}) : null;
|
|
40
60
|
};
|
|
61
|
+
const THead = props => {
|
|
62
|
+
const thRef = useRef(null);
|
|
63
|
+
const {
|
|
64
|
+
iconType,
|
|
65
|
+
isSort,
|
|
66
|
+
classes,
|
|
67
|
+
onEditProperty,
|
|
68
|
+
m,
|
|
69
|
+
tableRef,
|
|
70
|
+
handleResize
|
|
71
|
+
} = props;
|
|
72
|
+
// do not remove extra coma it will lead to swap of variable
|
|
73
|
+
const [size, onMouseDown, resizing,, isDone] = useTableResize({
|
|
74
|
+
parentDOM: thRef?.current,
|
|
75
|
+
size: m?.size,
|
|
76
|
+
minMaxProps: {
|
|
77
|
+
minWidth: 30
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
if (isDone) {
|
|
82
|
+
handleResize({
|
|
83
|
+
...m,
|
|
84
|
+
size: size
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
}, [isDone]);
|
|
88
|
+
return /*#__PURE__*/_jsxs("th", {
|
|
89
|
+
style: {
|
|
90
|
+
minWidth: size?.width || 200,
|
|
91
|
+
maxWidth: size?.width || 200,
|
|
92
|
+
width: size?.width || 200
|
|
93
|
+
},
|
|
94
|
+
ref: thRef,
|
|
95
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
|
96
|
+
sx: {
|
|
97
|
+
maxWidth: "100%",
|
|
98
|
+
overflow: "hidden"
|
|
99
|
+
},
|
|
100
|
+
children: /*#__PURE__*/_jsx(Button, {
|
|
101
|
+
className: "tv-act-btn la",
|
|
102
|
+
startIcon: /*#__PURE__*/_jsx(Icon, {
|
|
103
|
+
icon: iconType
|
|
104
|
+
}),
|
|
105
|
+
endIcon: /*#__PURE__*/_jsx(SortIcon, {
|
|
106
|
+
sortBy: isSort
|
|
107
|
+
}),
|
|
108
|
+
fullWidth: true,
|
|
109
|
+
onClick: onEditProperty(m),
|
|
110
|
+
children: m.label
|
|
111
|
+
})
|
|
112
|
+
}), /*#__PURE__*/_jsx(Resizer, {
|
|
113
|
+
classes: classes,
|
|
114
|
+
onMouseDown: onMouseDown,
|
|
115
|
+
height: tableRef?.current?.getBoundingClientRect()?.height,
|
|
116
|
+
resizing: resizing
|
|
117
|
+
})]
|
|
118
|
+
});
|
|
119
|
+
};
|
|
41
120
|
const TableView = props => {
|
|
42
121
|
const {
|
|
43
122
|
theme: appTheme
|
|
@@ -48,6 +127,7 @@ const TableView = props => {
|
|
|
48
127
|
} = props;
|
|
49
128
|
const theme = useTheme();
|
|
50
129
|
const classes = useTableStyles(theme, appTheme);
|
|
130
|
+
const tableRef = useRef(null);
|
|
51
131
|
const {
|
|
52
132
|
properties,
|
|
53
133
|
onAddProperty,
|
|
@@ -164,6 +244,9 @@ const TableView = props => {
|
|
|
164
244
|
setMode({});
|
|
165
245
|
setAnchorEl(null);
|
|
166
246
|
};
|
|
247
|
+
const handleResize = data => {
|
|
248
|
+
onUpdateProperty(data);
|
|
249
|
+
};
|
|
167
250
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
168
251
|
children: [/*#__PURE__*/_jsx(Box, {
|
|
169
252
|
component: "div",
|
|
@@ -173,6 +256,7 @@ const TableView = props => {
|
|
|
173
256
|
children: /*#__PURE__*/_jsxs(Box, {
|
|
174
257
|
component: "table",
|
|
175
258
|
sx: classes.table,
|
|
259
|
+
ref: tableRef,
|
|
176
260
|
children: [/*#__PURE__*/_jsx("thead", {
|
|
177
261
|
children: /*#__PURE__*/_jsxs("tr", {
|
|
178
262
|
children: [shownProperties?.map((m, i) => {
|
|
@@ -180,26 +264,21 @@ const TableView = props => {
|
|
|
180
264
|
Icon: iconType
|
|
181
265
|
} = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
|
|
182
266
|
const isSort = sortBy?.key === m.key ? sortBy?.operator : null;
|
|
183
|
-
return /*#__PURE__*/_jsx(
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
}),
|
|
192
|
-
endIcon: /*#__PURE__*/_jsx(SortIcon, {
|
|
193
|
-
sortBy: isSort
|
|
194
|
-
}),
|
|
195
|
-
fullWidth: true,
|
|
196
|
-
onClick: onEditProperty(m),
|
|
197
|
-
children: m.label
|
|
198
|
-
})
|
|
267
|
+
return /*#__PURE__*/_jsx(THead, {
|
|
268
|
+
iconType: iconType,
|
|
269
|
+
isSort: isSort,
|
|
270
|
+
onEditProperty: onEditProperty,
|
|
271
|
+
m: m,
|
|
272
|
+
classes: classes,
|
|
273
|
+
tableRef: tableRef,
|
|
274
|
+
handleResize: handleResize
|
|
199
275
|
}, i);
|
|
200
276
|
}), !readOnly ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
201
277
|
children: [/*#__PURE__*/_jsx("th", {
|
|
202
278
|
className: "tv-act-btn ico",
|
|
279
|
+
style: {
|
|
280
|
+
widht: "autp"
|
|
281
|
+
},
|
|
203
282
|
children: /*#__PURE__*/_jsx(Button, {
|
|
204
283
|
onClick: onAddClick,
|
|
205
284
|
fullWidth: true,
|
|
@@ -207,6 +286,9 @@ const TableView = props => {
|
|
|
207
286
|
})
|
|
208
287
|
}), /*#__PURE__*/_jsx("th", {
|
|
209
288
|
className: "tv-act-btn ico",
|
|
289
|
+
style: {
|
|
290
|
+
widht: "autp"
|
|
291
|
+
},
|
|
210
292
|
children: /*#__PURE__*/_jsx(Button, {
|
|
211
293
|
onClick: onSettings,
|
|
212
294
|
fullWidth: true,
|
|
@@ -226,18 +308,18 @@ const TableView = props => {
|
|
|
226
308
|
textTransform: "none",
|
|
227
309
|
justifyContent: "start",
|
|
228
310
|
color: appTheme?.palette?.editor?.activeColor,
|
|
229
|
-
|
|
230
|
-
width:
|
|
231
|
-
height:
|
|
311
|
+
"& svg": {
|
|
312
|
+
width: "18px",
|
|
313
|
+
height: "18px",
|
|
232
314
|
strokeWidth: 1.2,
|
|
233
|
-
|
|
315
|
+
"& path": {
|
|
234
316
|
stroke: appTheme?.palette?.editor?.activeColor
|
|
235
317
|
}
|
|
236
318
|
},
|
|
237
|
-
fontFamily:
|
|
319
|
+
fontFamily: "inter"
|
|
238
320
|
},
|
|
239
321
|
startIcon: /*#__PURE__*/_jsx(Icon, {
|
|
240
|
-
icon:
|
|
322
|
+
icon: "addRounded"
|
|
241
323
|
}),
|
|
242
324
|
children: "Add new row"
|
|
243
325
|
}) : null, open && !readOnly ? /*#__PURE__*/_jsx(PropertySettings, {
|
|
@@ -11,7 +11,7 @@ const useDataViewStyles = (theme, appTheme) => ({
|
|
|
11
11
|
},
|
|
12
12
|
"& table th": {
|
|
13
13
|
cursor: "pointer",
|
|
14
|
-
|
|
14
|
+
minWidth: "200px"
|
|
15
15
|
},
|
|
16
16
|
"& table, th, td": {
|
|
17
17
|
border: "1px solid black",
|
|
@@ -48,7 +48,7 @@ const useDataViewStyles = (theme, appTheme) => ({
|
|
|
48
48
|
"& .tv-ck-box": {
|
|
49
49
|
"& svg": {
|
|
50
50
|
color: appTheme?.palette?.editor?.tv_border,
|
|
51
|
-
|
|
51
|
+
"& rect": {
|
|
52
52
|
fill: appTheme?.palette?.editor?.tv_chk_box_fill,
|
|
53
53
|
stroke: appTheme?.palette?.editor?.tv_chk_box_stroke
|
|
54
54
|
}
|
|
@@ -56,9 +56,9 @@ const useDataViewStyles = (theme, appTheme) => ({
|
|
|
56
56
|
"&.Mui-checked": {
|
|
57
57
|
"& svg": {
|
|
58
58
|
color: "rgba(37, 99, 235, 1)",
|
|
59
|
-
|
|
59
|
+
"& rect": {
|
|
60
60
|
fill: appTheme?.palette?.editor?.activeColor,
|
|
61
|
-
stroke:
|
|
61
|
+
stroke: "none"
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
}
|
|
@@ -94,7 +94,7 @@ const useDataViewStyles = (theme, appTheme) => ({
|
|
|
94
94
|
border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
|
|
95
95
|
boxShadow: "0px 4px 18px 0px #0000000D",
|
|
96
96
|
borderRadius: "8px",
|
|
97
|
-
minWidth:
|
|
97
|
+
minWidth: "148px"
|
|
98
98
|
},
|
|
99
99
|
"& input": {
|
|
100
100
|
paddingBottom: "0px",
|
|
@@ -140,12 +140,12 @@ const useDataViewStyles = (theme, appTheme) => ({
|
|
|
140
140
|
width: "150px",
|
|
141
141
|
border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
|
|
142
142
|
borderRadius: "8px",
|
|
143
|
-
fontFamily:
|
|
143
|
+
fontFamily: "Inter !important",
|
|
144
144
|
background: appTheme?.palette?.editor?.tv_pop_bg,
|
|
145
145
|
color: appTheme?.palette?.editor?.tv_text_primary,
|
|
146
146
|
"& .MuiButtonBase-root": {
|
|
147
147
|
fontSize: "14px",
|
|
148
|
-
padding:
|
|
148
|
+
padding: "6px 8px",
|
|
149
149
|
"& svg": {
|
|
150
150
|
width: "16px",
|
|
151
151
|
height: "16px",
|
|
@@ -157,7 +157,7 @@ const useDataViewStyles = (theme, appTheme) => ({
|
|
|
157
157
|
color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
|
|
158
158
|
"& svg": {
|
|
159
159
|
color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
|
|
160
|
-
|
|
160
|
+
"& path": {
|
|
161
161
|
stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
|
|
162
162
|
}
|
|
163
163
|
}
|
|
@@ -59,7 +59,8 @@ const FreeGridBox = props => {
|
|
|
59
59
|
delete updateData.children;
|
|
60
60
|
updateData = formatBreakpointValues(element.type, breakpoint, updateData);
|
|
61
61
|
Transforms.setNodes(editor, {
|
|
62
|
-
...updateData
|
|
62
|
+
...updateData,
|
|
63
|
+
[`${breakpoint}_updatedOn`]: new Date().getTime()
|
|
63
64
|
}, {
|
|
64
65
|
at: path
|
|
65
66
|
});
|
|
@@ -59,7 +59,8 @@ const FreeGridItem = props => {
|
|
|
59
59
|
delete updateData.children;
|
|
60
60
|
updateData = formatBreakpointValues(element.type, breakpoint, updateData);
|
|
61
61
|
Transforms.setNodes(editor, {
|
|
62
|
-
...updateData
|
|
62
|
+
...updateData,
|
|
63
|
+
[`${breakpoint}_updatedOn`]: new Date().getTime()
|
|
63
64
|
}, {
|
|
64
65
|
at: path
|
|
65
66
|
});
|
|
@@ -33,6 +33,7 @@ const PopupTool = props => {
|
|
|
33
33
|
const [event] = useDrag(anchorEl);
|
|
34
34
|
const id = open ? "popup-edit-tool" : "";
|
|
35
35
|
const [size] = useWindowResize();
|
|
36
|
+
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
|
36
37
|
const updateAnchorEl = isScroll => {
|
|
37
38
|
try {
|
|
38
39
|
const isHavingSelection = selection && !Range.isCollapsed(selection);
|
|
@@ -98,7 +99,7 @@ const PopupTool = props => {
|
|
|
98
99
|
return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
|
|
99
100
|
onClickAway: e => {
|
|
100
101
|
// close the mini toolbar, if user clicks outside the editor (in Flozy app.)
|
|
101
|
-
if (e.target !== document.body) {
|
|
102
|
+
if (e.target !== document.body && !isMobile) {
|
|
102
103
|
// e.target returns body, if the user clicks material ui select popup inside the tool bar, on that time, we don't need to close
|
|
103
104
|
handleClose();
|
|
104
105
|
}
|
|
@@ -1,94 +1,90 @@
|
|
|
1
|
-
import Dialog from "@mui/material
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import CloseIcon from "@mui/icons-material/Close";
|
|
7
|
-
import { Box, Typography, Button } from "@mui/material";
|
|
8
|
-
import SwipeableDrawer from "../SwipeableDrawer";
|
|
9
|
-
import customDialogStyles from "./style";
|
|
1
|
+
import { Button, Dialog, DialogActions, DialogContent, Grid, SwipeableDrawer, Typography, useMediaQuery } from "@mui/material";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
|
4
|
+
import CustomDialogStyles from "./styles";
|
|
5
|
+
import { forwardRef, useImperativeHandle, useState } from "react";
|
|
10
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
8
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
-
|
|
9
|
+
const CustomDialog = (props, ref) => {
|
|
14
10
|
const {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
content,
|
|
12
|
+
confirmText,
|
|
13
|
+
cancelText,
|
|
14
|
+
onConfirm
|
|
19
15
|
} = props;
|
|
16
|
+
const [open, setOpen] = useState(false);
|
|
17
|
+
const isMobile = useMediaQuery("(max-width:899px)");
|
|
20
18
|
const {
|
|
21
|
-
|
|
22
|
-
} =
|
|
23
|
-
const classes =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
sx: {
|
|
33
|
-
fontWeight: 600
|
|
34
|
-
},
|
|
35
|
-
children: "What do you want to link to?"
|
|
36
|
-
}), /*#__PURE__*/_jsx(Box, {
|
|
37
|
-
sx: classes.mobileDialogContent,
|
|
38
|
-
children: children
|
|
39
|
-
}), /*#__PURE__*/_jsx(Box, {
|
|
40
|
-
component: "div",
|
|
41
|
-
sx: classes.mobileActionBtns,
|
|
42
|
-
children: /*#__PURE__*/_jsx(ActionsButtons, {
|
|
43
|
-
classes: classes,
|
|
44
|
-
onCancel: handleClose,
|
|
45
|
-
onSave: onSubmit
|
|
46
|
-
})
|
|
47
|
-
})]
|
|
19
|
+
theme
|
|
20
|
+
} = useEditorContext();
|
|
21
|
+
const classes = CustomDialogStyles(theme);
|
|
22
|
+
useImperativeHandle(ref, () => ({
|
|
23
|
+
handleOpen: () => setOpen(true),
|
|
24
|
+
handleClose: () => setOpen(false)
|
|
25
|
+
}));
|
|
26
|
+
const DialogueContent = () => /*#__PURE__*/_jsxs(_Fragment, {
|
|
27
|
+
children: [/*#__PURE__*/_jsx(DialogContent, {
|
|
28
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
|
29
|
+
children: content
|
|
48
30
|
})
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
31
|
+
}), /*#__PURE__*/_jsxs(DialogActions, {
|
|
32
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
|
33
|
+
className: "closeBtn",
|
|
34
|
+
onClick: () => setOpen(false),
|
|
35
|
+
children: cancelText
|
|
36
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
37
|
+
className: "confirmBtn",
|
|
38
|
+
onClick: () => {
|
|
39
|
+
onConfirm();
|
|
40
|
+
setOpen(false);
|
|
41
|
+
},
|
|
42
|
+
children: confirmText
|
|
43
|
+
})]
|
|
44
|
+
})]
|
|
45
|
+
});
|
|
46
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
|
47
|
+
children: !isMobile ? /*#__PURE__*/_jsx(Dialog, {
|
|
48
|
+
className: `${classes.MuiBackdropRoot}`,
|
|
49
|
+
open: open,
|
|
50
|
+
onClose: () => setOpen(false),
|
|
55
51
|
fullWidth: true,
|
|
56
52
|
maxWidth: "sm",
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
53
|
+
sx: classes.CustomDialogu,
|
|
54
|
+
children: /*#__PURE__*/_jsx(DialogueContent, {})
|
|
55
|
+
}) : /*#__PURE__*/_jsxs(SwipeableDrawer, {
|
|
56
|
+
open: open,
|
|
57
|
+
anchor: "bottom",
|
|
58
|
+
onClose: () => setOpen(false),
|
|
59
|
+
style: {
|
|
60
|
+
zIndex: "1300"
|
|
61
|
+
},
|
|
62
|
+
sx: classes.CustomDialogu,
|
|
63
|
+
disableBackdropTransition: true,
|
|
64
|
+
disableSwipeToOpen: true,
|
|
65
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
|
66
|
+
container: true,
|
|
67
|
+
justifyContent: "center",
|
|
68
|
+
className: "pullerRoot",
|
|
69
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
|
70
|
+
item: true,
|
|
71
|
+
className: "pullerGrid"
|
|
72
72
|
})
|
|
73
|
-
})]
|
|
74
|
-
})
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
export default CustomDialog;
|
|
78
|
-
function ActionsButtons({
|
|
79
|
-
classes,
|
|
80
|
-
onCancel,
|
|
81
|
-
onSave
|
|
82
|
-
}) {
|
|
83
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
84
|
-
children: [/*#__PURE__*/_jsx(Button, {
|
|
85
|
-
onClick: onCancel,
|
|
86
|
-
sx: classes.closeBtn,
|
|
87
|
-
children: "Cancel"
|
|
88
|
-
}), /*#__PURE__*/_jsx(Button, {
|
|
89
|
-
onClick: onSave,
|
|
90
|
-
sx: classes.saveBtn,
|
|
91
|
-
children: "Save"
|
|
92
|
-
})]
|
|
73
|
+
}), /*#__PURE__*/_jsx(DialogueContent, {})]
|
|
74
|
+
})
|
|
93
75
|
});
|
|
94
|
-
}
|
|
76
|
+
};
|
|
77
|
+
const CustomDialogComponent = /*#__PURE__*/forwardRef(CustomDialog);
|
|
78
|
+
CustomDialogComponent.defaultProps = {
|
|
79
|
+
content: "Are you sure you want to proceed?",
|
|
80
|
+
confirmText: "Confirm",
|
|
81
|
+
cancelText: "Cancel",
|
|
82
|
+
onConfirm: () => console.warn("onConfirm not provided")
|
|
83
|
+
};
|
|
84
|
+
CustomDialogComponent.propTypes = {
|
|
85
|
+
content: PropTypes.string,
|
|
86
|
+
confirmText: PropTypes.string,
|
|
87
|
+
cancelText: PropTypes.string,
|
|
88
|
+
onConfirm: PropTypes.func
|
|
89
|
+
};
|
|
90
|
+
export { CustomDialogComponent };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
const CustomDialogStyles = theme => ({
|
|
2
|
+
MuiBackdropRoot: {
|
|
3
|
+
opacity: "1",
|
|
4
|
+
transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
|
|
5
|
+
},
|
|
6
|
+
CustomDialogu: {
|
|
7
|
+
"& .MuiPaper-root": {
|
|
8
|
+
borderRadius: "12px 12px 0px 0px",
|
|
9
|
+
backgroundColor: `${theme?.palette?.greyshades?.light9} !important`,
|
|
10
|
+
"@media only screen and (min-width: 899px)": {
|
|
11
|
+
maxWidth: "400px",
|
|
12
|
+
border: `1px solid ${theme?.palette?.editor?.customDialogueBorder}`,
|
|
13
|
+
borderRadius: "12px"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"& .MuiDialogContent-root": {
|
|
17
|
+
padding: "20px 24px 8px 24px",
|
|
18
|
+
"& .MuiTypography-root": {
|
|
19
|
+
textAlign: "center",
|
|
20
|
+
fontFamily: "Inter, sans-serif",
|
|
21
|
+
fontSize: "14px",
|
|
22
|
+
fontWeight: 500,
|
|
23
|
+
color: theme?.palette?.editor?.textColor
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"& .confirmBtn": {
|
|
27
|
+
backgroundColor: "#2563EB",
|
|
28
|
+
padding: "8px 12px",
|
|
29
|
+
color: "#ffffff",
|
|
30
|
+
fontWeight: 600,
|
|
31
|
+
fontSize: "14px",
|
|
32
|
+
opacity: 1,
|
|
33
|
+
borderRadius: "8px",
|
|
34
|
+
textTransform: "math-auto",
|
|
35
|
+
height: "36px",
|
|
36
|
+
padding: "0px 12px",
|
|
37
|
+
minWidth: "90px",
|
|
38
|
+
"&:hover": {
|
|
39
|
+
backgroundColor: "#2563EB"
|
|
40
|
+
},
|
|
41
|
+
"@media only screen and (max-width: 899px)": {
|
|
42
|
+
width: "50%"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"& .MuiDialogActions-root": {
|
|
46
|
+
justifyContent: "center",
|
|
47
|
+
paddingBottom: "20px"
|
|
48
|
+
},
|
|
49
|
+
"& .closeBtn": {
|
|
50
|
+
padding: "8px 12px",
|
|
51
|
+
color: theme?.palette?.editor?.customDialogueCloseBtnColor,
|
|
52
|
+
fontWeight: 600,
|
|
53
|
+
fontSize: "14px",
|
|
54
|
+
opacity: 1,
|
|
55
|
+
borderRadius: "8px",
|
|
56
|
+
textTransform: "math-auto",
|
|
57
|
+
height: "36px",
|
|
58
|
+
padding: "0px 12px",
|
|
59
|
+
minWidth: "90px",
|
|
60
|
+
backgroundColor: theme?.palette?.editor?.closeButtonBackground,
|
|
61
|
+
border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`,
|
|
62
|
+
"&:hover": {
|
|
63
|
+
backgroundColor: theme?.palette?.editor?.closeButtonBackground
|
|
64
|
+
},
|
|
65
|
+
"@media only screen and (max-width: 899px)": {
|
|
66
|
+
width: "50%"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
"& .pullerRoot": {
|
|
70
|
+
padding: "8px 0"
|
|
71
|
+
},
|
|
72
|
+
"& .pullerGrid": {
|
|
73
|
+
width: "40px",
|
|
74
|
+
height: "5px",
|
|
75
|
+
backgroundColor: "#ccc",
|
|
76
|
+
borderRadius: "10px"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
export default CustomDialogStyles;
|
|
@@ -257,7 +257,10 @@ export function getAbsolutePositionX(currentEle) {
|
|
|
257
257
|
const {
|
|
258
258
|
left: currElementLeft
|
|
259
259
|
} = currentEle?.getBoundingClientRect() || {};
|
|
260
|
-
|
|
260
|
+
let parentBoxDom = currentEle?.closest(".fgi_type_box");
|
|
261
|
+
if (isMobile && !parentBoxDom) {
|
|
262
|
+
parentBoxDom = currentEle?.closest(".freegrid-section");
|
|
263
|
+
}
|
|
261
264
|
const relativeElementX = parentBoxDom || document.querySelector(".rnd-guideline-lv");
|
|
262
265
|
const {
|
|
263
266
|
left
|
|
@@ -784,4 +784,16 @@ export const viewSlateSelection = () => {
|
|
|
784
784
|
export const hideSlateSelection = () => {
|
|
785
785
|
const root = document.documentElement;
|
|
786
786
|
root.style.setProperty("--slate-highlight-bg", "none");
|
|
787
|
+
};
|
|
788
|
+
export const isEverythingSelected = editor => {
|
|
789
|
+
const {
|
|
790
|
+
selection
|
|
791
|
+
} = editor;
|
|
792
|
+
if (selection && Range.isExpanded(selection)) {
|
|
793
|
+
if (Range.includes(selection, Editor.start(editor, [])) && Range.includes(selection, Editor.end(editor, []))) {
|
|
794
|
+
return true;
|
|
795
|
+
} else {
|
|
796
|
+
return false;
|
|
797
|
+
}
|
|
798
|
+
}
|
|
787
799
|
};
|