@atlaskit/editor-plugin-table 7.5.3 → 7.5.5
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 +14 -0
- package/dist/cjs/commands/column-resize.js +3 -3
- package/dist/cjs/commands/delete.js +2 -2
- package/dist/cjs/commands/insert.js +15 -15
- package/dist/cjs/commands-with-analytics.js +7 -7
- package/dist/cjs/event-handlers.js +2 -2
- package/dist/cjs/nodeviews/TableComponent.js +46 -59
- package/dist/cjs/nodeviews/TableContainer.js +5 -5
- package/dist/cjs/nodeviews/TableResizer.js +12 -12
- package/dist/cjs/nodeviews/table.js +9 -9
- package/dist/cjs/plugin.js +58 -56
- package/dist/cjs/pm-plugins/drag-and-drop/plugin.js +13 -13
- package/dist/cjs/pm-plugins/keymap.js +6 -8
- package/dist/cjs/pm-plugins/main.js +4 -6
- package/dist/cjs/pm-plugins/sticky-headers/plugin.js +2 -3
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +12 -12
- package/dist/cjs/pm-plugins/table-resizing/utils/colgroup.js +2 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/consts.js +4 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/index.js +2 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/misc.js +3 -3
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js +3 -3
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +11 -12
- package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +13 -13
- package/dist/cjs/pm-plugins/table-width.js +6 -2
- package/dist/cjs/toolbar.js +21 -21
- package/dist/cjs/transforms/column-width.js +4 -4
- package/dist/cjs/transforms/delete-columns.js +2 -2
- package/dist/cjs/ui/ColumnResizeWidget/index.js +4 -5
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +53 -55
- package/dist/cjs/ui/FloatingContextualMenu/index.js +2 -4
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +2 -2
- package/dist/cjs/ui/FloatingDragMenu/index.js +6 -6
- package/dist/cjs/ui/FloatingInsertButton/index.js +6 -7
- package/dist/cjs/utils/create.js +2 -5
- package/dist/cjs/utils/drag-menu.js +4 -4
- package/dist/cjs/utils/guidelines.js +5 -2
- package/dist/cjs/utils/snapping.js +14 -1
- package/dist/es2019/commands/column-resize.js +3 -3
- package/dist/es2019/commands/delete.js +2 -2
- package/dist/es2019/commands/insert.js +12 -12
- package/dist/es2019/commands-with-analytics.js +6 -6
- package/dist/es2019/event-handlers.js +2 -2
- package/dist/es2019/nodeviews/TableComponent.js +25 -36
- package/dist/es2019/nodeviews/TableContainer.js +6 -6
- package/dist/es2019/nodeviews/TableResizer.js +14 -14
- package/dist/es2019/nodeviews/table.js +9 -9
- package/dist/es2019/plugin.js +17 -17
- package/dist/es2019/pm-plugins/drag-and-drop/plugin.js +6 -6
- package/dist/es2019/pm-plugins/keymap.js +5 -8
- package/dist/es2019/pm-plugins/main.js +3 -5
- package/dist/es2019/pm-plugins/sticky-headers/plugin.js +1 -1
- package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +5 -5
- package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js +2 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/consts.js +3 -1
- package/dist/es2019/pm-plugins/table-resizing/utils/index.js +1 -1
- package/dist/es2019/pm-plugins/table-resizing/utils/misc.js +2 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-column.js +3 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +12 -13
- package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +13 -13
- package/dist/es2019/pm-plugins/table-width.js +6 -2
- package/dist/es2019/toolbar.js +15 -15
- package/dist/es2019/transforms/column-width.js +5 -5
- package/dist/es2019/transforms/delete-columns.js +2 -2
- package/dist/es2019/ui/ColumnResizeWidget/index.js +0 -1
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +9 -12
- package/dist/es2019/ui/FloatingContextualMenu/index.js +2 -4
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +2 -2
- package/dist/es2019/ui/FloatingDragMenu/index.js +5 -5
- package/dist/es2019/ui/FloatingInsertButton/index.js +5 -6
- package/dist/es2019/utils/create.js +2 -5
- package/dist/es2019/utils/drag-menu.js +4 -4
- package/dist/es2019/utils/guidelines.js +3 -2
- package/dist/es2019/utils/snapping.js +12 -1
- package/dist/esm/commands/column-resize.js +3 -3
- package/dist/esm/commands/delete.js +2 -2
- package/dist/esm/commands/insert.js +15 -15
- package/dist/esm/commands-with-analytics.js +7 -7
- package/dist/esm/event-handlers.js +2 -2
- package/dist/esm/nodeviews/TableComponent.js +45 -58
- package/dist/esm/nodeviews/TableContainer.js +6 -6
- package/dist/esm/nodeviews/TableResizer.js +14 -14
- package/dist/esm/nodeviews/table.js +9 -9
- package/dist/esm/plugin.js +58 -56
- package/dist/esm/pm-plugins/drag-and-drop/plugin.js +13 -13
- package/dist/esm/pm-plugins/keymap.js +6 -8
- package/dist/esm/pm-plugins/main.js +4 -6
- package/dist/esm/pm-plugins/sticky-headers/plugin.js +2 -3
- package/dist/esm/pm-plugins/table-resizing/event-handlers.js +12 -12
- package/dist/esm/pm-plugins/table-resizing/utils/colgroup.js +2 -2
- package/dist/esm/pm-plugins/table-resizing/utils/consts.js +3 -1
- package/dist/esm/pm-plugins/table-resizing/utils/index.js +1 -1
- package/dist/esm/pm-plugins/table-resizing/utils/misc.js +2 -2
- package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js +4 -3
- package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +13 -14
- package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +13 -13
- package/dist/esm/pm-plugins/table-width.js +6 -2
- package/dist/esm/toolbar.js +21 -21
- package/dist/esm/transforms/column-width.js +5 -5
- package/dist/esm/transforms/delete-columns.js +2 -2
- package/dist/esm/ui/ColumnResizeWidget/index.js +0 -1
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +53 -55
- package/dist/esm/ui/FloatingContextualMenu/index.js +2 -4
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +2 -2
- package/dist/esm/ui/FloatingDragMenu/index.js +6 -6
- package/dist/esm/ui/FloatingInsertButton/index.js +6 -7
- package/dist/esm/utils/create.js +2 -5
- package/dist/esm/utils/drag-menu.js +4 -4
- package/dist/esm/utils/guidelines.js +5 -2
- package/dist/esm/utils/snapping.js +14 -1
- package/dist/types/commands/column-resize.d.ts +1 -1
- package/dist/types/commands/delete.d.ts +1 -1
- package/dist/types/commands/insert.d.ts +7 -7
- package/dist/types/commands-with-analytics.d.ts +3 -3
- package/dist/types/event-handlers.d.ts +1 -1
- package/dist/types/nodeviews/TableComponent.d.ts +2 -3
- package/dist/types/nodeviews/TableContainer.d.ts +4 -4
- package/dist/types/nodeviews/TableResizer.d.ts +2 -2
- package/dist/types/nodeviews/table.d.ts +1 -1
- package/dist/types/nodeviews/types.d.ts +1 -0
- package/dist/types/plugin.d.ts +1 -0
- package/dist/types/pm-plugins/drag-and-drop/plugin.d.ts +1 -2
- package/dist/types/pm-plugins/keymap.d.ts +2 -2
- package/dist/types/pm-plugins/main.d.ts +1 -1
- package/dist/types/pm-plugins/sticky-headers/plugin.d.ts +2 -3
- package/dist/types/pm-plugins/table-resizing/utils/colgroup.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/utils/consts.d.ts +1 -0
- package/dist/types/pm-plugins/table-resizing/utils/index.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/utils/misc.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/utils/resize-column.d.ts +2 -1
- package/dist/types/pm-plugins/table-resizing/utils/resize-state.d.ts +4 -4
- package/dist/types/pm-plugins/table-resizing/utils/scale-table.d.ts +4 -4
- package/dist/types/pm-plugins/table-width.d.ts +1 -2
- package/dist/types/toolbar.d.ts +2 -2
- package/dist/types/transforms/column-width.d.ts +1 -1
- package/dist/types/transforms/delete-columns.d.ts +1 -1
- package/dist/types/types.d.ts +1 -0
- package/dist/types/ui/ColumnResizeWidget/index.d.ts +2 -2
- package/dist/types/ui/FloatingContextualMenu/index.d.ts +1 -1
- package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts +2 -2
- package/dist/types/ui/FloatingDragMenu/index.d.ts +2 -3
- package/dist/types/ui/FloatingInsertButton/index.d.ts +1 -2
- package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts +2 -2
- package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts +2 -2
- package/dist/types/ui/TableFloatingColumnControls/index.d.ts +2 -2
- package/dist/types/utils/create.d.ts +1 -2
- package/dist/types/utils/drag-menu.d.ts +2 -2
- package/dist/types/utils/guidelines.d.ts +1 -0
- package/dist/types/utils/snapping.d.ts +2 -0
- package/dist/types-ts4.5/commands/column-resize.d.ts +1 -1
- package/dist/types-ts4.5/commands/delete.d.ts +1 -1
- package/dist/types-ts4.5/commands/insert.d.ts +7 -7
- package/dist/types-ts4.5/commands-with-analytics.d.ts +3 -3
- package/dist/types-ts4.5/event-handlers.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/TableComponent.d.ts +2 -3
- package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +4 -4
- package/dist/types-ts4.5/nodeviews/TableResizer.d.ts +2 -2
- package/dist/types-ts4.5/nodeviews/table.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/types.d.ts +1 -0
- package/dist/types-ts4.5/plugin.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/drag-and-drop/plugin.d.ts +1 -2
- package/dist/types-ts4.5/pm-plugins/keymap.d.ts +2 -2
- package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/sticky-headers/plugin.d.ts +2 -3
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/colgroup.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/consts.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/misc.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-column.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-state.d.ts +4 -4
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/scale-table.d.ts +4 -4
- package/dist/types-ts4.5/pm-plugins/table-width.d.ts +1 -2
- package/dist/types-ts4.5/toolbar.d.ts +2 -2
- package/dist/types-ts4.5/transforms/column-width.d.ts +1 -1
- package/dist/types-ts4.5/transforms/delete-columns.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +1 -0
- package/dist/types-ts4.5/ui/ColumnResizeWidget/index.d.ts +2 -2
- package/dist/types-ts4.5/ui/FloatingContextualMenu/index.d.ts +1 -1
- package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts +2 -2
- package/dist/types-ts4.5/ui/FloatingDragMenu/index.d.ts +2 -3
- package/dist/types-ts4.5/ui/FloatingInsertButton/index.d.ts +1 -2
- package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts +2 -2
- package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts +2 -2
- package/dist/types-ts4.5/ui/TableFloatingColumnControls/index.d.ts +2 -2
- package/dist/types-ts4.5/utils/create.d.ts +1 -2
- package/dist/types-ts4.5/utils/drag-menu.d.ts +2 -2
- package/dist/types-ts4.5/utils/guidelines.d.ts +1 -0
- package/dist/types-ts4.5/utils/snapping.d.ts +2 -0
- package/package.json +2 -2
- package/src/commands/column-resize.ts +4 -3
- package/src/commands/delete.ts +2 -2
- package/src/commands/insert.ts +15 -27
- package/src/commands-with-analytics.ts +6 -9
- package/src/event-handlers.ts +2 -2
- package/src/nodeviews/TableComponent.tsx +31 -46
- package/src/nodeviews/TableContainer.tsx +16 -7
- package/src/nodeviews/TableResizer.tsx +44 -24
- package/src/nodeviews/table.tsx +6 -5
- package/src/nodeviews/types.ts +1 -0
- package/src/plugin.tsx +12 -28
- package/src/pm-plugins/drag-and-drop/plugin.ts +10 -15
- package/src/pm-plugins/keymap.ts +6 -13
- package/src/pm-plugins/main.ts +3 -3
- package/src/pm-plugins/sticky-headers/plugin.ts +2 -11
- package/src/pm-plugins/table-resizing/event-handlers.ts +6 -4
- package/src/pm-plugins/table-resizing/utils/colgroup.ts +2 -2
- package/src/pm-plugins/table-resizing/utils/consts.ts +2 -0
- package/src/pm-plugins/table-resizing/utils/index.ts +1 -1
- package/src/pm-plugins/table-resizing/utils/misc.ts +2 -2
- package/src/pm-plugins/table-resizing/utils/resize-column.ts +5 -2
- package/src/pm-plugins/table-resizing/utils/resize-state.ts +18 -13
- package/src/pm-plugins/table-resizing/utils/scale-table.ts +14 -14
- package/src/pm-plugins/table-width.ts +4 -6
- package/src/toolbar.tsx +16 -19
- package/src/transforms/column-width.ts +7 -6
- package/src/transforms/delete-columns.ts +2 -2
- package/src/types.ts +1 -0
- package/src/ui/ColumnResizeWidget/index.tsx +2 -4
- package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +11 -16
- package/src/ui/FloatingContextualMenu/index.tsx +0 -2
- package/src/ui/FloatingDragMenu/DragMenu.tsx +3 -3
- package/src/ui/FloatingDragMenu/index.tsx +4 -8
- package/src/ui/FloatingInsertButton/index.tsx +11 -22
- package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx +2 -2
- package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx +2 -2
- package/src/ui/TableFloatingColumnControls/index.tsx +2 -2
- package/src/utils/create.ts +2 -5
- package/src/utils/drag-menu.ts +8 -13
- package/src/utils/guidelines.ts +12 -1
- package/src/utils/snapping.ts +36 -0
|
@@ -24,8 +24,8 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
|
|
|
24
24
|
tableRef = _ref.tableRef,
|
|
25
25
|
start = _ref.start,
|
|
26
26
|
domAtPos = _ref.domAtPos,
|
|
27
|
-
_ref$
|
|
28
|
-
|
|
27
|
+
_ref$isTableScalingEn = _ref.isTableScalingEnabled,
|
|
28
|
+
isTableScalingEnabled = _ref$isTableScalingEn === void 0 ? false : _ref$isTableScalingEn;
|
|
29
29
|
// If the table has been resized, we can use the column widths from the table node
|
|
30
30
|
if ((0, _colgroup.hasTableBeenResized)(table)) {
|
|
31
31
|
var _cols = (0, _utils.calcTableColumnWidths)(table).map(function (width, index) {
|
|
@@ -50,19 +50,19 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
|
|
|
50
50
|
overflow: _overflow
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
|
-
var shouldReinsertColgroup = !
|
|
53
|
+
var shouldReinsertColgroup = !isTableScalingEnabled;
|
|
54
54
|
|
|
55
55
|
// Getting the resize state from DOM
|
|
56
|
-
var colgroupChildren = (0, _colgroup.insertColgroupFromNode)(tableRef, table,
|
|
56
|
+
var colgroupChildren = (0, _colgroup.insertColgroupFromNode)(tableRef, table, isTableScalingEnabled, shouldReinsertColgroup // don't reinsert colgroup when preserving table width - this causes widths to jump
|
|
57
57
|
);
|
|
58
58
|
var cols = Array.from(colgroupChildren).map(function (_, index) {
|
|
59
59
|
// If the table hasn't been resized and we have a table width attribute, we can use it
|
|
60
60
|
// to calculate the widths of the columns
|
|
61
|
-
if (
|
|
61
|
+
if (isTableScalingEnabled && table.attrs.width) {
|
|
62
62
|
return {
|
|
63
63
|
index: index,
|
|
64
64
|
width: table.attrs.width / colgroupChildren.length,
|
|
65
|
-
minWidth:
|
|
65
|
+
minWidth: _index.COLUMN_MIN_WIDTH
|
|
66
66
|
};
|
|
67
67
|
}
|
|
68
68
|
var cellsRefs = (0, _columnState.getCellsRefsInColumn)(index, table, start, domAtPos);
|
|
@@ -85,13 +85,12 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
|
|
|
85
85
|
};
|
|
86
86
|
|
|
87
87
|
// updates Colgroup DOM node with new widths
|
|
88
|
-
var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef,
|
|
88
|
+
var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled) {
|
|
89
89
|
var cols = tableRef.querySelectorAll('col');
|
|
90
90
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
|
|
91
91
|
var columnsCount = cols.length;
|
|
92
|
-
if (
|
|
93
|
-
var
|
|
94
|
-
var tableWidth = parseInt(((_tableRef$dataset = tableRef.dataset) === null || _tableRef$dataset === void 0 ? void 0 : _tableRef$dataset.tableWidth) || ''); // TODO - get this value from the table node, not the dom
|
|
92
|
+
if (isTableScalingEnabled && tableNode) {
|
|
93
|
+
var tableWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
|
|
95
94
|
if (tableWidth) {
|
|
96
95
|
var _tableRef$parentEleme;
|
|
97
96
|
var renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || _index.TABLE_DEFAULT_WIDTH;
|
|
@@ -307,7 +306,7 @@ var normaliseTableLayout = exports.normaliseTableLayout = function normaliseTabl
|
|
|
307
306
|
}
|
|
308
307
|
};
|
|
309
308
|
var getNewResizeStateFromSelectedColumns = exports.getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos, getEditorContainerWidth) {
|
|
310
|
-
var
|
|
309
|
+
var isTableScalingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
311
310
|
// Fail early so that we don't do complex calculations for no reason
|
|
312
311
|
var numColumnsSelected = rect.right - rect.left;
|
|
313
312
|
if (numColumnsSelected <= 1) {
|
|
@@ -345,7 +344,7 @@ var getNewResizeStateFromSelectedColumns = exports.getNewResizeStateFromSelected
|
|
|
345
344
|
tableRef: tableRef,
|
|
346
345
|
start: table.start,
|
|
347
346
|
domAtPos: domAtPos,
|
|
348
|
-
|
|
347
|
+
isTableScalingEnabled: isTableScalingEnabled
|
|
349
348
|
});
|
|
350
349
|
var newResizeState = evenSelectedColumnsWidths(resizeState, rect);
|
|
351
350
|
var widthsBefore = resizeState.widths;
|
|
@@ -23,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
23
23
|
// Base function to trigger the actual scale on a table node.
|
|
24
24
|
// Will only resize/scale if a table has been previously resized.
|
|
25
25
|
var scale = exports.scale = function scale(tableRef, options, domAtPos) {
|
|
26
|
-
var
|
|
26
|
+
var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
27
27
|
/**
|
|
28
28
|
* isBreakoutEnabled === true -> default center aligned
|
|
29
29
|
* isBreakoutEnabled === false -> full width mode
|
|
@@ -69,12 +69,12 @@ var scale = exports.scale = function scale(tableRef, options, domAtPos) {
|
|
|
69
69
|
tableRef: tableRef,
|
|
70
70
|
start: start,
|
|
71
71
|
domAtPos: domAtPos,
|
|
72
|
-
|
|
72
|
+
isTableScalingEnabled: isTableScalingEnabled
|
|
73
73
|
});
|
|
74
74
|
return scaleTableTo(resizeState, newWidth);
|
|
75
75
|
};
|
|
76
76
|
var scaleWithParent = exports.scaleWithParent = function scaleWithParent(tableRef, parentWidth, table, start, domAtPos) {
|
|
77
|
-
var
|
|
77
|
+
var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
78
78
|
var resizeState = (0, _resizeState.getResizeState)({
|
|
79
79
|
minWidth: _styles.tableCellMinWidth,
|
|
80
80
|
maxSize: parentWidth,
|
|
@@ -82,7 +82,7 @@ var scaleWithParent = exports.scaleWithParent = function scaleWithParent(tableRe
|
|
|
82
82
|
tableRef: tableRef,
|
|
83
83
|
start: start,
|
|
84
84
|
domAtPos: domAtPos,
|
|
85
|
-
|
|
85
|
+
isTableScalingEnabled: isTableScalingEnabled
|
|
86
86
|
});
|
|
87
87
|
if (table.attrs.isNumberColumnEnabled) {
|
|
88
88
|
parentWidth -= _editorSharedStyles.akEditorTableNumberColumnWidth;
|
|
@@ -114,7 +114,7 @@ function scaleTableTo(state, maxSize) {
|
|
|
114
114
|
return (0, _resizeState.adjustColumnsWidths)(newState, maxSize);
|
|
115
115
|
}
|
|
116
116
|
var previewScaleTable = exports.previewScaleTable = function previewScaleTable(tableRef, options, domAtPos) {
|
|
117
|
-
var
|
|
117
|
+
var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
118
118
|
var node = options.node,
|
|
119
119
|
start = options.start,
|
|
120
120
|
parentWidth = options.parentWidth;
|
|
@@ -128,20 +128,20 @@ var previewScaleTable = exports.previewScaleTable = function previewScaleTable(t
|
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
// If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
|
|
131
|
-
// If we are scaling the table down with
|
|
132
|
-
if (!(0, _colgroup.hasTableBeenResized)(node) && !
|
|
131
|
+
// If we are scaling the table down with isTableScalingEnabled, the colgroup widths may be scaled to a value that is not 48px.
|
|
132
|
+
if (!(0, _colgroup.hasTableBeenResized)(node) && !isTableScalingEnabled) {
|
|
133
133
|
(0, _dom.syncStickyRowToTable)(tableRef);
|
|
134
134
|
return;
|
|
135
135
|
}
|
|
136
|
-
var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos,
|
|
136
|
+
var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabled) : scale(tableRef, options, domAtPos, isTableScalingEnabled);
|
|
137
137
|
if (resizeState) {
|
|
138
|
-
(0, _resizeState.updateColgroup)(resizeState, tableRef,
|
|
138
|
+
(0, _resizeState.updateColgroup)(resizeState, tableRef, node, isTableScalingEnabled);
|
|
139
139
|
}
|
|
140
140
|
};
|
|
141
141
|
|
|
142
142
|
// Scale the table to meet new requirements (col, layout change etc)
|
|
143
143
|
var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, domAtPos) {
|
|
144
|
-
var
|
|
144
|
+
var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
145
145
|
return function (tr) {
|
|
146
146
|
if (!tableRef) {
|
|
147
147
|
return tr;
|
|
@@ -154,7 +154,7 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
|
|
|
154
154
|
if ((0, _colgroup.hasTableBeenResized)(node) === false) {
|
|
155
155
|
// If its not a re-sized table, we still want to re-create cols
|
|
156
156
|
// To force reflow of columns upon delete.
|
|
157
|
-
if (!
|
|
157
|
+
if (!isTableScalingEnabled) {
|
|
158
158
|
(0, _colgroup.insertColgroupFromNode)(tableRef, node);
|
|
159
159
|
}
|
|
160
160
|
tr.setMeta('scrollIntoView', false);
|
|
@@ -162,9 +162,9 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
|
|
|
162
162
|
}
|
|
163
163
|
var resizeState;
|
|
164
164
|
if (parentWidth) {
|
|
165
|
-
resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos,
|
|
165
|
+
resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabled);
|
|
166
166
|
} else {
|
|
167
|
-
resizeState = scale(tableRef, options, domAtPos,
|
|
167
|
+
resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabled);
|
|
168
168
|
}
|
|
169
169
|
if (resizeState) {
|
|
170
170
|
tr = (0, _transforms.updateColumnWidths)(resizeState, node, start)(tr);
|
|
@@ -14,6 +14,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
|
|
|
14
14
|
var _transform = require("@atlaskit/editor-prosemirror/transform");
|
|
15
15
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
16
16
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
17
|
+
var _pluginFactory = require("./plugin-factory");
|
|
17
18
|
var _utils2 = require("./table-resizing/utils");
|
|
18
19
|
var _excluded = ["width"];
|
|
19
20
|
/**
|
|
@@ -24,7 +25,7 @@ var _excluded = ["width"];
|
|
|
24
25
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
25
26
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
26
27
|
var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthPlugin');
|
|
27
|
-
var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled
|
|
28
|
+
var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled) {
|
|
28
29
|
return new _safePlugin.SafePlugin({
|
|
29
30
|
key: pluginKey,
|
|
30
31
|
state: {
|
|
@@ -91,7 +92,10 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
|
|
|
91
92
|
var referentialityTr = transactions.find(function (tr) {
|
|
92
93
|
return tr.getMeta('referentialityTableInserted');
|
|
93
94
|
});
|
|
94
|
-
var
|
|
95
|
+
var _getPluginState = (0, _pluginFactory.getPluginState)(newState),
|
|
96
|
+
_getPluginState$isTab = _getPluginState.isTableScalingEnabled,
|
|
97
|
+
isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
|
|
98
|
+
var shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
|
|
95
99
|
if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
|
|
96
100
|
return null;
|
|
97
101
|
}
|
package/dist/cjs/toolbar.js
CHANGED
|
@@ -96,7 +96,7 @@ var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMen
|
|
|
96
96
|
var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, editorView, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
|
|
97
97
|
var _pluginState$pluginCo, _pluginState$pluginCo2;
|
|
98
98
|
var formatMessage = _ref2.formatMessage;
|
|
99
|
-
var
|
|
99
|
+
var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
|
|
100
100
|
var top = initialSelectionRect.top,
|
|
101
101
|
bottom = initialSelectionRect.bottom,
|
|
102
102
|
right = initialSelectionRect.right,
|
|
@@ -111,7 +111,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
|
|
|
111
111
|
var selectionRect = getClosestSelectionRect(state);
|
|
112
112
|
var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
|
|
113
113
|
if (index) {
|
|
114
|
-
(0, _commandsWithAnalytics.insertColumnWithAnalytics)(
|
|
114
|
+
(0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
|
|
115
115
|
}
|
|
116
116
|
return true;
|
|
117
117
|
},
|
|
@@ -190,7 +190,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
|
|
|
190
190
|
}];
|
|
191
191
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
|
|
192
192
|
var _newResizeStateWithAn;
|
|
193
|
-
var newResizeStateWithAnalytics = editorView ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth,
|
|
193
|
+
var newResizeStateWithAnalytics = editorView ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled) : undefined;
|
|
194
194
|
var wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
|
|
195
195
|
var distributeColumnWidths = function distributeColumnWidths(state, dispatch) {
|
|
196
196
|
if (newResizeStateWithAnalytics) {
|
|
@@ -310,13 +310,13 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
|
|
|
310
310
|
if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
|
|
311
311
|
var nodeType = state.schema.nodes.table;
|
|
312
312
|
var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
|
|
313
|
-
var
|
|
314
|
-
|
|
315
|
-
|
|
313
|
+
var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
|
|
314
|
+
_getPluginState2$isTa = _getPluginState2.isTableScalingEnabled,
|
|
315
|
+
isTableScalingEnabled = _getPluginState2$isTa === void 0 ? false : _getPluginState2$isTa;
|
|
316
316
|
var cellItems;
|
|
317
|
-
cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(
|
|
317
|
+
cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
|
|
318
318
|
var columnSettingsItems;
|
|
319
|
-
columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI,
|
|
319
|
+
columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled) : [];
|
|
320
320
|
var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
|
|
321
321
|
|
|
322
322
|
// Check if we need to show confirm dialog for delete button
|
|
@@ -355,8 +355,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
|
|
|
355
355
|
}
|
|
356
356
|
return element;
|
|
357
357
|
};
|
|
358
|
-
var
|
|
359
|
-
stickyScrollbar =
|
|
358
|
+
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
359
|
+
stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
|
|
360
360
|
return {
|
|
361
361
|
title: 'Table floating controls',
|
|
362
362
|
getDomRef: getDomRef,
|
|
@@ -413,26 +413,26 @@ var separator = function separator(hidden) {
|
|
|
413
413
|
hidden: hidden
|
|
414
414
|
};
|
|
415
415
|
};
|
|
416
|
-
var getCellItems = function getCellItems(
|
|
416
|
+
var getCellItems = function getCellItems(state, view, _ref3, getEditorContainerWidth, editorAnalyticsAPI) {
|
|
417
417
|
var formatMessage = _ref3.formatMessage;
|
|
418
|
-
var
|
|
418
|
+
var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
419
419
|
var initialSelectionRect = getClosestSelectionRect(state);
|
|
420
420
|
if (initialSelectionRect) {
|
|
421
421
|
var cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
|
|
422
422
|
formatMessage: formatMessage
|
|
423
|
-
}, getEditorContainerWidth, editorAnalyticsAPI,
|
|
423
|
+
}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
|
|
424
424
|
return [cellOptions, separator(cellOptions.hidden)];
|
|
425
425
|
}
|
|
426
426
|
return [];
|
|
427
427
|
};
|
|
428
428
|
var getDistributeConfig = exports.getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI) {
|
|
429
|
-
var
|
|
429
|
+
var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
430
430
|
return function (state, dispatch, editorView) {
|
|
431
431
|
var selectionOrTableRect = getClosestSelectionOrTableRect(state);
|
|
432
432
|
if (!editorView || !selectionOrTableRect) {
|
|
433
433
|
return false;
|
|
434
434
|
}
|
|
435
|
-
var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth,
|
|
435
|
+
var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
|
|
436
436
|
if (newResizeStateWithAnalytics) {
|
|
437
437
|
(0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
|
|
438
438
|
return true;
|
|
@@ -446,13 +446,13 @@ var getDistributeConfig = exports.getDistributeConfig = function getDistributeCo
|
|
|
446
446
|
var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI) {
|
|
447
447
|
var _newResizeStateWithAn2, _pluginState$pluginCo3;
|
|
448
448
|
var formatMessage = _ref4.formatMessage;
|
|
449
|
-
var
|
|
449
|
+
var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
450
450
|
var pluginState = (0, _pluginFactory.getPluginState)(editorState);
|
|
451
451
|
var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
|
|
452
452
|
if (!selectionOrTableRect || !editorView) {
|
|
453
453
|
return [];
|
|
454
454
|
}
|
|
455
|
-
var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth,
|
|
455
|
+
var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
|
|
456
456
|
var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
|
|
457
457
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
|
|
458
458
|
return [{
|
|
@@ -461,7 +461,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
461
461
|
title: formatMessage(_messages.tableMessages.distributeColumns),
|
|
462
462
|
icon: _layoutThreeEqual.default,
|
|
463
463
|
onClick: function onClick(state, dispatch, view) {
|
|
464
|
-
return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI,
|
|
464
|
+
return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled)(state, dispatch, view);
|
|
465
465
|
},
|
|
466
466
|
disabled: !wouldChange
|
|
467
467
|
}, {
|
|
@@ -473,9 +473,9 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
473
473
|
var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI) {
|
|
474
474
|
var _node$attrs;
|
|
475
475
|
var formatMessage = _ref5.formatMessage;
|
|
476
|
-
var
|
|
477
|
-
targetCellPosition =
|
|
478
|
-
pluginConfig =
|
|
476
|
+
var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
|
|
477
|
+
targetCellPosition = _getPluginState3.targetCellPosition,
|
|
478
|
+
pluginConfig = _getPluginState3.pluginConfig;
|
|
479
479
|
if (!pluginConfig.allowBackgroundColor) {
|
|
480
480
|
return [];
|
|
481
481
|
}
|
|
@@ -94,7 +94,7 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
|
|
|
94
94
|
* @returns Updated transaction with rescaled columns for a given table
|
|
95
95
|
*/
|
|
96
96
|
var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
|
|
97
|
-
var
|
|
97
|
+
var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
98
98
|
return function (table, view) {
|
|
99
99
|
return function (tr) {
|
|
100
100
|
if (!view) {
|
|
@@ -113,11 +113,11 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
|
|
|
113
113
|
possibleMaxWidth: 0,
|
|
114
114
|
isResized: isResized
|
|
115
115
|
};
|
|
116
|
-
if (
|
|
116
|
+
if (isTableScalingEnabled) {
|
|
117
117
|
previousTableInfo = {
|
|
118
118
|
// TODO - ensure correct width is returned when table doesn't have a width value
|
|
119
119
|
width: (0, _utils.getTableElementWidth)(table.node),
|
|
120
|
-
possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _utils.
|
|
120
|
+
possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _utils.getTableContainerElementWidth)(table.node) : (0, _utils.getTableContainerElementWidth)(table.node) - _commonStyles.insertColumnButtonOffset,
|
|
121
121
|
isResized: isResized
|
|
122
122
|
};
|
|
123
123
|
} else {
|
|
@@ -175,7 +175,7 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
|
|
|
175
175
|
tableRef: tableRef,
|
|
176
176
|
domAtPos: domAtPos,
|
|
177
177
|
maxSize: previousTableInfo.possibleMaxWidth,
|
|
178
|
-
|
|
178
|
+
isTableScalingEnabled: isTableScalingEnabled
|
|
179
179
|
});
|
|
180
180
|
|
|
181
181
|
// Two scenarios that require scaling:
|
|
@@ -212,7 +212,7 @@ function fixRowSpans(table) {
|
|
|
212
212
|
return table.type.createChecked(table.attrs, rows, table.marks);
|
|
213
213
|
}
|
|
214
214
|
var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCustomStep, view) {
|
|
215
|
-
var
|
|
215
|
+
var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
216
216
|
return function (tr) {
|
|
217
217
|
var updatedTr = tr;
|
|
218
218
|
updatedTr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
|
|
@@ -225,7 +225,7 @@ var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCu
|
|
|
225
225
|
}
|
|
226
226
|
var table = (0, _utils.findTable)(updatedTr.selection);
|
|
227
227
|
if (table) {
|
|
228
|
-
updatedTr = (0, _columnWidth.rescaleColumns)(
|
|
228
|
+
updatedTr = (0, _columnWidth.rescaleColumns)(isTableScalingEnabled)(table, view)(updatedTr);
|
|
229
229
|
}
|
|
230
230
|
return updatedTr;
|
|
231
231
|
};
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.ColumnResizeWidget = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _react =
|
|
10
|
-
var _react2 = require("@emotion/react");
|
|
9
|
+
var _react = require("@emotion/react");
|
|
11
10
|
var _reactIntlNext = require("react-intl-next");
|
|
12
11
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
12
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
@@ -21,20 +20,20 @@ var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidge
|
|
|
21
20
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
22
21
|
formatMessage = _useIntl.formatMessage;
|
|
23
22
|
if (!includeTooltip) {
|
|
24
|
-
return (0,
|
|
23
|
+
return (0, _react.jsx)("div", {
|
|
25
24
|
className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
|
|
26
25
|
"data-start-index": startIndex,
|
|
27
26
|
"data-end-index": endIndex
|
|
28
27
|
});
|
|
29
28
|
}
|
|
30
|
-
return (0,
|
|
29
|
+
return (0, _react.jsx)(_tooltip.default, {
|
|
31
30
|
content: formatMessage(_messages.tableMessages.adjustColumns),
|
|
32
31
|
hideTooltipOnClick: true,
|
|
33
32
|
hideTooltipOnMouseDown: true,
|
|
34
33
|
position: "mouse",
|
|
35
34
|
mousePosition: "auto-start"
|
|
36
35
|
}, function (tooltipProps) {
|
|
37
|
-
return (0,
|
|
36
|
+
return (0, _react.jsx)("div", (0, _extends2.default)({
|
|
38
37
|
className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
|
|
39
38
|
"data-start-index": startIndex,
|
|
40
39
|
"data-end-index": endIndex
|
|
@@ -279,11 +279,11 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
279
279
|
isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
|
|
280
280
|
allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
|
|
281
281
|
if (allowDistributeColumns && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
|
|
282
|
-
var
|
|
283
|
-
var
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth,
|
|
282
|
+
var _newResizeState$chang;
|
|
283
|
+
var _getPluginState9 = (0, _pluginFactory.getPluginState)(editorView.state),
|
|
284
|
+
_getPluginState9$isTa = _getPluginState9.isTableScalingEnabled,
|
|
285
|
+
isTableScalingEnabled = _getPluginState9$isTa === void 0 ? false : _getPluginState9$isTa;
|
|
286
|
+
var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
|
|
287
287
|
var wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
|
|
288
288
|
return {
|
|
289
289
|
content: formatMessage(_messages.tableMessages.distributeColumns),
|
|
@@ -296,12 +296,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
296
296
|
return null;
|
|
297
297
|
});
|
|
298
298
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createSortColumnItems", function () {
|
|
299
|
-
var _this$
|
|
300
|
-
formatMessage = _this$
|
|
301
|
-
editorView = _this$
|
|
302
|
-
allowColumnSorting = _this$
|
|
303
|
-
var
|
|
304
|
-
isDragAndDropEnabled =
|
|
299
|
+
var _this$props9 = _this.props,
|
|
300
|
+
formatMessage = _this$props9.intl.formatMessage,
|
|
301
|
+
editorView = _this$props9.editorView,
|
|
302
|
+
allowColumnSorting = _this$props9.allowColumnSorting;
|
|
303
|
+
var _getPluginState10 = (0, _pluginFactory.getPluginState)(editorView.state),
|
|
304
|
+
isDragAndDropEnabled = _getPluginState10.isDragAndDropEnabled;
|
|
305
305
|
if (allowColumnSorting && (!isDragAndDropEnabled || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling'))) {
|
|
306
306
|
var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(editorView.state.tr).length > 0;
|
|
307
307
|
var warning = hasMergedCellsInTable ? {
|
|
@@ -365,22 +365,20 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
365
365
|
items[1].items.push(deleteRowItem);
|
|
366
366
|
return items;
|
|
367
367
|
});
|
|
368
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemActivated", function (
|
|
369
|
-
var item =
|
|
370
|
-
var _this$
|
|
371
|
-
editorView = _this$
|
|
372
|
-
selectionRect = _this$
|
|
373
|
-
editorAnalyticsAPI = _this$
|
|
374
|
-
getEditorContainerWidth = _this$
|
|
375
|
-
getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
|
|
368
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemActivated", function (_ref) {
|
|
369
|
+
var item = _ref.item;
|
|
370
|
+
var _this$props10 = _this.props,
|
|
371
|
+
editorView = _this$props10.editorView,
|
|
372
|
+
selectionRect = _this$props10.selectionRect,
|
|
373
|
+
editorAnalyticsAPI = _this$props10.editorAnalyticsAPI,
|
|
374
|
+
getEditorContainerWidth = _this$props10.getEditorContainerWidth;
|
|
376
375
|
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
|
|
377
376
|
var state = editorView.state,
|
|
378
377
|
dispatch = editorView.dispatch;
|
|
379
|
-
var
|
|
380
|
-
targetCellPosition =
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
tablePreserveWidth = _ref3$tablePreserveWi === void 0 ? false : _ref3$tablePreserveWi;
|
|
378
|
+
var _getPluginState11 = (0, _pluginFactory.getPluginState)(state),
|
|
379
|
+
targetCellPosition = _getPluginState11.targetCellPosition,
|
|
380
|
+
_getPluginState11$isT = _getPluginState11.isTableScalingEnabled,
|
|
381
|
+
isTableScalingEnabled = _getPluginState11$isT === void 0 ? false : _getPluginState11$isT;
|
|
384
382
|
switch (item.value.name) {
|
|
385
383
|
case 'sort_column_desc':
|
|
386
384
|
(0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.left, _customSteps.TableSortOrder.DESC)(state, dispatch);
|
|
@@ -399,7 +397,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
399
397
|
_this.toggleOpen();
|
|
400
398
|
break;
|
|
401
399
|
case 'distribute_columns':
|
|
402
|
-
var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth,
|
|
400
|
+
var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
|
|
403
401
|
if (newResizeStateWithAnalytics) {
|
|
404
402
|
(0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
|
|
405
403
|
_this.toggleOpen();
|
|
@@ -410,7 +408,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
410
408
|
_this.toggleOpen();
|
|
411
409
|
break;
|
|
412
410
|
case 'insert_column':
|
|
413
|
-
(0, _commandsWithAnalytics.insertColumnWithAnalytics)(
|
|
411
|
+
(0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
|
|
414
412
|
_this.toggleOpen();
|
|
415
413
|
break;
|
|
416
414
|
case 'insert_row':
|
|
@@ -425,19 +423,19 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
425
423
|
_this.toggleOpen();
|
|
426
424
|
break;
|
|
427
425
|
case 'delete_row':
|
|
428
|
-
var
|
|
429
|
-
isHeaderRowRequired =
|
|
426
|
+
var _getPluginState12 = (0, _pluginFactory.getPluginState)(state),
|
|
427
|
+
isHeaderRowRequired = _getPluginState12.pluginConfig.isHeaderRowRequired;
|
|
430
428
|
(0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
|
|
431
429
|
_this.toggleOpen();
|
|
432
430
|
break;
|
|
433
431
|
}
|
|
434
432
|
});
|
|
435
433
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
|
|
436
|
-
var _this$
|
|
437
|
-
isOpen = _this$
|
|
438
|
-
_this$
|
|
439
|
-
state = _this$
|
|
440
|
-
dispatch = _this$
|
|
434
|
+
var _this$props11 = _this.props,
|
|
435
|
+
isOpen = _this$props11.isOpen,
|
|
436
|
+
_this$props11$editorV = _this$props11.editorView,
|
|
437
|
+
state = _this$props11$editorV.state,
|
|
438
|
+
dispatch = _this$props11$editorV.dispatch;
|
|
441
439
|
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
442
440
|
if (!isOpen) {
|
|
443
441
|
_this.setState({
|
|
@@ -454,13 +452,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
454
452
|
isSubmenuOpen: false
|
|
455
453
|
});
|
|
456
454
|
});
|
|
457
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (
|
|
458
|
-
var item =
|
|
459
|
-
var _this$
|
|
460
|
-
_this$
|
|
461
|
-
state = _this$
|
|
462
|
-
dispatch = _this$
|
|
463
|
-
selectionRect = _this$
|
|
455
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref2) {
|
|
456
|
+
var item = _ref2.item;
|
|
457
|
+
var _this$props12 = _this.props,
|
|
458
|
+
_this$props12$editorV = _this$props12.editorView,
|
|
459
|
+
state = _this$props12$editorV.state,
|
|
460
|
+
dispatch = _this$props12$editorV.dispatch,
|
|
461
|
+
selectionRect = _this$props12.selectionRect;
|
|
464
462
|
if (item.value.name === 'background') {
|
|
465
463
|
if (!_this.state.isSubmenuOpen) {
|
|
466
464
|
_this.setState({
|
|
@@ -478,8 +476,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
478
476
|
(0, _commands.hoverMergedCells)()(state, dispatch);
|
|
479
477
|
}
|
|
480
478
|
});
|
|
481
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (
|
|
482
|
-
var item =
|
|
479
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref3) {
|
|
480
|
+
var item = _ref3.item;
|
|
483
481
|
var _this$props$editorVie2 = _this.props.editorView,
|
|
484
482
|
state = _this$props$editorVie2.state,
|
|
485
483
|
dispatch = _this$props$editorVie2.dispatch;
|
|
@@ -498,12 +496,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
498
496
|
}
|
|
499
497
|
});
|
|
500
498
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setColor", function (color) {
|
|
501
|
-
var _this$
|
|
502
|
-
editorView = _this$
|
|
503
|
-
editorAnalyticsAPI = _this$
|
|
499
|
+
var _this$props13 = _this.props,
|
|
500
|
+
editorView = _this$props13.editorView,
|
|
501
|
+
editorAnalyticsAPI = _this$props13.editorAnalyticsAPI;
|
|
504
502
|
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
|
|
505
|
-
var
|
|
506
|
-
targetCellPosition =
|
|
503
|
+
var _getPluginState13 = (0, _pluginFactory.getPluginState)(editorView.state),
|
|
504
|
+
targetCellPosition = _getPluginState13.targetCellPosition;
|
|
507
505
|
var state = editorView.state,
|
|
508
506
|
dispatch = editorView.dispatch;
|
|
509
507
|
(0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
|
|
@@ -514,14 +512,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
514
512
|
(0, _createClass2.default)(ContextualMenu, [{
|
|
515
513
|
key: "render",
|
|
516
514
|
value: function render() {
|
|
517
|
-
var _this$
|
|
518
|
-
isOpen = _this$
|
|
519
|
-
mountPoint = _this$
|
|
520
|
-
offset = _this$
|
|
521
|
-
boundariesElement = _this$
|
|
522
|
-
editorView = _this$
|
|
523
|
-
var
|
|
524
|
-
isDragAndDropEnabled =
|
|
515
|
+
var _this$props14 = this.props,
|
|
516
|
+
isOpen = _this$props14.isOpen,
|
|
517
|
+
mountPoint = _this$props14.mountPoint,
|
|
518
|
+
offset = _this$props14.offset,
|
|
519
|
+
boundariesElement = _this$props14.boundariesElement,
|
|
520
|
+
editorView = _this$props14.editorView;
|
|
521
|
+
var _getPluginState14 = (0, _pluginFactory.getPluginState)(editorView.state),
|
|
522
|
+
isDragAndDropEnabled = _getPluginState14.isDragAndDropEnabled;
|
|
525
523
|
var items = isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
|
|
526
524
|
return (0, _react2.jsx)("div", {
|
|
527
525
|
"data-testid": "table-cell-contextual-menu",
|
|
@@ -24,8 +24,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
24
24
|
isOpen = _ref.isOpen,
|
|
25
25
|
pluginConfig = _ref.pluginConfig,
|
|
26
26
|
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
|
|
27
|
-
getEditorContainerWidth = _ref.getEditorContainerWidth
|
|
28
|
-
getEditorFeatureFlags = _ref.getEditorFeatureFlags;
|
|
27
|
+
getEditorContainerWidth = _ref.getEditorContainerWidth;
|
|
29
28
|
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
|
|
30
29
|
var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
|
|
31
30
|
targetCellPosition = _getPluginState.targetCellPosition,
|
|
@@ -73,8 +72,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
73
72
|
selectionRect: selectionRect,
|
|
74
73
|
boundariesElement: boundariesElement,
|
|
75
74
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
76
|
-
getEditorContainerWidth: getEditorContainerWidth
|
|
77
|
-
getEditorFeatureFlags: getEditorFeatureFlags
|
|
75
|
+
getEditorContainerWidth: getEditorContainerWidth
|
|
78
76
|
})));
|
|
79
77
|
};
|
|
80
78
|
FloatingContextualMenu.displayName = 'FloatingContextualMenu';
|
|
@@ -191,7 +191,7 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
|
|
|
191
191
|
mountPoint = _ref.mountPoint,
|
|
192
192
|
scrollableElement = _ref.scrollableElement,
|
|
193
193
|
boundariesElement = _ref.boundariesElement,
|
|
194
|
-
|
|
194
|
+
isTableScalingEnabled = _ref.isTableScalingEnabled;
|
|
195
195
|
var state = editorView.state,
|
|
196
196
|
dispatch = editorView.dispatch;
|
|
197
197
|
var selection = state.selection;
|
|
@@ -207,7 +207,7 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
|
|
|
207
207
|
var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
|
|
208
208
|
var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
|
|
209
209
|
var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
|
|
210
|
-
var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired,
|
|
210
|
+
var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled);
|
|
211
211
|
var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),
|
|
212
212
|
menuItems = _convertToDropdownIte.menuItems,
|
|
213
213
|
menuCallback = _convertToDropdownIte.menuCallback;
|