@atlaskit/editor-plugin-table 10.8.3 → 10.9.0

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.
Files changed (15) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/tablePlugin.js +42 -6
  3. package/dist/cjs/ui/ContentComponent.js +180 -0
  4. package/dist/es2019/tablePlugin.js +40 -4
  5. package/dist/es2019/ui/ContentComponent.js +176 -0
  6. package/dist/esm/tablePlugin.js +40 -4
  7. package/dist/esm/ui/ContentComponent.js +172 -0
  8. package/dist/types/types/index.d.ts +8 -1
  9. package/dist/types/ui/ContentComponent.d.ts +17 -0
  10. package/dist/types-ts4.5/types/index.d.ts +8 -1
  11. package/dist/types-ts4.5/ui/ContentComponent.d.ts +17 -0
  12. package/package.json +2 -2
  13. package/src/tablePlugin.tsx +46 -4
  14. package/src/types/index.ts +17 -0
  15. package/src/ui/ContentComponent.tsx +249 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 10.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#142156](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142156)
8
+ [`9e2d56551d2cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e2d56551d2cc) -
9
+ Remove WithPluginState from Table via platform_editor_usesharedpluginstateselector
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 10.8.3
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/tablePlugin.js CHANGED
@@ -37,7 +37,6 @@ var _plugin3 = require("./pm-plugins/drag-and-drop/plugin");
37
37
  var _pluginKey2 = require("./pm-plugins/drag-and-drop/plugin-key");
38
38
  var _keymap = require("./pm-plugins/keymap");
39
39
  var _main = require("./pm-plugins/main");
40
- var _pluginFactory = require("./pm-plugins/plugin-factory");
41
40
  var _pluginKey3 = require("./pm-plugins/plugin-key");
42
41
  var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
43
42
  var _plugin4 = require("./pm-plugins/sticky-headers/plugin");
@@ -46,7 +45,7 @@ var _util = require("./pm-plugins/sticky-headers/util");
46
45
  var _tableAnalytics = require("./pm-plugins/table-analytics");
47
46
  var _tableLocalId = require("./pm-plugins/table-local-id");
48
47
  var _plugin5 = require("./pm-plugins/table-resizing/plugin");
49
- var _pluginFactory2 = require("./pm-plugins/table-resizing/plugin-factory");
48
+ var _pluginFactory = require("./pm-plugins/table-resizing/plugin-factory");
50
49
  var _pluginKey5 = require("./pm-plugins/table-resizing/plugin-key");
51
50
  var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
52
51
  var _tableSizeSelector = require("./pm-plugins/table-size-selector");
@@ -54,6 +53,7 @@ var _tableWidth = require("./pm-plugins/table-width");
54
53
  var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix");
55
54
  var _create = require("./pm-plugins/utils/create");
56
55
  var _viewModeSort = require("./pm-plugins/view-mode-sort");
56
+ var _ContentComponent = require("./ui/ContentComponent");
57
57
  var _FloatingContextualButton = _interopRequireDefault(require("./ui/FloatingContextualButton"));
58
58
  var _FloatingContextualMenu = _interopRequireDefault(require("./ui/FloatingContextualMenu"));
59
59
  var _FloatingDeleteButton = _interopRequireDefault(require("./ui/FloatingDeleteButton"));
@@ -103,13 +103,19 @@ var tablePlugin = function tablePlugin(_ref) {
103
103
  // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
104
104
  // to most up to date values - passing to createPluginState will not re-initialise the state
105
105
  getSharedState: function getSharedState(editorState) {
106
+ var _tablePluginState$tab, _tableWidthResizingPl;
106
107
  if (!editorState) {
107
108
  return undefined;
108
109
  }
109
- var tablePluginState = (0, _pluginFactory.getPluginState)(editorState);
110
- var tableResizingPluginState = (0, _pluginFactory2.getPluginState)(editorState);
110
+
111
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
112
+ var tablePluginState = _pluginKey3.pluginKey.getState(editorState);
113
+ var tableResizingPluginState = (0, _pluginFactory.getPluginState)(editorState);
111
114
  var tableWidthResizingPluginState = _tableWidth.pluginKey.getState(editorState);
112
- return {
115
+ var stickyHeadersState = _pluginKey4.pluginKey.getState(editorState);
116
+ var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
117
+ var dragAndDropState = _pluginKey2.pluginKey.getState(editorState);
118
+ var sharedStateInternal = {
113
119
  isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
114
120
  wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
115
121
  isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
@@ -126,8 +132,25 @@ var tablePlugin = function tablePlugin(_ref) {
126
132
  // IMPORTANT: Need to continue to pass tableNode to control re-renders
127
133
  // TableComponent listens for node attribute changes to update colgroups
128
134
  tableNode: tablePluginState.tableNode,
129
- widthToWidest: tablePluginState.widthToWidest
135
+ widthToWidest: tablePluginState.widthToWidest,
136
+ resizingTableLocalId: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableLocalId,
137
+ tableRef: (_tablePluginState$tab = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tableRef) !== null && _tablePluginState$tab !== void 0 ? _tablePluginState$tab : undefined,
138
+ resizingTableRef: (_tableWidthResizingPl = tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableRef) !== null && _tableWidthResizingPl !== void 0 ? _tableWidthResizingPl : undefined,
139
+ tablePos: tablePluginState.tablePos,
140
+ targetCellPosition: tablePluginState.targetCellPosition,
141
+ isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
142
+ pluginConfig: tablePluginState.pluginConfig,
143
+ insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
144
+ insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
145
+ isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
146
+ tableWrapperTarget: tablePluginState.tableWrapperTarget,
147
+ isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
148
+ stickyHeader: stickyHeader,
149
+ dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
150
+ dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
151
+ isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
130
152
  };
153
+ return sharedStateInternal;
131
154
  },
132
155
  actions: {
133
156
  insertTable: function insertTable(analyticsPayload) {
@@ -428,6 +451,19 @@ var tablePlugin = function tablePlugin(_ref) {
428
451
  popupsBoundariesElement = _ref20.popupsBoundariesElement,
429
452
  popupsScrollableElement = _ref20.popupsScrollableElement,
430
453
  dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
454
+ if ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)) {
455
+ return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
456
+ api: api,
457
+ editorView: editorView,
458
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
459
+ options: options,
460
+ popupsMountPoint: popupsMountPoint,
461
+ popupsBoundariesElement: popupsBoundariesElement,
462
+ popupsScrollableElement: popupsScrollableElement,
463
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
464
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
465
+ });
466
+ }
431
467
  return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
432
468
  component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
433
469
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
package/dist/cjs/ui/ContentComponent.js ADDED
@@ -0,0 +1,180 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ContentComponent = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
+ var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
11
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
12
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
13
+ var _FloatingContextualButton = _interopRequireDefault(require("./FloatingContextualButton"));
14
+ var _FloatingContextualMenu = _interopRequireDefault(require("./FloatingContextualMenu"));
15
+ var _FloatingDeleteButton = _interopRequireDefault(require("./FloatingDeleteButton"));
16
+ var _FloatingDragMenu = _interopRequireDefault(require("./FloatingDragMenu"));
17
+ var _FloatingInsertButton = _interopRequireDefault(require("./FloatingInsertButton"));
18
+ var _FloatingToolbarLabel = require("./FloatingToolbarLabel/FloatingToolbarLabel");
19
+ var _globalStyles = require("./global-styles");
20
+ var _TableFullWidthLabel = require("./TableFullWidthLabel");
21
+ // Ignored via go/ees005
22
+ // eslint-disable-next-line import/no-named-as-default
23
+
24
+ var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
25
+ var value = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, "table.".concat(key));
26
+ return value;
27
+ };
28
+ var ContentComponentInternal = function ContentComponentInternal(_ref) {
29
+ var _api$analytics, _api$accessibilityUti;
30
+ var api = _ref.api,
31
+ editorView = _ref.editorView,
32
+ dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
33
+ options = _ref.options,
34
+ popupsMountPoint = _ref.popupsMountPoint,
35
+ popupsBoundariesElement = _ref.popupsBoundariesElement,
36
+ popupsScrollableElement = _ref.popupsScrollableElement,
37
+ defaultGetEditorContainerWidth = _ref.defaultGetEditorContainerWidth,
38
+ defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
39
+ var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
40
+ 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 = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
42
+ var resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
43
+ var isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
44
+ var isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
45
+ var widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
46
+ var tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
47
+ var targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
48
+ var isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
49
+ var tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
50
+ var pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
51
+ var insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
52
+ var insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
53
+ var isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
54
+ var isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
55
+ var isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
56
+ var tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
57
+ var isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
58
+ var allowControls = pluginConfig.allowControls;
59
+ var stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
60
+ var dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
61
+ var dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
62
+ var isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
63
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
64
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
65
+ editorView: editorView,
66
+ tableNode: tableNode,
67
+ mountPoint: popupsMountPoint,
68
+ targetCellPosition: targetCellPosition,
69
+ scrollableElement: popupsScrollableElement,
70
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
71
+ isContextualMenuOpen: isContextualMenuOpen,
72
+ stickyHeader: stickyHeader,
73
+ tableWrapper: tableWrapperTarget,
74
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
75
+ }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingInsertButton.default, {
76
+ tableNode: tableNode,
77
+ tableRef: tableRef,
78
+ insertColumnButtonIndex: insertColumnButtonIndex,
79
+ insertRowButtonIndex: insertRowButtonIndex,
80
+ isHeaderColumnEnabled: isHeaderColumnEnabled,
81
+ isHeaderRowEnabled: isHeaderRowEnabled,
82
+ isDragAndDropEnabled: isDragAndDropEnabled,
83
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
84
+ editorView: editorView,
85
+ mountPoint: popupsMountPoint,
86
+ boundariesElement: popupsBoundariesElement,
87
+ scrollableElement: popupsScrollableElement,
88
+ hasStickyHeaders: stickyHeader && stickyHeader.sticky,
89
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
90
+ editorAnalyticsAPI: editorAnalyticsAPI,
91
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
92
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
93
+ isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
94
+ api: api,
95
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
96
+ }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
97
+ editorView: editorView,
98
+ mountPoint: popupsMountPoint,
99
+ boundariesElement: popupsBoundariesElement,
100
+ targetCellPosition: targetCellPosition,
101
+ isOpen: Boolean(isContextualMenuOpen) && !isResizing,
102
+ pluginConfig: pluginConfig,
103
+ editorAnalyticsAPI: editorAnalyticsAPI,
104
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
105
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
106
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
107
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
108
+ api: api
109
+ }), isDragAndDropEnabled && /*#__PURE__*/_react.default.createElement(_FloatingDragMenu.default, {
110
+ editorView: editorView,
111
+ mountPoint: popupsMountPoint,
112
+ boundariesElement: popupsBoundariesElement,
113
+ tableRef: tableRef,
114
+ tableNode: tableNode,
115
+ targetCellPosition: targetCellPosition,
116
+ direction: dragMenuDirection,
117
+ index: dragMenuIndex,
118
+ isOpen: !!isDragMenuOpen && !isResizing,
119
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
120
+ editorAnalyticsAPI: editorAnalyticsAPI,
121
+ stickyHeaders: stickyHeader,
122
+ pluginConfig: pluginConfig,
123
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
124
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
125
+ ariaNotifyPlugin: ariaNotifyPlugin,
126
+ api: api,
127
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
128
+ }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
129
+ editorView: editorView,
130
+ selection: editorView.state.selection,
131
+ tableRef: tableRef,
132
+ mountPoint: popupsMountPoint,
133
+ boundariesElement: popupsBoundariesElement,
134
+ scrollableElement: popupsScrollableElement,
135
+ stickyHeaders: stickyHeader,
136
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
137
+ editorAnalyticsAPI: editorAnalyticsAPI,
138
+ api: api
139
+ }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/_react.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
140
+ target: resizingTableRef,
141
+ content: /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
142
+ alignX: 'center',
143
+ alignY: 'bottom',
144
+ stick: true,
145
+ forcePlacement: true,
146
+ zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
147
+ offset: [0, 10]
148
+ }));
149
+ };
150
+ var ContentComponent = exports.ContentComponent = function ContentComponent(_ref2) {
151
+ var _api$featureFlags;
152
+ var api = _ref2.api,
153
+ editorView = _ref2.editorView,
154
+ dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
155
+ options = _ref2.options,
156
+ popupsMountPoint = _ref2.popupsMountPoint,
157
+ popupsBoundariesElement = _ref2.popupsBoundariesElement,
158
+ popupsScrollableElement = _ref2.popupsScrollableElement,
159
+ defaultGetEditorContainerWidth = _ref2.defaultGetEditorContainerWidth,
160
+ defaultGetEditorFeatureFlags = _ref2.defaultGetEditorFeatureFlags;
161
+ return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
162
+ component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
163
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
164
+ fallbackComponent: null
165
+ }, /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
166
+ featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
167
+ isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
168
+ api: api
169
+ }), /*#__PURE__*/_react.default.createElement(ContentComponentInternal, {
170
+ api: api,
171
+ editorView: editorView,
172
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
173
+ options: options,
174
+ popupsMountPoint: popupsMountPoint,
175
+ popupsBoundariesElement: popupsBoundariesElement,
176
+ popupsScrollableElement: popupsScrollableElement,
177
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
178
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
179
+ }));
180
+ };
package/dist/es2019/tablePlugin.js CHANGED
@@ -28,7 +28,6 @@ import { createPlugin as createDragAndDropPlugin } from './pm-plugins/drag-and-d
28
28
  import { pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop/plugin-key';
29
29
  import { keymapPlugin } from './pm-plugins/keymap';
30
30
  import { createPlugin } from './pm-plugins/main';
31
- import { getPluginState } from './pm-plugins/plugin-factory';
32
31
  import { pluginKey } from './pm-plugins/plugin-key';
33
32
  import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
34
33
  import { createPlugin as createStickyHeadersPlugin } from './pm-plugins/sticky-headers/plugin';
@@ -45,6 +44,7 @@ import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKe
45
44
  import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
46
45
  import { createTableWithWidth } from './pm-plugins/utils/create';
47
46
  import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
47
+ import { ContentComponent } from './ui/ContentComponent';
48
48
  import FloatingContextualButton from './ui/FloatingContextualButton';
49
49
  import FloatingContextualMenu from './ui/FloatingContextualMenu';
50
50
  import FloatingDeleteButton from './ui/FloatingDeleteButton';
@@ -90,13 +90,19 @@ const tablePlugin = ({
90
90
  // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
91
91
  // to most up to date values - passing to createPluginState will not re-initialise the state
92
92
  getSharedState: editorState => {
93
+ var _tablePluginState$tab, _tableWidthResizingPl;
93
94
  if (!editorState) {
94
95
  return undefined;
95
96
  }
96
- const tablePluginState = getPluginState(editorState);
97
+
98
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
99
+ const tablePluginState = pluginKey.getState(editorState);
97
100
  const tableResizingPluginState = getFlexiResizingPlugin(editorState);
98
101
  const tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
99
- return {
102
+ const stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
103
+ const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
104
+ const dragAndDropState = dragAndDropPluginKey.getState(editorState);
105
+ const sharedStateInternal = {
100
106
  isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
101
107
  wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
102
108
  isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
@@ -113,8 +119,25 @@ const tablePlugin = ({
113
119
  // IMPORTANT: Need to continue to pass tableNode to control re-renders
114
120
  // TableComponent listens for node attribute changes to update colgroups
115
121
  tableNode: tablePluginState.tableNode,
116
- widthToWidest: tablePluginState.widthToWidest
122
+ widthToWidest: tablePluginState.widthToWidest,
123
+ resizingTableLocalId: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableLocalId,
124
+ tableRef: (_tablePluginState$tab = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tableRef) !== null && _tablePluginState$tab !== void 0 ? _tablePluginState$tab : undefined,
125
+ resizingTableRef: (_tableWidthResizingPl = tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableRef) !== null && _tableWidthResizingPl !== void 0 ? _tableWidthResizingPl : undefined,
126
+ tablePos: tablePluginState.tablePos,
127
+ targetCellPosition: tablePluginState.targetCellPosition,
128
+ isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
129
+ pluginConfig: tablePluginState.pluginConfig,
130
+ insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
131
+ insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
132
+ isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
133
+ tableWrapperTarget: tablePluginState.tableWrapperTarget,
134
+ isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
135
+ stickyHeader,
136
+ dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
137
+ dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
138
+ isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
117
139
  };
140
+ return sharedStateInternal;
118
141
  },
119
142
  actions: {
120
143
  insertTable: analyticsPayload => (state, dispatch) => {
@@ -416,6 +439,19 @@ const tablePlugin = ({
416
439
  dispatchAnalyticsEvent
417
440
  }) {
418
441
  var _api$featureFlags;
442
+ if (editorExperiment('platform_editor_usesharedpluginstateselector', true)) {
443
+ return /*#__PURE__*/React.createElement(ContentComponent, {
444
+ api: api,
445
+ editorView: editorView,
446
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
447
+ options: options,
448
+ popupsMountPoint: popupsMountPoint,
449
+ popupsBoundariesElement: popupsBoundariesElement,
450
+ popupsScrollableElement: popupsScrollableElement,
451
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
452
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
453
+ });
454
+ }
419
455
  return /*#__PURE__*/React.createElement(ErrorBoundary, {
420
456
  component: ACTION_SUBJECT.TABLES_PLUGIN,
421
457
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
package/dist/es2019/ui/ContentComponent.js ADDED
@@ -0,0 +1,176 @@
1
+ import React from 'react';
2
+ import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
3
+ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
4
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
+ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
6
+ import FloatingContextualButton from './FloatingContextualButton';
7
+ import FloatingContextualMenu from './FloatingContextualMenu';
8
+ import FloatingDeleteButton from './FloatingDeleteButton';
9
+ import FloatingDragMenu from './FloatingDragMenu';
10
+ // Ignored via go/ees005
11
+ // eslint-disable-next-line import/no-named-as-default
12
+ import FloatingInsertButton from './FloatingInsertButton';
13
+ import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
14
+ import { GlobalStylesWrapper } from './global-styles';
15
+ import { FullWidthDisplay } from './TableFullWidthLabel';
16
+ const useSharedTablePluginStateSelector = (api, key) => {
17
+ const value = useSharedPluginStateSelector(api, `table.${key}`);
18
+ return value;
19
+ };
20
+ const ContentComponentInternal = ({
21
+ api,
22
+ editorView,
23
+ dispatchAnalyticsEvent,
24
+ options,
25
+ popupsMountPoint,
26
+ popupsBoundariesElement,
27
+ popupsScrollableElement,
28
+ defaultGetEditorContainerWidth,
29
+ defaultGetEditorFeatureFlags
30
+ }) => {
31
+ var _api$analytics, _api$accessibilityUti;
32
+ const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
33
+ const ariaNotifyPlugin = api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
34
+ const resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
35
+ const resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
36
+ const isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
37
+ const isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
38
+ const widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
39
+ const tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
40
+ const targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
41
+ const isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
42
+ const tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
43
+ const pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
44
+ const insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
45
+ const insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
46
+ const isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
47
+ const isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
48
+ const isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
49
+ const tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
50
+ const isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
51
+ const {
52
+ allowControls
53
+ } = pluginConfig;
54
+ const stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
55
+ const dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
56
+ const dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
57
+ const isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
58
+ return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
59
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
60
+ editorView: editorView,
61
+ tableNode: tableNode,
62
+ mountPoint: popupsMountPoint,
63
+ targetCellPosition: targetCellPosition,
64
+ scrollableElement: popupsScrollableElement,
65
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
66
+ isContextualMenuOpen: isContextualMenuOpen,
67
+ stickyHeader: stickyHeader,
68
+ tableWrapper: tableWrapperTarget,
69
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
70
+ }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
71
+ tableNode: tableNode,
72
+ tableRef: tableRef,
73
+ insertColumnButtonIndex: insertColumnButtonIndex,
74
+ insertRowButtonIndex: insertRowButtonIndex,
75
+ isHeaderColumnEnabled: isHeaderColumnEnabled,
76
+ isHeaderRowEnabled: isHeaderRowEnabled,
77
+ isDragAndDropEnabled: isDragAndDropEnabled,
78
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
79
+ editorView: editorView,
80
+ mountPoint: popupsMountPoint,
81
+ boundariesElement: popupsBoundariesElement,
82
+ scrollableElement: popupsScrollableElement,
83
+ hasStickyHeaders: stickyHeader && stickyHeader.sticky,
84
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
85
+ editorAnalyticsAPI: editorAnalyticsAPI,
86
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
87
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
88
+ isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
89
+ api: api,
90
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
91
+ }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
92
+ editorView: editorView,
93
+ mountPoint: popupsMountPoint,
94
+ boundariesElement: popupsBoundariesElement,
95
+ targetCellPosition: targetCellPosition,
96
+ isOpen: Boolean(isContextualMenuOpen) && !isResizing,
97
+ pluginConfig: pluginConfig,
98
+ editorAnalyticsAPI: editorAnalyticsAPI,
99
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
100
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
101
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
102
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
103
+ api: api
104
+ }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
105
+ editorView: editorView,
106
+ mountPoint: popupsMountPoint,
107
+ boundariesElement: popupsBoundariesElement,
108
+ tableRef: tableRef,
109
+ tableNode: tableNode,
110
+ targetCellPosition: targetCellPosition,
111
+ direction: dragMenuDirection,
112
+ index: dragMenuIndex,
113
+ isOpen: !!isDragMenuOpen && !isResizing,
114
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
115
+ editorAnalyticsAPI: editorAnalyticsAPI,
116
+ stickyHeaders: stickyHeader,
117
+ pluginConfig: pluginConfig,
118
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
119
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
120
+ ariaNotifyPlugin: ariaNotifyPlugin,
121
+ api: api,
122
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
123
+ }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
124
+ editorView: editorView,
125
+ selection: editorView.state.selection,
126
+ tableRef: tableRef,
127
+ mountPoint: popupsMountPoint,
128
+ boundariesElement: popupsBoundariesElement,
129
+ scrollableElement: popupsScrollableElement,
130
+ stickyHeaders: stickyHeader,
131
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
132
+ editorAnalyticsAPI: editorAnalyticsAPI,
133
+ api: api
134
+ }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
135
+ target: resizingTableRef,
136
+ content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
137
+ alignX: 'center',
138
+ alignY: 'bottom',
139
+ stick: true,
140
+ forcePlacement: true,
141
+ zIndex: akEditorFloatingPanelZIndex,
142
+ offset: [0, 10]
143
+ }));
144
+ };
145
+ export const ContentComponent = ({
146
+ api,
147
+ editorView,
148
+ dispatchAnalyticsEvent,
149
+ options,
150
+ popupsMountPoint,
151
+ popupsBoundariesElement,
152
+ popupsScrollableElement,
153
+ defaultGetEditorContainerWidth,
154
+ defaultGetEditorFeatureFlags
155
+ }) => {
156
+ var _api$featureFlags;
157
+ return /*#__PURE__*/React.createElement(ErrorBoundary, {
158
+ component: ACTION_SUBJECT.TABLES_PLUGIN,
159
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
160
+ fallbackComponent: null
161
+ }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
162
+ featureFlags: api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
163
+ isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
164
+ api: api
165
+ }), /*#__PURE__*/React.createElement(ContentComponentInternal, {
166
+ api: api,
167
+ editorView: editorView,
168
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
169
+ options: options,
170
+ popupsMountPoint: popupsMountPoint,
171
+ popupsBoundariesElement: popupsBoundariesElement,
172
+ popupsScrollableElement: popupsScrollableElement,
173
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
174
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
175
+ }));
176
+ };
package/dist/esm/tablePlugin.js CHANGED
@@ -31,7 +31,6 @@ import { createPlugin as createDragAndDropPlugin } from './pm-plugins/drag-and-d
31
31
  import { pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop/plugin-key';
32
32
  import { keymapPlugin } from './pm-plugins/keymap';
33
33
  import { createPlugin } from './pm-plugins/main';
34
- import { getPluginState } from './pm-plugins/plugin-factory';
35
34
  import { pluginKey } from './pm-plugins/plugin-key';
36
35
  import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
37
36
  import { createPlugin as createStickyHeadersPlugin } from './pm-plugins/sticky-headers/plugin';
@@ -48,6 +47,7 @@ import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKe
48
47
  import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
49
48
  import { createTableWithWidth } from './pm-plugins/utils/create';
50
49
  import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
50
+ import { ContentComponent } from './ui/ContentComponent';
51
51
  import FloatingContextualButton from './ui/FloatingContextualButton';
52
52
  import FloatingContextualMenu from './ui/FloatingContextualMenu';
53
53
  import FloatingDeleteButton from './ui/FloatingDeleteButton';
@@ -94,13 +94,19 @@ var tablePlugin = function tablePlugin(_ref) {
94
94
  // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
95
95
  // to most up to date values - passing to createPluginState will not re-initialise the state
96
96
  getSharedState: function getSharedState(editorState) {
97
+ var _tablePluginState$tab, _tableWidthResizingPl;
97
98
  if (!editorState) {
98
99
  return undefined;
99
100
  }
100
- var tablePluginState = getPluginState(editorState);
101
+
102
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
103
+ var tablePluginState = pluginKey.getState(editorState);
101
104
  var tableResizingPluginState = getFlexiResizingPlugin(editorState);
102
105
  var tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
103
- return {
106
+ var stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
107
+ var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
108
+ var dragAndDropState = dragAndDropPluginKey.getState(editorState);
109
+ var sharedStateInternal = {
104
110
  isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
105
111
  wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
106
112
  isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
@@ -117,8 +123,25 @@ var tablePlugin = function tablePlugin(_ref) {
117
123
  // IMPORTANT: Need to continue to pass tableNode to control re-renders
118
124
  // TableComponent listens for node attribute changes to update colgroups
119
125
  tableNode: tablePluginState.tableNode,
120
- widthToWidest: tablePluginState.widthToWidest
126
+ widthToWidest: tablePluginState.widthToWidest,
127
+ resizingTableLocalId: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableLocalId,
128
+ tableRef: (_tablePluginState$tab = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tableRef) !== null && _tablePluginState$tab !== void 0 ? _tablePluginState$tab : undefined,
129
+ resizingTableRef: (_tableWidthResizingPl = tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableRef) !== null && _tableWidthResizingPl !== void 0 ? _tableWidthResizingPl : undefined,
130
+ tablePos: tablePluginState.tablePos,
131
+ targetCellPosition: tablePluginState.targetCellPosition,
132
+ isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
133
+ pluginConfig: tablePluginState.pluginConfig,
134
+ insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
135
+ insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
136
+ isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
137
+ tableWrapperTarget: tablePluginState.tableWrapperTarget,
138
+ isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
139
+ stickyHeader: stickyHeader,
140
+ dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
141
+ dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
142
+ isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
121
143
  };
144
+ return sharedStateInternal;
122
145
  },
123
146
  actions: {
124
147
  insertTable: function insertTable(analyticsPayload) {
@@ -419,6 +442,19 @@ var tablePlugin = function tablePlugin(_ref) {
419
442
  popupsBoundariesElement = _ref20.popupsBoundariesElement,
420
443
  popupsScrollableElement = _ref20.popupsScrollableElement,
421
444
  dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
445
+ if (editorExperiment('platform_editor_usesharedpluginstateselector', true)) {
446
+ return /*#__PURE__*/React.createElement(ContentComponent, {
447
+ api: api,
448
+ editorView: editorView,
449
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
450
+ options: options,
451
+ popupsMountPoint: popupsMountPoint,
452
+ popupsBoundariesElement: popupsBoundariesElement,
453
+ popupsScrollableElement: popupsScrollableElement,
454
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
455
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
456
+ });
457
+ }
422
458
  return /*#__PURE__*/React.createElement(ErrorBoundary, {
423
459
  component: ACTION_SUBJECT.TABLES_PLUGIN,
424
460
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
package/dist/esm/ui/ContentComponent.js ADDED
@@ -0,0 +1,172 @@
1
+ import React from 'react';
2
+ import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
3
+ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
4
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
+ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
6
+ import FloatingContextualButton from './FloatingContextualButton';
7
+ import FloatingContextualMenu from './FloatingContextualMenu';
8
+ import FloatingDeleteButton from './FloatingDeleteButton';
9
+ import FloatingDragMenu from './FloatingDragMenu';
10
+ // Ignored via go/ees005
11
+ // eslint-disable-next-line import/no-named-as-default
12
+ import FloatingInsertButton from './FloatingInsertButton';
13
+ import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
14
+ import { GlobalStylesWrapper } from './global-styles';
15
+ import { FullWidthDisplay } from './TableFullWidthLabel';
16
+ var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
17
+ var value = useSharedPluginStateSelector(api, "table.".concat(key));
18
+ return value;
19
+ };
20
+ var ContentComponentInternal = function ContentComponentInternal(_ref) {
21
+ var _api$analytics, _api$accessibilityUti;
22
+ var api = _ref.api,
23
+ editorView = _ref.editorView,
24
+ dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
25
+ options = _ref.options,
26
+ popupsMountPoint = _ref.popupsMountPoint,
27
+ popupsBoundariesElement = _ref.popupsBoundariesElement,
28
+ popupsScrollableElement = _ref.popupsScrollableElement,
29
+ defaultGetEditorContainerWidth = _ref.defaultGetEditorContainerWidth,
30
+ defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
31
+ var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
32
+ var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
33
+ var resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
34
+ var resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
35
+ var isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
36
+ var isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
37
+ var widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
38
+ var tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
39
+ var targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
40
+ var isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
41
+ var tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
42
+ var pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
43
+ var insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
44
+ var insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
45
+ var isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
46
+ var isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
47
+ var isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
48
+ var tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
49
+ var isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
50
+ var allowControls = pluginConfig.allowControls;
51
+ var stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
52
+ var dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
53
+ var dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
54
+ var isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
55
+ return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
56
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
57
+ editorView: editorView,
58
+ tableNode: tableNode,
59
+ mountPoint: popupsMountPoint,
60
+ targetCellPosition: targetCellPosition,
61
+ scrollableElement: popupsScrollableElement,
62
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
63
+ isContextualMenuOpen: isContextualMenuOpen,
64
+ stickyHeader: stickyHeader,
65
+ tableWrapper: tableWrapperTarget,
66
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
67
+ }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
68
+ tableNode: tableNode,
69
+ tableRef: tableRef,
70
+ insertColumnButtonIndex: insertColumnButtonIndex,
71
+ insertRowButtonIndex: insertRowButtonIndex,
72
+ isHeaderColumnEnabled: isHeaderColumnEnabled,
73
+ isHeaderRowEnabled: isHeaderRowEnabled,
74
+ isDragAndDropEnabled: isDragAndDropEnabled,
75
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
76
+ editorView: editorView,
77
+ mountPoint: popupsMountPoint,
78
+ boundariesElement: popupsBoundariesElement,
79
+ scrollableElement: popupsScrollableElement,
80
+ hasStickyHeaders: stickyHeader && stickyHeader.sticky,
81
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
82
+ editorAnalyticsAPI: editorAnalyticsAPI,
83
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
84
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
85
+ isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
86
+ api: api,
87
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
88
+ }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
89
+ editorView: editorView,
90
+ mountPoint: popupsMountPoint,
91
+ boundariesElement: popupsBoundariesElement,
92
+ targetCellPosition: targetCellPosition,
93
+ isOpen: Boolean(isContextualMenuOpen) && !isResizing,
94
+ pluginConfig: pluginConfig,
95
+ editorAnalyticsAPI: editorAnalyticsAPI,
96
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
97
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
98
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
99
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
100
+ api: api
101
+ }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
102
+ editorView: editorView,
103
+ mountPoint: popupsMountPoint,
104
+ boundariesElement: popupsBoundariesElement,
105
+ tableRef: tableRef,
106
+ tableNode: tableNode,
107
+ targetCellPosition: targetCellPosition,
108
+ direction: dragMenuDirection,
109
+ index: dragMenuIndex,
110
+ isOpen: !!isDragMenuOpen && !isResizing,
111
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
112
+ editorAnalyticsAPI: editorAnalyticsAPI,
113
+ stickyHeaders: stickyHeader,
114
+ pluginConfig: pluginConfig,
115
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
116
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
117
+ ariaNotifyPlugin: ariaNotifyPlugin,
118
+ api: api,
119
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
120
+ }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
121
+ editorView: editorView,
122
+ selection: editorView.state.selection,
123
+ tableRef: tableRef,
124
+ mountPoint: popupsMountPoint,
125
+ boundariesElement: popupsBoundariesElement,
126
+ scrollableElement: popupsScrollableElement,
127
+ stickyHeaders: stickyHeader,
128
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
129
+ editorAnalyticsAPI: editorAnalyticsAPI,
130
+ api: api
131
+ }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
132
+ target: resizingTableRef,
133
+ content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
134
+ alignX: 'center',
135
+ alignY: 'bottom',
136
+ stick: true,
137
+ forcePlacement: true,
138
+ zIndex: akEditorFloatingPanelZIndex,
139
+ offset: [0, 10]
140
+ }));
141
+ };
142
+ export var ContentComponent = function ContentComponent(_ref2) {
143
+ var _api$featureFlags;
144
+ var api = _ref2.api,
145
+ editorView = _ref2.editorView,
146
+ dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
147
+ options = _ref2.options,
148
+ popupsMountPoint = _ref2.popupsMountPoint,
149
+ popupsBoundariesElement = _ref2.popupsBoundariesElement,
150
+ popupsScrollableElement = _ref2.popupsScrollableElement,
151
+ defaultGetEditorContainerWidth = _ref2.defaultGetEditorContainerWidth,
152
+ defaultGetEditorFeatureFlags = _ref2.defaultGetEditorFeatureFlags;
153
+ return /*#__PURE__*/React.createElement(ErrorBoundary, {
154
+ component: ACTION_SUBJECT.TABLES_PLUGIN,
155
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
156
+ fallbackComponent: null
157
+ }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
158
+ featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
159
+ isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
160
+ api: api
161
+ }), /*#__PURE__*/React.createElement(ContentComponentInternal, {
162
+ api: api,
163
+ editorView: editorView,
164
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
165
+ options: options,
166
+ popupsMountPoint: popupsMountPoint,
167
+ popupsBoundariesElement: popupsBoundariesElement,
168
+ popupsScrollableElement: popupsScrollableElement,
169
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
170
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
171
+ }));
172
+ };
package/dist/types/types/index.d.ts CHANGED
@@ -8,6 +8,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
8
8
  import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
9
9
  import type { Rect } from '@atlaskit/editor-tables/table-map';
10
10
  import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
11
+ import { RowStickyState } from '../pm-plugins/sticky-headers/types';
11
12
  import type { TablePlugin } from '../tablePluginType';
12
13
  export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
13
14
  export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -33,10 +34,16 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
33
34
  };
34
35
  };
35
36
  };
36
- export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
37
+ export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'isDragAndDropEnabled' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
37
38
  isResizing: boolean;
38
39
  isTableResizing?: boolean;
39
40
  isWholeTableInDanger?: boolean;
41
+ resizingTableRef?: HTMLTableElement;
42
+ resizingTableLocalId?: string;
43
+ stickyHeader?: RowStickyState;
44
+ dragMenuDirection?: TableDirection;
45
+ dragMenuIndex?: number;
46
+ isDragMenuOpen?: boolean;
40
47
  };
41
48
  export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
42
49
  export type AlignmentOptions = 'center' | 'align-start';
package/dist/types/ui/ContentComponent.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
3
+ import { ExtractInjectionAPI, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
4
+ import { EditorView } from '@atlaskit/editor-prosemirror/view';
5
+ import { TablePlugin, TablePluginOptions } from '../tablePluginType';
6
+ export type ContentComponentProps = {
7
+ api: ExtractInjectionAPI<TablePlugin> | undefined;
8
+ editorView: EditorView;
9
+ dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
10
+ options?: TablePluginOptions;
11
+ popupsMountPoint?: HTMLElement;
12
+ popupsBoundariesElement?: HTMLElement;
13
+ popupsScrollableElement?: HTMLElement;
14
+ defaultGetEditorContainerWidth: GetEditorContainerWidth;
15
+ defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
16
+ };
17
+ export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;
package/dist/types-ts4.5/types/index.d.ts CHANGED
@@ -8,6 +8,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
8
8
  import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
9
9
  import type { Rect } from '@atlaskit/editor-tables/table-map';
10
10
  import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
11
+ import { RowStickyState } from '../pm-plugins/sticky-headers/types';
11
12
  import type { TablePlugin } from '../tablePluginType';
12
13
  export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
13
14
  export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -33,10 +34,16 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
33
34
  };
34
35
  };
35
36
  };
36
- export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
37
+ export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'isDragAndDropEnabled' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
37
38
  isResizing: boolean;
38
39
  isTableResizing?: boolean;
39
40
  isWholeTableInDanger?: boolean;
41
+ resizingTableRef?: HTMLTableElement;
42
+ resizingTableLocalId?: string;
43
+ stickyHeader?: RowStickyState;
44
+ dragMenuDirection?: TableDirection;
45
+ dragMenuIndex?: number;
46
+ isDragMenuOpen?: boolean;
40
47
  };
41
48
  export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
42
49
  export type AlignmentOptions = 'center' | 'align-start';
package/dist/types-ts4.5/ui/ContentComponent.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
3
+ import { ExtractInjectionAPI, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
4
+ import { EditorView } from '@atlaskit/editor-prosemirror/view';
5
+ import { TablePlugin, TablePluginOptions } from '../tablePluginType';
6
+ export type ContentComponentProps = {
7
+ api: ExtractInjectionAPI<TablePlugin> | undefined;
8
+ editorView: EditorView;
9
+ dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
10
+ options?: TablePluginOptions;
11
+ popupsMountPoint?: HTMLElement;
12
+ popupsBoundariesElement?: HTMLElement;
13
+ popupsScrollableElement?: HTMLElement;
14
+ defaultGetEditorContainerWidth: GetEditorContainerWidth;
15
+ defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
16
+ };
17
+ export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "10.8.3",
3
+ "version": "10.9.0",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
55
55
  "@atlaskit/primitives": "^14.4.0",
56
56
  "@atlaskit/theme": "^18.0.0",
57
- "@atlaskit/tmp-editor-statsig": "^4.12.0",
57
+ "@atlaskit/tmp-editor-statsig": "^4.13.0",
58
58
  "@atlaskit/toggle": "^15.0.0",
59
59
  "@atlaskit/tokens": "^4.8.0",
60
60
  "@atlaskit/tooltip": "^20.0.0",
package/src/tablePlugin.tsx CHANGED
@@ -50,7 +50,6 @@ import { createPlugin as createDragAndDropPlugin } from './pm-plugins/drag-and-d
50
50
  import { pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop/plugin-key';
51
51
  import { keymapPlugin } from './pm-plugins/keymap';
52
52
  import { createPlugin } from './pm-plugins/main';
53
- import { getPluginState } from './pm-plugins/plugin-factory';
54
53
  import { pluginKey } from './pm-plugins/plugin-key';
55
54
  import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
56
55
  import { createPlugin as createStickyHeadersPlugin } from './pm-plugins/sticky-headers/plugin';
@@ -74,7 +73,8 @@ import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins
74
73
  import { createTableWithWidth } from './pm-plugins/utils/create';
75
74
  import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
76
75
  import type { TablePlugin, TablePluginOptions } from './tablePluginType';
77
- import type { ColumnResizingPluginState } from './types';
76
+ import type { ColumnResizingPluginState, TableSharedStateInternal } from './types';
77
+ import { ContentComponent } from './ui/ContentComponent';
78
78
  import FloatingContextualButton from './ui/FloatingContextualButton';
79
79
  import FloatingContextualMenu from './ui/FloatingContextualMenu';
80
80
  import FloatingDeleteButton from './ui/FloatingDeleteButton';
@@ -133,11 +133,19 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
133
133
  return undefined;
134
134
  }
135
135
 
136
- const tablePluginState = getPluginState(editorState);
136
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
137
+ const tablePluginState = pluginKey.getState(editorState)!;
137
138
  const tableResizingPluginState = getFlexiResizingPlugin(editorState);
138
139
  const tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
139
140
 
140
- return {
141
+ const stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
142
+ const stickyHeader = stickyHeadersState
143
+ ? findStickyHeaderForTable(stickyHeadersState, tablePluginState?.tablePos)
144
+ : undefined;
145
+
146
+ const dragAndDropState = dragAndDropPluginKey.getState(editorState);
147
+
148
+ const sharedStateInternal: TableSharedStateInternal = {
141
149
  isFullWidthModeEnabled: !!options?.fullWidthEnabled,
142
150
  wasFullWidthModeEnabled: !!options?.wasFullWidthEnabled,
143
151
  isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
@@ -157,7 +165,25 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
157
165
  // TableComponent listens for node attribute changes to update colgroups
158
166
  tableNode: tablePluginState.tableNode,
159
167
  widthToWidest: tablePluginState.widthToWidest,
168
+ resizingTableLocalId: tableWidthResizingPluginState?.tableLocalId,
169
+ tableRef: tablePluginState?.tableRef ?? undefined,
170
+ resizingTableRef: tableWidthResizingPluginState?.tableRef ?? undefined,
171
+ tablePos: tablePluginState.tablePos,
172
+ targetCellPosition: tablePluginState.targetCellPosition,
173
+ isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
174
+ pluginConfig: tablePluginState.pluginConfig,
175
+ insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
176
+ insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
177
+ isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
178
+ tableWrapperTarget: tablePluginState.tableWrapperTarget,
179
+ isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
180
+ stickyHeader,
181
+ dragMenuDirection: dragAndDropState?.dragMenuDirection,
182
+ dragMenuIndex: dragAndDropState?.dragMenuIndex,
183
+ isDragMenuOpen: dragAndDropState?.isDragMenuOpen,
160
184
  };
185
+
186
+ return sharedStateInternal;
161
187
  },
162
188
 
163
189
  actions: {
@@ -529,6 +555,22 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
529
555
  popupsScrollableElement,
530
556
  dispatchAnalyticsEvent,
531
557
  }) {
558
+ if (editorExperiment('platform_editor_usesharedpluginstateselector', true)) {
559
+ return (
560
+ <ContentComponent
561
+ api={api}
562
+ editorView={editorView}
563
+ dispatchAnalyticsEvent={dispatchAnalyticsEvent}
564
+ options={options}
565
+ popupsMountPoint={popupsMountPoint}
566
+ popupsBoundariesElement={popupsBoundariesElement}
567
+ popupsScrollableElement={popupsScrollableElement}
568
+ defaultGetEditorContainerWidth={defaultGetEditorContainerWidth}
569
+ defaultGetEditorFeatureFlags={defaultGetEditorFeatureFlags}
570
+ />
571
+ );
572
+ }
573
+
532
574
  return (
533
575
  <ErrorBoundary
534
576
  component={ACTION_SUBJECT.TABLES_PLUGIN}
package/src/types/index.ts CHANGED
@@ -15,6 +15,7 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
15
15
  import type { Rect } from '@atlaskit/editor-tables/table-map';
16
16
  import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
17
17
 
18
+ import { RowStickyState } from '../pm-plugins/sticky-headers/types';
18
19
  import type { TablePlugin } from '../tablePluginType';
19
20
 
20
21
  export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
@@ -58,10 +59,26 @@ export type TableSharedStateInternal = Pick<
58
59
  | 'isTableHovered'
59
60
  | 'tableNode'
60
61
  | 'widthToWidest'
62
+ | 'tableRef'
63
+ | 'tablePos'
64
+ | 'targetCellPosition'
65
+ | 'isContextualMenuOpen'
66
+ | 'pluginConfig'
67
+ | 'insertColumnButtonIndex'
68
+ | 'insertRowButtonIndex'
69
+ | 'isDragAndDropEnabled'
70
+ | 'tableWrapperTarget'
71
+ | 'isCellMenuOpenByKeyboard'
61
72
  > & {
62
73
  isResizing: boolean;
63
74
  isTableResizing?: boolean;
64
75
  isWholeTableInDanger?: boolean;
76
+ resizingTableRef?: HTMLTableElement;
77
+ resizingTableLocalId?: string;
78
+ stickyHeader?: RowStickyState;
79
+ dragMenuDirection?: TableDirection;
80
+ dragMenuIndex?: number;
81
+ isDragMenuOpen?: boolean;
65
82
  };
66
83
 
67
84
  export type TableSharedState = Pick<
package/src/ui/ContentComponent.tsx ADDED
@@ -0,0 +1,249 @@
1
+ import React from 'react';
2
+
3
+ import { ACTION_SUBJECT, DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
4
+ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
5
+ import {
6
+ ExtractInjectionAPI,
7
+ GetEditorContainerWidth,
8
+ GetEditorFeatureFlags,
9
+ } from '@atlaskit/editor-common/types';
10
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
11
+ import { EditorView } from '@atlaskit/editor-prosemirror/view';
12
+ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
13
+
14
+ import { TablePlugin, TablePluginOptions } from '../tablePluginType';
15
+ import { TableSharedStateInternal } from '../types';
16
+
17
+ import FloatingContextualButton from './FloatingContextualButton';
18
+ import FloatingContextualMenu from './FloatingContextualMenu';
19
+ import FloatingDeleteButton from './FloatingDeleteButton';
20
+ import FloatingDragMenu from './FloatingDragMenu';
21
+ // Ignored via go/ees005
22
+ // eslint-disable-next-line import/no-named-as-default
23
+ import FloatingInsertButton from './FloatingInsertButton';
24
+ import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
25
+ import { GlobalStylesWrapper } from './global-styles';
26
+ import { FullWidthDisplay } from './TableFullWidthLabel';
27
+
28
+ const useSharedTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
29
+ api: ExtractInjectionAPI<TablePlugin> | undefined,
30
+ key: K,
31
+ ) => {
32
+ const value = useSharedPluginStateSelector(
33
+ api,
34
+ `table.${key}` as never,
35
+ ) as TableSharedStateInternal[K];
36
+ return value;
37
+ };
38
+
39
+ export type ContentComponentProps = {
40
+ api: ExtractInjectionAPI<TablePlugin> | undefined;
41
+ editorView: EditorView;
42
+ dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
43
+ options?: TablePluginOptions;
44
+ popupsMountPoint?: HTMLElement;
45
+ popupsBoundariesElement?: HTMLElement;
46
+ popupsScrollableElement?: HTMLElement;
47
+ defaultGetEditorContainerWidth: GetEditorContainerWidth;
48
+ defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
49
+ };
50
+
51
+ const ContentComponentInternal = ({
52
+ api,
53
+ editorView,
54
+ dispatchAnalyticsEvent,
55
+ options,
56
+ popupsMountPoint,
57
+ popupsBoundariesElement,
58
+ popupsScrollableElement,
59
+ defaultGetEditorContainerWidth,
60
+ defaultGetEditorFeatureFlags,
61
+ }: ContentComponentProps) => {
62
+ const editorAnalyticsAPI = api?.analytics?.actions;
63
+ const ariaNotifyPlugin = api?.accessibilityUtils?.actions.ariaNotify;
64
+
65
+ const resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
66
+ const resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
67
+ const isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
68
+ const isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
69
+ const widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
70
+
71
+ const tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
72
+ const targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
73
+ const isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
74
+ const tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
75
+ const pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
76
+ const insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
77
+ const insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
78
+ const isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
79
+ const isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
80
+ const isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
81
+ const tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
82
+ const isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(
83
+ api,
84
+ 'isCellMenuOpenByKeyboard',
85
+ );
86
+
87
+ const { allowControls } = pluginConfig;
88
+
89
+ const stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
90
+
91
+ const dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
92
+ const dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
93
+ const isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
94
+
95
+ return (
96
+ <>
97
+ {targetCellPosition &&
98
+ (tableRef || isCellMenuOpenByKeyboard) &&
99
+ !isResizing &&
100
+ options &&
101
+ options.allowContextualMenu && (
102
+ <FloatingContextualButton
103
+ isNumberColumnEnabled={tableNode && tableNode.attrs.isNumberColumnEnabled}
104
+ editorView={editorView}
105
+ tableNode={tableNode}
106
+ mountPoint={popupsMountPoint}
107
+ targetCellPosition={targetCellPosition}
108
+ scrollableElement={popupsScrollableElement}
109
+ dispatchAnalyticsEvent={dispatchAnalyticsEvent}
110
+ isContextualMenuOpen={isContextualMenuOpen}
111
+ stickyHeader={stickyHeader}
112
+ tableWrapper={tableWrapperTarget}
113
+ isCellMenuOpenByKeyboard={isCellMenuOpenByKeyboard}
114
+ />
115
+ )}
116
+ {allowControls && (
117
+ <FloatingInsertButton
118
+ tableNode={tableNode}
119
+ tableRef={tableRef}
120
+ insertColumnButtonIndex={insertColumnButtonIndex}
121
+ insertRowButtonIndex={insertRowButtonIndex}
122
+ isHeaderColumnEnabled={isHeaderColumnEnabled}
123
+ isHeaderRowEnabled={isHeaderRowEnabled}
124
+ isDragAndDropEnabled={isDragAndDropEnabled}
125
+ isTableScalingEnabled={options?.isTableScalingEnabled}
126
+ editorView={editorView}
127
+ mountPoint={popupsMountPoint}
128
+ boundariesElement={popupsBoundariesElement}
129
+ scrollableElement={popupsScrollableElement}
130
+ hasStickyHeaders={stickyHeader && stickyHeader.sticky}
131
+ dispatchAnalyticsEvent={dispatchAnalyticsEvent}
132
+ editorAnalyticsAPI={editorAnalyticsAPI}
133
+ getEditorContainerWidth={defaultGetEditorContainerWidth}
134
+ getEditorFeatureFlags={options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags}
135
+ isChromelessEditor={options?.isChromelessEditor}
136
+ api={api}
137
+ isCommentEditor={options?.isCommentEditor}
138
+ />
139
+ )}
140
+ {options?.allowContextualMenu && (
141
+ <FloatingContextualMenu
142
+ editorView={editorView}
143
+ mountPoint={popupsMountPoint}
144
+ boundariesElement={popupsBoundariesElement}
145
+ targetCellPosition={targetCellPosition}
146
+ isOpen={Boolean(isContextualMenuOpen) && !isResizing}
147
+ pluginConfig={pluginConfig}
148
+ editorAnalyticsAPI={editorAnalyticsAPI}
149
+ getEditorContainerWidth={defaultGetEditorContainerWidth}
150
+ getEditorFeatureFlags={options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags}
151
+ isCellMenuOpenByKeyboard={isCellMenuOpenByKeyboard}
152
+ isCommentEditor={options?.isCommentEditor}
153
+ api={api}
154
+ />
155
+ )}
156
+ {isDragAndDropEnabled && (
157
+ <FloatingDragMenu
158
+ editorView={editorView}
159
+ mountPoint={popupsMountPoint}
160
+ boundariesElement={popupsBoundariesElement}
161
+ tableRef={tableRef as HTMLTableElement}
162
+ tableNode={tableNode}
163
+ targetCellPosition={targetCellPosition}
164
+ direction={dragMenuDirection}
165
+ index={dragMenuIndex}
166
+ isOpen={!!isDragMenuOpen && !isResizing}
167
+ getEditorContainerWidth={defaultGetEditorContainerWidth}
168
+ editorAnalyticsAPI={editorAnalyticsAPI}
169
+ stickyHeaders={stickyHeader}
170
+ pluginConfig={pluginConfig}
171
+ isTableScalingEnabled={options?.isTableScalingEnabled}
172
+ getEditorFeatureFlags={options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags}
173
+ ariaNotifyPlugin={ariaNotifyPlugin}
174
+ api={api}
175
+ isCommentEditor={options?.isCommentEditor}
176
+ />
177
+ )}
178
+ {allowControls && !isDragAndDropEnabled && !isResizing && (
179
+ <FloatingDeleteButton
180
+ editorView={editorView}
181
+ selection={editorView.state.selection}
182
+ tableRef={tableRef as HTMLTableElement}
183
+ mountPoint={popupsMountPoint}
184
+ boundariesElement={popupsBoundariesElement}
185
+ scrollableElement={popupsScrollableElement}
186
+ stickyHeaders={stickyHeader}
187
+ isNumberColumnEnabled={tableNode && tableNode.attrs.isNumberColumnEnabled}
188
+ editorAnalyticsAPI={editorAnalyticsAPI}
189
+ api={api}
190
+ />
191
+ )}
192
+ {(options?.isTableScalingEnabled ||
193
+ (options?.tableOptions.allowTableResizing && options.isCommentEditor)) &&
194
+ isTableResizing &&
195
+ widthToWidest &&
196
+ resizingTableLocalId &&
197
+ resizingTableRef &&
198
+ widthToWidest[resizingTableLocalId] && (
199
+ <FloatingToolbarLabel
200
+ target={resizingTableRef}
201
+ content={<FullWidthDisplay />}
202
+ alignX={'center'}
203
+ alignY={'bottom'}
204
+ stick={true}
205
+ forcePlacement={true}
206
+ zIndex={akEditorFloatingPanelZIndex}
207
+ offset={[0, 10]}
208
+ />
209
+ )}
210
+ </>
211
+ );
212
+ };
213
+
214
+ export const ContentComponent = ({
215
+ api,
216
+ editorView,
217
+ dispatchAnalyticsEvent,
218
+ options,
219
+ popupsMountPoint,
220
+ popupsBoundariesElement,
221
+ popupsScrollableElement,
222
+ defaultGetEditorContainerWidth,
223
+ defaultGetEditorFeatureFlags,
224
+ }: ContentComponentProps) => {
225
+ return (
226
+ <ErrorBoundary
227
+ component={ACTION_SUBJECT.TABLES_PLUGIN}
228
+ dispatchAnalyticsEvent={dispatchAnalyticsEvent}
229
+ fallbackComponent={null}
230
+ >
231
+ <GlobalStylesWrapper
232
+ featureFlags={api?.featureFlags?.sharedState.currentState()}
233
+ isDragAndDropEnabledOption={options?.dragAndDropEnabled}
234
+ api={api}
235
+ />
236
+ <ContentComponentInternal
237
+ api={api}
238
+ editorView={editorView}
239
+ dispatchAnalyticsEvent={dispatchAnalyticsEvent}
240
+ options={options}
241
+ popupsMountPoint={popupsMountPoint}
242
+ popupsBoundariesElement={popupsBoundariesElement}
243
+ popupsScrollableElement={popupsScrollableElement}
244
+ defaultGetEditorContainerWidth={defaultGetEditorContainerWidth}
245
+ defaultGetEditorFeatureFlags={defaultGetEditorFeatureFlags}
246
+ />
247
+ </ErrorBoundary>
248
+ );
249
+ };