@progress/kendo-editor-common 1.8.2-dev.202204060750 → 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 +5 -0
- package/dist/es/config/schema.js +9 -5
- package/dist/es/main.js +1 -0
- package/dist/es/plugins/image-resize.js +5 -14
- package/dist/es/plugins/resize-utils.js +11 -0
- package/dist/es/plugins/table-resize/column-resize.js +273 -0
- package/dist/es/plugins/table-resize/index.js +8 -0
- package/dist/es/plugins/table-resize/row-resize.js +230 -0
- package/dist/es/plugins/table-resize/table-resize.js +255 -0
- package/dist/es/plugins/table-resize/table-view.js +87 -0
- package/dist/es/plugins/table-resize/utils.js +77 -0
- package/dist/es2015/config/constants.js +5 -0
- package/dist/es2015/config/schema.js +11 -8
- package/dist/es2015/main.js +1 -0
- package/dist/es2015/plugins/image-resize.js +5 -14
- package/dist/es2015/plugins/resize-utils.js +11 -0
- package/dist/es2015/plugins/table-resize/column-resize.js +269 -0
- package/dist/es2015/plugins/table-resize/index.js +8 -0
- package/dist/es2015/plugins/table-resize/row-resize.js +226 -0
- package/dist/es2015/plugins/table-resize/table-resize.js +251 -0
- package/dist/es2015/plugins/table-resize/table-view.js +84 -0
- package/dist/es2015/plugins/table-resize/utils.js +75 -0
- package/dist/npm/config/constants.d.ts +5 -0
- package/dist/npm/config/constants.js +5 -0
- package/dist/npm/config/schema.d.ts +1 -0
- package/dist/npm/config/schema.js +8 -4
- package/dist/npm/main.d.ts +1 -0
- package/dist/npm/main.js +2 -0
- package/dist/npm/plugins/image-resize.js +7 -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.d.ts +2 -0
- package/dist/npm/plugins/table-resize/column-resize.js +276 -0
- package/dist/npm/plugins/table-resize/index.d.ts +1 -0
- package/dist/npm/plugins/table-resize/index.js +10 -0
- package/dist/npm/plugins/table-resize/row-resize.d.ts +2 -0
- package/dist/npm/plugins/table-resize/row-resize.js +233 -0
- package/dist/npm/plugins/table-resize/table-resize.d.ts +4 -0
- package/dist/npm/plugins/table-resize/table-resize.js +257 -0
- package/dist/npm/plugins/table-resize/table-view.d.ts +17 -0
- package/dist/npm/plugins/table-resize/table-view.js +89 -0
- package/dist/npm/plugins/table-resize/utils.d.ts +22 -0
- package/dist/npm/plugins/table-resize/utils.js +86 -0
- package/dist/systemjs/kendo-editor-common.js +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
import { NodeSelection, Plugin } from 'prosemirror-state';
|
|
2
|
+
import { colgroupAttr, dataResizeDirTable, resizableAttr } from '../../config/constants';
|
|
3
|
+
import { getTable, parentNode, parseStyle, setNodeStyle, tableResizeKey as key } from './utils';
|
|
4
|
+
import { directions } from './../resize-utils';
|
|
5
|
+
const commonDir = {
|
|
6
|
+
'southeast': true,
|
|
7
|
+
'southwest': true,
|
|
8
|
+
'northwest': true,
|
|
9
|
+
'northeast': true
|
|
10
|
+
};
|
|
11
|
+
const horizontalDir = Object.assign({ 'east': true, 'west': true }, commonDir);
|
|
12
|
+
const verticalDir = Object.assign({ 'south': true, 'north': true }, commonDir);
|
|
13
|
+
class ResizeState {
|
|
14
|
+
constructor(activeHandle, dragging, nodePosition) {
|
|
15
|
+
this.activeHandle = activeHandle;
|
|
16
|
+
this.dragging = dragging;
|
|
17
|
+
this.nodePosition = nodePosition;
|
|
18
|
+
}
|
|
19
|
+
apply(tr) {
|
|
20
|
+
let state = this, next = tr.getMeta(key);
|
|
21
|
+
if (next) {
|
|
22
|
+
const nextState = new ResizeState(next.activeHandle, next.setDragging, next.nodePosition);
|
|
23
|
+
return nextState;
|
|
24
|
+
}
|
|
25
|
+
return state;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const handleMouseMove = (view, event) => {
|
|
29
|
+
const state = key.getState(view.state);
|
|
30
|
+
const { dragging, nodePosition, activeHandle } = state;
|
|
31
|
+
if (nodePosition < 0 || !dragging) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
let tableDom = getTable(view.nodeDOM(nodePosition));
|
|
35
|
+
const rect = tableDom.getBoundingClientRect();
|
|
36
|
+
const dir = directions[activeHandle];
|
|
37
|
+
const diffX = (event.clientX - dragging.startX) * dir.x;
|
|
38
|
+
const diffY = (event.clientY - dragging.startY) * dir.y;
|
|
39
|
+
const win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
|
|
40
|
+
const compStyles = win.getComputedStyle(tableDom);
|
|
41
|
+
const nodeWidth = /px/.test(compStyles.width) ? parseFloat(compStyles.width) : tableDom.offsetWidth;
|
|
42
|
+
const nodeHeight = /px/.test(compStyles.height) ? parseFloat(compStyles.height) : tableDom.offsetHeight;
|
|
43
|
+
const width = dir.x ? diffX + nodeWidth : rect.width;
|
|
44
|
+
const height = dir.y ? diffY + nodeHeight : rect.height;
|
|
45
|
+
dragging.startX = dir.x ? event.clientX : dragging.startX;
|
|
46
|
+
dragging.startY = dir.y ? event.clientY : dragging.startY;
|
|
47
|
+
if (horizontalDir[activeHandle]) {
|
|
48
|
+
tableDom.style.width = width + 'px';
|
|
49
|
+
}
|
|
50
|
+
if (verticalDir[activeHandle]) {
|
|
51
|
+
tableDom.style.height = height + 'px';
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
const toPercents = (view, tr, tablePos) => {
|
|
55
|
+
const tableNode = view.state.doc.nodeAt(tablePos);
|
|
56
|
+
const tableDom = getTable(view.nodeDOM(tablePos));
|
|
57
|
+
const { width, height, colsWidth, rowsHeight, offsetWidth, offsetHeight } = tableSize(tableDom);
|
|
58
|
+
const colgroup = tableDom.firstChild;
|
|
59
|
+
const cols = Array.from((colgroup && colgroup.children) || []);
|
|
60
|
+
let widthChanged = false;
|
|
61
|
+
cols.forEach((col, i) => {
|
|
62
|
+
if (col.style.width && !/%$/.test(col.style.width)) {
|
|
63
|
+
col.style.width = ((colsWidth[i]) * 100 / width) + '%';
|
|
64
|
+
widthChanged = true;
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
let heightChange = false;
|
|
68
|
+
tableNode.forEach((row, offset, index) => {
|
|
69
|
+
const rowHeight = parseStyle(row.attrs.style).height;
|
|
70
|
+
if (rowHeight && !/%$/.test(rowHeight)) {
|
|
71
|
+
tr.setNodeMarkup(tablePos + offset + 1, null, setNodeStyle(row.attrs, 'height', (rowsHeight[index] * 100 / height) + '%'));
|
|
72
|
+
heightChange = true;
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
let tableAttrs = tableNode.attrs;
|
|
76
|
+
if (parseStyle(tableAttrs.style).width !== offsetWidth + 'px') {
|
|
77
|
+
tableAttrs = setNodeStyle(tableAttrs, 'width', offsetWidth + 'px');
|
|
78
|
+
}
|
|
79
|
+
if (widthChanged) {
|
|
80
|
+
tableAttrs[colgroupAttr] = colgroup.outerHTML;
|
|
81
|
+
}
|
|
82
|
+
if (heightChange) {
|
|
83
|
+
tableAttrs = setNodeStyle(tableAttrs, 'height', offsetHeight + 'px');
|
|
84
|
+
}
|
|
85
|
+
if (widthChanged || heightChange) {
|
|
86
|
+
tr.setNodeMarkup(tablePos, null, tableAttrs);
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
const toPixels = (view, tr, tablePos, attrs) => {
|
|
90
|
+
const tableNode = view.state.doc.nodeAt(tablePos);
|
|
91
|
+
const tableDom = getTable(view.nodeDOM(tablePos));
|
|
92
|
+
const win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
|
|
93
|
+
const calcStyle = win.getComputedStyle;
|
|
94
|
+
const rows = Array.from(tableDom.rows);
|
|
95
|
+
tableNode.forEach((row, offset, index) => {
|
|
96
|
+
const rowHeight = parseStyle(row.attrs.style).height;
|
|
97
|
+
if (rowHeight && !/px$/.test(rowHeight)) {
|
|
98
|
+
tr.setNodeMarkup(tablePos + offset + 1, null, setNodeStyle(row.attrs, 'height', calcStyle(rows[index]).height));
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
const colgroup = tableDom.firstChild;
|
|
102
|
+
const cols = Array.from((colgroup && colgroup.children) || []);
|
|
103
|
+
let widthChanged = false;
|
|
104
|
+
cols.forEach((col, i) => {
|
|
105
|
+
if (col.style.width && !/px$/.test(col.style.width)) {
|
|
106
|
+
col.style.width = calcStyle(cols[i]).width;
|
|
107
|
+
widthChanged = true;
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
let tableAttrs = Object.assign({}, attrs);
|
|
111
|
+
if (widthChanged) {
|
|
112
|
+
tableAttrs[colgroupAttr] = colgroup.outerHTML;
|
|
113
|
+
}
|
|
114
|
+
return tableAttrs;
|
|
115
|
+
};
|
|
116
|
+
const tableSize = (table) => {
|
|
117
|
+
const cols = Array.from(table.firstChild.children);
|
|
118
|
+
const colsWidth = cols.map(c => c.offsetWidth);
|
|
119
|
+
const rowsHeight = Array.from(table.rows).map(row => row.offsetHeight);
|
|
120
|
+
const width = colsWidth.reduce((acc, cur) => acc + cur, 0);
|
|
121
|
+
const height = rowsHeight.reduce((acc, cur) => acc + cur, 0);
|
|
122
|
+
const offsetHeight = table.offsetHeight;
|
|
123
|
+
const offsetWidth = table.offsetWidth;
|
|
124
|
+
return { width, height, colsWidth, rowsHeight, offsetWidth, offsetHeight };
|
|
125
|
+
};
|
|
126
|
+
const handleMouseUp = (view) => {
|
|
127
|
+
const { dragging, nodePosition, activeHandle } = key.getState(view.state);
|
|
128
|
+
if (dragging) {
|
|
129
|
+
const node = view.state.doc.nodeAt(nodePosition);
|
|
130
|
+
const dom = getTable(view.nodeDOM(nodePosition));
|
|
131
|
+
const rect = tableSize(dom);
|
|
132
|
+
if (node) {
|
|
133
|
+
const width = rect.offsetWidth + 'px';
|
|
134
|
+
const height = rect.offsetHeight + 'px';
|
|
135
|
+
const tr = view.state.tr;
|
|
136
|
+
let attrs = node.attrs;
|
|
137
|
+
const parsedStyles = parseStyle(attrs.style);
|
|
138
|
+
if (horizontalDir[activeHandle] && dom.style.width && parsedStyles.width !== width) {
|
|
139
|
+
attrs = setNodeStyle(attrs, 'width', width);
|
|
140
|
+
}
|
|
141
|
+
if (verticalDir[activeHandle] && dom.style.height && parsedStyles.height !== height) {
|
|
142
|
+
attrs = setNodeStyle(attrs, 'height', height);
|
|
143
|
+
}
|
|
144
|
+
attrs = toPixels(view, tr, nodePosition, attrs);
|
|
145
|
+
tr.setNodeMarkup(nodePosition, null, attrs);
|
|
146
|
+
tr.setMeta('commandName', 'node-resize');
|
|
147
|
+
tr.setMeta('args', attrs);
|
|
148
|
+
tr.setMeta(key, {
|
|
149
|
+
setDragging: null,
|
|
150
|
+
activeHandle: null,
|
|
151
|
+
nodePosition
|
|
152
|
+
});
|
|
153
|
+
view.dispatch(tr);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
const handleMouseDown = (view, event) => {
|
|
158
|
+
const target = event.target;
|
|
159
|
+
const activeHandle = target.getAttribute(dataResizeDirTable);
|
|
160
|
+
if (!activeHandle) {
|
|
161
|
+
return false;
|
|
162
|
+
}
|
|
163
|
+
const resizeState = key.getState(view.state);
|
|
164
|
+
event.preventDefault();
|
|
165
|
+
const transaction = view.state.tr;
|
|
166
|
+
transaction.setMeta(key, {
|
|
167
|
+
setDragging: { startX: event.clientX, startY: event.clientY },
|
|
168
|
+
activeHandle,
|
|
169
|
+
nodePosition: resizeState.nodePosition
|
|
170
|
+
});
|
|
171
|
+
transaction.setMeta('addToHistory', false);
|
|
172
|
+
toPercents(view, transaction, resizeState.nodePosition);
|
|
173
|
+
view.dispatch(transaction);
|
|
174
|
+
const curWindow = event.view || window;
|
|
175
|
+
function move(e) {
|
|
176
|
+
handleMouseMove(view, e);
|
|
177
|
+
}
|
|
178
|
+
function finish(_e) {
|
|
179
|
+
curWindow.removeEventListener('mouseup', finish);
|
|
180
|
+
curWindow.removeEventListener('mousemove', move);
|
|
181
|
+
handleMouseUp(view);
|
|
182
|
+
}
|
|
183
|
+
curWindow.addEventListener('mouseup', finish);
|
|
184
|
+
curWindow.addEventListener('mousemove', move);
|
|
185
|
+
return true;
|
|
186
|
+
};
|
|
187
|
+
export const tableResizing = (options = { node: 'table' }) => {
|
|
188
|
+
return new Plugin({
|
|
189
|
+
key: key,
|
|
190
|
+
view: (_viewObj) => ({
|
|
191
|
+
selectedNode(state, nodeType) {
|
|
192
|
+
const selection = state.selection;
|
|
193
|
+
const isNodeSelected = selection instanceof NodeSelection && nodeType === selection.node.type;
|
|
194
|
+
if (isNodeSelected && selection instanceof NodeSelection) {
|
|
195
|
+
return { node: selection.node, pos: selection.from };
|
|
196
|
+
}
|
|
197
|
+
const parent = parentNode(selection.$from, (n) => n.type === nodeType);
|
|
198
|
+
const node = parent && parent.node;
|
|
199
|
+
if (node) {
|
|
200
|
+
let tableDepth = new Array(selection.$from.depth + 1).fill(0)
|
|
201
|
+
.findIndex((_, i) => selection.$from.node(i).type.spec.tableRole === 'table');
|
|
202
|
+
const pos = selection.$from.start(tableDepth) - 1;
|
|
203
|
+
return { node, pos };
|
|
204
|
+
}
|
|
205
|
+
return null;
|
|
206
|
+
},
|
|
207
|
+
update(view, prevState) {
|
|
208
|
+
const state = view.state;
|
|
209
|
+
const nodeType = state.schema.nodes[options.node];
|
|
210
|
+
const selected = this.selectedNode(state, nodeType);
|
|
211
|
+
const prevSelected = this.selectedNode(prevState, nodeType);
|
|
212
|
+
if (!selected && prevSelected && !prevState.doc.eq(view.state.doc)) {
|
|
213
|
+
// selected table is deleted
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
if (selected || prevSelected) {
|
|
217
|
+
let tr = state.tr;
|
|
218
|
+
if (selected && prevSelected && selected.pos !== prevSelected.pos) {
|
|
219
|
+
tr.setMeta(key, { nodePosition: selected.pos });
|
|
220
|
+
tr.setNodeMarkup(prevSelected.pos, nodeType, Object.assign({}, prevSelected.node.attrs, { [resizableAttr]: false }));
|
|
221
|
+
tr.setNodeMarkup(selected.pos, nodeType, Object.assign({}, selected.node.attrs, { [resizableAttr]: true }));
|
|
222
|
+
view.dispatch(tr);
|
|
223
|
+
}
|
|
224
|
+
else if (selected && !prevSelected) {
|
|
225
|
+
tr.setMeta(key, { nodePosition: selected.pos });
|
|
226
|
+
view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, Object.assign({}, selected.node.attrs, { [resizableAttr]: true })));
|
|
227
|
+
}
|
|
228
|
+
else if (!selected && prevSelected) {
|
|
229
|
+
tr.setMeta(key, { nodePosition: -1 });
|
|
230
|
+
view.dispatch(tr.setNodeMarkup(prevSelected.pos, nodeType, Object.assign({}, prevSelected.node.attrs, { [resizableAttr]: false })));
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
}),
|
|
235
|
+
state: {
|
|
236
|
+
init() {
|
|
237
|
+
return new ResizeState('', null, -1);
|
|
238
|
+
},
|
|
239
|
+
apply(tr, prev) {
|
|
240
|
+
return prev.apply(tr);
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
props: {
|
|
244
|
+
handleDOMEvents: {
|
|
245
|
+
mousedown(view, event) {
|
|
246
|
+
return handleMouseDown(view, event);
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { colgroupAttr, dataResizeDirTable, resizableAttr, resizableWrap, resizeHandle } from '../../config/constants';
|
|
2
|
+
import { parseStrColgroup } from '../../config/schema';
|
|
3
|
+
import { handles } from './../resize-utils';
|
|
4
|
+
export class TableView {
|
|
5
|
+
constructor(node, view) {
|
|
6
|
+
this.node = node;
|
|
7
|
+
this.view = view;
|
|
8
|
+
this.dom = document.createElement('div');
|
|
9
|
+
this.dom.className = resizableWrap;
|
|
10
|
+
this.table = this.dom.appendChild(document.createElement('table'));
|
|
11
|
+
if (node.attrs[colgroupAttr]) {
|
|
12
|
+
this.renderColgroup(node.attrs[colgroupAttr]);
|
|
13
|
+
}
|
|
14
|
+
const tBody = this.table.appendChild(document.createElement('tbody'));
|
|
15
|
+
this.setAttributes(this.table, node.attrs);
|
|
16
|
+
this.resizeHandles = handles.map(dir => {
|
|
17
|
+
const handle = document.createElement('span');
|
|
18
|
+
handle.className = resizeHandle + ' ' + dir;
|
|
19
|
+
handle.setAttribute(dataResizeDirTable, dir);
|
|
20
|
+
return handle;
|
|
21
|
+
});
|
|
22
|
+
this.contentDOM = tBody;
|
|
23
|
+
}
|
|
24
|
+
update(node) {
|
|
25
|
+
if (node.type !== this.node.type) {
|
|
26
|
+
return false;
|
|
27
|
+
}
|
|
28
|
+
const prev = this.node;
|
|
29
|
+
this.node = node;
|
|
30
|
+
if (node.attrs[resizableAttr]) {
|
|
31
|
+
this.resizeHandles.forEach(handle => {
|
|
32
|
+
this.dom.appendChild(handle);
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
Array.from(this.dom.children)
|
|
37
|
+
.filter((e) => e.classList.contains(resizeHandle))
|
|
38
|
+
.forEach((e) => e.remove());
|
|
39
|
+
}
|
|
40
|
+
this.setAttributes(this.table, node.attrs);
|
|
41
|
+
if (prev.attrs[colgroupAttr] !== node.attrs[colgroupAttr]) {
|
|
42
|
+
this.renderColgroup(node.attrs[colgroupAttr]);
|
|
43
|
+
}
|
|
44
|
+
return true;
|
|
45
|
+
}
|
|
46
|
+
ignoreMutation(record) {
|
|
47
|
+
const result = record.type === 'attributes' &&
|
|
48
|
+
(record.target === this.table ||
|
|
49
|
+
record.target.firstChild === this.table ||
|
|
50
|
+
(this.colgroup && this.colgroup.contains(record.target)));
|
|
51
|
+
return result;
|
|
52
|
+
}
|
|
53
|
+
destroy() {
|
|
54
|
+
this.node = undefined;
|
|
55
|
+
this.view = undefined;
|
|
56
|
+
this.table = undefined;
|
|
57
|
+
this.colgroup = undefined;
|
|
58
|
+
this.resizeHandles = undefined;
|
|
59
|
+
}
|
|
60
|
+
renderColgroup(colgroupStr) {
|
|
61
|
+
if (this.table && this.table.firstChild && this.table.firstChild.nodeName === 'COLGROUP') {
|
|
62
|
+
this.table.removeChild(this.table.firstChild);
|
|
63
|
+
}
|
|
64
|
+
if (colgroupStr) {
|
|
65
|
+
this.colgroup = parseStrColgroup(colgroupStr);
|
|
66
|
+
this.table.insertBefore(this.colgroup, this.table.firstChild);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
setAttributes(table, attrs) {
|
|
70
|
+
const skip = [colgroupAttr, resizableAttr];
|
|
71
|
+
for (let attrName in attrs) {
|
|
72
|
+
if (attrName && skip.indexOf(attrName) === -1) {
|
|
73
|
+
const current = table.getAttribute(attrName);
|
|
74
|
+
const next = attrs[attrName];
|
|
75
|
+
if (next && next !== current) {
|
|
76
|
+
table.setAttribute(attrName, next);
|
|
77
|
+
}
|
|
78
|
+
else if (!next) {
|
|
79
|
+
table.removeAttribute(attrName);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { PluginKey } from 'prosemirror-state';
|
|
2
|
+
import { changeStylesString } from '../../utils';
|
|
3
|
+
export const reAnyValue = /^.+$/;
|
|
4
|
+
export const parseStyle = (styleText) => {
|
|
5
|
+
const styles = (styleText || '').split(/\s*;\s*/).filter(Boolean).map(s => {
|
|
6
|
+
const nameValue = s.split(/\s*:\s*/);
|
|
7
|
+
return { [nameValue[0]]: nameValue[1] };
|
|
8
|
+
}).reduce((acc, val) => (Object.assign({}, acc, val)), {});
|
|
9
|
+
return styles;
|
|
10
|
+
};
|
|
11
|
+
export function setNodeStyle(nodeAttrs, styleType, value) {
|
|
12
|
+
let attrs;
|
|
13
|
+
if (new RegExp('[^-]?' + styleType + ':').test(nodeAttrs.style || '')) {
|
|
14
|
+
const { style } = changeStylesString(nodeAttrs.style || '', { style: styleType, value: reAnyValue, newValue: value });
|
|
15
|
+
attrs = Object.assign({}, nodeAttrs, { style });
|
|
16
|
+
}
|
|
17
|
+
else if (nodeAttrs.style) {
|
|
18
|
+
attrs = Object.assign({}, nodeAttrs, { style: nodeAttrs.style.replace(/;$/, '') + '; ' + styleType + ': ' + value + ';' });
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
attrs = Object.assign({}, nodeAttrs, { style: styleType + ': ' + value + ';' });
|
|
22
|
+
}
|
|
23
|
+
return attrs;
|
|
24
|
+
}
|
|
25
|
+
export const tableResizeKey = new PluginKey('table-resize');
|
|
26
|
+
export const tableColumnResizing = new PluginKey('table-column-resizing');
|
|
27
|
+
export const tableRowResizing = new PluginKey('table-row-resizing');
|
|
28
|
+
export function otherResizing(current, state) {
|
|
29
|
+
let activeResize = false;
|
|
30
|
+
activeResize = activeResize ||
|
|
31
|
+
(current !== tableResizeKey && Boolean(tableResizeKey.get(state)) && tableResizeKey.getState(state).dragging);
|
|
32
|
+
activeResize = activeResize ||
|
|
33
|
+
(current !== tableColumnResizing && Boolean(tableColumnResizing.get(state)) && tableColumnResizing.getState(state).dragging);
|
|
34
|
+
activeResize = activeResize ||
|
|
35
|
+
(current !== tableRowResizing && Boolean(tableRowResizing.get(state)) && tableRowResizing.getState(state).dragging);
|
|
36
|
+
return activeResize;
|
|
37
|
+
}
|
|
38
|
+
export function otherResizeHandle(current, state) {
|
|
39
|
+
let activeResize = false;
|
|
40
|
+
activeResize = activeResize ||
|
|
41
|
+
(current !== tableColumnResizing &&
|
|
42
|
+
Boolean(tableColumnResizing.get(state)) &&
|
|
43
|
+
tableColumnResizing.getState(state).activeHandle > -1);
|
|
44
|
+
activeResize = activeResize ||
|
|
45
|
+
(current !== tableRowResizing && Boolean(tableRowResizing.get(state)) && tableRowResizing.getState(state).activeHandle > -1);
|
|
46
|
+
return activeResize;
|
|
47
|
+
}
|
|
48
|
+
export function getTable(dom) {
|
|
49
|
+
if (dom && dom.firstChild && dom.firstChild.nodeName === 'TABLE') {
|
|
50
|
+
return dom.firstChild;
|
|
51
|
+
}
|
|
52
|
+
return dom;
|
|
53
|
+
}
|
|
54
|
+
export function domCellAround(target) {
|
|
55
|
+
while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
|
|
56
|
+
target = target.classList.contains('ProseMirror') ? null : target.parentNode;
|
|
57
|
+
}
|
|
58
|
+
return target;
|
|
59
|
+
}
|
|
60
|
+
export function cellIndexes(cell) {
|
|
61
|
+
const row = cell.parentNode;
|
|
62
|
+
return {
|
|
63
|
+
cellIndex: cell.cellIndex,
|
|
64
|
+
rowIndex: row.rowIndex
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
export function parentNode(pos, predicate) {
|
|
68
|
+
for (let depth = pos.depth; depth > 0; depth--) {
|
|
69
|
+
let node = pos.node(depth);
|
|
70
|
+
if (predicate(node)) {
|
|
71
|
+
return { node, depth };
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
return null;
|
|
75
|
+
}
|
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
export declare const rowTypeAttr = "k-parent-node";
|
|
2
2
|
export declare const colgroupAttr = "k-colgroup-data";
|
|
3
|
+
export declare const resizableAttr = "resizable-node";
|
|
4
|
+
export declare const resizableWrap = "k-editor-resize-wrap-element";
|
|
5
|
+
export declare const resizeHandle = "k-editor-resize-handle";
|
|
6
|
+
export declare const dataResizeDirTable = "data-direction";
|
|
7
|
+
export declare const dataResizeDirImage = "data-direction-image";
|
|
@@ -2,3 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.rowTypeAttr = 'k-parent-node';
|
|
4
4
|
exports.colgroupAttr = 'k-colgroup-data';
|
|
5
|
+
exports.resizableAttr = 'resizable-node';
|
|
6
|
+
exports.resizableWrap = 'k-editor-resize-wrap-element';
|
|
7
|
+
exports.resizeHandle = 'k-editor-resize-handle';
|
|
8
|
+
exports.dataResizeDirTable = 'data-direction';
|
|
9
|
+
exports.dataResizeDirImage = 'data-direction-image';
|
|
@@ -112,18 +112,22 @@ var shouldSkipColgroup = function (node) {
|
|
|
112
112
|
}
|
|
113
113
|
return shouldSkip;
|
|
114
114
|
};
|
|
115
|
+
exports.parseStrColgroup = function (colgroup) {
|
|
116
|
+
var doc = source_1.domToPmDoc(source_1.htmlToFragment(colgroup), colgroupSchema, { preserveWhitespace: false });
|
|
117
|
+
var fragment = source_1.pmDocToFragment(doc);
|
|
118
|
+
var colgroupEl = fragment.firstChild;
|
|
119
|
+
return colgroupEl;
|
|
120
|
+
};
|
|
115
121
|
var tNodes = prosemirror_tables_1.tableNodes({ tableGroup: 'block', cellContent: 'block+', cellAttributes: cellAttributes });
|
|
116
122
|
tNodes.table_row.attrs = tslib_1.__assign({}, tNodes.table_row.attrs, defaultAttrs([constants_1.rowTypeAttr, 'style', 'class', 'id']));
|
|
117
123
|
tNodes.table_row.toDOM = function (node) { return ['tr', pmAttributes(node.attrs), 0]; };
|
|
118
124
|
tNodes.table_row.parseDOM = [{ tag: 'tr', getAttrs: domAttributes }];
|
|
119
|
-
tNodes.table.attrs = tslib_1.__assign({}, tNodes.table.attrs, defaultAttrs(['style', 'class', 'id', constants_1.colgroupAttr]));
|
|
125
|
+
tNodes.table.attrs = tslib_1.__assign({}, tNodes.table.attrs, defaultAttrs(['style', 'class', 'id', constants_1.colgroupAttr, constants_1.resizableAttr]));
|
|
120
126
|
tNodes.table.toDOM = function (node) {
|
|
121
127
|
var tableAttrs = hasAttrs(node.attrs) ? pmAttributes(node.attrs, constants_1.colgroupAttr) : {};
|
|
122
128
|
var colgroup = null;
|
|
123
129
|
if (node.attrs[constants_1.colgroupAttr] && !shouldSkipColgroup(node)) {
|
|
124
|
-
var
|
|
125
|
-
var fragment = source_1.pmDocToFragment(doc);
|
|
126
|
-
var colgroupEl = fragment.firstChild;
|
|
130
|
+
var colgroupEl = exports.parseStrColgroup(node.attrs[constants_1.colgroupAttr]);
|
|
127
131
|
if (colgroupEl) {
|
|
128
132
|
var cols = Array.from(colgroupEl.children).map(function (c) { return ['col', domAttributes(c)]; });
|
|
129
133
|
colgroup = [
|
package/dist/npm/main.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ export { spacesFix } from './plugins/spaces-fix';
|
|
|
26
26
|
export { textHighlight, textHighlightKey, InlineDecoration } from './plugins/highlight';
|
|
27
27
|
export { imageResizing, imageResizeKey, ImageResizeOptions } from './plugins/image-resize';
|
|
28
28
|
export { caretColor, caretColorKey } from './plugins/caret-color';
|
|
29
|
+
export { tableResizing } from './plugins/table-resize';
|
|
29
30
|
export * from 'prosemirror-commands';
|
|
30
31
|
export * from 'prosemirror-dropcursor';
|
|
31
32
|
export * from 'prosemirror-gapcursor';
|
package/dist/npm/main.js
CHANGED
|
@@ -120,6 +120,8 @@ exports.imageResizeKey = image_resize_1.imageResizeKey;
|
|
|
120
120
|
var caret_color_1 = require("./plugins/caret-color");
|
|
121
121
|
exports.caretColor = caret_color_1.caretColor;
|
|
122
122
|
exports.caretColorKey = caret_color_1.caretColorKey;
|
|
123
|
+
var table_resize_1 = require("./plugins/table-resize");
|
|
124
|
+
exports.tableResizing = table_resize_1.tableResizing;
|
|
123
125
|
// ProseMirror re-exports
|
|
124
126
|
tslib_1.__exportStar(require("prosemirror-commands"), exports);
|
|
125
127
|
tslib_1.__exportStar(require("prosemirror-dropcursor"), exports);
|
|
@@ -3,19 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
4
|
var prosemirror_state_1 = require("prosemirror-state");
|
|
5
5
|
var prosemirror_view_1 = require("prosemirror-view");
|
|
6
|
+
var constants_1 = require("../config/constants");
|
|
6
7
|
var utils_1 = require("../utils");
|
|
8
|
+
var resize_utils_1 = require("./resize-utils");
|
|
7
9
|
exports.imageResizeKey = new prosemirror_state_1.PluginKey('image-resize');
|
|
8
|
-
var directions = {
|
|
9
|
-
'southeast': { x: 1, y: 1 },
|
|
10
|
-
'east': { x: 1, y: 0 },
|
|
11
|
-
'south': { x: 0, y: 1 },
|
|
12
|
-
'north': { x: 0, y: -1 },
|
|
13
|
-
'west': { x: -1, y: 0 },
|
|
14
|
-
'southwest': { x: -1, y: 1 },
|
|
15
|
-
'northwest': { x: -1, y: -1 },
|
|
16
|
-
'northeast': { x: 1, y: -1 } // top right
|
|
17
|
-
};
|
|
18
|
-
var handles = Object.keys(directions);
|
|
19
10
|
var setSize = function (domNode, sizeType, value) {
|
|
20
11
|
domNode.style[sizeType] = value + 'px';
|
|
21
12
|
};
|
|
@@ -44,7 +35,7 @@ var handleMouseMove = function (view, event, options) {
|
|
|
44
35
|
return;
|
|
45
36
|
}
|
|
46
37
|
var img = view.nodeDOM(nodePosition);
|
|
47
|
-
var dir = directions[activeHandle];
|
|
38
|
+
var dir = resize_utils_1.directions[activeHandle];
|
|
48
39
|
var diffX = (event.clientX - dragging.startX) * dir.x;
|
|
49
40
|
var diffY = (event.clientY - dragging.startY) * dir.y;
|
|
50
41
|
var width = dir.x ? diffX + img.width : rect.width;
|
|
@@ -111,7 +102,7 @@ var handleMouseUp = function (view) {
|
|
|
111
102
|
};
|
|
112
103
|
var handleMouseDown = function (view, event, options) {
|
|
113
104
|
var target = event.target;
|
|
114
|
-
var activeHandle = target.getAttribute(
|
|
105
|
+
var activeHandle = target.getAttribute(constants_1.dataResizeDirImage);
|
|
115
106
|
if (!activeHandle) {
|
|
116
107
|
return false;
|
|
117
108
|
}
|
|
@@ -221,10 +212,10 @@ exports.imageResizing = function (options) {
|
|
|
221
212
|
wrapper.style.height = rect.height + 'px';
|
|
222
213
|
wrapper.style.top = rect.top + 'px';
|
|
223
214
|
wrapper.style.left = rect.left + 'px';
|
|
224
|
-
for (var i = 0; i < handles.length; i++) {
|
|
215
|
+
for (var i = 0; i < resize_utils_1.handles.length; i++) {
|
|
225
216
|
var dom = document.createElement('div');
|
|
226
|
-
dom.className = '
|
|
227
|
-
dom.setAttribute(
|
|
217
|
+
dom.className = constants_1.resizeHandle + ' ' + resize_utils_1.handles[i];
|
|
218
|
+
dom.setAttribute(constants_1.dataResizeDirImage, resize_utils_1.handles[i]);
|
|
228
219
|
wrapper.appendChild(dom);
|
|
229
220
|
}
|
|
230
221
|
return prosemirror_view_1.DecorationSet.create(state.doc, [prosemirror_view_1.Decoration.widget(state.selection.from + 1, wrapper)]);
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export declare const directions: {
|
|
2
|
+
'southeast': {
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
};
|
|
6
|
+
'east': {
|
|
7
|
+
x: number;
|
|
8
|
+
y: number;
|
|
9
|
+
};
|
|
10
|
+
'south': {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
};
|
|
14
|
+
'north': {
|
|
15
|
+
x: number;
|
|
16
|
+
y: number;
|
|
17
|
+
};
|
|
18
|
+
'west': {
|
|
19
|
+
x: number;
|
|
20
|
+
y: number;
|
|
21
|
+
};
|
|
22
|
+
'southwest': {
|
|
23
|
+
x: number;
|
|
24
|
+
y: number;
|
|
25
|
+
};
|
|
26
|
+
'northwest': {
|
|
27
|
+
x: number;
|
|
28
|
+
y: number;
|
|
29
|
+
};
|
|
30
|
+
'northeast': {
|
|
31
|
+
x: number;
|
|
32
|
+
y: number;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export declare const handles: string[];
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.directions = {
|
|
4
|
+
'southeast': { x: 1, y: 1 },
|
|
5
|
+
'east': { x: 1, y: 0 },
|
|
6
|
+
'south': { x: 0, y: 1 },
|
|
7
|
+
'north': { x: 0, y: -1 },
|
|
8
|
+
'west': { x: -1, y: 0 },
|
|
9
|
+
'southwest': { x: -1, y: 1 },
|
|
10
|
+
'northwest': { x: -1, y: -1 },
|
|
11
|
+
'northeast': { x: 1, y: -1 } // top right
|
|
12
|
+
};
|
|
13
|
+
exports.handles = Object.keys(exports.directions);
|