@atlaskit/editor-plugin-table 10.9.6 → 10.9.8
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 +17 -0
- package/dist/cjs/nodeviews/TableComponent.js +5 -0
- package/dist/cjs/nodeviews/TableComponentWithSharedState.js +33 -19
- package/dist/cjs/nodeviews/TableContainer.js +1 -1
- package/dist/cjs/nodeviews/TableResizer.js +2 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +4 -3
- package/dist/cjs/ui/ContentComponent.js +77 -37
- package/dist/cjs/ui/DragHandle/index.js +3 -3
- package/dist/cjs/ui/hooks/useInternalTablePluginStateSelector.js +27 -0
- package/dist/es2019/nodeviews/TableComponent.js +5 -0
- package/dist/es2019/nodeviews/TableComponentWithSharedState.js +33 -19
- package/dist/es2019/nodeviews/TableContainer.js +1 -1
- package/dist/es2019/nodeviews/TableResizer.js +2 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +4 -3
- package/dist/es2019/ui/ContentComponent.js +66 -27
- package/dist/es2019/ui/DragHandle/index.js +3 -3
- package/dist/es2019/ui/hooks/useInternalTablePluginStateSelector.js +21 -0
- package/dist/esm/nodeviews/TableComponent.js +5 -0
- package/dist/esm/nodeviews/TableComponentWithSharedState.js +33 -19
- package/dist/esm/nodeviews/TableContainer.js +1 -1
- package/dist/esm/nodeviews/TableResizer.js +2 -2
- package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +4 -3
- package/dist/esm/ui/ContentComponent.js +77 -37
- package/dist/esm/ui/DragHandle/index.js +3 -3
- package/dist/esm/ui/hooks/useInternalTablePluginStateSelector.js +21 -0
- package/dist/types/ui/hooks/useInternalTablePluginStateSelector.d.ts +20 -0
- package/dist/types-ts4.5/ui/hooks/useInternalTablePluginStateSelector.d.ts +20 -0
- package/package.json +6 -3
- package/src/nodeviews/TableComponent.tsx +5 -0
- package/src/nodeviews/TableComponentWithSharedState.tsx +40 -28
- package/src/nodeviews/TableContainer.tsx +1 -1
- package/src/nodeviews/TableResizer.tsx +4 -4
- package/src/pm-plugins/table-resizing/utils/scale-table.ts +5 -3
- package/src/ui/ContentComponent.tsx +71 -35
- package/src/ui/DragHandle/index.tsx +6 -10
- package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +1 -1
- package/src/ui/TableFloatingControls/NumberColumn/index.tsx +3 -3
- package/src/ui/hooks/useInternalTablePluginStateSelector.ts +36 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 10.9.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#146228](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/146228)
|
|
8
|
+
[`70d0e911d08ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/70d0e911d08ec) -
|
|
9
|
+
Extract useInternalTablePluginStateSelector into a utility file
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 10.9.7
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#146244](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/146244)
|
|
17
|
+
[`a87bc29b0ab36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a87bc29b0ab36) -
|
|
18
|
+
[ED-27681] Fix a bug where resize table column and then resize table cannot be undone
|
|
19
|
+
|
|
3
20
|
## 10.9.6
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -254,6 +254,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
254
254
|
)(state.tr);
|
|
255
255
|
if (!isUserTriggered) {
|
|
256
256
|
(0, _collab.tintDirtyTransaction)(tr);
|
|
257
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_fix_table_resizing_undo')) {
|
|
258
|
+
// Avoid adding this transaction separately to the history as these are automatic updates
|
|
259
|
+
// as a consequence of another action
|
|
260
|
+
tr.setMeta('addToHistory', false);
|
|
261
|
+
}
|
|
257
262
|
}
|
|
258
263
|
dispatch(tr);
|
|
259
264
|
});
|
|
@@ -10,17 +10,11 @@ var _hooks = require("@atlaskit/editor-common/hooks");
|
|
|
10
10
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
11
11
|
var _editorTables = require("@atlaskit/editor-tables");
|
|
12
12
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
|
+
var _useInternalTablePluginStateSelector = require("../ui/hooks/useInternalTablePluginStateSelector");
|
|
13
14
|
var _TableComponent = _interopRequireDefault(require("./TableComponent"));
|
|
14
15
|
// Ignored via go/ees005
|
|
15
16
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
16
17
|
|
|
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
|
-
|
|
24
18
|
/**
|
|
25
19
|
* Use useSharedPluginState to control re-renders from plugin dependencies
|
|
26
20
|
*/
|
|
@@ -46,16 +40,36 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
|
|
|
46
40
|
mediaState = _useSharedPluginState.mediaState,
|
|
47
41
|
selectionState = _useSharedPluginState.selectionState,
|
|
48
42
|
editorViewModeState = _useSharedPluginState.editorViewModeState;
|
|
49
|
-
var isTableResizingSelector =
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
var
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
var
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
var
|
|
43
|
+
var isTableResizingSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isTableResizing', {
|
|
44
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
45
|
+
});
|
|
46
|
+
var isHeaderColumnEnabledSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderColumnEnabled', {
|
|
47
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
48
|
+
});
|
|
49
|
+
var isHeaderRowEnabledSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderRowEnabled', {
|
|
50
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
51
|
+
});
|
|
52
|
+
var orderingSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'ordering', {
|
|
53
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
54
|
+
});
|
|
55
|
+
var isResizingSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isResizing', {
|
|
56
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
57
|
+
});
|
|
58
|
+
var isInDangerSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isInDanger', {
|
|
59
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
60
|
+
});
|
|
61
|
+
var hoveredCellSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'hoveredCell', {
|
|
62
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
63
|
+
});
|
|
64
|
+
var hoveredRowsSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'hoveredRows', {
|
|
65
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
66
|
+
});
|
|
67
|
+
var isTableHoveredSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isTableHovered', {
|
|
68
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
69
|
+
});
|
|
70
|
+
var isWholeTableInDangerSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isWholeTableInDanger', {
|
|
71
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
72
|
+
});
|
|
59
73
|
|
|
60
74
|
// mediaState
|
|
61
75
|
var isFullscreenSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.isFullscreen', {
|
|
@@ -123,8 +137,8 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
|
|
|
123
137
|
isMediaFullscreen: isFullscreen,
|
|
124
138
|
options: options,
|
|
125
139
|
allowControls: allowControls,
|
|
126
|
-
isHeaderRowEnabled: isHeaderRowEnabled,
|
|
127
|
-
isHeaderColumnEnabled: isHeaderColumnEnabled,
|
|
140
|
+
isHeaderRowEnabled: isHeaderRowEnabled !== null && isHeaderRowEnabled !== void 0 ? isHeaderRowEnabled : false,
|
|
141
|
+
isHeaderColumnEnabled: isHeaderColumnEnabled !== null && isHeaderColumnEnabled !== void 0 ? isHeaderColumnEnabled : false,
|
|
128
142
|
isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
|
|
129
143
|
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
|
|
130
144
|
allowTableAlignment: allowTableAlignment,
|
|
@@ -68,7 +68,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
|
|
|
68
68
|
});
|
|
69
69
|
var wasFullWidthModeEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? wasFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled;
|
|
70
70
|
(0, _react.useEffect)(function () {
|
|
71
|
-
if ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
71
|
+
if (!tableState && (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
|
|
72
72
|
return;
|
|
73
73
|
}
|
|
74
74
|
if (editorView && getPos) {
|
|
@@ -19,7 +19,6 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
|
19
19
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
20
20
|
var _monitoring = require("@atlaskit/editor-common/monitoring");
|
|
21
21
|
var _resizer = require("@atlaskit/editor-common/resizer");
|
|
22
|
-
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
23
22
|
var _commands = require("@atlaskit/editor-prosemirror/commands");
|
|
24
23
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
25
24
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
@@ -37,6 +36,7 @@ var _analytics2 = require("../pm-plugins/utils/analytics");
|
|
|
37
36
|
var _guidelines = require("../pm-plugins/utils/guidelines");
|
|
38
37
|
var _snapping = require("../pm-plugins/utils/snapping");
|
|
39
38
|
var _consts2 = require("../ui/consts");
|
|
39
|
+
var _useInternalTablePluginStateSelector = require("../ui/hooks/useInternalTablePluginStateSelector");
|
|
40
40
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
41
41
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
42
42
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -143,7 +143,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
143
143
|
tableState = _useSharedPluginState.tableState;
|
|
144
144
|
|
|
145
145
|
// widthToWidest
|
|
146
|
-
var widthToWidestSelector = (0,
|
|
146
|
+
var widthToWidestSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(pluginInjectionApi, 'widthToWidest', {
|
|
147
147
|
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
148
148
|
});
|
|
149
149
|
var widthToWidest = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? widthToWidestSelector : tableState.widthToWidest;
|
|
@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
10
10
|
var _nodeWidth = require("@atlaskit/editor-common/node-width");
|
|
11
11
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
12
12
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
13
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
14
|
var _columnWidth = require("../../transforms/column-width");
|
|
14
15
|
var _nodes = require("../../utils/nodes");
|
|
15
16
|
var _misc = require("../utils/misc");
|
|
@@ -177,9 +178,9 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
|
|
|
177
178
|
}
|
|
178
179
|
if (resizeState) {
|
|
179
180
|
tr = (0, _columnWidth.updateColumnWidths)(resizeState, node, start, api)(tr);
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
181
|
+
if (!(0, _platformFeatureFlags.fg)('platform_editor_fix_table_resizing_undo')) {
|
|
182
|
+
tr.setMeta('addToHistory', false);
|
|
183
|
+
}
|
|
183
184
|
if (tr.docChanged) {
|
|
184
185
|
tr.setMeta('scrollIntoView', false);
|
|
185
186
|
// TODO: ED-8995 - We need to do this check to reduce the number of race conditions when working with tables.
|
|
@@ -8,8 +8,8 @@ exports.ContentComponent = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
10
|
var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
|
|
11
|
-
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
12
11
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
13
|
var _FloatingContextualButton = _interopRequireDefault(require("./FloatingContextualButton"));
|
|
14
14
|
var _FloatingContextualMenu = _interopRequireDefault(require("./FloatingContextualMenu"));
|
|
15
15
|
var _FloatingDeleteButton = _interopRequireDefault(require("./FloatingDeleteButton"));
|
|
@@ -17,14 +17,11 @@ var _FloatingDragMenu = _interopRequireDefault(require("./FloatingDragMenu"));
|
|
|
17
17
|
var _FloatingInsertButton = _interopRequireDefault(require("./FloatingInsertButton"));
|
|
18
18
|
var _FloatingToolbarLabel = require("./FloatingToolbarLabel/FloatingToolbarLabel");
|
|
19
19
|
var _globalStyles = require("./global-styles");
|
|
20
|
+
var _useInternalTablePluginStateSelector = require("./hooks/useInternalTablePluginStateSelector");
|
|
20
21
|
var _TableFullWidthLabel = require("./TableFullWidthLabel");
|
|
21
22
|
// Ignored via go/ees005
|
|
22
23
|
// eslint-disable-next-line import/no-named-as-default
|
|
23
24
|
|
|
24
|
-
var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
|
|
25
|
-
var value = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, "table.".concat(key));
|
|
26
|
-
return value;
|
|
27
|
-
};
|
|
28
25
|
var ContentComponentInternal = function ContentComponentInternal(_ref) {
|
|
29
26
|
var _api$analytics, _api$accessibilityUti;
|
|
30
27
|
var api = _ref.api,
|
|
@@ -38,28 +35,71 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
|
|
|
38
35
|
defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
|
|
39
36
|
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
40
37
|
var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
|
|
41
|
-
var resizingTableLocalId =
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
var
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
var
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
var
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
var
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
var
|
|
38
|
+
var resizingTableLocalId = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'resizingTableLocalId', {
|
|
39
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
40
|
+
});
|
|
41
|
+
var resizingTableRef = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'resizingTableRef', {
|
|
42
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
43
|
+
});
|
|
44
|
+
var isTableResizing = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isTableResizing', {
|
|
45
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
46
|
+
});
|
|
47
|
+
var isResizing = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isResizing', {
|
|
48
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
49
|
+
});
|
|
50
|
+
var widthToWidest = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'widthToWidest', {
|
|
51
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
52
|
+
});
|
|
53
|
+
var tableNode = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'tableNode', {
|
|
54
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
55
|
+
});
|
|
56
|
+
var targetCellPosition = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'targetCellPosition', {
|
|
57
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
58
|
+
});
|
|
59
|
+
var isContextualMenuOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isContextualMenuOpen', {
|
|
60
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
61
|
+
});
|
|
62
|
+
var tableRef = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'tableRef', {
|
|
63
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
64
|
+
});
|
|
65
|
+
var pluginConfig = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'pluginConfig', {
|
|
66
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
67
|
+
});
|
|
68
|
+
var insertColumnButtonIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'insertColumnButtonIndex', {
|
|
69
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
70
|
+
});
|
|
71
|
+
var insertRowButtonIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'insertRowButtonIndex', {
|
|
72
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
73
|
+
});
|
|
74
|
+
var isHeaderColumnEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderColumnEnabled', {
|
|
75
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
76
|
+
});
|
|
77
|
+
var isHeaderRowEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isHeaderRowEnabled', {
|
|
78
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
79
|
+
});
|
|
80
|
+
var isDragAndDropEnabled = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isDragAndDropEnabled', {
|
|
81
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
82
|
+
});
|
|
83
|
+
var tableWrapperTarget = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'tableWrapperTarget', {
|
|
84
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
85
|
+
});
|
|
86
|
+
var isCellMenuOpenByKeyboard = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isCellMenuOpenByKeyboard', {
|
|
87
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
88
|
+
});
|
|
89
|
+
var _ref2 = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {},
|
|
90
|
+
allowControls = _ref2.allowControls;
|
|
91
|
+
var stickyHeader = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'stickyHeader', {
|
|
92
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
93
|
+
});
|
|
94
|
+
var dragMenuDirection = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'dragMenuDirection', {
|
|
95
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
96
|
+
});
|
|
97
|
+
var dragMenuIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'dragMenuIndex', {
|
|
98
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
99
|
+
});
|
|
100
|
+
var isDragMenuOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isDragMenuOpen', {
|
|
101
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
102
|
+
});
|
|
63
103
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
|
|
64
104
|
isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
|
|
65
105
|
editorView: editorView,
|
|
@@ -147,17 +187,17 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
|
|
|
147
187
|
offset: [0, 10]
|
|
148
188
|
}));
|
|
149
189
|
};
|
|
150
|
-
var ContentComponent = exports.ContentComponent = function ContentComponent(
|
|
190
|
+
var ContentComponent = exports.ContentComponent = function ContentComponent(_ref3) {
|
|
151
191
|
var _api$featureFlags;
|
|
152
|
-
var api =
|
|
153
|
-
editorView =
|
|
154
|
-
dispatchAnalyticsEvent =
|
|
155
|
-
options =
|
|
156
|
-
popupsMountPoint =
|
|
157
|
-
popupsBoundariesElement =
|
|
158
|
-
popupsScrollableElement =
|
|
159
|
-
defaultGetEditorContainerWidth =
|
|
160
|
-
defaultGetEditorFeatureFlags =
|
|
192
|
+
var api = _ref3.api,
|
|
193
|
+
editorView = _ref3.editorView,
|
|
194
|
+
dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
|
|
195
|
+
options = _ref3.options,
|
|
196
|
+
popupsMountPoint = _ref3.popupsMountPoint,
|
|
197
|
+
popupsBoundariesElement = _ref3.popupsBoundariesElement,
|
|
198
|
+
popupsScrollableElement = _ref3.popupsScrollableElement,
|
|
199
|
+
defaultGetEditorContainerWidth = _ref3.defaultGetEditorContainerWidth,
|
|
200
|
+
defaultGetEditorFeatureFlags = _ref3.defaultGetEditorFeatureFlags;
|
|
161
201
|
return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
|
|
162
202
|
component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
|
|
163
203
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -15,7 +15,6 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
15
15
|
var _browser = require("@atlaskit/editor-common/browser");
|
|
16
16
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
17
17
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
18
|
-
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
19
18
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
20
19
|
var _editorTables = require("@atlaskit/editor-tables");
|
|
21
20
|
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
|
|
@@ -27,6 +26,7 @@ var _mergedCells = require("../../pm-plugins/utils/merged-cells");
|
|
|
27
26
|
var _types = require("../../types");
|
|
28
27
|
var _consts = require("../consts");
|
|
29
28
|
var _DragPreview = require("../DragPreview");
|
|
29
|
+
var _useInternalTablePluginStateSelector = require("../hooks/useInternalTablePluginStateSelector");
|
|
30
30
|
var _HandleIconComponent = require("./HandleIconComponent");
|
|
31
31
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
32
32
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -278,13 +278,13 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
|
|
|
278
278
|
tableState = _ref6.tableState;
|
|
279
279
|
|
|
280
280
|
// hoveredColumns
|
|
281
|
-
var hoveredColumnsSelector = (0,
|
|
281
|
+
var hoveredColumnsSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'hoveredColumns', {
|
|
282
282
|
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
283
283
|
});
|
|
284
284
|
var hoveredColumns = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hoveredColumnsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns;
|
|
285
285
|
|
|
286
286
|
// hoveredRows
|
|
287
|
-
var hoveredRowsSelector = (0,
|
|
287
|
+
var hoveredRowsSelector = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'hoveredRows', {
|
|
288
288
|
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
289
289
|
});
|
|
290
290
|
var hoveredRows = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useInternalTablePluginStateSelector = void 0;
|
|
7
|
+
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
8
|
+
/**
|
|
9
|
+
* **This hook is only for internal use and should not be used outside of the table plugin.**
|
|
10
|
+
*
|
|
11
|
+
* Hook to select a value from the internal table plugin state.
|
|
12
|
+
* This is a wrapper around `useSharedPluginStateSelector` to provide access to the entire
|
|
13
|
+
* `TableSharedStateInternal` type. Since tables plugin has a lot of internal state that is not
|
|
14
|
+
* exposed via the `TableSharedState` type, we need to use this hook to access it in a type safe way.
|
|
15
|
+
*
|
|
16
|
+
* @param api The editor API
|
|
17
|
+
* @param key Key of TableSharedStateInternal to select
|
|
18
|
+
* @returns
|
|
19
|
+
*/
|
|
20
|
+
var useInternalTablePluginStateSelector = exports.useInternalTablePluginStateSelector = function useInternalTablePluginStateSelector(api, key, options) {
|
|
21
|
+
// Need to disable the eslint rule here because the key is for the TableSharedStateInternal type
|
|
22
|
+
// and we are using it as a string to access the value in the useSharedPluginStateSelector
|
|
23
|
+
// which is typed only for the public TableSharedState type.
|
|
24
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
25
|
+
var value = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, "table.".concat(key), options);
|
|
26
|
+
return value;
|
|
27
|
+
};
|
|
@@ -248,6 +248,11 @@ class TableComponent extends React.Component {
|
|
|
248
248
|
)(state.tr);
|
|
249
249
|
if (!isUserTriggered) {
|
|
250
250
|
tintDirtyTransaction(tr);
|
|
251
|
+
if (fg('platform_editor_fix_table_resizing_undo')) {
|
|
252
|
+
// Avoid adding this transaction separately to the history as these are automatic updates
|
|
253
|
+
// as a consequence of another action
|
|
254
|
+
tr.setMeta('addToHistory', false);
|
|
255
|
+
}
|
|
251
256
|
}
|
|
252
257
|
dispatch(tr);
|
|
253
258
|
});
|
|
@@ -3,18 +3,12 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
|
3
3
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
4
4
|
import { findTable } from '@atlaskit/editor-tables';
|
|
5
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
|
+
import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
|
|
6
7
|
import TableComponent from './TableComponent';
|
|
7
8
|
|
|
8
9
|
// Ignored via go/ees005
|
|
9
10
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
10
11
|
|
|
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
|
-
|
|
18
12
|
/**
|
|
19
13
|
* Use useSharedPluginState to control re-renders from plugin dependencies
|
|
20
14
|
*/
|
|
@@ -42,16 +36,36 @@ export const TableComponentWithSharedState = ({
|
|
|
42
36
|
} = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
|
|
43
37
|
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
44
38
|
});
|
|
45
|
-
const isTableResizingSelector =
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const
|
|
39
|
+
const isTableResizingSelector = useInternalTablePluginStateSelector(api, 'isTableResizing', {
|
|
40
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
41
|
+
});
|
|
42
|
+
const isHeaderColumnEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
|
|
43
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
44
|
+
});
|
|
45
|
+
const isHeaderRowEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
|
|
46
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
47
|
+
});
|
|
48
|
+
const orderingSelector = useInternalTablePluginStateSelector(api, 'ordering', {
|
|
49
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
50
|
+
});
|
|
51
|
+
const isResizingSelector = useInternalTablePluginStateSelector(api, 'isResizing', {
|
|
52
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
53
|
+
});
|
|
54
|
+
const isInDangerSelector = useInternalTablePluginStateSelector(api, 'isInDanger', {
|
|
55
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
56
|
+
});
|
|
57
|
+
const hoveredCellSelector = useInternalTablePluginStateSelector(api, 'hoveredCell', {
|
|
58
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
59
|
+
});
|
|
60
|
+
const hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
|
|
61
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
62
|
+
});
|
|
63
|
+
const isTableHoveredSelector = useInternalTablePluginStateSelector(api, 'isTableHovered', {
|
|
64
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
65
|
+
});
|
|
66
|
+
const isWholeTableInDangerSelector = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger', {
|
|
67
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
68
|
+
});
|
|
55
69
|
|
|
56
70
|
// mediaState
|
|
57
71
|
const isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
|
|
@@ -119,8 +133,8 @@ export const TableComponentWithSharedState = ({
|
|
|
119
133
|
isMediaFullscreen: isFullscreen,
|
|
120
134
|
options: options,
|
|
121
135
|
allowControls: allowControls,
|
|
122
|
-
isHeaderRowEnabled: isHeaderRowEnabled,
|
|
123
|
-
isHeaderColumnEnabled: isHeaderColumnEnabled,
|
|
136
|
+
isHeaderRowEnabled: isHeaderRowEnabled !== null && isHeaderRowEnabled !== void 0 ? isHeaderRowEnabled : false,
|
|
137
|
+
isHeaderColumnEnabled: isHeaderColumnEnabled !== null && isHeaderColumnEnabled !== void 0 ? isHeaderColumnEnabled : false,
|
|
124
138
|
isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
|
|
125
139
|
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
|
|
126
140
|
allowTableAlignment: allowTableAlignment,
|
|
@@ -60,7 +60,7 @@ const AlignmentTableContainer = ({
|
|
|
60
60
|
});
|
|
61
61
|
const wasFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? wasFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled;
|
|
62
62
|
useEffect(() => {
|
|
63
|
-
if (editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
63
|
+
if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
|
|
64
64
|
return;
|
|
65
65
|
}
|
|
66
66
|
if (editorView && getPos) {
|
|
@@ -9,7 +9,6 @@ import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keyma
|
|
|
9
9
|
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
10
10
|
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
11
11
|
import { ResizerNext } from '@atlaskit/editor-common/resizer';
|
|
12
|
-
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
13
12
|
import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
|
|
14
13
|
import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
|
|
15
14
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
@@ -27,6 +26,7 @@ import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFram
|
|
|
27
26
|
import { defaultGuidelines, defaultGuidelinesForPreserveTable, PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET } from '../pm-plugins/utils/guidelines';
|
|
28
27
|
import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap, PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET } from '../pm-plugins/utils/snapping';
|
|
29
28
|
import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
|
|
29
|
+
import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
|
|
30
30
|
const RESIZE_STEP_VALUE = 10;
|
|
31
31
|
const handles = {
|
|
32
32
|
right: true
|
|
@@ -131,7 +131,7 @@ export const TableResizer = ({
|
|
|
131
131
|
});
|
|
132
132
|
|
|
133
133
|
// widthToWidest
|
|
134
|
-
const widthToWidestSelector =
|
|
134
|
+
const widthToWidestSelector = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest', {
|
|
135
135
|
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
136
136
|
});
|
|
137
137
|
const widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthToWidestSelector : tableState.widthToWidest;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
2
2
|
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
3
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
5
|
import { updateColumnWidths } from '../../transforms/column-width';
|
|
5
6
|
import { getTableWidth } from '../../utils/nodes';
|
|
6
7
|
import { getLayoutSize } from '../utils/misc';
|
|
@@ -163,9 +164,9 @@ export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabl
|
|
|
163
164
|
}
|
|
164
165
|
if (resizeState) {
|
|
165
166
|
tr = updateColumnWidths(resizeState, node, start, api)(tr);
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
167
|
+
if (!fg('platform_editor_fix_table_resizing_undo')) {
|
|
168
|
+
tr.setMeta('addToHistory', false);
|
|
169
|
+
}
|
|
169
170
|
if (tr.docChanged) {
|
|
170
171
|
tr.setMeta('scrollIntoView', false);
|
|
171
172
|
// TODO: ED-8995 - We need to do this check to reduce the number of race conditions when working with tables.
|