@flozy/editor 5.3.5 → 5.3.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +0 -1
- package/dist/Editor/Elements/Table/Table.js +2 -4
- package/dist/Editor/Elements/Table/TableCell.js +5 -10
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -0
- package/dist/Editor/common/ToolbarIcon.js +0 -1
- package/dist/Editor/helper/deserialize/index.js +19 -23
- package/dist/Editor/hooks/useTable.js +22 -19
- package/dist/Editor/utils/helper.js +13 -0
- package/package.json +1 -1
@@ -150,8 +150,6 @@ const Table = props => {
|
|
150
150
|
const tableRef = useRef(null);
|
151
151
|
const containerRef = useRef(null);
|
152
152
|
const path = ReactEditor.findPath(editor, element);
|
153
|
-
const isValidPath = path && Editor.hasPath(editor, path); // getting cannot find the descendant path error while deleting table from free grid on right click
|
154
|
-
|
155
153
|
const dragRowBtnCls = `table-${path?.toString()?.replaceAll(",", "-")}-row-drag-btn`;
|
156
154
|
const handleAction = type => {
|
157
155
|
Transforms.select(editor, editor.selection);
|
@@ -267,7 +265,7 @@ const Table = props => {
|
|
267
265
|
openSetttings,
|
268
266
|
exandTools
|
269
267
|
},
|
270
|
-
children: [
|
268
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
271
269
|
style: {
|
272
270
|
minWidth: "100%",
|
273
271
|
maxWidth: "100%",
|
@@ -307,7 +305,7 @@ const Table = props => {
|
|
307
305
|
addType: "col",
|
308
306
|
onAdd: addCol
|
309
307
|
})]
|
310
|
-
})
|
308
|
+
}), /*#__PURE__*/_jsx(AddRowCol, {
|
311
309
|
...commonAddBtnProps,
|
312
310
|
addType: "row",
|
313
311
|
onAdd: addRow
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useState, useEffect, useMemo } from "react";
|
2
|
-
import { Editor,
|
2
|
+
import { Editor, Path, Transforms } from "slate";
|
3
3
|
import { Box } from "@mui/material";
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
5
5
|
import useTableResize from "../../utils/customHooks/useTableResize";
|
@@ -11,6 +11,7 @@ import DragButton from "./DragButton";
|
|
11
11
|
import TablePopup from "./TablePopup";
|
12
12
|
import { Droppable } from "./Droppable";
|
13
13
|
import { useDndContext } from "@dnd-kit/core";
|
14
|
+
import { getNodeWithType } from "../../utils/helper";
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
15
16
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
16
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -97,14 +98,8 @@ const TableCell = props => {
|
|
97
98
|
const [openSettings, setOpenSettings] = useState(false);
|
98
99
|
const table = new TableUtil(editor);
|
99
100
|
const tableProps = table.getTableProps();
|
100
|
-
const [tableNode] =
|
101
|
-
|
102
|
-
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
|
103
|
-
});
|
104
|
-
const [rowNode] = Editor.nodes(editor, {
|
105
|
-
at: path,
|
106
|
-
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
|
107
|
-
});
|
101
|
+
const [tableNode] = getNodeWithType(editor, "table", path); // getting cannot find the descendant path error, while deleting table because of unknown re-render issue, so wrapping it with try catch
|
102
|
+
const [rowNode] = getNodeWithType(editor, "table-row", path);
|
108
103
|
const currentPath = path.slice(-2) || []; // getting last 2 items from path, which gives row and column position of the cell
|
109
104
|
const [row, column] = currentPath;
|
110
105
|
const isFirstRow = row === 0;
|
@@ -424,7 +419,7 @@ const TableCell = props => {
|
|
424
419
|
}), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
|
425
420
|
classes: classes,
|
426
421
|
onMouseDown: onMouseDown,
|
427
|
-
height: tableDOM
|
422
|
+
height: tableDOM?.getBoundingClientRect()?.height
|
428
423
|
}) : null, hasSelected && !readOnly && !tableResizing ? /*#__PURE__*/_jsx("div", {
|
429
424
|
className: "selection-area-tc",
|
430
425
|
contentEditable: false
|
@@ -20,6 +20,13 @@ const handleTableCell = (el, children) => {
|
|
20
20
|
}
|
21
21
|
};
|
22
22
|
};
|
23
|
+
const paragraphType = el => {
|
24
|
+
const firstChild = el?.childNodes?.[0];
|
25
|
+
const isFirstChildText = firstChild?.nodeType === 3 || TEXT_TAGS[firstChild?.nodeName];
|
26
|
+
return isFirstChildText ? {
|
27
|
+
type: "paragraph"
|
28
|
+
} : {};
|
29
|
+
};
|
23
30
|
const ELEMENT_TAGS = {
|
24
31
|
A: el => ({
|
25
32
|
type: "link",
|
@@ -59,24 +66,14 @@ const ELEMENT_TAGS = {
|
|
59
66
|
OL: () => ({
|
60
67
|
type: "orderedList"
|
61
68
|
}),
|
62
|
-
P:
|
63
|
-
|
64
|
-
}),
|
65
|
-
DIV: () => ({
|
66
|
-
type: "paragraph"
|
67
|
-
}),
|
69
|
+
P: paragraphType,
|
70
|
+
DIV: paragraphType,
|
68
71
|
PRE: () => ({
|
69
72
|
type: "code"
|
70
73
|
}),
|
71
|
-
META:
|
72
|
-
|
73
|
-
|
74
|
-
STYLE: () => ({
|
75
|
-
type: "paragraph"
|
76
|
-
}),
|
77
|
-
"GOOGLE-SHEETS-HTML-ORIGIN": () => ({
|
78
|
-
type: "paragraph"
|
79
|
-
}),
|
74
|
+
META: paragraphType,
|
75
|
+
STYLE: paragraphType,
|
76
|
+
"GOOGLE-SHEETS-HTML-ORIGIN": paragraphType,
|
80
77
|
TABLE: (el, children = []) => {
|
81
78
|
try {
|
82
79
|
const bodyChild = children || [];
|
@@ -98,12 +95,8 @@ const ELEMENT_TAGS = {
|
|
98
95
|
type: "table-row"
|
99
96
|
}),
|
100
97
|
TD: handleTableCell,
|
101
|
-
COLGROUP:
|
102
|
-
|
103
|
-
}),
|
104
|
-
COL: () => ({
|
105
|
-
type: "paragraph"
|
106
|
-
})
|
98
|
+
COLGROUP: paragraphType,
|
99
|
+
COL: paragraphType
|
107
100
|
};
|
108
101
|
|
109
102
|
// COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.
|
@@ -133,7 +126,8 @@ const TEXT_TAGS = {
|
|
133
126
|
const deserialize = el => {
|
134
127
|
if (el.nodeType === 3) {
|
135
128
|
const match = /\r|\n/.exec(el.textContent);
|
136
|
-
|
129
|
+
const text = el.textContent.replace(/\r|\n/g, "").trim();
|
130
|
+
return match && !text ? null : el.textContent;
|
137
131
|
} else if (el.nodeType !== 1) {
|
138
132
|
return null;
|
139
133
|
} else if (el.nodeName === "BR") {
|
@@ -160,7 +154,9 @@ const deserialize = el => {
|
|
160
154
|
overwriteChild,
|
161
155
|
...attrs
|
162
156
|
} = ELEMENT_TAGS[nodeName](el, children);
|
163
|
-
|
157
|
+
if (attrs?.type) {
|
158
|
+
return jsx("element", attrs, overwriteChild || children);
|
159
|
+
}
|
164
160
|
}
|
165
161
|
if (TEXT_TAGS[nodeName]) {
|
166
162
|
const attrs = TEXT_TAGS[nodeName](el);
|
@@ -6,21 +6,25 @@ import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@
|
|
6
6
|
import { encodeToBase64, isHavingSelection } from "../utils/helper";
|
7
7
|
import { serializeToText } from "../utils/serializeToText";
|
8
8
|
import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "../Elements/Table/tableHelper";
|
9
|
+
|
10
|
+
// const selectFirstCell = (tablePath, editor, updateTableSelection) => {
|
11
|
+
// const firstCell = [...tablePath, 0, 0];
|
12
|
+
|
13
|
+
// const end = Editor.end(editor, firstCell);
|
14
|
+
|
15
|
+
// Transforms.select(editor, {
|
16
|
+
// anchor: end,
|
17
|
+
// focus: end,
|
18
|
+
// });
|
19
|
+
|
20
|
+
// updateTableSelection({
|
21
|
+
// startCellPath: firstCell,
|
22
|
+
// endCellPath: [],
|
23
|
+
// isDragging: false,
|
24
|
+
// });
|
25
|
+
// };
|
9
26
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
27
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
|
-
const selectFirstCell = (tablePath, editor, updateTableSelection) => {
|
12
|
-
const firstCell = [...tablePath, 0, 0];
|
13
|
-
const end = Editor.end(editor, firstCell);
|
14
|
-
Transforms.select(editor, {
|
15
|
-
anchor: end,
|
16
|
-
focus: end
|
17
|
-
});
|
18
|
-
updateTableSelection({
|
19
|
-
startCellPath: firstCell,
|
20
|
-
endCellPath: [],
|
21
|
-
isDragging: false
|
22
|
-
});
|
23
|
-
};
|
24
28
|
const handleDragEnd = (dragData, editor, resetAll) => {
|
25
29
|
const {
|
26
30
|
active,
|
@@ -77,9 +81,6 @@ export const TableProvider = ({
|
|
77
81
|
children,
|
78
82
|
otherProps = {}
|
79
83
|
}) => {
|
80
|
-
const {
|
81
|
-
tablePath
|
82
|
-
} = otherProps;
|
83
84
|
const [hoverPath, setHoverPath] = useState(null);
|
84
85
|
const [tableSelection, setTableSelection] = useState(getDefaultTableSelection());
|
85
86
|
const [tableResizing, setTableResizing] = useState(null);
|
@@ -184,9 +185,11 @@ export const TableProvider = ({
|
|
184
185
|
window.removeEventListener("cut", handleCut);
|
185
186
|
};
|
186
187
|
}, [tableSelection, editor, tableSelection]);
|
187
|
-
|
188
|
-
|
189
|
-
|
188
|
+
|
189
|
+
// useEffect(() => {
|
190
|
+
// selectFirstCell(tablePath, editor, updateTableSelection);
|
191
|
+
// }, []);
|
192
|
+
|
190
193
|
return /*#__PURE__*/_jsx(TableContext.Provider, {
|
191
194
|
value: values,
|
192
195
|
children: /*#__PURE__*/_jsxs(DndContext, {
|
@@ -691,4 +691,17 @@ export const containsSurrogatePair = text => {
|
|
691
691
|
// Match surrogate pairs (high and low surrogate)
|
692
692
|
const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
|
693
693
|
return surrogatePairRegex.test(text);
|
694
|
+
};
|
695
|
+
export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
|
696
|
+
try {
|
697
|
+
const options = {
|
698
|
+
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === nodeType,
|
699
|
+
...(otherOptions || {})
|
700
|
+
};
|
701
|
+
const [node, nodePath] = Editor.nodes(editor, options);
|
702
|
+
return node ? [node, nodePath] : [];
|
703
|
+
} catch (err) {
|
704
|
+
console.log(err);
|
705
|
+
return [];
|
706
|
+
}
|
694
707
|
};
|