@atlaskit/editor-plugin-table 10.9.3 → 10.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/nodeviews/TableComponentWithSharedState.js +72 -19
- package/dist/es2019/nodeviews/TableComponentWithSharedState.js +72 -20
- package/dist/esm/nodeviews/TableComponentWithSharedState.js +72 -19
- package/package.json +1 -1
- package/src/nodeviews/TableComponentWithSharedState.tsx +127 -21
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 10.9.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#145762](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145762)
|
|
8
|
+
[`e6f1c6c538e39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e6f1c6c538e39) -
|
|
9
|
+
Enable useSharedPluginStateSelector in Table
|
|
10
|
+
|
|
3
11
|
## 10.9.3
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -7,11 +7,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.TableComponentWithSharedState = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
10
|
+
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
10
11
|
var _editorTables = require("@atlaskit/editor-tables");
|
|
12
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
11
13
|
var _TableComponent = _interopRequireDefault(require("./TableComponent"));
|
|
12
14
|
// Ignored via go/ees005
|
|
13
15
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14
16
|
|
|
17
|
+
var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
|
|
18
|
+
var value = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, "table.".concat(key), {
|
|
19
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
20
|
+
});
|
|
21
|
+
return value;
|
|
22
|
+
};
|
|
23
|
+
|
|
15
24
|
/**
|
|
16
25
|
* Use useSharedPluginState to control re-renders from plugin dependencies
|
|
17
26
|
*/
|
|
@@ -29,27 +38,68 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
|
|
|
29
38
|
forwardRef = _ref.forwardRef,
|
|
30
39
|
allowTableAlignment = _ref.allowTableAlignment,
|
|
31
40
|
allowTableResizing = _ref.allowTableResizing;
|
|
32
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode']
|
|
41
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
|
|
42
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
|
|
43
|
+
}),
|
|
33
44
|
widthState = _useSharedPluginState.widthState,
|
|
34
45
|
tableState = _useSharedPluginState.tableState,
|
|
35
46
|
mediaState = _useSharedPluginState.mediaState,
|
|
36
47
|
selectionState = _useSharedPluginState.selectionState,
|
|
37
48
|
editorViewModeState = _useSharedPluginState.editorViewModeState;
|
|
38
|
-
var
|
|
39
|
-
|
|
49
|
+
var isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
|
|
50
|
+
var isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
|
|
51
|
+
var isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
|
|
52
|
+
var orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
|
|
53
|
+
var isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
|
|
54
|
+
var isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
|
|
55
|
+
var hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
|
|
56
|
+
var hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
|
|
57
|
+
var isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
|
|
58
|
+
var isWholeTableInDangerSelector = useSharedTablePluginStateSelector(api, 'isWholeTableInDanger');
|
|
59
|
+
|
|
60
|
+
// mediaState
|
|
61
|
+
var isFullscreenSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.isFullscreen', {
|
|
62
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
63
|
+
});
|
|
64
|
+
var isFullscreen = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isFullscreenSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen;
|
|
65
|
+
|
|
66
|
+
// selectionState
|
|
67
|
+
var selectionSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection', {
|
|
68
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
69
|
+
});
|
|
70
|
+
var selection = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectionSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
|
|
71
|
+
|
|
72
|
+
// editorViewModeState
|
|
73
|
+
var editorViewModeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode', {
|
|
74
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
75
|
+
});
|
|
76
|
+
var mode = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
77
|
+
var isLivePageViewMode = mode === 'view';
|
|
78
|
+
|
|
79
|
+
// widthState
|
|
80
|
+
var widthSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'width.width', {
|
|
81
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
82
|
+
});
|
|
83
|
+
var width = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
|
|
84
|
+
var lineLengthSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'width.lineLength', {
|
|
85
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
86
|
+
});
|
|
87
|
+
var lineLength = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
|
|
88
|
+
if ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false) && !tableState) {
|
|
40
89
|
return null;
|
|
41
90
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
91
|
+
|
|
92
|
+
// tableState
|
|
93
|
+
var isTableResizing = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isTableResizingSelector : tableState.isTableResizing;
|
|
94
|
+
var isHeaderColumnEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isHeaderColumnEnabledSelector : tableState.isHeaderColumnEnabled;
|
|
95
|
+
var isHeaderRowEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isHeaderRowEnabledSelector : tableState.isHeaderRowEnabled;
|
|
96
|
+
var ordering = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? orderingSelector : tableState.ordering;
|
|
97
|
+
var isResizing = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isResizingSelector : tableState.isResizing;
|
|
98
|
+
var isInDanger = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isInDangerSelector : tableState.isInDanger;
|
|
99
|
+
var hoveredCell = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hoveredCellSelector : tableState.hoveredCell;
|
|
100
|
+
var hoveredRows = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState.hoveredRows;
|
|
101
|
+
var isTableHovered = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isTableHoveredSelector : tableState.isTableHovered;
|
|
102
|
+
var isWholeTableInDanger = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isWholeTableInDangerSelector : tableState.isWholeTableInDanger;
|
|
53
103
|
|
|
54
104
|
/**
|
|
55
105
|
* ED-19810
|
|
@@ -70,7 +120,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
|
|
|
70
120
|
allowColumnResizing: allowColumnResizing,
|
|
71
121
|
eventDispatcher: eventDispatcher,
|
|
72
122
|
getPos: getPos,
|
|
73
|
-
isMediaFullscreen:
|
|
123
|
+
isMediaFullscreen: isFullscreen,
|
|
74
124
|
options: options,
|
|
75
125
|
allowControls: allowControls,
|
|
76
126
|
isHeaderRowEnabled: isHeaderRowEnabled,
|
|
@@ -82,11 +132,14 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
|
|
|
82
132
|
tableActive: tableActive && !isLivePageViewMode,
|
|
83
133
|
ordering: ordering,
|
|
84
134
|
isResizing: isResizing,
|
|
85
|
-
getNode: getNode
|
|
135
|
+
getNode: getNode,
|
|
136
|
+
containerWidth: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? {
|
|
137
|
+
width: width !== null && width !== void 0 ? width : 0,
|
|
138
|
+
lineLength: lineLength
|
|
139
|
+
} :
|
|
86
140
|
// Ignored via go/ees005
|
|
87
141
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
88
|
-
,
|
|
89
|
-
containerWidth: widthState,
|
|
142
|
+
widthState,
|
|
90
143
|
contentDOM: forwardRef,
|
|
91
144
|
getEditorFeatureFlags: getEditorFeatureFlags,
|
|
92
145
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -96,6 +149,6 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
|
|
|
96
149
|
hoveredCell: hoveredCell,
|
|
97
150
|
isTableHovered: isTableHovered,
|
|
98
151
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
99
|
-
selection:
|
|
152
|
+
selection: selection
|
|
100
153
|
});
|
|
101
154
|
};
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
3
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
3
4
|
import { findTable } from '@atlaskit/editor-tables';
|
|
5
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
6
|
import TableComponent from './TableComponent';
|
|
5
7
|
|
|
6
8
|
// Ignored via go/ees005
|
|
7
9
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8
10
|
|
|
11
|
+
const useSharedTablePluginStateSelector = (api, key) => {
|
|
12
|
+
const value = useSharedPluginStateSelector(api, `table.${key}`, {
|
|
13
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
14
|
+
});
|
|
15
|
+
return value;
|
|
16
|
+
};
|
|
17
|
+
|
|
9
18
|
/**
|
|
10
19
|
* Use useSharedPluginState to control re-renders from plugin dependencies
|
|
11
20
|
*/
|
|
@@ -30,23 +39,63 @@ export const TableComponentWithSharedState = ({
|
|
|
30
39
|
mediaState,
|
|
31
40
|
selectionState,
|
|
32
41
|
editorViewModeState
|
|
33
|
-
} = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']
|
|
34
|
-
|
|
35
|
-
|
|
42
|
+
} = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
|
|
43
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
44
|
+
});
|
|
45
|
+
const isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
|
|
46
|
+
const isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
|
|
47
|
+
const isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
|
|
48
|
+
const orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
|
|
49
|
+
const isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
|
|
50
|
+
const isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
|
|
51
|
+
const hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
|
|
52
|
+
const hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
|
|
53
|
+
const isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
|
|
54
|
+
const isWholeTableInDangerSelector = useSharedTablePluginStateSelector(api, 'isWholeTableInDanger');
|
|
55
|
+
|
|
56
|
+
// mediaState
|
|
57
|
+
const isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
|
|
58
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
59
|
+
});
|
|
60
|
+
const isFullscreen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullscreenSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen;
|
|
61
|
+
|
|
62
|
+
// selectionState
|
|
63
|
+
const selectionSelector = useSharedPluginStateSelector(api, 'selection.selection', {
|
|
64
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
65
|
+
});
|
|
66
|
+
const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
|
|
67
|
+
|
|
68
|
+
// editorViewModeState
|
|
69
|
+
const editorViewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
|
|
70
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
71
|
+
});
|
|
72
|
+
const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
73
|
+
const isLivePageViewMode = mode === 'view';
|
|
74
|
+
|
|
75
|
+
// widthState
|
|
76
|
+
const widthSelector = useSharedPluginStateSelector(api, 'width.width', {
|
|
77
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
78
|
+
});
|
|
79
|
+
const width = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
|
|
80
|
+
const lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
|
|
81
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
82
|
+
});
|
|
83
|
+
const lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
|
|
84
|
+
if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
|
|
36
85
|
return null;
|
|
37
86
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
87
|
+
|
|
88
|
+
// tableState
|
|
89
|
+
const isTableResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableResizingSelector : tableState.isTableResizing;
|
|
90
|
+
const isHeaderColumnEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderColumnEnabledSelector : tableState.isHeaderColumnEnabled;
|
|
91
|
+
const isHeaderRowEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderRowEnabledSelector : tableState.isHeaderRowEnabled;
|
|
92
|
+
const ordering = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? orderingSelector : tableState.ordering;
|
|
93
|
+
const isResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isResizingSelector : tableState.isResizing;
|
|
94
|
+
const isInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInDangerSelector : tableState.isInDanger;
|
|
95
|
+
const hoveredCell = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredCellSelector : tableState.hoveredCell;
|
|
96
|
+
const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState.hoveredRows;
|
|
97
|
+
const isTableHovered = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableHoveredSelector : tableState.isTableHovered;
|
|
98
|
+
const isWholeTableInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isWholeTableInDangerSelector : tableState.isWholeTableInDanger;
|
|
50
99
|
|
|
51
100
|
/**
|
|
52
101
|
* ED-19810
|
|
@@ -67,7 +116,7 @@ export const TableComponentWithSharedState = ({
|
|
|
67
116
|
allowColumnResizing: allowColumnResizing,
|
|
68
117
|
eventDispatcher: eventDispatcher,
|
|
69
118
|
getPos: getPos,
|
|
70
|
-
isMediaFullscreen:
|
|
119
|
+
isMediaFullscreen: isFullscreen,
|
|
71
120
|
options: options,
|
|
72
121
|
allowControls: allowControls,
|
|
73
122
|
isHeaderRowEnabled: isHeaderRowEnabled,
|
|
@@ -79,11 +128,14 @@ export const TableComponentWithSharedState = ({
|
|
|
79
128
|
tableActive: tableActive && !isLivePageViewMode,
|
|
80
129
|
ordering: ordering,
|
|
81
130
|
isResizing: isResizing,
|
|
82
|
-
getNode: getNode
|
|
131
|
+
getNode: getNode,
|
|
132
|
+
containerWidth: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? {
|
|
133
|
+
width: width !== null && width !== void 0 ? width : 0,
|
|
134
|
+
lineLength
|
|
135
|
+
} :
|
|
83
136
|
// Ignored via go/ees005
|
|
84
137
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
85
|
-
,
|
|
86
|
-
containerWidth: widthState,
|
|
138
|
+
widthState,
|
|
87
139
|
contentDOM: forwardRef,
|
|
88
140
|
getEditorFeatureFlags: getEditorFeatureFlags,
|
|
89
141
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -93,6 +145,6 @@ export const TableComponentWithSharedState = ({
|
|
|
93
145
|
hoveredCell: hoveredCell,
|
|
94
146
|
isTableHovered: isTableHovered,
|
|
95
147
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
96
|
-
selection:
|
|
148
|
+
selection: selection
|
|
97
149
|
});
|
|
98
150
|
};
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
3
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
3
4
|
import { findTable } from '@atlaskit/editor-tables';
|
|
5
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
6
|
import TableComponent from './TableComponent';
|
|
5
7
|
|
|
6
8
|
// Ignored via go/ees005
|
|
7
9
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8
10
|
|
|
11
|
+
var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
|
|
12
|
+
var value = useSharedPluginStateSelector(api, "table.".concat(key), {
|
|
13
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
14
|
+
});
|
|
15
|
+
return value;
|
|
16
|
+
};
|
|
17
|
+
|
|
9
18
|
/**
|
|
10
19
|
* Use useSharedPluginState to control re-renders from plugin dependencies
|
|
11
20
|
*/
|
|
@@ -23,27 +32,68 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
23
32
|
forwardRef = _ref.forwardRef,
|
|
24
33
|
allowTableAlignment = _ref.allowTableAlignment,
|
|
25
34
|
allowTableResizing = _ref.allowTableResizing;
|
|
26
|
-
var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']
|
|
35
|
+
var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
|
|
36
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
37
|
+
}),
|
|
27
38
|
widthState = _useSharedPluginState.widthState,
|
|
28
39
|
tableState = _useSharedPluginState.tableState,
|
|
29
40
|
mediaState = _useSharedPluginState.mediaState,
|
|
30
41
|
selectionState = _useSharedPluginState.selectionState,
|
|
31
42
|
editorViewModeState = _useSharedPluginState.editorViewModeState;
|
|
32
|
-
var
|
|
33
|
-
|
|
43
|
+
var isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
|
|
44
|
+
var isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
|
|
45
|
+
var isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
|
|
46
|
+
var orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
|
|
47
|
+
var isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
|
|
48
|
+
var isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
|
|
49
|
+
var hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
|
|
50
|
+
var hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
|
|
51
|
+
var isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
|
|
52
|
+
var isWholeTableInDangerSelector = useSharedTablePluginStateSelector(api, 'isWholeTableInDanger');
|
|
53
|
+
|
|
54
|
+
// mediaState
|
|
55
|
+
var isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
|
|
56
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
57
|
+
});
|
|
58
|
+
var isFullscreen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullscreenSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen;
|
|
59
|
+
|
|
60
|
+
// selectionState
|
|
61
|
+
var selectionSelector = useSharedPluginStateSelector(api, 'selection.selection', {
|
|
62
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
63
|
+
});
|
|
64
|
+
var selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
|
|
65
|
+
|
|
66
|
+
// editorViewModeState
|
|
67
|
+
var editorViewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
|
|
68
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
69
|
+
});
|
|
70
|
+
var mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
71
|
+
var isLivePageViewMode = mode === 'view';
|
|
72
|
+
|
|
73
|
+
// widthState
|
|
74
|
+
var widthSelector = useSharedPluginStateSelector(api, 'width.width', {
|
|
75
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
76
|
+
});
|
|
77
|
+
var width = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
|
|
78
|
+
var lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
|
|
79
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
80
|
+
});
|
|
81
|
+
var lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
|
|
82
|
+
if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
|
|
34
83
|
return null;
|
|
35
84
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
85
|
+
|
|
86
|
+
// tableState
|
|
87
|
+
var isTableResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableResizingSelector : tableState.isTableResizing;
|
|
88
|
+
var isHeaderColumnEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderColumnEnabledSelector : tableState.isHeaderColumnEnabled;
|
|
89
|
+
var isHeaderRowEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderRowEnabledSelector : tableState.isHeaderRowEnabled;
|
|
90
|
+
var ordering = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? orderingSelector : tableState.ordering;
|
|
91
|
+
var isResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isResizingSelector : tableState.isResizing;
|
|
92
|
+
var isInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInDangerSelector : tableState.isInDanger;
|
|
93
|
+
var hoveredCell = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredCellSelector : tableState.hoveredCell;
|
|
94
|
+
var hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState.hoveredRows;
|
|
95
|
+
var isTableHovered = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableHoveredSelector : tableState.isTableHovered;
|
|
96
|
+
var isWholeTableInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isWholeTableInDangerSelector : tableState.isWholeTableInDanger;
|
|
47
97
|
|
|
48
98
|
/**
|
|
49
99
|
* ED-19810
|
|
@@ -64,7 +114,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
64
114
|
allowColumnResizing: allowColumnResizing,
|
|
65
115
|
eventDispatcher: eventDispatcher,
|
|
66
116
|
getPos: getPos,
|
|
67
|
-
isMediaFullscreen:
|
|
117
|
+
isMediaFullscreen: isFullscreen,
|
|
68
118
|
options: options,
|
|
69
119
|
allowControls: allowControls,
|
|
70
120
|
isHeaderRowEnabled: isHeaderRowEnabled,
|
|
@@ -76,11 +126,14 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
76
126
|
tableActive: tableActive && !isLivePageViewMode,
|
|
77
127
|
ordering: ordering,
|
|
78
128
|
isResizing: isResizing,
|
|
79
|
-
getNode: getNode
|
|
129
|
+
getNode: getNode,
|
|
130
|
+
containerWidth: editorExperiment('platform_editor_usesharedpluginstateselector', true) ? {
|
|
131
|
+
width: width !== null && width !== void 0 ? width : 0,
|
|
132
|
+
lineLength: lineLength
|
|
133
|
+
} :
|
|
80
134
|
// Ignored via go/ees005
|
|
81
135
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
82
|
-
,
|
|
83
|
-
containerWidth: widthState,
|
|
136
|
+
widthState,
|
|
84
137
|
contentDOM: forwardRef,
|
|
85
138
|
getEditorFeatureFlags: getEditorFeatureFlags,
|
|
86
139
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -90,6 +143,6 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
90
143
|
hoveredCell: hoveredCell,
|
|
91
144
|
isTableHovered: isTableHovered,
|
|
92
145
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
93
|
-
selection:
|
|
146
|
+
selection: selection
|
|
94
147
|
});
|
|
95
148
|
};
|
package/package.json
CHANGED
|
@@ -3,11 +3,18 @@ import React from 'react';
|
|
|
3
3
|
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
4
4
|
import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
|
|
5
5
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
6
|
-
import type {
|
|
6
|
+
import type {
|
|
7
|
+
ExtractInjectionAPI,
|
|
8
|
+
GetEditorFeatureFlags,
|
|
9
|
+
getPosHandlerNode,
|
|
10
|
+
} from '@atlaskit/editor-common/types';
|
|
11
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
7
12
|
import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
|
|
8
13
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
9
14
|
import { findTable } from '@atlaskit/editor-tables';
|
|
15
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
16
|
|
|
17
|
+
import { TablePlugin } from '../tablePluginType';
|
|
11
18
|
import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
|
|
12
19
|
|
|
13
20
|
import TableComponent from './TableComponent';
|
|
@@ -33,6 +40,16 @@ type TableComponentWithSharedStateProps = {
|
|
|
33
40
|
allowTableResizing?: boolean;
|
|
34
41
|
};
|
|
35
42
|
|
|
43
|
+
const useSharedTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
|
|
44
|
+
api: ExtractInjectionAPI<TablePlugin> | undefined,
|
|
45
|
+
key: K,
|
|
46
|
+
) => {
|
|
47
|
+
const value = useSharedPluginStateSelector(api, `table.${key}` as never, {
|
|
48
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
|
|
49
|
+
}) as TableSharedStateInternal[K];
|
|
50
|
+
return value;
|
|
51
|
+
};
|
|
52
|
+
|
|
36
53
|
/**
|
|
37
54
|
* Use useSharedPluginState to control re-renders from plugin dependencies
|
|
38
55
|
*/
|
|
@@ -52,26 +69,108 @@ export const TableComponentWithSharedState = ({
|
|
|
52
69
|
allowTableResizing,
|
|
53
70
|
}: TableComponentWithSharedStateProps) => {
|
|
54
71
|
const { widthState, tableState, mediaState, selectionState, editorViewModeState } =
|
|
55
|
-
useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']
|
|
72
|
+
useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
|
|
73
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
const isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
|
|
77
|
+
const isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(
|
|
78
|
+
api,
|
|
79
|
+
'isHeaderColumnEnabled',
|
|
80
|
+
);
|
|
81
|
+
const isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
|
|
82
|
+
const orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
|
|
83
|
+
const isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
|
|
84
|
+
const isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
|
|
85
|
+
const hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
|
|
86
|
+
const hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
|
|
87
|
+
const isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
|
|
88
|
+
const isWholeTableInDangerSelector = useSharedTablePluginStateSelector(
|
|
89
|
+
api,
|
|
90
|
+
'isWholeTableInDanger',
|
|
91
|
+
);
|
|
92
|
+
|
|
93
|
+
// mediaState
|
|
94
|
+
const isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
|
|
95
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
|
|
96
|
+
});
|
|
97
|
+
const isFullscreen = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
98
|
+
? isFullscreenSelector
|
|
99
|
+
: mediaState?.isFullscreen;
|
|
100
|
+
|
|
101
|
+
// selectionState
|
|
102
|
+
const selectionSelector = useSharedPluginStateSelector(api, 'selection.selection', {
|
|
103
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
|
|
104
|
+
});
|
|
105
|
+
const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
106
|
+
? selectionSelector
|
|
107
|
+
: selectionState?.selection;
|
|
108
|
+
|
|
109
|
+
// editorViewModeState
|
|
110
|
+
const editorViewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
|
|
111
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
|
|
112
|
+
});
|
|
113
|
+
const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
114
|
+
? editorViewModeSelector
|
|
115
|
+
: editorViewModeState?.mode;
|
|
116
|
+
const isLivePageViewMode = mode === 'view';
|
|
117
|
+
|
|
118
|
+
// widthState
|
|
119
|
+
const widthSelector = useSharedPluginStateSelector(api, 'width.width', {
|
|
120
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
|
|
121
|
+
});
|
|
122
|
+
const width = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
123
|
+
? widthSelector
|
|
124
|
+
: widthState?.width;
|
|
56
125
|
|
|
57
|
-
const
|
|
126
|
+
const lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
|
|
127
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
|
|
128
|
+
});
|
|
129
|
+
const lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
130
|
+
? lineLengthSelector
|
|
131
|
+
: widthState?.lineLength;
|
|
58
132
|
|
|
59
|
-
if (!tableState) {
|
|
133
|
+
if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
|
|
60
134
|
return null;
|
|
61
135
|
}
|
|
62
136
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
137
|
+
// tableState
|
|
138
|
+
const isTableResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
139
|
+
? isTableResizingSelector
|
|
140
|
+
: (tableState as TableSharedStateInternal).isTableResizing;
|
|
141
|
+
const isHeaderColumnEnabled = editorExperiment(
|
|
142
|
+
'platform_editor_usesharedpluginstateselector',
|
|
143
|
+
true,
|
|
144
|
+
)
|
|
145
|
+
? isHeaderColumnEnabledSelector
|
|
146
|
+
: (tableState as TableSharedStateInternal).isHeaderColumnEnabled;
|
|
147
|
+
const isHeaderRowEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
148
|
+
? isHeaderRowEnabledSelector
|
|
149
|
+
: (tableState as TableSharedStateInternal).isHeaderRowEnabled;
|
|
150
|
+
const ordering = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
151
|
+
? orderingSelector
|
|
152
|
+
: (tableState as TableSharedStateInternal).ordering;
|
|
153
|
+
const isResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
154
|
+
? isResizingSelector
|
|
155
|
+
: (tableState as TableSharedStateInternal).isResizing;
|
|
156
|
+
const isInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
157
|
+
? isInDangerSelector
|
|
158
|
+
: (tableState as TableSharedStateInternal).isInDanger;
|
|
159
|
+
const hoveredCell = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
160
|
+
? hoveredCellSelector
|
|
161
|
+
: (tableState as TableSharedStateInternal).hoveredCell;
|
|
162
|
+
const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
163
|
+
? hoveredRowsSelector
|
|
164
|
+
: (tableState as TableSharedStateInternal).hoveredRows;
|
|
165
|
+
const isTableHovered = editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
166
|
+
? isTableHoveredSelector
|
|
167
|
+
: (tableState as TableSharedStateInternal).isTableHovered;
|
|
168
|
+
const isWholeTableInDanger = editorExperiment(
|
|
169
|
+
'platform_editor_usesharedpluginstateselector',
|
|
170
|
+
true,
|
|
171
|
+
)
|
|
172
|
+
? isWholeTableInDangerSelector
|
|
173
|
+
: (tableState as TableSharedStateInternal).isWholeTableInDanger;
|
|
75
174
|
|
|
76
175
|
/**
|
|
77
176
|
* ED-19810
|
|
@@ -101,7 +200,7 @@ export const TableComponentWithSharedState = ({
|
|
|
101
200
|
allowColumnResizing={allowColumnResizing}
|
|
102
201
|
eventDispatcher={eventDispatcher}
|
|
103
202
|
getPos={getPos}
|
|
104
|
-
isMediaFullscreen={
|
|
203
|
+
isMediaFullscreen={isFullscreen}
|
|
105
204
|
options={options}
|
|
106
205
|
allowControls={allowControls}
|
|
107
206
|
isHeaderRowEnabled={isHeaderRowEnabled}
|
|
@@ -114,9 +213,16 @@ export const TableComponentWithSharedState = ({
|
|
|
114
213
|
ordering={ordering}
|
|
115
214
|
isResizing={isResizing}
|
|
116
215
|
getNode={getNode}
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
216
|
+
containerWidth={
|
|
217
|
+
editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
218
|
+
? {
|
|
219
|
+
width: width ?? 0,
|
|
220
|
+
lineLength,
|
|
221
|
+
}
|
|
222
|
+
: // Ignored via go/ees005
|
|
223
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
224
|
+
widthState!
|
|
225
|
+
}
|
|
120
226
|
contentDOM={forwardRef}
|
|
121
227
|
getEditorFeatureFlags={getEditorFeatureFlags}
|
|
122
228
|
dispatchAnalyticsEvent={dispatchAnalyticsEvent}
|
|
@@ -126,7 +232,7 @@ export const TableComponentWithSharedState = ({
|
|
|
126
232
|
hoveredCell={hoveredCell}
|
|
127
233
|
isTableHovered={isTableHovered}
|
|
128
234
|
isWholeTableInDanger={isWholeTableInDanger}
|
|
129
|
-
selection={
|
|
235
|
+
selection={selection}
|
|
130
236
|
/>
|
|
131
237
|
);
|
|
132
238
|
};
|