@progress/kendo-editor-common 1.9.0-dev.202204060830 → 1.9.0-dev.202204181342
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/config/schema.js +10 -6
- 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 +46 -67
- 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/config/schema.js +6 -6
- 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 +45 -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/config/schema.js +10 -6
- 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 +45 -66
- 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 +2 -2
|
@@ -1,26 +1,8 @@
|
|
|
1
1
|
import * as tslib_1 from "tslib";
|
|
2
2
|
import { NodeSelection, Plugin } from 'prosemirror-state';
|
|
3
|
-
import { colgroupAttr,
|
|
4
|
-
import { getTable, parseStyle, setNodeStyle, tableResizeKey as key } from './utils';
|
|
5
|
-
|
|
6
|
-
for (var d = pos.depth; d > 0; d--) {
|
|
7
|
-
var node = pos.node(d);
|
|
8
|
-
if (predicate(node)) {
|
|
9
|
-
return node;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
return null;
|
|
13
|
-
}
|
|
14
|
-
var directions = {
|
|
15
|
-
'southeast': { x: 1, y: 1 },
|
|
16
|
-
'east': { x: 1, y: 0 },
|
|
17
|
-
'south': { x: 0, y: 1 },
|
|
18
|
-
'north': { x: 0, y: -1 },
|
|
19
|
-
'west': { x: -1, y: 0 },
|
|
20
|
-
'southwest': { x: -1, y: 1 },
|
|
21
|
-
'northwest': { x: -1, y: -1 },
|
|
22
|
-
'northeast': { x: 1, y: -1 } // top right
|
|
23
|
-
};
|
|
3
|
+
import { colgroupAttr, dataResizeDirTable, resizableAttr } from '../../config/constants';
|
|
4
|
+
import { getTable, parentNode, parseStyle, setNodeStyle, tableResizeKey as key } from './utils';
|
|
5
|
+
import { directions } from './../resize-utils';
|
|
24
6
|
var commonDir = {
|
|
25
7
|
'southeast': true,
|
|
26
8
|
'southwest': true,
|
|
@@ -29,9 +11,6 @@ var commonDir = {
|
|
|
29
11
|
};
|
|
30
12
|
var horizontalDir = tslib_1.__assign({ 'east': true, 'west': true }, commonDir);
|
|
31
13
|
var verticalDir = tslib_1.__assign({ 'south': true, 'north': true }, commonDir);
|
|
32
|
-
var setSize = function (domNode, sizeType, value) {
|
|
33
|
-
domNode.style[sizeType] = value + 'px';
|
|
34
|
-
};
|
|
35
14
|
var ResizeState = /** @class */ (function () {
|
|
36
15
|
function ResizeState(activeHandle, dragging, nodePosition) {
|
|
37
16
|
this.activeHandle = activeHandle;
|
|
@@ -48,73 +27,62 @@ var ResizeState = /** @class */ (function () {
|
|
|
48
27
|
};
|
|
49
28
|
return ResizeState;
|
|
50
29
|
}());
|
|
51
|
-
var handleMouseMove = function (view, event
|
|
30
|
+
var handleMouseMove = function (view, event) {
|
|
52
31
|
var state = key.getState(view.state);
|
|
53
32
|
var dragging = state.dragging, nodePosition = state.nodePosition, activeHandle = state.activeHandle;
|
|
54
33
|
if (nodePosition < 0 || !dragging) {
|
|
55
34
|
return;
|
|
56
35
|
}
|
|
57
|
-
var
|
|
58
|
-
var rect =
|
|
36
|
+
var tableDom = getTable(view.nodeDOM(nodePosition));
|
|
37
|
+
var rect = tableDom.getBoundingClientRect();
|
|
59
38
|
var dir = directions[activeHandle];
|
|
60
39
|
var diffX = (event.clientX - dragging.startX) * dir.x;
|
|
61
40
|
var diffY = (event.clientY - dragging.startY) * dir.y;
|
|
62
|
-
var
|
|
63
|
-
var
|
|
41
|
+
var win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
|
|
42
|
+
var compStyles = win.getComputedStyle(tableDom);
|
|
43
|
+
var nodeWidth = /px/.test(compStyles.width) ? parseFloat(compStyles.width) : tableDom.offsetWidth;
|
|
44
|
+
var nodeHeight = /px/.test(compStyles.height) ? parseFloat(compStyles.height) : tableDom.offsetHeight;
|
|
64
45
|
var width = dir.x ? diffX + nodeWidth : rect.width;
|
|
65
46
|
var height = dir.y ? diffY + nodeHeight : rect.height;
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
var lockWidth = nodeWidth * ratio;
|
|
69
|
-
var lockHeight = nodeHeight * ratio;
|
|
70
|
-
dragging.startX = event.clientX - (width - lockWidth) * dir.x;
|
|
71
|
-
dragging.startY = event.clientY - (height - lockHeight) * dir.y;
|
|
72
|
-
width = lockWidth;
|
|
73
|
-
height = lockHeight;
|
|
74
|
-
}
|
|
75
|
-
else {
|
|
76
|
-
dragging.startX = dir.x ? event.clientX : dragging.startX;
|
|
77
|
-
dragging.startY = dir.y ? event.clientY : dragging.startY;
|
|
78
|
-
}
|
|
47
|
+
dragging.startX = dir.x ? event.clientX : dragging.startX;
|
|
48
|
+
dragging.startY = dir.y ? event.clientY : dragging.startY;
|
|
79
49
|
if (horizontalDir[activeHandle]) {
|
|
80
|
-
|
|
50
|
+
tableDom.style.width = width + 'px';
|
|
81
51
|
}
|
|
82
52
|
if (verticalDir[activeHandle]) {
|
|
83
|
-
|
|
53
|
+
tableDom.style.height = height + 'px';
|
|
84
54
|
}
|
|
85
55
|
};
|
|
86
56
|
var toPercents = function (view, tr, tablePos) {
|
|
87
57
|
var tableNode = view.state.doc.nodeAt(tablePos);
|
|
88
58
|
var tableDom = getTable(view.nodeDOM(tablePos));
|
|
89
|
-
var _a = tableSize(tableDom),
|
|
59
|
+
var _a = tableSize(tableDom), width = _a.width, height = _a.height, colsWidth = _a.colsWidth, rowsHeight = _a.rowsHeight, offsetWidth = _a.offsetWidth, offsetHeight = _a.offsetHeight;
|
|
90
60
|
var colgroup = tableDom.firstChild;
|
|
91
61
|
var cols = Array.from((colgroup && colgroup.children) || []);
|
|
92
|
-
// const borders = new Array(cols.length).fill(tableWidth / tableOffsetWidth / cols.length);
|
|
93
62
|
var widthChanged = false;
|
|
94
63
|
cols.forEach(function (col, i) {
|
|
95
64
|
if (col.style.width && !/%$/.test(col.style.width)) {
|
|
96
|
-
col.style.width = ((colsWidth[i]) * 100 /
|
|
65
|
+
col.style.width = ((colsWidth[i]) * 100 / width) + '%';
|
|
97
66
|
widthChanged = true;
|
|
98
67
|
}
|
|
99
68
|
});
|
|
100
|
-
var rows = Array.from(tableDom.rows);
|
|
101
69
|
var heightChange = false;
|
|
102
70
|
tableNode.forEach(function (row, offset, index) {
|
|
103
71
|
var rowHeight = parseStyle(row.attrs.style).height;
|
|
104
72
|
if (rowHeight && !/%$/.test(rowHeight)) {
|
|
105
|
-
tr.setNodeMarkup(tablePos + offset + 1, null, setNodeStyle(row.attrs, 'height', (
|
|
73
|
+
tr.setNodeMarkup(tablePos + offset + 1, null, setNodeStyle(row.attrs, 'height', (rowsHeight[index] * 100 / height) + '%'));
|
|
106
74
|
heightChange = true;
|
|
107
75
|
}
|
|
108
76
|
});
|
|
109
77
|
var tableAttrs = tableNode.attrs;
|
|
110
|
-
if (parseStyle(tableAttrs.style).width !==
|
|
111
|
-
tableAttrs = setNodeStyle(tableAttrs, 'width',
|
|
78
|
+
if (parseStyle(tableAttrs.style).width !== offsetWidth + 'px') {
|
|
79
|
+
tableAttrs = setNodeStyle(tableAttrs, 'width', offsetWidth + 'px');
|
|
112
80
|
}
|
|
113
81
|
if (widthChanged) {
|
|
114
82
|
tableAttrs[colgroupAttr] = colgroup.outerHTML;
|
|
115
83
|
}
|
|
116
84
|
if (heightChange) {
|
|
117
|
-
tableAttrs = setNodeStyle(tableAttrs, 'height',
|
|
85
|
+
tableAttrs = setNodeStyle(tableAttrs, 'height', offsetHeight + 'px');
|
|
118
86
|
}
|
|
119
87
|
if (widthChanged || heightChange) {
|
|
120
88
|
tr.setNodeMarkup(tablePos, null, tableAttrs);
|
|
@@ -123,11 +91,13 @@ var toPercents = function (view, tr, tablePos) {
|
|
|
123
91
|
var toPixels = function (view, tr, tablePos, attrs) {
|
|
124
92
|
var tableNode = view.state.doc.nodeAt(tablePos);
|
|
125
93
|
var tableDom = getTable(view.nodeDOM(tablePos));
|
|
94
|
+
var win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
|
|
95
|
+
var calcStyle = win.getComputedStyle;
|
|
126
96
|
var rows = Array.from(tableDom.rows);
|
|
127
97
|
tableNode.forEach(function (row, offset, index) {
|
|
128
98
|
var rowHeight = parseStyle(row.attrs.style).height;
|
|
129
99
|
if (rowHeight && !/px$/.test(rowHeight)) {
|
|
130
|
-
tr.setNodeMarkup(tablePos + offset + 1, null, setNodeStyle(row.attrs, 'height', rows[index].
|
|
100
|
+
tr.setNodeMarkup(tablePos + offset + 1, null, setNodeStyle(row.attrs, 'height', calcStyle(rows[index]).height));
|
|
131
101
|
}
|
|
132
102
|
});
|
|
133
103
|
var colgroup = tableDom.firstChild;
|
|
@@ -135,7 +105,7 @@ var toPixels = function (view, tr, tablePos, attrs) {
|
|
|
135
105
|
var widthChanged = false;
|
|
136
106
|
cols.forEach(function (col, i) {
|
|
137
107
|
if (col.style.width && !/px$/.test(col.style.width)) {
|
|
138
|
-
col.style.width = cols[i].
|
|
108
|
+
col.style.width = calcStyle(cols[i]).width;
|
|
139
109
|
widthChanged = true;
|
|
140
110
|
}
|
|
141
111
|
});
|
|
@@ -148,9 +118,12 @@ var toPixels = function (view, tr, tablePos, attrs) {
|
|
|
148
118
|
var tableSize = function (table) {
|
|
149
119
|
var cols = Array.from(table.firstChild.children);
|
|
150
120
|
var colsWidth = cols.map(function (c) { return c.offsetWidth; });
|
|
121
|
+
var rowsHeight = Array.from(table.rows).map(function (row) { return row.offsetHeight; });
|
|
151
122
|
var width = colsWidth.reduce(function (acc, cur) { return acc + cur; }, 0);
|
|
152
|
-
var height =
|
|
153
|
-
|
|
123
|
+
var height = rowsHeight.reduce(function (acc, cur) { return acc + cur; }, 0);
|
|
124
|
+
var offsetHeight = table.offsetHeight;
|
|
125
|
+
var offsetWidth = table.offsetWidth;
|
|
126
|
+
return { width: width, height: height, colsWidth: colsWidth, rowsHeight: rowsHeight, offsetWidth: offsetWidth, offsetHeight: offsetHeight };
|
|
154
127
|
};
|
|
155
128
|
var handleMouseUp = function (view) {
|
|
156
129
|
var _a = key.getState(view.state), dragging = _a.dragging, nodePosition = _a.nodePosition, activeHandle = _a.activeHandle;
|
|
@@ -160,7 +133,7 @@ var handleMouseUp = function (view) {
|
|
|
160
133
|
var rect = tableSize(dom);
|
|
161
134
|
if (node) {
|
|
162
135
|
var width = rect.offsetWidth + 'px';
|
|
163
|
-
var height = rect.
|
|
136
|
+
var height = rect.offsetHeight + 'px';
|
|
164
137
|
var tr = view.state.tr;
|
|
165
138
|
var attrs = node.attrs;
|
|
166
139
|
var parsedStyles = parseStyle(attrs.style);
|
|
@@ -170,7 +143,7 @@ var handleMouseUp = function (view) {
|
|
|
170
143
|
if (verticalDir[activeHandle] && dom.style.height && parsedStyles.height !== height) {
|
|
171
144
|
attrs = setNodeStyle(attrs, 'height', height);
|
|
172
145
|
}
|
|
173
|
-
toPixels(view, tr, nodePosition, attrs);
|
|
146
|
+
attrs = toPixels(view, tr, nodePosition, attrs);
|
|
174
147
|
tr.setNodeMarkup(nodePosition, null, attrs);
|
|
175
148
|
tr.setMeta('commandName', 'node-resize');
|
|
176
149
|
tr.setMeta('args', attrs);
|
|
@@ -183,9 +156,9 @@ var handleMouseUp = function (view) {
|
|
|
183
156
|
}
|
|
184
157
|
}
|
|
185
158
|
};
|
|
186
|
-
var handleMouseDown = function (view, event
|
|
159
|
+
var handleMouseDown = function (view, event) {
|
|
187
160
|
var target = event.target;
|
|
188
|
-
var activeHandle = target.getAttribute(
|
|
161
|
+
var activeHandle = target.getAttribute(dataResizeDirTable);
|
|
189
162
|
if (!activeHandle) {
|
|
190
163
|
return false;
|
|
191
164
|
}
|
|
@@ -202,7 +175,7 @@ var handleMouseDown = function (view, event, options) {
|
|
|
202
175
|
view.dispatch(transaction);
|
|
203
176
|
var curWindow = event.view || window;
|
|
204
177
|
function move(e) {
|
|
205
|
-
handleMouseMove(view, e
|
|
178
|
+
handleMouseMove(view, e);
|
|
206
179
|
}
|
|
207
180
|
function finish(_e) {
|
|
208
181
|
curWindow.removeEventListener('mouseup', finish);
|
|
@@ -214,7 +187,7 @@ var handleMouseDown = function (view, event, options) {
|
|
|
214
187
|
return true;
|
|
215
188
|
};
|
|
216
189
|
export var tableResizing = function (options) {
|
|
217
|
-
if (options === void 0) { options = { node: 'table'
|
|
190
|
+
if (options === void 0) { options = { node: 'table' }; }
|
|
218
191
|
return new Plugin({
|
|
219
192
|
key: key,
|
|
220
193
|
view: function (_viewObj) { return ({
|
|
@@ -224,7 +197,8 @@ export var tableResizing = function (options) {
|
|
|
224
197
|
if (isNodeSelected && selection instanceof NodeSelection) {
|
|
225
198
|
return { node: selection.node, pos: selection.from };
|
|
226
199
|
}
|
|
227
|
-
var
|
|
200
|
+
var parent = parentNode(selection.$from, function (n) { return n.type === nodeType; });
|
|
201
|
+
var node = parent && parent.node;
|
|
228
202
|
if (node) {
|
|
229
203
|
var tableDepth = new Array(selection.$from.depth + 1).fill(0)
|
|
230
204
|
.findIndex(function (_, i) { return selection.$from.node(i).type.spec.tableRole === 'table'; });
|
|
@@ -234,7 +208,7 @@ export var tableResizing = function (options) {
|
|
|
234
208
|
return null;
|
|
235
209
|
},
|
|
236
210
|
update: function (view, prevState) {
|
|
237
|
-
var _a, _b, _c, _d;
|
|
211
|
+
var _a, _b, _c, _d, _f;
|
|
238
212
|
var state = view.state;
|
|
239
213
|
var nodeType = state.schema.nodes[options.node];
|
|
240
214
|
var selected = this.selectedNode(state, nodeType);
|
|
@@ -251,13 +225,18 @@ export var tableResizing = function (options) {
|
|
|
251
225
|
tr.setNodeMarkup(selected.pos, nodeType, tslib_1.__assign({}, selected.node.attrs, (_b = {}, _b[resizableAttr] = true, _b)));
|
|
252
226
|
view.dispatch(tr);
|
|
253
227
|
}
|
|
254
|
-
else if (selected &&
|
|
228
|
+
else if (selected && prevSelected && selected.pos === prevSelected.pos &&
|
|
229
|
+
!selected.node.attrs[resizableAttr] && !state.selection.eq(prevState.selection)) {
|
|
255
230
|
tr.setMeta(key, { nodePosition: selected.pos });
|
|
256
231
|
view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, tslib_1.__assign({}, selected.node.attrs, (_c = {}, _c[resizableAttr] = true, _c))));
|
|
257
232
|
}
|
|
233
|
+
else if (selected && !prevSelected) {
|
|
234
|
+
tr.setMeta(key, { nodePosition: selected.pos });
|
|
235
|
+
view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, tslib_1.__assign({}, selected.node.attrs, (_d = {}, _d[resizableAttr] = true, _d))));
|
|
236
|
+
}
|
|
258
237
|
else if (!selected && prevSelected) {
|
|
259
238
|
tr.setMeta(key, { nodePosition: -1 });
|
|
260
|
-
view.dispatch(tr.setNodeMarkup(prevSelected.pos, nodeType, tslib_1.__assign({}, prevSelected.node.attrs, (
|
|
239
|
+
view.dispatch(tr.setNodeMarkup(prevSelected.pos, nodeType, tslib_1.__assign({}, prevSelected.node.attrs, (_f = {}, _f[resizableAttr] = false, _f))));
|
|
261
240
|
}
|
|
262
241
|
}
|
|
263
242
|
}
|
|
@@ -273,7 +252,7 @@ export var tableResizing = function (options) {
|
|
|
273
252
|
props: {
|
|
274
253
|
handleDOMEvents: {
|
|
275
254
|
mousedown: function (view, event) {
|
|
276
|
-
return handleMouseDown(view, event
|
|
255
|
+
return handleMouseDown(view, event);
|
|
277
256
|
}
|
|
278
257
|
}
|
|
279
258
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { colgroupAttr,
|
|
1
|
+
import { colgroupAttr, dataResizeDirTable, resizableAttr, resizableWrap, resizeHandle } from '../../config/constants';
|
|
2
2
|
import { parseStrColgroup } from '../../config/schema';
|
|
3
|
-
|
|
3
|
+
import { handles } from './../resize-utils';
|
|
4
4
|
var TableView = /** @class */ (function () {
|
|
5
5
|
function TableView(node, view) {
|
|
6
6
|
this.node = node;
|
|
@@ -13,10 +13,10 @@ var TableView = /** @class */ (function () {
|
|
|
13
13
|
}
|
|
14
14
|
var tBody = this.table.appendChild(document.createElement('tbody'));
|
|
15
15
|
this.setAttributes(this.table, node.attrs);
|
|
16
|
-
this.resizeHandles =
|
|
16
|
+
this.resizeHandles = handles.map(function (dir) {
|
|
17
17
|
var handle = document.createElement('span');
|
|
18
18
|
handle.className = resizeHandle + ' ' + dir;
|
|
19
|
-
handle.setAttribute(
|
|
19
|
+
handle.setAttribute(dataResizeDirTable, dir);
|
|
20
20
|
return handle;
|
|
21
21
|
});
|
|
22
22
|
this.contentDOM = tBody;
|
|
@@ -52,11 +52,11 @@ var TableView = /** @class */ (function () {
|
|
|
52
52
|
return result;
|
|
53
53
|
};
|
|
54
54
|
TableView.prototype.destroy = function () {
|
|
55
|
-
this.node =
|
|
56
|
-
this.view =
|
|
57
|
-
this.table =
|
|
58
|
-
this.colgroup =
|
|
59
|
-
this.resizeHandles =
|
|
55
|
+
this.node = undefined;
|
|
56
|
+
this.view = undefined;
|
|
57
|
+
this.table = undefined;
|
|
58
|
+
this.colgroup = undefined;
|
|
59
|
+
this.resizeHandles = undefined;
|
|
60
60
|
};
|
|
61
61
|
TableView.prototype.renderColgroup = function (colgroupStr) {
|
|
62
62
|
if (this.table && this.table.firstChild && this.table.firstChild.nodeName === 'COLGROUP') {
|
|
@@ -40,9 +40,11 @@ export function otherResizing(current, state) {
|
|
|
40
40
|
export function otherResizeHandle(current, state) {
|
|
41
41
|
var activeResize = false;
|
|
42
42
|
activeResize = activeResize ||
|
|
43
|
-
(current !== tableColumnResizing &&
|
|
43
|
+
(current !== tableColumnResizing &&
|
|
44
|
+
Boolean(tableColumnResizing.get(state)) &&
|
|
45
|
+
tableColumnResizing.getState(state).activeHandle > -1);
|
|
44
46
|
activeResize = activeResize ||
|
|
45
|
-
(current !== tableRowResizing && tableRowResizing.get(state) && tableRowResizing.getState(state).activeHandle > -1);
|
|
47
|
+
(current !== tableRowResizing && Boolean(tableRowResizing.get(state)) && tableRowResizing.getState(state).activeHandle > -1);
|
|
46
48
|
return activeResize;
|
|
47
49
|
}
|
|
48
50
|
export function getTable(dom) {
|
|
@@ -51,3 +53,25 @@ export function getTable(dom) {
|
|
|
51
53
|
}
|
|
52
54
|
return dom;
|
|
53
55
|
}
|
|
56
|
+
export function domCellAround(target) {
|
|
57
|
+
while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
|
|
58
|
+
target = target.classList.contains('ProseMirror') ? null : target.parentNode;
|
|
59
|
+
}
|
|
60
|
+
return target;
|
|
61
|
+
}
|
|
62
|
+
export function cellIndexes(cell) {
|
|
63
|
+
var row = cell.parentNode;
|
|
64
|
+
return {
|
|
65
|
+
cellIndex: cell.cellIndex,
|
|
66
|
+
rowIndex: row.rowIndex
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
export function parentNode(pos, predicate) {
|
|
70
|
+
for (var depth = pos.depth; depth > 0; depth--) {
|
|
71
|
+
var node = pos.node(depth);
|
|
72
|
+
if (predicate(node)) {
|
|
73
|
+
return { node: node, depth: depth };
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return null;
|
|
77
|
+
}
|
|
@@ -3,4 +3,5 @@ export const colgroupAttr = 'k-colgroup-data';
|
|
|
3
3
|
export const resizableAttr = 'resizable-node';
|
|
4
4
|
export const resizableWrap = 'k-editor-resize-wrap-element';
|
|
5
5
|
export const resizeHandle = 'k-editor-resize-handle';
|
|
6
|
-
export const
|
|
6
|
+
export const dataResizeDirTable = 'data-direction';
|
|
7
|
+
export const dataResizeDirImage = 'data-direction-image';
|
|
@@ -30,10 +30,10 @@ const hasAttrs = (attrs, exclude) => {
|
|
|
30
30
|
}
|
|
31
31
|
return false;
|
|
32
32
|
};
|
|
33
|
-
const pmAttributes = (attrs, exclude) => {
|
|
33
|
+
const pmAttributes = (attrs, exclude = []) => {
|
|
34
34
|
const result = {};
|
|
35
35
|
for (let attr in attrs) {
|
|
36
|
-
if (attr && attrs[attr] !== null &&
|
|
36
|
+
if (attr && attrs[attr] !== null && !exclude.find(e => e === attr)) {
|
|
37
37
|
result[attr] = attrs[attr];
|
|
38
38
|
}
|
|
39
39
|
}
|
|
@@ -118,7 +118,7 @@ tNodes.table_row.toDOM = node => ['tr', pmAttributes(node.attrs), 0];
|
|
|
118
118
|
tNodes.table_row.parseDOM = [{ tag: 'tr', getAttrs: domAttributes }];
|
|
119
119
|
tNodes.table.attrs = Object.assign({}, tNodes.table.attrs, defaultAttrs(['style', 'class', 'id', colgroupAttr, resizableAttr]));
|
|
120
120
|
tNodes.table.toDOM = (node) => {
|
|
121
|
-
const tableAttrs = hasAttrs(node.attrs) ? pmAttributes(node.attrs, colgroupAttr) : {};
|
|
121
|
+
const tableAttrs = hasAttrs(node.attrs) ? pmAttributes(node.attrs, [colgroupAttr, resizableAttr]) : {};
|
|
122
122
|
let colgroup = null;
|
|
123
123
|
if (node.attrs[colgroupAttr] && !shouldSkipColgroup(node)) {
|
|
124
124
|
const colgroupEl = parseStrColgroup(node.attrs[colgroupAttr]);
|
|
@@ -207,7 +207,7 @@ const nodes = Object.assign({
|
|
|
207
207
|
{ tag: 'h6', getAttrs: node => (Object.assign({}, domAttributes(node), { level: 6 })) }
|
|
208
208
|
],
|
|
209
209
|
toDOM: node => hasAttrs(node.attrs, 'level') ?
|
|
210
|
-
['h' + node.attrs.level, pmAttributes(node.attrs, 'level'), hole] :
|
|
210
|
+
['h' + node.attrs.level, pmAttributes(node.attrs, ['level']), hole] :
|
|
211
211
|
['h' + node.attrs.level, hole]
|
|
212
212
|
},
|
|
213
213
|
// :: NodeSpec A code listing. Disallows marks or non-text inline
|
|
@@ -264,8 +264,8 @@ const nodes = Object.assign({
|
|
|
264
264
|
} }],
|
|
265
265
|
toDOM: node => {
|
|
266
266
|
return node.attrs.order === 1 ?
|
|
267
|
-
(hasAttrs(node.attrs, 'order') ? ['ol', pmAttributes(node.attrs, 'order'), hole] : olDOM) :
|
|
268
|
-
['ol', Object.assign({}, pmAttributes(node.attrs, 'order'), { start: node.attrs.order }), hole];
|
|
267
|
+
(hasAttrs(node.attrs, 'order') ? ['ol', pmAttributes(node.attrs, ['order']), hole] : olDOM) :
|
|
268
|
+
['ol', Object.assign({}, pmAttributes(node.attrs, ['order']), { start: node.attrs.order }), hole];
|
|
269
269
|
}
|
|
270
270
|
},
|
|
271
271
|
// :: NodeSpec
|
|
@@ -1,19 +1,9 @@
|
|
|
1
1
|
import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
|
|
2
2
|
import { Decoration, DecorationSet } from "prosemirror-view";
|
|
3
|
-
import {
|
|
3
|
+
import { dataResizeDirImage, resizeHandle } from "../config/constants";
|
|
4
4
|
import { changeStylesString } from "../utils";
|
|
5
|
+
import { directions, handles } from './resize-utils';
|
|
5
6
|
export const imageResizeKey = new PluginKey('image-resize');
|
|
6
|
-
const directions = {
|
|
7
|
-
'southeast': { x: 1, y: 1 },
|
|
8
|
-
'east': { x: 1, y: 0 },
|
|
9
|
-
'south': { x: 0, y: 1 },
|
|
10
|
-
'north': { x: 0, y: -1 },
|
|
11
|
-
'west': { x: -1, y: 0 },
|
|
12
|
-
'southwest': { x: -1, y: 1 },
|
|
13
|
-
'northwest': { x: -1, y: -1 },
|
|
14
|
-
'northeast': { x: 1, y: -1 } // top right
|
|
15
|
-
};
|
|
16
|
-
const handles = Object.keys(directions);
|
|
17
7
|
const setSize = (domNode, sizeType, value) => {
|
|
18
8
|
domNode.style[sizeType] = value + 'px';
|
|
19
9
|
};
|
|
@@ -108,7 +98,7 @@ const handleMouseUp = (view) => {
|
|
|
108
98
|
};
|
|
109
99
|
const handleMouseDown = (view, event, options) => {
|
|
110
100
|
const target = event.target;
|
|
111
|
-
const activeHandle = target.getAttribute(
|
|
101
|
+
const activeHandle = target.getAttribute(dataResizeDirImage);
|
|
112
102
|
if (!activeHandle) {
|
|
113
103
|
return false;
|
|
114
104
|
}
|
|
@@ -220,7 +210,7 @@ export const imageResizing = (options = { node: 'image', lockRatio: true }) => {
|
|
|
220
210
|
for (let i = 0; i < handles.length; i++) {
|
|
221
211
|
let dom = document.createElement('div');
|
|
222
212
|
dom.className = resizeHandle + ' ' + handles[i];
|
|
223
|
-
dom.setAttribute(
|
|
213
|
+
dom.setAttribute(dataResizeDirImage, handles[i]);
|
|
224
214
|
wrapper.appendChild(dom);
|
|
225
215
|
}
|
|
226
216
|
return DecorationSet.create(state.doc, [Decoration.widget(state.selection.from + 1, wrapper)]);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export const directions = {
|
|
2
|
+
'southeast': { x: 1, y: 1 },
|
|
3
|
+
'east': { x: 1, y: 0 },
|
|
4
|
+
'south': { x: 0, y: 1 },
|
|
5
|
+
'north': { x: 0, y: -1 },
|
|
6
|
+
'west': { x: -1, y: 0 },
|
|
7
|
+
'southwest': { x: -1, y: 1 },
|
|
8
|
+
'northwest': { x: -1, y: -1 },
|
|
9
|
+
'northeast': { x: 1, y: -1 } // top right
|
|
10
|
+
};
|
|
11
|
+
export const handles = Object.keys(directions);
|
|
@@ -3,10 +3,10 @@ import { tableNodeTypes, TableMap } from 'prosemirror-tables';
|
|
|
3
3
|
import { Decoration, DecorationSet } from 'prosemirror-view';
|
|
4
4
|
import { colgroupAttr } from '../../config/constants';
|
|
5
5
|
import { TableView } from './table-view';
|
|
6
|
-
import { otherResizeHandle, otherResizing, parseStyle, setNodeStyle, tableColumnResizing as key } from './utils';
|
|
6
|
+
import { cellIndexes, domCellAround, otherResizeHandle, otherResizing, parentNode, parseStyle, setNodeStyle, tableColumnResizing as key } from './utils';
|
|
7
7
|
export function columnResizing() {
|
|
8
8
|
// tslint:disable-next-line:variable-name
|
|
9
|
-
const View = TableView,
|
|
9
|
+
const View = TableView, handleWidth = 5, cellMinWidth = 25;
|
|
10
10
|
let plugin = new Plugin({
|
|
11
11
|
key,
|
|
12
12
|
state: {
|
|
@@ -29,7 +29,7 @@ export function columnResizing() {
|
|
|
29
29
|
handleDOMEvents: {
|
|
30
30
|
mousemove(view, event) {
|
|
31
31
|
if (!otherResizing(key, view.state)) {
|
|
32
|
-
handleMouseMove(view, event, handleWidth
|
|
32
|
+
handleMouseMove(view, event, handleWidth);
|
|
33
33
|
}
|
|
34
34
|
return false;
|
|
35
35
|
},
|
|
@@ -42,29 +42,21 @@ export function columnResizing() {
|
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
44
|
decorations(state) {
|
|
45
|
-
if (otherResizing(key, state)) {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
return handleDecorations(state, pluginState.activeHandle);
|
|
45
|
+
if (!otherResizing(key, state)) {
|
|
46
|
+
let pluginState = key.getState(state);
|
|
47
|
+
if (pluginState.activeHandle > -1) {
|
|
48
|
+
return handleDecorations(state, pluginState.activeHandle);
|
|
49
|
+
}
|
|
51
50
|
}
|
|
51
|
+
return DecorationSet.empty;
|
|
52
52
|
},
|
|
53
53
|
nodeViews: {}
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
56
|
return plugin;
|
|
57
57
|
}
|
|
58
|
-
function cellAround($pos) {
|
|
59
|
-
for (let d = $pos.depth - 1; d > 0; d--) {
|
|
60
|
-
if ($pos.node(d).type.spec.tableRole === 'row') {
|
|
61
|
-
return $pos.node(0).resolve($pos.before(d + 1));
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
return null;
|
|
65
|
-
}
|
|
66
58
|
function pointsAtCell($pos) {
|
|
67
|
-
return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
|
|
59
|
+
return Boolean($pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter);
|
|
68
60
|
}
|
|
69
61
|
class ResizeState {
|
|
70
62
|
constructor(activeHandle, dragging) {
|
|
@@ -82,35 +74,29 @@ class ResizeState {
|
|
|
82
74
|
if (state.activeHandle > -1 && tr.docChanged) {
|
|
83
75
|
let handle = tr.mapping.map(state.activeHandle, -1);
|
|
84
76
|
if (!pointsAtCell(tr.doc.resolve(handle))) {
|
|
85
|
-
handle =
|
|
77
|
+
handle = -1;
|
|
86
78
|
}
|
|
87
79
|
state = new ResizeState(handle, state.dragging);
|
|
88
80
|
}
|
|
89
81
|
return state;
|
|
90
82
|
}
|
|
91
83
|
}
|
|
92
|
-
function handleMouseMove(view, event, handleWidth
|
|
84
|
+
function handleMouseMove(view, event, handleWidth) {
|
|
93
85
|
let pluginState = key.getState(view.state);
|
|
94
86
|
if (!pluginState.dragging) {
|
|
95
87
|
let target = domCellAround(event.target), cell = -1;
|
|
96
88
|
if (target) {
|
|
89
|
+
const indexes = cellIndexes(target);
|
|
97
90
|
let { left, right } = target.getBoundingClientRect();
|
|
98
|
-
if (event.clientX - left <= handleWidth) {
|
|
99
|
-
|
|
91
|
+
if (Math.abs(event.clientX - left) <= handleWidth && indexes.cellIndex > 0) {
|
|
92
|
+
indexes.cellIndex--;
|
|
93
|
+
cell = edgeCell(view, event, indexes);
|
|
100
94
|
}
|
|
101
|
-
else if (right - event.clientX <= handleWidth) {
|
|
102
|
-
cell = edgeCell(view, event,
|
|
95
|
+
else if (right - event.clientX > 0 && right - event.clientX <= handleWidth) {
|
|
96
|
+
cell = edgeCell(view, event, indexes);
|
|
103
97
|
}
|
|
104
98
|
}
|
|
105
99
|
if (cell !== pluginState.activeHandle) {
|
|
106
|
-
if (!lastColumnResizable && cell !== -1) {
|
|
107
|
-
let $cell = view.state.doc.resolve(cell);
|
|
108
|
-
let table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1);
|
|
109
|
-
let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
|
|
110
|
-
if (col === map.width - 1) {
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
100
|
updateHandle(view, cell);
|
|
115
101
|
}
|
|
116
102
|
}
|
|
@@ -167,7 +153,7 @@ function handleMouseDown(view, event, cellMinWidth) {
|
|
|
167
153
|
const widths = Array.from(col.parentNode.children).map((c) => c.style.width);
|
|
168
154
|
if (widths.every(Boolean)) {
|
|
169
155
|
const sum = widths.reduce((acc, cur) => acc + parseFloat(cur), 0);
|
|
170
|
-
tableAttrs = setNodeStyle(tableNode.attrs, 'width', sum + 'px');
|
|
156
|
+
tableAttrs = setNodeStyle(tableAttrs || tableNode.attrs, 'width', sum + 'px');
|
|
171
157
|
}
|
|
172
158
|
}
|
|
173
159
|
if (tableAttrs) {
|
|
@@ -197,28 +183,21 @@ function handleMouseDown(view, event, cellMinWidth) {
|
|
|
197
183
|
event.preventDefault();
|
|
198
184
|
return true;
|
|
199
185
|
}
|
|
200
|
-
function
|
|
201
|
-
while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
|
|
202
|
-
target = target.classList.contains('ProseMirror') ? null : target.parentNode;
|
|
203
|
-
}
|
|
204
|
-
return target;
|
|
205
|
-
}
|
|
206
|
-
function edgeCell(view, event, side) {
|
|
186
|
+
function edgeCell(view, event, indexes) {
|
|
207
187
|
let found = view.posAtCoords({ left: event.clientX, top: event.clientY });
|
|
208
188
|
if (!found) {
|
|
209
189
|
return -1;
|
|
210
190
|
}
|
|
211
|
-
let
|
|
212
|
-
let
|
|
213
|
-
if (
|
|
191
|
+
let $pos = view.state.doc.resolve(found.pos);
|
|
192
|
+
let parentTable = parentNode($pos, n => n.type.spec.tableRole === 'table');
|
|
193
|
+
if (parentTable === null) {
|
|
214
194
|
return -1;
|
|
215
195
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
return index % map.width === 0 ? -1 : start + map.map[index - 1];
|
|
196
|
+
let tablePos = $pos.start(parentTable.depth);
|
|
197
|
+
const tableNode = parentTable.node;
|
|
198
|
+
const map = TableMap.get(tableNode);
|
|
199
|
+
const cell = tablePos + map.map[(map.width * indexes.rowIndex) + indexes.cellIndex];
|
|
200
|
+
return cell;
|
|
222
201
|
}
|
|
223
202
|
function draggedWidth(dragging, event, cellMinWidth) {
|
|
224
203
|
let offset = event.clientX - dragging.startX;
|