@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.
Files changed (36) hide show
  1. package/dist/cdn/js/kendo-editor-common.js +2 -2
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/config/constants.js +2 -1
  4. package/dist/es/config/schema.js +10 -6
  5. package/dist/es/plugins/image-resize.js +4 -14
  6. package/dist/es/plugins/resize-utils.js +11 -0
  7. package/dist/es/plugins/table-resize/column-resize.js +28 -49
  8. package/dist/es/plugins/table-resize/row-resize.js +40 -54
  9. package/dist/es/plugins/table-resize/table-resize.js +46 -67
  10. package/dist/es/plugins/table-resize/table-view.js +9 -9
  11. package/dist/es/plugins/table-resize/utils.js +26 -2
  12. package/dist/es2015/config/constants.js +2 -1
  13. package/dist/es2015/config/schema.js +6 -6
  14. package/dist/es2015/plugins/image-resize.js +4 -14
  15. package/dist/es2015/plugins/resize-utils.js +11 -0
  16. package/dist/es2015/plugins/table-resize/column-resize.js +28 -49
  17. package/dist/es2015/plugins/table-resize/row-resize.js +40 -54
  18. package/dist/es2015/plugins/table-resize/table-resize.js +45 -66
  19. package/dist/es2015/plugins/table-resize/table-view.js +9 -9
  20. package/dist/es2015/plugins/table-resize/utils.js +26 -2
  21. package/dist/npm/config/constants.d.ts +2 -1
  22. package/dist/npm/config/constants.js +2 -1
  23. package/dist/npm/config/schema.js +10 -6
  24. package/dist/npm/plugins/image-resize.js +6 -16
  25. package/dist/npm/plugins/resize-utils.d.ts +35 -0
  26. package/dist/npm/plugins/resize-utils.js +13 -0
  27. package/dist/npm/plugins/table-resize/column-resize.js +28 -49
  28. package/dist/npm/plugins/table-resize/row-resize.js +39 -53
  29. package/dist/npm/plugins/table-resize/table-resize.d.ts +2 -4
  30. package/dist/npm/plugins/table-resize/table-resize.js +45 -66
  31. package/dist/npm/plugins/table-resize/table-view.d.ts +7 -7
  32. package/dist/npm/plugins/table-resize/table-view.js +8 -8
  33. package/dist/npm/plugins/table-resize/utils.d.ts +10 -0
  34. package/dist/npm/plugins/table-resize/utils.js +29 -2
  35. package/dist/systemjs/kendo-editor-common.js +1 -1
  36. 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, dataDirection, resizableAttr } from '../../config/constants';
4
- import { getTable, parseStyle, setNodeStyle, tableResizeKey as key } from './utils';
5
- function parentNode(pos, predicate) {
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, options) {
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 resizedNode = getTable(view.nodeDOM(nodePosition));
58
- var rect = resizedNode.getBoundingClientRect();
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 nodeWidth = resizedNode.offsetWidth;
63
- var nodeHeight = resizedNode.offsetHeight;
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
- if (options.lockRatio && dir.x && dir.y) {
67
- var ratio = Math.min(width / nodeWidth, height / nodeHeight);
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
- setSize(resizedNode, 'width', width);
50
+ tableDom.style.width = width + 'px';
81
51
  }
82
52
  if (verticalDir[activeHandle]) {
83
- setSize(resizedNode, 'height', height);
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), tableWidth = _a.width, tableHeight = _a.height, colsWidth = _a.colsWidth;
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 / tableWidth) + '%';
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', (rows[index].offsetHeight * 100 / tableHeight) + '%'));
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 !== tableWidth + 'px') {
111
- tableAttrs = setNodeStyle(tableAttrs, 'width', tableWidth + 'px');
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', tableHeight + 'px');
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].offsetHeight + 'px'));
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].offsetWidth + 'px';
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 = table.offsetHeight; // Array.from(table.rows).reduce((acc, cur) => acc + cur.offsetHeight, 0);
153
- return { width: width, height: height, colsWidth: colsWidth, offsetWidth: table.offsetWidth };
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.height + 'px';
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, options) {
159
+ var handleMouseDown = function (view, event) {
187
160
  var target = event.target;
188
- var activeHandle = target.getAttribute(dataDirection);
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, options);
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', lockRatio: false }; }
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 node = parentNode(selection.$from, function (n) { return n.type === nodeType; });
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 && !prevSelected) {
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, (_d = {}, _d[resizableAttr] = false, _d))));
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, options);
255
+ return handleMouseDown(view, event);
277
256
  }
278
257
  }
279
258
  }
@@ -1,6 +1,6 @@
1
- import { colgroupAttr, dataDirection, resizableAttr, resizableWrap, resizeHandle } from '../../config/constants';
1
+ import { colgroupAttr, dataResizeDirTable, resizableAttr, resizableWrap, resizeHandle } from '../../config/constants';
2
2
  import { parseStrColgroup } from '../../config/schema';
3
- var directions = ['northwest', 'north', 'northeast', 'southwest', 'south', 'southeast', 'west', 'east'];
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 = directions.map(function (dir) {
16
+ this.resizeHandles = handles.map(function (dir) {
17
17
  var handle = document.createElement('span');
18
18
  handle.className = resizeHandle + ' ' + dir;
19
- handle.setAttribute(dataDirection, dir);
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 = null;
56
- this.view = null;
57
- this.table = null;
58
- this.colgroup = null;
59
- this.resizeHandles = null;
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 && tableColumnResizing.get(state) && tableColumnResizing.getState(state).activeHandle > -1);
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 dataDirection = 'data-direction';
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 && attr !== exclude) {
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 { dataDirection, resizeHandle } from "../config/constants";
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(dataDirection);
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(dataDirection, handles[i]);
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, lastColumnResizable = true, handleWidth = 5, cellMinWidth = 25;
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, cellMinWidth, lastColumnResizable);
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
- return DecorationSet.empty;
47
- }
48
- let pluginState = key.getState(state);
49
- if (pluginState.activeHandle > -1) {
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 = null;
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, _cellMinWidth, lastColumnResizable) {
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
- cell = edgeCell(view, event, 'left');
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, 'right');
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 domCellAround(target) {
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 { pos } = found;
212
- let $cell = cellAround(view.state.doc.resolve(pos));
213
- if (!$cell) {
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
- if (side === 'right') {
217
- return $cell.pos;
218
- }
219
- let map = TableMap.get($cell.node(-1)), start = $cell.start(-1);
220
- let index = map.map.indexOf($cell.pos - start);
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;