@progress/kendo-editor-common 1.9.0-dev.202204081457 → 1.9.0-dev.202204180753
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/cdn/js/kendo-editor-common.js +2 -2
- package/dist/cdn/main.js +1 -1
- package/dist/es/config/constants.js +2 -1
- package/dist/es/plugins/image-resize.js +4 -14
- package/dist/es/plugins/resize-utils.js +11 -0
- package/dist/es/plugins/table-resize/column-resize.js +28 -49
- package/dist/es/plugins/table-resize/row-resize.js +40 -54
- package/dist/es/plugins/table-resize/table-resize.js +38 -64
- package/dist/es/plugins/table-resize/table-view.js +9 -9
- package/dist/es/plugins/table-resize/utils.js +26 -2
- package/dist/es2015/config/constants.js +2 -1
- package/dist/es2015/plugins/image-resize.js +4 -14
- package/dist/es2015/plugins/resize-utils.js +11 -0
- package/dist/es2015/plugins/table-resize/column-resize.js +28 -49
- package/dist/es2015/plugins/table-resize/row-resize.js +40 -54
- package/dist/es2015/plugins/table-resize/table-resize.js +40 -66
- package/dist/es2015/plugins/table-resize/table-view.js +9 -9
- package/dist/es2015/plugins/table-resize/utils.js +26 -2
- package/dist/npm/config/constants.d.ts +2 -1
- package/dist/npm/config/constants.js +2 -1
- package/dist/npm/plugins/image-resize.js +6 -16
- package/dist/npm/plugins/resize-utils.d.ts +35 -0
- package/dist/npm/plugins/resize-utils.js +13 -0
- package/dist/npm/plugins/table-resize/column-resize.js +28 -49
- package/dist/npm/plugins/table-resize/row-resize.js +39 -53
- package/dist/npm/plugins/table-resize/table-resize.d.ts +2 -4
- package/dist/npm/plugins/table-resize/table-resize.js +37 -63
- package/dist/npm/plugins/table-resize/table-view.d.ts +7 -7
- package/dist/npm/plugins/table-resize/table-view.js +8 -8
- package/dist/npm/plugins/table-resize/utils.d.ts +10 -0
- package/dist/npm/plugins/table-resize/utils.js +29 -2
- package/dist/systemjs/kendo-editor-common.js +1 -1
- package/package.json +1 -1
|
@@ -13,7 +13,7 @@ var TableRowView = /** @class */ (function () {
|
|
|
13
13
|
return TableRowView;
|
|
14
14
|
}());
|
|
15
15
|
function rowResizing() {
|
|
16
|
-
var handleWidth = 5
|
|
16
|
+
var handleWidth = 5;
|
|
17
17
|
var plugin = new prosemirror_state_1.Plugin({
|
|
18
18
|
key: utils_1.tableRowResizing,
|
|
19
19
|
state: {
|
|
@@ -36,7 +36,7 @@ function rowResizing() {
|
|
|
36
36
|
handleDOMEvents: {
|
|
37
37
|
mousemove: function (view, event) {
|
|
38
38
|
if (!utils_1.otherResizing(utils_1.tableRowResizing, view.state)) {
|
|
39
|
-
handleMouseMove(view, event, handleWidth
|
|
39
|
+
handleMouseMove(view, event, handleWidth);
|
|
40
40
|
}
|
|
41
41
|
return false;
|
|
42
42
|
},
|
|
@@ -45,7 +45,7 @@ function rowResizing() {
|
|
|
45
45
|
return false;
|
|
46
46
|
},
|
|
47
47
|
mousedown: function (view, event) {
|
|
48
|
-
return handleMouseDown(view, event
|
|
48
|
+
return handleMouseDown(view, event);
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
51
|
decorations: function (state) {
|
|
@@ -79,7 +79,7 @@ var ResizeState = /** @class */ (function () {
|
|
|
79
79
|
if (action && action.setDragging !== undefined) {
|
|
80
80
|
return new ResizeState(state.activeHandle, action.setDragging);
|
|
81
81
|
}
|
|
82
|
-
if (state.activeHandle > -1) {
|
|
82
|
+
if (state.activeHandle > -1) {
|
|
83
83
|
var handle = tr.mapping.map(state.activeHandle, -1);
|
|
84
84
|
if (!pointsAtCell(tr.doc.resolve(handle))) {
|
|
85
85
|
handle = null;
|
|
@@ -90,30 +90,22 @@ var ResizeState = /** @class */ (function () {
|
|
|
90
90
|
};
|
|
91
91
|
return ResizeState;
|
|
92
92
|
}());
|
|
93
|
-
function handleMouseMove(view, event, handleWidth
|
|
93
|
+
function handleMouseMove(view, event, handleWidth) {
|
|
94
94
|
var pluginState = utils_1.tableRowResizing.getState(view.state);
|
|
95
95
|
if (!pluginState.dragging) {
|
|
96
|
-
var target = domCellAround(event.target),
|
|
96
|
+
var target = utils_1.domCellAround(event.target), row = -1;
|
|
97
97
|
if (target) {
|
|
98
98
|
var rowDom = target.parentNode;
|
|
99
99
|
var domRect = rowDom.getBoundingClientRect();
|
|
100
|
-
if (event.clientY - domRect.top <= handleWidth) {
|
|
101
|
-
|
|
100
|
+
if (Math.abs(event.clientY - domRect.top) <= handleWidth && rowDom.rowIndex > 0) {
|
|
101
|
+
row = edgeRow(view, event, rowDom.rowIndex - 1);
|
|
102
102
|
}
|
|
103
|
-
else if (domRect.bottom - event.clientY <= handleWidth) {
|
|
104
|
-
|
|
103
|
+
else if (domRect.bottom - event.clientY > 0 && domRect.bottom - event.clientY <= handleWidth) {
|
|
104
|
+
row = edgeRow(view, event, rowDom.rowIndex);
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
|
-
if (
|
|
108
|
-
|
|
109
|
-
// let $cell = view.state.doc.resolve(cell);
|
|
110
|
-
// let table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1);
|
|
111
|
-
// let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
|
|
112
|
-
// if (col === map.width - 1) {
|
|
113
|
-
// return;
|
|
114
|
-
// }
|
|
115
|
-
}
|
|
116
|
-
updateHandle(view, cell);
|
|
107
|
+
if (row !== pluginState.activeHandle) {
|
|
108
|
+
updateHandle(view, row);
|
|
117
109
|
}
|
|
118
110
|
}
|
|
119
111
|
}
|
|
@@ -123,7 +115,7 @@ function handleMouseLeave(view) {
|
|
|
123
115
|
updateHandle(view, -1);
|
|
124
116
|
}
|
|
125
117
|
}
|
|
126
|
-
function handleMouseDown(view, event
|
|
118
|
+
function handleMouseDown(view, event) {
|
|
127
119
|
var pluginState = utils_1.tableRowResizing.getState(view.state);
|
|
128
120
|
if (pluginState.activeHandle === -1 || pluginState.dragging) {
|
|
129
121
|
return false;
|
|
@@ -151,7 +143,7 @@ function handleMouseDown(view, event, rowMinHeight) {
|
|
|
151
143
|
var curPluginState = utils_1.tableRowResizing.getState(view.state);
|
|
152
144
|
if (curPluginState.dragging) {
|
|
153
145
|
var tr = view.state.tr.setMeta(utils_1.tableRowResizing, { setDragging: null });
|
|
154
|
-
updateRowHeight(view, tr, curPluginState.activeHandle
|
|
146
|
+
updateRowHeight(view, tr, curPluginState.activeHandle);
|
|
155
147
|
view.dispatch(tr);
|
|
156
148
|
}
|
|
157
149
|
}
|
|
@@ -160,54 +152,45 @@ function handleMouseDown(view, event, rowMinHeight) {
|
|
|
160
152
|
return finish(ev);
|
|
161
153
|
}
|
|
162
154
|
var curPluginState = utils_1.tableRowResizing.getState(view.state);
|
|
163
|
-
var dragged = draggedHeight(curPluginState.dragging, ev
|
|
155
|
+
var dragged = draggedHeight(curPluginState.dragging, ev);
|
|
164
156
|
var offset = ev.clientY - curPluginState.dragging.startY;
|
|
165
|
-
displayRowHeight(view, curPluginState.activeHandle, dragged,
|
|
157
|
+
displayRowHeight(view, curPluginState.activeHandle, dragged, offset, tableHeight);
|
|
166
158
|
}
|
|
167
159
|
event.view.addEventListener('mouseup', finish);
|
|
168
160
|
event.view.addEventListener('mousemove', move);
|
|
169
161
|
event.preventDefault();
|
|
170
162
|
return true;
|
|
171
163
|
}
|
|
172
|
-
function
|
|
173
|
-
while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
|
|
174
|
-
target = target.classList.contains('ProseMirror') ? null : target.parentNode;
|
|
175
|
-
}
|
|
176
|
-
return target;
|
|
177
|
-
}
|
|
178
|
-
function edgeCell(view, event, side) {
|
|
164
|
+
function edgeRow(view, event, rowIndex) {
|
|
179
165
|
var found = view.posAtCoords({ left: event.clientX, top: event.clientY });
|
|
180
166
|
if (!found) {
|
|
181
167
|
return -1;
|
|
182
168
|
}
|
|
183
|
-
var pos = found.pos;
|
|
184
|
-
var
|
|
185
|
-
|
|
186
|
-
var rowDepth = new Array($pos.depth + 1).fill(0).findIndex(function (_, i) { return $pos.node(i).type.spec.tableRole === 'row'; });
|
|
187
|
-
if (rowDepth === -1) {
|
|
188
|
-
return -1;
|
|
189
|
-
}
|
|
190
|
-
var tableDepth = rowDepth - 1;
|
|
191
|
-
var rowIndex = $pos.index(tableDepth);
|
|
192
|
-
rowIndex += side === 'up' ? -1 : 0;
|
|
193
|
-
if (rowIndex < 0) {
|
|
169
|
+
var $pos = view.state.doc.resolve(found.pos);
|
|
170
|
+
var parentTable = utils_1.parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; });
|
|
171
|
+
if (parentTable === null) {
|
|
194
172
|
return -1;
|
|
195
173
|
}
|
|
196
|
-
var
|
|
197
|
-
|
|
174
|
+
var tablePos = $pos.start(parentTable.depth);
|
|
175
|
+
var tableNode = parentTable.node;
|
|
176
|
+
var map = prosemirror_tables_1.TableMap.get(tableNode);
|
|
177
|
+
var row = tablePos + map.map[(map.width * rowIndex)] - 1;
|
|
178
|
+
return row;
|
|
198
179
|
}
|
|
199
|
-
function draggedHeight(dragging, event
|
|
180
|
+
function draggedHeight(dragging, event) {
|
|
200
181
|
var offset = event.clientY - dragging.startY;
|
|
201
|
-
return
|
|
182
|
+
return dragging.startHeight.rowHeight + offset;
|
|
202
183
|
}
|
|
203
184
|
function updateHandle(view, value) {
|
|
204
185
|
view.dispatch(view.state.tr.setMeta(utils_1.tableRowResizing, { setHandle: value }));
|
|
205
186
|
}
|
|
206
|
-
function updateRowHeight(view, tr, rowPos
|
|
187
|
+
function updateRowHeight(view, tr, rowPos) {
|
|
207
188
|
var doc = view.state.doc;
|
|
208
189
|
var row = doc.nodeAt(rowPos);
|
|
209
|
-
tr.setNodeMarkup(rowPos, null, utils_1.setNodeStyle(row.attrs, 'height', height + 'px'));
|
|
210
190
|
var dom = view.nodeDOM(rowPos);
|
|
191
|
+
var win = (dom.ownerDocument && dom.ownerDocument.defaultView) || window;
|
|
192
|
+
dom.style.height = win.getComputedStyle(dom).height;
|
|
193
|
+
tr.setNodeMarkup(rowPos, null, utils_1.setNodeStyle(row.attrs, 'height', dom.style.height));
|
|
211
194
|
var table = dom && dom.closest('table');
|
|
212
195
|
var tableHeight = table && table.style.height;
|
|
213
196
|
if (tableHeight) {
|
|
@@ -216,29 +199,32 @@ function updateRowHeight(view, tr, rowPos, height) {
|
|
|
216
199
|
tr.setNodeMarkup(tablePos, null, utils_1.setNodeStyle($pos.parent.attrs, 'height', tableHeight));
|
|
217
200
|
}
|
|
218
201
|
}
|
|
219
|
-
|
|
220
|
-
function displayRowHeight(view, rowPos, height, rowMinHeight, offset, tableHeight) {
|
|
202
|
+
function displayRowHeight(view, rowPos, height, offset, tableHeight) {
|
|
221
203
|
var dom = view.nodeDOM(rowPos);
|
|
222
204
|
if (dom) {
|
|
223
|
-
dom.style.height =
|
|
205
|
+
dom.style.height = height + 'px';
|
|
206
|
+
var win = (dom.ownerDocument && dom.ownerDocument.defaultView) || window;
|
|
207
|
+
dom.style.height = win.getComputedStyle(dom).height;
|
|
224
208
|
var table = dom.closest('table');
|
|
225
209
|
var newHeight = (parseFloat(tableHeight) + offset) + 'px';
|
|
226
210
|
var current = table && table.style.height;
|
|
227
211
|
if (current && current !== newHeight) {
|
|
228
212
|
table.style.height = (parseFloat(tableHeight) + offset) + 'px';
|
|
213
|
+
table.style.height = win.getComputedStyle(table).height;
|
|
229
214
|
}
|
|
230
215
|
}
|
|
231
216
|
}
|
|
232
217
|
function handleDecorations(state, pos) {
|
|
233
218
|
var decorations = [];
|
|
234
219
|
if (typeof pos !== 'number') {
|
|
235
|
-
return;
|
|
220
|
+
return prosemirror_view_1.DecorationSet.empty;
|
|
236
221
|
}
|
|
237
222
|
var $row = state.doc.resolve(pos), table = $row.parent, map = prosemirror_tables_1.TableMap.get(table), rowIndex = $row.index($row.depth), start = $row.start($row.depth);
|
|
238
223
|
for (var col = 0; col < map.width; col++) {
|
|
239
224
|
var index = col + rowIndex * map.width;
|
|
240
225
|
var cellPos = map.map[index];
|
|
241
|
-
var
|
|
226
|
+
var cell = table.nodeAt(cellPos);
|
|
227
|
+
var widgetPos = start + cellPos + (cell ? cell.nodeSize : 0) - 1;
|
|
242
228
|
var dom = document.createElement('div');
|
|
243
229
|
dom.className = 'row-resize-handle';
|
|
244
230
|
decorations.push(prosemirror_view_1.Decoration.widget(widgetPos, dom));
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { Plugin } from 'prosemirror-state';
|
|
2
|
-
export
|
|
2
|
+
export declare const tableResizing: (options?: {
|
|
3
3
|
node: string;
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
export declare const tableResizing: (options?: NodeResizeOptions) => Plugin<any, any>;
|
|
4
|
+
}) => Plugin<any, any>;
|
|
@@ -4,25 +4,7 @@ var tslib_1 = require("tslib");
|
|
|
4
4
|
var prosemirror_state_1 = require("prosemirror-state");
|
|
5
5
|
var constants_1 = require("../../config/constants");
|
|
6
6
|
var utils_1 = require("./utils");
|
|
7
|
-
|
|
8
|
-
for (var d = pos.depth; d > 0; d--) {
|
|
9
|
-
var node = pos.node(d);
|
|
10
|
-
if (predicate(node)) {
|
|
11
|
-
return node;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
return null;
|
|
15
|
-
}
|
|
16
|
-
var directions = {
|
|
17
|
-
'southeast': { x: 1, y: 1 },
|
|
18
|
-
'east': { x: 1, y: 0 },
|
|
19
|
-
'south': { x: 0, y: 1 },
|
|
20
|
-
'north': { x: 0, y: -1 },
|
|
21
|
-
'west': { x: -1, y: 0 },
|
|
22
|
-
'southwest': { x: -1, y: 1 },
|
|
23
|
-
'northwest': { x: -1, y: -1 },
|
|
24
|
-
'northeast': { x: 1, y: -1 } // top right
|
|
25
|
-
};
|
|
7
|
+
var resize_utils_1 = require("./../resize-utils");
|
|
26
8
|
var commonDir = {
|
|
27
9
|
'southeast': true,
|
|
28
10
|
'southwest': true,
|
|
@@ -31,9 +13,6 @@ var commonDir = {
|
|
|
31
13
|
};
|
|
32
14
|
var horizontalDir = tslib_1.__assign({ 'east': true, 'west': true }, commonDir);
|
|
33
15
|
var verticalDir = tslib_1.__assign({ 'south': true, 'north': true }, commonDir);
|
|
34
|
-
var setSize = function (domNode, sizeType, value) {
|
|
35
|
-
domNode.style[sizeType] = value + 'px';
|
|
36
|
-
};
|
|
37
16
|
var ResizeState = /** @class */ (function () {
|
|
38
17
|
function ResizeState(activeHandle, dragging, nodePosition) {
|
|
39
18
|
this.activeHandle = activeHandle;
|
|
@@ -50,73 +29,62 @@ var ResizeState = /** @class */ (function () {
|
|
|
50
29
|
};
|
|
51
30
|
return ResizeState;
|
|
52
31
|
}());
|
|
53
|
-
var handleMouseMove = function (view, event
|
|
32
|
+
var handleMouseMove = function (view, event) {
|
|
54
33
|
var state = utils_1.tableResizeKey.getState(view.state);
|
|
55
34
|
var dragging = state.dragging, nodePosition = state.nodePosition, activeHandle = state.activeHandle;
|
|
56
35
|
if (nodePosition < 0 || !dragging) {
|
|
57
36
|
return;
|
|
58
37
|
}
|
|
59
|
-
var
|
|
60
|
-
var rect =
|
|
61
|
-
var dir = directions[activeHandle];
|
|
38
|
+
var tableDom = utils_1.getTable(view.nodeDOM(nodePosition));
|
|
39
|
+
var rect = tableDom.getBoundingClientRect();
|
|
40
|
+
var dir = resize_utils_1.directions[activeHandle];
|
|
62
41
|
var diffX = (event.clientX - dragging.startX) * dir.x;
|
|
63
42
|
var diffY = (event.clientY - dragging.startY) * dir.y;
|
|
64
|
-
var
|
|
65
|
-
var
|
|
43
|
+
var win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
|
|
44
|
+
var compStyles = win.getComputedStyle(tableDom);
|
|
45
|
+
var nodeWidth = /px/.test(compStyles.width) ? parseFloat(compStyles.width) : tableDom.offsetWidth;
|
|
46
|
+
var nodeHeight = /px/.test(compStyles.height) ? parseFloat(compStyles.height) : tableDom.offsetHeight;
|
|
66
47
|
var width = dir.x ? diffX + nodeWidth : rect.width;
|
|
67
48
|
var height = dir.y ? diffY + nodeHeight : rect.height;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
var lockWidth = nodeWidth * ratio;
|
|
71
|
-
var lockHeight = nodeHeight * ratio;
|
|
72
|
-
dragging.startX = event.clientX - (width - lockWidth) * dir.x;
|
|
73
|
-
dragging.startY = event.clientY - (height - lockHeight) * dir.y;
|
|
74
|
-
width = lockWidth;
|
|
75
|
-
height = lockHeight;
|
|
76
|
-
}
|
|
77
|
-
else {
|
|
78
|
-
dragging.startX = dir.x ? event.clientX : dragging.startX;
|
|
79
|
-
dragging.startY = dir.y ? event.clientY : dragging.startY;
|
|
80
|
-
}
|
|
49
|
+
dragging.startX = dir.x ? event.clientX : dragging.startX;
|
|
50
|
+
dragging.startY = dir.y ? event.clientY : dragging.startY;
|
|
81
51
|
if (horizontalDir[activeHandle]) {
|
|
82
|
-
|
|
52
|
+
tableDom.style.width = width + 'px';
|
|
83
53
|
}
|
|
84
54
|
if (verticalDir[activeHandle]) {
|
|
85
|
-
|
|
55
|
+
tableDom.style.height = height + 'px';
|
|
86
56
|
}
|
|
87
57
|
};
|
|
88
58
|
var toPercents = function (view, tr, tablePos) {
|
|
89
59
|
var tableNode = view.state.doc.nodeAt(tablePos);
|
|
90
60
|
var tableDom = utils_1.getTable(view.nodeDOM(tablePos));
|
|
91
|
-
var _a = tableSize(tableDom),
|
|
61
|
+
var _a = tableSize(tableDom), width = _a.width, height = _a.height, colsWidth = _a.colsWidth, rowsHeight = _a.rowsHeight, offsetWidth = _a.offsetWidth, offsetHeight = _a.offsetHeight;
|
|
92
62
|
var colgroup = tableDom.firstChild;
|
|
93
63
|
var cols = Array.from((colgroup && colgroup.children) || []);
|
|
94
|
-
// const borders = new Array(cols.length).fill(tableWidth / tableOffsetWidth / cols.length);
|
|
95
64
|
var widthChanged = false;
|
|
96
65
|
cols.forEach(function (col, i) {
|
|
97
66
|
if (col.style.width && !/%$/.test(col.style.width)) {
|
|
98
|
-
col.style.width = ((colsWidth[i]) * 100 /
|
|
67
|
+
col.style.width = ((colsWidth[i]) * 100 / width) + '%';
|
|
99
68
|
widthChanged = true;
|
|
100
69
|
}
|
|
101
70
|
});
|
|
102
|
-
var rows = Array.from(tableDom.rows);
|
|
103
71
|
var heightChange = false;
|
|
104
72
|
tableNode.forEach(function (row, offset, index) {
|
|
105
73
|
var rowHeight = utils_1.parseStyle(row.attrs.style).height;
|
|
106
74
|
if (rowHeight && !/%$/.test(rowHeight)) {
|
|
107
|
-
tr.setNodeMarkup(tablePos + offset + 1, null, utils_1.setNodeStyle(row.attrs, 'height', (
|
|
75
|
+
tr.setNodeMarkup(tablePos + offset + 1, null, utils_1.setNodeStyle(row.attrs, 'height', (rowsHeight[index] * 100 / height) + '%'));
|
|
108
76
|
heightChange = true;
|
|
109
77
|
}
|
|
110
78
|
});
|
|
111
79
|
var tableAttrs = tableNode.attrs;
|
|
112
|
-
if (utils_1.parseStyle(tableAttrs.style).width !==
|
|
113
|
-
tableAttrs = utils_1.setNodeStyle(tableAttrs, 'width',
|
|
80
|
+
if (utils_1.parseStyle(tableAttrs.style).width !== offsetWidth + 'px') {
|
|
81
|
+
tableAttrs = utils_1.setNodeStyle(tableAttrs, 'width', offsetWidth + 'px');
|
|
114
82
|
}
|
|
115
83
|
if (widthChanged) {
|
|
116
84
|
tableAttrs[constants_1.colgroupAttr] = colgroup.outerHTML;
|
|
117
85
|
}
|
|
118
86
|
if (heightChange) {
|
|
119
|
-
tableAttrs = utils_1.setNodeStyle(tableAttrs, 'height',
|
|
87
|
+
tableAttrs = utils_1.setNodeStyle(tableAttrs, 'height', offsetHeight + 'px');
|
|
120
88
|
}
|
|
121
89
|
if (widthChanged || heightChange) {
|
|
122
90
|
tr.setNodeMarkup(tablePos, null, tableAttrs);
|
|
@@ -125,11 +93,13 @@ var toPercents = function (view, tr, tablePos) {
|
|
|
125
93
|
var toPixels = function (view, tr, tablePos, attrs) {
|
|
126
94
|
var tableNode = view.state.doc.nodeAt(tablePos);
|
|
127
95
|
var tableDom = utils_1.getTable(view.nodeDOM(tablePos));
|
|
96
|
+
var win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
|
|
97
|
+
var calcStyle = win.getComputedStyle;
|
|
128
98
|
var rows = Array.from(tableDom.rows);
|
|
129
99
|
tableNode.forEach(function (row, offset, index) {
|
|
130
100
|
var rowHeight = utils_1.parseStyle(row.attrs.style).height;
|
|
131
101
|
if (rowHeight && !/px$/.test(rowHeight)) {
|
|
132
|
-
tr.setNodeMarkup(tablePos + offset + 1, null, utils_1.setNodeStyle(row.attrs, 'height', rows[index].
|
|
102
|
+
tr.setNodeMarkup(tablePos + offset + 1, null, utils_1.setNodeStyle(row.attrs, 'height', calcStyle(rows[index]).height));
|
|
133
103
|
}
|
|
134
104
|
});
|
|
135
105
|
var colgroup = tableDom.firstChild;
|
|
@@ -137,7 +107,7 @@ var toPixels = function (view, tr, tablePos, attrs) {
|
|
|
137
107
|
var widthChanged = false;
|
|
138
108
|
cols.forEach(function (col, i) {
|
|
139
109
|
if (col.style.width && !/px$/.test(col.style.width)) {
|
|
140
|
-
col.style.width = cols[i].
|
|
110
|
+
col.style.width = calcStyle(cols[i]).width;
|
|
141
111
|
widthChanged = true;
|
|
142
112
|
}
|
|
143
113
|
});
|
|
@@ -150,9 +120,12 @@ var toPixels = function (view, tr, tablePos, attrs) {
|
|
|
150
120
|
var tableSize = function (table) {
|
|
151
121
|
var cols = Array.from(table.firstChild.children);
|
|
152
122
|
var colsWidth = cols.map(function (c) { return c.offsetWidth; });
|
|
123
|
+
var rowsHeight = Array.from(table.rows).map(function (row) { return row.offsetHeight; });
|
|
153
124
|
var width = colsWidth.reduce(function (acc, cur) { return acc + cur; }, 0);
|
|
154
|
-
var height =
|
|
155
|
-
|
|
125
|
+
var height = rowsHeight.reduce(function (acc, cur) { return acc + cur; }, 0);
|
|
126
|
+
var offsetHeight = table.offsetHeight;
|
|
127
|
+
var offsetWidth = table.offsetWidth;
|
|
128
|
+
return { width: width, height: height, colsWidth: colsWidth, rowsHeight: rowsHeight, offsetWidth: offsetWidth, offsetHeight: offsetHeight };
|
|
156
129
|
};
|
|
157
130
|
var handleMouseUp = function (view) {
|
|
158
131
|
var _a = utils_1.tableResizeKey.getState(view.state), dragging = _a.dragging, nodePosition = _a.nodePosition, activeHandle = _a.activeHandle;
|
|
@@ -162,7 +135,7 @@ var handleMouseUp = function (view) {
|
|
|
162
135
|
var rect = tableSize(dom);
|
|
163
136
|
if (node) {
|
|
164
137
|
var width = rect.offsetWidth + 'px';
|
|
165
|
-
var height = rect.
|
|
138
|
+
var height = rect.offsetHeight + 'px';
|
|
166
139
|
var tr = view.state.tr;
|
|
167
140
|
var attrs = node.attrs;
|
|
168
141
|
var parsedStyles = utils_1.parseStyle(attrs.style);
|
|
@@ -172,7 +145,7 @@ var handleMouseUp = function (view) {
|
|
|
172
145
|
if (verticalDir[activeHandle] && dom.style.height && parsedStyles.height !== height) {
|
|
173
146
|
attrs = utils_1.setNodeStyle(attrs, 'height', height);
|
|
174
147
|
}
|
|
175
|
-
toPixels(view, tr, nodePosition, attrs);
|
|
148
|
+
attrs = toPixels(view, tr, nodePosition, attrs);
|
|
176
149
|
tr.setNodeMarkup(nodePosition, null, attrs);
|
|
177
150
|
tr.setMeta('commandName', 'node-resize');
|
|
178
151
|
tr.setMeta('args', attrs);
|
|
@@ -185,9 +158,9 @@ var handleMouseUp = function (view) {
|
|
|
185
158
|
}
|
|
186
159
|
}
|
|
187
160
|
};
|
|
188
|
-
var handleMouseDown = function (view, event
|
|
161
|
+
var handleMouseDown = function (view, event) {
|
|
189
162
|
var target = event.target;
|
|
190
|
-
var activeHandle = target.getAttribute(constants_1.
|
|
163
|
+
var activeHandle = target.getAttribute(constants_1.dataResizeDirTable);
|
|
191
164
|
if (!activeHandle) {
|
|
192
165
|
return false;
|
|
193
166
|
}
|
|
@@ -204,7 +177,7 @@ var handleMouseDown = function (view, event, options) {
|
|
|
204
177
|
view.dispatch(transaction);
|
|
205
178
|
var curWindow = event.view || window;
|
|
206
179
|
function move(e) {
|
|
207
|
-
handleMouseMove(view, e
|
|
180
|
+
handleMouseMove(view, e);
|
|
208
181
|
}
|
|
209
182
|
function finish(_e) {
|
|
210
183
|
curWindow.removeEventListener('mouseup', finish);
|
|
@@ -216,7 +189,7 @@ var handleMouseDown = function (view, event, options) {
|
|
|
216
189
|
return true;
|
|
217
190
|
};
|
|
218
191
|
exports.tableResizing = function (options) {
|
|
219
|
-
if (options === void 0) { options = { node: 'table'
|
|
192
|
+
if (options === void 0) { options = { node: 'table' }; }
|
|
220
193
|
return new prosemirror_state_1.Plugin({
|
|
221
194
|
key: utils_1.tableResizeKey,
|
|
222
195
|
view: function (_viewObj) { return ({
|
|
@@ -226,7 +199,8 @@ exports.tableResizing = function (options) {
|
|
|
226
199
|
if (isNodeSelected && selection instanceof prosemirror_state_1.NodeSelection) {
|
|
227
200
|
return { node: selection.node, pos: selection.from };
|
|
228
201
|
}
|
|
229
|
-
var
|
|
202
|
+
var parent = utils_1.parentNode(selection.$from, function (n) { return n.type === nodeType; });
|
|
203
|
+
var node = parent && parent.node;
|
|
230
204
|
if (node) {
|
|
231
205
|
var tableDepth = new Array(selection.$from.depth + 1).fill(0)
|
|
232
206
|
.findIndex(function (_, i) { return selection.$from.node(i).type.spec.tableRole === 'table'; });
|
|
@@ -275,7 +249,7 @@ exports.tableResizing = function (options) {
|
|
|
275
249
|
props: {
|
|
276
250
|
handleDOMEvents: {
|
|
277
251
|
mousedown: function (view, event) {
|
|
278
|
-
return handleMouseDown(view, event
|
|
252
|
+
return handleMouseDown(view, event);
|
|
279
253
|
}
|
|
280
254
|
}
|
|
281
255
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { Node } from 'prosemirror-model';
|
|
2
2
|
import { EditorView } from 'prosemirror-view';
|
|
3
3
|
export declare class TableView {
|
|
4
|
-
node
|
|
5
|
-
view
|
|
6
|
-
table
|
|
7
|
-
colgroup
|
|
8
|
-
dom
|
|
9
|
-
contentDOM
|
|
10
|
-
private resizeHandles
|
|
4
|
+
node?: Node;
|
|
5
|
+
view?: EditorView;
|
|
6
|
+
table?: HTMLTableElement;
|
|
7
|
+
colgroup?: HTMLTableColElement;
|
|
8
|
+
dom?: HTMLElement;
|
|
9
|
+
contentDOM?: HTMLElement;
|
|
10
|
+
private resizeHandles?;
|
|
11
11
|
constructor(node: Node, view: EditorView);
|
|
12
12
|
update(node: Node): boolean;
|
|
13
13
|
ignoreMutation(record: MutationRecord): boolean;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var constants_1 = require("../../config/constants");
|
|
4
4
|
var schema_1 = require("../../config/schema");
|
|
5
|
-
var
|
|
5
|
+
var resize_utils_1 = require("./../resize-utils");
|
|
6
6
|
var TableView = /** @class */ (function () {
|
|
7
7
|
function TableView(node, view) {
|
|
8
8
|
this.node = node;
|
|
@@ -15,10 +15,10 @@ var TableView = /** @class */ (function () {
|
|
|
15
15
|
}
|
|
16
16
|
var tBody = this.table.appendChild(document.createElement('tbody'));
|
|
17
17
|
this.setAttributes(this.table, node.attrs);
|
|
18
|
-
this.resizeHandles =
|
|
18
|
+
this.resizeHandles = resize_utils_1.handles.map(function (dir) {
|
|
19
19
|
var handle = document.createElement('span');
|
|
20
20
|
handle.className = constants_1.resizeHandle + ' ' + dir;
|
|
21
|
-
handle.setAttribute(constants_1.
|
|
21
|
+
handle.setAttribute(constants_1.dataResizeDirTable, dir);
|
|
22
22
|
return handle;
|
|
23
23
|
});
|
|
24
24
|
this.contentDOM = tBody;
|
|
@@ -54,11 +54,11 @@ var TableView = /** @class */ (function () {
|
|
|
54
54
|
return result;
|
|
55
55
|
};
|
|
56
56
|
TableView.prototype.destroy = function () {
|
|
57
|
-
this.node =
|
|
58
|
-
this.view =
|
|
59
|
-
this.table =
|
|
60
|
-
this.colgroup =
|
|
61
|
-
this.resizeHandles =
|
|
57
|
+
this.node = undefined;
|
|
58
|
+
this.view = undefined;
|
|
59
|
+
this.table = undefined;
|
|
60
|
+
this.colgroup = undefined;
|
|
61
|
+
this.resizeHandles = undefined;
|
|
62
62
|
};
|
|
63
63
|
TableView.prototype.renderColgroup = function (colgroupStr) {
|
|
64
64
|
if (this.table && this.table.firstChild && this.table.firstChild.nodeName === 'COLGROUP') {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Node, ResolvedPos } from 'prosemirror-model';
|
|
1
2
|
import { EditorState, PluginKey } from 'prosemirror-state';
|
|
2
3
|
export declare const reAnyValue: RegExp;
|
|
3
4
|
export declare const parseStyle: (styleText: string) => {
|
|
@@ -10,3 +11,12 @@ export declare const tableRowResizing: PluginKey<any, any>;
|
|
|
10
11
|
export declare function otherResizing(current: PluginKey, state: EditorState): boolean;
|
|
11
12
|
export declare function otherResizeHandle(current: PluginKey, state: EditorState): boolean;
|
|
12
13
|
export declare function getTable(dom: HTMLElement): HTMLTableElement;
|
|
14
|
+
export declare function domCellAround(target: any): HTMLTableCellElement | null;
|
|
15
|
+
export declare function cellIndexes(cell: HTMLTableCellElement): {
|
|
16
|
+
cellIndex: number;
|
|
17
|
+
rowIndex: number;
|
|
18
|
+
};
|
|
19
|
+
export declare function parentNode(pos: ResolvedPos, predicate: (node: Node) => boolean): {
|
|
20
|
+
node: Node;
|
|
21
|
+
depth: number;
|
|
22
|
+
} | null;
|
|
@@ -44,9 +44,11 @@ exports.otherResizing = otherResizing;
|
|
|
44
44
|
function otherResizeHandle(current, state) {
|
|
45
45
|
var activeResize = false;
|
|
46
46
|
activeResize = activeResize ||
|
|
47
|
-
(current !== exports.tableColumnResizing &&
|
|
47
|
+
(current !== exports.tableColumnResizing &&
|
|
48
|
+
Boolean(exports.tableColumnResizing.get(state)) &&
|
|
49
|
+
exports.tableColumnResizing.getState(state).activeHandle > -1);
|
|
48
50
|
activeResize = activeResize ||
|
|
49
|
-
(current !== exports.tableRowResizing && exports.tableRowResizing.get(state) && exports.tableRowResizing.getState(state).activeHandle > -1);
|
|
51
|
+
(current !== exports.tableRowResizing && Boolean(exports.tableRowResizing.get(state)) && exports.tableRowResizing.getState(state).activeHandle > -1);
|
|
50
52
|
return activeResize;
|
|
51
53
|
}
|
|
52
54
|
exports.otherResizeHandle = otherResizeHandle;
|
|
@@ -57,3 +59,28 @@ function getTable(dom) {
|
|
|
57
59
|
return dom;
|
|
58
60
|
}
|
|
59
61
|
exports.getTable = getTable;
|
|
62
|
+
function domCellAround(target) {
|
|
63
|
+
while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
|
|
64
|
+
target = target.classList.contains('ProseMirror') ? null : target.parentNode;
|
|
65
|
+
}
|
|
66
|
+
return target;
|
|
67
|
+
}
|
|
68
|
+
exports.domCellAround = domCellAround;
|
|
69
|
+
function cellIndexes(cell) {
|
|
70
|
+
var row = cell.parentNode;
|
|
71
|
+
return {
|
|
72
|
+
cellIndex: cell.cellIndex,
|
|
73
|
+
rowIndex: row.rowIndex
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
exports.cellIndexes = cellIndexes;
|
|
77
|
+
function parentNode(pos, predicate) {
|
|
78
|
+
for (var depth = pos.depth; depth > 0; depth--) {
|
|
79
|
+
var node = pos.node(depth);
|
|
80
|
+
if (predicate(node)) {
|
|
81
|
+
return { node: node, depth: depth };
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
return null;
|
|
85
|
+
}
|
|
86
|
+
exports.parentNode = parentNode;
|