@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.
Files changed (47) 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 +5 -0
  4. package/dist/es/config/schema.js +9 -5
  5. package/dist/es/main.js +1 -0
  6. package/dist/es/plugins/image-resize.js +5 -14
  7. package/dist/es/plugins/resize-utils.js +11 -0
  8. package/dist/es/plugins/table-resize/column-resize.js +273 -0
  9. package/dist/es/plugins/table-resize/index.js +8 -0
  10. package/dist/es/plugins/table-resize/row-resize.js +230 -0
  11. package/dist/es/plugins/table-resize/table-resize.js +255 -0
  12. package/dist/es/plugins/table-resize/table-view.js +87 -0
  13. package/dist/es/plugins/table-resize/utils.js +77 -0
  14. package/dist/es2015/config/constants.js +5 -0
  15. package/dist/es2015/config/schema.js +11 -8
  16. package/dist/es2015/main.js +1 -0
  17. package/dist/es2015/plugins/image-resize.js +5 -14
  18. package/dist/es2015/plugins/resize-utils.js +11 -0
  19. package/dist/es2015/plugins/table-resize/column-resize.js +269 -0
  20. package/dist/es2015/plugins/table-resize/index.js +8 -0
  21. package/dist/es2015/plugins/table-resize/row-resize.js +226 -0
  22. package/dist/es2015/plugins/table-resize/table-resize.js +251 -0
  23. package/dist/es2015/plugins/table-resize/table-view.js +84 -0
  24. package/dist/es2015/plugins/table-resize/utils.js +75 -0
  25. package/dist/npm/config/constants.d.ts +5 -0
  26. package/dist/npm/config/constants.js +5 -0
  27. package/dist/npm/config/schema.d.ts +1 -0
  28. package/dist/npm/config/schema.js +8 -4
  29. package/dist/npm/main.d.ts +1 -0
  30. package/dist/npm/main.js +2 -0
  31. package/dist/npm/plugins/image-resize.js +7 -16
  32. package/dist/npm/plugins/resize-utils.d.ts +35 -0
  33. package/dist/npm/plugins/resize-utils.js +13 -0
  34. package/dist/npm/plugins/table-resize/column-resize.d.ts +2 -0
  35. package/dist/npm/plugins/table-resize/column-resize.js +276 -0
  36. package/dist/npm/plugins/table-resize/index.d.ts +1 -0
  37. package/dist/npm/plugins/table-resize/index.js +10 -0
  38. package/dist/npm/plugins/table-resize/row-resize.d.ts +2 -0
  39. package/dist/npm/plugins/table-resize/row-resize.js +233 -0
  40. package/dist/npm/plugins/table-resize/table-resize.d.ts +4 -0
  41. package/dist/npm/plugins/table-resize/table-resize.js +257 -0
  42. package/dist/npm/plugins/table-resize/table-view.d.ts +17 -0
  43. package/dist/npm/plugins/table-resize/table-view.js +89 -0
  44. package/dist/npm/plugins/table-resize/utils.d.ts +22 -0
  45. package/dist/npm/plugins/table-resize/utils.js +86 -0
  46. package/dist/systemjs/kendo-editor-common.js +1 -1
  47. 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';
@@ -2,6 +2,7 @@ import { NodeSpec, MarkSpec } from 'prosemirror-model';
2
2
  declare const marks: {
3
3
  [mark: string]: MarkSpec;
4
4
  };
5
+ export declare const parseStrColgroup: (colgroup: string) => HTMLTableColElement;
5
6
  declare const nodes: {
6
7
  [node: string]: NodeSpec;
7
8
  };
@@ -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 doc = source_1.domToPmDoc(source_1.htmlToFragment(node.attrs[constants_1.colgroupAttr]), colgroupSchema, { preserveWhitespace: false });
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 = [
@@ -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('data-direction');
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 = 'k-editor-resize-handle ' + handles[i];
227
- dom.setAttribute('data-direction', handles[i]);
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);
@@ -0,0 +1,2 @@
1
+ import { Plugin } from 'prosemirror-state';
2
+ export declare function columnResizing(): Plugin;