@flozy/editor 9.5.5 → 9.5.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/Elements/Table/TableCell.js +30 -4
- package/dist/Editor/Toolbar/PopupTool/index.js +7 -1
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -15
- package/dist/Editor/common/RnD/VirtualElement/index.js +2 -1
- package/dist/Editor/helper/index.js +14 -10
- package/dist/Editor/hooks/useDrag.js +10 -16
- package/dist/Editor/hooks/useEditorScroll.js +5 -10
- package/dist/Editor/hooks/useMouseMove.js +10 -16
- package/dist/Editor/hooks/useTable.js +1 -1
- package/dist/Editor/utils/table.js +9 -6
- package/package.json +1 -1
@@ -12,9 +12,30 @@ import TablePopup from "./TablePopup";
|
|
12
12
|
import { Droppable } from "./Droppable";
|
13
13
|
import { useDndContext } from "@dnd-kit/core";
|
14
14
|
import { getNodeWithType } from "../../utils/helper";
|
15
|
+
import { isEmptyTextNode } from "../../helper";
|
16
|
+
import SimpleText from "../SimpleText";
|
15
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
16
18
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
17
19
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
20
|
+
const withOldTableData = WrappedComponent => {
|
21
|
+
// to prevent old table data issues, ("table-cell" node is coming without parent "table" node (FS-9330))
|
22
|
+
return function TableHOC(props) {
|
23
|
+
const tableData = useTable();
|
24
|
+
if (!tableData) {
|
25
|
+
const {
|
26
|
+
element
|
27
|
+
} = props;
|
28
|
+
const isEmpty = isEmptyTextNode(element);
|
29
|
+
return /*#__PURE__*/_jsx(SimpleText, {
|
30
|
+
...props,
|
31
|
+
isEmpty: isEmpty
|
32
|
+
});
|
33
|
+
}
|
34
|
+
return /*#__PURE__*/_jsx(WrappedComponent, {
|
35
|
+
...props
|
36
|
+
});
|
37
|
+
};
|
38
|
+
};
|
18
39
|
const Resizer = ({
|
19
40
|
classes,
|
20
41
|
onMouseDown,
|
@@ -100,8 +121,12 @@ const TableCell = props => {
|
|
100
121
|
const [openSettings, setOpenSettings] = useState(false);
|
101
122
|
const table = new TableUtil(editor);
|
102
123
|
const tableProps = table.getTableProps();
|
103
|
-
const [tableNode] = getNodeWithType(editor, "table",
|
104
|
-
|
124
|
+
const [tableNode] = getNodeWithType(editor, "table", {
|
125
|
+
at: path
|
126
|
+
}); // getting cannot find the descendant path error, while deleting table because of unknown re-render issue, so wrapping it with try catch
|
127
|
+
const [rowNode] = getNodeWithType(editor, "table-row", {
|
128
|
+
at: path
|
129
|
+
});
|
105
130
|
const currentPath = path.slice(-2) || []; // getting last 2 items from path, which gives row and column position of the cell
|
106
131
|
const [row, column] = currentPath;
|
107
132
|
const isFirstRow = row === 0;
|
@@ -156,7 +181,7 @@ const TableCell = props => {
|
|
156
181
|
};
|
157
182
|
useEffect(() => {
|
158
183
|
const currentPath = path?.toString();
|
159
|
-
setTimeout(() => {
|
184
|
+
const timeoutId = setTimeout(() => {
|
160
185
|
if (tableResizing === currentPath) {
|
161
186
|
setTableResizing(null);
|
162
187
|
|
@@ -172,6 +197,7 @@ const TableCell = props => {
|
|
172
197
|
if (resizing) {
|
173
198
|
setTableResizing(currentPath);
|
174
199
|
}
|
200
|
+
return () => clearTimeout(timeoutId);
|
175
201
|
}, [resizing]);
|
176
202
|
const onMouseEnter = path => {
|
177
203
|
setHoverPath(path);
|
@@ -459,4 +485,4 @@ const TableCell = props => {
|
|
459
485
|
}) : null]
|
460
486
|
});
|
461
487
|
};
|
462
|
-
export default TableCell;
|
488
|
+
export default withOldTableData(TableCell);
|
@@ -83,7 +83,13 @@ const PopupTool = props => {
|
|
83
83
|
}
|
84
84
|
}, [event, anchorEl]);
|
85
85
|
useEffect(() => {
|
86
|
-
|
86
|
+
const {
|
87
|
+
path,
|
88
|
+
enable
|
89
|
+
} = selectedElement || {};
|
90
|
+
const isFreeGridElement = path && path.split("|").length > 2;
|
91
|
+
const isFreeGridEnabled = enable === 1 && isFreeGridElement;
|
92
|
+
if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || isFreeGridEnabled) {
|
87
93
|
setAnchorEl(null);
|
88
94
|
} else {
|
89
95
|
updateAnchorEl();
|
@@ -1,19 +1,9 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { useTheme, ThemeProvider, createTheme } from "@mui/material";
|
2
|
+
import { useTheme, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
|
3
3
|
import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
-
const isPdf = () => {
|
6
|
-
try {
|
7
|
-
const hash = window.location.hash;
|
8
|
-
const queryString = hash.split("?")[1]; // Get part after "?"
|
9
|
-
const params = new URLSearchParams(queryString);
|
10
|
-
return params.get("isPdf");
|
11
|
-
} catch (err) {
|
12
|
-
console.log(err);
|
13
|
-
}
|
14
|
-
};
|
15
4
|
|
16
5
|
// Custom breakpoints functions
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
17
7
|
const customUp = (key, breakpoints) => {
|
18
8
|
const MOCK_BREAKPOINT = isStimulator();
|
19
9
|
if (key === "xs") {
|
@@ -59,9 +49,9 @@ const getBreakPoints = prevTheme => {
|
|
59
49
|
};
|
60
50
|
|
61
51
|
// Extend the existing theme with custom breakpoint functions
|
62
|
-
const extendedTheme = prevTheme => createTheme({
|
52
|
+
const extendedTheme = (prevTheme, isPrintMode) => createTheme({
|
63
53
|
...prevTheme,
|
64
|
-
breakpoints:
|
54
|
+
breakpoints: isPrintMode ? {
|
65
55
|
values: {
|
66
56
|
...prevTheme.breakpoints.values,
|
67
57
|
md: 400 // To resolve, while taking pdf on A4 size, it is getting mobile view because of breakpoint
|
@@ -72,7 +62,8 @@ const ViewportStimulator = ({
|
|
72
62
|
children
|
73
63
|
}) => {
|
74
64
|
const theme = useTheme();
|
75
|
-
const
|
65
|
+
const isPrintMode = useMediaQuery("print");
|
66
|
+
const viewportTheme = extendedTheme(theme, isPrintMode);
|
76
67
|
return /*#__PURE__*/_jsx(ThemeProvider, {
|
77
68
|
theme: viewportTheme,
|
78
69
|
children: children
|
@@ -75,12 +75,13 @@ const VirtualElement = props => {
|
|
75
75
|
const virtualRef = useRef();
|
76
76
|
useEffect(() => {
|
77
77
|
if (virtualRef?.current) {
|
78
|
-
setTimeout(() => {
|
78
|
+
const timeoutId = setTimeout(() => {
|
79
79
|
const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
|
80
80
|
const groupData = groupByPathAndCalculateHeight(allData);
|
81
81
|
// it should trigger by auto alignment or on clicking mobile view change
|
82
82
|
updateAutoProps(editor, allData, "xs", groupData);
|
83
83
|
}, 100);
|
84
|
+
return () => clearTimeout(timeoutId);
|
84
85
|
}
|
85
86
|
}, [updated_at, virtualRef?.current]);
|
86
87
|
const calculateProps = (curPath, dom, domClass, allData) => {
|
@@ -287,18 +287,22 @@ export const bringItemToFB = (editor, {
|
|
287
287
|
};
|
288
288
|
export const debounce = function (func, wait, immediate) {
|
289
289
|
let timeout;
|
290
|
-
|
291
|
-
const context = this
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
callNow = immediate && !timeout;
|
290
|
+
function debounced(...args) {
|
291
|
+
const context = this;
|
292
|
+
const later = function () {
|
293
|
+
timeout = null;
|
294
|
+
if (!immediate) func.apply(context, args);
|
295
|
+
};
|
296
|
+
const callNow = immediate && !timeout;
|
298
297
|
clearTimeout(timeout);
|
299
298
|
timeout = setTimeout(later, wait);
|
300
299
|
if (callNow) func.apply(context, args);
|
300
|
+
}
|
301
|
+
debounced.cancel = function () {
|
302
|
+
clearTimeout(timeout);
|
303
|
+
timeout = null;
|
301
304
|
};
|
305
|
+
return debounced;
|
302
306
|
};
|
303
307
|
export const getTextColor = (color = "") => {
|
304
308
|
return color?.indexOf("gradient") >= 0 ? {
|
@@ -337,14 +341,14 @@ export const isCarouselSelected = editor => {
|
|
337
341
|
return false;
|
338
342
|
}
|
339
343
|
const [nodeEntry] = Editor.nodes(editor, {
|
340
|
-
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type ===
|
344
|
+
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
|
341
345
|
});
|
342
346
|
if (!nodeEntry) {
|
343
347
|
return false;
|
344
348
|
}
|
345
349
|
const [node] = nodeEntry;
|
346
350
|
const carouselDom = ReactEditor.toDOMNode(editor, node);
|
347
|
-
const isEdit = carouselDom.classList.contains(
|
351
|
+
const isEdit = carouselDom.classList.contains("carousel_slider_edit");
|
348
352
|
return !isEdit;
|
349
353
|
} catch (err) {
|
350
354
|
console.log(err);
|
@@ -2,25 +2,19 @@ import { useEffect, useState } from "react";
|
|
2
2
|
const useDrag = () => {
|
3
3
|
const [event, setEvent] = useState("");
|
4
4
|
useEffect(() => {
|
5
|
-
|
6
|
-
|
7
|
-
|
5
|
+
const onMouseDown = () => {
|
6
|
+
setEvent("start");
|
7
|
+
};
|
8
|
+
const onMouseUp = () => {
|
9
|
+
setEvent("end");
|
8
10
|
};
|
9
|
-
}, []);
|
10
|
-
const onMouseDown = () => {
|
11
|
-
setEvent("start");
|
12
|
-
};
|
13
|
-
const onMouseUp = () => {
|
14
|
-
setEvent("end");
|
15
|
-
};
|
16
|
-
const addListener = () => {
|
17
11
|
document.addEventListener("pointerdown", onMouseDown);
|
18
12
|
document.addEventListener("pointerup", onMouseUp);
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
};
|
13
|
+
return () => {
|
14
|
+
document.removeEventListener("pointerdown", onMouseDown);
|
15
|
+
document.removeEventListener("pointerup", onMouseUp);
|
16
|
+
};
|
17
|
+
}, []);
|
24
18
|
return [event];
|
25
19
|
};
|
26
20
|
export default useDrag;
|
@@ -3,22 +3,17 @@ function useEditorScroll(editorWrapper = {
|
|
3
3
|
current: null
|
4
4
|
}, callback) {
|
5
5
|
useEffect(() => {
|
6
|
+
if (!editorWrapper?.current) return;
|
6
7
|
const handleScroll = () => {
|
7
|
-
|
8
|
-
callback("scroll");
|
9
|
-
}
|
8
|
+
callback("scroll");
|
10
9
|
};
|
11
10
|
const currentEditorWrapper = editorWrapper.current;
|
12
|
-
|
13
|
-
currentEditorWrapper.addEventListener("scroll", handleScroll);
|
14
|
-
}
|
11
|
+
currentEditorWrapper.addEventListener("scroll", handleScroll);
|
15
12
|
|
16
13
|
// Cleanup the event listener on component unmount
|
17
14
|
return () => {
|
18
|
-
|
19
|
-
currentEditorWrapper.removeEventListener("scroll", handleScroll);
|
20
|
-
}
|
15
|
+
currentEditorWrapper.removeEventListener("scroll", handleScroll);
|
21
16
|
};
|
22
|
-
}, [editorWrapper
|
17
|
+
}, [editorWrapper, callback]);
|
23
18
|
}
|
24
19
|
export default useEditorScroll;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { useEffect, useState, createContext, useContext, useMemo } from "react";
|
1
|
+
import { useEffect, useState, createContext, useContext, useMemo, useCallback } from "react";
|
2
2
|
import { getSelectedText } from "../utils/helper";
|
3
3
|
import { debounce } from "../helper";
|
4
4
|
import { defaultFontFamilies } from "../common/FontLoader/FontList";
|
@@ -115,13 +115,7 @@ const useMouseMove = dragging => {
|
|
115
115
|
const [event, setEvent] = useState({
|
116
116
|
target: null
|
117
117
|
});
|
118
|
-
|
119
|
-
addListener();
|
120
|
-
return () => {
|
121
|
-
removeListener();
|
122
|
-
};
|
123
|
-
}, []);
|
124
|
-
const onMouseMove = e => {
|
118
|
+
const onMouseMove = useCallback(debounce(e => {
|
125
119
|
if (!dragging?.id) {
|
126
120
|
const dpath = e?.target?.closest(".dpath");
|
127
121
|
if (dpath) {
|
@@ -130,14 +124,14 @@ const useMouseMove = dragging => {
|
|
130
124
|
});
|
131
125
|
}
|
132
126
|
}
|
133
|
-
};
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
};
|
127
|
+
}, 100), [dragging]);
|
128
|
+
useEffect(() => {
|
129
|
+
document.addEventListener("mousemove", onMouseMove);
|
130
|
+
return () => {
|
131
|
+
document.removeEventListener("mousemove", onMouseMove);
|
132
|
+
onMouseMove.cancel(); // Cancel any pending debounced calls
|
133
|
+
};
|
134
|
+
}, [onMouseMove]);
|
141
135
|
return [event];
|
142
136
|
};
|
143
137
|
export default useMouseMove;
|
@@ -184,7 +184,7 @@ export const TableProvider = ({
|
|
184
184
|
window.removeEventListener("copy", handleCopy);
|
185
185
|
window.removeEventListener("cut", handleCut);
|
186
186
|
};
|
187
|
-
}, [tableSelection, editor
|
187
|
+
}, [tableSelection, editor]);
|
188
188
|
|
189
189
|
// useEffect(() => {
|
190
190
|
// selectFirstCell(tablePath, editor, updateTableSelection);
|
@@ -534,12 +534,15 @@ export class TableUtil {
|
|
534
534
|
const [currentTable, currentTablePath] = tableNode;
|
535
535
|
const [currentCell, currentCellPath] = tableCellNode;
|
536
536
|
const [currentRow, currentRowPath] = tableRowNode;
|
537
|
-
const startPath =
|
538
|
-
Transforms.setNodes(
|
539
|
-
|
540
|
-
},
|
541
|
-
|
542
|
-
|
537
|
+
// const startPath = currentCellPath;
|
538
|
+
// Transforms.setNodes(
|
539
|
+
// this.editor,
|
540
|
+
// { cellBgColor: "#FFFFFF" },
|
541
|
+
// {
|
542
|
+
// at: startPath,
|
543
|
+
// }
|
544
|
+
// );
|
545
|
+
|
543
546
|
if (currentTable && currentCell && currentRow) {
|
544
547
|
const currentTableProps = {
|
545
548
|
...currentTable
|