@atlaskit/editor-plugin-table 7.11.3 → 7.11.4
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/CHANGELOG.md +1726 -700
- package/dist/cjs/commands/column-resize.js +5 -1
- package/dist/cjs/nodeviews/TableComponent.js +31 -6
- package/dist/cjs/nodeviews/table.js +31 -14
- package/dist/cjs/plugin.js +8 -9
- package/dist/cjs/pm-plugins/drag-and-drop/plugin.js +6 -1
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +16 -10
- package/dist/cjs/pm-plugins/table-resizing/plugin.js +2 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +7 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +16 -11
- package/dist/cjs/pm-plugins/table-width.js +1 -5
- package/dist/cjs/pm-plugins/view-mode-sort/utils.js +37 -20
- package/dist/cjs/toolbar.js +12 -21
- package/dist/cjs/transforms/column-width.js +3 -0
- package/dist/cjs/ui/FloatingDragMenu/index.js +2 -5
- package/dist/cjs/ui/common-styles.js +8 -16
- package/dist/cjs/ui/ui-styles.js +18 -36
- package/dist/es2019/commands/column-resize.js +6 -2
- package/dist/es2019/nodeviews/TableComponent.js +33 -7
- package/dist/es2019/nodeviews/table.js +32 -15
- package/dist/es2019/plugin.js +8 -9
- package/dist/es2019/pm-plugins/drag-and-drop/plugin.js +6 -1
- package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +13 -7
- package/dist/es2019/pm-plugins/table-resizing/plugin.js +2 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +7 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +16 -11
- package/dist/es2019/pm-plugins/table-width.js +1 -5
- package/dist/es2019/pm-plugins/view-mode-sort/utils.js +36 -21
- package/dist/es2019/toolbar.js +7 -16
- package/dist/es2019/transforms/column-width.js +4 -1
- package/dist/es2019/ui/FloatingDragMenu/index.js +2 -5
- package/dist/es2019/ui/common-styles.js +18 -30
- package/dist/es2019/ui/ui-styles.js +88 -174
- package/dist/esm/commands/column-resize.js +5 -1
- package/dist/esm/nodeviews/TableComponent.js +31 -6
- package/dist/esm/nodeviews/table.js +31 -14
- package/dist/esm/plugin.js +8 -9
- package/dist/esm/pm-plugins/drag-and-drop/plugin.js +6 -1
- package/dist/esm/pm-plugins/table-resizing/event-handlers.js +16 -10
- package/dist/esm/pm-plugins/table-resizing/plugin.js +2 -2
- package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +7 -2
- package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +16 -11
- package/dist/esm/pm-plugins/table-width.js +1 -5
- package/dist/esm/pm-plugins/view-mode-sort/utils.js +37 -20
- package/dist/esm/toolbar.js +12 -21
- package/dist/esm/transforms/column-width.js +3 -0
- package/dist/esm/ui/FloatingDragMenu/index.js +2 -5
- package/dist/esm/ui/common-styles.js +8 -16
- package/dist/esm/ui/ui-styles.js +18 -36
- package/dist/types/pm-plugins/table-resizing/event-handlers.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/plugin.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/utils/scale-table.d.ts +3 -3
- package/dist/types/pm-plugins/table-width.d.ts +1 -1
- package/dist/types/pm-plugins/view-mode-sort/utils.d.ts +3 -1
- package/dist/types/ui/FloatingDragMenu/index.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/event-handlers.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/plugin.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/scale-table.d.ts +3 -3
- package/dist/types-ts4.5/pm-plugins/table-width.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/view-mode-sort/utils.d.ts +3 -1
- package/dist/types-ts4.5/ui/FloatingDragMenu/index.d.ts +2 -1
- package/package.json +2 -5
- package/src/commands/column-resize.ts +11 -2
- package/src/nodeviews/TableComponent.tsx +79 -9
- package/src/nodeviews/table.tsx +49 -26
- package/src/plugin.tsx +10 -4
- package/src/pm-plugins/drag-and-drop/plugin.ts +14 -1
- package/src/pm-plugins/table-resizing/event-handlers.ts +26 -4
- package/src/pm-plugins/table-resizing/plugin.ts +2 -0
- package/src/pm-plugins/table-resizing/utils/resize-state.ts +13 -2
- package/src/pm-plugins/table-resizing/utils/scale-table.ts +24 -10
- package/src/pm-plugins/table-width.ts +1 -3
- package/src/pm-plugins/view-mode-sort/utils.ts +49 -23
- package/src/toolbar.tsx +7 -11
- package/src/transforms/column-width.ts +8 -1
- package/src/ui/FloatingDragMenu/index.tsx +2 -3
- package/src/ui/common-styles.ts +18 -30
- package/src/ui/ui-styles.ts +92 -183
|
@@ -3,6 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
3
3
|
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
4
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
5
5
|
import { getCellsInRow, getSelectedCellInfo } from '@atlaskit/editor-tables/utils';
|
|
6
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
7
|
import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
|
|
7
8
|
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
8
9
|
import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
@@ -156,7 +157,11 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
|
|
|
156
157
|
var _getTablePluginState4 = getTablePluginState(editorView.state),
|
|
157
158
|
_getTablePluginState5 = _getTablePluginState4.isTableScalingEnabled,
|
|
158
159
|
isTableScalingEnabled = _getTablePluginState5 === void 0 ? false : _getTablePluginState5;
|
|
159
|
-
|
|
160
|
+
var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
|
|
161
|
+
if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
|
|
162
|
+
isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
|
|
163
|
+
}
|
|
164
|
+
insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable);
|
|
160
165
|
}
|
|
161
166
|
}
|
|
162
167
|
editorView.focus();
|
|
@@ -12,19 +12,16 @@ import { META_KEYS } from '../table-analytics';
|
|
|
12
12
|
import { evenColumns, setDragging, stopResizing } from './commands';
|
|
13
13
|
import { getPluginState } from './plugin-factory';
|
|
14
14
|
import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
|
|
15
|
-
export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
|
|
15
|
+
export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) {
|
|
16
16
|
var state = view.state,
|
|
17
17
|
dispatch = view.dispatch;
|
|
18
18
|
var editorDisabled = !view.editable;
|
|
19
19
|
var domAtPos = view.domAtPos.bind(view);
|
|
20
|
-
var _getTablePluginState = getTablePluginState(state),
|
|
21
|
-
_getTablePluginState$ = _getTablePluginState.isTableScalingEnabled,
|
|
22
|
-
isTableScalingEnabled = _getTablePluginState$ === void 0 ? false : _getTablePluginState$;
|
|
23
20
|
if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
|
|
24
21
|
return false;
|
|
25
22
|
}
|
|
26
|
-
var
|
|
27
|
-
isKeyboardResize =
|
|
23
|
+
var _getTablePluginState = getTablePluginState(state),
|
|
24
|
+
isKeyboardResize = _getTablePluginState.isKeyboardResize;
|
|
28
25
|
event.preventDefault();
|
|
29
26
|
var tr = view.state.tr;
|
|
30
27
|
tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
|
|
@@ -50,6 +47,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
50
47
|
getEditorContainerWidth: getEditorContainerWidth
|
|
51
48
|
});
|
|
52
49
|
var shouldScale = tableDepth === 0 && isTableScalingEnabled;
|
|
50
|
+
if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
|
|
51
|
+
shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
|
|
52
|
+
}
|
|
53
53
|
var resizeState = getResizeState({
|
|
54
54
|
minWidth: tableCellMinWidth,
|
|
55
55
|
maxSize: maxSize,
|
|
@@ -86,8 +86,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
86
86
|
var _getPluginState = getPluginState(state),
|
|
87
87
|
dragging = _getPluginState.dragging,
|
|
88
88
|
resizeHandlePos = _getPluginState.resizeHandlePos;
|
|
89
|
-
var
|
|
90
|
-
isTableHovered =
|
|
89
|
+
var _getTablePluginState2 = getTablePluginState(state),
|
|
90
|
+
isTableHovered = _getTablePluginState2.isTableHovered;
|
|
91
91
|
if (resizeHandlePos === null) {
|
|
92
92
|
return stopResizing()(state, dispatch);
|
|
93
93
|
}
|
|
@@ -132,6 +132,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
132
132
|
// only selected (or selected - 1) columns should be distributed
|
|
133
133
|
var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
|
|
134
134
|
var _shouldScale = tableDepth === 0 && isTableScalingEnabled;
|
|
135
|
+
if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
|
|
136
|
+
_shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
|
|
137
|
+
}
|
|
135
138
|
var newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
|
|
136
139
|
var resizedDelta = clientX - startX;
|
|
137
140
|
tr = updateColumnWidths(newResizeState, table, start)(tr);
|
|
@@ -191,8 +194,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
191
194
|
var _getPluginState2 = getPluginState(state),
|
|
192
195
|
dragging = _getPluginState2.dragging,
|
|
193
196
|
resizeHandlePos = _getPluginState2.resizeHandlePos;
|
|
194
|
-
var
|
|
195
|
-
isTableHovered =
|
|
197
|
+
var _getTablePluginState3 = getTablePluginState(state),
|
|
198
|
+
isTableHovered = _getTablePluginState3.isTableHovered;
|
|
196
199
|
if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered && getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
197
200
|
return finish(event);
|
|
198
201
|
}
|
|
@@ -203,6 +206,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
203
206
|
var map = TableMap.get(table);
|
|
204
207
|
var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
|
|
205
208
|
var shouldScale = tableDepth === 0 && isTableScalingEnabled;
|
|
209
|
+
if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
|
|
210
|
+
shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
|
|
211
|
+
}
|
|
206
212
|
resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
|
|
207
213
|
updateControls()(state);
|
|
208
214
|
}
|
|
@@ -9,7 +9,7 @@ import { handleMouseDown } from './event-handlers';
|
|
|
9
9
|
import { createPluginState, getPluginState } from './plugin-factory';
|
|
10
10
|
import { pluginKey } from './plugin-key';
|
|
11
11
|
import { getResizeCellPos } from './utils';
|
|
12
|
-
export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
|
|
12
|
+
export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled) {
|
|
13
13
|
var _ref$lastColumnResiza = _ref.lastColumnResizable,
|
|
14
14
|
lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
|
|
15
15
|
return new SafePlugin({
|
|
@@ -49,7 +49,7 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
|
|
52
|
-
if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
|
|
52
|
+
if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI)) {
|
|
53
53
|
var _state = view.state,
|
|
54
54
|
_dispatch = view.dispatch;
|
|
55
55
|
return setResizeHandlePos(resizeHandlePos)(_state, _dispatch);
|
|
@@ -326,14 +326,19 @@ export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFrom
|
|
|
326
326
|
layout: layout,
|
|
327
327
|
getEditorContainerWidth: getEditorContainerWidth
|
|
328
328
|
});
|
|
329
|
-
var resizeState
|
|
329
|
+
var resizeState;
|
|
330
|
+
var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
|
|
331
|
+
if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
|
|
332
|
+
isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
|
|
333
|
+
}
|
|
334
|
+
resizeState = getResizeState({
|
|
330
335
|
minWidth: tableCellMinWidth,
|
|
331
336
|
maxSize: maxSize,
|
|
332
337
|
table: table.node,
|
|
333
338
|
tableRef: tableRef,
|
|
334
339
|
start: table.start,
|
|
335
340
|
domAtPos: domAtPos,
|
|
336
|
-
isTableScalingEnabled:
|
|
341
|
+
isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
|
|
337
342
|
});
|
|
338
343
|
var newResizeState = evenSelectedColumnsWidths(resizeState, rect);
|
|
339
344
|
var widthsBefore = resizeState.widths;
|
|
@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
5
5
|
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
6
6
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
7
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
8
|
import { updateColumnWidths } from '../../../transforms';
|
|
8
9
|
import { getTableWidth } from '../../../utils';
|
|
9
10
|
import { getLayoutSize } from '../utils/misc';
|
|
@@ -14,7 +15,7 @@ import { syncStickyRowToTable } from './dom';
|
|
|
14
15
|
// Base function to trigger the actual scale on a table node.
|
|
15
16
|
// Will only resize/scale if a table has been previously resized.
|
|
16
17
|
export var scale = function scale(tableRef, options, domAtPos) {
|
|
17
|
-
var
|
|
18
|
+
var isTableScalingEnabledOnCurrentTable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
18
19
|
var node = options.node,
|
|
19
20
|
containerWidth = options.containerWidth,
|
|
20
21
|
previousContainerWidth = options.previousContainerWidth,
|
|
@@ -50,12 +51,12 @@ export var scale = function scale(tableRef, options, domAtPos) {
|
|
|
50
51
|
tableRef: tableRef,
|
|
51
52
|
start: start,
|
|
52
53
|
domAtPos: domAtPos,
|
|
53
|
-
isTableScalingEnabled:
|
|
54
|
+
isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
|
|
54
55
|
});
|
|
55
56
|
return scaleTableTo(resizeState, newWidth);
|
|
56
57
|
};
|
|
57
58
|
export var scaleWithParent = function scaleWithParent(tableRef, parentWidth, table, start, domAtPos) {
|
|
58
|
-
var
|
|
59
|
+
var isTableScalingEnabledOnCurrentTable = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
59
60
|
var resizeState = getResizeState({
|
|
60
61
|
minWidth: tableCellMinWidth,
|
|
61
62
|
maxSize: parentWidth,
|
|
@@ -63,7 +64,7 @@ export var scaleWithParent = function scaleWithParent(tableRef, parentWidth, tab
|
|
|
63
64
|
tableRef: tableRef,
|
|
64
65
|
start: start,
|
|
65
66
|
domAtPos: domAtPos,
|
|
66
|
-
isTableScalingEnabled:
|
|
67
|
+
isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
|
|
67
68
|
});
|
|
68
69
|
if (table.attrs.isNumberColumnEnabled) {
|
|
69
70
|
parentWidth -= akEditorTableNumberColumnWidth;
|
|
@@ -107,14 +108,18 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
|
|
|
107
108
|
var width = isNumberColumnEnabled ? parentWidth - akEditorTableNumberColumnWidth : parentWidth;
|
|
108
109
|
tableRef.style.width = "".concat(width, "px");
|
|
109
110
|
}
|
|
110
|
-
|
|
111
|
+
var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
|
|
112
|
+
if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
|
|
113
|
+
isTableScalingEnabledOnCurrentTable = isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
|
|
114
|
+
}
|
|
111
115
|
// If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
|
|
112
116
|
// If we are scaling the table down with isTableScalingEnabled, the colgroup widths may be scaled to a value that is not 48px.
|
|
113
|
-
if (!hasTableBeenResized(node) && !
|
|
117
|
+
if (!hasTableBeenResized(node) && !isTableScalingEnabledOnCurrentTable) {
|
|
114
118
|
syncStickyRowToTable(tableRef);
|
|
115
119
|
return;
|
|
116
120
|
}
|
|
117
|
-
var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false)
|
|
121
|
+
var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
|
|
122
|
+
: scale(tableRef, options, domAtPos, false);
|
|
118
123
|
if (resizeState) {
|
|
119
124
|
updateColgroup(resizeState, tableRef, node, false);
|
|
120
125
|
}
|
|
@@ -122,7 +127,7 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
|
|
|
122
127
|
|
|
123
128
|
// Scale the table to meet new requirements (col, layout change etc)
|
|
124
129
|
export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
|
|
125
|
-
var
|
|
130
|
+
var isTableScalingEnabledOnCurrentTable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
126
131
|
return function (tr) {
|
|
127
132
|
if (!tableRef) {
|
|
128
133
|
return tr;
|
|
@@ -135,7 +140,7 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
|
|
|
135
140
|
if (hasTableBeenResized(node) === false) {
|
|
136
141
|
// If its not a re-sized table, we still want to re-create cols
|
|
137
142
|
// To force reflow of columns upon delete.
|
|
138
|
-
if (!
|
|
143
|
+
if (!isTableScalingEnabledOnCurrentTable) {
|
|
139
144
|
insertColgroupFromNode(tableRef, node);
|
|
140
145
|
}
|
|
141
146
|
tr.setMeta('scrollIntoView', false);
|
|
@@ -143,9 +148,9 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
|
|
|
143
148
|
}
|
|
144
149
|
var resizeState;
|
|
145
150
|
if (parentWidth) {
|
|
146
|
-
resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos,
|
|
151
|
+
resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable);
|
|
147
152
|
} else {
|
|
148
|
-
resizeState = scale(tableRef, options, domAtPos,
|
|
153
|
+
resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable);
|
|
149
154
|
}
|
|
150
155
|
if (resizeState) {
|
|
151
156
|
tr = updateColumnWidths(resizeState, node, start)(tr);
|
|
@@ -16,10 +16,9 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
|
16
16
|
import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
|
|
17
17
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
18
18
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
19
|
-
import { getPluginState } from './plugin-factory';
|
|
20
19
|
import { TABLE_MAX_WIDTH } from './table-resizing/utils';
|
|
21
20
|
export var pluginKey = new PluginKey('tableWidthPlugin');
|
|
22
|
-
var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled) {
|
|
21
|
+
var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled) {
|
|
23
22
|
return new SafePlugin({
|
|
24
23
|
key: pluginKey,
|
|
25
24
|
state: {
|
|
@@ -86,9 +85,6 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
|
|
|
86
85
|
var referentialityTr = transactions.find(function (tr) {
|
|
87
86
|
return tr.getMeta('referentialityTableInserted');
|
|
88
87
|
});
|
|
89
|
-
var _getPluginState = getPluginState(newState),
|
|
90
|
-
_getPluginState$isTab = _getPluginState.isTableScalingEnabled,
|
|
91
|
-
isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
|
|
92
88
|
var shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
|
|
93
89
|
if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
|
|
94
90
|
return null;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import { SortOrder } from '@atlaskit/editor-common/types';
|
|
4
|
+
import { convertProsemirrorTableNodeToArrayOfRows, createCompareNodes } from '@atlaskit/editor-common/utils';
|
|
4
5
|
import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
|
|
5
6
|
export var unsort = function unsort(oldOrder, tableElement) {
|
|
6
7
|
var rows = tableElement.querySelectorAll('tr');
|
|
@@ -12,44 +13,60 @@ export var unsort = function unsort(oldOrder, tableElement) {
|
|
|
12
13
|
tbody === null || tbody === void 0 || tbody.appendChild(rows[item.index + 1]);
|
|
13
14
|
});
|
|
14
15
|
};
|
|
16
|
+
export var getSortOrderFromTable = function getSortOrderFromTable(tableNode, sortIndex, direction) {
|
|
17
|
+
var tableArray = convertProsemirrorTableNodeToArrayOfRows(tableNode);
|
|
18
|
+
tableArray.shift(); // remove header row
|
|
15
19
|
|
|
16
|
-
//
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
strings.push(((_tr$querySelectorAll$ = tr.querySelectorAll('td')[sortIndex]) === null || _tr$querySelectorAll$ === void 0 ? void 0 : _tr$querySelectorAll$.textContent) || '');
|
|
20
|
+
// Keep track of the origin row index
|
|
21
|
+
var tableArrayWithIndex = tableArray.map(function (node, index) {
|
|
22
|
+
return {
|
|
23
|
+
node: node,
|
|
24
|
+
originalIndex: index
|
|
25
|
+
};
|
|
23
26
|
});
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
var compareNodesInOrder = createCompareNodes({
|
|
28
|
+
// TODO - add inline card support
|
|
29
|
+
getInlineCardTextFromStore: function getInlineCardTextFromStore() {
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
}, direction);
|
|
33
|
+
var order = tableArrayWithIndex.sort(function (a, b) {
|
|
34
|
+
return compareNodesInOrder(a.node[sortIndex], b.node[sortIndex]);
|
|
35
|
+
}).map(function (tableRow, index) {
|
|
28
36
|
return {
|
|
29
|
-
value:
|
|
37
|
+
value: tableRow.originalIndex,
|
|
30
38
|
index: index
|
|
31
39
|
};
|
|
32
40
|
});
|
|
33
|
-
|
|
34
|
-
|
|
41
|
+
return [
|
|
42
|
+
// Ensures the first tr is always first in the order
|
|
43
|
+
{
|
|
35
44
|
value: -1,
|
|
36
45
|
index: -1
|
|
37
46
|
}].concat(_toConsumableArray(order));
|
|
38
47
|
};
|
|
39
48
|
export var toggleSort = function toggleSort(view, event, pluginState) {
|
|
40
|
-
var _target$closest;
|
|
49
|
+
var _target$closest, _tableNode$type;
|
|
41
50
|
var target = event.target;
|
|
51
|
+
if (!(target instanceof HTMLElement)) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
42
54
|
var widget = target.closest(".".concat(SORTING_ICON_CLASS_NAME));
|
|
43
55
|
if (widget !== null && widget !== void 0 && widget.classList.contains(IS_DISABLED_CLASS_NAME) || !widget) {
|
|
44
56
|
return;
|
|
45
57
|
}
|
|
46
|
-
var
|
|
58
|
+
var dataSortIndex = target === null || target === void 0 || (_target$closest = target.closest('.ProseMirror-widget')) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
|
|
47
59
|
var tr = view.state.tr;
|
|
48
60
|
var tableElement = target.closest('table');
|
|
49
|
-
if (!tableElement || !
|
|
61
|
+
if (!tableElement || !dataSortIndex) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
var tablePos = view.posAtDOM(tableElement, 0);
|
|
65
|
+
var tableNode = view.state.doc.nodeAt(tablePos - 1);
|
|
66
|
+
var tableId = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId;
|
|
67
|
+
if (!tableId || !tableNode || (tableNode === null || tableNode === void 0 || (_tableNode$type = tableNode.type) === null || _tableNode$type === void 0 ? void 0 : _tableNode$type.name) !== 'table') {
|
|
50
68
|
return;
|
|
51
69
|
}
|
|
52
|
-
var tableId = tableElement.getAttribute('data-table-local-id') || '';
|
|
53
70
|
var _ref = (pluginState === null || pluginState === void 0 ? void 0 : pluginState[tableId]) || {},
|
|
54
71
|
index = _ref.index,
|
|
55
72
|
direction = _ref.direction,
|
|
@@ -59,7 +76,7 @@ export var toggleSort = function toggleSort(view, event, pluginState) {
|
|
|
59
76
|
if (direction !== SortOrder.NO_ORDER && oldOrder !== undefined) {
|
|
60
77
|
unsort(oldOrder, tableElement);
|
|
61
78
|
}
|
|
62
|
-
var sortIndex = parseInt(
|
|
79
|
+
var sortIndex = parseInt(dataSortIndex);
|
|
63
80
|
if (sortIndex === index) {
|
|
64
81
|
switch (direction) {
|
|
65
82
|
case SortOrder.NO_ORDER:
|
|
@@ -75,7 +92,7 @@ export var toggleSort = function toggleSort(view, event, pluginState) {
|
|
|
75
92
|
} else {
|
|
76
93
|
direction = SortOrder.ASC; // default direction when a new index is clicked
|
|
77
94
|
}
|
|
78
|
-
var order = getSortOrderFromTable(
|
|
95
|
+
var order = getSortOrderFromTable(tableNode, sortIndex, direction);
|
|
79
96
|
if (direction === SortOrder.NO_ORDER) {
|
|
80
97
|
tr.setMeta('tableSortMeta', _defineProperty({}, tableId, {}));
|
|
81
98
|
} else {
|
package/dist/esm/toolbar.js
CHANGED
|
@@ -313,12 +313,9 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
|
|
|
313
313
|
|
|
314
314
|
// We don't want to show floating toolbar while resizing the table
|
|
315
315
|
var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
|
|
316
|
-
var
|
|
317
|
-
widthToWidest = pluginState.widthToWidest;
|
|
316
|
+
var widthToWidest = pluginState.widthToWidest;
|
|
318
317
|
var currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 || (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 || (_tableObject$node = _tableObject$node.attrs) === null || _tableObject$node === void 0 ? void 0 : _tableObject$node.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
|
|
319
|
-
if (isTableScalingEnabled &&
|
|
320
|
-
// TODO ED-21670: check if need options.isTableScalingEnabled
|
|
321
|
-
isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
|
|
318
|
+
if (options !== null && options !== void 0 && options.isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
|
|
322
319
|
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
323
320
|
stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
|
|
324
321
|
var nodeType = state.schema.nodes.table;
|
|
@@ -364,14 +361,10 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
|
|
|
364
361
|
if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
|
|
365
362
|
var _nodeType = state.schema.nodes.table;
|
|
366
363
|
var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
|
|
367
|
-
var _getPluginState2 = getPluginState(state),
|
|
368
|
-
_getPluginState2$isTa = _getPluginState2.isTableScalingEnabled,
|
|
369
|
-
_isTableScalingEnabled = _getPluginState2$isTa === void 0 ? false : _getPluginState2$isTa; // TODO ED-21670: check if we need options.isTableScalingEnabled and not an acutual state of displayNode attr on the table
|
|
370
|
-
|
|
371
364
|
var cellItems;
|
|
372
|
-
cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI,
|
|
365
|
+
cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
|
|
373
366
|
var columnSettingsItems;
|
|
374
|
-
columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options
|
|
367
|
+
columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
|
|
375
368
|
var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
|
|
376
369
|
|
|
377
370
|
// Check if we need to show confirm dialog for delete button
|
|
@@ -498,20 +491,19 @@ export var getDistributeConfig = function getDistributeConfig(getEditorContainer
|
|
|
498
491
|
|
|
499
492
|
// this create the button group for distribute column and also fixed column width
|
|
500
493
|
// fixed column button should be in this function call in the future
|
|
501
|
-
var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI
|
|
494
|
+
var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI) {
|
|
502
495
|
var _newResizeStateWithAn2, _pluginState$pluginCo3;
|
|
503
496
|
var formatMessage = _ref4.formatMessage;
|
|
504
|
-
var isTableScalingEnabled = arguments.length >
|
|
497
|
+
var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
505
498
|
var pluginState = getPluginState(editorState);
|
|
506
499
|
var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
|
|
507
500
|
if (!selectionOrTableRect || !editorView) {
|
|
508
501
|
return [];
|
|
509
502
|
}
|
|
510
|
-
var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled
|
|
511
|
-
);
|
|
503
|
+
var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
|
|
512
504
|
var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
|
|
513
505
|
var items = [];
|
|
514
|
-
var isTableScalingLockBtnEnabled =
|
|
506
|
+
var isTableScalingLockBtnEnabled = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
|
|
515
507
|
if (isTableScalingLockBtnEnabled) {
|
|
516
508
|
var _pluginState$tableNod;
|
|
517
509
|
var areColumnWidthsLocked = (pluginState === null || pluginState === void 0 || (_pluginState$tableNod = pluginState.tableNode) === null || _pluginState$tableNod === void 0 ? void 0 : _pluginState$tableNod.attrs.displayMode) === 'fixed';
|
|
@@ -538,8 +530,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
538
530
|
title: formatMessage(messages.distributeColumns),
|
|
539
531
|
icon: DistributeColumnIcon,
|
|
540
532
|
onClick: function onClick(state, dispatch, view) {
|
|
541
|
-
return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled
|
|
542
|
-
)(state, dispatch, view);
|
|
533
|
+
return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled)(state, dispatch, view);
|
|
543
534
|
},
|
|
544
535
|
disabled: !wouldChange
|
|
545
536
|
});
|
|
@@ -554,9 +545,9 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
554
545
|
var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI, getEditorView) {
|
|
555
546
|
var _node$attrs;
|
|
556
547
|
var formatMessage = _ref5.formatMessage;
|
|
557
|
-
var
|
|
558
|
-
targetCellPosition =
|
|
559
|
-
pluginConfig =
|
|
548
|
+
var _getPluginState2 = getPluginState(state),
|
|
549
|
+
targetCellPosition = _getPluginState2.targetCellPosition,
|
|
550
|
+
pluginConfig = _getPluginState2.pluginConfig;
|
|
560
551
|
if (!pluginConfig.allowBackgroundColor) {
|
|
561
552
|
return [];
|
|
562
553
|
}
|
|
@@ -113,6 +113,9 @@ export var rescaleColumns = function rescaleColumns() {
|
|
|
113
113
|
};
|
|
114
114
|
var tableDepth = view.state.doc.resolve(table.pos).depth;
|
|
115
115
|
var shouldScale = isTableScalingEnabled && tableDepth === 0;
|
|
116
|
+
if (shouldScale && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
|
|
117
|
+
shouldScale = newTable.attrs.displayMode !== 'fixed';
|
|
118
|
+
}
|
|
116
119
|
if (shouldScale) {
|
|
117
120
|
previousTableInfo = {
|
|
118
121
|
width: getTableElementWidth(table.node),
|
|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
3
3
|
import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
5
|
-
import { getPluginState } from '../../pm-plugins/plugin-factory';
|
|
6
5
|
import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
|
|
7
6
|
import DragMenu from './DragMenu';
|
|
8
7
|
var FloatingDragMenu = function FloatingDragMenu(_ref) {
|
|
@@ -18,7 +17,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
|
|
|
18
17
|
getEditorContainerWidth = _ref.getEditorContainerWidth,
|
|
19
18
|
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
|
|
20
19
|
stickyHeaders = _ref.stickyHeaders,
|
|
21
|
-
pluginConfig = _ref.pluginConfig
|
|
20
|
+
pluginConfig = _ref.pluginConfig,
|
|
21
|
+
isTableScalingEnabled = _ref.isTableScalingEnabled;
|
|
22
22
|
if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
|
|
23
23
|
return null;
|
|
24
24
|
}
|
|
@@ -28,9 +28,6 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
|
|
|
28
28
|
if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
|
|
29
29
|
return null;
|
|
30
30
|
}
|
|
31
|
-
var _getPluginState = getPluginState(editorView.state),
|
|
32
|
-
_getPluginState$isTab = _getPluginState.isTableScalingEnabled,
|
|
33
|
-
isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
|
|
34
31
|
return /*#__PURE__*/React.createElement(Popup, {
|
|
35
32
|
alignX: direction === 'row' ? 'right' : undefined,
|
|
36
33
|
alignY: direction === 'row' ? 'start' : undefined,
|