@atlaskit/editor-plugin-table 7.16.5 → 7.16.7
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 +18 -0
- package/dist/cjs/nodeviews/TableResizer.js +9 -9
- package/dist/cjs/utils/guidelines.js +3 -1
- package/dist/cjs/utils/snapping.js +7 -2
- package/dist/es2019/nodeviews/TableResizer.js +9 -9
- package/dist/es2019/utils/guidelines.js +4 -1
- package/dist/es2019/utils/snapping.js +7 -4
- package/dist/esm/nodeviews/TableResizer.js +9 -9
- package/dist/esm/utils/guidelines.js +3 -1
- package/dist/esm/utils/snapping.js +7 -2
- package/dist/types/utils/guidelines.d.ts +1 -1
- package/dist/types/utils/snapping.d.ts +2 -2
- package/dist/types-ts4.5/utils/guidelines.d.ts +1 -1
- package/dist/types-ts4.5/utils/snapping.d.ts +2 -2
- package/package.json +4 -4
- package/src/nodeviews/TableResizer.tsx +35 -7
- package/src/utils/guidelines.ts +11 -3
- package/src/utils/snapping.ts +16 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 7.16.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#103100](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103100)
|
|
8
|
+
[`07d25a4f1dd9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/07d25a4f1dd9) -
|
|
9
|
+
Add new parameter to remove inner guidelines, enabled when table alignment is enabled
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 7.16.6
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#102478](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102478)
|
|
17
|
+
[`3378951608b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3378951608b0) -
|
|
18
|
+
[ED-23332] Update adf-schema package to 36.10.1
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 7.16.5
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -132,15 +132,15 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
132
132
|
keys = _ref3.keys;
|
|
133
133
|
if (gap !== currentGap.current) {
|
|
134
134
|
currentGap.current = gap;
|
|
135
|
-
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
|
|
135
|
+
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, containerWidth);
|
|
136
136
|
displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, visibleGuidelines));
|
|
137
137
|
}
|
|
138
|
-
}, [isTableScalingEnabled, containerWidth, displayGuideline]);
|
|
138
|
+
}, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
|
|
139
139
|
var guidelineSnaps = (0, _react.useMemo)(function () {
|
|
140
140
|
return snappingEnabled ? {
|
|
141
|
-
x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths
|
|
141
|
+
x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths
|
|
142
142
|
} : undefined;
|
|
143
|
-
}, [snappingEnabled, isTableScalingEnabled, containerWidth]);
|
|
143
|
+
}, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
|
|
144
144
|
(0, _react.useEffect)(function () {
|
|
145
145
|
return function () {
|
|
146
146
|
// only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
|
|
@@ -174,12 +174,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
174
174
|
name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
|
|
175
175
|
});
|
|
176
176
|
dispatch(tr);
|
|
177
|
-
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
|
|
177
|
+
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, containerWidth);
|
|
178
178
|
setSnappingEnabled(displayGuideline(visibleGuidelines));
|
|
179
179
|
if (onResizeStart) {
|
|
180
180
|
onResizeStart();
|
|
181
181
|
}
|
|
182
|
-
}, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
|
|
182
|
+
}, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
|
|
183
183
|
var handleResize = (0, _react.useCallback)(function (originalState, delta) {
|
|
184
184
|
var _node$attrs$localId, _node$attrs;
|
|
185
185
|
countFrames();
|
|
@@ -199,14 +199,14 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
199
199
|
start: pos + 1,
|
|
200
200
|
parentWidth: newWidth
|
|
201
201
|
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
|
|
202
|
-
var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
|
|
202
|
+
var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
|
|
203
203
|
updateActiveGuidelines(closestSnap);
|
|
204
204
|
|
|
205
205
|
// When snapping to the full width guideline, resize the table to be 1800px
|
|
206
206
|
var state = editorView.state,
|
|
207
207
|
dispatch = editorView.dispatch;
|
|
208
208
|
var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
|
|
209
|
-
var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth).filter(function (guideline) {
|
|
209
|
+
var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled).filter(function (guideline) {
|
|
210
210
|
return guideline.isFullWidth;
|
|
211
211
|
})[0];
|
|
212
212
|
var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
|
|
@@ -214,7 +214,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
214
214
|
(0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest))(state, dispatch);
|
|
215
215
|
updateWidth(shouldUpdateWidthToWidest ? _utils3.TABLE_MAX_WIDTH : newWidth);
|
|
216
216
|
return newWidth;
|
|
217
|
-
}, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
|
|
217
|
+
}, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
|
|
218
218
|
var scheduleResize = (0, _react.useMemo)(function () {
|
|
219
219
|
return (0, _rafSchd.default)(handleResize);
|
|
220
220
|
}, [handleResize]);
|
|
@@ -12,5 +12,7 @@ var _snapping = require("./snapping");
|
|
|
12
12
|
// If we don't do this then the guidelines will not align correctly to the edge of the table
|
|
13
13
|
var defaultGuidelines = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
|
|
14
14
|
var defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
|
|
15
|
-
|
|
15
|
+
var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
16
|
+
var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth, excludeInnerGuidelines);
|
|
17
|
+
return (0, _guideline.createFixedGuidelinesFromLengths)(lengths, undefined, true);
|
|
16
18
|
};
|
|
@@ -24,14 +24,19 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
|
|
|
24
24
|
var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
|
|
25
25
|
var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
26
26
|
var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
|
|
27
|
+
var excludeInnerGuidelines = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
27
28
|
var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _consts.tableResizerWidth;
|
|
28
|
-
|
|
29
|
+
if (excludeInnerGuidelines) {
|
|
30
|
+
return [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
|
|
31
|
+
}
|
|
32
|
+
return [0].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
|
|
29
33
|
};
|
|
30
34
|
var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();
|
|
31
35
|
|
|
32
36
|
// FF TablePreserve for defaultSnappingWidths
|
|
33
37
|
var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
|
|
34
|
-
|
|
38
|
+
var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
39
|
+
return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
|
|
35
40
|
};
|
|
36
41
|
|
|
37
42
|
/**
|
|
@@ -121,13 +121,13 @@ export const TableResizer = ({
|
|
|
121
121
|
}) => {
|
|
122
122
|
if (gap !== currentGap.current) {
|
|
123
123
|
currentGap.current = gap;
|
|
124
|
-
const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
|
|
124
|
+
const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
|
|
125
125
|
displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
|
|
126
126
|
}
|
|
127
|
-
}, [isTableScalingEnabled, containerWidth, displayGuideline]);
|
|
127
|
+
}, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
|
|
128
128
|
const guidelineSnaps = useMemo(() => snappingEnabled ? {
|
|
129
|
-
x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths
|
|
130
|
-
} : undefined, [snappingEnabled, isTableScalingEnabled, containerWidth]);
|
|
129
|
+
x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
|
|
130
|
+
} : undefined, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
|
|
131
131
|
useEffect(() => {
|
|
132
132
|
return () => {
|
|
133
133
|
// only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
|
|
@@ -169,12 +169,12 @@ export const TableResizer = ({
|
|
|
169
169
|
name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
|
|
170
170
|
});
|
|
171
171
|
dispatch(tr);
|
|
172
|
-
const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
|
|
172
|
+
const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
|
|
173
173
|
setSnappingEnabled(displayGuideline(visibleGuidelines));
|
|
174
174
|
if (onResizeStart) {
|
|
175
175
|
onResizeStart();
|
|
176
176
|
}
|
|
177
|
-
}, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
|
|
177
|
+
}, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
|
|
178
178
|
const handleResize = useCallback((originalState, delta) => {
|
|
179
179
|
var _node$attrs$localId, _node$attrs;
|
|
180
180
|
countFrames();
|
|
@@ -194,7 +194,7 @@ export const TableResizer = ({
|
|
|
194
194
|
start: pos + 1,
|
|
195
195
|
parentWidth: newWidth
|
|
196
196
|
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
|
|
197
|
-
const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
|
|
197
|
+
const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
|
|
198
198
|
updateActiveGuidelines(closestSnap);
|
|
199
199
|
|
|
200
200
|
// When snapping to the full width guideline, resize the table to be 1800px
|
|
@@ -203,7 +203,7 @@ export const TableResizer = ({
|
|
|
203
203
|
dispatch
|
|
204
204
|
} = editorView;
|
|
205
205
|
const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
|
|
206
|
-
const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth).filter(guideline => guideline.isFullWidth)[0];
|
|
206
|
+
const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(guideline => guideline.isFullWidth)[0];
|
|
207
207
|
const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
|
|
208
208
|
const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
|
|
209
209
|
updateWidthToWidest({
|
|
@@ -211,7 +211,7 @@ export const TableResizer = ({
|
|
|
211
211
|
})(state, dispatch);
|
|
212
212
|
updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
|
|
213
213
|
return newWidth;
|
|
214
|
-
}, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
|
|
214
|
+
}, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
|
|
215
215
|
const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
|
|
216
216
|
const handleResizeStop = useCallback((originalState, delta) => {
|
|
217
217
|
var _node$attrs$localId2, _node$attrs2;
|
|
@@ -4,4 +4,7 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
|
|
|
4
4
|
// NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
|
|
5
5
|
// If we don't do this then the guidelines will not align correctly to the edge of the table
|
|
6
6
|
export const defaultGuidelines = createFixedGuidelinesFromLengths([0, ...calculateDefaultSnappings(-1)]);
|
|
7
|
-
export const defaultGuidelinesForPreserveTable = editorContainerWidth
|
|
7
|
+
export const defaultGuidelinesForPreserveTable = (editorContainerWidth, excludeInnerGuidelines = false) => {
|
|
8
|
+
const lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, excludeInnerGuidelines);
|
|
9
|
+
return createFixedGuidelinesFromLengths(lengths, undefined, true);
|
|
10
|
+
};
|
|
@@ -6,15 +6,18 @@ const calculateSubSnappingWidths = (totalLanes, totalWidth) => new Array(Math.ro
|
|
|
6
6
|
export const calculateDefaultSnappings = (lengthOffset = 0) => [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset];
|
|
7
7
|
|
|
8
8
|
// FF TablePreserve for calculateDefaultSnappings
|
|
9
|
-
export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth) => {
|
|
9
|
+
export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth, excludeInnerGuidelines = false) => {
|
|
10
10
|
const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
|
|
11
|
-
|
|
11
|
+
if (excludeInnerGuidelines) {
|
|
12
|
+
return [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
|
|
13
|
+
}
|
|
14
|
+
return [0, ...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
|
|
12
15
|
};
|
|
13
16
|
export const defaultSnappingWidths = calculateDefaultSnappings();
|
|
14
17
|
|
|
15
18
|
// FF TablePreserve for defaultSnappingWidths
|
|
16
|
-
export const defaultTablePreserveSnappingWidths = editorContainerWidth => {
|
|
17
|
-
return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
|
|
19
|
+
export const defaultTablePreserveSnappingWidths = (editorContainerWidth, excludeInnerGuidelines = false) => {
|
|
20
|
+
return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
|
|
18
21
|
};
|
|
19
22
|
|
|
20
23
|
/**
|
|
@@ -122,15 +122,15 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
122
122
|
keys = _ref3.keys;
|
|
123
123
|
if (gap !== currentGap.current) {
|
|
124
124
|
currentGap.current = gap;
|
|
125
|
-
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
|
|
125
|
+
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
|
|
126
126
|
displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
|
|
127
127
|
}
|
|
128
|
-
}, [isTableScalingEnabled, containerWidth, displayGuideline]);
|
|
128
|
+
}, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
|
|
129
129
|
var guidelineSnaps = useMemo(function () {
|
|
130
130
|
return snappingEnabled ? {
|
|
131
|
-
x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths
|
|
131
|
+
x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
|
|
132
132
|
} : undefined;
|
|
133
|
-
}, [snappingEnabled, isTableScalingEnabled, containerWidth]);
|
|
133
|
+
}, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
|
|
134
134
|
useEffect(function () {
|
|
135
135
|
return function () {
|
|
136
136
|
// only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
|
|
@@ -164,12 +164,12 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
164
164
|
name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
|
|
165
165
|
});
|
|
166
166
|
dispatch(tr);
|
|
167
|
-
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
|
|
167
|
+
var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
|
|
168
168
|
setSnappingEnabled(displayGuideline(visibleGuidelines));
|
|
169
169
|
if (onResizeStart) {
|
|
170
170
|
onResizeStart();
|
|
171
171
|
}
|
|
172
|
-
}, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
|
|
172
|
+
}, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
|
|
173
173
|
var handleResize = useCallback(function (originalState, delta) {
|
|
174
174
|
var _node$attrs$localId, _node$attrs;
|
|
175
175
|
countFrames();
|
|
@@ -189,14 +189,14 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
189
189
|
start: pos + 1,
|
|
190
190
|
parentWidth: newWidth
|
|
191
191
|
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
|
|
192
|
-
var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
|
|
192
|
+
var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
|
|
193
193
|
updateActiveGuidelines(closestSnap);
|
|
194
194
|
|
|
195
195
|
// When snapping to the full width guideline, resize the table to be 1800px
|
|
196
196
|
var state = editorView.state,
|
|
197
197
|
dispatch = editorView.dispatch;
|
|
198
198
|
var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
|
|
199
|
-
var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth).filter(function (guideline) {
|
|
199
|
+
var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(function (guideline) {
|
|
200
200
|
return guideline.isFullWidth;
|
|
201
201
|
})[0];
|
|
202
202
|
var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
|
|
@@ -204,7 +204,7 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
204
204
|
updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest))(state, dispatch);
|
|
205
205
|
updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
|
|
206
206
|
return newWidth;
|
|
207
|
-
}, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
|
|
207
|
+
}, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
|
|
208
208
|
var scheduleResize = useMemo(function () {
|
|
209
209
|
return rafSchd(handleResize);
|
|
210
210
|
}, [handleResize]);
|
|
@@ -6,5 +6,7 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
|
|
|
6
6
|
// If we don't do this then the guidelines will not align correctly to the edge of the table
|
|
7
7
|
export var defaultGuidelines = createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultSnappings(-1))));
|
|
8
8
|
export var defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
|
|
9
|
-
|
|
9
|
+
var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
10
|
+
var lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, excludeInnerGuidelines);
|
|
11
|
+
return createFixedGuidelinesFromLengths(lengths, undefined, true);
|
|
10
12
|
};
|
|
@@ -17,14 +17,19 @@ export var calculateDefaultSnappings = function calculateDefaultSnappings() {
|
|
|
17
17
|
export var calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
|
|
18
18
|
var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
19
19
|
var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorFullWidthLayoutWidth;
|
|
20
|
+
var excludeInnerGuidelines = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
20
21
|
var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
|
|
21
|
-
|
|
22
|
+
if (excludeInnerGuidelines) {
|
|
23
|
+
return [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
|
|
24
|
+
}
|
|
25
|
+
return [0].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
|
|
22
26
|
};
|
|
23
27
|
export var defaultSnappingWidths = calculateDefaultSnappings();
|
|
24
28
|
|
|
25
29
|
// FF TablePreserve for defaultSnappingWidths
|
|
26
30
|
export var defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
|
|
27
|
-
|
|
31
|
+
var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
32
|
+
return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
|
|
28
33
|
};
|
|
29
34
|
|
|
30
35
|
/**
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
|
|
2
2
|
export declare const defaultGuidelines: GuidelineConfig[];
|
|
3
|
-
export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number) => GuidelineConfig[];
|
|
3
|
+
export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => GuidelineConfig[];
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
|
|
2
2
|
export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
|
|
3
|
-
export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number) => number[];
|
|
3
|
+
export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, excludeInnerGuidelines?: boolean) => number[];
|
|
4
4
|
export declare const defaultSnappingWidths: number[];
|
|
5
|
-
export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number) => number[];
|
|
5
|
+
export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => number[];
|
|
6
6
|
/**
|
|
7
7
|
* Returns keys of guidelines that are closest to the table and withthin the snapGap
|
|
8
8
|
*/
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
|
|
2
2
|
export declare const defaultGuidelines: GuidelineConfig[];
|
|
3
|
-
export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number) => GuidelineConfig[];
|
|
3
|
+
export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => GuidelineConfig[];
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
|
|
2
2
|
export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
|
|
3
|
-
export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number) => number[];
|
|
3
|
+
export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, excludeInnerGuidelines?: boolean) => number[];
|
|
4
4
|
export declare const defaultSnappingWidths: number[];
|
|
5
|
-
export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number) => number[];
|
|
5
|
+
export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => number[];
|
|
6
6
|
/**
|
|
7
7
|
* Returns keys of guidelines that are closest to the table and withthin the snapGap
|
|
8
8
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.16.
|
|
3
|
+
"version": "7.16.7",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
"runReact18": false
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@atlaskit/adf-schema": "^36.
|
|
32
|
-
"@atlaskit/button": "^17.
|
|
31
|
+
"@atlaskit/adf-schema": "^36.10.7",
|
|
32
|
+
"@atlaskit/button": "^17.17.0",
|
|
33
33
|
"@atlaskit/custom-steps": "^0.2.0",
|
|
34
|
-
"@atlaskit/editor-common": "^
|
|
34
|
+
"@atlaskit/editor-common": "^81.0.0",
|
|
35
35
|
"@atlaskit/editor-palette": "1.6.0",
|
|
36
36
|
"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^1.2.0",
|
|
@@ -203,7 +203,10 @@ export const TableResizer = ({
|
|
|
203
203
|
currentGap.current = gap;
|
|
204
204
|
const visibleGuidelines = getVisibleGuidelines(
|
|
205
205
|
isTableScalingEnabled
|
|
206
|
-
? defaultGuidelinesForPreserveTable(
|
|
206
|
+
? defaultGuidelinesForPreserveTable(
|
|
207
|
+
containerWidth,
|
|
208
|
+
isTableAlignmentEnabled,
|
|
209
|
+
)
|
|
207
210
|
: defaultGuidelines,
|
|
208
211
|
containerWidth,
|
|
209
212
|
);
|
|
@@ -218,7 +221,12 @@ export const TableResizer = ({
|
|
|
218
221
|
);
|
|
219
222
|
}
|
|
220
223
|
},
|
|
221
|
-
[
|
|
224
|
+
[
|
|
225
|
+
isTableScalingEnabled,
|
|
226
|
+
isTableAlignmentEnabled,
|
|
227
|
+
containerWidth,
|
|
228
|
+
displayGuideline,
|
|
229
|
+
],
|
|
222
230
|
);
|
|
223
231
|
|
|
224
232
|
const guidelineSnaps = useMemo(
|
|
@@ -226,11 +234,19 @@ export const TableResizer = ({
|
|
|
226
234
|
snappingEnabled
|
|
227
235
|
? {
|
|
228
236
|
x: isTableScalingEnabled
|
|
229
|
-
? defaultTablePreserveSnappingWidths(
|
|
237
|
+
? defaultTablePreserveSnappingWidths(
|
|
238
|
+
containerWidth,
|
|
239
|
+
isTableAlignmentEnabled,
|
|
240
|
+
)
|
|
230
241
|
: defaultSnappingWidths,
|
|
231
242
|
}
|
|
232
243
|
: undefined,
|
|
233
|
-
[
|
|
244
|
+
[
|
|
245
|
+
snappingEnabled,
|
|
246
|
+
isTableScalingEnabled,
|
|
247
|
+
isTableAlignmentEnabled,
|
|
248
|
+
containerWidth,
|
|
249
|
+
],
|
|
234
250
|
);
|
|
235
251
|
|
|
236
252
|
useEffect(() => {
|
|
@@ -276,7 +292,10 @@ export const TableResizer = ({
|
|
|
276
292
|
|
|
277
293
|
const visibleGuidelines = getVisibleGuidelines(
|
|
278
294
|
isTableScalingEnabled
|
|
279
|
-
? defaultGuidelinesForPreserveTable(
|
|
295
|
+
? defaultGuidelinesForPreserveTable(
|
|
296
|
+
containerWidth,
|
|
297
|
+
isTableAlignmentEnabled,
|
|
298
|
+
)
|
|
280
299
|
: defaultGuidelines,
|
|
281
300
|
containerWidth,
|
|
282
301
|
);
|
|
@@ -292,6 +311,7 @@ export const TableResizer = ({
|
|
|
292
311
|
node.attrs.localId,
|
|
293
312
|
tableRef,
|
|
294
313
|
isTableScalingEnabled,
|
|
314
|
+
isTableAlignmentEnabled,
|
|
295
315
|
containerWidth,
|
|
296
316
|
displayGuideline,
|
|
297
317
|
onResizeStart,
|
|
@@ -326,10 +346,16 @@ export const TableResizer = ({
|
|
|
326
346
|
const closestSnap = findClosestSnap(
|
|
327
347
|
newWidth,
|
|
328
348
|
isTableScalingEnabled
|
|
329
|
-
? defaultTablePreserveSnappingWidths(
|
|
349
|
+
? defaultTablePreserveSnappingWidths(
|
|
350
|
+
containerWidth,
|
|
351
|
+
isTableAlignmentEnabled,
|
|
352
|
+
)
|
|
330
353
|
: defaultSnappingWidths,
|
|
331
354
|
isTableScalingEnabled
|
|
332
|
-
? defaultGuidelinesForPreserveTable(
|
|
355
|
+
? defaultGuidelinesForPreserveTable(
|
|
356
|
+
containerWidth,
|
|
357
|
+
isTableAlignmentEnabled,
|
|
358
|
+
)
|
|
333
359
|
: defaultGuidelines,
|
|
334
360
|
TABLE_HIGHLIGHT_GAP,
|
|
335
361
|
TABLE_HIGHLIGHT_TOLERANCE,
|
|
@@ -343,6 +369,7 @@ export const TableResizer = ({
|
|
|
343
369
|
|
|
344
370
|
const fullWidthGuideline = defaultGuidelinesForPreserveTable(
|
|
345
371
|
containerWidth,
|
|
372
|
+
isTableAlignmentEnabled,
|
|
346
373
|
).filter((guideline) => guideline.isFullWidth)[0];
|
|
347
374
|
|
|
348
375
|
const isFullWidthGuidelineActive = closestSnap.keys.includes(
|
|
@@ -362,6 +389,7 @@ export const TableResizer = ({
|
|
|
362
389
|
[
|
|
363
390
|
countFrames,
|
|
364
391
|
isTableScalingEnabled,
|
|
392
|
+
isTableAlignmentEnabled,
|
|
365
393
|
tableRef,
|
|
366
394
|
node,
|
|
367
395
|
editorView,
|
package/src/utils/guidelines.ts
CHANGED
|
@@ -15,9 +15,17 @@ export const defaultGuidelines = createFixedGuidelinesFromLengths([
|
|
|
15
15
|
|
|
16
16
|
export const defaultGuidelinesForPreserveTable = (
|
|
17
17
|
editorContainerWidth: number,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
excludeInnerGuidelines = false,
|
|
19
|
+
) => {
|
|
20
|
+
const lengths = calculateDefaultTablePreserveSnappings(
|
|
21
|
+
-1,
|
|
22
|
+
editorContainerWidth,
|
|
23
|
+
excludeInnerGuidelines,
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
return createFixedGuidelinesFromLengths(
|
|
27
|
+
lengths,
|
|
21
28
|
undefined,
|
|
22
29
|
true,
|
|
23
30
|
) as GuidelineConfig[];
|
|
31
|
+
};
|
package/src/utils/snapping.ts
CHANGED
|
@@ -30,6 +30,7 @@ export const calculateDefaultSnappings = (lengthOffset: number = 0) => [
|
|
|
30
30
|
export const calculateDefaultTablePreserveSnappings = (
|
|
31
31
|
lengthOffset: number = 0,
|
|
32
32
|
editorContainerWith: number = akEditorFullWidthLayoutWidth,
|
|
33
|
+
excludeInnerGuidelines = false,
|
|
33
34
|
) => {
|
|
34
35
|
const dynamicFullWidthLine =
|
|
35
36
|
editorContainerWith - akEditorGutterPadding * 2 >=
|
|
@@ -37,7 +38,16 @@ export const calculateDefaultTablePreserveSnappings = (
|
|
|
37
38
|
? akEditorFullWidthLayoutWidth
|
|
38
39
|
: editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
|
|
39
40
|
|
|
41
|
+
if (excludeInnerGuidelines) {
|
|
42
|
+
return [
|
|
43
|
+
akEditorDefaultLayoutWidth + lengthOffset,
|
|
44
|
+
akEditorCalculatedWideLayoutWidth + lengthOffset,
|
|
45
|
+
dynamicFullWidthLine - lengthOffset,
|
|
46
|
+
];
|
|
47
|
+
}
|
|
48
|
+
|
|
40
49
|
return [
|
|
50
|
+
0,
|
|
41
51
|
...calculateSubSnappingWidths(
|
|
42
52
|
numberOfLanesInDefaultLayoutWidth,
|
|
43
53
|
akEditorDefaultLayoutWidth + lengthOffset,
|
|
@@ -53,11 +63,16 @@ export const defaultSnappingWidths = calculateDefaultSnappings();
|
|
|
53
63
|
// FF TablePreserve for defaultSnappingWidths
|
|
54
64
|
export const defaultTablePreserveSnappingWidths = (
|
|
55
65
|
editorContainerWidth: number,
|
|
66
|
+
excludeInnerGuidelines = false,
|
|
56
67
|
) => {
|
|
57
68
|
return editorContainerWidth - akEditorGutterPadding * 2 >
|
|
58
69
|
akEditorFullWidthLayoutWidth
|
|
59
70
|
? calculateDefaultSnappings()
|
|
60
|
-
: calculateDefaultTablePreserveSnappings(
|
|
71
|
+
: calculateDefaultTablePreserveSnappings(
|
|
72
|
+
0,
|
|
73
|
+
editorContainerWidth,
|
|
74
|
+
excludeInnerGuidelines,
|
|
75
|
+
);
|
|
61
76
|
};
|
|
62
77
|
|
|
63
78
|
/**
|