@atlaskit/editor-plugin-table 7.4.1 → 7.4.2
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 +6 -0
- package/dist/cjs/nodeviews/TableComponent.js +2 -4
- package/dist/cjs/nodeviews/TableContainer.js +5 -10
- package/dist/cjs/nodeviews/TableResizer.js +3 -7
- package/dist/cjs/utils/analytics.js +1 -2
- package/dist/es2019/nodeviews/TableComponent.js +2 -4
- package/dist/es2019/nodeviews/TableContainer.js +5 -10
- package/dist/es2019/nodeviews/TableResizer.js +3 -7
- package/dist/es2019/utils/analytics.js +1 -2
- package/dist/esm/nodeviews/TableComponent.js +2 -4
- package/dist/esm/nodeviews/TableContainer.js +5 -10
- package/dist/esm/nodeviews/TableResizer.js +3 -7
- package/dist/esm/utils/analytics.js +1 -2
- package/dist/types/nodeviews/TableContainer.d.ts +2 -4
- package/dist/types/nodeviews/TableResizer.d.ts +1 -2
- package/dist/types/utils/analytics.d.ts +0 -1
- package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +2 -4
- package/dist/types-ts4.5/nodeviews/TableResizer.d.ts +1 -2
- package/dist/types-ts4.5/utils/analytics.d.ts +0 -1
- package/package.json +3 -3
- package/src/nodeviews/TableComponent.tsx +1 -2
- package/src/nodeviews/TableContainer.tsx +0 -9
- package/src/nodeviews/TableResizer.tsx +0 -6
- package/src/utils/analytics.ts +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 7.4.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#76112](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76112) [`1cd6cd3382d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1cd6cd3382d9) - remove table performance experiment
|
|
8
|
+
|
|
3
9
|
## 7.4.1
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -571,8 +571,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
571
571
|
var isNested = (0, _utils5.isTableNested)(view.state, tablePos);
|
|
572
572
|
var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
|
|
573
573
|
var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
|
|
574
|
-
stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar
|
|
575
|
-
tableResizePerformance = _getEditorFeatureFlag3.tableResizePerformance;
|
|
574
|
+
stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
|
|
576
575
|
return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer, {
|
|
577
576
|
className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection)), _classnames)),
|
|
578
577
|
editorView: view,
|
|
@@ -584,8 +583,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
584
583
|
isNested: isNested,
|
|
585
584
|
pluginInjectionApi: pluginInjectionApi,
|
|
586
585
|
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
|
|
587
|
-
isResizing: isResizing
|
|
588
|
-
tableResizePerformance: tableResizePerformance
|
|
586
|
+
isResizing: isResizing
|
|
589
587
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
590
588
|
className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
|
|
591
589
|
"data-testid": "sticky-sentinel-top"
|
|
@@ -53,8 +53,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
|
|
|
53
53
|
getPos = _ref2.getPos,
|
|
54
54
|
tableRef = _ref2.tableRef,
|
|
55
55
|
isResizing = _ref2.isResizing,
|
|
56
|
-
pluginInjectionApi = _ref2.pluginInjectionApi
|
|
57
|
-
tableResizePerformance = _ref2.tableResizePerformance;
|
|
56
|
+
pluginInjectionApi = _ref2.pluginInjectionApi;
|
|
58
57
|
var containerRef = (0, _react.useRef)(null);
|
|
59
58
|
var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
|
|
60
59
|
var updateContainerHeight = (0, _react.useCallback)(function (height) {
|
|
@@ -135,8 +134,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
|
|
|
135
134
|
tableRef: tableRef,
|
|
136
135
|
displayGuideline: displayGuideline,
|
|
137
136
|
attachAnalyticsEvent: attachAnalyticsEvent,
|
|
138
|
-
displayGapCursor: displayGapCursor
|
|
139
|
-
tableResizePerformance: tableResizePerformance
|
|
137
|
+
displayGapCursor: displayGapCursor
|
|
140
138
|
};
|
|
141
139
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement')) {
|
|
142
140
|
tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
|
|
@@ -148,8 +146,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
|
|
|
148
146
|
style: {
|
|
149
147
|
display: 'flex',
|
|
150
148
|
justifyContent: 'center'
|
|
151
|
-
}
|
|
152
|
-
contentEditable: tableResizePerformance && isResizing ? 'false' : undefined
|
|
149
|
+
}
|
|
153
150
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
154
151
|
style: {
|
|
155
152
|
width: tableWidthRef.current
|
|
@@ -175,8 +172,7 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
|
|
|
175
172
|
tableRef = _ref3.tableRef,
|
|
176
173
|
isNested = _ref3.isNested,
|
|
177
174
|
isResizing = _ref3.isResizing,
|
|
178
|
-
pluginInjectionApi = _ref3.pluginInjectionApi
|
|
179
|
-
tableResizePerformance = _ref3.tableResizePerformance;
|
|
175
|
+
pluginInjectionApi = _ref3.pluginInjectionApi;
|
|
180
176
|
if (isTableResizingEnabled && !isNested) {
|
|
181
177
|
return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
|
|
182
178
|
className: className,
|
|
@@ -186,8 +182,7 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
|
|
|
186
182
|
getPos: getPos,
|
|
187
183
|
tableRef: tableRef,
|
|
188
184
|
isResizing: isResizing,
|
|
189
|
-
pluginInjectionApi: pluginInjectionApi
|
|
190
|
-
tableResizePerformance: tableResizePerformance
|
|
185
|
+
pluginInjectionApi: pluginInjectionApi
|
|
191
186
|
}, children);
|
|
192
187
|
}
|
|
193
188
|
var tableWidth = isBreakoutEnabled ? (0, _styles.calcTableWidth)(node.attrs.layout, editorWidth) : 'inherit';
|
|
@@ -97,8 +97,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
97
97
|
tableRef = _ref.tableRef,
|
|
98
98
|
displayGuideline = _ref.displayGuideline,
|
|
99
99
|
attachAnalyticsEvent = _ref.attachAnalyticsEvent,
|
|
100
|
-
displayGapCursor = _ref.displayGapCursor
|
|
101
|
-
tableResizePerformance = _ref.tableResizePerformance;
|
|
100
|
+
displayGapCursor = _ref.displayGapCursor;
|
|
102
101
|
var currentGap = (0, _react.useRef)(0);
|
|
103
102
|
// track resizing state - use ref over state to avoid re-render
|
|
104
103
|
var isResizing = (0, _react.useRef)(false);
|
|
@@ -228,10 +227,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
228
227
|
var resizeFrameRatePayloads = (0, _analytics2.generateResizeFrameRatePayloads)({
|
|
229
228
|
docSize: state.doc.nodeSize,
|
|
230
229
|
frameRateSamples: frameRateSamples,
|
|
231
|
-
originalNode: node
|
|
232
|
-
experiments: {
|
|
233
|
-
tableResizePerformance: tableResizePerformance
|
|
234
|
-
}
|
|
230
|
+
originalNode: node
|
|
235
231
|
});
|
|
236
232
|
resizeFrameRatePayloads.forEach(function (payload) {
|
|
237
233
|
var _attachAnalyticsEvent;
|
|
@@ -267,7 +263,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
267
263
|
onResizeStop();
|
|
268
264
|
}
|
|
269
265
|
return newWidth;
|
|
270
|
-
}, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop
|
|
266
|
+
}, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
|
|
271
267
|
var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
|
|
272
268
|
var newWidth = width + step;
|
|
273
269
|
if (newWidth > maxWidth || newWidth < resizerMinWidth) {
|
|
@@ -116,8 +116,7 @@ var generateResizeFrameRatePayloads = exports.generateResizeFrameRatePayloads =
|
|
|
116
116
|
frameRate: frameRateSample,
|
|
117
117
|
nodeSize: props.originalNode.nodeSize,
|
|
118
118
|
docSize: props.docSize,
|
|
119
|
-
isInitialSample: index === 0
|
|
120
|
-
experiments: props.experiments
|
|
119
|
+
isInitialSample: index === 0
|
|
121
120
|
}
|
|
122
121
|
};
|
|
123
122
|
});
|
|
@@ -568,8 +568,7 @@ class TableComponent extends React.Component {
|
|
|
568
568
|
const isNested = isTableNested(view.state, tablePos);
|
|
569
569
|
const topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
|
|
570
570
|
const {
|
|
571
|
-
stickyScrollbar
|
|
572
|
-
tableResizePerformance
|
|
571
|
+
stickyScrollbar
|
|
573
572
|
} = getEditorFeatureFlags();
|
|
574
573
|
return /*#__PURE__*/React.createElement(TableContainer, {
|
|
575
574
|
className: classnames(ClassName.TABLE_CONTAINER, {
|
|
@@ -587,8 +586,7 @@ class TableComponent extends React.Component {
|
|
|
587
586
|
isNested: isNested,
|
|
588
587
|
pluginInjectionApi: pluginInjectionApi,
|
|
589
588
|
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
|
|
590
|
-
isResizing: isResizing
|
|
591
|
-
tableResizePerformance: tableResizePerformance
|
|
589
|
+
isResizing: isResizing
|
|
592
590
|
}, /*#__PURE__*/React.createElement("div", {
|
|
593
591
|
className: ClassName.TABLE_STICKY_SENTINEL_TOP,
|
|
594
592
|
"data-testid": "sticky-sentinel-top"
|
|
@@ -41,8 +41,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
|
|
|
41
41
|
getPos,
|
|
42
42
|
tableRef,
|
|
43
43
|
isResizing,
|
|
44
|
-
pluginInjectionApi
|
|
45
|
-
tableResizePerformance
|
|
44
|
+
pluginInjectionApi
|
|
46
45
|
}) => {
|
|
47
46
|
const containerRef = useRef(null);
|
|
48
47
|
const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
|
|
@@ -124,8 +123,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
|
|
|
124
123
|
tableRef,
|
|
125
124
|
displayGuideline,
|
|
126
125
|
attachAnalyticsEvent,
|
|
127
|
-
displayGapCursor
|
|
128
|
-
tableResizePerformance
|
|
126
|
+
displayGapCursor
|
|
129
127
|
};
|
|
130
128
|
if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
|
|
131
129
|
tableResizerProps = {
|
|
@@ -138,8 +136,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
|
|
|
138
136
|
style: {
|
|
139
137
|
display: 'flex',
|
|
140
138
|
justifyContent: 'center'
|
|
141
|
-
}
|
|
142
|
-
contentEditable: tableResizePerformance && isResizing ? 'false' : undefined
|
|
139
|
+
}
|
|
143
140
|
}, /*#__PURE__*/React.createElement("div", {
|
|
144
141
|
style: {
|
|
145
142
|
width: tableWidthRef.current
|
|
@@ -166,8 +163,7 @@ export const TableContainer = ({
|
|
|
166
163
|
tableRef,
|
|
167
164
|
isNested,
|
|
168
165
|
isResizing,
|
|
169
|
-
pluginInjectionApi
|
|
170
|
-
tableResizePerformance
|
|
166
|
+
pluginInjectionApi
|
|
171
167
|
}) => {
|
|
172
168
|
if (isTableResizingEnabled && !isNested) {
|
|
173
169
|
return /*#__PURE__*/React.createElement(ResizableTableContainer, {
|
|
@@ -178,8 +174,7 @@ export const TableContainer = ({
|
|
|
178
174
|
getPos: getPos,
|
|
179
175
|
tableRef: tableRef,
|
|
180
176
|
isResizing: isResizing,
|
|
181
|
-
pluginInjectionApi: pluginInjectionApi
|
|
182
|
-
tableResizePerformance: tableResizePerformance
|
|
177
|
+
pluginInjectionApi: pluginInjectionApi
|
|
183
178
|
}, children);
|
|
184
179
|
}
|
|
185
180
|
const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';
|
|
@@ -82,8 +82,7 @@ export const TableResizer = ({
|
|
|
82
82
|
tableRef,
|
|
83
83
|
displayGuideline,
|
|
84
84
|
attachAnalyticsEvent,
|
|
85
|
-
displayGapCursor
|
|
86
|
-
tableResizePerformance
|
|
85
|
+
displayGapCursor
|
|
87
86
|
}) => {
|
|
88
87
|
var _findTable, _editorView$state;
|
|
89
88
|
const currentGap = useRef(0);
|
|
@@ -219,10 +218,7 @@ export const TableResizer = ({
|
|
|
219
218
|
const resizeFrameRatePayloads = generateResizeFrameRatePayloads({
|
|
220
219
|
docSize: state.doc.nodeSize,
|
|
221
220
|
frameRateSamples,
|
|
222
|
-
originalNode: node
|
|
223
|
-
experiments: {
|
|
224
|
-
tableResizePerformance
|
|
225
|
-
}
|
|
221
|
+
originalNode: node
|
|
226
222
|
});
|
|
227
223
|
resizeFrameRatePayloads.forEach(payload => {
|
|
228
224
|
var _attachAnalyticsEvent;
|
|
@@ -259,7 +255,7 @@ export const TableResizer = ({
|
|
|
259
255
|
onResizeStop();
|
|
260
256
|
}
|
|
261
257
|
return newWidth;
|
|
262
|
-
}, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop
|
|
258
|
+
}, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
|
|
263
259
|
const handleTableSizeChangeOnKeypress = useCallback(step => {
|
|
264
260
|
const newWidth = width + step;
|
|
265
261
|
if (newWidth > maxWidth || newWidth < resizerMinWidth) {
|
|
@@ -101,8 +101,7 @@ export const generateResizeFrameRatePayloads = props => {
|
|
|
101
101
|
frameRate: frameRateSample,
|
|
102
102
|
nodeSize: props.originalNode.nodeSize,
|
|
103
103
|
docSize: props.docSize,
|
|
104
|
-
isInitialSample: index === 0
|
|
105
|
-
experiments: props.experiments
|
|
104
|
+
isInitialSample: index === 0
|
|
106
105
|
}
|
|
107
106
|
}));
|
|
108
107
|
};
|
|
@@ -564,8 +564,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
564
564
|
var isNested = isTableNested(view.state, tablePos);
|
|
565
565
|
var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
|
|
566
566
|
var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
|
|
567
|
-
stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar
|
|
568
|
-
tableResizePerformance = _getEditorFeatureFlag3.tableResizePerformance;
|
|
567
|
+
stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
|
|
569
568
|
return /*#__PURE__*/React.createElement(TableContainer, {
|
|
570
569
|
className: classnames(ClassName.TABLE_CONTAINER, (_classnames = {}, _defineProperty(_classnames, ClassName.WITH_CONTROLS, allowControls && tableActive), _defineProperty(_classnames, ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _defineProperty(_classnames, ClassName.HOVERED_DELETE_BUTTON, isInDanger), _defineProperty(_classnames, ClassName.TABLE_SELECTED, isTableSelected(view.state.selection)), _classnames)),
|
|
571
570
|
editorView: view,
|
|
@@ -577,8 +576,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
577
576
|
isNested: isNested,
|
|
578
577
|
pluginInjectionApi: pluginInjectionApi,
|
|
579
578
|
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
|
|
580
|
-
isResizing: isResizing
|
|
581
|
-
tableResizePerformance: tableResizePerformance
|
|
579
|
+
isResizing: isResizing
|
|
582
580
|
}, /*#__PURE__*/React.createElement("div", {
|
|
583
581
|
className: ClassName.TABLE_STICKY_SENTINEL_TOP,
|
|
584
582
|
"data-testid": "sticky-sentinel-top"
|
|
@@ -43,8 +43,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
43
43
|
getPos = _ref2.getPos,
|
|
44
44
|
tableRef = _ref2.tableRef,
|
|
45
45
|
isResizing = _ref2.isResizing,
|
|
46
|
-
pluginInjectionApi = _ref2.pluginInjectionApi
|
|
47
|
-
tableResizePerformance = _ref2.tableResizePerformance;
|
|
46
|
+
pluginInjectionApi = _ref2.pluginInjectionApi;
|
|
48
47
|
var containerRef = useRef(null);
|
|
49
48
|
var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
|
|
50
49
|
var updateContainerHeight = useCallback(function (height) {
|
|
@@ -125,8 +124,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
125
124
|
tableRef: tableRef,
|
|
126
125
|
displayGuideline: displayGuideline,
|
|
127
126
|
attachAnalyticsEvent: attachAnalyticsEvent,
|
|
128
|
-
displayGapCursor: displayGapCursor
|
|
129
|
-
tableResizePerformance: tableResizePerformance
|
|
127
|
+
displayGapCursor: displayGapCursor
|
|
130
128
|
};
|
|
131
129
|
if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
|
|
132
130
|
tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
|
|
@@ -138,8 +136,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
138
136
|
style: {
|
|
139
137
|
display: 'flex',
|
|
140
138
|
justifyContent: 'center'
|
|
141
|
-
}
|
|
142
|
-
contentEditable: tableResizePerformance && isResizing ? 'false' : undefined
|
|
139
|
+
}
|
|
143
140
|
}, /*#__PURE__*/React.createElement("div", {
|
|
144
141
|
style: {
|
|
145
142
|
width: tableWidthRef.current
|
|
@@ -165,8 +162,7 @@ export var TableContainer = function TableContainer(_ref3) {
|
|
|
165
162
|
tableRef = _ref3.tableRef,
|
|
166
163
|
isNested = _ref3.isNested,
|
|
167
164
|
isResizing = _ref3.isResizing,
|
|
168
|
-
pluginInjectionApi = _ref3.pluginInjectionApi
|
|
169
|
-
tableResizePerformance = _ref3.tableResizePerformance;
|
|
165
|
+
pluginInjectionApi = _ref3.pluginInjectionApi;
|
|
170
166
|
if (isTableResizingEnabled && !isNested) {
|
|
171
167
|
return /*#__PURE__*/React.createElement(ResizableTableContainer, {
|
|
172
168
|
className: className,
|
|
@@ -176,8 +172,7 @@ export var TableContainer = function TableContainer(_ref3) {
|
|
|
176
172
|
getPos: getPos,
|
|
177
173
|
tableRef: tableRef,
|
|
178
174
|
isResizing: isResizing,
|
|
179
|
-
pluginInjectionApi: pluginInjectionApi
|
|
180
|
-
tableResizePerformance: tableResizePerformance
|
|
175
|
+
pluginInjectionApi: pluginInjectionApi
|
|
181
176
|
}, children);
|
|
182
177
|
}
|
|
183
178
|
var tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';
|
|
@@ -87,8 +87,7 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
87
87
|
tableRef = _ref.tableRef,
|
|
88
88
|
displayGuideline = _ref.displayGuideline,
|
|
89
89
|
attachAnalyticsEvent = _ref.attachAnalyticsEvent,
|
|
90
|
-
displayGapCursor = _ref.displayGapCursor
|
|
91
|
-
tableResizePerformance = _ref.tableResizePerformance;
|
|
90
|
+
displayGapCursor = _ref.displayGapCursor;
|
|
92
91
|
var currentGap = useRef(0);
|
|
93
92
|
// track resizing state - use ref over state to avoid re-render
|
|
94
93
|
var isResizing = useRef(false);
|
|
@@ -218,10 +217,7 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
218
217
|
var resizeFrameRatePayloads = generateResizeFrameRatePayloads({
|
|
219
218
|
docSize: state.doc.nodeSize,
|
|
220
219
|
frameRateSamples: frameRateSamples,
|
|
221
|
-
originalNode: node
|
|
222
|
-
experiments: {
|
|
223
|
-
tableResizePerformance: tableResizePerformance
|
|
224
|
-
}
|
|
220
|
+
originalNode: node
|
|
225
221
|
});
|
|
226
222
|
resizeFrameRatePayloads.forEach(function (payload) {
|
|
227
223
|
var _attachAnalyticsEvent;
|
|
@@ -257,7 +253,7 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
257
253
|
onResizeStop();
|
|
258
254
|
}
|
|
259
255
|
return newWidth;
|
|
260
|
-
}, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop
|
|
256
|
+
}, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
|
|
261
257
|
var handleTableSizeChangeOnKeypress = useCallback(function (step) {
|
|
262
258
|
var newWidth = width + step;
|
|
263
259
|
if (newWidth > maxWidth || newWidth < resizerMinWidth) {
|
|
@@ -107,8 +107,7 @@ export var generateResizeFrameRatePayloads = function generateResizeFrameRatePay
|
|
|
107
107
|
frameRate: frameRateSample,
|
|
108
108
|
nodeSize: props.originalNode.nodeSize,
|
|
109
109
|
docSize: props.docSize,
|
|
110
|
-
isInitialSample: index === 0
|
|
111
|
-
experiments: props.experiments
|
|
110
|
+
isInitialSample: index === 0
|
|
112
111
|
}
|
|
113
112
|
};
|
|
114
113
|
});
|
|
@@ -24,9 +24,8 @@ type ResizableTableContainerProps = {
|
|
|
24
24
|
tableRef: HTMLTableElement;
|
|
25
25
|
isResizing?: boolean;
|
|
26
26
|
pluginInjectionApi?: PluginInjectionAPI;
|
|
27
|
-
tableResizePerformance?: boolean;
|
|
28
27
|
};
|
|
29
|
-
export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi,
|
|
28
|
+
export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
|
|
30
29
|
type TableContainerProps = {
|
|
31
30
|
node: PMNode;
|
|
32
31
|
className: string;
|
|
@@ -39,7 +38,6 @@ type TableContainerProps = {
|
|
|
39
38
|
isNested: boolean;
|
|
40
39
|
isResizing?: boolean;
|
|
41
40
|
pluginInjectionApi?: PluginInjectionAPI;
|
|
42
|
-
tableResizePerformance?: boolean;
|
|
43
41
|
};
|
|
44
|
-
export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi,
|
|
42
|
+
export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
|
|
45
43
|
export {};
|
|
@@ -16,11 +16,10 @@ interface TableResizerProps {
|
|
|
16
16
|
displayGuideline: (guideline: GuidelineConfig[]) => boolean;
|
|
17
17
|
attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
|
|
18
18
|
displayGapCursor: (toggle: boolean) => boolean;
|
|
19
|
-
tableResizePerformance?: boolean;
|
|
20
19
|
}
|
|
21
20
|
export interface TableResizerImprovementProps extends TableResizerProps {
|
|
22
21
|
onResizeStop?: () => void;
|
|
23
22
|
onResizeStart?: () => void;
|
|
24
23
|
}
|
|
25
|
-
export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor,
|
|
24
|
+
export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
|
|
26
25
|
export {};
|
|
@@ -33,7 +33,6 @@ export declare const generateResizeFrameRatePayloads: (props: {
|
|
|
33
33
|
docSize: number;
|
|
34
34
|
frameRateSamples: number[];
|
|
35
35
|
originalNode: PMNode;
|
|
36
|
-
experiments?: Record<string, boolean | undefined>;
|
|
37
36
|
}) => TableEventPayload[];
|
|
38
37
|
/**
|
|
39
38
|
* Measures the framerate of a component over a given time period.
|
|
@@ -24,9 +24,8 @@ type ResizableTableContainerProps = {
|
|
|
24
24
|
tableRef: HTMLTableElement;
|
|
25
25
|
isResizing?: boolean;
|
|
26
26
|
pluginInjectionApi?: PluginInjectionAPI;
|
|
27
|
-
tableResizePerformance?: boolean;
|
|
28
27
|
};
|
|
29
|
-
export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi,
|
|
28
|
+
export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
|
|
30
29
|
type TableContainerProps = {
|
|
31
30
|
node: PMNode;
|
|
32
31
|
className: string;
|
|
@@ -39,7 +38,6 @@ type TableContainerProps = {
|
|
|
39
38
|
isNested: boolean;
|
|
40
39
|
isResizing?: boolean;
|
|
41
40
|
pluginInjectionApi?: PluginInjectionAPI;
|
|
42
|
-
tableResizePerformance?: boolean;
|
|
43
41
|
};
|
|
44
|
-
export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi,
|
|
42
|
+
export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
|
|
45
43
|
export {};
|
|
@@ -16,11 +16,10 @@ interface TableResizerProps {
|
|
|
16
16
|
displayGuideline: (guideline: GuidelineConfig[]) => boolean;
|
|
17
17
|
attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
|
|
18
18
|
displayGapCursor: (toggle: boolean) => boolean;
|
|
19
|
-
tableResizePerformance?: boolean;
|
|
20
19
|
}
|
|
21
20
|
export interface TableResizerImprovementProps extends TableResizerProps {
|
|
22
21
|
onResizeStop?: () => void;
|
|
23
22
|
onResizeStart?: () => void;
|
|
24
23
|
}
|
|
25
|
-
export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor,
|
|
24
|
+
export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
|
|
26
25
|
export {};
|
|
@@ -33,7 +33,6 @@ export declare const generateResizeFrameRatePayloads: (props: {
|
|
|
33
33
|
docSize: number;
|
|
34
34
|
frameRateSamples: number[];
|
|
35
35
|
originalNode: PMNode;
|
|
36
|
-
experiments?: Record<string, boolean | undefined>;
|
|
37
36
|
}) => TableEventPayload[];
|
|
38
37
|
/**
|
|
39
38
|
* Measures the framerate of a component over a given time period.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.4.
|
|
3
|
+
"version": "7.4.2",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/adf-schema": "^35.5.1",
|
|
32
32
|
"@atlaskit/custom-steps": "^0.0.13",
|
|
33
|
-
"@atlaskit/editor-common": "^78.
|
|
33
|
+
"@atlaskit/editor-common": "^78.8.0",
|
|
34
34
|
"@atlaskit/editor-palette": "1.5.2",
|
|
35
35
|
"@atlaskit/editor-plugin-analytics": "^1.0.0",
|
|
36
36
|
"@atlaskit/editor-plugin-content-insertion": "^1.0.0",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@atlaskit/pragmatic-drag-and-drop": "^1.0.0",
|
|
47
47
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
|
|
48
48
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
|
|
49
|
-
"@atlaskit/primitives": "^3.
|
|
49
|
+
"@atlaskit/primitives": "^3.1.0",
|
|
50
50
|
"@atlaskit/theme": "^12.6.0",
|
|
51
51
|
"@atlaskit/toggle": "^13.0.0",
|
|
52
52
|
"@atlaskit/tokens": "^1.38.0",
|
|
@@ -535,7 +535,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
|
|
|
535
535
|
shadowPadding +
|
|
536
536
|
2;
|
|
537
537
|
|
|
538
|
-
const { stickyScrollbar
|
|
538
|
+
const { stickyScrollbar } = getEditorFeatureFlags();
|
|
539
539
|
|
|
540
540
|
return (
|
|
541
541
|
<TableContainer
|
|
@@ -555,7 +555,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
|
|
|
555
555
|
pluginInjectionApi={pluginInjectionApi}
|
|
556
556
|
isTableResizingEnabled={options?.isTableResizingEnabled}
|
|
557
557
|
isResizing={isResizing}
|
|
558
|
-
tableResizePerformance={tableResizePerformance}
|
|
559
558
|
>
|
|
560
559
|
<div
|
|
561
560
|
className={ClassName.TABLE_STICKY_SENTINEL_TOP}
|
|
@@ -75,7 +75,6 @@ type ResizableTableContainerProps = {
|
|
|
75
75
|
tableRef: HTMLTableElement;
|
|
76
76
|
isResizing?: boolean;
|
|
77
77
|
pluginInjectionApi?: PluginInjectionAPI;
|
|
78
|
-
tableResizePerformance?: boolean;
|
|
79
78
|
};
|
|
80
79
|
|
|
81
80
|
export const ResizableTableContainer = React.memo(
|
|
@@ -89,7 +88,6 @@ export const ResizableTableContainer = React.memo(
|
|
|
89
88
|
tableRef,
|
|
90
89
|
isResizing,
|
|
91
90
|
pluginInjectionApi,
|
|
92
|
-
tableResizePerformance,
|
|
93
91
|
}: PropsWithChildren<ResizableTableContainerProps>) => {
|
|
94
92
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
95
93
|
const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
|
|
@@ -209,7 +207,6 @@ export const ResizableTableContainer = React.memo(
|
|
|
209
207
|
displayGuideline,
|
|
210
208
|
attachAnalyticsEvent,
|
|
211
209
|
displayGapCursor,
|
|
212
|
-
tableResizePerformance,
|
|
213
210
|
};
|
|
214
211
|
|
|
215
212
|
if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
|
|
@@ -226,9 +223,6 @@ export const ResizableTableContainer = React.memo(
|
|
|
226
223
|
display: 'flex',
|
|
227
224
|
justifyContent: 'center',
|
|
228
225
|
}}
|
|
229
|
-
contentEditable={
|
|
230
|
-
tableResizePerformance && isResizing ? 'false' : undefined
|
|
231
|
-
}
|
|
232
226
|
>
|
|
233
227
|
<div
|
|
234
228
|
style={{
|
|
@@ -260,7 +254,6 @@ type TableContainerProps = {
|
|
|
260
254
|
isNested: boolean;
|
|
261
255
|
isResizing?: boolean;
|
|
262
256
|
pluginInjectionApi?: PluginInjectionAPI;
|
|
263
|
-
tableResizePerformance?: boolean;
|
|
264
257
|
};
|
|
265
258
|
|
|
266
259
|
export const TableContainer = ({
|
|
@@ -276,7 +269,6 @@ export const TableContainer = ({
|
|
|
276
269
|
isNested,
|
|
277
270
|
isResizing,
|
|
278
271
|
pluginInjectionApi,
|
|
279
|
-
tableResizePerformance,
|
|
280
272
|
}: PropsWithChildren<TableContainerProps>) => {
|
|
281
273
|
if (isTableResizingEnabled && !isNested) {
|
|
282
274
|
return (
|
|
@@ -289,7 +281,6 @@ export const TableContainer = ({
|
|
|
289
281
|
tableRef={tableRef}
|
|
290
282
|
isResizing={isResizing}
|
|
291
283
|
pluginInjectionApi={pluginInjectionApi}
|
|
292
|
-
tableResizePerformance={tableResizePerformance}
|
|
293
284
|
>
|
|
294
285
|
{children}
|
|
295
286
|
</ResizableTableContainer>
|
|
@@ -68,7 +68,6 @@ interface TableResizerProps {
|
|
|
68
68
|
payload: TableEventPayload,
|
|
69
69
|
) => ((tr: Transaction) => boolean) | undefined;
|
|
70
70
|
displayGapCursor: (toggle: boolean) => boolean;
|
|
71
|
-
tableResizePerformance?: boolean;
|
|
72
71
|
}
|
|
73
72
|
|
|
74
73
|
export interface TableResizerImprovementProps extends TableResizerProps {
|
|
@@ -163,7 +162,6 @@ export const TableResizer = ({
|
|
|
163
162
|
displayGuideline,
|
|
164
163
|
attachAnalyticsEvent,
|
|
165
164
|
displayGapCursor,
|
|
166
|
-
tableResizePerformance,
|
|
167
165
|
}: PropsWithChildren<TableResizerImprovementProps>) => {
|
|
168
166
|
const currentGap = useRef(0);
|
|
169
167
|
// track resizing state - use ref over state to avoid re-render
|
|
@@ -356,9 +354,6 @@ export const TableResizer = ({
|
|
|
356
354
|
docSize: state.doc.nodeSize,
|
|
357
355
|
frameRateSamples,
|
|
358
356
|
originalNode: node,
|
|
359
|
-
experiments: {
|
|
360
|
-
tableResizePerformance,
|
|
361
|
-
},
|
|
362
357
|
});
|
|
363
358
|
resizeFrameRatePayloads.forEach((payload) => {
|
|
364
359
|
attachAnalyticsEvent(payload)?.(tr);
|
|
@@ -421,7 +416,6 @@ export const TableResizer = ({
|
|
|
421
416
|
attachAnalyticsEvent,
|
|
422
417
|
endMeasure,
|
|
423
418
|
onResizeStop,
|
|
424
|
-
tableResizePerformance,
|
|
425
419
|
],
|
|
426
420
|
);
|
|
427
421
|
|
package/src/utils/analytics.ts
CHANGED
|
@@ -144,7 +144,6 @@ export const generateResizeFrameRatePayloads = (props: {
|
|
|
144
144
|
docSize: number;
|
|
145
145
|
frameRateSamples: number[];
|
|
146
146
|
originalNode: PMNode;
|
|
147
|
-
experiments?: Record<string, boolean | undefined>;
|
|
148
147
|
}): TableEventPayload[] => {
|
|
149
148
|
const reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(
|
|
150
149
|
props.frameRateSamples,
|
|
@@ -158,7 +157,6 @@ export const generateResizeFrameRatePayloads = (props: {
|
|
|
158
157
|
nodeSize: props.originalNode.nodeSize,
|
|
159
158
|
docSize: props.docSize,
|
|
160
159
|
isInitialSample: index === 0,
|
|
161
|
-
experiments: props.experiments,
|
|
162
160
|
},
|
|
163
161
|
}));
|
|
164
162
|
};
|